@kayord/ui 0.9.22 → 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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.9.22",
+  "version": "0.10.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,11 +26,11 @@
     "!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",
@@ -41,7 +41,6 @@
     "formsnap": "^1.0.1",
     "mode-watcher": "^0.4.1",
     "paneforge": "^0.0.5",
-    "svelte-headless-table": "^0.18.2",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",

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/DataTablePagination.svelte.d.ts

@@ -1,25 +0,0 @@
-import type { TableViewModel } from "svelte-headless-table";
-declare class __sveltets_Render<T> {
-    props(): {
-        tableModel: TableViewModel<T, AnyPlugins>;
-        showRowsPerPage?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): string;
-    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 DataTablePagination: $$IsomorphicComponent;
-type DataTablePagination<T> = InstanceType<typeof DataTablePagination<T>>;
-export default DataTablePagination;

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",
-    },
-];

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

@@ -1,176 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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/index.d.ts

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

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

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