['fill'];
+
+export type Props = {
+ variant?: Variant;
+ size?: Size;
+ fill?: Fill;
+ disabled?: boolean;
+};
diff --git a/src/lib/components/ui/note/note.svelte b/src/lib/components/ui/note/note.svelte
new file mode 100644
index 0000000..3a3f688
--- /dev/null
+++ b/src/lib/components/ui/note/note.svelte
@@ -0,0 +1,36 @@
+
+
+
+
+
+ {#if variant === 'secondary' || variant === 'violet' || variant === 'cyan'}
+
+
+
+
note
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/routes/note/+page.ts b/src/routes/note/+page.ts
new file mode 100644
index 0000000..8a0fa7c
--- /dev/null
+++ b/src/routes/note/+page.ts
@@ -0,0 +1,21 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+ const title = 'Note';
+ const description = 'Display text that requires attention or provides additional information.';
+
+ const pageMetaTags = Object.freeze({
+ title,
+ description,
+ openGraph: {
+ title,
+ description
+ }
+ }) satisfies MetaTagsProps;
+
+ return {
+ pageMetaTags,
+ title,
+ description
+ };
+}
diff --git a/src/routes/note/action.svelte b/src/routes/note/action.svelte
new file mode 100644
index 0000000..71dd18a
--- /dev/null
+++ b/src/routes/note/action.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+ This note details some information.
+ Upgrade
+
+
+ This note details a large amount information that could potentially wrap into two or more lines,
+ forcing the height of the Note to be larger.
+ Upgrade
+
+
diff --git a/src/routes/note/cyan.svelte b/src/routes/note/cyan.svelte
new file mode 100644
index 0000000..d90d5da
--- /dev/null
+++ b/src/routes/note/cyan.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some cyan information.
+
+ This note details some cyan information.
+ Upgrade
+
+
+ This note details some cyan information. Check Upgrade
+
+ This filled note details some cyan information.
+
+ This filled note details some cyan information.
+ Upgrade
+
+
+ This filled note details some cyan information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/default.svelte b/src/routes/note/default.svelte
new file mode 100644
index 0000000..18124d0
--- /dev/null
+++ b/src/routes/note/default.svelte
@@ -0,0 +1,9 @@
+
+
+
+ A small note.
+ A default note.
+ A large note.
+
diff --git a/src/routes/note/disabled.svelte b/src/routes/note/disabled.svelte
new file mode 100644
index 0000000..7421ab3
--- /dev/null
+++ b/src/routes/note/disabled.svelte
@@ -0,0 +1,17 @@
+
+
+
+
+ This note details a warning.
+ Upgrade
+
+
+ This filled note details some success information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/error.svelte b/src/routes/note/error.svelte
new file mode 100644
index 0000000..d87b30c
--- /dev/null
+++ b/src/routes/note/error.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some error information.
+
+ This note details some error information.
+ Upgrade
+
+
+ This note details some error information. Check Upgrade
+
+ This filled note details some error information.
+
+ This filled note details some error information.
+ Upgrade
+
+
+ This filled note details some error information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/secondary.svelte b/src/routes/note/secondary.svelte
new file mode 100644
index 0000000..dbe00e5
--- /dev/null
+++ b/src/routes/note/secondary.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some secondary information.
+
+ This note details some secondary information.
+ Upgrade
+
+
+ This note details some secondary information. Check Upgrade
+
+ This filled note details some secondary information.
+
+ This filled note details some secondary information.
+ Upgrade
+
+
+ This filled note details some secondary information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/success.svelte b/src/routes/note/success.svelte
new file mode 100644
index 0000000..879f9c6
--- /dev/null
+++ b/src/routes/note/success.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some success information.
+
+ This note details some success information.
+ Upgrade
+
+
+ This note details some success information. Check Upgrade
+
+ This filled note details some success information.
+
+ This filled note details some success information.
+ Upgrade
+
+
+ This filled note details some success information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/violet.svelte b/src/routes/note/violet.svelte
new file mode 100644
index 0000000..1a42ffb
--- /dev/null
+++ b/src/routes/note/violet.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some violet information.
+
+ This note details some violet information.
+ Upgrade
+
+
+ This note details some violet information. Check Upgrade
+
+ This filled note details some violet information.
+
+ This filled note details some violet information.
+ Upgrade
+
+
+ This filled note details some violet information. Check
+ Upgrade
+
+
diff --git a/src/routes/note/warning.svelte b/src/routes/note/warning.svelte
new file mode 100644
index 0000000..152d70e
--- /dev/null
+++ b/src/routes/note/warning.svelte
@@ -0,0 +1,28 @@
+
+
+
+ This note details some warning information.
+
+ This note details some warning information.
+ Upgrade
+
+
+ This note details some warning information. Check Upgrade
+
+ This filled note details some warning information.
+
+ This filled note details some warning information.
+ Upgrade
+
+
+ This filled note details some warning information. Check
+ Upgrade
+
+
From 9ce91346c67b525ebaba7632d3a7f59175fd9f16 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Tue, 30 Jul 2024 14:16:26 +0200
Subject: [PATCH 2/6] disabled
---
src/lib/components/ui/note/index.ts | 2 +-
src/lib/components/ui/note/note.svelte | 2 +-
src/routes/note/disabled.svelte | 4 ++--
3 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/lib/components/ui/note/index.ts b/src/lib/components/ui/note/index.ts
index 3c7fff6..eccedb1 100644
--- a/src/lib/components/ui/note/index.ts
+++ b/src/lib/components/ui/note/index.ts
@@ -3,7 +3,7 @@ import { type VariantProps, tv } from 'tailwind-variants';
export { default as Note } from './note.svelte';
export const note_variants = tv({
- base: 'flex grow items-center justify-between gap-3 text-pretty rounded-md border data-[disabled=true]:border-gray-alpha-200 data-[disabled=true]:bg-transparent data-[disabled=true]:text-gray-700 [&>div>a]:hover:underline [&>div>a]:data-[disabled=true]:text-gray-900',
+ base: 'flex grow items-center justify-between gap-3 text-pretty rounded-md border data-[disabled=true]:border-gray-alpha-200 data-[disabled=true]:bg-transparent data-[disabled=true]:text-gray-700 hover:[&>div>a]:underline [&>div>a]:data-[disabled=true]:text-gray-900',
variants: {
variant: {
secondary: 'bg-transparent text-gray-900 selection:bg-gray-700 [&>div>a]:text-gray-1000',
diff --git a/src/lib/components/ui/note/note.svelte b/src/lib/components/ui/note/note.svelte
index 3a3f688..b58a490 100644
--- a/src/lib/components/ui/note/note.svelte
+++ b/src/lib/components/ui/note/note.svelte
@@ -32,5 +32,5 @@
This note details a warning.
- Upgrade
+ Upgrade
This filled note details some success information. Check
Upgrade
+ Upgrade
From 77c7e6e10e37d781f7f800458ac322053dfa1f21 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Tue, 30 Jul 2024 14:49:36 +0200
Subject: [PATCH 3/6] labels
---
src/lib/components/ui/note/index.ts | 16 +++++----
src/lib/components/ui/note/note.svelte | 31 ++++++++++-------
src/routes/note/+page.svelte | 6 ++++
src/routes/note/labels.svelte | 47 ++++++++++++++++++++++++++
4 files changed, 81 insertions(+), 19 deletions(-)
create mode 100644 src/routes/note/labels.svelte
diff --git a/src/lib/components/ui/note/index.ts b/src/lib/components/ui/note/index.ts
index eccedb1..1e216a0 100644
--- a/src/lib/components/ui/note/index.ts
+++ b/src/lib/components/ui/note/index.ts
@@ -3,16 +3,17 @@ import { type VariantProps, tv } from 'tailwind-variants';
export { default as Note } from './note.svelte';
export const note_variants = tv({
- base: 'flex grow items-center justify-between gap-3 text-pretty rounded-md border data-[disabled=true]:border-gray-alpha-200 data-[disabled=true]:bg-transparent data-[disabled=true]:text-gray-700 hover:[&>div>a]:underline [&>div>a]:data-[disabled=true]:text-gray-900',
+ base: 'flex grow flex-wrap items-center justify-between gap-3 text-pretty rounded-md border data-[disabled=true]:border-gray-alpha-200 data-[disabled=true]:bg-transparent data-[disabled=true]:text-gray-700 hover:[&>div>div>a]:underline [&>div>div>a]:data-[disabled=true]:text-gray-900',
variants: {
variant: {
- secondary: 'bg-transparent text-gray-900 selection:bg-gray-700 [&>div>a]:text-gray-1000',
- success: 'border-blue-400 text-blue-900 selection:bg-blue-700 [&>div>a]:text-blue-1000',
- error: 'border-red-400 text-red-900 selection:bg-red-700 [&>div>a]:text-red-1000',
- warning: 'border-amber-400 text-amber-900 selection:bg-amber-700 [&>div>a]:text-amber-1000',
+ secondary: 'bg-transparent text-gray-900 selection:bg-gray-700 [&>div>div>a]:text-gray-1000',
+ success: 'border-blue-400 text-blue-900 selection:bg-blue-700 [&>div>div>a]:text-blue-1000',
+ error: 'border-red-400 text-red-900 selection:bg-red-700 [&>div>div>a]:text-red-1000',
+ warning:
+ 'border-amber-400 text-amber-900 selection:bg-amber-700 [&>div>div>a]:text-amber-1000',
violet:
- 'border-purple-400 text-purple-900 selection:bg-purple-700 [&>div>a]:text-purple-1000',
- cyan: 'border-teal-400 text-teal-900 selection:bg-teal-700 [&>div>a]:text-teal-1000'
+ 'border-purple-400 text-purple-900 selection:bg-purple-700 [&>div>div>a]:text-purple-1000',
+ cyan: 'border-teal-400 text-teal-900 selection:bg-teal-700 [&>div>div>a]:text-teal-1000'
},
size: {
sm: 'min-h-[34px] px-2 py-1.5 text-[13px] leading-6',
@@ -45,4 +46,5 @@ export type Props = {
size?: Size;
fill?: Fill;
disabled?: boolean;
+ label?: string | boolean;
};
diff --git a/src/lib/components/ui/note/note.svelte b/src/lib/components/ui/note/note.svelte
index b58a490..7ced4ef 100644
--- a/src/lib/components/ui/note/note.svelte
+++ b/src/lib/components/ui/note/note.svelte
@@ -10,6 +10,7 @@
export let size: $$Props['size'] = 'md';
export let fill: $$Props['fill'] = false;
export let disabled: $$Props['disabled'] = false;
+ export let label: $$Props['label'] = undefined;
export { class_name as class };
@@ -19,18 +20,24 @@
{...$$restProps}
>
-
- {#if variant === 'secondary' || variant === 'violet' || variant === 'cyan'}
-
-
+ {#if label}
+
{label}
+ {:else if label !== false}
+
+ {#if variant === 'secondary' || variant === 'violet' || variant === 'cyan'}
+
+ {/if}
+
+
+
+
+
diff --git a/src/routes/note/labels.svelte b/src/routes/note/labels.svelte
new file mode 100644
index 0000000..3d43f0c
--- /dev/null
+++ b/src/routes/note/labels.svelte
@@ -0,0 +1,47 @@
+
+
+
+
+
Default label
+ {#each variants as variant}
+ This is a note of variant `{variant}`.
+
+
+ This is a fill note of variant `{variant}`.
+
+ {/each}
+
+
+
+
Custom label
+ {#each variants as variant}
+ This is a note of variant `{variant}`.
+
+
+ This is a fill note of variant `{variant}`.
+
+ {/each}
+
+
+
+
No label
+ {#each variants as variant}
+ This is a note of variant `{variant}`.
+
+
+ This is a fill note of variant `{variant}`.
+
+ {/each}
+
+
{#if label}
-
{label}
+
{label}:
{:else if label !== false}
{#if variant === 'secondary' || variant === 'violet' || variant === 'cyan'}
From 2a225e1e849fcee4449077b6ce09db91dc071fb3 Mon Sep 17 00:00:00 2001
From: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>
Date: Tue, 30 Jul 2024 15:15:45 +0200
Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=98=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/routes/note/default.svelte | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/routes/note/default.svelte b/src/routes/note/default.svelte
index 18124d0..3c23194 100644
--- a/src/routes/note/default.svelte
+++ b/src/routes/note/default.svelte
@@ -2,7 +2,7 @@
import { Note } from '$lib/components/ui/note';
-
+
A small note.
A default note.
A large note.