@poodle64/ui 2026.8.7

package/dist/components/ui/data-table-tanstack/data-table-tanstack.svelte

@@ -0,0 +1,247 @@
+<script lang="ts" module>
+	// Re-exported so a page importing the table also gets the column-def type from
+	// one place, and never needs its own @tanstack/table-core dependency.
+	export type { ColumnDef } from '@tanstack/table-core';
+
+	// Module augmentation is TanStack's own extension point for `columnDef.meta`
+	// (it ships as an empty interface for exactly this). Declaring it here means
+	// every consumer importing `ColumnDef` from this package gets autocomplete
+	// and a type error on a typo, with no cast anywhere in this component.
+	declare module '@tanstack/table-core' {
+		interface ColumnMeta<TData, TValue> {
+			/** Applied to both the header (`<th>`) and body (`<td>`) cell. */
+			class?: string;
+			/** Applied to the header cell only, additive on top of `class`. */
+			headClass?: string;
+			/** Applied to the body cell only, additive on top of `class`. */
+			cellClass?: string;
+		}
+	}
+</script>
+
+<script lang="ts" generics="TData">
+	/**
+	 * DataTableTanstack — shared TanStack-backed data table.
+	 *
+	 * Renders via the shadcn-svelte table primitives (Table, TableHeader, …) plus
+	 * FlexRender. Supports:
+	 *   - column defs with renderComponent / renderSnippet cell overrides
+	 *   - global search (globalFilter state)
+	 *   - per-column faceted filters (setFilterValue on a column)
+	 *   - row selection for master-detail (onclick → selectedId, data-state=selected)
+	 *   - custom row left-border style via getRowStyle
+	 *   - responsive column hiding via column meta.class (both cells), or meta.headClass /
+	 *     meta.cellClass for a class that must differ between the `<th>` and the `<td>`
+	 *     (e.g. a truncating column needs `max-w-0` on the cell only — on the header it
+	 *     collapses the heading text). All three are additive; the cell-specific slot
+	 *     wins over `class` on a conflicting Tailwind utility.
+	 *   - opt-in bulk row selection via `selectable` prop (leading checkbox column)
+	 *
+	 * The page owns the Table instance (createSvelteTable from
+	 * `@poodle64/ui/data-table`); this component owns how it looks and how a row
+	 * is picked.
+	 */
+
+	import type { Table } from '@tanstack/table-core';
+	import {
+		Table as TableRoot,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '../table/index.js';
+	import { FlexRender } from '../data-table/index.js';
+	import EmptyState from '../empty-state/empty-state.svelte';
+	import { Checkbox } from '../checkbox/index.js';
+	import type { Component } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { cn } from '../../../utils.js';
+
+	interface Props<TRow> {
+		table: Table<TRow>;
+		selectedId?: string | null;
+		onSelect?: (id: string) => void;
+		getRowId: (row: TRow) => string;
+		getRowStyle?: (row: TRow) => string;
+		selectedShadow?: string;
+		emptyIcon?: Component<{ class?: string }>;
+		emptyMessage?: string;
+		emptyDescription?: string;
+		/** Opt-in: render a leading checkbox column for multi-row selection. */
+		selectable?: boolean;
+		/** Called whenever the bulk selection changes. Receives the selected row ids. */
+		onSelectionChange?: (ids: string[]) => void;
+	}
+
+	let {
+		table,
+		selectedId = null,
+		onSelect,
+		getRowId,
+		getRowStyle,
+		selectedShadow = 'box-shadow: inset 2px 0 0 0 var(--primary)',
+		emptyIcon,
+		emptyMessage = 'Nothing here',
+		emptyDescription,
+		selectable = false,
+		onSelectionChange
+	}: Props<TData> = $props();
+
+	const rows = $derived(table.getRowModel().rows);
+	const headerGroups = $derived(table.getHeaderGroups());
+
+	// ── Bulk selection state ──────────────────────────────────────────────────────
+
+	// SvelteSet tracks mutations reactively without $state wrapping.
+	// All mutations use .add()/.delete()/.clear() to preserve reactivity.
+	const selectedSet = new SvelteSet<string>();
+
+	const allVisibleIds = $derived(rows.map((r) => getRowId(r.original)));
+	const allSelected = $derived(
+		allVisibleIds.length > 0 && allVisibleIds.every((id) => selectedSet.has(id))
+	);
+	const someSelected = $derived(allVisibleIds.some((id) => selectedSet.has(id)) && !allSelected);
+
+	function toggleAll(): void {
+		// Read the derived BEFORE mutating the set it depends on: `allSelected`
+		// recomputes on read, so clearing first makes it unconditionally false and
+		// the branch below re-selects everything — a select-all that can never
+		// deselect.
+		const wasAllSelected = allSelected;
+		selectedSet.clear();
+		if (!wasAllSelected) {
+			for (const id of allVisibleIds) selectedSet.add(id);
+		}
+		onSelectionChange?.([...selectedSet]);
+	}
+
+	function setRowSelected(id: string, selected: boolean): void {
+		if (selected) selectedSet.add(id);
+		else selectedSet.delete(id);
+		onSelectionChange?.([...selectedSet]);
+	}
+
+	// Expose selected ids to parent (reactive accessor).
+	export function getSelectedIds(): string[] {
+		return [...selectedSet];
+	}
+
+	// Clear selection when visible rows change (e.g. after a filter or reload).
+	$effect(() => {
+		// Re-derive when allVisibleIds changes.
+		void allVisibleIds;
+		const toRemove = [...selectedSet].filter((id) => !allVisibleIds.includes(id));
+		if (toRemove.length > 0) {
+			for (const id of toRemove) selectedSet.delete(id);
+			onSelectionChange?.([...selectedSet]);
+		}
+	});
+</script>
+
+<div
+	class="bg-card border-border ds-edge flex max-h-full min-h-0 flex-col overflow-hidden rounded-lg border"
+>
+	{#if rows.length === 0}
+		<EmptyState
+			icon={emptyIcon}
+			title={emptyMessage}
+			description={emptyDescription}
+			class="flex-1 rounded-none border-0"
+		/>
+	{:else}
+		<div class="min-h-0 flex-1 overflow-auto">
+			<TableRoot class="w-full">
+				<TableHeader class="bg-card sticky top-0 z-10">
+					{#each headerGroups as headerGroup (headerGroup.id)}
+						<TableRow class="border-0 hover:bg-transparent">
+							{#if selectable}
+								<TableHead class="border-border w-10 border-b px-3 py-1.5">
+									<Checkbox
+										checked={allSelected}
+										indeterminate={someSelected}
+										onCheckedChange={toggleAll}
+										aria-label="Select all rows"
+									/>
+								</TableHead>
+							{/if}
+							{#each headerGroup.headers as header (header.id)}
+								{@const meta = header.column.columnDef.meta}
+								<TableHead
+									class={cn(
+										'text-muted-foreground border-border text-2xs tracking-eyebrow border-b px-3 py-1.5 text-left font-medium whitespace-nowrap uppercase',
+										meta?.class,
+										meta?.headClass
+									)}
+								>
+									{#if !header.isPlaceholder}
+										<FlexRender
+											content={header.column.columnDef.header}
+											context={header.getContext()}
+										/>
+									{/if}
+								</TableHead>
+							{/each}
+						</TableRow>
+					{/each}
+				</TableHeader>
+
+				<TableBody>
+					{#each rows as row (row.id)}
+						{@const originalRow = row.original}
+						{@const rowId = getRowId(originalRow)}
+						{@const isSelected = rowId === selectedId}
+						{@const isChecked = selectedSet.has(rowId)}
+						{@const extraStyle = getRowStyle ? getRowStyle(originalRow) : ''}
+						<TableRow
+							data-state={isSelected ? 'selected' : undefined}
+							class="border-border/60 border-b last:border-0 {onSelect
+								? 'cursor-pointer hover:bg-[color-mix(in_oklch,var(--foreground)_4%,transparent)]'
+								: ''} {isSelected ? 'bg-[color-mix(in_oklch,var(--primary)_10%,transparent)]' : ''}"
+							style="{extraStyle}{isSelected ? ' ' + selectedShadow : ''}"
+							onclick={onSelect ? () => onSelect(rowId) : undefined}
+							onkeydown={onSelect
+								? (e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
+											e.preventDefault();
+											onSelect(rowId);
+										}
+									}
+								: undefined}
+							tabindex={onSelect ? 0 : undefined}
+						>
+							{#if selectable}
+								<TableCell class="w-10 px-3 py-1.5">
+									<!-- The wrapper ONLY stops the event reaching the row, so ticking a
+									     checkbox never also opens the master-detail. The checkbox's own
+									     onCheckedChange is the single source of the selection change —
+									     handling the click here as well would toggle twice per click and
+									     net out to no selection at all. -->
+									<div
+										role="presentation"
+										onclick={(e) => e.stopPropagation()}
+										onkeydown={(e) => e.stopPropagation()}
+									>
+										<Checkbox
+											checked={isChecked}
+											onCheckedChange={(v) => setRowSelected(rowId, v)}
+											aria-label="Select row"
+										/>
+									</div>
+								</TableCell>
+							{/if}
+							{#each row.getVisibleCells() as cell (cell.id)}
+								{@const meta = cell.column.columnDef.meta}
+								<TableCell
+									class={cn('px-3 py-1.5 text-sm whitespace-nowrap', meta?.class, meta?.cellClass)}
+								>
+									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+								</TableCell>
+							{/each}
+						</TableRow>
+					{/each}
+				</TableBody>
+			</TableRoot>
+		</div>
+	{/if}
+</div>

package/dist/components/ui/data-table-tanstack/data-table-tanstack.svelte.d.ts

@@ -0,0 +1,79 @@
+export type { ColumnDef } from '@tanstack/table-core';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData, TValue> {
+        /** Applied to both the header (`<th>`) and body (`<td>`) cell. */
+        class?: string;
+        /** Applied to the header cell only, additive on top of `class`. */
+        headClass?: string;
+        /** Applied to the body cell only, additive on top of `class`. */
+        cellClass?: string;
+    }
+}
+/**
+     * DataTableTanstack — shared TanStack-backed data table.
+     *
+     * Renders via the shadcn-svelte table primitives (Table, TableHeader, …) plus
+     * FlexRender. Supports:
+     *   - column defs with renderComponent / renderSnippet cell overrides
+     *   - global search (globalFilter state)
+     *   - per-column faceted filters (setFilterValue on a column)
+     *   - row selection for master-detail (onclick → selectedId, data-state=selected)
+     *   - custom row left-border style via getRowStyle
+     *   - responsive column hiding via column meta.class (both cells), or meta.headClass /
+     *     meta.cellClass for a class that must differ between the `<th>` and the `<td>`
+     *     (e.g. a truncating column needs `max-w-0` on the cell only — on the header it
+     *     collapses the heading text). All three are additive; the cell-specific slot
+     *     wins over `class` on a conflicting Tailwind utility.
+     *   - opt-in bulk row selection via `selectable` prop (leading checkbox column)
+     *
+     * The page owns the Table instance (createSvelteTable from
+     * `@poodle64/ui/data-table`); this component owns how it looks and how a row
+     * is picked.
+     */
+import type { Table } from '@tanstack/table-core';
+import type { Component } from 'svelte';
+interface Props<TRow> {
+    table: Table<TRow>;
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    getRowId: (row: TRow) => string;
+    getRowStyle?: (row: TRow) => string;
+    selectedShadow?: string;
+    emptyIcon?: Component<{
+        class?: string;
+    }>;
+    emptyMessage?: string;
+    emptyDescription?: string;
+    /** Opt-in: render a leading checkbox column for multi-row selection. */
+    selectable?: boolean;
+    /** Called whenever the bulk selection changes. Receives the selected row ids. */
+    onSelectionChange?: (ids: string[]) => void;
+}
+declare function $$render<TData>(): {
+    props: Props<TData>;
+    exports: {
+        getSelectedIds: () => string[];
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {
+        getSelectedIds: () => string[];
+    };
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableTanstack: $$IsomorphicComponent;
+type DataTableTanstack<TData> = InstanceType<typeof DataTableTanstack<TData>>;
+export default DataTableTanstack;

package/dist/components/ui/data-table-tanstack/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataTableTanstack } from './data-table-tanstack.svelte';
+export { default } from './data-table-tanstack.svelte';
+export type { ColumnDef } from './data-table-tanstack.svelte';

package/dist/components/ui/data-table-tanstack/index.js

@@ -0,0 +1,2 @@
+export { default as DataTableTanstack } from './data-table-tanstack.svelte';
+export { default } from './data-table-tanstack.svelte';

package/dist/components/ui/data-table-toolbar/data-table-toolbar.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+	import type { Status } from '../status/index.js';
+	import type { Snippet } from 'svelte';
+
+	export type ChipSpec = {
+		/** Wire value passed to setFilterValue / 'all' for "no filter". */
+		value: string;
+		/** Button label text. */
+		label: string;
+		/** Chip colour from the status palette. */
+		status: Status;
+	};
+
+	export type ChipGroup = {
+		/** Matches the TanStack column id this group filters. */
+		columnId: string;
+		chips: ChipSpec[];
+		/** Currently active filter value ('all' = no filter). */
+		activeValue: string;
+		/** Called when a chip is pressed. */
+		onSelect: (value: string) => void;
+	};
+
+	export interface DataTableToolbarProps {
+		/** Bound to the table's globalFilter state. */
+		searchValue: string;
+		onSearch: (value: string) => void;
+		searchPlaceholder?: string;
+		/** Zero or more chip groups rendered left-to-right after the search field. */
+		chipGroups?: ChipGroup[];
+		/** Optional trailing slot content (e.g. a "Last 200 events" meta line). */
+		trailing?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * DataTableToolbar — shared toolbar for TanStack-backed data tables.
+	 *
+	 * Renders:
+	 *  - a search input bound to the table's global filter
+	 *  - inline toggle chip groups, one per filter dimension
+	 *
+	 * Chip groups drive a single TanStack column filter each:
+	 *   { columnId, chips: [{ value, label, status }] }
+	 *
+	 * The toolbar does NOT own state; it takes the current values and fires
+	 * callbacks so the parent page keeps the single source of truth.
+	 */
+
+	import Search from '@lucide/svelte/icons/search';
+
+	let {
+		searchValue,
+		onSearch,
+		searchPlaceholder = 'Filter…',
+		chipGroups = [],
+		trailing
+	}: DataTableToolbarProps = $props();
+</script>
+
+<div class="mb-4 flex flex-wrap items-center gap-3">
+	<!-- Search input: full width on phones (where it owns its own wrapped row),
+	     the clamped instrument width from sm up. -->
+	<div class="relative w-full flex-none sm:w-[clamp(360px,42vw,720px)]">
+		<Search
+			class="text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+		/>
+		<input
+			class="bg-background border-border focus:border-ring w-full rounded-md border py-2 pr-3 pl-8 text-sm outline-none"
+			placeholder={searchPlaceholder}
+			type="search"
+			value={searchValue}
+			oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
+		/>
+	</div>
+
+	<!-- Chip groups -->
+	{#each chipGroups as group (group.columnId)}
+		<div class="flex items-center gap-1.5">
+			{#each group.chips as chip (chip.value)}
+				<button
+					type="button"
+					aria-pressed={group.activeValue === chip.value}
+					class="ds-chip {group.activeValue === chip.value
+						? `ds-chip-${chip.status}`
+						: 'ds-chip-neutral'}"
+					onclick={() => group.onSelect(chip.value)}
+				>
+					{chip.label}
+				</button>
+			{/each}
+		</div>
+	{/each}
+
+	<!-- Trailing content -->
+	{#if trailing}
+		<span class="ml-auto">
+			{@render trailing()}
+		</span>
+	{/if}
+</div>

package/dist/components/ui/data-table-toolbar/data-table-toolbar.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Status } from '../status/index.js';
+import type { Snippet } from 'svelte';
+export type ChipSpec = {
+    /** Wire value passed to setFilterValue / 'all' for "no filter". */
+    value: string;
+    /** Button label text. */
+    label: string;
+    /** Chip colour from the status palette. */
+    status: Status;
+};
+export type ChipGroup = {
+    /** Matches the TanStack column id this group filters. */
+    columnId: string;
+    chips: ChipSpec[];
+    /** Currently active filter value ('all' = no filter). */
+    activeValue: string;
+    /** Called when a chip is pressed. */
+    onSelect: (value: string) => void;
+};
+export interface DataTableToolbarProps {
+    /** Bound to the table's globalFilter state. */
+    searchValue: string;
+    onSearch: (value: string) => void;
+    searchPlaceholder?: string;
+    /** Zero or more chip groups rendered left-to-right after the search field. */
+    chipGroups?: ChipGroup[];
+    /** Optional trailing slot content (e.g. a "Last 200 events" meta line). */
+    trailing?: Snippet;
+}
+declare const DataTableToolbar: import("svelte").Component<DataTableToolbarProps, {}, "">;
+type DataTableToolbar = ReturnType<typeof DataTableToolbar>;
+export default DataTableToolbar;

package/dist/components/ui/data-table-toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataTableToolbar } from './data-table-toolbar.svelte';
+export { default } from './data-table-toolbar.svelte';
+export type { ChipSpec, ChipGroup, DataTableToolbarProps } from './data-table-toolbar.svelte';

package/dist/components/ui/data-table-toolbar/index.js

@@ -0,0 +1,2 @@
+export { default as DataTableToolbar } from './data-table-toolbar.svelte';
+export { default } from './data-table-toolbar.svelte';

package/dist/components/ui/detail-panel/detail-panel.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import X from '@lucide/svelte/icons/x';
+	import StatusBadge from '../status-badge/status-badge.svelte';
+	import type { Status } from '../status/index.js';
+
+	let {
+		eyebrow,
+		title,
+		titleFace = 'mono',
+		icon: Icon,
+		status,
+		statusLabel,
+		children,
+		footer,
+		onClose,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		eyebrow?: string;
+		title: string;
+		/**
+		 * The title's type face. `'mono'` (default, unchanged) reads as an
+		 * identifier — a hostname, a key, a machine value. `'display'` reads as
+		 * a heading first, for a title that is a name or a label rather than a
+		 * machine-produced value (design-system#9).
+		 */
+		titleFace?: 'mono' | 'display';
+		icon?: Component<{ class?: string }>;
+		status?: Status;
+		statusLabel?: string;
+		children: Snippet;
+		footer?: Snippet;
+		onClose?: () => void;
+	} = $props();
+</script>
+
+<!-- A card that fills the remaining height of the right-hand ContextColumn; the
+     column owns width and placement, this owns the entity's detail. -->
+<section
+	bind:this={ref}
+	class={cn(
+		'bg-card border-border ds-edge flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border',
+		className
+	)}
+	{...restProps}
+>
+	<header class="border-border flex items-start gap-3 border-b px-4 py-3.5">
+		{#if Icon}
+			<span
+				class="border-border bg-background mt-0.5 grid size-9 flex-none place-items-center rounded-md border"
+			>
+				<Icon class="text-muted-foreground size-4" />
+			</span>
+		{/if}
+		<div class="min-w-0 flex-1">
+			{#if eyebrow}
+				<div class="text-muted-foreground text-2xs tracking-eyebrow font-medium uppercase">
+					{eyebrow}
+				</div>
+			{/if}
+			<h2
+				class={cn(
+					'text-body truncate font-semibold',
+					titleFace === 'display' ? 'font-display' : 'font-mono'
+				)}
+			>
+				{title}
+			</h2>
+			{#if status && statusLabel}
+				<div class="mt-1.5"><StatusBadge {status} label={statusLabel} /></div>
+			{/if}
+		</div>
+		{#if onClose}
+			<button
+				class="text-muted-foreground hover:text-foreground grid size-7 flex-none place-items-center rounded-md transition-colors"
+				onclick={onClose}
+				aria-label="Close panel"
+			>
+				<X class="size-4" />
+			</button>
+		{/if}
+	</header>
+	<div class="min-h-0 flex-1 overflow-y-auto px-4 py-3">
+		{@render children()}
+	</div>
+	{#if footer}
+		<footer class="border-border bg-card/40 flex flex-wrap items-center gap-2 border-t px-4 py-3">
+			{@render footer()}
+		</footer>
+	{/if}
+</section>

package/dist/components/ui/detail-panel/detail-panel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+import type { Status } from '../status/index.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    eyebrow?: string;
+    title: string;
+    /**
+     * The title's type face. `'mono'` (default, unchanged) reads as an
+     * identifier — a hostname, a key, a machine value. `'display'` reads as
+     * a heading first, for a title that is a name or a label rather than a
+     * machine-produced value (design-system#9).
+     */
+    titleFace?: 'mono' | 'display';
+    icon?: Component<{
+        class?: string;
+    }>;
+    status?: Status;
+    statusLabel?: string;
+    children: Snippet;
+    footer?: Snippet;
+    onClose?: () => void;
+};
+declare const DetailPanel: Component<$$ComponentProps, {}, "ref">;
+type DetailPanel = ReturnType<typeof DetailPanel>;
+export default DetailPanel;

package/dist/components/ui/detail-panel/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DetailPanel } from './detail-panel.svelte';
+export { default } from './detail-panel.svelte';

package/dist/components/ui/detail-panel/index.js

@@ -0,0 +1,2 @@
+export { default as DetailPanel } from './detail-panel.svelte';
+export { default } from './detail-panel.svelte';

package/dist/components/ui/dialog/dialog-close.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		type = 'button',
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />

package/dist/components/ui/dialog/dialog-close.svelte.d.ts

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

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import DialogPortal from './dialog-portal.svelte';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+	import { Button } from '../button/index.js';
+	import XIcon from '@lucide/svelte/icons/x';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>