@tanglemedia/svelte-starter-ui-shadcn 0.0.1

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ContextMenuPrimitive.GroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+	bind:ref
+	class={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+type $$ComponentProps = ContextMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+};
+declare const ContextMenuGroupHeading: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextMenuGroupHeading = ReturnType<typeof ContextMenuGroupHeading>;
+export default ContextMenuGroupHeading;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ContextMenuPrimitive.ItemProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+type $$ComponentProps = ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+};
+declare const ContextMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
+	import Circle from "@lucide/svelte/icons/circle";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	bind:ref
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex 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({ checked })}
+		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+			{#if checked}
+				<Circle class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</ContextMenuPrimitive.RadioItem>

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+	bind:ref
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

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

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+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,19 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+	bind:ref
+	class={cn(
+		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
+		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,28 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		inset,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	bind:ref
+	class={cn(
+		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+		inset && "pl-8",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRight class="ml-auto size-4" />
+</ContextMenuPrimitive.SubTrigger>

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

@@ -0,0 +1,7 @@
+import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from "bits-ui";
+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/index.d.ts

@@ -0,0 +1,16 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+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";
+declare const Sub: typeof ContextMenuPrimitive.Sub;
+declare const Root: typeof ContextMenuPrimitive.Root;
+declare const Trigger: typeof ContextMenuPrimitive.Trigger;
+declare const Group: typeof ContextMenuPrimitive.Group;
+declare const RadioGroup: typeof ContextMenuPrimitive.RadioGroup;
+export { Sub, Root, Item, Group, Trigger, Content, Shortcut, Separator, RadioItem, GroupHeading, SubContent, SubTrigger, RadioGroup, CheckboxItem, Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, GroupHeading as ContextMenuGroupHeading, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };

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

@@ -0,0 +1,18 @@
+import { ContextMenu as ContextMenuPrimitive } from "bits-ui";
+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";
+const Sub = ContextMenuPrimitive.Sub;
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Group = ContextMenuPrimitive.Group;
+const RadioGroup = ContextMenuPrimitive.RadioGroup;
+export { Sub, Root, Item, Group, Trigger, Content, Shortcut, Separator, RadioItem, GroupHeading, SubContent, SubTrigger, RadioGroup, CheckboxItem, 
+//
+Root as ContextMenu, Sub as ContextMenuSub, Item as ContextMenuItem, Group as ContextMenuGroup, Content as ContextMenuContent, Trigger as ContextMenuTrigger, Shortcut as ContextMenuShortcut, RadioItem as ContextMenuRadioItem, Separator as ContextMenuSeparator, GroupHeading as ContextMenuGroupHeading, RadioGroup as ContextMenuRadioGroup, SubContent as ContextMenuSubContent, SubTrigger as ContextMenuSubTrigger, CheckboxItem as ContextMenuCheckboxItem, };

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

@@ -0,0 +1,36 @@
+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>;
+/**
+ * Merges objects together while keeping their getters alive.
+ * Taken from SolidJS: {@link https://github.com/solidjs/solid/blob/24abc825c0996fd2bc8c1de1491efe9a7e743aff/packages/solid/src/server/rendering.ts#L82-L115}
+ */
+export declare function mergeObjects<T>(source: T): T;
+export declare function mergeObjects<T, U>(source: T, source1: U): T & U;
+export declare function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
+export declare function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;

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

@@ -0,0 +1,89 @@
+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 resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state || {}),
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const target = {};
+    for (let i = 0; i < sources.length; i++) {
+        let source = sources[i];
+        if (typeof source === "function")
+            source = source();
+        if (source) {
+            const descriptors = Object.getOwnPropertyDescriptors(source);
+            for (const key in descriptors) {
+                if (key in target)
+                    continue;
+                Object.defineProperty(target, key, {
+                    enumerable: true,
+                    get() {
+                        for (let i = sources.length - 1; i >= 0; i--) {
+                            let s = sources[i];
+                            if (typeof s === "function")
+                                s = s();
+                            const v = (s || {})[key];
+                            if (v !== undefined)
+                                return v;
+                        }
+                    },
+                });
+            }
+        }
+    }
+    return target;
+}

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

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	type TData = unknown;
+	type TValue = unknown;
+	type TContext = unknown;
+</script>
+
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
+
+	type 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;
+	};
+
+	let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
+{/if}

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

@@ -0,0 +1,23 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+declare class __sveltets_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) | undefined;
+        /** The result of the `getContext()` function of the header or cell */
+        context: TContext;
+    };
+    events(): {};
+    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 any)}
+ * {#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 any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+/**
+ * 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<any>, Props extends ComponentProps<T>>(component: T, props: Props): 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 any)}
+ * {#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 any)}
+ * {#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);
+}