@kayord/ui 0.9.22 → 0.10.1

package/dist/components/custom/data-table/DataTable.svelte

@@ -1,109 +1,137 @@
-<script lang="ts">
-	import ArrowDown from "lucide-svelte/icons/arrow-down";
-	import ArrowUp from "lucide-svelte/icons/arrow-up";
+<script lang="ts" generics="T">
+	import { FlexRender, type ColumnDef, type Table as TypeType, renderComponent } from "@tanstack/svelte-table";
+	import { Skeleton, Table } from "../../ui";
+	import Pagination from "./Pagination.svelte";
+	import type { Snippet } from "svelte";
 	import { fade } from "svelte/transition";
+	import { ProgressLoading } from "../progress-loading";
+	import DataTableCheckbox from "./DataTableCheckbox.svelte";
+	import VisibilitySelect from "./VisibilitySelect.svelte";
+	import FullscreenModeToggle from "./FullscreenModeToggle.svelte";
+	import { cn } from "../../../utils";
+	import { tableStore } from "./table.svelte";
 
-	import { Button, ProgressLoading, Skeleton } from "../../..";
-	import { Subscribe, Render, type TableViewModel } from "svelte-headless-table";
-	import * as Table from "../../ui/table";
-	import DataTablePagination from "./DataTablePagination.svelte";
+	interface Props<T> {
+		table: TypeType<T>;
+		columns: ColumnDef<T>[];
+		isLoading?: boolean;
+		header?: Snippet;
+		subHeader?: Snippet;
+		footer?: Snippet;
+		leftToolbar?: Snippet;
+		rightToolbar?: Snippet;
+		noDataMessage?: string;
+		hideHeader?: boolean;
+		enableVisibility?: boolean;
+		enableFullscreen?: boolean;
+	}
 
-	type RowData = Record<string, any>;
-	type T = $$Generic<RowData>;
-	export let tableViewModel: TableViewModel<T>;
+	let {
+		table,
+		columns,
+		isLoading = false,
+		header,
+		subHeader,
+		footer,
+		leftToolbar,
+		rightToolbar,
+		noDataMessage = "No data",
+		hideHeader = false,
+		enableVisibility = false,
+		enableFullscreen = false,
+	}: Props<T> = $props();
 
-	export let title: string = "";
-	export let isLoading: boolean = false;
-	export let hideHeader: boolean = false;
+	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
+	const enableRowSelection = table.options.enableRowSelection;
 
-	export let noDataMessage: string | undefined = "No Data";
-	export let serverItemCount: number | undefined = undefined;
-
-	export let rowAction: ((row: T | undefined) => void) | undefined = undefined;
-
-	export let showSelected: boolean = true;
-	export let showRowsPerPage: boolean = false;
-
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows, flatColumns } = tableViewModel;
-
-	// Sorting
-	const isSortEnabled = pluginStates.sort != undefined;
-	const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : undefined;
-
-	// Paging
-	const isPagingEnabled = pluginStates.page != undefined;
-	const pageIndex = isPagingEnabled ? pluginStates.page.pageIndex : undefined;
-	const pageSize = isPagingEnabled ? pluginStates.page.pageSize : undefined;
-
-	// Select
-	const isSelectEnabled = pluginStates.select != undefined;
-	const selectedDataIds = isSelectEnabled ? pluginStates.select.selectedDataIds : undefined;
-
-	const getOriginalData = (id: any) => {
-		const data = $pageRows[id] as unknown as { original: T };
-		return data.original;
-	};
+	if (enableRowSelection) {
+		const rowSelectionColumn: ColumnDef<T> = {
+			id: "select",
+			// cell: (info) => "[]",
+			header: () =>
+				renderComponent(DataTableCheckbox, {
+					checked: table.getIsAllPageRowsSelected(),
+					onCheckedChange: () => table.toggleAllPageRowsSelected(),
+				}),
+			cell: (r) =>
+				renderComponent(DataTableCheckbox, {
+					checked: r.row.getIsSelected(),
+					onCheckedChange: () => r.row.toggleSelected(),
+				}),
+			enableResizing: false,
+		};
+		columns.unshift(rowSelectionColumn);
+	}
 </script>
 
-<div class="w-full">
-	<div class="m-2 rounded-md border">
+<div
+	class={cn(
+		"w-full",
+		tableStore.isFullscreen ? "absolute left-0 top-0 z-10 h-screen bg-background transition-all" : "w-full"
+	)}
+>
+	<div class="py-2">
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="flex items-center justify-between gap-2">
+				<div>
+					{#if leftToolbar}
+						{@render leftToolbar()}
+					{/if}
+				</div>
+				<div></div>
+				<div class="flex items-center justify-between gap-2">
+					{#if rightToolbar}
+						{@render rightToolbar()}
+					{/if}
+					{#if enableVisibility}
+						<div>
+							<VisibilitySelect {table} />
+						</div>
+					{/if}
+					{#if enableFullscreen}
+						<div>
+							<FullscreenModeToggle />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<div class="rounded-md border">
 		{#if isLoading}
 			<span in:fade={{ duration: 300 }}>
 				<ProgressLoading class="h-1" />
 			</span>
-		{:else}
-			<div class="h-1"></div>
 		{/if}
-		{#if $$slots.header || title.length > 0}
-			<div class="overflow-hidden rounded-t-md">
-				{#if $$slots.header}
-					<slot name="header" />
-				{:else}
-					<h1 class="p-2 text-center text-lg">
-						{title}
-					</h1>
-				{/if}
-			</div>
-		{/if}
-		{#if $$slots.subHeader}
-			<slot name="subHeader" />
+
+		{#if subHeader}
+			{@render subHeader()}
 		{/if}
-		<Table.Root {...$tableAttrs} class="table-auto">
+
+		<Table.Root class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
-					{#each $headerRows as headerRow}
-						<Subscribe rowAttrs={headerRow.attrs()}>
-							<Table.Row>
-								{#each headerRow.cells as cell (cell.id)}
-									<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-										<Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-4">
-											{#if isSortEnabled}
-												<Button variant="ghost" on:click={props.sort.toggle}>
-													<Render of={cell.render()} />
-													{#each $sortKeys as sortKey}
-														{#if sortKey?.id === cell.id && sortKey?.order == "desc"}
-															<ArrowDown class="ml-2 h-4 w-4" />
-														{:else if sortKey?.id === cell.id && sortKey?.order === "asc"}
-															<ArrowUp class="ml-2 h-4 w-4" />
-														{/if}
-													{/each}
-												</Button>
-											{:else}
-												<Render of={cell.render()} />
-											{/if}
-										</Table.Head>
-									</Subscribe>
-								{/each}
-							</Table.Row>
-						</Subscribe>
+					{#each table.getHeaderGroups() as headerGroup}
+						<Table.Row>
+							{#each headerGroup.headers as header}
+								<Table.Head colspan={header.colSpan}>
+									{#if !header.isPlaceholder}
+										<FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+									{/if}
+								</Table.Head>
+							{/each}
+						</Table.Row>
 					{/each}
 				</Table.Header>
 			{/if}
-			<Table.Body {...$tableBodyAttrs}>
-				{#if isLoading && $rows.length == 0}
+			<Table.Body>
+				{#if isLoading && table.getRowModel().rows.length == 0}
 					{#each { length: 5 } as _, i}
 						<Table.Row>
-							{#each flatColumns as cell}
+							{#each columns as _cell}
 								<Table.Cell>
 									<Skeleton class="h-4" />
 								</Table.Cell>
@@ -111,30 +139,21 @@
 						</Table.Row>
 					{/each}
 				{:else}
-					{#if $rows.length == 0}
+					{#if table.getRowModel().rows.length == 0}
 						<Table.Row>
-							<Table.Cell colspan={flatColumns.length}>
+							<Table.Cell colspan={table.getAllColumns().length}>
 								<div class="text-center">{noDataMessage}</div>
 							</Table.Cell>
 						</Table.Row>
 					{/if}
-					{#each $pageRows as row (row.id)}
-						<Subscribe rowAttrs={row.attrs()} let:rowAttrs rowProps={row.props()} let:rowProps>
-							<Table.Row
-								{...rowAttrs}
-								data-state={isSelectEnabled && rowProps.select.selected ? "selected" : "false"}
-								class={rowAction == undefined ? "" : "hover:cursor-pointer"}
-								on:click={() => (rowAction != undefined ? rowAction(getOriginalData(row.id)) : undefined)}
-							>
-								{#each row.cells as cell (cell.id)}
-									<Subscribe attrs={cell.attrs()} let:attrs>
-										<Table.Cell {...attrs}>
-											<Render of={cell.render()} />
-										</Table.Cell>
-									</Subscribe>
-								{/each}
-							</Table.Row>
-						</Subscribe>
+					{#each table.getRowModel().rows as row}
+						<Table.Row data-state={row.getIsSelected() && "selected"}>
+							{#each row.getVisibleCells() as cell}
+								<Table.Cell style={`width: ${cell.getContext().column.getSize()}px;`}>
+									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+								</Table.Cell>
+							{/each}
+						</Table.Row>
 					{/each}
 				{/if}
 			</Table.Body>
@@ -145,20 +164,13 @@
 			</span>
 		{/if}
 	</div>
-	<div class="flex items-center">
-		<div class="flex-1 px-2 text-sm text-muted-foreground">
-			{#if isSelectEnabled && showSelected}
-				{Object.keys($selectedDataIds).length} of {serverItemCount ?? $rows.length} row(s) selected.
-			{/if}
-		</div>
-		{#if isPagingEnabled}
-			<DataTablePagination tableModel={tableViewModel} {showRowsPerPage} />
-		{/if}
-	</div>
+	{#if isPaginationEnabled}
+		<Pagination {table} />
+	{/if}
 
-	{#if $$slots.footer}
+	{#if footer}
 		<div class="overflow-hidden rounded-b-md">
-			<slot name="footer" />
+			{@render footer()}
 		</div>
 	{/if}
 </div>

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

@@ -1,41 +1,32 @@
-import { type TableViewModel } from "svelte-headless-table";
-type RowData = Record<string, any>;
-declare class __sveltets_Render<T extends RowData> {
+import { type ColumnDef, type Table as TypeType } from "@tanstack/svelte-table";
+import type { Snippet } from "svelte";
+declare class __sveltets_Render<T> {
     props(): {
-        tableViewModel: TableViewModel<T, import("svelte-headless-table/dist/types/TablePlugin").AnyPlugins>;
-        title?: string;
+        table: TypeType<T>;
+        columns: ColumnDef<T>[];
         isLoading?: boolean;
+        header?: Snippet;
+        subHeader?: Snippet;
+        footer?: Snippet;
+        leftToolbar?: Snippet;
+        rightToolbar?: Snippet;
+        noDataMessage?: string;
         hideHeader?: boolean;
-        noDataMessage?: string | undefined;
-        serverItemCount?: number | undefined;
-        rowAction?: ((row: T | undefined) => void) | undefined;
-        showSelected?: boolean;
-        showRowsPerPage?: boolean;
+        enableVisibility?: boolean;
+        enableFullscreen?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        header: {};
-        subHeader: {};
-        footer: {};
-    };
-    bindings(): string;
+    events(): {};
+    slots(): {};
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends RowData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']> & {
-        children?: any;
-    }>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-        $$slots?: ReturnType<__sveltets_Render<T>['slots']>;
-        children?: any;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataTable: $$IsomorphicComponent;
-type DataTable<T extends RowData> = InstanceType<typeof DataTable<T>>;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
 export default DataTable;

package/dist/components/custom/data-table/DataTableCheckbox.svelte

@@ -2,16 +2,13 @@
 	import { Checkbox } from "../../ui/checkbox";
 	import { cn } from "../../../utils";
 	import type { ComponentProps } from "svelte";
-	import type { Writable } from "svelte/store";
 
-	interface DataTableCheckboxProps extends Omit<ComponentProps<Checkbox>, "checked"> {
-		checked: Writable<boolean>;
+	interface Props extends Omit<ComponentProps<Checkbox>, "checked"> {
+		checked?: boolean | "indeterminate";
+		class?: string;
 	}
 
-	type $$Props = DataTableCheckboxProps;
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let checked: $$Props["checked"];
+	let { checked, class: className, ...rest }: Props = $props();
 </script>
 
-<Checkbox bind:checked={$checked} class={cn(className)} />
+<Checkbox bind:checked class={cn(className)} {...rest} />

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

@@ -1,21 +1,5 @@
-import type { Writable } from "svelte/store";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DataTableCheckbox: $$__sveltets_2_IsomorphicComponent<Omit<import("bits-ui").CheckboxProps, "checked"> & {
-    checked: Writable<boolean>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DataTableCheckbox = InstanceType<typeof DataTableCheckbox>;
+declare const DataTableCheckbox: import("svelte").Component<Omit<import("bits-ui").CheckboxProps, "checked"> & {
+    checked?: boolean | "indeterminate";
+    class?: string;
+}, {}, "">;
 export default DataTableCheckbox;

package/dist/components/custom/{data-table-new → data-table}/Pagination.svelte.d.ts

@@ -4,9 +4,7 @@ declare class __sveltets_Render<T> {
         table: Table<T>;
         canChangePageSize?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "";
     exports(): {};
@@ -15,9 +13,7 @@ interface $$IsomorphicComponent {
     new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Pagination: $$IsomorphicComponent;

package/dist/components/custom/{data-table-new → data-table}/VisibilitySelect.svelte.d.ts

@@ -3,9 +3,7 @@ declare class __sveltets_Render<T> {
     props(): {
         table: Table<T>;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "";
     exports(): {};
@@ -14,9 +12,7 @@ interface $$IsomorphicComponent {
     new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<T>['events']>;
-    }): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const VisibilitySelect: $$IsomorphicComponent;

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

@@ -1,2 +1 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { default as DataTableCheckbox } from "./DataTableCheckbox.svelte";

package/dist/components/custom/data-table/index.js

@@ -1,2 +1 @@
 export { default as DataTable } from "./DataTable.svelte";
-export { default as DataTableCheckbox } from "./DataTableCheckbox.svelte";

package/dist/components/custom/index.d.ts

@@ -1,5 +1,4 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
-export * from "./data-table-new/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";

package/dist/components/custom/index.js

@@ -1,5 +1,4 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
 export * from "./data-table/index.js";
-export * from "./data-table-new/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";

package/dist/components/custom/loader/Loader.svelte.d.ts

@@ -1,17 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Loader: $$__sveltets_2_IsomorphicComponent<{
+declare const Loader: import("svelte").Component<{
     class?: string | undefined | null;
     isLoading?: boolean;
     iconProps?: Omit<{
@@ -26,9 +13,6 @@ declare const Loader: $$__sveltets_2_IsomorphicComponent<{
         isLoading?: boolean;
     };
 }, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
     class: string | null | undefined;
 }, "">;
-type Loader = InstanceType<typeof Loader>;
 export default Loader;

package/dist/components/custom/theme-switch/ThemeSwitch.svelte.d.ts

@@ -1,20 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ThemeSwitch: $$__sveltets_2_IsomorphicComponent<{
+declare const ThemeSwitch: import("svelte").Component<{
     class?: string | undefined | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ThemeSwitch = InstanceType<typeof ThemeSwitch>;
+}, {}, "">;
 export default ThemeSwitch;

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

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn("p-6", className)} {...$$restProps}>
 	<slot />
 </div>

package/dist/components/ui/card/card-header.svelte

@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
 	<slot />
 </div>

package/dist/components/ui/carousel/carousel.svelte

@@ -41,6 +41,7 @@
 		if (!api) return;
 		canScrollPrev.set(api.canScrollPrev());
 		canScrollNext.set(api.canScrollNext());
+		selectedIndexStore.set(api.selectedScrollSnap());
 	}
 
 	$: if (api) {

package/dist/components/ui/resizable/resizable-handle.svelte.d.ts

@@ -12,10 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const ResizableHandle: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    onDraggingChange?: import("paneforge/dist/internal/types").PaneResizeHandleOnDragging;
-    tabIndex?: number;
-    el?: HTMLElement | null;
+    disabled?: boolean | undefined;
+    onDraggingChange?: import("paneforge/dist/internal/types").PaneResizeHandleOnDragging | undefined;
+    tabIndex?: number | undefined;
+    el?: HTMLElement | null | undefined;
 } & import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
     withHandle?: boolean;
 }, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.9.22",
+  "version": "0.10.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,22 +26,21 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
+    "@tanstack/svelte-table": "^9.0.0-alpha.10",
     "lucide-svelte": ">= 0.400.0 < 1.0.0",
     "svelte": "^4.0.0 || ^5.0.0-next.1",
     "sveltekit-superforms": "^2.15.1",
-    "zod": "^3.23.8",
-    "@tanstack/svelte-table": "^9.0.0-alpha.10"
+    "zod": "^3.23.8"
   },
   "dependencies": {
     "@internationalized/date": "^3.5.5",
-    "bits-ui": "^0.21.13",
+    "bits-ui": "^0.21.15",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
     "embla-carousel-svelte": "8.3.0",
     "formsnap": "^1.0.1",
     "mode-watcher": "^0.4.1",
-    "paneforge": "^0.0.5",
-    "svelte-headless-table": "^0.18.2",
+    "paneforge": "^0.0.6",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
@@ -49,31 +48,31 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.5.28",
+    "@sveltejs/kit": "^2.6.1",
     "@sveltejs/package": "^2.3.5",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "@tanstack/svelte-table": "9.0.0-alpha.10",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/svelte": "^5.2.1",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
-    "@typescript-eslint/parser": "^8.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.10.0",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.0",
+    "eslint-plugin-svelte": "^2.44.1",
     "happy-dom": "^15.7.4",
-    "lucide-svelte": "^0.441.0",
+    "lucide-svelte": "^0.446.0",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "publint": "^0.2.11",
     "svelte": "^5.0.0-next.238",
-    "svelte-check": "^4.0.2",
-    "tailwindcss": "^3.4.12",
+    "svelte-check": "^4.0.4",
+    "tailwindcss": "^3.4.13",
     "tslib": "^2.7.0",
     "typescript": "^5.6.2",
-    "vite": "^5.4.6",
+    "vite": "^5.4.8",
     "vitest": "^2.1.1"
   },
   "svelte": "./dist/index.js",