@salmexio/ui 0.1.1 → 0.2.0

package/dist/layout/Container/Container.svelte

@@ -5,40 +5,40 @@
   Sharp edges, no rounded corners; supports semantic elements.
 -->
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn } from '../../utils/cn.js';
-
-	type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'prose' | 'full';
-	type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-
-	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
-		size?: ContainerSize;
-		paddingX?: ContainerPadding;
-		paddingY?: ContainerPadding;
-		padding?: ContainerPadding;
-		centered?: boolean;
-		as?: 'div' | 'main' | 'section' | 'article';
-		id?: string;
-		class?: string;
-		children?: Snippet;
-	}
-
-	let {
-		size = 'xl',
-		paddingX,
-		paddingY,
-		padding = 'md',
-		centered = true,
-		as = 'div',
-		id,
-		class: className = '',
-		children,
-		...restProps
-	}: Props = $props();
-
-	const resolvedPaddingX = $derived(paddingX ?? padding);
-	const resolvedPaddingY = $derived(paddingY ?? 'none');
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { cn } from '../../utils/cn.js';
+
+type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'prose' | 'full';
+type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+	size?: ContainerSize;
+	paddingX?: ContainerPadding;
+	paddingY?: ContainerPadding;
+	padding?: ContainerPadding;
+	centered?: boolean;
+	as?: 'div' | 'main' | 'section' | 'article';
+	id?: string;
+	class?: string;
+	children?: Snippet;
+}
+
+let {
+	size = 'xl',
+	paddingX,
+	paddingY,
+	padding = 'md',
+	centered = true,
+	as = 'div',
+	id,
+	class: className = '',
+	children,
+	...restProps
+}: Props = $props();
+
+const resolvedPaddingX = $derived(paddingX ?? padding);
+const resolvedPaddingY = $derived(paddingY ?? 'none');
 </script>
 
 <svelte:element

package/dist/layout/Container/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AACjF,KAAK,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4CF;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AACjF,KAAK,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4CD;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/navigation/Tabs/Tabs.svelte

@@ -20,107 +20,106 @@
   </Tabs>
 -->
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { cn } from '../../utils/cn.js';
-
-	type TabsSize = 'sm' | 'md' | 'lg';
-
-	export interface TabOption {
-		/** Unique value for the tab */
-		value: string;
-		/** Display label */
-		label: string;
-		/** Optional icon snippet */
-		icon?: Snippet;
-		/** Optional badge (count or label) */
-		badge?: number | string;
-		/** Whether this tab is disabled */
-		disabled?: boolean;
-	}
-
-	interface Props {
-		/** Unique identifier */
-		id?: string;
-		/** Accessible label for tablist (required for screen readers) */
-		label: string;
-		/** Tab definitions */
-		tabs: TabOption[];
-		/** Currently selected tab value */
-		value?: string;
-		/** Size variant */
-		size?: TabsSize;
-		/** Additional CSS classes */
-		class?: string;
-		/** Change handler */
-		onchange?: (value: string) => void;
-		/** Panel content - receives active tab value */
-		children?: Snippet<[activeValue: string]>;
-		/** Test ID */
-		testId?: string;
-	}
-
-	let {
-		id = `tabs-${Math.random().toString(36).substr(2, 9)}`,
-		label,
-		tabs,
-		value = '',
-		size = 'md',
-		class: className = '',
-		onchange,
-		children,
-		testId
-	}: Props = $props();
-
-	function getTabId(index: number) {
-		return `${id}-tab-${index}`;
-	}
-
-	function getPanelId(index: number) {
-		return `${id}-panel-${index}`;
-	}
-
-	function activateTab(index: number) {
-		const tab = tabs[index];
-		if (!tab || tab.disabled) return;
-		if (value === tab.value) return;
-		onchange?.(tab.value);
-	}
-
-	function handleKeydown(event: KeyboardEvent, currentIndex: number) {
-		let nextIndex = currentIndex;
-
-		if (event.key === 'ArrowRight') {
-			event.preventDefault();
-			nextIndex = currentIndex + 1;
-			if (nextIndex >= tabs.length) nextIndex = 0;
-		} else if (event.key === 'ArrowLeft') {
-			event.preventDefault();
-			nextIndex = currentIndex - 1;
-			if (nextIndex < 0) nextIndex = tabs.length - 1;
-		} else if (event.key === 'Home') {
-			event.preventDefault();
-			nextIndex = 0;
-		} else if (event.key === 'End') {
-			event.preventDefault();
-			nextIndex = tabs.length - 1;
-		} else {
-			return;
-		}
-
-		// Skip disabled tabs
-		while (tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
-			nextIndex =
-				event.key === 'ArrowRight' || event.key === 'End' ? nextIndex + 1 : nextIndex - 1;
-			if (nextIndex >= tabs.length) nextIndex = 0;
-			if (nextIndex < 0) nextIndex = tabs.length - 1;
-		}
-
-		if (!tabs[nextIndex]?.disabled) {
-			activateTab(nextIndex);
-			const el = document.getElementById(getTabId(nextIndex));
-			el?.focus();
-		}
-	}
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils/cn.js';
+
+type TabsSize = 'sm' | 'md' | 'lg';
+
+export interface TabOption {
+	/** Unique value for the tab */
+	value: string;
+	/** Display label */
+	label: string;
+	/** Optional icon snippet */
+	icon?: Snippet;
+	/** Optional badge (count or label) */
+	badge?: number | string;
+	/** Whether this tab is disabled */
+	disabled?: boolean;
+}
+
+interface Props {
+	/** Unique identifier */
+	id?: string;
+	/** Accessible label for tablist (required for screen readers) */
+	label: string;
+	/** Tab definitions */
+	tabs: TabOption[];
+	/** Currently selected tab value */
+	value?: string;
+	/** Size variant */
+	size?: TabsSize;
+	/** Additional CSS classes */
+	class?: string;
+	/** Change handler */
+	onchange?: (value: string) => void;
+	/** Panel content - receives active tab value */
+	children?: Snippet<[activeValue: string]>;
+	/** Test ID */
+	testId?: string;
+}
+
+let {
+	id = `tabs-${Math.random().toString(36).substr(2, 9)}`,
+	label,
+	tabs,
+	value = '',
+	size = 'md',
+	class: className = '',
+	onchange,
+	children,
+	testId
+}: Props = $props();
+
+function getTabId(index: number) {
+	return `${id}-tab-${index}`;
+}
+
+function getPanelId(index: number) {
+	return `${id}-panel-${index}`;
+}
+
+function activateTab(index: number) {
+	const tab = tabs[index];
+	if (!tab || tab.disabled) return;
+	if (value === tab.value) return;
+	onchange?.(tab.value);
+}
+
+function handleKeydown(event: KeyboardEvent, currentIndex: number) {
+	let nextIndex = currentIndex;
+
+	if (event.key === 'ArrowRight') {
+		event.preventDefault();
+		nextIndex = currentIndex + 1;
+		if (nextIndex >= tabs.length) nextIndex = 0;
+	} else if (event.key === 'ArrowLeft') {
+		event.preventDefault();
+		nextIndex = currentIndex - 1;
+		if (nextIndex < 0) nextIndex = tabs.length - 1;
+	} else if (event.key === 'Home') {
+		event.preventDefault();
+		nextIndex = 0;
+	} else if (event.key === 'End') {
+		event.preventDefault();
+		nextIndex = tabs.length - 1;
+	} else {
+		return;
+	}
+
+	// Skip disabled tabs
+	while (tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+		nextIndex = event.key === 'ArrowRight' || event.key === 'End' ? nextIndex + 1 : nextIndex - 1;
+		if (nextIndex >= tabs.length) nextIndex = 0;
+		if (nextIndex < 0) nextIndex = tabs.length - 1;
+	}
+
+	if (!tabs[nextIndex]?.disabled) {
+		activateTab(nextIndex);
+		const el = document.getElementById(getTabId(nextIndex));
+		el?.focus();
+	}
+}
 </script>
 
 <div class={cn('salmex-tabs-root', className)} data-testid={testId} {id}>

package/dist/navigation/Tabs/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA+GF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA8GD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/primitives/Badge/Badge.svelte

@@ -9,48 +9,41 @@
   <Badge status="warning" size="lg" dot />
 -->
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { cn } from '../../utils/cn.js';
-
-	type BadgeSize = 'sm' | 'md' | 'lg';
-	type BadgeStatus =
-		| 'neutral'
-		| 'primary'
-		| 'success'
-		| 'warning'
-		| 'error'
-		| 'info'
-		| 'outline';
-
-	interface Props {
-		/** Semantic status / variant */
-		status?: BadgeStatus;
-		/** Size */
-		size?: BadgeSize;
-		/** Pill shape (fully rounded) — we use minimal radius by default */
-		pill?: boolean;
-		/** Dot-only indicator (no text), use with aria-label for a11y */
-		dot?: boolean;
-		/** Optional icon before label */
-		icon?: Snippet;
-		/** Additional class names */
-		class?: string;
-		/** Badge content (ignored when dot) */
-		children?: Snippet;
-		/** Accessible label when dot (required when dot for a11y) */
-		'aria-label'?: string;
-	}
-
-	let {
-		status = 'neutral',
-		size = 'md',
-		pill = false,
-		dot = false,
-		icon,
-		class: className = '',
-		children,
-		'aria-label': ariaLabel
-	}: Props = $props();
+import type { Snippet } from 'svelte';
+import { cn } from '../../utils/cn.js';
+
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeStatus = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'outline';
+
+interface Props {
+	/** Semantic status / variant */
+	status?: BadgeStatus;
+	/** Size */
+	size?: BadgeSize;
+	/** Pill shape (fully rounded) — we use minimal radius by default */
+	pill?: boolean;
+	/** Dot-only indicator (no text), use with aria-label for a11y */
+	dot?: boolean;
+	/** Optional icon before label */
+	icon?: Snippet;
+	/** Additional class names */
+	class?: string;
+	/** Badge content (ignored when dot) */
+	children?: Snippet;
+	/** Accessible label when dot (required when dot for a11y) */
+	'aria-label'?: string;
+}
+
+let {
+	status = 'neutral',
+	size = 'md',
+	pill = false,
+	dot = false,
+	icon,
+	class: className = '',
+	children,
+	'aria-label': ariaLabel
+}: Props = $props();
 </script>
 
 {#if dot}

package/dist/primitives/Badge/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GACb,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,CAAC;AAEb,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAuDF;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAuDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Button/Button.svelte

@@ -16,53 +16,53 @@
   </Button>
 -->
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { cn } from '../../utils/cn.js';
-
-	type ButtonSize = 'sm' | 'md' | 'lg';
-	type ButtonVariant = 'default' | 'primary' | 'flat';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'class'> {
-		/** Visual variant of the button */
-		variant?: ButtonVariant;
-		/** Size of the button */
-		size?: ButtonSize;
-		/** Whether the button takes full width */
-		fullWidth?: boolean;
-		/** Icon to display on the left */
-		iconLeft?: Snippet;
-		/** Icon to display on the right */
-		iconRight?: Snippet;
-		/** Whether this is an icon-only button (requires aria-label) */
-		iconOnly?: boolean;
-		/** Additional CSS classes */
-		class?: string;
-		/** Button content */
-		children?: Snippet;
-		/** Test ID for e2e testing */
-		testId?: string;
-		/** Keyboard shortcut hint (e.g., "Ctrl+S") */
-		shortcut?: string;
-	}
-
-	let {
-		variant = 'default',
-		size = 'md',
-		fullWidth = false,
-		disabled = false,
-		type = 'button',
-		iconLeft,
-		iconRight,
-		iconOnly = false,
-		class: className = '',
-		children,
-		testId,
-		shortcut,
-		...restProps
-	}: Props = $props();
-
-	const isDisabled = $derived(disabled);
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { cn } from '../../utils/cn.js';
+
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonVariant = 'default' | 'primary' | 'flat';
+
+interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+	/** Visual variant of the button */
+	variant?: ButtonVariant;
+	/** Size of the button */
+	size?: ButtonSize;
+	/** Whether the button takes full width */
+	fullWidth?: boolean;
+	/** Icon to display on the left */
+	iconLeft?: Snippet;
+	/** Icon to display on the right */
+	iconRight?: Snippet;
+	/** Whether this is an icon-only button (requires aria-label) */
+	iconOnly?: boolean;
+	/** Additional CSS classes */
+	class?: string;
+	/** Button content */
+	children?: Snippet;
+	/** Test ID for e2e testing */
+	testId?: string;
+	/** Keyboard shortcut hint (e.g., "Ctrl+S") */
+	shortcut?: string;
+}
+
+let {
+	variant = 'default',
+	size = 'md',
+	fullWidth = false,
+	disabled = false,
+	type = 'button',
+	iconLeft,
+	iconRight,
+	iconOnly = false,
+	class: className = '',
+	children,
+	testId,
+	shortcut,
+	...restProps
+}: Props = $props();
+
+const isDisabled = $derived(disabled);
 </script>
 
 <button

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkEF;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { children } = $props();
+let { children } = $props();
 </script>
 
 {@render children()}