@orochibraru/ui 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<
+		HTMLAttributes<HTMLButtonElement>,
+		HTMLButtonElement
+	> = $props();
+
+	const sidebar = useSidebar();
+</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(
+		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:inset-s-1/2 after:w-0.5 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+		"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+		"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+		"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+		"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

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

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

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

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

package/dist/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/components/ui/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import PanelLeftIcon from "@lucide/svelte/icons/panel-left";
+	import type { ComponentProps } from "svelte";
+
+	import { Button } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	bind:ref
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon-sm"
+	class={cn(className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon class="cn-rtl-flip" />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>

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

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

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

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import * as Sheet from "../sheet/index.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	import { SIDEBAR_WIDTH_MOBILE } from "./constants.js";
+	import { useSidebar } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		side = "left",
+		variant = "sidebar",
+		collapsible = "offcanvas",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	} = $props();
+
+	const sidebar = useSidebar();
+</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, (v) => sidebar.setOpenMobile(v)}
+		{...restProps}
+	>
+		<Sheet.Content
+			bind:ref
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class={cn(
+				"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+				className,
+			)}
+			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}
+		data-collapsible={sidebar.state === "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(
+				"transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent",
+				"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)))]"
+					: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			data-side={side}
+			class={cn(
+				"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:inset-s-0 data-[side=left]:group-data-[collapsible=offcanvas]:-inset-s-(--sidebar-width) data-[side=right]:inset-e-0 data-[side=right]:group-data-[collapsible=offcanvas]:-inset-e-(--sidebar-width) md:flex",
+				// 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="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+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/components/ui/skeleton/index.d.ts

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

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-muted rounded-md animate-pulse", className)}
+	{...restProps}
+></div>

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Slider as SliderPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		orientation = "horizontal",
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<SliderPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="slider"
+	{orientation}
+	class={cn(
+		"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+		className,
+	)}
+	{...restProps}
+>
+	{#snippet children({ thumbItems })}
+		<span
+			data-slot="slider-track"
+			data-orientation={orientation}
+			class={cn(
+				"bg-muted rounded-full data-horizontal:h-1.5 data-vertical:w-1.5 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full",
+			)}
+		>
+			<SliderPrimitive.Range
+				data-slot="slider-range"
+				class={cn(
+					"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full",
+				)}
+			/>
+		</span>
+		{#each thumbItems as thumb (thumb.index)}
+			<SliderPrimitive.Thumb
+				data-slot="slider-thumb"
+				index={thumb.index}
+				class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+			/>
+		{/each}
+	{/snippet}
+</SliderPrimitive.Root>

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

@@ -0,0 +1,5 @@
+import { Slider as SliderPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

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

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

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

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
+	import InfoIcon from "@lucide/svelte/icons/info";
+	import Loader2Icon from "@lucide/svelte/icons/loader-2";
+	import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
+	import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+	import { mode } from "mode-watcher";
+	import {
+		Toaster as Sonner,
+		type ToasterProps as SonnerProps,
+	} from "svelte-sonner";
+	import { MediaQuery } from "svelte/reactivity";
+
+	let { ...restProps }: SonnerProps = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	position={desktop.current ? "top-right" : "top-center"}
+	closeButton
+	closeButtonAriaLabel="Dismiss"
+	swipeDirections={desktop.current ? ["right"] : ["top", "left", "right"]}
+	offset={{
+		top: desktop.current
+			? "4.75rem"
+			: "calc(env(safe-area-inset-top) + 4.25rem)",
+		right: "1.5rem",
+	}}
+	mobileOffset={{
+		top: "calc(env(safe-area-inset-top) + 4.25rem)",
+		left: "0.75rem",
+		right: "0.75rem",
+	}}
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border); --border-radius: var(--radius-xl);"
+	toastOptions={{
+		classes: {
+			toast: "cn-toast",
+			description: "cn-toast-description",
+			closeButton: "cn-toast-close",
+			success: "cn-toast-success",
+			error: "cn-toast-error",
+			warning: "cn-toast-warning",
+			info: "cn-toast-info",
+		},
+	}}
+	{...restProps}
+>
+	{#snippet loadingIcon()}
+		<Loader2Icon class="text-muted-foreground size-5 animate-spin md:size-4" />
+	{/snippet}
+	{#snippet successIcon()}
+		<CircleCheckIcon class="text-positive size-5 md:size-4" />
+	{/snippet}
+	{#snippet errorIcon()}
+		<OctagonXIcon class="text-destructive size-5 md:size-4" />
+	{/snippet}
+	{#snippet infoIcon()}
+		<InfoIcon class="text-primary size-5 md:size-4" />
+	{/snippet}
+	{#snippet warningIcon()}
+		<TriangleAlertIcon class="size-5 text-amber-500 md:size-4" />
+	{/snippet}
+</Sonner>

package/dist/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/components/ui/spinner/index.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Loader2Icon from "@lucide/svelte/icons/loader-2";
+	import type { SVGAttributes } from "svelte/elements";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		role = "status",
+		// we add name, color, and stroke for compatibility with different icon libraries props.
+		// only forward them when set, otherwise `stroke: undefined` overrides the icon's `currentColor`
+		name,
+		color,
+		stroke,
+		className: legacyClassName,
+		"aria-label": ariaLabel = "Loading",
+		...restProps
+	}: SVGAttributes<SVGSVGElement> = $props();
+</script>
+
+<Loader2Icon
+	{role}
+	{...name != null ? { name } : {}}
+	{...color != null ? { color } : {}}
+	{...stroke != null ? { stroke } : {}}
+	{...legacyClassName != null ? { className: legacyClassName } : {}}
+	aria-label={ariaLabel}
+	class={cn("size-4 animate-spin", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from "svelte/elements";
+declare const Spinner: import("svelte").Component<SVGAttributes<SVGSVGElement>, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

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

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-checked:bg-primary data-unchecked:bg-muted-foreground/35 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 group-has-focus-visible/field-label:ring-0 group-has-focus-visible/field-label:border-transparent data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-3.5 data-[size=sm]:w-6 peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className,
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full shadow-sm group-data-[size=default]/switch:size-5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=default]/switch:data-unchecked:translate-x-0.5 group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform",
+			"rtl:data-[state=checked]:translate-x-[calc(-100%)]",
+		)}
+	/>
+</SwitchPrimitive.Root>

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

@@ -0,0 +1,8 @@
+import { Switch as SwitchPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+    size?: "sm" | "default";
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -0,0 +1,9 @@
+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";
+import Root from "./table.svelte";
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

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

@@ -0,0 +1,11 @@
+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";
+import Root from "./table.svelte";
+export { Root, Body, Caption, Cell, Footer, Head, Header, Row, 
+//
+Root as Table, Body as TableBody, Caption as TableCaption, Cell as TableCell, Footer as TableFooter, Head as TableHead, Header as TableHeader, Row as TableRow, };

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

@@ -0,0 +1,21 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody
+	bind:this={ref}
+	data-slot="table-body"
+	class={cn("[&_tr:last-child]:border-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tbody>

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

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

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

@@ -0,0 +1,21 @@
+<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<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

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

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

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

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

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

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