@kayord/ui 0.15.7 → 0.16.0

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

@@ -12,10 +12,10 @@
 	import { cn } from "../../../utils";
 	import { tableStore } from "./table.svelte";
 	import DataTableHeader from "./DataTableHeader.svelte";
+	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		table: TableType<T>;
-		columns: ColumnDef<T>[];
+		tableState: ShadTable<T>;
 		isLoading?: boolean;
 		header?: Snippet;
 		subHeader?: Snippet;
@@ -32,8 +32,7 @@
 	}
 
 	let {
-		table = $bindable(),
-		columns,
+		tableState = $bindable(),
 		isLoading = false,
 		header,
 		subHeader,
@@ -49,8 +48,8 @@
 		disableUISorting = false,
 	}: Props<T> = $props();
 
-	const isPaginationEnabled = table.options.getPaginationRowModel !== undefined;
-	const enableRowSelection = table.options.enableRowSelection;
+	const isPaginationEnabled = tableState.table.options.getPaginationRowModel !== undefined;
+	const enableRowSelection = tableState.table.options.enableRowSelection;
 
 	if (enableRowSelection) {
 		const rowSelectionColumn: ColumnDef<T> = {
@@ -58,8 +57,8 @@
 			// cell: (info) => "[]",
 			header: () =>
 				renderComponent(DataTableCheckbox, {
-					checked: table.getIsAllPageRowsSelected(),
-					onCheckedChange: () => table.toggleAllPageRowsSelected(),
+					checked: tableState.table.getIsAllPageRowsSelected(),
+					onCheckedChange: () => tableState.table.toggleAllPageRowsSelected(),
 				}),
 			cell: (r) =>
 				renderComponent(DataTableCheckbox, {
@@ -69,7 +68,7 @@
 			enableResizing: false,
 			enableSorting: false,
 		};
-		columns.unshift(rowSelectionColumn);
+		tableState.columns.unshift(rowSelectionColumn);
 	}
 </script>
 
@@ -97,7 +96,7 @@
 					{/if}
 					{#if enableVisibility}
 						<div>
-							<VisibilitySelect bind:table />
+							<VisibilitySelect bind:tableState />
 						</div>
 					{/if}
 					{#if enableFullscreen}
@@ -124,10 +123,10 @@
 		<Table.Root class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
-					{#each table.getHeaderGroups() as headerGroup, headerGroupIndex}
+					{#each tableState.table.getHeaderGroups() as headerGroup, headerGroupIndex}
 						<Table.Row>
 							{#each headerGroup.headers as header, headerIndex}
-								<DataTableHeader {headerGroupIndex} {headerIndex} bind:table {disableUISorting} />
+								<DataTableHeader {headerGroupIndex} {headerIndex} bind:tableState {disableUISorting} />
 							{/each}
 						</Table.Row>
 					{/each}
@@ -135,10 +134,10 @@
 			{/if}
 
 			<Table.Body>
-				{#if isLoading && table.getRowModel().rows.length == 0}
+				{#if isLoading && tableState.table.getRowModel().rows.length == 0}
 					{#each { length: 5 } as _, i}
 						<Table.Row>
-							{#each columns as _cell}
+							{#each tableState.columns as _cell}
 								<Table.Cell>
 									<Skeleton class="h-4" />
 								</Table.Cell>
@@ -146,14 +145,14 @@
 						</Table.Row>
 					{/each}
 				{:else}
-					{#if table.getRowModel().rows.length == 0}
+					{#if tableState.table.getRowModel().rows.length == 0}
 						<Table.Row>
-							<Table.Cell colspan={table.getAllColumns().length}>
+							<Table.Cell colspan={tableState.table.getAllColumns().length}>
 								<div class="text-center">{noDataMessage}</div>
 							</Table.Cell>
 						</Table.Row>
 					{/if}
-					{#each table.getRowModel().rows as row}
+					{#each tableState.table.getRowModel().rows as row}
 						<Table.Row data-state={row.getIsSelected() && "selected"}>
 							{#each row.getVisibleCells() as cell}
 								<Table.Cell
@@ -174,7 +173,7 @@
 		{/if}
 	</div>
 	{#if isPaginationEnabled}
-		<Pagination bind:table />
+		<Pagination bind:tableState />
 	{/if}
 
 	{#if footer}

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

@@ -1,8 +1,7 @@
-import { type ColumnDef, type Table as TableType } from "@tanstack/table-core";
 import type { Snippet } from "svelte";
+import type { ShadTable } from "./shad-table.svelte";
 interface Props<T> {
-    table: TableType<T>;
-    columns: ColumnDef<T>[];
+    tableState: ShadTable<T>;
     isLoading?: boolean;
     header?: Snippet;
     subHeader?: Snippet;
@@ -21,7 +20,7 @@ declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "table";
+    bindings(): "tableState";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -2,19 +2,22 @@
 	import { FlexRender, Table } from "../../..";
 	import { type Header, type Table as TypeType } from "@tanstack/table-core";
 	import { ArrowUpDownIcon, ArrowDownIcon, ArrowUpIcon } from "@lucide/svelte";
+	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
 		headerGroupIndex: number;
 		headerIndex: number;
-		table: TypeType<T>;
+		tableState: ShadTable<T>;
 		disableUISorting?: boolean;
 	}
 
-	let { headerGroupIndex, headerIndex, table = $bindable(), disableUISorting = false }: Props<T> = $props();
+	let { headerGroupIndex, headerIndex, tableState = $bindable(), disableUISorting = false }: Props<T> = $props();
 
-	const isSortingEnabled = $derived(table.options.getSortedRowModel !== undefined && disableUISorting !== true);
+	const isSortingEnabled = $derived(
+		tableState.table.options.getSortedRowModel !== undefined && disableUISorting !== true
+	);
 
-	const header = table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
+	const header = tableState.table.getHeaderGroups()[headerGroupIndex].headers[headerIndex];
 </script>
 
 <Table.Head

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

@@ -1,15 +1,15 @@
-import { type Table as TypeType } from "@tanstack/table-core";
+import type { ShadTable } from "./shad-table.svelte";
 interface Props<T> {
     headerGroupIndex: number;
     headerIndex: number;
-    table: TypeType<T>;
+    tableState: ShadTable<T>;
     disableUISorting?: boolean;
 }
 declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "table";
+    bindings(): "tableState";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -5,22 +5,23 @@
 	import DoubleArrowLeft from "@lucide/svelte/icons/arrow-left";
 	import DoubleArrowRight from "@lucide/svelte/icons/arrow-right";
 	import { Select, Button } from "../../..";
+	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		table: Table<T>;
+		tableState: ShadTable<T>;
 		canChangePageSize?: boolean;
 	}
 
-	let { table = $bindable(), canChangePageSize = false }: Props<T> = $props();
+	let { tableState = $bindable(), canChangePageSize = false }: Props<T> = $props();
 
-	let value = $state(table.getState().pagination.pageSize.toString());
+	let value = $state(tableState.table.getState().pagination.pageSize.toString());
 </script>
 
 <div class="flex items-center justify-between py-2">
 	<div class="text-muted-foreground flex-1 text-sm">
-		{#if table.options.enableRowSelection}
-			{table.getFilteredSelectedRowModel().rows.length} of
-			{table.getFilteredRowModel().rows.length} row(s) selected.
+		{#if tableState.table.options.enableRowSelection}
+			{tableState.table.getFilteredSelectedRowModel().rows.length} of
+			{tableState.table.getFilteredRowModel().rows.length} row(s) selected.
 		{/if}
 	</div>
 	<div class="flex items-center space-x-6 lg:space-x-8">
@@ -31,7 +32,7 @@
 					type="single"
 					bind:value
 					onValueChange={(value) => {
-						table.setPageSize(Number(value));
+						tableState.table.setPageSize(Number(value));
 					}}
 				>
 					<Select.Trigger class="h-8 w-[70px]">Select page size</Select.Trigger>
@@ -46,15 +47,15 @@
 			{/if}
 		</div>
 		<div class="flex w-[100px] items-center justify-center text-sm font-medium">
-			Page {table.getState().pagination.pageIndex + 1} of
-			{table.getPageCount()}
+			Page {tableState.table.getState().pagination.pageIndex + 1} of
+			{tableState.table.getPageCount()}
 		</div>
 		<div class="flex items-center space-x-2">
 			<Button
 				variant="outline"
 				class="hidden size-8 p-0 lg:flex"
-				onclick={() => table.setPageIndex(0)}
-				disabled={!table.getCanPreviousPage()}
+				onclick={() => tableState.table.setPageIndex(0)}
+				disabled={!tableState.table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to first page</span>
 				<DoubleArrowLeft class="size-4" />
@@ -62,21 +63,26 @@
 			<Button
 				variant="outline"
 				class="size-8 p-0"
-				onclick={() => table.previousPage()}
-				disabled={!table.getCanPreviousPage()}
+				onclick={() => tableState.table.previousPage()}
+				disabled={!tableState.table.getCanPreviousPage()}
 			>
 				<span class="sr-only">Go to previous page</span>
 				<ChevronLeft class="size-4" />
 			</Button>
-			<Button variant="outline" class="size-8 p-0" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+			<Button
+				variant="outline"
+				class="size-8 p-0"
+				onclick={() => tableState.table.nextPage()}
+				disabled={!tableState.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"
-				onclick={() => table.setPageIndex(table.getPageCount() - 1)}
-				disabled={!table.getCanNextPage()}
+				onclick={() => tableState.table.setPageIndex(tableState.table.getPageCount() - 1)}
+				disabled={!tableState.table.getCanNextPage()}
 			>
 				<span class="sr-only">Go to last page</span>
 				<DoubleArrowRight class="size-4" />

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

@@ -1,13 +1,13 @@
-import type { Table } from "@tanstack/table-core";
+import type { ShadTable } from "./shad-table.svelte";
 interface Props<T> {
-    table: Table<T>;
+    tableState: ShadTable<T>;
     canChangePageSize?: boolean;
 }
 declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "table";
+    bindings(): "tableState";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -2,13 +2,13 @@
 	import * as DropdownMenu from "../../ui/dropdown-menu";
 	import { Button } from "../../ui/button";
 	import { Settings2Icon } from "@lucide/svelte";
-	import type { Table } from "@tanstack/table-core";
+	import type { ShadTable } from "./shad-table.svelte";
 
 	interface Props<T> {
-		table: Table<T>;
+		tableState: ShadTable<T>;
 	}
 
-	let { table = $bindable() }: Props<T> = $props();
+	let { tableState = $bindable() }: Props<T> = $props();
 </script>
 
 <DropdownMenu.Root>
@@ -20,7 +20,7 @@
 	<DropdownMenu.Content>
 		<DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
 		<DropdownMenu.Separator />
-		{#each table.getAllLeafColumns() as column}
+		{#each tableState.table.getAllLeafColumns() as column}
 			<DropdownMenu.CheckboxItem checked={column.getIsVisible()} onCheckedChange={() => column.toggleVisibility()}>
 				{column.id}
 			</DropdownMenu.CheckboxItem>

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

@@ -1,12 +1,12 @@
-import type { Table } from "@tanstack/table-core";
+import type { ShadTable } from "./shad-table.svelte";
 interface Props<T> {
-    table: Table<T>;
+    tableState: ShadTable<T>;
 }
 declare class __sveltets_Render<T> {
     props(): Props<T>;
     events(): {};
     slots(): {};
-    bindings(): "table";
+    bindings(): "tableState";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.15.7",
+  "version": "0.16.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,30 +47,30 @@
   },
   "devDependencies": {
     "@lucide/svelte": "^0.483.0",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.20.1",
+    "@sveltejs/adapter-auto": "^5.0.0",
+    "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.0.14",
+    "@tailwindcss/vite": "^4.0.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.7",
-    "@typescript-eslint/eslint-plugin": "^8.26.1",
-    "@typescript-eslint/parser": "^8.26.1",
-    "eslint": "^9.22.0",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.2",
+    "eslint-plugin-svelte": "^3.3.3",
     "happy-dom": "^17.4.4",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.9",
-    "svelte": "^5.23.2",
+    "svelte": "^5.25.3",
     "svelte-check": "^4.1.5",
-    "tailwindcss": "^4.0.14",
+    "tailwindcss": "^4.0.15",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.2.4",
     "typescript": "^5.8.2",
-    "vite": "^6.2.2",
+    "vite": "^6.2.3",
     "vitest": "^3.0.9",
     "zod": "^3.24.2"
   },
@@ -78,7 +78,7 @@
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "type": "module",
-  "packageManager": "pnpm@10.6.3+sha512.bb45e34d50a9a76e858a95837301bfb6bd6d35aea2c5d52094fa497a467c43f5c440103ce2511e9e0a2f89c3d6071baac3358fc68ac6fb75e2ceb3d2736065e6",
+  "packageManager": "pnpm@10.6.5+sha512.cdf928fca20832cd59ec53826492b7dc25dc524d4370b6b4adbf65803d32efaa6c1c88147c0ae4e8d579a6c9eec715757b50d4fa35eea179d868eada4ed043af",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",