@insymetri/styleguide 0.1.0

package/dist/IIStatusBadge/index.js

@@ -0,0 +1 @@
+export { default as IIStatusBadge } from './IIStatusBadge.svelte';

package/dist/IISwitch/IISwitch.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {Switch} from 'bits-ui'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		checked: boolean
+		onCheckedChange?: (checked: boolean) => void
+		label?: string
+		children?: Snippet
+		disabled?: boolean
+		name?: string
+		value?: string
+		class?: string
+		[key: string]: unknown
+	}
+
+	let {
+		checked = $bindable(),
+		onCheckedChange,
+		label,
+		children,
+		disabled = false,
+		name,
+		value,
+		class: className,
+		...restProps
+	}: Props = $props()
+</script>
+
+<label class={cn('flex items-center gap-12', className)}>
+	{#if label}
+		<span
+			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+			>{label}</span
+		>
+	{:else if children}
+		<span
+			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+		>
+			{@render children()}
+		</span>
+	{/if}
+	<Switch.Root
+		class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none data-[state=checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:transition-none"
+		{checked}
+		onCheckedChange={newChecked => {
+			checked = newChecked
+			onCheckedChange?.(newChecked)
+		}}
+		{disabled}
+		{name}
+		{value}
+		{...restProps}
+	>
+		<Switch.Thumb
+			class="block w-18 h-18 bg-white rounded-full transition-all duration-fast translate-x-3 shadow-subtle group-data-[state=checked]:translate-x-23 motion-reduce:transition-none"
+		/>
+	</Switch.Root>
+</label>

package/dist/IISwitch/IISwitch.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: string;
+    children?: Snippet;
+    disabled?: boolean;
+    name?: string;
+    value?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const IISwitch: import("svelte").Component<Props, {}, "checked">;
+type IISwitch = ReturnType<typeof IISwitch>;
+export default IISwitch;

package/dist/IISwitch/index.d.ts

@@ -0,0 +1 @@
+export { default as IISwitch } from './IISwitch.svelte';

package/dist/IISwitch/index.js

@@ -0,0 +1 @@
+export { default as IISwitch } from './IISwitch.svelte';

package/dist/IITable/IITable.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		children?: Snippet
+		class?: string
+	}
+
+	let {children, class: className}: Props = $props()
+</script>
+
+<div class={cn('bg-surface border border-primary rounded-10 overflow-x-auto overflow-y-hidden', className)}>
+	<table class="w-full border-collapse">
+		{@render children?.()}
+	</table>
+</div>

package/dist/IITable/IITable.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet;
+    class?: string;
+};
+declare const IITable: import("svelte").Component<Props, {}, "">;
+type IITable = ReturnType<typeof IITable>;
+export default IITable;

package/dist/IITable/index.d.ts

@@ -0,0 +1 @@
+export { default as IITable } from './IITable.svelte';

package/dist/IITable/index.js

@@ -0,0 +1 @@
+export { default as IITable } from './IITable.svelte';

package/dist/IITableSkeleton/IITableSkeleton.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type SkeletonType = 'text' | 'text-short' | 'badge' | 'button'
+
+	type Props = {
+		rows: number
+		columns: SkeletonType[]
+	}
+
+	let {rows, columns}: Props = $props()
+
+	const typeClasses: Record<string, string> = {
+		text: 'h-16 w-4/5',
+		'text-short': 'h-16 w-2/5',
+		badge: 'h-24 w-100',
+		button: 'h-8 w-80',
+	}
+</script>
+
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+{#each Array(rows) as _, i (i)}
+	<tr class="border-b border-primary last:border-b-0" style="transition: all 150ms ease">
+		{#each columns as columnType, j (j)}
+			<td class="px-16 py-8 text-small text-body">
+				<div class={cn('skeleton-bg rounded-4', typeClasses[columnType])}></div>
+			</td>
+		{/each}
+	</tr>
+{/each}
+
+<!-- eslint-enable @typescript-eslint/no-unused-vars -->

package/dist/IITableSkeleton/IITableSkeleton.svelte.d.ts

@@ -0,0 +1,8 @@
+type SkeletonType = 'text' | 'text-short' | 'badge' | 'button';
+type Props = {
+    rows: number;
+    columns: SkeletonType[];
+};
+declare const IITableSkeleton: import("svelte").Component<Props, {}, "">;
+type IITableSkeleton = ReturnType<typeof IITableSkeleton>;
+export default IITableSkeleton;

package/dist/IITableSkeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as IITableSkeleton } from './IITableSkeleton.svelte';

package/dist/IITableSkeleton/index.js

@@ -0,0 +1 @@
+export { default as IITableSkeleton } from './IITableSkeleton.svelte';

package/dist/IITabs/IITabs.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {DropdownMenu, Tabs, type WithoutChildrenOrChild} from 'bits-ui'
+	import {IconExpandMore, IconCheck} from '../icons'
+	import {cn} from '../utils/cn'
+
+	type Tab = {
+		value: string
+		label: string
+		icon?: Snippet
+		disabled?: boolean
+		trigger?: Snippet
+		content: Snippet
+	}
+
+	type Props = WithoutChildrenOrChild<Tabs.RootProps> & {
+		tabs: Tab[]
+		class?: string
+		listClass?: string
+		contentClass?: string
+	}
+
+	let {
+		value = $bindable(),
+		tabs,
+		class: className,
+		listClass,
+		contentClass,
+		onValueChange,
+		...restProps
+	}: Props = $props()
+
+	let internalRef = $state(null)
+	let listEl = $state<HTMLElement | null>(null)
+	let overflowing = $state(false)
+	let dropdownOpen = $state(false)
+
+	const activeLabel = $derived(tabs.find(t => t.value === value)?.label ?? '')
+
+	$effect(() => {
+		if (!listEl) return
+
+		function check() {
+			if (!listEl) return
+			overflowing = listEl.scrollWidth > listEl.clientWidth + 1
+		}
+
+		check()
+		const observer = new ResizeObserver(check)
+		observer.observe(listEl)
+		return () => observer.disconnect()
+	})
+
+	function handleTabSelect(tab: Tab) {
+		value = tab.value
+		onValueChange?.(tab.value)
+		dropdownOpen = false
+	}
+</script>
+
+<Tabs.Root
+	bind:value
+	bind:ref={internalRef}
+	{onValueChange}
+	{...restProps}
+	class={cn('flex flex-col w-full', className)}
+>
+	{#if overflowing}
+		<div class="flex items-center border-b border-primary h-48 px-24" style="padding-left: calc(2.4rem - 1.2rem - 1px)">
+			<DropdownMenu.Root bind:open={dropdownOpen}>
+				<DropdownMenu.Trigger
+					class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-10 bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
+				>
+					<span class="text-small-emphasis text-body">{activeLabel}</span>
+					<IconExpandMore class="w-14 h-14 text-secondary shrink-0" />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content
+					class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
+					side="bottom"
+					align="start"
+				>
+					{#each tabs as tab (tab.value)}
+						<DropdownMenu.Item
+							disabled={tab.disabled}
+							class={cn(
+								'flex items-center justify-between gap-12 px-12 py-8 rounded-4 text-small-emphasis text-secondary cursor-default outline-none transition-all duration-fast hover:bg-background hover:text-body data-[highlighted]:bg-background data-[highlighted]:text-body data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
+								value === tab.value && 'text-body'
+							)}
+							onSelect={() => handleTabSelect(tab)}
+						>
+							<span>{tab.label}</span>
+							{#if value === tab.value}
+								<IconCheck class="w-14 h-14 text-accent shrink-0" />
+							{/if}
+						</DropdownMenu.Item>
+					{/each}
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	{/if}
+	<Tabs.List
+		bind:ref={listEl}
+		class={cn(
+			'flex border-b border-primary gap-16 pl-24 overflow-hidden h-48',
+			overflowing && 'h-0 invisible border-b-0 py-0',
+			listClass
+		)}
+	>
+		{#each tabs as tab (tab.value)}
+			<Tabs.Trigger
+				value={tab.value}
+				disabled={tab.disabled}
+				class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
+			>
+				{#if tab.trigger}
+					{@render tab.trigger()}
+				{:else}
+					{#if tab.icon}
+						<div class="w-[1.25em] h-[1.25em] flex items-center justify-center">
+							{@render tab.icon()}
+						</div>
+					{/if}
+					{tab.label}
+				{/if}
+			</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+	{#each tabs as tab (tab.value)}
+		<Tabs.Content
+			value={tab.value}
+			class={cn(
+				'p-8 outline-none focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
+				contentClass
+			)}
+		>
+			{@render tab.content()}
+		</Tabs.Content>
+	{/each}
+</Tabs.Root>

package/dist/IITabs/IITabs.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { Tabs, type WithoutChildrenOrChild } from 'bits-ui';
+type Tab = {
+    value: string;
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+    trigger?: Snippet;
+    content: Snippet;
+};
+type Props = WithoutChildrenOrChild<Tabs.RootProps> & {
+    tabs: Tab[];
+    class?: string;
+    listClass?: string;
+    contentClass?: string;
+};
+declare const IITabs: import("svelte").Component<Props, {}, "value">;
+type IITabs = ReturnType<typeof IITabs>;
+export default IITabs;

package/dist/IITabs/index.d.ts

@@ -0,0 +1 @@
+export { default as IITabs } from './IITabs.svelte';

package/dist/IITabs/index.js

@@ -0,0 +1 @@
+export { default as IITabs } from './IITabs.svelte';

package/dist/IITaskCardSkeleton/IITaskCardSkeleton.svelte

@@ -0,0 +1,15 @@
+<div class="bg-surface border border-primary rounded-10 px-24 py-12 flex gap-16 max-md:flex-col">
+	<div class="flex-1 flex flex-col gap-12">
+		<div class="mb-8">
+			<div class="h-24 w-3/5 shimmer-bg rounded-4"></div>
+		</div>
+		<div class="h-16 w-17/20 shimmer-bg rounded-4"></div>
+		<div class="flex items-center gap-16 flex-wrap max-md:flex-col max-md:gap-8">
+			<div class="h-24 w-16 shimmer-bg rounded-4"></div>
+			<div class="h-24 w-16 shimmer-bg rounded-4"></div>
+			<div class="h-16 w-32 shimmer-bg rounded-4"></div>
+			<div class="h-16 w-32 shimmer-bg rounded-4"></div>
+		</div>
+	</div>
+	<div class="h-40 w-24 shimmer-bg rounded-10 self-center"></div>
+</div>

package/dist/IITaskCardSkeleton/IITaskCardSkeleton.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IITaskCardSkeleton;
+type IITaskCardSkeleton = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IITaskCardSkeleton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/IITaskCardSkeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as IITaskCardSkeleton } from './IITaskCardSkeleton.svelte';

package/dist/IITaskCardSkeleton/index.js

@@ -0,0 +1 @@
+export { default as IITaskCardSkeleton } from './IITaskCardSkeleton.svelte';

package/dist/IITextarea/IITextarea.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type {HTMLTextareaAttributes} from 'svelte/elements'
+	import {onMount} from 'svelte'
+	import {cn} from '../utils/cn'
+
+	type Props = HTMLTextareaAttributes & {
+		label?: string
+		errorMessage?: string
+		helperText?: string
+		error?: boolean
+		disabled?: boolean
+		value?: string
+		rows?: number
+		ref?: HTMLTextAreaElement
+		class?: string
+	}
+
+	let {
+		label,
+		errorMessage,
+		helperText,
+		error = false,
+		disabled = false,
+		value = $bindable(),
+		rows = 3,
+		ref = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props()
+
+	const showError = $derived(error || !!errorMessage)
+
+	function autoResize(textarea: HTMLTextAreaElement) {
+		textarea.style.height = 'auto'
+		textarea.style.height = `${textarea.scrollHeight}px`
+	}
+
+	function handleInput(event: Event) {
+		const textarea = event.target as HTMLTextAreaElement
+		autoResize(textarea)
+	}
+
+	onMount(() => {
+		if (ref) {
+			autoResize(ref)
+		}
+	})
+
+	$effect(() => {
+		if (ref && value !== undefined) {
+			autoResize(ref)
+		}
+	})
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+	{#if label}
+		<label for={restProps.id} class="text-small-emphasis text-body">
+			{label}
+		</label>
+	{/if}
+	<textarea
+		bind:this={ref}
+		bind:value
+		{disabled}
+		{rows}
+		class={cn(
+			'py-6 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-10 transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary focus:border-primary focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
+			showError && 'border-error focus:border-error focus:ring-error'
+		)}
+		oninput={handleInput}
+		{...restProps}
+	></textarea>
+	{#if showError && errorMessage}
+		<span class="text-tiny text-error">{errorMessage}</span>
+	{:else if helperText}
+		<span class="text-tiny text-secondary">{helperText}</span>
+	{/if}
+</div>

package/dist/IITextarea/IITextarea.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = HTMLTextareaAttributes & {
+    label?: string;
+    errorMessage?: string;
+    helperText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    value?: string;
+    rows?: number;
+    ref?: HTMLTextAreaElement;
+    class?: string;
+};
+declare const IITextarea: import("svelte").Component<Props, {}, "value" | "ref">;
+type IITextarea = ReturnType<typeof IITextarea>;
+export default IITextarea;

package/dist/IITextarea/index.d.ts

@@ -0,0 +1 @@
+export { default as IITextarea } from './IITextarea.svelte';

package/dist/IITextarea/index.js

@@ -0,0 +1 @@
+export { default as IITextarea } from './IITextarea.svelte';

package/dist/IIToaster/IIToaster.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import {Toaster} from 'svelte-sonner'
+</script>
+
+<Toaster position="bottom-right" closeButton={true} richColors={true} duration={4000} visibleToasts={5} theme="light" />

package/dist/IIToaster/IIToaster.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IIToaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIToaster = InstanceType<typeof IIToaster>;
+export default IIToaster;

package/dist/IIToaster/index.d.ts

@@ -0,0 +1 @@
+export { default as IIToaster } from './IIToaster.svelte';

package/dist/IIToaster/index.js

@@ -0,0 +1 @@
+export { default as IIToaster } from './IIToaster.svelte';

package/dist/IIViewFilterChip/IIViewFilterChip.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	type Props = {
+		fieldLabel: string
+		operator: string
+		value: string
+	}
+
+	let {fieldLabel, operator, value}: Props = $props()
+
+	const operatorDisplay = $derived.by(() => {
+		const map: Record<string, string> = {
+			'=': 'is',
+			'!=': 'is not',
+			'<': '<',
+			'>': '>',
+			'<=': '<=',
+			'>=': '>=',
+			IN: 'in',
+			'NOT IN': 'not in',
+			IS: 'is',
+			'IS NOT': 'is not',
+			IS_EMPTY: 'is empty',
+			IS_NOT_EMPTY: 'is not empty',
+		}
+		return map[operator] || operator
+	})
+</script>
+
+<span
+	class="inline-flex items-center gap-4 px-8 py-4 bg-gray-100 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
+>
+	<span class="flex items-center gap-4">
+		<span class="font-medium">{fieldLabel}</span>
+		<span class="text-tertiary">{operatorDisplay}</span>
+		<span class="font-semibold">{value || 'NULL'}</span>
+	</span>
+</span>

package/dist/IIViewFilterChip/IIViewFilterChip.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    fieldLabel: string;
+    operator: string;
+    value: string;
+};
+declare const IIViewFilterChip: import("svelte").Component<Props, {}, "">;
+type IIViewFilterChip = ReturnType<typeof IIViewFilterChip>;
+export default IIViewFilterChip;

package/dist/IIViewFilterChip/index.d.ts

@@ -0,0 +1 @@
+export { default as IIViewFilterChip } from './IIViewFilterChip.svelte';

package/dist/IIViewFilterChip/index.js

@@ -0,0 +1 @@
+export { default as IIViewFilterChip } from './IIViewFilterChip.svelte';

package/dist/Typography/Typography.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	const fontSizes = [
+		{name: 'text-display-lg', class: 'text-display-lg', desc: '40px / 1.1'},
+		{name: 'text-display-md', class: 'text-display-md', desc: '30px / 1.2'},
+		{name: 'text-h1', class: 'text-h1', desc: '24px / 32px / 600'},
+		{name: 'text-h2', class: 'text-h2', desc: '20px / 28px / 600'},
+		{name: 'text-h3', class: 'text-h3', desc: '18px / 24px / 600'},
+		{name: 'text-h4', class: 'text-h4', desc: '16px / 20px / 600'},
+		{name: 'text-h5', class: 'text-h5', desc: '14px / 20px / 600'},
+		{name: 'text-h6', class: 'text-h6', desc: '13px / 16px / 600'},
+		{name: 'text-m1', class: 'text-m1', desc: '20px / 28px / 300'},
+		{name: 'text-m2', class: 'text-m2', desc: '16px / 24px / 300'},
+		{name: 'text-m3', class: 'text-m3', desc: '14px / 20px / 300'},
+		{name: 'text-m3-emphasis', class: 'text-m3-emphasis', desc: '13px / 20px / 500'},
+		{name: 'text-m3-small', class: 'text-m3-small', desc: '13px / 20px / 400'},
+		{name: 'text-large', class: 'text-large', desc: '16px / 20px / 400'},
+		{name: 'text-large-emphasis', class: 'text-large-emphasis', desc: '16px / 20px / 500'},
+		{name: 'text-default', class: 'text-default', desc: '14px / 16px / 400'},
+		{name: 'text-emphasis', class: 'text-emphasis', desc: '14px / 16px / 500'},
+		{name: 'text-strong', class: 'text-strong', desc: '14px / 16px / 600'},
+		{name: 'text-small', class: 'text-small', desc: '13px / 16px / 400'},
+		{name: 'text-small-emphasis', class: 'text-small-emphasis', desc: '13px / 16px / 500'},
+		{name: 'text-small-strong', class: 'text-small-strong', desc: '13px / 16px / 600'},
+		{name: 'text-tiny', class: 'text-tiny', desc: '11px / 12px / 400'},
+		{name: 'text-tiny-emphasis', class: 'text-tiny-emphasis', desc: '11px / 12px / 500'},
+		{name: 'text-tiny-strong', class: 'text-tiny-strong', desc: '11px / 12px / 600'},
+		{name: 'text-numeric font-mono', class: 'text-numeric font-mono', desc: '14px / 16px / 400 (mono)'},
+	]
+
+	const textColors = [
+		{name: 'text-body', class: 'text-body'},
+		{name: 'text-secondary', class: 'text-secondary'},
+		{name: 'text-tertiary', class: 'text-tertiary'},
+		{name: 'text-primary', class: 'text-primary'},
+		{name: 'text-success', class: 'text-success'},
+		{name: 'text-warning', class: 'text-warning'},
+		{name: 'text-error', class: 'text-error'},
+		{name: 'text-info', class: 'text-info'},
+	]
+</script>
+
+<div class="flex flex-col gap-48 p-24 text-body">
+	<section>
+		<h2 class="text-h2 mb-16">Font Sizes</h2>
+		<div class="flex flex-col gap-8">
+			{#each fontSizes as item (item.name)}
+				<div class="flex items-baseline gap-16 border-b border-primary py-8">
+					<span class="text-small text-secondary w-160 shrink-0 font-mono">{item.name}</span>
+					<span class={item.class}>The quick brown fox jumps over the lazy dog</span>
+					<span class="text-tiny text-tertiary ml-auto shrink-0">{item.desc}</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+
+	<section>
+		<h2 class="text-h2 mb-16">Text Colors</h2>
+		<div class="flex flex-col gap-8">
+			{#each textColors as item (item.name)}
+				<div class="flex items-center gap-16 py-4">
+					<span class="text-small text-secondary w-160 shrink-0 font-mono">{item.name}</span>
+					<span class="{item.class} text-h4">{item.name}</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+</div>

package/dist/Typography/Typography.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Typography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Typography = InstanceType<typeof Typography>;
+export default Typography;