svelte-incant 0.1.0

package/dist/components/header.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import { shortcut } from '..';
+	import { Button } from './ui/button/index.js';
+	import * as Kbd from './ui/kbd/index.js';
+	import GithubIcon from '@lucide/svelte/icons/github';
+	import { useInterval } from 'runed';
+
+	// All keyboard keys for the decorative background
+	const allKeys = [
+		'A',
+		'B',
+		'C',
+		'D',
+		'E',
+		'F',
+		'G',
+		'H',
+		'I',
+		'J',
+		'K',
+		'L',
+		'M',
+		'N',
+		'O',
+		'P',
+		'Q',
+		'R',
+		'S',
+		'T',
+		'U',
+		'V',
+		'W',
+		'X',
+		'Y',
+		'Z',
+		'1',
+		'2',
+		'3',
+		'4',
+		'5',
+		'6',
+		'7',
+		'8',
+		'9',
+		'0',
+		'⌘',
+		'⌥',
+		'⌃',
+		'⇧',
+		'⇥',
+		'↵',
+		'⌫',
+		'⎋',
+		'←',
+		'→',
+		'↑',
+		'↓',
+		'/',
+		'?',
+		'.',
+		',',
+		';',
+		"'",
+		'[',
+		']'
+	];
+
+	// Total number of keys to display
+	const totalKeys = 500;
+
+	// Helper to get a random key
+	function getRandomKey() {
+		return allKeys[Math.floor(Math.random() * allKeys.length)] ?? 'A';
+	}
+
+	// Helper to get random unique indices
+	function getRandomIndices(count: number, max: number): number[] {
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const indices = new Set<number>();
+		while (indices.size < count) {
+			indices.add(Math.floor(Math.random() * max));
+		}
+		return Array.from(indices);
+	}
+
+	// Key cell type with unique id for transitions
+	type KeyCell = { id: number; key: string };
+
+	// Initialize with random keys as a flat array
+	let nextId = 0;
+	let keyboardKeys = $state<KeyCell[]>(
+		Array.from({ length: totalKeys }, () => ({ id: nextId++, key: getRandomKey() }))
+	);
+
+	useInterval(500, {
+		callback: () => {
+			const keysToChange = 7 + Math.floor(Math.random() * 4);
+			const indices = getRandomIndices(keysToChange, totalKeys);
+
+			for (const index of indices) {
+				keyboardKeys[index] = { id: nextId++, key: getRandomKey() };
+			}
+		}
+	});
+</script>
+
+<!-- Hero section with keyboard background -->
+<header class="relative flex flex-col items-center justify-center overflow-hidden">
+	<!-- Decorative keyboard background -->
+	<!-- class="pointer-events-none absolute inset-0 grid place-content-center gap-1.5 p-1 select-none" -->
+	<div
+		class="pointer-events-none grid max-h-[40vh] w-full place-content-center gap-1.5 p-1 select-none"
+		style="grid-template-columns: repeat(auto-fit, 2rem); justify-content: center;"
+		aria-hidden="true"
+	>
+		{#each keyboardKeys as cell (cell.id)}
+			<span
+				class="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border/20 bg-muted/30 font-sans text-sm font-medium text-muted-foreground/30"
+			>
+				{cell.key}
+			</span>
+		{/each}
+	</div>
+
+	<!-- Gradient fade to white -->
+	<div
+		class="pointer-events-none absolute inset-0"
+		style="background: linear-gradient(to bottom, transparent 0%, transparent 40%, var(--background) 100%);"
+	></div>
+
+	<!-- Header content -->
+	<div class="absolute bottom-16 z-10 space-y-4 px-4 text-center">
+		<h1 class="text-4xl font-bold tracking-tight">Svelte Incant</h1>
+		<p class="text-lg text-muted-foreground">
+			A keyboard shortcut management library for Svelte.
+			<br />
+			Press <Kbd.Root>?</Kbd.Root> to see it in action. Or hold <Kbd.Root>Alt</Kbd.Root> to see the shortcut
+			hints.
+		</p>
+		<div class="flex items-center justify-center gap-3 pt-4">
+			<Button
+				variant="outline"
+				href="https://github.com/mastermakrela/svelte-incant"
+				target="_blank"
+				{@attach shortcut({
+					keys: 'G',
+					description: 'Open GitHub'
+				})}
+			>
+				<GithubIcon class="mr-2 h-4 w-4" />
+				GitHub
+			</Button>
+		</div>
+	</div>
+</header>

package/dist/components/header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/kbds.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import * as Kbd from './ui/kbd/index.js';
+	import { keyToSymbol } from '../utils.js';
+
+	let {
+		keys,
+		separator = 'or'
+	}: {
+		keys: string | string[] | string[][];
+		separator?: string;
+	} = $props();
+
+	type KeyCombination = string[];
+
+	let keyGroups: KeyCombination[] = $derived(
+		typeof keys === 'string'
+			? [[keys]]
+			: Array.isArray(keys) && keys.length > 0 && typeof keys[0] === 'string'
+				? [keys as string[]]
+				: (keys as KeyCombination[])
+	);
+</script>
+
+<Kbd.Group class="text-xs">
+	{#each keyGroups as group, index (index)}
+		{#if index > 0}
+			<span class="mx-1 text-muted-foreground">{separator}</span>
+		{/if}
+		<Kbd.Root>{group.map(keyToSymbol).join(' ')}</Kbd.Root>
+	{/each}
+</Kbd.Group>

package/dist/components/kbds.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    keys: string | string[] | string[][];
+    separator?: string;
+};
+declare const Kbds: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbds = ReturnType<typeof Kbds>;
+export default Kbds;

package/dist/components/ui/badge/badge.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	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',
+		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',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'span'}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

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

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, 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", {
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        destructive: string;
+        outline: string;
+    };
+}, 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", unknown, unknown, undefined>>;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    variant?: BadgeVariant;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants, type BadgeVariant } from './badge.svelte';

package/dist/components/ui/badge/index.js

@@ -0,0 +1,2 @@
+export { default as Badge } from './badge.svelte';
+export { badgeVariants } from './badge.svelte';

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+				destructive:
+					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
+				outline:
+					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				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'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -0,0 +1,64 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, 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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        'icon-sm': string;
+        'icon-lg': string;
+    };
+}, 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 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants };

package/dist/components/ui/card/card-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

package/dist/components/ui/card/card-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardContent = ReturnType<typeof CardContent>;
+export default CardContent;

package/dist/components/ui/card/card-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dist/components/ui/card/card-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
+type CardDescription = ReturnType<typeof CardDescription>;
+export default CardDescription;

package/dist/components/ui/card/card-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const CardHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/ui/card/card-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn('leading-none font-semibold', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const CardTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/ui/card/card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Card = ReturnType<typeof Card>;
+export default Card;

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

@@ -0,0 +1,8 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+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 };