@kayord/ui 0.9.21 → 0.10.0

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,36 @@
-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;
+    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']> & {
+    <T>(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']>;
     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,4 +1,3 @@
-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;
@@ -13,9 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const DataTableCheckbox: $$__sveltets_2_IsomorphicComponent<Omit<import("bits-ui").CheckboxProps, "checked"> & {
-    checked: Writable<boolean>;
+    checked?: boolean | "indeterminate";
+    class?: string;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type DataTableCheckbox = InstanceType<typeof DataTableCheckbox>;
 export default DataTableCheckbox;

package/dist/components/custom/data-table/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/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/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/{DataTablePagination.svelte.d.ts → Pagination.svelte.d.ts}

@@ -1,14 +1,14 @@
-import type { TableViewModel } from "svelte-headless-table";
+import type { Table } from "@tanstack/svelte-table";
 declare class __sveltets_Render<T> {
     props(): {
-        tableModel: TableViewModel<T, AnyPlugins>;
-        showRowsPerPage?: boolean;
+        table: Table<T>;
+        canChangePageSize?: boolean;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): string;
+    bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
@@ -20,6 +20,6 @@ interface $$IsomorphicComponent {
     }): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const DataTablePagination: $$IsomorphicComponent;
-type DataTablePagination<T> = InstanceType<typeof DataTablePagination<T>>;
-export default DataTablePagination;
+declare const Pagination: $$IsomorphicComponent;
+type Pagination<T> = InstanceType<typeof Pagination<T>>;
+export default Pagination;

package/dist/components/custom/data-table/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/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/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/data-table/table.svelte.d.ts

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

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

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

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.10.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,6 +26,7 @@
     "!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",
@@ -36,43 +37,43 @@
     "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",

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

@@ -1,77 +0,0 @@
-<script lang="ts" generics="T">
-	import { Button, Select } from "../../..";
-	import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "lucide-svelte";
-	import type { TableViewModel } from "svelte-headless-table";
-	import type { AnyPlugins } from "svelte-headless-table/plugins";
-
-	export let tableModel: TableViewModel<T, AnyPlugins>;
-	export let showRowsPerPage: boolean = false;
-
-	const { pageRows, pluginStates, rows } = tableModel;
-
-	const { hasNextPage, hasPreviousPage, pageIndex, pageCount, pageSize } = pluginStates.page;
-</script>
-
-<div class="flex items-center justify-end space-x-6 px-2 lg:space-x-8">
-	{#if showRowsPerPage}
-		<div class="flex items-center space-x-2">
-			<p class="text-sm font-medium">Rows per page</p>
-			<Select.Root
-				onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
-				selected={{ value: 10, label: "10" }}
-			>
-				<Select.Trigger class="h-8 w-[70px]">
-					<Select.Value placeholder="Select page size" />
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Item value="10">10</Select.Item>
-					<Select.Item value="20">20</Select.Item>
-					<Select.Item value="30">30</Select.Item>
-					<Select.Item value="40">40</Select.Item>
-					<Select.Item value="50">50</Select.Item>
-				</Select.Content>
-			</Select.Root>
-		</div>
-	{/if}
-	<div class="flex w-[100px] items-center justify-center text-sm font-medium">
-		Page {$pageIndex + 1} of {$pageCount}
-	</div>
-	<div class="flex items-center space-x-2">
-		<Button
-			variant="outline"
-			class="hidden h-8 w-8 p-0 lg:flex"
-			on:click={() => ($pageIndex = 0)}
-			disabled={!$hasPreviousPage}
-		>
-			<span class="sr-only">Go to first page</span>
-			<ChevronsLeftIcon size={15} />
-		</Button>
-		<Button
-			variant="outline"
-			class="h-8 w-8 p-0"
-			on:click={() => ($pageIndex = $pageIndex - 1)}
-			disabled={!$hasPreviousPage}
-		>
-			<span class="sr-only">Go to previous page</span>
-			<ChevronLeftIcon size={15} />
-		</Button>
-		<Button
-			variant="outline"
-			class="h-8 w-8 p-0"
-			disabled={!$hasNextPage}
-			on:click={() => ($pageIndex = $pageIndex + 1)}
-		>
-			<span class="sr-only">Go to next page</span>
-			<ChevronRightIcon size={15} />
-		</Button>
-		<Button
-			variant="outline"
-			class="hidden h-8 w-8 p-0 lg:flex"
-			disabled={!$hasNextPage}
-			on:click={() => ($pageIndex = Math.ceil($rows.length / $pageRows.length) - 1)}
-		>
-			<span class="sr-only">Go to last page</span>
-			<ChevronsRightIcon size={15} />
-		</Button>
-	</div>
-</div>

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

@@ -1,7 +0,0 @@
-export type Payment = {
-    id: string;
-    amount: number;
-    status: "pending" | "processing" | "success" | "failed";
-    email: string;
-};
-export declare const data: Array<Payment>;

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

@@ -1,410 +0,0 @@
-export const data = [
-    {
-        id: "6571688d9f0abce385f90f19",
-        amount: 3251.85,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d16c5c39d87365775",
-        amount: 3990.8,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dabee1f8960a07e79",
-        amount: 3802.42,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d806e36ee570c326c",
-        amount: 3823.47,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688ddcf972ded016aeca",
-        amount: 3355.74,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688da322842d9f5b675e",
-        amount: 2530.82,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d810ec3fcb8e66c50",
-        amount: 1056.29,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d84b2863f0550c31e",
-        amount: 1319.59,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688de4d06ba36da0b2b1",
-        amount: 2289.99,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dd3d4930e83e980bb",
-        amount: 1511.24,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d9b2850305cbf9806",
-        amount: 1819.05,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d0e2c8d403d9415a0",
-        amount: 1951.76,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688df69ff77326a893f5",
-        amount: 2148.92,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688deccddaa29de2f440",
-        amount: 2012.9,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d448edf3bbdbc5c75",
-        amount: 1943.19,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d81dd591cf6938d1b",
-        amount: 3879.18,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d8f6e9c3423e785b7",
-        amount: 2079.08,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d84bfe2b4524cef0c",
-        amount: 2327.12,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d0c506227be2ed29e",
-        amount: 3005.73,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d3558512f453741e5",
-        amount: 3759.09,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d861e5902ca9c81ce",
-        amount: 1348.46,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dd14ec6fb48d51555",
-        amount: 2155.21,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688ddab7f441f3b3b707",
-        amount: 2456.19,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d5e9513b4e88c2d22",
-        amount: 2923.2,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d516b86893e68018c",
-        amount: 3191.41,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688ddb067254dac9ab2b",
-        amount: 3847.64,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d39328a179413e29a",
-        amount: 3104.91,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d41c9c2a44423f21e",
-        amount: 2295.64,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dbe4e3344e7095a5f",
-        amount: 1036.06,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688df832d2beefc2d4b8",
-        amount: 3391.3,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d27d143c06cf7d538",
-        amount: 3109.48,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688df2823cc7272da879",
-        amount: 3822.19,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688de4eb5e94cf60bcd2",
-        amount: 2526.2,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688df199424fd086ff48",
-        amount: 3775.85,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d70ecf0e6272da909",
-        amount: 3522.49,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d6d31ec3cb133046b",
-        amount: 1738.86,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d0e957b5f897ed8ce",
-        amount: 3362.06,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d06d065921d92c32e",
-        amount: 1311.72,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d45b2c5e27d04cf40",
-        amount: 3831.03,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d2cbf8c51474eb602",
-        amount: 1850.78,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d16290d3f20d4daee",
-        amount: 1732.43,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dcda116e6798d4bae",
-        amount: 3852.99,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d5996339d8c18205b",
-        amount: 2717.96,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d7a3f16b9aec84fa6",
-        amount: 2731.06,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d97b853eb9d7736ac",
-        amount: 1856.39,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d1d714ee82c096662",
-        amount: 2853.75,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688dfe47c72110657d3b",
-        amount: 2532.9,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d3e4ce96490c3bad6",
-        amount: 2962.35,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d77af0b83c0d3f7c6",
-        amount: 3024.45,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d3e1920bb93ac12a2",
-        amount: 2292.58,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d2183f305b6cbed72",
-        amount: 1820.61,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688da48439ee80d276cd",
-        amount: 2544.19,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d15c1368942e23e3a",
-        amount: 2054.55,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d0170dc46f4fcbfe6",
-        amount: 3567.82,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d3c68bef4bca4c670",
-        amount: 2842.55,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d09de886493b05ee0",
-        amount: 3123.12,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d2c572aaa292b6c3f",
-        amount: 1849.11,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d6e4d00a58e20c090",
-        amount: 1010.01,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688df71c1c1f9b472f68",
-        amount: 2064.62,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688de159964144606d23",
-        amount: 1073.91,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d6fe0fa01f2d75bdf",
-        amount: 2239.24,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688de6d27c9852528f3f",
-        amount: 2447.85,
-        status: "success",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d40ae4820a039d25e",
-        amount: 2019.19,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d5da2eb24dc22673f",
-        amount: 1115.44,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d39c99eb24989b518",
-        amount: 3345.75,
-        status: "failed",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d6884c37efcca0e29",
-        amount: 2341.32,
-        status: "processing",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d1ed1c61ba1d4fc93",
-        amount: 2288.04,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-    {
-        id: "6571688d19b99bb0bcff11bd",
-        amount: 1493.28,
-        status: "pending",
-        email: "booneellis@hydrocom.com",
-    },
-];