component: Note

src/lib/assets/icons/index.ts

@@ -9,6 +9,7 @@ import BrandAssets from './brand-assets.svg?component';
 import ChartBarMiddle from './chart-bar-middle.svg?component';
 import ChartBarPeak from './chart-bar-peak.svg?component';
 import ChartTrendingDown from './chart-trending-down.svg?component';
+import CheckCircle from './check-circle.svg?component';
 import Check from './check.svg?component';
 import ChevronLeft from './chevron-left.svg?component';
 import ChevronRightSmall from './chevron-right-small.svg?component';
@@ -29,6 +30,7 @@ import GitBranch from './git-branch.svg?component';
 import Globe from './globe.svg?component';
 import GridSquare from './grid-square.svg?component';
 import Inbox from './inbox.svg?component';
+import Information from './information.svg?component';
 import Key from './key.svg?component';
 import Link from './link.svg?component';
 import LoaderCircle from './loader-circle.svg?component';
@@ -56,6 +58,7 @@ import Tabs from './tabs.svg?component';
 import ThemeSwitchDark from './theme-switch-dark.svg?component';
 import ThemeSwitchLight from './theme-switch-light.svg?component';
 import ThemeSwitchSystem from './theme-switch-system.svg?component';
+import Warning from './warning.svg?component';
 
 export const Icons = {
 	Accessibility,
@@ -69,6 +72,7 @@ export const Icons = {
 	ChartBarMiddle,
 	ChartBarPeak,
 	ChartTrendingDown,
+	CheckCircle,
 	Check,
 	ChevronLeft,
 	ChevronRightSmall,
@@ -89,6 +93,7 @@ export const Icons = {
 	Globe,
 	GridSquare,
 	Inbox,
+	Information,
 	Key,
 	Link,
 	LoaderCircle,
@@ -115,5 +120,6 @@ export const Icons = {
 	Tabs,
 	ThemeSwitchDark,
 	ThemeSwitchLight,
-	ThemeSwitchSystem
+	ThemeSwitchSystem,
+	Warning
 };

src/lib/components/ui/note/index.ts

@@ -0,0 +1,50 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+
+export { default as Note } from './note.svelte';
+
+export const note_variants = tv({
+	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 sm:flex-nowrap 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>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>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',
+			md: 'min-h-10 px-3 py-2 text-[14px] leading-6',
+			lg: 'min-h-12 px-3 py-[11px] text-base'
+		},
+		fill: { true: true, false: false }
+	},
+	compoundVariants: [
+		{ variant: 'secondary', fill: true, class: 'bg-gray-200' },
+		{ variant: 'success', fill: true, class: 'bg-blue-200' },
+		{ variant: 'error', fill: true, class: 'bg-red-200' },
+		{ variant: 'warning', fill: true, class: 'bg-amber-200' },
+		{ variant: 'violet', fill: true, class: 'bg-purple-200' },
+		{ variant: 'cyan', fill: true, class: 'bg-teal-200' }
+	],
+	defaultVariants: {
+		variant: 'secondary',
+		size: 'md',
+		fill: false
+	}
+});
+
+type Variant = VariantProps<typeof note_variants>['variant'];
+type Size = VariantProps<typeof note_variants>['size'];
+type Fill = VariantProps<typeof note_variants>['fill'];
+
+export type Props = {
+	variant?: Variant;
+	size?: Size;
+	fill?: Fill;
+	disabled?: boolean;
+	label?: string | boolean;
+};

src/lib/components/ui/note/note.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons/index.js';
+	import { cn } from '$lib/utils.js';
+	import { type Props, note_variants } from './index.js';
+
+	type $$Props = Props;
+
+	let class_name: string | undefined | null = undefined;
+	export let variant: $$Props['variant'] = 'secondary';
+	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 };
+</script>
+
+<div
+	data-disabled={disabled}
+	class={cn(note_variants({ variant, size, className: class_name, fill }))}
+	{...$$restProps}
+>
+	<div class="flex items-center gap-2">
+		{#if label}
+			<span class="font-semibold">{label}:</span>
+		{:else if label !== false}
+			<span class="h-4">
+				{#if variant === 'secondary' || variant === 'violet' || variant === 'cyan'}
+					<Icons.Information aria-hidden="true" class="size-4" />
+				{:else if variant === 'success'}
+					<Icons.CheckCircle aria-hidden="true" class="size-4" />
+				{:else if variant === 'error'}
+					<Icons.Stop aria-hidden="true" class="size-4" />
+				{:else if variant === 'warning'}
+					<Icons.Warning aria-hidden="true" class="size-4" />
+				{/if}
+			</span>
+		{/if}
+		<div>
+			<slot />
+		</div>
+	</div>
+	<slot name="action" {disabled}></slot>
+</div>

src/lib/config/sitemap.ts

@@ -170,7 +170,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Note',
 			href: '/note',
-			status: 'soon'
+			status: 'draft'
 		},
 		{
 			title: 'Pagination',

src/routes/note/+page.svelte

@@ -1 +1,68 @@
-<h1>note</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Action from './action.svelte';
+	import action_code from './action.svelte?raw';
+	import Cyan from './cyan.svelte';
+	import cyan_code from './cyan.svelte?raw';
+	import Default from './default.svelte';
+	import default_code from './default.svelte?raw';
+	import Disabled from './disabled.svelte';
+	import disabled_code from './disabled.svelte?raw';
+	import Error from './error.svelte';
+	import error_code from './error.svelte?raw';
+	import Labels from './labels.svelte';
+	import labels_code from './labels.svelte?raw';
+	import Secondary from './secondary.svelte';
+	import secondary_code from './secondary.svelte?raw';
+	import Success from './success.svelte';
+	import success_code from './success.svelte?raw';
+	import Violet from './violet.svelte';
+	import violet_code from './violet.svelte?raw';
+	import Warning from './warning.svelte';
+	import warning_code from './warning.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="default" code={default_code}>
+		<Default />
+	</Demo>
+
+	<Demo id="action" code={action_code}>
+		<Action />
+	</Demo>
+
+	<Demo id="success" code={success_code}>
+		<Success />
+	</Demo>
+
+	<Demo id="error" code={error_code}>
+		<Error />
+	</Demo>
+
+	<Demo id="warning" code={warning_code}>
+		<Warning />
+	</Demo>
+
+	<Demo id="secondary" code={secondary_code}>
+		<Secondary />
+	</Demo>
+
+	<Demo id="violet" code={violet_code}>
+		<Violet />
+	</Demo>
+
+	<Demo id="cyan" code={cyan_code}>
+		<Cyan />
+	</Demo>
+
+	<Demo id="disabled" code={disabled_code}>
+		<Disabled />
+	</Demo>
+
+	<Demo id="labels" code={labels_code}>
+		<Labels />
+	</Demo>
+</PageWrapper>

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
+	};
+}

src/routes/note/action.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Note } from '$lib/components/ui/note';
+</script>
+
+<div class="grid place-items-start gap-6">
+	<Note>
+		This note details some information.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note>
+		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.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+</div>

src/routes/note/cyan.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Link } from '$lib/components/ui/link';
+	import { Note } from '$lib/components/ui/note';
+</script>
+
+<div class="grid gap-6">
+	<Note variant="cyan">This note details some cyan information.</Note>
+	<Note variant="cyan">
+		This note details some cyan information.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note variant="cyan">
+		This note details some cyan information. Check <Link href="/#">the documentation</Link> to learn
+		more.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note fill variant="cyan">This filled note details some cyan information.</Note>
+	<Note fill variant="cyan">
+		This filled note details some cyan information.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note fill variant="cyan">
+		This filled note details some cyan information. Check
+		<Link href="/#">the documentation</Link> to learn more.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+</div>

src/routes/note/default.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Note } from '$lib/components/ui/note';
+</script>
+
+<div class="flex items-start gap-6">
+	<Note size="sm">A small note.</Note>
+	<Note>A default note.</Note>
+	<Note size="lg">A large note.</Note>
+</div>

src/routes/note/disabled.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Link } from '$lib/components/ui/link';
+	import { Note } from '$lib/components/ui/note';
+</script>
+
+<div class="grid gap-6">
+	<Note disabled fill variant="warning">
+		This note details a warning.
+		<Button slot="action" size="sm" let:disabled {disabled}>Upgrade</Button>
+	</Note>
+	<Note disabled fill variant="warning">
+		This filled note details some success information. Check
+		<Link href="/#">the documentation</Link> to learn more.
+		<Button slot="action" size="sm" let:disabled {disabled}>Upgrade</Button>
+	</Note>
+</div>

src/routes/note/error.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Link } from '$lib/components/ui/link';
+	import { Note } from '$lib/components/ui/note';
+</script>
+
+<div class="grid gap-6">
+	<Note variant="error">This note details some error information.</Note>
+	<Note variant="error">
+		This note details some error information.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note variant="error">
+		This note details some error information. Check <Link href="/#">the documentation</Link> to learn
+		more.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note fill variant="error">This filled note details some error information.</Note>
+	<Note fill variant="error">
+		This filled note details some error information.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+	<Note fill variant="error">
+		This filled note details some error information. Check
+		<Link href="/#">the documentation</Link> to learn more.
+		<Button slot="action" size="sm">Upgrade</Button>
+	</Note>
+</div>