@kayord/ui 0.9.21 → 0.9.22

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

@@ -0,0 +1,176 @@
+<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";
+
+	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;
+	}
+
+	let {
+		table,
+		columns,
+		isLoading = false,
+		header,
+		subHeader,
+		footer,
+		leftToolbar,
+		rightToolbar,
+		noDataMessage = "No data",
+		hideHeader = false,
+		enableVisibility = false,
+		enableFullscreen = false,
+	}: Props<T> = $props();
+
+	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
+	const enableRowSelection = table.options.enableRowSelection;
+
+	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={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>
+		{/if}
+
+		{#if subHeader}
+			{@render subHeader()}
+		{/if}
+
+		<Table.Root class="table-auto">
+			{#if !hideHeader}
+				<Table.Header>
+					{#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>
+				{#if isLoading && table.getRowModel().rows.length == 0}
+					{#each { length: 5 } as _, i}
+						<Table.Row>
+							{#each columns as _cell}
+								<Table.Cell>
+									<Skeleton class="h-4" />
+								</Table.Cell>
+							{/each}
+						</Table.Row>
+					{/each}
+				{:else}
+					{#if table.getRowModel().rows.length == 0}
+						<Table.Row>
+							<Table.Cell colspan={table.getRowModel().rows.length}>
+								<div class="text-center">{noDataMessage}</div>
+							</Table.Cell>
+						</Table.Row>
+					{/if}
+					{#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>
+		</Table.Root>
+		{#if isLoading}
+			<span in:fade={{ duration: 300 }}>
+				<ProgressLoading class="h-1" />
+			</span>
+		{/if}
+	</div>
+	{#if isPaginationEnabled}
+		<Pagination {table} />
+	{/if}
+
+	{#if footer}
+		<div class="overflow-hidden rounded-b-md">
+			{@render footer()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,36 @@
+import { type ColumnDef, type Table as TypeType } from "@tanstack/svelte-table";
+import type { Snippet } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        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;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Checkbox } from "../../ui/checkbox";
+	import { cn } from "../../../utils";
+	import type { ComponentProps } from "svelte";
+
+	interface Props extends Omit<ComponentProps<Checkbox>, "checked"> {
+		checked?: boolean | "indeterminate";
+		class?: string;
+	}
+
+	let { checked, class: className, ...rest }: Props = $props();
+</script>
+
+<Checkbox bind:checked class={cn(className)} {...rest} />

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

@@ -0,0 +1,21 @@
+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?: boolean | "indeterminate";
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type DataTableCheckbox = InstanceType<typeof DataTableCheckbox>;
+export default DataTableCheckbox;

package/dist/components/custom/data-table-new/FullscreenModeToggle.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Button from "../../ui/button/button.svelte";
+	import { Maximize, Minimize } from "lucide-svelte";
+	import { tableStore } from "./table.svelte";
+</script>
+
+<Button
+	class="grow"
+	variant="outline"
+	size="sm"
+	on:click={() => {
+		tableStore.isFullscreen = !tableStore.isFullscreen;
+		// if ($target == "body") {
+		// 	$target = "#tableContent";
+		// } else {
+		// 	$target = "body";
+		// }
+	}}
+>
+	{#if tableStore.isFullscreen}
+		<Minimize class="size-5" />
+	{:else}
+		<Maximize class="size-5" />
+	{/if}
+</Button>

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

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FullscreenModeToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FullscreenModeToggle = InstanceType<typeof FullscreenModeToggle>;
+export default FullscreenModeToggle;

package/dist/components/custom/data-table-new/Pagination.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" generics="T">
+	import type { Table } from "@tanstack/svelte-table";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import DoubleArrowLeft from "lucide-svelte/icons/arrow-left";
+	import DoubleArrowRight from "lucide-svelte/icons/arrow-right";
+	import * as Select from "../../ui/select/index.js";
+	import { Button } from "../../ui/button/index.js";
+
+	interface Props<T> {
+		table: Table<T>;
+		canChangePageSize?: boolean;
+	}
+
+	let { table, canChangePageSize = false }: Props<T> = $props();
+</script>
+
+<div class="flex items-center justify-between p-2">
+	<div class="flex-1 text-sm text-muted-foreground">
+		{#if table.options.enableRowSelection}
+			{table.getFilteredSelectedRowModel().rows.length} of
+			{table.getFilteredRowModel().rows.length} row(s) selected.
+		{/if}
+	</div>
+	<div class="flex items-center space-x-6 lg:space-x-8">
+		<div class="flex items-center space-x-2">
+			{#if canChangePageSize}
+				<p class="text-sm font-medium">Rows per page</p>
+				<Select.Root
+					selected={{
+						value: table.getState().pagination.pageSize,
+						label: `${table.getState().pagination.pageSize}`,
+					}}
+					onSelectedChange={(selected) => {
+						table.setPageSize(Number(selected?.value));
+					}}
+				>
+					<Select.Trigger class="h-8 w-[70px]">
+						<Select.Value placeholder="Select page size" />
+					</Select.Trigger>
+					<Select.Content side="top">
+						{#each [10, 20, 30, 40, 50] as pageSize}
+							<Select.Item value={pageSize}>
+								{pageSize}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			{/if}
+		</div>
+		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
+			Page {table.getState().pagination.pageIndex + 1} of
+			{table.getPageCount()}
+		</div>
+		<div class="flex items-center space-x-2">
+			<Button
+				variant="outline"
+				class="hidden size-8 p-0 lg:flex"
+				on:click={() => table.setPageIndex(0)}
+				disabled={!table.getCanPreviousPage()}
+			>
+				<span class="sr-only">Go to first page</span>
+				<DoubleArrowLeft class="size-4" />
+			</Button>
+			<Button
+				variant="outline"
+				class="size-8 p-0"
+				on:click={() => table.previousPage()}
+				disabled={!table.getCanPreviousPage()}
+			>
+				<span class="sr-only">Go to previous page</span>
+				<ChevronLeft class="size-4" />
+			</Button>
+			<Button variant="outline" class="size-8 p-0" on:click={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+				<span class="sr-only">Go to next page</span>
+				<ChevronRight class="size-4" />
+			</Button>
+			<Button
+				variant="outline"
+				class="hidden size-8 p-0 lg:flex"
+				on:click={() => table.setPageIndex(table.getPageCount() - 1)}
+				disabled={!table.getCanNextPage()}
+			>
+				<span class="sr-only">Go to last page</span>
+				<DoubleArrowRight class="size-4" />
+			</Button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+import type { Table } from "@tanstack/svelte-table";
+declare class __sveltets_Render<T> {
+    props(): {
+        table: Table<T>;
+        canChangePageSize?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Pagination: $$IsomorphicComponent;
+type Pagination<T> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

package/dist/components/custom/data-table-new/VisibilitySelect.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="T">
+	import * as DropdownMenu from "../../ui/dropdown-menu";
+	import { Button } from "../../ui/button";
+	import { Settings2Icon } from "lucide-svelte";
+	import type { Table } from "@tanstack/svelte-table";
+
+	interface Props<T> {
+		table: Table<T>;
+	}
+
+	let { table }: Props<T> = $props();
+</script>
+
+<DropdownMenu.Root closeOnItemClick={false}>
+	<DropdownMenu.Trigger asChild let:builder>
+		<Button variant="outline" builders={[builder]} size="sm">
+			<Settings2Icon class="mr-2 h-4 w-4" /> View
+		</Button>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		{#each table.getAllLeafColumns() as column}
+			<DropdownMenu.CheckboxItem checked={column.getIsVisible()} onCheckedChange={() => column.toggleVisibility()}>
+				{column.id}
+			</DropdownMenu.CheckboxItem>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

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

@@ -0,0 +1,24 @@
+import type { Table } from "@tanstack/svelte-table";
+declare class __sveltets_Render<T> {
+    props(): {
+        table: Table<T>;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const VisibilitySelect: $$IsomorphicComponent;
+type VisibilitySelect<T> = InstanceType<typeof VisibilitySelect<T>>;
+export default VisibilitySelect;

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

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

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

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

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

@@ -0,0 +1,5 @@
+interface TableStoreProps {
+    isFullscreen: boolean;
+}
+export declare let tableStore: TableStoreProps;
+export {};

package/dist/components/custom/data-table-new/table.svelte.js

@@ -0,0 +1,3 @@
+export let tableStore = $state({
+    isFullscreen: false,
+});

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

@@ -1,4 +1,5 @@
 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,4 +1,5 @@
 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/ui/command/command-dialog.svelte.d.ts

@@ -0,0 +1,49 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CommandDialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    preventScroll?: boolean | undefined;
+    closeOnEscape?: boolean | undefined;
+    closeOnOutsideClick?: boolean | undefined;
+    onOutsideClick?: ((event: PointerEvent | MouseEvent | TouchEvent) => void) | undefined;
+    portal?: (HTMLElement | string | null) | undefined;
+    open?: ((boolean | undefined) & {}) | undefined;
+    onOpenChange?: import("bits-ui/dist/internal").OnChangeFn<boolean> | undefined;
+    openFocus?: import("bits-ui").FocusProp | undefined;
+    closeFocus?: import("bits-ui").FocusProp | undefined;
+} & {
+    state?: import("svelte/store").Writable<import("cmdk-sv").State> | undefined;
+    label?: string | undefined;
+    shouldFilter?: boolean | undefined;
+    filter?: ((value: string, search: string) => number) | undefined;
+    value?: string | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
+    loop?: boolean | undefined;
+    ids?: Partial<import("cmdk-sv").CommandIds> | undefined;
+} & import("cmdk-sv/dist/internal").HTMLDivAttributes & {
+    onKeydown?: (e: KeyboardEvent) => void;
+    asChild?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CommandDialog = InstanceType<typeof CommandDialog>;
+export default CommandDialog;

package/dist/components/ui/form/form-label.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Label as LabelPrimitive } from "bits-ui";
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const FormLabel: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<LabelPrimitive.Props, {
+    default: {
+        labelAttrs: import("svelte/store").Writable<import("formsnap").LabelAttrs>;
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        labelAttrs: import("svelte/store").Writable<import("formsnap").LabelAttrs>;
+    };
+}, {}, string>;
+type FormLabel = InstanceType<typeof FormLabel>;
+export default FormLabel;

package/dist/components/ui/pagination/pagination-link.svelte.d.ts

@@ -22,9 +22,9 @@ declare const PaginationLink: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_
 } & {
     asChild?: boolean | undefined;
     el?: HTMLButtonElement | undefined;
-} & (import("svelte/elements").HTMLButtonAttributes & Props & {
+} & (import("svelte/elements").HTMLButtonAttributes & (Props & {
     isActive: boolean;
-}), {
+})), {
     default: {};
 }>, {
     click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLDivElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.9.21",
+  "version": "0.9.22",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -29,50 +29,52 @@
     "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"
+    "zod": "^3.23.8",
+    "@tanstack/svelte-table": "^9.0.0-alpha.10"
   },
   "dependencies": {
     "@internationalized/date": "^3.5.5",
     "bits-ui": "^0.21.13",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
-    "embla-carousel-svelte": "8.2.1",
+    "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",
-    "svelte-sonner": "^0.3.27",
+    "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
     "vaul-svelte": "^0.3.2"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.26",
-    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.5.28",
+    "@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.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.6.0",
+    "@typescript-eslint/parser": "^8.6.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.43.0",
-    "happy-dom": "^15.7.3",
-    "lucide-svelte": "^0.439.0",
-    "postcss": "^8.4.45",
+    "eslint-plugin-svelte": "^2.44.0",
+    "happy-dom": "^15.7.4",
+    "lucide-svelte": "^0.441.0",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "publint": "^0.2.10",
+    "publint": "^0.2.11",
     "svelte": "^5.0.0-next.238",
-    "svelte-check": "^4.0.1",
-    "tailwindcss": "^3.4.10",
+    "svelte-check": "^4.0.2",
+    "tailwindcss": "^3.4.12",
     "tslib": "^2.7.0",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.3",
-    "vitest": "^2.0.5"
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
+    "vitest": "^2.1.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",