@engineio/ui 0.4.0

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

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

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

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

package/dist/components/ui/progress/progress.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		max = 100,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+	bind:ref
+	class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+	{value}
+	{max}
+	{...restProps}
+>
+	<div
+		class="bg-primary h-full w-full flex-1 transition-all"
+		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+	></div>
+</ProgressPrimitive.Root>

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

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

package/dist/components/ui/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+export { Root, Item, Root as RadioGroup, Item as RadioGroupItem, };

package/dist/components/ui/radio-group/index.js

@@ -0,0 +1,5 @@
+import Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+export { Root, Item, 
+//
+Root as RadioGroup, Item as RadioGroupItem, };

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import Circle from "@lucide/svelte/icons/circle";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	class={cn(
+		"aspect-square size-4 rounded-full border-[1.5px] border-grey-500 text-primary transition-colors duration-140 ease-brand data-[state=checked]:border-primary focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-38",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div class="flex items-center justify-center">
+			{#if checked}
+				<Circle class="size-2.5 fill-current text-current" />
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>

package/dist/components/ui/radio-group/radio-group-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const RadioGroupItem: import("svelte").Component<Omit<Omit<RadioGroupPrimitive.ItemProps, "child">, "children">, {}, "ref">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

package/dist/components/ui/radio-group/radio-group.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root bind:ref bind:value class={cn("grid gap-2", className)} {...restProps} />

package/dist/components/ui/radio-group/radio-group.svelte.d.ts

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

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

@@ -0,0 +1,11 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };

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

@@ -0,0 +1,13 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
+//
+Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-card-inner border border-grey-700 shadow-panel data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>

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

@@ -0,0 +1,7 @@
+import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+};
+declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/dist/components/ui/select/select-group-heading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupHeadingProps = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...restProps}
+/>

package/dist/components/ui/select/select-group-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectGroupHeading: import("svelte").Component<SelectPrimitive.GroupHeadingProps, {}, "ref">;
+type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
+export default SelectGroupHeading;

package/dist/components/ui/select/select-item.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import Check from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<Check class="size-4" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>

package/dist/components/ui/select/select-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectItem: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type SelectItem = ReturnType<typeof SelectItem>;
+export default SelectItem;

package/dist/components/ui/select/select-scroll-down-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronDown class="size-4" />
+</SelectPrimitive.ScrollDownButton>

package/dist/components/ui/select/select-scroll-down-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollDownButton = ReturnType<typeof SelectScrollDownButton>;
+export default SelectScrollDownButton;

package/dist/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ChevronUp from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	{...restProps}
+>
+	<ChevronUp class="size-4" />
+</SelectPrimitive.ScrollUpButton>

package/dist/components/ui/select/select-scroll-up-button.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type SelectScrollUpButton = ReturnType<typeof SelectScrollUpButton>;
+export default SelectScrollUpButton;

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "../separator/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />

package/dist/components/ui/select/select-separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Separator as SeparatorPrimitive } from "bits-ui";
+declare const SelectSeparator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type SelectSeparator = ReturnType<typeof SelectSeparator>;
+export default SelectSeparator;

package/dist/components/ui/select/select-trigger.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	class={cn(
+		"field flex h-10 w-full cursor-pointer items-center justify-between px-3 py-2 text-[15px] data-[placeholder]:text-grey-400 [&>span]:line-clamp-1",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from "bits-ui";
+declare const SelectTrigger: import("svelte").Component<Omit<SelectPrimitive.TriggerProps, "child">, {}, "ref">;
+type SelectTrigger = ReturnType<typeof SelectTrigger>;
+export default SelectTrigger;

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

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

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

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from "../../../utils.js"
+  import { Separator as SeparatorPrimitive } from "bits-ui"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = "horizontal",
+    ...restProps
+  }: SeparatorPrimitive.RootProps = $props()
+</script>
+
+<SeparatorPrimitive.Root
+  bind:ref
+  class={cn(
+    "bg-grey-700 shrink-0",
+    orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
+    className,
+  )}
+  {orientation}
+  {...restProps}
+/>

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

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

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,17 @@
+<script lang="ts">
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-muted animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

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

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+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/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,27 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	class={cn(
+		"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-control border-2 border-transparent transition-colors duration-140 ease-brand data-[state=checked]:bg-primary data-[state=unchecked]:bg-grey-700 focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-38",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		class={cn(
+			"pointer-events-none block size-5 rounded-full bg-white ring-0 transition-transform duration-140 ease-brand data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+		)}
+	/>
+</SwitchPrimitive.Root>

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

@@ -0,0 +1,9 @@
+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";
+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 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";
+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,22 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // Suppresses the last row's hairline, so a table with no footer ends on its
+  // final row rather than on a rule with nothing under it.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
+</script>
+
+<tbody
+  bind:this={ref}
+  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 { 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/components/ui/table/table-caption.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // Sits outside the frame, below it — caption at 13px on the grey ramp.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
+</script>
+
+<caption
+  bind:this={ref}
+  class={cn("mt-4 text-[13px] leading-[1.2] text-grey-300", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</caption>

package/dist/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/components/ui/table/table-cell.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLTdAttributes } from "svelte/elements"
+
+  // Transparent, 44px tall, 16px sides. The row owns the background, so a cell
+  // is only text and padding.
+  //
+  // Set numerics, IDs and keys in `font-mono` at the call site; the brand
+  // reserves the monospace face for them. Right-align numeric columns on both
+  // the cell and its heading so figures line up on their digits.
+  //
+  // No fill means no fill collisions — the whole class of problem the gapped
+  // tile treatment kept running into, where a Badge or a Separator or an
+  // unchecked Switch would disappear into the cell it sat on.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLTdAttributes> = $props()
+</script>
+
+<td
+  bind:this={ref}
+  class={cn(
+    "h-11 px-4 align-middle text-[13px] [&: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 { 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/components/ui/table/table-footer.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // Totals: no fill, a stronger rule above to close the grid, and Bold to
+  // separate the summary from the rows it sums. The row's own bottom hairline
+  // is suppressed so the table ends on the top rule rather than trailing a
+  // second line under it. Hover is off — a totals row is not interactive.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
+</script>
+
+<tfoot
+  bind:this={ref}
+  class={cn(
+    "font-bold",
+    "[&>tr]:border-t [&>tr]:border-grey-600 [&>tr]:border-b-0",
+    "[&>tr]:hover:bg-transparent",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</tfoot>