@nqmcreative/ui 0.1.1 → 0.2.0

package/dist/styles/paper/Testimonial.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Avatar from './Avatar.svelte';
+	import { toneBorderLeft, toneSurface, type Tone } from '../../core/tones.js';
+
+	export type TestimonialVariant = 'plain' | 'card' | 'accent';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		quote: string;
+		author: string;
+		role?: string;
+		/** Avatar image. Falls back to the author's initials. */
+		avatar?: string;
+		tone?: Tone;
+		variant?: TestimonialVariant;
+		/** Bigger type, for a single pull quote. */
+		large?: boolean;
+		children?: Snippet;
+	}
+
+	let {
+		quote,
+		author,
+		role,
+		avatar,
+		tone = 'brand',
+		variant = 'plain',
+		large = false,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants = $derived({
+		plain: '',
+		card: 'rounded-lg border border-hairline bg-bg p-6 shadow-xs',
+		accent: `rounded-lg ${toneSurface[tone]} border-l-4 ${toneBorderLeft[tone]} p-6`
+	});
+</script>
+
+<figure class="flex flex-col gap-5 {variants[variant]} {className}" {...rest}>
+	<blockquote
+		class="font-sans leading-relaxed text-pretty text-text-secondary {large
+			? 'text-xl leading-relaxed sm:text-2xl'
+			: ''}"
+	>
+		“{quote}”
+	</blockquote>
+
+	{#if children}
+		{@render children()}
+	{/if}
+
+	<figcaption class="flex items-center gap-3">
+		<Avatar src={avatar} name={author} size="sm" {tone} />
+		<div class="flex min-w-0 flex-col">
+			<span class="font-sans text-sm font-semibold text-text">{author}</span>
+			{#if role}
+				<span class="font-sans text-[13px] text-text-muted">{role}</span>
+			{/if}
+		</div>
+	</figcaption>
+</figure>

package/dist/styles/paper/Testimonial.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+export type TestimonialVariant = 'plain' | 'card' | 'accent';
+interface Props extends HTMLAttributes<HTMLElement> {
+    quote: string;
+    author: string;
+    role?: string;
+    /** Avatar image. Falls back to the author's initials. */
+    avatar?: string;
+    tone?: Tone;
+    variant?: TestimonialVariant;
+    /** Bigger type, for a single pull quote. */
+    large?: boolean;
+    children?: Snippet;
+}
+declare const Testimonial: import("svelte").Component<Props, {}, "">;
+type Testimonial = ReturnType<typeof Testimonial>;
+export default Testimonial;

package/dist/styles/paper/Textarea.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+	import { toneFocusBorder, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLTextareaAttributes {
+		value?: string;
+		tone?: Tone;
+		invalid?: boolean;
+		/** Grow with the content instead of showing a scrollbar. */
+		autoresize?: boolean;
+	}
+
+	let {
+		value = $bindable(''),
+		tone = 'brand',
+		invalid = false,
+		autoresize = false,
+		rows = 4,
+		class: className = '',
+		...rest
+	}: Props = $props();
+
+	/** Grows the field to fit its content on input, and once on mount. */
+	function autosize(node: HTMLTextAreaElement, enabled: boolean) {
+		let on = enabled;
+		const resize = () => {
+			if (!on) return;
+			node.style.height = 'auto';
+			node.style.height = `${node.scrollHeight}px`;
+		};
+		resize();
+		node.addEventListener('input', resize);
+		return {
+			update(next: boolean) {
+				on = next;
+				if (on) resize();
+				else node.style.height = '';
+			},
+			destroy() {
+				node.removeEventListener('input', resize);
+			}
+		};
+	}
+</script>
+
+<textarea
+	use:autosize={autoresize}
+	bind:value
+	{rows}
+	aria-invalid={invalid ? 'true' : undefined}
+	class="w-full rounded-md border bg-bg px-3 py-2 font-sans text-sm text-text shadow-xs transition-colors duration-150 ease-brand-out placeholder:text-text-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50
+		{autoresize ? 'resize-none overflow-hidden' : 'resize-y'}
+		{invalid ? 'border-danger' : `border-hairline-strong ${toneFocusBorder[tone]}`} {className}"
+	{...rest}></textarea>

package/dist/styles/paper/Textarea.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    tone?: Tone;
+    invalid?: boolean;
+    /** Grow with the content instead of showing a scrollbar. */
+    autoresize?: boolean;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/styles/paper/ThemeToggle.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	// Choosing a theme is style-agnostic: every style reads the same two classes
+	// off <html>, so `applyTheme`, `storedTheme` and `Theme` live in core and
+	// are re-exported by the style barrel — not by this component.
+	import { focusRing, toneRing, type Tone } from '../../core/tones.js';
+	import {
+		applyTheme,
+		nextTheme,
+		persistTheme,
+		storedTheme,
+		type Theme
+	} from '../../core/theme.svelte.js';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	interface Props {
+		/** Bindable. `'system'` follows the OS until the visitor chooses. */
+		theme?: Theme;
+		/** `'button'` cycles light → dark → system; `'segmented'` shows all three. */
+		variant?: 'button' | 'segmented';
+		tone?: Tone;
+		/** Remember the choice in `localStorage`. Default true. */
+		persist?: boolean;
+		onchange?: (theme: Theme) => void;
+		class?: string;
+	}
+
+	let {
+		theme = $bindable(storedTheme()),
+		variant = 'button',
+		tone = 'neutral',
+		persist = true,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const t = useLocale();
+
+	$effect(() => {
+		applyTheme(theme);
+		if (persist) persistTheme(theme);
+	});
+
+	function set(next: Theme) {
+		theme = next;
+		onchange?.(next);
+	}
+
+	function cycle() {
+		set(nextTheme(theme));
+	}
+
+	const options = $derived([
+		{ value: 'light' as Theme, label: t.current.lightMode },
+		{ value: 'dark' as Theme, label: t.current.darkMode },
+		{ value: 'system' as Theme, label: 'Auto' }
+	]);
+</script>
+
+{#snippet glyph(which: Theme)}
+	{#if which === 'light'}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<circle cx="10" cy="10" r="3.5" stroke="currentColor" stroke-width="1.5" />
+			<path
+				d="M10 2v2M10 16v2M2 10h2M16 10h2M4.5 4.5 6 6M14 14l1.5 1.5M15.5 4.5 14 6M6 14l-1.5 1.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linecap="round"
+			/>
+		</svg>
+	{:else if which === 'dark'}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<path
+				d="M16 12.3A6.8 6.8 0 0 1 7.7 4a6.8 6.8 0 1 0 8.3 8.3Z"
+				stroke="currentColor"
+				stroke-width="1.5"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	{:else}
+		<svg class="size-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+			<rect
+				x="2.5"
+				y="4"
+				width="15"
+				height="10"
+				rx="1.5"
+				stroke="currentColor"
+				stroke-width="1.5"
+			/>
+			<path d="M7 17h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+		</svg>
+	{/if}
+{/snippet}
+
+{#if variant === 'segmented'}
+	<div
+		role="radiogroup"
+		aria-label={t.current.toggleTheme}
+		class="inline-flex items-center gap-1 rounded-lg border border-hairline bg-bg-inset p-1 {className}"
+	>
+		{#each options as option (option.value)}
+			<button
+				type="button"
+				role="radio"
+				aria-checked={theme === option.value}
+				aria-label={option.label}
+				onclick={() => set(option.value)}
+				class="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 font-sans text-[13px] font-medium transition-all duration-150 ease-brand-out {focusRing} {toneRing[
+					tone
+				]}
+					{theme === option.value ? 'bg-bg text-text shadow-xs' : 'text-text-muted hover:text-text'}"
+			>
+				{@render glyph(option.value)}
+				<span class="hidden sm:inline">{option.label}</span>
+			</button>
+		{/each}
+	</div>
+{:else}
+	<button
+		type="button"
+		onclick={cycle}
+		aria-label="{t.current.toggleTheme} ({theme})"
+		title={t.current.toggleTheme}
+		class="inline-flex size-9 items-center justify-center rounded-md border border-hairline bg-bg text-text-secondary shadow-xs transition-colors duration-150 ease-brand-out hover:bg-bg-alt hover:text-text {focusRing} {toneRing[
+			tone
+		]} {className}"
+	>
+		{@render glyph(theme)}
+	</button>
+{/if}

package/dist/styles/paper/ThemeToggle.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type Tone } from '../../core/tones.js';
+import { type Theme } from '../../core/theme.svelte.js';
+interface Props {
+    /** Bindable. `'system'` follows the OS until the visitor chooses. */
+    theme?: Theme;
+    /** `'button'` cycles light → dark → system; `'segmented'` shows all three. */
+    variant?: 'button' | 'segmented';
+    tone?: Tone;
+    /** Remember the choice in `localStorage`. Default true. */
+    persist?: boolean;
+    onchange?: (theme: Theme) => void;
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "theme">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/styles/paper/Toaster.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { portal } from '../../core/actions/dismissable.js';
+	import { toast } from '../../core/toast.svelte.js';
+	import { toneText } from '../../core/tones.js';
+	import Spinner from './Spinner.svelte';
+	import { useLocale } from '../../core/locale.svelte.js';
+
+	export type ToasterPosition =
+		'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+	interface Props {
+		position?: ToasterPosition;
+		class?: string;
+	}
+
+	let { position = 'bottom-right', class: className = '' }: Props = $props();
+
+	const t = useLocale();
+
+	const positions: Record<ToasterPosition, string> = {
+		'top-left': 'top-4 left-4 items-start',
+		'top-center': 'top-4 left-1/2 -translate-x-1/2 items-center',
+		'top-right': 'top-4 right-4 items-end',
+		'bottom-left': 'bottom-4 left-4 items-start',
+		'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+		'bottom-right': 'bottom-4 right-4 items-end'
+	};
+
+	const fromTop = $derived(position.startsWith('top'));
+	const fromLeft = $derived(position.endsWith('left'));
+	const fromCenter = $derived(position.endsWith('center'));
+
+	const enter = $derived(
+		fromCenter ? { y: fromTop ? -16 : 16, x: 0 } : { x: fromLeft ? -16 : 16, y: 0 }
+	);
+</script>
+
+<div
+	use:portal
+	aria-live="polite"
+	aria-label={t.current.notifications}
+	class="pointer-events-none fixed z-[100] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2.5 {positions[
+		position
+	]} {fromTop ? '' : 'flex-col-reverse'} {className}"
+>
+	{#each toast.items as item (item.id)}
+		<!--
+			paper puts every toast on the same neutral card and lets the glyph
+			carry the tone. matte tints the whole surface; here the tinted block
+			would fight the page underneath.
+		-->
+		<div
+			animate:flip={{ duration: 200 }}
+			in:fly={{ ...enter, duration: 220 }}
+			out:fly={{ ...enter, duration: 160 }}
+			role={item.tone === 'danger' ? 'alert' : 'status'}
+			class="pointer-events-auto flex w-full items-start gap-3 rounded-lg border border-hairline bg-bg p-3.5 font-sans shadow-lg"
+		>
+			<span class="mt-0.5 shrink-0 {toneText[item.tone]}">
+				{#if item.loading}
+					<Spinner size="sm" label="" />
+				{:else if item.tone === 'success'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5 8.2 2.2 2.2L11 6"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				{:else if item.tone === 'danger'}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path
+							d="m5.75 5.75 4.5 4.5M10.25 5.75l-4.5 4.5"
+							stroke="currentColor"
+							stroke-width="1.6"
+							stroke-linecap="round"
+						/>
+					</svg>
+				{:else}
+					<svg class="size-4" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+						<circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5" />
+						<path d="M8 4.75v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+						<circle cx="8" cy="11.25" r="0.85" fill="currentColor" />
+					</svg>
+				{/if}
+			</span>
+
+			<div class="flex min-w-0 flex-1 flex-col gap-1">
+				<p class="text-sm leading-snug font-semibold text-text">{item.title}</p>
+				{#if item.description}
+					<p class="text-[13px] leading-relaxed text-text-secondary">{item.description}</p>
+				{/if}
+				{#if item.action}
+					<button
+						type="button"
+						onclick={() => {
+							item.action?.onclick();
+							toast.dismiss(item.id);
+						}}
+						class="mt-1 self-start rounded font-sans text-[13px] font-semibold underline underline-offset-2 {toneText[
+							item.tone
+						]}"
+					>
+						{item.action.label}
+					</button>
+				{/if}
+			</div>
+
+			<button
+				type="button"
+				onclick={() => toast.dismiss(item.id)}
+				aria-label={t.current.dismiss}
+				class="-m-1 shrink-0 rounded p-1 text-text-muted transition-colors duration-150 hover:bg-bg-inset hover:text-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current"
+			>
+				<svg class="size-3.5" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+					<path
+						d="m2 2 10 10M12 2 2 12"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/each}
+</div>

package/dist/styles/paper/Toaster.svelte.d.ts

@@ -0,0 +1,8 @@
+export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface Props {
+    position?: ToasterPosition;
+    class?: string;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/styles/paper/Tooltip.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		/** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+		content: string;
+		placement?: TooltipPlacement;
+		children: Snippet;
+	}
+
+	let { content, placement = 'top', class: className = '', children, ...rest }: Props = $props();
+
+	const placements: Record<TooltipPlacement, string> = {
+		top: 'bottom-full left-1/2 mb-1.5 -translate-x-1/2',
+		bottom: 'top-full left-1/2 mt-1.5 -translate-x-1/2',
+		left: 'right-full top-1/2 mr-1.5 -translate-y-1/2',
+		right: 'left-full top-1/2 ml-1.5 -translate-y-1/2'
+	};
+</script>
+
+<span class="group/tt relative inline-flex" {...rest}>
+	{@render children()}
+	<span
+		role="tooltip"
+		class="pointer-events-none invisible absolute z-50 rounded-md bg-text px-2 py-1 font-sans text-xs font-medium whitespace-nowrap text-text-inverse opacity-0 shadow-lg transition-opacity duration-150 ease-brand-out group-focus-within/tt:visible group-focus-within/tt:opacity-100 group-hover/tt:visible group-hover/tt:opacity-100
+			{placements[placement]} {className}"
+	>
+		{content}
+	</span>
+</span>

package/dist/styles/paper/Tooltip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** Tooltip text. CSS-only: shows on hover and on keyboard focus. */
+    content: string;
+    placement?: TooltipPlacement;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/styles/paper/fonts.css

@@ -0,0 +1,46 @@
+/*
+ * Optional: Plus Jakarta Sans, the face paper is designed around. Import this
+ * only if your project doesn't already self-host or load it another way —
+ * without it the tokens fall back to the system stack, which works but reads
+ * harder and colder.
+ *
+ * These are plain `@font-face` rules rather than an `@import` of the Google
+ * stylesheet on purpose: `@import` is only valid before every other rule, so a
+ * bundler silently drops it when this file is imported after `tailwindcss` —
+ * the fonts then fall back with no error anywhere. `@font-face` works wherever
+ * you put it, and it skips the CSS-to-CSS round trip before the font files
+ * start downloading.
+ *
+ * Two rules rather than matte's eight: this is a variable font, so one file per
+ * subset covers every weight from 400 to 700. Latin and Latin Extended only —
+ * around 49 kB in total. Add
+ * `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` to
+ * your document head to open the connection earlier.
+ */
+
+/* latin */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2)
+		format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Plus Jakarta Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2)
+		format('woff2');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}

package/dist/styles/paper/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Paper — The neutral one. Start here if unsure: soft corners, light shadows, generous spacing, and nothing that fights the content.
+ *
+ * Generated by `bun run index`. Behaviour comes from
+ * `@nqmcreative/ui/core`, re-exported below so this one import covers
+ * the whole style.
+ */
+export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText, anchored, clickOutside, focusTrap, focusable, navigateList, portal, toast, locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore, applyTheme, storedTheme, toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from '../../core/index.js';
+export type { Tone, Placement, AnchorOptions, ClickOutsideOptions, FocusTrapOptions, Toast, ToastOptions, ToastAction, Locale, Theme, DateFormat, TableSort, SortDirection, RejectedFile } from '../../core/index.js';
+export { default as LocaleProvider } from './LocaleProvider.svelte';
+export { default as Button } from './Button.svelte';
+export type { ButtonVariant, ButtonSize } from './Button.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Input } from './Input.svelte';
+export type { InputSize } from './Input.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as Select } from './Select.svelte';
+export type { SelectOption } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Switch } from './Switch.svelte';
+export type { SwitchSize } from './Switch.svelte';
+export { default as Field } from './Field.svelte';
+export { default as Label } from './Label.svelte';
+export { default as PasswordInput } from './PasswordInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as Slider } from './Slider.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export type { RadioOption } from './RadioGroup.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export type { CheckboxOption } from './CheckboxGroup.svelte';
+export { default as SegmentedControl } from './SegmentedControl.svelte';
+export type { SegmentOption, SegmentedSize } from './SegmentedControl.svelte';
+export { default as InputGroup } from './InputGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxOption } from './Combobox.svelte';
+export { default as MultiSelect } from './MultiSelect.svelte';
+export type { MultiSelectOption } from './MultiSelect.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Dropzone } from './Dropzone.svelte';
+export { default as Badge } from './Badge.svelte';
+export type { BadgeVariant, BadgeSize } from './Badge.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export type { AvatarSize } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Card } from './Card.svelte';
+export type { CardVariant } from './Card.svelte';
+export { default as Stat } from './Stat.svelte';
+export type { StatTrend } from './Stat.svelte';
+export { default as Table } from './Table.svelte';
+export type { TableColumn } from './Table.svelte';
+export { default as Kbd } from './Kbd.svelte';
+export { default as Alert } from './Alert.svelte';
+export type { AlertVariant } from './Alert.svelte';
+export { default as Progress } from './Progress.svelte';
+export type { ProgressSize } from './Progress.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export type { SpinnerSize } from './Spinner.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export type { SkeletonVariant } from './Skeleton.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Toaster } from './Toaster.svelte';
+export type { ToasterPosition } from './Toaster.svelte';
+export { default as Divider } from './Divider.svelte';
+export type { DividerOrientation } from './Divider.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { TabItem, TabsVariant } from './Tabs.svelte';
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export type { BreadcrumbItem } from './Breadcrumb.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Steps } from './Steps.svelte';
+export type { StepItem } from './Steps.svelte';
+export { default as Navbar } from './Navbar.svelte';
+export type { NavItem } from './Navbar.svelte';
+export { default as Sidebar } from './Sidebar.svelte';
+export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export { default as Footer } from './Footer.svelte';
+export type { FooterLink, FooterColumn } from './Footer.svelte';
+export { default as HeroSection } from './HeroSection.svelte';
+export { default as FeatureGrid } from './FeatureGrid.svelte';
+export type { FeatureColumns } from './FeatureGrid.svelte';
+export { default as FeatureCard } from './FeatureCard.svelte';
+export { default as PricingCard } from './PricingCard.svelte';
+export { default as Testimonial } from './Testimonial.svelte';
+export type { TestimonialVariant } from './Testimonial.svelte';
+export { default as LogoCloud } from './LogoCloud.svelte';
+export type { Logo } from './LogoCloud.svelte';
+export { default as CTASection } from './CTASection.svelte';
+export type { CTAVariant } from './CTASection.svelte';
+export { default as StatsBand } from './StatsBand.svelte';
+export type { BandStat } from './StatsBand.svelte';
+export { default as Modal } from './Modal.svelte';
+export type { ModalSize } from './Modal.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export type { DrawerSide, DrawerSize } from './Drawer.svelte';
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';
+export type { CommandItem } from './CommandPalette.svelte';
+export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipPlacement } from './Tooltip.svelte';