@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/sidebar/sidebar-provider.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">import { IsMobile } from "../../../hooks/is-mobile.svelte.js";
+import { cn } from "../../../utils.js";
+import { onDestroy, setContext } from "svelte";
+import { BROWSER } from "esm-env";
+import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./constants.js";
+import { registerClientSidebar, SIDEBAR_CONTEXT_KEY, SidebarState } from "./context.svelte.js";
+let { ref = $bindable(null), open = $bindable(true), onOpenChange = () => {}, class: className, style, children, ...restProps } = $props();
+const sidebar = new SidebarState({
+	open: () => open,
+	setOpen: (value) => {
+		open = value;
+		onOpenChange(value);
+		if (BROWSER) {
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		}
+	}
+});
+setContext(SIDEBAR_CONTEXT_KEY, sidebar);
+if (BROWSER) {
+	sidebar.setMobileState(new IsMobile());
+	onDestroy(registerClientSidebar(sidebar));
+}
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<div
+	data-slot="sidebar-wrapper"
+	style={`--sidebar-width: ${SIDEBAR_WIDTH}; --sidebar-width-icon: ${SIDEBAR_WIDTH_ICON}; ${style ?? ''}`}
+	class={cn(
+		'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+		className
+	)}
+	bind:this={ref}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-provider.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const SidebarProvider: import("svelte").Component<$$ComponentProps, {}, "open" | "ref">;
+type SidebarProvider = ReturnType<typeof SidebarProvider>;
+export default SidebarProvider;

package/dist/lib/components/ui/sidebar/sidebar-rail.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { requireSidebar } from "./context.svelte.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+const sidebar = requireSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-[calc(1/2*100%-1px)] after:w-[2px] hover:after:bg-sidebar-border sm:flex',
+		'cursor-pointer',
+		'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-end-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-start-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

package/dist/lib/components/ui/sidebar/sidebar-rail.svelte.d.ts

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

package/dist/lib/components/ui/sidebar/sidebar-separator.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { Separator } from "../separator/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn('bg-sidebar-border', className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/sidebar/sidebar-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const SidebarSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
+export default SidebarSeparator;

package/dist/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">import { buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils.js";
+import { Icon } from "../../icon";
+import { requireSidebar } from "./context.svelte.js";
+let { ref = $bindable(null), class: className, onclick, style, ...restProps } = $props();
+const sidebar = requireSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), className)}
+	style={`min-height: 2rem;${style ?? ''}`}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<Icon icon="lucide:panel-left" />
+	<span class="sr-only">Toggle Sidebar</span>
+</button>

package/dist/lib/components/ui/sidebar/sidebar-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from '../button/index.js';
+type $$ComponentProps = ButtonProps & {
+    onclick?: (e: MouseEvent) => void;
+};
+declare const SidebarTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
+export default SidebarTrigger;

package/dist/lib/components/ui/sidebar/sidebar.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">import * as Sheet from "../sheet/index.js";
+import { cn } from "../../../utils.js";
+import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+import { requireSidebar } from "./context.svelte.js";
+let { ref = $bindable(null), side = "left", variant = "sidebar", collapsible = "offcanvas", class: className, children, ...restProps } = $props();
+const sidebar = requireSidebar();
+</script>
+
+{#if collapsible === 'none'}
+	<div
+		class={cn(
+			'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar?.isMobile}
+	<Sheet.Root
+		bind:open={() => sidebar?.openMobile ?? false, (v) => sidebar?.setOpenMobile?.(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="group peer hidden text-sidebar-foreground md:block"
+		data-state={sidebar?.state ?? 'expanded'}
+		data-collapsible={(sidebar?.state ?? 'expanded') === 'collapsed' ? collapsible : ''}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+				'group-data-[collapsible=offcanvas]:w-0',
+				'group-data-[side=right]:rotate-180',
+				variant === 'floating' || variant === 'inset'
+					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+				side === 'left'
+					? 'start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'
+					: 'end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',
+				// Adjust the padding for floating and inset variants.
+				variant === 'floating' || variant === 'inset'
+					? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s',
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}

package/dist/lib/components/ui/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/lib/components/ui/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './skeleton.svelte';
+export { Root, Root as Skeleton };

package/dist/lib/components/ui/skeleton/index.js

@@ -0,0 +1,4 @@
+import Root from './skeleton.svelte';
+export { Root, 
+//
+Root as Skeleton };

package/dist/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('animate-pulse rounded-md bg-accent', className)}
+	{...restProps}
+></div>

package/dist/lib/components/ui/skeleton/skeleton.svelte.d.ts

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

package/dist/lib/components/ui/slider/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './slider.svelte';
+export { Root, Root as Slider };

package/dist/lib/components/ui/slider/index.js

@@ -0,0 +1,4 @@
+import Root from './slider.svelte';
+export { Root, 
+//
+Root as Slider };

package/dist/lib/components/ui/slider/slider.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">import { Slider as SliderPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), value = $bindable(), type = "single", onValueChange, onValueCommit, orientation = "horizontal", class: className, ...restProps } = $props();
+</script>
+
+{#if type === 'multiple'}
+	<SliderPrimitive.Root
+		bind:ref
+		type="multiple"
+		bind:value={value as SliderMultipleProps['value']}
+		onValueChange={onValueChange as SliderMultipleProps['onValueChange']}
+		onValueCommit={onValueCommit as SliderMultipleProps['onValueCommit']}
+		data-slot="slider"
+		{orientation}
+		class={cn(
+			'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+			className
+		)}
+		{...restProps}
+	>
+		{#snippet children({ thumbs })}
+			<span
+				data-orientation={orientation}
+				data-slot="slider-track"
+				class={cn(
+					'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					class={cn(
+						'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+					)}
+				/>
+			</span>
+			{#each thumbs as thumb (thumb)}
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					index={thumb}
+					class="block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				/>
+			{/each}
+		{/snippet}
+	</SliderPrimitive.Root>
+{:else}
+	<SliderPrimitive.Root
+		bind:ref
+		type="single"
+		bind:value={value as SliderSingleProps['value']}
+		onValueChange={onValueChange as SliderSingleProps['onValueChange']}
+		onValueCommit={onValueCommit as SliderSingleProps['onValueCommit']}
+		data-slot="slider"
+		{orientation}
+		class={cn(
+			'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+			className
+		)}
+		{...restProps}
+	>
+		{#snippet children({ thumbs })}
+			<span
+				data-orientation={orientation}
+				data-slot="slider-track"
+				class={cn(
+					'relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					class={cn(
+						'absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+					)}
+				/>
+			</span>
+			{#each thumbs as thumb (thumb)}
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					index={thumb}
+					class="block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				/>
+			{/each}
+		{/snippet}
+	</SliderPrimitive.Root>
+{/if}

package/dist/lib/components/ui/slider/slider.svelte.d.ts

@@ -0,0 +1,16 @@
+import { Slider as SliderPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+type SliderSingleProps = Omit<WithoutChildrenOrChild<Extract<SliderPrimitive.RootProps, {
+    type: 'single';
+}>>, 'type'> & {
+    type?: 'single';
+};
+type SliderMultipleProps = Omit<WithoutChildrenOrChild<Extract<SliderPrimitive.RootProps, {
+    type: 'multiple';
+}>>, 'type'> & {
+    type?: 'multiple';
+};
+type SliderProps = SliderSingleProps | SliderMultipleProps;
+declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/lib/components/ui/sonner/index.d.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';

package/dist/lib/components/ui/sonner/index.js

@@ -0,0 +1 @@
+export { default as Toaster } from './sonner.svelte';

package/dist/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">import { Toaster as Sonner } from "svelte-sonner";
+let { ...restProps } = $props();
+</script>
+
+<Sonner
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

package/dist/lib/components/ui/sonner/sonner.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+declare const Sonner: import("svelte").Component<SonnerProps, {}, "">;
+type Sonner = ReturnType<typeof Sonner>;
+export default Sonner;

package/dist/lib/components/ui/spinner/index.d.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/dist/lib/components/ui/spinner/index.js

@@ -0,0 +1 @@
+export { default as Spinner } from './spinner.svelte';

package/dist/lib/components/ui/spinner/spinner.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { Icon } from "../../icon";
+let { class: className, ...restProps } = $props();
+</script>
+
+<Icon
+	icon="lucide:loader-circle"
+	role="status"
+	aria-label="Loading"
+	class={cn('size-4 animate-spin', className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/spinner/spinner.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SVGAttributes } from 'svelte/elements';
+type SpinnerProps = Omit<SVGAttributes<SVGSVGElement>, 'class' | 'aria-label'> & {
+    class?: string;
+    /** Replaces the default "Loading" name. */
+    'aria-label'?: string;
+    /** Size in pixels (sets both width and height). */
+    size?: number | string;
+    title?: string;
+};
+declare const Spinner: import("svelte").Component<SpinnerProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/lib/components/ui/switch/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch };

package/dist/lib/components/ui/switch/index.js

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { Root, 
+//
+Root as Switch };

package/dist/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { Switch as SwitchPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, checked = $bindable(false), ...restProps } = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		"peer relative inline-flex h-5 w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-[background-color,border-color,box-shadow] duration-150 outline-none after:absolute after:inset-x-0 after:-inset-y-3 after:content-[''] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input motion-reduce:transition-none dark:data-[state=unchecked]:bg-input/80",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform duration-150 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0 motion-reduce:transition-none dark:data-[state=unchecked]:bg-foreground'
+		)}
+	/>
+</SwitchPrimitive.Root>

package/dist/lib/components/ui/switch/switch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/lib/components/ui/table/index.d.ts

@@ -0,0 +1,19 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+declare const Table: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLTableAttributes>, {}, "ref"> & {
+    Root: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLTableAttributes>, {}, "ref">;
+    Body: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+    Caption: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLElement>>, {}, "ref">;
+    Cell: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLTdAttributes>, {}, "ref">;
+    Footer: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+    Head: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLThAttributes>, {}, "ref">;
+    Header: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+    Row: import("svelte").Component<import("../../..").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLTableRowElement>>, {}, "ref">;
+};
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow };

package/dist/lib/components/ui/table/index.js

@@ -0,0 +1,14 @@
+import Root from './table.svelte';
+import Body from './table-body.svelte';
+import Caption from './table-caption.svelte';
+import Cell from './table-cell.svelte';
+import Footer from './table-footer.svelte';
+import Head from './table-head.svelte';
+import Header from './table-header.svelte';
+import Row from './table-row.svelte';
+// Dual export: <Table> renders Root, <Table.Body> accesses the namespace.
+// Matches the shadcn-svelte canonical pattern and Kit's existing flat usage.
+const Table = Object.assign(Root, { Root, Body, Caption, Cell, Footer, Head, Header, Row });
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Table, 
+//
+Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow };

package/dist/lib/components/ui/table/table-body.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn('[&_tr:last-child]:border-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>

package/dist/lib/components/ui/table/table-body.svelte.d.ts

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

package/dist/lib/components/ui/table/table-caption.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn('mt-4 text-sm text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

package/dist/lib/components/ui/table/table-caption.svelte.d.ts

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

package/dist/lib/components/ui/table/table-cell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<td
+	bind:this={ref}
+	data-slot="table-cell"
+	class={cn(
+		'bg-clip-padding p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>

package/dist/lib/components/ui/table/table-cell.svelte.d.ts

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

package/dist/lib/components/ui/table/table-footer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>

package/dist/lib/components/ui/table/table-footer.svelte.d.ts

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

package/dist/lib/components/ui/table/table-head.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<th
+	bind:this={ref}
+	data-slot="table-head"
+	class={cn(
+		'h-10 bg-clip-padding px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>

package/dist/lib/components/ui/table/table-head.svelte.d.ts

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