@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.11

package/dist/components/primitives/ViewToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Grid2x2, List } from '@lucide/svelte';
+	import * as ToggleGroup from './toggle-group';
 
 	type ViewMode = 'grid' | 'list';
 
@@ -10,38 +11,22 @@
 	}
 
 	let { mode, onChange, size = 'md' }: Props = $props();
-
-	const btnClass = $derived(
-		size === 'sm'
-			? 'flex h-7 w-7 items-center justify-center rounded-md transition-colors'
-			: 'flex h-8 w-8 items-center justify-center rounded-md transition-colors'
-	);
-	const iconClass = $derived(size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4');
 </script>
 
-<div class="gap-0.5 p-0.5 inline-flex rounded-md border border-border bg-card">
-	<button
-		type="button"
-		title="Grid view"
-		aria-label="Grid view"
-		aria-pressed={mode === 'grid'}
-		onclick={() => onChange('grid')}
-		class="{btnClass} {mode === 'grid'
-			? 'bg-muted text-foreground'
-			: 'text-muted-foreground hover:text-foreground'}"
-	>
-		<Grid2x2 class={iconClass} />
-	</button>
-	<button
-		type="button"
-		title="List view"
-		aria-label="List view"
-		aria-pressed={mode === 'list'}
-		onclick={() => onChange('list')}
-		class="{btnClass} {mode === 'list'
-			? 'bg-muted text-foreground'
-			: 'text-muted-foreground hover:text-foreground'}"
-	>
-		<List class={iconClass} />
-	</button>
-</div>
+<ToggleGroup.Root
+	type="single"
+	variant="outline"
+	size={size === 'sm' ? 'sm' : 'default'}
+	value={mode}
+	onValueChange={(next) => {
+		// A single-select group emits '' when the active item is clicked again; keep the mode.
+		if (next === 'grid' || next === 'list') onChange(next);
+	}}
+>
+	<ToggleGroup.Item value="grid" aria-label="Grid view" title="Grid view">
+		<Grid2x2 />
+	</ToggleGroup.Item>
+	<ToggleGroup.Item value="list" aria-label="List view" title="List view">
+		<List />
+	</ToggleGroup.Item>
+</ToggleGroup.Root>

package/dist/components/primitives/alert-dialog/alert-dialog-action.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from '../button/index.js';
+	import {
+		buttonVariants,
+		type ButtonSize,
+		type ButtonVariant
+	} from '../button/index.js';
 	import { cn } from '../../../utils.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		variant = 'default',
+		size = 'default',
 		...restProps
-	}: AlertDialogPrimitive.ActionProps = $props();
+	}: AlertDialogPrimitive.ActionProps & { variant?: ButtonVariant; size?: ButtonSize } = $props();
 </script>
 
 <AlertDialogPrimitive.Action
 	bind:ref
 	data-slot="alert-dialog-action"
-	class={cn(buttonVariants(), className)}
+	class={cn(buttonVariants({ variant, size }), className)}
 	{...restProps}
 />

package/dist/components/primitives/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -1,4 +1,9 @@
 import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-declare const AlertDialogAction: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+import { type ButtonSize, type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
 export default AlertDialogAction;

package/dist/components/primitives/alert-dialog/alert-dialog-content.svelte

@@ -19,7 +19,7 @@
 		bind:ref
 		data-slot="alert-dialog-content"
 		class={cn(
-			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background duration-200',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 gap-4 p-6 shadow-lg sm:max-w-lg fixed start-1/2 top-1/2 z-50 grid max-h-dialog w-screen-inset -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border bg-background duration-200',
 			className
 		)}
 		{...restProps}

package/dist/components/primitives/alert-dialog/alert-dialog-overlay.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="alert-dialog-overlay"
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 inset-0 bg-black/50 fixed z-50',
+		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 inset-0 fixed z-50 bg-overlay',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/badge/badge.svelte

@@ -2,14 +2,14 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const badgeVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
+		base: 'focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3',
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
 				secondary:
 					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
 				destructive:
-					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
+					'bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground',
 				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
 			}
 		},

package/dist/components/primitives/badge/badge.svelte.d.ts

@@ -3,21 +3,21 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition focus-visible:ring-3 [&>svg]:pointer-events-none [&>svg]:size-3", {
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent";
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent";
-        destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white";
+        destructive: "bg-destructive [a&]:hover:bg-destructive/90 dark:bg-destructive/70 border-transparent text-destructive-foreground";
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground";
     };
 }, undefined>>;

package/dist/components/primitives/button/button.svelte

@@ -4,14 +4,17 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
 				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+					'bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground',
 				outline:
 					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				// Outline with an opaque dark fill: the translucent one washes out over the light 3D canvas.
+				overlay:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border',
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				dashed:
@@ -20,6 +23,7 @@
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				xs: 'h-7 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2',
 				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
 				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
 				icon: 'size-9',

package/dist/components/primitives/button/button.svelte.d.ts

@@ -4,8 +4,9 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
@@ -13,17 +14,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
     size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        xs: "h-7 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2";
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
         icon: "size-9";
         'icon-sm': "size-8";
         'icon-lg': "size-10";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
@@ -31,6 +34,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
     size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        xs: "h-7 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2";
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
         icon: "size-9";
@@ -40,8 +44,9 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
-        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white";
+        destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
@@ -49,6 +54,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
     size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3";
+        xs: "h-7 gap-1 rounded-md px-3 text-xs has-[>svg]:px-2";
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5";
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4";
         icon: "size-9";

package/dist/components/primitives/card/card-header.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		'gap-1.5 px-6 [.border-b]:pb-6 @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto]',
+		'gap-1.5 px-6 [.border-b]:pb-6 @container/card-header grid auto-rows-min items-start',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/card/card.svelte

@@ -1,3 +1,21 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	export const cardVariants = tv({
+		base: 'shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground',
+		variants: {
+			variant: {
+				default: 'gap-6 py-6',
+				/** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
+				flush: 'gap-0 overflow-hidden'
+			}
+		},
+		defaultVariants: { variant: 'default' }
+	});
+
+	export type CardVariant = VariantProps<typeof cardVariants>['variant'];
+</script>
+
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { cn, type WithElementRef } from '../../../utils.js';
@@ -5,18 +23,16 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		variant = 'default',
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: CardVariant } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
-	class={cn(
-		'gap-6 py-6 shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground',
-		className
-	)}
+	class={cn(cardVariants({ variant }), className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/primitives/card/card.svelte.d.ts

@@ -1,5 +1,29 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "gap-6 py-6";
+        /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
+        flush: "gap-0 overflow-hidden";
+    };
+}, undefined, "shadow-sm flex flex-col rounded-xl border bg-card text-card-foreground", {
+    variant: {
+        default: "gap-6 py-6";
+        /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
+        flush: "gap-0 overflow-hidden";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "gap-6 py-6";
+        /** No padding or gap: for a card whose children draw their own edges, like a tab panel. */
+        flush: "gap-0 overflow-hidden";
+    };
+}, undefined>>;
+export type CardVariant = VariantProps<typeof cardVariants>['variant'];
 import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
-declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: CardVariant;
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/primitives/card/index.d.ts

@@ -4,5 +4,4 @@ import Description from './card-description.svelte';
 import Footer from './card-footer.svelte';
 import Header from './card-header.svelte';
 import Title from './card-title.svelte';
-import Action from './card-action.svelte';
-export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };
+export { Root, Content, Description, Footer, Header, Title, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle };

package/dist/components/primitives/card/index.js

@@ -4,7 +4,6 @@ import Description from './card-description.svelte';
 import Footer from './card-footer.svelte';
 import Header from './card-header.svelte';
 import Title from './card-title.svelte';
-import Action from './card-action.svelte';
-export { Root, Content, Description, Footer, Header, Title, Action, 
+export { Root, Content, Description, Footer, Header, Title, 
 //
-Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction };
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle };

package/dist/components/primitives/checkbox/checkbox.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-[4px] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		'peer size-4 shadow-xs flex shrink-0 items-center justify-center rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
 		className
 	)}
 	bind:checked

package/dist/components/primitives/command/command-dialog.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import * as Dialog from '../dialog/index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import Command from './command.svelte';
+	import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		ref = $bindable(null),
+		value = $bindable(''),
+		title = 'Command Palette',
+		description = 'Search for a command to run...',
+		showCloseButton = false,
+		portalProps,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
+		WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+			portalProps?: DialogPrimitive.PortalProps;
+			children: Snippet;
+			title?: string;
+			description?: string;
+			showCloseButton?: boolean;
+			class?: string;
+		} = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+	<Dialog.Header class="sr-only">
+		<Dialog.Title>{title}</Dialog.Title>
+		<Dialog.Description>{description}</Dialog.Description>
+	</Dialog.Header>
+	<Dialog.Content
+		class={cn('translate-y-0 p-0 top-1/3 overflow-hidden rounded-xl!', className)}
+		{showCloseButton}
+		{portalProps}
+	>
+		<Command {...restProps} bind:value bind:ref {children} />
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/primitives/command/command-dialog.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    class?: string;
+};
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+type CommandDialog = ReturnType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/primitives/command/command-empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.EmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+	bind:ref
+	data-slot="command-empty"
+	class={cn('py-6 text-sm text-center', className)}
+	{...restProps}
+/>

package/dist/components/primitives/command/command-empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandEmpty: import("svelte").Component<CommandPrimitive.EmptyProps, {}, "ref">;
+type CommandEmpty = ReturnType<typeof CommandEmpty>;
+export default CommandEmpty;

package/dist/components/primitives/command/command-group.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Command as CommandPrimitive, useId } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		heading,
+		value,
+		...restProps
+	}: CommandPrimitive.GroupProps & {
+		heading?: string;
+	} = $props();
+</script>
+
+<CommandPrimitive.Group
+	bind:ref
+	data-slot="command-group"
+	class={cn(
+		'p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium overflow-hidden text-foreground **:[[cmdk-group-heading]]:text-muted-foreground',
+		className
+	)}
+	value={value ?? heading ?? `----${useId()}`}
+	{...restProps}
+>
+	{#if heading}
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+			{heading}
+		</CommandPrimitive.GroupHeading>
+	{/if}
+	<CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

package/dist/components/primitives/command/command-group.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+type $$ComponentProps = CommandPrimitive.GroupProps & {
+    heading?: string;
+};
+declare const CommandGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CommandGroup = ReturnType<typeof CommandGroup>;
+export default CommandGroup;

package/dist/components/primitives/command/command-input.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import * as InputGroup from '../input-group/index.js';
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(''),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
+</script>
+
+<div data-slot="command-input-wrapper" class="p-1 pb-0">
+	<InputGroup.Root
+		class="h-8! *:data-[slot=input-group-addon]:pl-2! rounded-lg! border-input/30 bg-input/30 shadow-none!"
+	>
+		<CommandPrimitive.Input
+			{value}
+			data-slot="command-input"
+			class={cn(
+				'text-sm w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...restProps}
+		>
+			{#snippet child({ props })}
+				<InputGroup.Input {...props} bind:value bind:ref />
+			{/snippet}
+		</CommandPrimitive.Input>
+		<InputGroup.Addon>
+			<SearchIcon class="size-4 shrink-0 opacity-50" />
+		</InputGroup.Addon>
+	</InputGroup.Root>
+</div>

package/dist/components/primitives/command/command-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "ref" | "value">;
+type CommandInput = ReturnType<typeof CommandInput>;
+export default CommandInput;

package/dist/components/primitives/command/command-item.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CommandPrimitive.ItemProps = $props();
+</script>
+
+<CommandPrimitive.Item
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		'data-disabled:pointer-events-none data-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<CheckIcon
+		class="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+	/>
+</CommandPrimitive.Item>

package/dist/components/primitives/command/command-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandItem: import("svelte").Component<CommandPrimitive.ItemProps, {}, "ref">;
+type CommandItem = ReturnType<typeof CommandItem>;
+export default CommandItem;

package/dist/components/primitives/command/command-link-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.LinkItemProps = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+	bind:ref
+	data-slot="command-item"
+	class={cn(
+		"gap-2 px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/command-item relative flex cursor-default items-center rounded-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-selected:*:[svg]:text-foreground",
+		'data-disabled:pointer-events-none data-disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/primitives/command/command-link-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const CommandLinkItem: import("svelte").Component<CommandPrimitive.LinkItemProps, {}, "ref">;
+type CommandLinkItem = ReturnType<typeof CommandLinkItem>;
+export default CommandLinkItem;

package/dist/components/primitives/command/command-list.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Command as CommandPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CommandPrimitive.ListProps = $props();
+</script>
+
+<CommandPrimitive.List
+	bind:ref
+	data-slot="command-list"
+	class={cn(
+		'max-h-72 scroll-py-1 no-scrollbar overflow-x-hidden overflow-y-auto outline-none',
+		className
+	)}
+	{...restProps}
+/>