@human-synthesis/norns-ui 0.0.3 → 0.0.6

package/src/styles/tokens.css

@@ -1,58 +1,222 @@
 /*
  * Norns UI — design tokens.
  *
- * Tailwind v4 `@theme` block. Users override by re-declaring `@theme { ... }`
- * after `@import '@human-synthesis/norns-ui/styles'` in their own app.css —
- * Tailwind merges layered theme blocks. Same goes for dark mode via the
- * `[data-theme="dark"]` selector at the bottom.
+ * Tailwind v4 `@theme` block. Two layers:
+ *
+ *   1. Color *scales* (50–950) for primary + success + warning + danger + info.
+ *      These generate utilities like `bg-success-500`, `text-danger-700`. Stay
+ *      identical in light + dark — oklch is perceptually uniform.
+ *
+ *   2. *Role tokens* (`--color-fg`, `--color-bg`, `--color-border`, …). Atoms
+ *      reference these so dark-mode swap is a single point of change. The
+ *      `[data-theme='dark']` block at the bottom remaps every role token from
+ *      a light-friendly scale step to a dark-friendly one — utilities like
+ *      `bg-bg`, `text-fg`, `border-border` follow automatically.
+ *
+ * Typography: `--font-sans` / `--font-mono` set the default `font-sans` /
+ * `font-mono` utilities. Heading sizes come from Tailwind's defaults; the
+ * `@layer base` block in atoms.css applies them.
  */
 
 @theme {
-	/* Brand color (violet) — keeps Norns's existing violet-500 accent. */
-	--color-primary-50: oklch(97.7% 0.014 308.299);
-	--color-primary-100: oklch(94.6% 0.033 307.174);
-	--color-primary-200: oklch(90.2% 0.063 306.703);
-	--color-primary-300: oklch(81.1% 0.111 293.571);
-	--color-primary-400: oklch(70.2% 0.183 293.541);
-	--color-primary-500: oklch(60.6% 0.25 292.717);
-	--color-primary-600: oklch(54.1% 0.281 293.009);
-	--color-primary-700: oklch(49.1% 0.27 292.581);
-	--color-primary-800: oklch(43.2% 0.232 292.759);
-	--color-primary-900: oklch(38% 0.189 293.745);
-	--color-primary-950: oklch(28.3% 0.141 291.089);
-
-	/* Semantic surface colors derived from neutral + primary. Components
-	 * reference `--color-fg`, `--color-muted`, etc. so consumer themes can
-	 * remap surfaces without overriding every utility. */
-	--color-fg: var(--color-neutral-900);
-	--color-fg-muted: var(--color-neutral-600);
-	--color-fg-subtle: var(--color-neutral-400);
+	/* === Brand: Primary (violet) === */
+	--color-primary-50: oklch(97.7% 0.014 308.3);
+	--color-primary-100: oklch(94.6% 0.033 307.2);
+	--color-primary-200: oklch(90.2% 0.063 306.7);
+	--color-primary-300: oklch(81.1% 0.111 293.6);
+	--color-primary-400: oklch(70.2% 0.183 293.5);
+	--color-primary-500: oklch(60.6% 0.25 292.7);
+	--color-primary-600: oklch(54.1% 0.281 293);
+	--color-primary-700: oklch(49.1% 0.27 292.6);
+	--color-primary-800: oklch(43.2% 0.232 292.8);
+	--color-primary-900: oklch(38% 0.189 293.7);
+	--color-primary-950: oklch(28.3% 0.141 291.1);
+
+	/* === Success (green) === */
+	--color-success-50: oklch(98.2% 0.018 155.8);
+	--color-success-100: oklch(96.2% 0.044 156.7);
+	--color-success-200: oklch(92.5% 0.084 155.9);
+	--color-success-300: oklch(87.1% 0.15 154.4);
+	--color-success-400: oklch(79.2% 0.209 151.7);
+	--color-success-500: oklch(72.3% 0.219 149.6);
+	--color-success-600: oklch(62.7% 0.194 149.2);
+	--color-success-700: oklch(52.7% 0.155 150.1);
+	--color-success-800: oklch(44.8% 0.119 151.3);
+	--color-success-900: oklch(39.3% 0.095 152.5);
+	--color-success-950: oklch(26.6% 0.065 152.9);
+
+	/* === Warning (amber) === */
+	--color-warning-50: oklch(98.7% 0.022 95.3);
+	--color-warning-100: oklch(96.2% 0.06 95.6);
+	--color-warning-200: oklch(92.4% 0.12 95.7);
+	--color-warning-300: oklch(87.9% 0.169 91.6);
+	--color-warning-400: oklch(82.8% 0.189 84.4);
+	--color-warning-500: oklch(76.9% 0.188 70.1);
+	--color-warning-600: oklch(66.6% 0.179 58.3);
+	--color-warning-700: oklch(55.5% 0.163 48.9);
+	--color-warning-800: oklch(47.3% 0.137 46.2);
+	--color-warning-900: oklch(41.4% 0.112 45.9);
+	--color-warning-950: oklch(27.9% 0.077 45.6);
+
+	/* === Danger (red) === */
+	--color-danger-50: oklch(97.1% 0.013 17.4);
+	--color-danger-100: oklch(93.6% 0.032 17.7);
+	--color-danger-200: oklch(88.5% 0.062 18.3);
+	--color-danger-300: oklch(80.8% 0.114 19.6);
+	--color-danger-400: oklch(70.4% 0.191 22.2);
+	--color-danger-500: oklch(63.7% 0.237 25.3);
+	--color-danger-600: oklch(57.7% 0.245 27.3);
+	--color-danger-700: oklch(50.5% 0.213 27.5);
+	--color-danger-800: oklch(44.4% 0.177 26.9);
+	--color-danger-900: oklch(39.6% 0.141 25.7);
+	--color-danger-950: oklch(25.8% 0.092 26);
+
+	/* === Info (sky blue) === */
+	--color-info-50: oklch(97.7% 0.013 236.6);
+	--color-info-100: oklch(95.1% 0.026 236.8);
+	--color-info-200: oklch(90.1% 0.058 230.9);
+	--color-info-300: oklch(82.8% 0.111 230.3);
+	--color-info-400: oklch(74.6% 0.16 232.7);
+	--color-info-500: oklch(68.5% 0.169 237.3);
+	--color-info-600: oklch(58.8% 0.158 241.5);
+	--color-info-700: oklch(50% 0.134 242.7);
+	--color-info-800: oklch(44.3% 0.11 240.8);
+	--color-info-900: oklch(39.1% 0.09 240.9);
+	--color-info-950: oklch(29.3% 0.066 243.2);
+
+	/* === Role tokens (light-mode defaults) ===
+	 * Atoms reference these, never raw scales. Dark mode swaps the right-hand
+	 * sides at the bottom of this file.
+	 */
+
+	/* Foreground (text) */
+	--color-fg: oklch(20.4% 0 0); /* neutral-950ish */
+	--color-fg-muted: oklch(43.9% 0 0); /* neutral-600 */
+	--color-fg-subtle: oklch(56.6% 0 0); /* neutral-500 */
+	--color-fg-on-primary: white;
+
+	/* Background (surfaces) */
 	--color-bg: white;
-	--color-bg-muted: var(--color-neutral-100);
-	--color-bg-subtle: var(--color-neutral-50);
-	--color-border: var(--color-neutral-200);
-	--color-border-strong: var(--color-neutral-300);
+	--color-bg-muted: oklch(96.7% 0 0); /* neutral-100 */
+	--color-bg-subtle: oklch(98.5% 0 0); /* neutral-50 */
+	--color-bg-elevated: white;
+	--color-bg-inverse: oklch(20.4% 0 0); /* used for tooltips, dark surfaces on light */
+
+	/* Borders */
+	--color-border: oklch(92.2% 0 0); /* neutral-200 */
+	--color-border-strong: oklch(86.9% 0 0); /* neutral-300 */
+
+	/* Focus ring — semi-transparent so it composes on any bg */
+	--color-ring: var(--color-primary-500);
+
+	/* Feedback role tokens — referenced by Banner / toast / Field error */
+	--color-success-bg: var(--color-success-50);
+	--color-success-fg: var(--color-success-900);
+	--color-success-border: var(--color-success-200);
+	--color-warning-bg: var(--color-warning-50);
+	--color-warning-fg: var(--color-warning-900);
+	--color-warning-border: var(--color-warning-200);
+	--color-danger-bg: var(--color-danger-50);
+	--color-danger-fg: var(--color-danger-900);
+	--color-danger-border: var(--color-danger-200);
+	--color-info-bg: var(--color-info-50);
+	--color-info-fg: var(--color-info-900);
+	--color-info-border: var(--color-info-200);
 
-	/* Component sizing — kept minimal; most sizing is via Tailwind utilities. */
+	/* === Typography ===
+	 * Default sans is Outfit — geometric humanist with a distinct framework feel.
+	 * Consumers self-host via `import '@fontsource-variable/outfit'` (already a
+	 * dependency of this package). Falls back to system if the variable file
+	 * isn't loaded. Override `--font-sans` in your own @theme block to swap.
+	 */
+	--font-sans:
+		'Outfit Variable', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+	--font-mono:
+		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+
+	/* === Component sizing === */
 	--ui-radius-sm: 0.25rem;
-	--ui-radius: 0.375rem;
-	--ui-radius-lg: 0.5rem;
+	--ui-radius: 0.5rem;
+	--ui-radius-lg: 0.75rem;
 	--ui-radius-full: 9999px;
 
 	--ui-h-sm: 1.75rem; /* 28px */
 	--ui-h-md: 2.25rem; /* 36px */
 	--ui-h-lg: 2.75rem; /* 44px */
+
+	/* Square icon-button sizes (close buttons, nav arrows, chevron triggers).
+	 * Distinct from full button heights above. */
+	--ui-icon-btn-sm: 1.5rem;  /* 24px */
+	--ui-icon-btn-md: 1.75rem; /* 28px */
+	--ui-icon-btn-lg: 2.25rem; /* 36px */
+
+	/* Motion timings — shared so animations feel coordinated. */
+	--ui-motion-fast: 150ms;
+	--ui-motion-med: 200ms;
+	--ui-motion-slow: 300ms;
+	--ui-motion-ease: cubic-bezier(0.2, 0, 0, 1);
+
+	/* Elevation — the only shadow vocabulary in the library.
+	 * elev-1: subtle (cards, hover-lifts)
+	 * elev-2: floating menus, popovers, tooltips
+	 * elev-3: dialogs, sheets
+	 */
+	--ui-elev-1: 0 1px 2px oklch(0% 0 0 / 0.06), 0 1px 3px oklch(0% 0 0 / 0.04);
+	--ui-elev-2: 0 4px 12px -2px oklch(0% 0 0 / 0.08), 0 2px 4px -1px oklch(0% 0 0 / 0.04);
+	--ui-elev-3: 0 16px 32px -8px oklch(0% 0 0 / 0.18), 0 4px 8px -4px oklch(0% 0 0 / 0.06);
+
+	/* Single canonical focus indicator. 2px halo on the surface color + 2px
+	 * ring color outside it, so the ring stays visible on any background. */
+	--ui-focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-ring);
 }
 
-/* Dark theme — user toggles via <html data-theme="dark">. Override surfaces;
- * primary scale stays the same (Tailwind primaries already work on dark). */
+/* === Dark theme ===
+ * User toggles via <html data-theme="dark">. Only role tokens change; scales
+ * are perceptually uniform across both modes. Tuned for WCAG AA contrast at
+ * the body-text level.
+ */
 [data-theme='dark'] {
-	--color-fg: var(--color-neutral-100);
-	--color-fg-muted: var(--color-neutral-400);
-	--color-fg-subtle: var(--color-neutral-500);
-	--color-bg: var(--color-neutral-900);
-	--color-bg-muted: var(--color-neutral-800);
-	--color-bg-subtle: var(--color-neutral-850, oklch(25% 0 0));
-	--color-border: var(--color-neutral-800);
-	--color-border-strong: var(--color-neutral-700);
+	/* Foreground */
+	--color-fg: oklch(98.5% 0 0); /* near-white */
+	--color-fg-muted: oklch(70.8% 0 0); /* neutral-400 */
+	--color-fg-subtle: oklch(56.6% 0 0); /* neutral-500 */
+	--color-fg-on-primary: white;
+
+	/* Background */
+	--color-bg: oklch(14.5% 0 0); /* deep neutral, slightly above true black */
+	--color-bg-muted: oklch(20.4% 0 0); /* neutral-900ish */
+	--color-bg-subtle: oklch(17.5% 0 0); /* between bg and bg-muted */
+	--color-bg-elevated: oklch(23.5% 0 0); /* one step up — Cards/Dialogs */
+	--color-bg-inverse: oklch(98.5% 0 0);
+
+	/* Borders */
+	--color-border: oklch(27.5% 0 0); /* neutral-800 */
+	--color-border-strong: oklch(37.1% 0 0); /* neutral-700 */
+
+	/* Ring brightens slightly so it stays visible on dark surfaces */
+	--color-ring: var(--color-primary-400);
+
+	/* Dark-mode elevation — true-black shadow on dark bg disappears, so we
+	 * lean on darker shadow + the existing border to convey depth. */
+	--ui-elev-1: 0 1px 2px oklch(0% 0 0 / 0.4);
+	--ui-elev-2: 0 4px 12px -2px oklch(0% 0 0 / 0.5), 0 2px 4px -1px oklch(0% 0 0 / 0.3);
+	--ui-elev-3: 0 16px 32px -8px oklch(0% 0 0 / 0.6), 0 4px 8px -4px oklch(0% 0 0 / 0.4);
+
+	--ui-focus-ring: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--color-ring);
+
+	/* Feedback — flip to deep tinted bg + light fg */
+	--color-success-bg: oklch(28% 0.05 152);
+	--color-success-fg: var(--color-success-200);
+	--color-success-border: oklch(38% 0.08 151);
+	--color-warning-bg: oklch(28% 0.05 65);
+	--color-warning-fg: var(--color-warning-200);
+	--color-warning-border: oklch(38% 0.08 60);
+	--color-danger-bg: oklch(28% 0.07 27);
+	--color-danger-fg: var(--color-danger-200);
+	--color-danger-border: oklch(38% 0.11 27);
+	--color-info-bg: oklch(28% 0.05 240);
+	--color-info-fg: var(--color-info-200);
+	--color-info-border: oklch(38% 0.08 240);
 }

package/src/types/Accordion.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+
+export type AccordionItem = {
+	value: string;
+	title: string;
+	content?: Snippet;
+};
+
+export type AccordionProps = {
+	items?: AccordionItem[];
+	multiple?: boolean;
+	value?: string | string[];
+	class?: string;
+};
+
+declare const Accordion: Component<AccordionProps>;
+export default Accordion;

package/src/types/AnimatedNumber.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type AnimatedNumberProps = {
+	value: number;
+	from?: number;
+	/** Duration in seconds. */
+	duration?: number;
+	decimals?: number;
+	/** Custom number-to-string formatter. */
+	format?: (n: number) => string;
+	class?: string;
+};
+
+declare const AnimatedNumber: Component<AnimatedNumberProps>;
+export default AnimatedNumber;

package/src/types/Audio.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+
+export type AudioSource = { src: string; type?: string };
+
+export type AudioProps = {
+	src?: string;
+	sources?: AudioSource[];
+	controls?: boolean;
+	autoplay?: boolean;
+	loop?: boolean;
+	muted?: boolean;
+	preload?: 'none' | 'metadata' | 'auto';
+	fallback?: string;
+	class?: string;
+};
+
+declare const Audio: Component<AudioProps>;
+export default Audio;

package/src/types/Autocomplete.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type ComboboxItem = { value: string; label: string };
+
+export type AutocompleteProps = {
+	items?: ComboboxItem[];
+	value?: string;
+	open?: boolean;
+	placeholder?: string;
+	disabled?: boolean;
+	name?: string;
+	id?: string;
+	error?: boolean;
+};
+
+declare const Autocomplete: Component<AutocompleteProps>;
+export default Autocomplete;

package/src/types/Avatar.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from 'svelte';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export type AvatarProps = {
+	src?: string;
+	/** Display name; first + last initial used as fallback when `src` is missing. */
+	name?: string;
+	size?: AvatarSize;
+	class?: string;
+};
+
+declare const Avatar: Component<AvatarProps>;
+export default Avatar;

package/src/types/AvatarGroup.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+import type { AvatarSize } from './Avatar';
+
+export type AvatarGroupItem = { src?: string; name?: string };
+
+export type AvatarGroupProps = {
+	items?: AvatarGroupItem[];
+	max?: number;
+	size?: AvatarSize;
+	label?: string;
+	class?: string;
+};
+
+declare const AvatarGroup: Component<AvatarGroupProps>;
+export default AvatarGroup;

package/src/types/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { Component, Snippet } from 'svelte';
+
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+export type BadgeSize = 'sm' | 'md';
+
+export type BadgeProps = {
+	variant?: BadgeVariant;
+	size?: BadgeSize;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Badge: Component<BadgeProps>;
+export default Badge;

package/src/types/Banner.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Snippet } from 'svelte';
+
+export type BannerVariant = 'info' | 'success' | 'warning' | 'danger';
+
+export type BannerProps = {
+	variant?: BannerVariant;
+	/** Iconify icon name (e.g. `"lucide:alert-triangle"`). */
+	icon?: string;
+	actions?: Snippet;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Banner: Component<BannerProps>;
+export default Banner;

package/src/types/Breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type BreadcrumbItem = {
+	label: string;
+	href?: string;
+};
+
+export type BreadcrumbsProps = {
+	items?: BreadcrumbItem[];
+	separator?: string;
+	class?: string;
+};
+
+declare const Breadcrumbs: Component<BreadcrumbsProps>;
+export default Breadcrumbs;

package/src/types/Btn.d.ts

@@ -15,6 +15,16 @@ export type BtnProps = Omit<HTMLButtonAttributes, 'class' | 'children'> & {
 	loading?: boolean;
 	disabled?: boolean;
 	type?: 'button' | 'submit' | 'reset';
+	/**
+	 * Convenience: Iconify icon name (e.g. `"lucide:save"`). Renders an
+	 * `<Icon>` in the leading slot. If you also pass a `leading` snippet,
+	 * the snippet wins.
+	 */
+	icon?: string;
+	/** When set, renders as an `<a>` styled like the button. */
+	href?: string;
+	target?: string;
+	rel?: string;
 	class?: string;
 	children?: Snippet;
 	leading?: Snippet;

package/src/types/ButtonGroup.d.ts

@@ -0,0 +1,10 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ButtonGroupProps = {
+	orientation?: 'horizontal' | 'vertical';
+	children?: Snippet;
+	class?: string;
+};
+
+declare const ButtonGroup: Component<ButtonGroupProps>;
+export default ButtonGroup;

package/src/types/Calendar.d.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'svelte';
+
+export type CalendarDateRange = { start: string; end: string };
+
+export type CalendarProps = {
+	/** ISO YYYY-MM-DD. Bindable. */
+	value?: string;
+	/** Range mode. Bindable. Use instead of `value` when `range` is true. */
+	rangeValue?: CalendarDateRange;
+	range?: boolean;
+	/** ISO YYYY-MM-DD inclusive. */
+	min?: string;
+	max?: string;
+	label?: string;
+	onchange?: (next: string | CalendarDateRange) => void;
+	class?: string;
+};
+
+declare const Calendar: Component<CalendarProps>;
+export default Calendar;

package/src/types/Card.d.ts

@@ -0,0 +1,19 @@
+import type { Component, Snippet } from 'svelte';
+
+export type CardProps = {
+	/** Wrap body in `.card-body` (default true). Set false for full-bleed content. */
+	padded?: boolean;
+	/** Apply `.card-interactive` hover/focus treatment. Implicit if `href` is set. */
+	interactive?: boolean;
+	/** Renders as `<a>` instead of `<div>` when set. */
+	href?: string;
+	target?: string;
+	rel?: string;
+	header?: Snippet;
+	footer?: Snippet;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Card: Component<CardProps>;
+export default Card;

package/src/types/Carousel.d.ts

@@ -0,0 +1,23 @@
+import type { Component, Snippet } from 'svelte';
+
+export type CarouselSlide = {
+	src?: string;
+	alt?: string;
+	[key: string]: unknown;
+};
+
+export type CarouselProps = {
+	slides?: CarouselSlide[];
+	index?: number;
+	autoplay?: boolean;
+	/** Autoplay interval in milliseconds. Default 5000. */
+	interval?: number;
+	/** Default aspect ratio applied if no explicit `class="aspect-..."` is passed. */
+	aspect?: 'video' | 'square' | 'wide' | 'none';
+	/** Custom slide renderer; receives `(slide, i)` and runs only for slides without `src`. */
+	children?: Snippet<[CarouselSlide, number]>;
+	class?: string;
+};
+
+declare const Carousel: Component<CarouselProps>;
+export default Carousel;

package/src/types/Chip.d.ts

@@ -0,0 +1,12 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ChipProps = {
+	icon?: string;
+	removable?: boolean;
+	onremove?: (event: MouseEvent) => void;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const Chip: Component<ChipProps>;
+export default Chip;

package/src/types/Collapsible.d.ts

@@ -0,0 +1,13 @@
+import type { Component, Snippet } from 'svelte';
+
+export type CollapsibleProps = {
+	open?: boolean;
+	title?: string;
+	trigger?: Snippet;
+	children?: Snippet;
+	onopenchange?: (open: boolean) => void;
+	class?: string;
+};
+
+declare const Collapsible: Component<CollapsibleProps>;
+export default Collapsible;

package/src/types/ColorPicker.d.ts

@@ -0,0 +1,15 @@
+import type { Component } from 'svelte';
+
+export type ColorPickerProps = {
+	/** Hex value with leading `#`. Bindable. */
+	value?: string;
+	disabled?: boolean;
+	/** Hide the clipboard-copy button. */
+	hideCopy?: boolean;
+	name?: string;
+	id?: string;
+	class?: string;
+};
+
+declare const ColorPicker: Component<ColorPickerProps>;
+export default ColorPicker;

package/src/types/ContextMenu.d.ts

@@ -0,0 +1,24 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ContextMenuItem = {
+	label?: string;
+	icon?: string;
+	separator?: boolean;
+	disabled?: boolean;
+	onSelect?: () => void;
+	/**
+	 * NOTE: nested submenus are not supported in 0.0.6+ (the property is
+	 * accepted but children are ignored). Re-introduce when the upstream
+	 * design needs them.
+	 */
+	children?: ContextMenuItem[];
+};
+
+export type ContextMenuProps = {
+	items?: ContextMenuItem[];
+	trigger?: Snippet;
+	triggerClass?: string;
+};
+
+declare const ContextMenu: Component<ContextMenuProps>;
+export default ContextMenu;

package/src/types/CopyButton.d.ts

@@ -0,0 +1,16 @@
+import type { Component, Snippet } from 'svelte';
+
+export type CopyButtonProps = {
+	value?: string | number;
+	variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
+	size?: 'sm' | 'md' | 'lg';
+	icon?: string;
+	disabled?: boolean;
+	label?: string;
+	oncopy?: (value: string | number) => void;
+	children?: Snippet;
+	class?: string;
+};
+
+declare const CopyButton: Component<CopyButtonProps>;
+export default CopyButton;

package/src/types/DataTable.d.ts

@@ -0,0 +1,27 @@
+import type { Component } from 'svelte';
+
+export type DataTableColumn = {
+	key: string;
+	label?: string;
+	width?: string;
+	class?: string;
+	cellClass?: string;
+	sortable?: boolean;
+};
+
+export type DataTableProps = {
+	columns?: DataTableColumn[];
+	rows?: Record<string, unknown>[];
+	striped?: boolean;
+	dense?: boolean;
+	stickyHeader?: boolean;
+	emptyMessage?: string;
+	/** Currently-sorted column key. Bindable. */
+	sortKey?: string;
+	sortDir?: 'asc' | 'desc';
+	onrowclick?: (row: Record<string, unknown>, index: number) => void;
+	class?: string;
+};
+
+declare const DataTable: Component<DataTableProps>;
+export default DataTable;

package/src/types/DatePicker.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+
+export type DatePickerProps = {
+	/** ISO date string (YYYY-MM-DD). Bindable. */
+	value?: string;
+	/** Whether the popover is open. Bindable. */
+	open?: boolean;
+	min?: string;
+	max?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	/** Close the popover automatically once a date is picked (default true). */
+	closeOnSelect?: boolean;
+	/** aria-label override; defaults to "Pick a date". */
+	label?: string;
+	name?: string;
+	id?: string;
+	error?: boolean;
+	class?: string;
+};
+
+declare const DatePicker: Component<DatePickerProps>;
+export default DatePicker;

package/src/types/DateRangePicker.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type DateRange = { start: string; end: string };
+
+export type DateRangePickerProps = {
+	value?: DateRange;
+	/** Whether the popover is open. Bindable. */
+	open?: boolean;
+	min?: string;
+	max?: string;
+	placeholder?: string;
+	disabled?: boolean;
+	class?: string;
+};
+
+declare const DateRangePicker: Component<DateRangePickerProps>;
+export default DateRangePicker;