@kayord/ui 3.0.12 → 4.0.0

package/dist/components/ui/tabs/tabs.svelte

@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="tabs"
-	class={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
 	{...restProps}
 />

package/dist/components/ui/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+		"rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

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

@@ -1,3 +1,3 @@
 import Root from "./toggle.svelte";
-export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants } from "./toggle.svelte";
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants, } from "./toggle.svelte";
 export { Root, Root as Toggle, };

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

@@ -1,5 +1,5 @@
 import Root from "./toggle.svelte";
-export { toggleVariants } from "./toggle.svelte";
+export { toggleVariants, } from "./toggle.svelte";
 export { Root, 
 //
 Root as Toggle, };

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

@@ -23,7 +23,7 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+		"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size,

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

@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style={`--gap: ${spacing}`}
 	class={cn(
-		"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
 		className
 	)}
 	{...restProps}

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

@@ -27,7 +27,7 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			"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 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 bg-foreground text-background z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+			"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) bg-foreground text-background",
 			className
 		)}
 		{...restProps}
@@ -37,7 +37,7 @@
 			{#snippet child({ props })}
 				<div
 					class={cn(
-						"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]",
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] z-50 bg-foreground fill-foreground",
 						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
 						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
 						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",

package/dist/data-table/index.d.ts

@@ -1,2 +1,5 @@
-export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
+export * from "../components/ui/data-table/index.js";
+export { features } from "../components/custom/data-table/features";
+export type { DataTableFeatures } from "../components/custom/data-table/features";
 export * from "../components/custom/data-table/index.js";
+export { aggregationFns } from "../components/custom/data-table/data-table-utils.js";

package/dist/data-table/index.js

@@ -1,2 +1,12 @@
-export { FlexRender, renderComponent, renderSnippet, createSvelteTable, createSvelteTable as createTable, } from "../components/ui/data-table/index.js";
+// Re-export the official TanStack Svelte v9 adapter surface (createTable,
+// FlexRender, renderComponent/renderSnippet, createTableState, and all types).
+// Plus the library's extras: useTableUrlSync, createColumnHelperFor, etc.
+export * from "../components/ui/data-table/index.js";
+// The feature set (value + type) used by createShadTable. Consumers type
+// columns/tables with the standard TanStack types, e.g.
+// `ColumnDef<DataTableFeatures, TData>` / `Table<DataTableFeatures, TData>`.
+export { features } from "../components/custom/data-table/features";
 export * from "../components/custom/data-table/index.js";
+// Disambiguate the library's `aggregationFns` (sum/min/max/...) helper from
+// the TanStack registry re-exported (as a type) by the adapter above.
+export { aggregationFns } from "../components/custom/data-table/data-table-utils.js";

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "3.0.12",
+  "version": "4.0.0",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kayordDX/ui"
+    "url": "git+https://github.com/kayordDX/ui.git"
   },
   "exports": {
     ".": {
@@ -55,34 +55,39 @@
   "files": [
     "dist",
     "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "!dist/**/*.spec.*",
+    "!dist/**/*harness*"
   ],
   "peerDependencies": {
     "@internationalized/date": "^3.10.0",
     "@lucide/svelte": ">= 1.0.0 < 2.0.0",
-    "@tanstack/table-core": "^8.20.5",
+    "@sveltejs/kit": "^2.12.0",
+    "@tanstack/svelte-table": ">= 9.0.0 < 10.0.0",
     "embla-carousel-svelte": "^8.6.0",
     "formsnap": "^2.0.1",
-    "layerchart": "^2.0.0-next.6",
+    "layerchart": "^2.0.0",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
+    "shadcn-svelte": "^1.5.0",
     "svelte": "^5.0.0",
     "svelte-sonner": "^1.0.5",
     "sveltekit-superforms": "^2.27.1",
-    "vaul-svelte": "^1.0.0-next.7",
-    "zod": "^4.0.5"
+    "vaul-svelte": "^1.0.0-next.7"
   },
   "peerDependenciesMeta": {
     "layerchart": {
       "optional": true
     },
+    "shadcn-svelte": {
+      "optional": true
+    },
     "svelte-sonner": {
       "optional": true
     },
     "embla-carousel-svelte": {
       "optional": true
     },
-    "@tanstack/table-core": {
+    "@tanstack/svelte-table": {
       "optional": true
     },
     "vaul-svelte": {
@@ -94,9 +99,6 @@
     "formsnap": {
       "optional": true
     },
-    "zod": {
-      "optional": true
-    },
     "@internationalized/date": {
       "optional": true
     },
@@ -107,19 +109,22 @@
   "dependencies": {
     "bits-ui": "2.18.1",
     "clsx": "^2.1.1",
+    "runed": "^0.37.1",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.3.0"
+    "tailwind-variants": "^3.3.1",
+    "zod": "4.4.3"
   },
   "devDependencies": {
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
     "@internationalized/date": "^3.12.3",
-    "@lucide/svelte": "^1.28.0",
+    "@lucide/svelte": "^1.31.0",
     "@sveltejs/adapter-auto": "^7.0.1",
     "@sveltejs/kit": "^2.70.2",
     "@sveltejs/package": "^2.5.8",
-    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "@sveltejs/vite-plugin-svelte": "7.3.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/svelte-table": "^9.1.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
     "@vitest/browser": "^4.1.10",
@@ -127,33 +132,33 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "embla-carousel-svelte": "^8.6.0",
-    "eslint": "^10.8.0",
+    "eslint": "^10.8.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.22.0",
+    "eslint-plugin-svelte": "^3.23.0",
     "formsnap": "^2.0.1",
-    "globals": "^17.8.0",
-    "layerchart": "^2.0.4",
+    "globals": "^17.11.0",
+    "layerchart": "^2.2.0",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
+    "playwright": "^1.60.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "4.1.1",
     "prettier-plugin-tailwindcss": "^0.8.1",
-    "publint": "^0.3.22",
-    "runed": "^0.37.1",
-    "svelte": "^5.56.8",
-    "svelte-check": "^4.7.4",
+    "publint": "^0.3.23",
+    "shadcn-svelte": "^1.5.0",
+    "svelte": "^5.56.9",
+    "svelte-check": "^4.7.6",
     "svelte-sonner": "^1.1.1",
     "sveltekit-superforms": "^2.30.2",
     "tailwindcss": "^4.3.3",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.4.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.65.0",
+    "typescript-eslint": "^8.67.0",
     "vaul-svelte": "1.0.0-next.7",
-    "vite": "^8.2.0",
+    "vite": "^8.2.1",
     "vitest": "^4.1.10",
-    "vitest-browser-svelte": "^3.0.0",
-    "zod": "4.4.3"
+    "vitest-browser-svelte": "^3.0.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -168,6 +173,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
+    "verify": "pnpm check && pnpm lint && pnpm test",
     "format": "prettier --write .",
     "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage",

package/dist/components/custom/data-table/shad-table-old.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type RowData, type RowModel, type Table, type TableOptions } from "@tanstack/table-core";
-interface ShadTableOptions<TData extends RowData> extends Omit<TableOptions<TData>, "getCoreRowModel"> {
-    getCoreRowModel?: (table: Table<TData>) => () => RowModel<TData>;
-    enablePaging?: boolean;
-    enableVisibility?: boolean;
-    enableRowSelectionUI?: boolean;
-}
-export declare function createShadTableOld<TData extends RowData>(shadOptions: ShadTableOptions<TData>): Table<TData>;
-export {};

package/dist/components/custom/data-table/shad-table-old.svelte.js

@@ -1,202 +0,0 @@
-import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
-import DataTableCheckbox from "./DataTableCheckbox.svelte";
-import { renderComponent } from "../../../data-table";
-import { mergeObjects } from "../../ui/data-table/data-table.svelte";
-export function createShadTableOld(shadOptions) {
-    if (!shadOptions.getCoreRowModel) {
-        shadOptions.getCoreRowModel = getCoreRowModel();
-    }
-    if ((shadOptions.enablePaging ?? true) == false) {
-        shadOptions.manualPagination = true;
-    }
-    if (shadOptions.useURLSearchParams) {
-        shadOptions.autoResetPageIndex = false;
-    }
-    const options = shadOptions;
-    // Features
-    // Sorting
-    if ((options.enableSorting ?? true) && !options.getSortedRowModel) {
-        options.getSortedRowModel = getSortedRowModel();
-        if (!options.onSortingChange) {
-            options.onSortingChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (options.state?.sorting) {
-                        options.state.sorting = updater(options.state.sorting);
-                    }
-                    else if (state.sorting) {
-                        state.sorting = updater(state.sorting);
-                    }
-                }
-                else {
-                    if (options.state?.sorting) {
-                        options.state.sorting = updater;
-                    }
-                    else {
-                        state.sorting = updater;
-                    }
-                }
-            };
-        }
-    }
-    // Paging
-    if ((shadOptions.enablePaging ?? true) && !options.getPaginationRowModel) {
-        options.getPaginationRowModel = getPaginationRowModel();
-        if (!options.onPaginationChange) {
-            options.onPaginationChange = (updater) => {
-                if (typeof updater === "function") {
-                    if (options.state?.pagination) {
-                        options.state.pagination = updater(options.state.pagination);
-                    }
-                    else if (state.pagination) {
-                        state.pagination = updater(state.pagination);
-                    }
-                }
-                else {
-                    if (options.state?.pagination) {
-                        options.state.pagination = updater;
-                    }
-                    else {
-                        state.pagination = updater;
-                    }
-                }
-            };
-        }
-    }
-    // Row Selection
-    if ((options.enableRowSelection ?? true) && !options.onRowSelectionChange) {
-        options.onRowSelectionChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.rowSelection) {
-                    options.state.rowSelection = updater(options.state.rowSelection);
-                }
-                else if (state.rowSelection) {
-                    state.rowSelection = updater(state.rowSelection);
-                }
-            }
-            else {
-                if (options.state?.rowSelection) {
-                    options.state.rowSelection = updater;
-                }
-                else {
-                    state.rowSelection = updater;
-                }
-            }
-        };
-    }
-    if (options.enableRowSelection && (shadOptions.enableRowSelectionUI ?? true)) {
-        const rowSelectionColumn = {
-            id: "select",
-            header: () => renderComponent(DataTableCheckbox, {
-                checked: table.getIsAllPageRowsSelected(),
-                onCheckedChange: () => table.toggleAllPageRowsSelected(),
-            }),
-            cell: (r) => renderComponent(DataTableCheckbox, {
-                checked: r.row.getIsSelected(),
-                onCheckedChange: () => r.row.toggleSelected(),
-            }),
-            enableResizing: false,
-            enableSorting: false,
-        };
-        options.columns.unshift(rowSelectionColumn);
-    }
-    // Column Visibility
-    if ((shadOptions.enableVisibility ?? false) && !options.onColumnVisibilityChange) {
-        options.onColumnVisibilityChange = (updater) => {
-            if (typeof updater === "function") {
-                if (options.state?.columnVisibility) {
-                    options.state.columnVisibility = updater(options.state.columnVisibility);
-                }
-                else if (state.columnVisibility) {
-                    state.columnVisibility = updater(state.columnVisibility);
-                }
-            }
-            else {
-                if (options.state?.columnVisibility) {
-                    options.state.columnVisibility = updater;
-                }
-                else {
-                    state.columnVisibility = updater;
-                }
-            }
-        };
-    }
-    // Filtering
-    if ((options.enableFilters ?? true) && !options.getFilteredRowModel) {
-        options.getFilteredRowModel = getFilteredRowModel();
-        // Global Filtering
-        if (options.enableGlobalFilter ?? false) {
-            if (!options.onGlobalFilterChange) {
-                options.onGlobalFilterChange = (updater) => {
-                    if (typeof updater === "function") {
-                        if (options.state?.globalFilter) {
-                            options.state.globalFilter = updater(options.state.globalFilter);
-                        }
-                        else if (state.globalFilter) {
-                            state.globalFilter = updater(state.globalFilter);
-                        }
-                    }
-                    else {
-                        if (options.state?.globalFilter) {
-                            options.state.globalFilter = updater;
-                        }
-                        else {
-                            state.globalFilter = updater;
-                        }
-                    }
-                };
-            }
-        }
-        else {
-            if (!options.onColumnFiltersChange) {
-                options.onColumnFiltersChange = (updater) => {
-                    if (typeof updater === "function") {
-                        if (options.state?.columnFilters) {
-                            options.state.columnFilters = updater(options.state.columnFilters);
-                        }
-                        else if (state.columnFilters) {
-                            state.columnFilters = updater(state.columnFilters);
-                        }
-                    }
-                    else {
-                        if (options.state?.columnFilters) {
-                            options.state.columnFilters = updater;
-                        }
-                        else {
-                            state.columnFilters = updater;
-                        }
-                    }
-                };
-            }
-        }
-    }
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, options);
-    const table = createTable(resolvedOptions);
-    const state = $state(table.initialState);
-    const updateOptions = (table, state) => {
-        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(table, state);
-    $effect.pre(() => {
-        updateOptions(table, state);
-    });
-    return table;
-}

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

@@ -1,40 +0,0 @@
-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>;
-type MaybeThunk<T extends object> = T | (() => T | null | undefined);
-type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
-/**
- * Lazily merges several objects (or thunks) while preserving
- * getter semantics from every source.
- *
- * Proxy-based to avoid known WebKit recursion issue.
- */
-export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
-    [K in keyof Sources]: Sources[K];
-}>;
-export {};

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

@@ -1,110 +0,0 @@
-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(() => {
-            return mergeObjects(resolvedOptions, options, {
-                state: mergeObjects(state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                },
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    return table;
-}
-/**
- * Lazily merges several objects (or thunks) while preserving
- * getter semantics from every source.
- *
- * Proxy-based to avoid known WebKit recursion issue.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function mergeObjects(...sources) {
-    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
-    const findSourceWithKey = (key) => {
-        for (let i = sources.length - 1; i >= 0; i--) {
-            const obj = resolve(sources[i]);
-            if (obj && key in obj)
-                return obj;
-        }
-        return undefined;
-    };
-    return new Proxy(Object.create(null), {
-        get(_, key) {
-            const src = findSourceWithKey(key);
-            return src?.[key];
-        },
-        has(_, key) {
-            return !!findSourceWithKey(key);
-        },
-        ownKeys() {
-            // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            const all = new Set();
-            for (const s of sources) {
-                const obj = resolve(s);
-                if (obj) {
-                    for (const k of Reflect.ownKeys(obj)) {
-                        all.add(k);
-                    }
-                }
-            }
-            return [...all];
-        },
-        getOwnPropertyDescriptor(_, key) {
-            const src = findSourceWithKey(key);
-            if (!src)
-                return undefined;
-            return {
-                configurable: true,
-                enumerable: true,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                value: src[key],
-                writable: true,
-            };
-        },
-    });
-}

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

@@ -1,37 +0,0 @@
-<script lang="ts" generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>">
-	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
-	import type { Attachment } from "svelte/attachments";
-	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;
-
-		/** Used to pass attachments that can't be gotten through context */
-		attach?: Attachment;
-	};
-
-	let { content, context, attach }: 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} {attach} />
-	{:else if result instanceof RenderSnippetConfig}
-		{@const { snippet, params } = result}
-		{@render snippet({ ...params, attach })}
-	{:else}
-		{result}
-	{/if}
-{/if}