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

package/dist/lib/components/ui/context-menu/context-menu-shortcut.svelte.d.ts

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

package/dist/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+	bind:ref
+	data-slot="context-menu-sub-content"
+	class={cn(
+		'z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/components/ui/context-menu/context-menu-sub-content.svelte.d.ts

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

package/dist/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+import { Icon } from "../../icon";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, inset, children, ...restProps } = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<Icon icon="lucide:chevron-right" class="ms-auto" />
+</ContextMenuPrimitive.SubTrigger>

package/dist/lib/components/ui/context-menu/context-menu-sub-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+import { type WithoutChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+    inset?: boolean;
+};
+declare const ContextMenuSubTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextMenuSubTrigger = ReturnType<typeof ContextMenuSubTrigger>;
+export default ContextMenuSubTrigger;

package/dist/lib/components/ui/context-menu/context-menu-sub.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+let { open = $bindable(false), ...restProps } = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />

package/dist/lib/components/ui/context-menu/context-menu-sub.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ContextMenuSub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
+type ContextMenuSub = ReturnType<typeof ContextMenuSub>;
+export default ContextMenuSub;

package/dist/lib/components/ui/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+let { ref = $bindable(null), ...restProps } = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />

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

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

package/dist/lib/components/ui/context-menu/context-menu.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+let { open = $bindable(false), ...restProps } = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />

package/dist/lib/components/ui/context-menu/context-menu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ContextMenu: import("svelte").Component<import("bits-ui").ContextMenuRootPropsWithoutHTML, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/lib/components/ui/context-menu/index.d.ts

@@ -0,0 +1,35 @@
+import Root from './context-menu.svelte';
+import Sub from './context-menu-sub.svelte';
+import Portal from './context-menu-portal.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
+declare const ContextMenu: typeof Root & {
+    Root: typeof Root;
+    Sub: typeof Sub;
+    Portal: typeof Portal;
+    Item: typeof Item;
+    GroupHeading: typeof GroupHeading;
+    Label: typeof Label;
+    Group: typeof Group;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Shortcut: typeof Shortcut;
+    Separator: typeof Separator;
+    RadioItem: typeof RadioItem;
+    SubContent: typeof SubContent;
+    SubTrigger: typeof SubTrigger;
+    RadioGroup: typeof RadioGroup;
+    CheckboxItem: typeof CheckboxItem;
+};
+export { Root, Sub, Portal, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, ContextMenu, Sub as ContextMenuSub, Portal as ContextMenuPortal, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel };

package/dist/lib/components/ui/context-menu/index.js

@@ -0,0 +1,36 @@
+import Root from './context-menu.svelte';
+import Sub from './context-menu-sub.svelte';
+import Portal from './context-menu-portal.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
+// Dual export: <ContextMenu> renders Root, <ContextMenu.Content> accesses the namespace.
+const ContextMenu = Object.assign(Root, {
+    Root,
+    Sub,
+    Portal,
+    Item,
+    GroupHeading,
+    Label,
+    Group,
+    Trigger,
+    Content,
+    Shortcut,
+    Separator,
+    RadioItem,
+    SubContent,
+    SubTrigger,
+    RadioGroup,
+    CheckboxItem
+});
+export { Root, Sub, Portal, Item, GroupHeading, Label, Group, Trigger, Content, Shortcut, Separator, RadioItem, SubContent, SubTrigger, RadioGroup, CheckboxItem, ContextMenu, Sub as ContextMenuSub, Portal as ContextMenuPortal, Item as ContextMenuItem, GroupHeading as ContextMenuGroupHeading, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, Label as ContextMenuLabel };

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

@@ -0,0 +1,40 @@
+import { type RowData, type TableOptions } from '@tanstack/table-core';
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+/** An object, or a thunk read on every access so the merge stays live. */
+type MergeSource<T> = T | (() => T | null | undefined);
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source: a key reads from the last source
+ * that has it.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<A extends object, B extends object>(first: MergeSource<A>, second: MergeSource<B>): A & B;
+export declare function mergeObjects<A extends object, B extends object, C extends object>(first: MergeSource<A>, second: MergeSource<B>, third: MergeSource<C>): A & B & C;
+export {};

package/dist/lib/components/ui/data-table/data-table.svelte.js

@@ -0,0 +1,116 @@
+import { createTable } from '@tanstack/table-core';
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable(options) {
+    const defaults = {
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, overrides) => mergeObjects(defaultOptions, overrides)
+    };
+    const resolvedOptions = mergeObjects(defaults, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function onStateChange(updater) {
+        state = isStateUpdater(updater) ? updater(state) : mergeObjects(state, updater);
+        options.onStateChange?.(updater);
+    }
+    function updateOptions() {
+        table.setOptions((prev) => mergeObjects(prev, options, {
+            // Read lazily, so the table sees a change as soon as it is made,
+            // not only after the next effect flush.
+            state: mergeObjects(() => state, options.state ?? {}),
+            onStateChange
+        }));
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+function isStateUpdater(updater) {
+    return typeof updater === 'function';
+}
+function isSourceThunk(source) {
+    return typeof source === 'function';
+}
+function resolveSource(source) {
+    if (!isSourceThunk(source))
+        return source;
+    return source() ?? undefined;
+}
+/** Whether `source` has `key`, own or inherited, so reading it through `source` is typed. */
+function hasKey(source, key) {
+    return key in source;
+}
+export function mergeObjects(...sources) {
+    const findSourceWithKey = (key) => {
+        for (let index = sources.length - 1; index >= 0; index -= 1) {
+            const source = sources[index];
+            const resolved = source === undefined ? undefined : resolveSource(source);
+            if (resolved && hasKey(resolved, key))
+                return resolved;
+        }
+        return undefined;
+    };
+    /** `key` read through the last source that has it, so a getter runs with that source. */
+    const readFromLastSource = (key) => {
+        const source = findSourceWithKey(key);
+        return source && hasKey(source, key) ? source[key] : undefined;
+    };
+    const target = Object.create(null);
+    return new Proxy(target, {
+        get(_, key) {
+            return readFromLastSource(key);
+        },
+        has(_, key) {
+            return findSourceWithKey(key) !== undefined;
+        },
+        ownKeys() {
+            const all = new Set();
+            for (const source of sources) {
+                const resolved = resolveSource(source);
+                if (resolved)
+                    for (const key of Reflect.ownKeys(resolved))
+                        all.add(key);
+            }
+            return Array.from(all);
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const source = findSourceWithKey(key);
+            if (!source || !hasKey(source, key))
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                value: source[key],
+                writable: true
+            };
+        }
+    });
+}

package/dist/lib/components/ui/data-table/flex-render.svelte

@@ -0,0 +1,23 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+let { content, context, attach } = $props();
+</script>
+
+{#if typeof content === 'string'}
+	{content}
+{:else if content instanceof Function}
+	{@const result = (
+		content as (ctx: HeaderContext<TData, TValue> | CellContext<TData, TValue>) => unknown
+	)(context)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}

package/dist/lib/components/ui/data-table/flex-render.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+import type { Attachment } from 'svelte/attachments';
+declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
+    props: {
+        /** The cell or header field of the current cell's column definition. */
+        content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;
+        /** The result of the `getContext()` function of the header or cell */
+        context: TContext;
+        /** Used to pass attachments that can't be gotten through context */
+        attach?: Attachment;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
+export default FlexRender;

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

@@ -0,0 +1,3 @@
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-helpers.js';
+export { createSvelteTable } from './data-table.svelte.js';

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

@@ -0,0 +1,3 @@
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-helpers.js';
+export { createSvelteTable } from './data-table.svelte.js';

package/dist/lib/components/ui/data-table/render-helpers.d.ts

@@ -0,0 +1,90 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as HeaderContext | CellContext)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as HeaderContext | CellContext)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps | Record<string, never>;
+    constructor(snippet: Snippet<[TProps]>, params: TProps | Record<string, never>);
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export declare function renderComponent<T extends Component>(component: T, props?: ComponentProps<T>): RenderComponentConfig<T>;
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/lib/components/ui/data-table/render-helpers.js

@@ -0,0 +1,99 @@
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as HeaderContext | CellContext)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as HeaderContext | CellContext)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent(component, props) {
+    return new RenderComponentConfig(component, props ?? {});
+}
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet(snippet, params) {
+    return new RenderSnippetConfig(snippet, params ?? {});
+}

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

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

package/dist/lib/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/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { Dialog as DialogPrimitive } from "bits-ui";
+import DialogPortal from "./dialog-portal.svelte";
+import { Icon } from "../../icon";
+import "svelte";
+import * as Dialog from "./index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, portalProps, children, showCloseButton = true, ...restProps } = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'fixed start-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="absolute end-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+			>
+				<Icon icon="lucide:x" />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>

package/dist/lib/components/ui/dialog/dialog-content.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import DialogPortal from './dialog-portal.svelte';
+import { type Snippet, type ComponentProps } from 'svelte';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+    children: Snippet;
+    showCloseButton?: boolean;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { Dialog as DialogPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>