negodesign 0.0.70 → 0.0.72

package/dist/components/ui/collapsible/collapsible.svelte

@@ -1,11 +1,67 @@
+<script lang="ts" module>
+	import { getContext, setContext } from "svelte";
+
+	export type CollapsibleContext = {
+		get open(): boolean;
+		get disabled(): boolean;
+		toggle: () => void;
+	};
+
+	const COLLAPSIBLE_CONTEXT_KEY = "scn-collapsible";
+
+	export function setCollapsibleContext(ctx: CollapsibleContext): CollapsibleContext {
+		return setContext(COLLAPSIBLE_CONTEXT_KEY, ctx);
+	}
+
+	export function useCollapsibleContext(): CollapsibleContext {
+		return getContext<CollapsibleContext>(COLLAPSIBLE_CONTEXT_KEY);
+	}
+</script>
+
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
 
 	let {
-		ref = $bindable(null),
-		open = $bindable(false),
-		...restProps
-	}: CollapsiblePrimitive.RootProps = $props();
+		defaultOpen = false,
+		open = $bindable(defaultOpen),
+		disabled = false,
+		class: className,
+		children,
+		child,
+	}: {
+		defaultOpen?: boolean;
+		open?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: Snippet<[{ props: Record<string, unknown> }]>;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+	}
+
+	setCollapsibleContext({
+		get open() {
+			return open;
+		},
+		get disabled() {
+			return disabled;
+		},
+		toggle
+	});
+
+	const rootProps = $derived({
+		"data-slot": "collapsible",
+		"data-state": open ? "open" : "closed",
+		class: cn("group/collapsible", className)
+	});
 </script>
 
-<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
+{#if child}
+	{@render child({ props: rootProps })}
+{:else}
+	{@render children?.({ props: rootProps })}
+{/if}

package/dist/components/ui/collapsible/collapsible.svelte.d.ts

@@ -1,4 +1,23 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const Collapsible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+export type CollapsibleContext = {
+    get open(): boolean;
+    get disabled(): boolean;
+    toggle: () => void;
+};
+export declare function setCollapsibleContext(ctx: CollapsibleContext): CollapsibleContext;
+export declare function useCollapsibleContext(): CollapsibleContext;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    defaultOpen?: boolean;
+    open?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const Collapsible: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Collapsible = ReturnType<typeof Collapsible>;
 export default Collapsible;

package/dist/components/ui/data-table/data-table.svelte.d.ts

@@ -1,40 +1,2 @@
-import { type RowData, type TableOptions } from "@tanstack/table-core";
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
-type MaybeThunk<T extends object> = T | (() => T | null | undefined);
-type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
-/**
- * Lazily merges several objects (or thunks) while preserving
- * getter semantics from every source.
- *
- * Proxy-based to avoid known WebKit recursion issue.
- */
-export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
-    [K in keyof Sources]: Sources[K];
-}>;
-export {};
+export { createSvelteTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "./table-core.svelte.js";
+export type { Cell, CellContext, Column, ColumnDef, ColumnDefTemplate, ColumnFiltersState, HeaderContext, PaginationState, Row, RowModel, RowSelectionState, SortingState, SvelteTableOptions, Table, TableState, Updater, VisibilityState, } from "./table-core.svelte.js";

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

@@ -1,110 +1 @@
-import { createTable, } from "@tanstack/table-core";
-/**
- * Creates a reactive TanStack table object for Svelte.
- * @param options Table options to create the table with.
- * @returns A reactive table object.
- * @example
- * ```svelte
- * <script>
- *   const table = createSvelteTable({ ... })
- * </script>
- *
- * <table>
- *   <thead>
- *     {#each table.getHeaderGroups() as headerGroup}
- *       <tr>
- *         {#each headerGroup.headers as header}
- *           <th colspan={header.colSpan}>
- *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
- *         	 </th>
- *         {/each}
- *       </tr>
- *     {/each}
- *   </thead>
- * 	 <!-- ... -->
- * </table>
- * ```
- */
-export function createSvelteTable(options) {
-    const resolvedOptions = mergeObjects({
-        state: {},
-        onStateChange() { },
-        renderFallbackValue: null,
-        mergeOptions: (defaultOptions, options) => {
-            return mergeObjects(defaultOptions, options);
-        },
-    }, options);
-    const table = createTable(resolvedOptions);
-    let state = $state(table.initialState);
-    function updateOptions() {
-        table.setOptions(() => {
-            return mergeObjects(resolvedOptions, options, {
-                state: mergeObjects(state, options.state || {}),
-                onStateChange: (updater) => {
-                    if (updater instanceof Function)
-                        state = updater(state);
-                    else
-                        state = mergeObjects(state, updater);
-                    options.onStateChange?.(updater);
-                },
-            });
-        });
-    }
-    updateOptions();
-    $effect.pre(() => {
-        updateOptions();
-    });
-    return table;
-}
-/**
- * Lazily merges several objects (or thunks) while preserving
- * getter semantics from every source.
- *
- * Proxy-based to avoid known WebKit recursion issue.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function mergeObjects(...sources) {
-    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
-    const findSourceWithKey = (key) => {
-        for (let i = sources.length - 1; i >= 0; i--) {
-            const obj = resolve(sources[i]);
-            if (obj && key in obj)
-                return obj;
-        }
-        return undefined;
-    };
-    return new Proxy(Object.create(null), {
-        get(_, key) {
-            const src = findSourceWithKey(key);
-            return src?.[key];
-        },
-        has(_, key) {
-            return !!findSourceWithKey(key);
-        },
-        ownKeys() {
-            // eslint-disable-next-line svelte/prefer-svelte-reactivity
-            const all = new Set();
-            for (const s of sources) {
-                const obj = resolve(s);
-                if (obj) {
-                    for (const k of Reflect.ownKeys(obj)) {
-                        all.add(k);
-                    }
-                }
-            }
-            return [...all];
-        },
-        getOwnPropertyDescriptor(_, key) {
-            const src = findSourceWithKey(key);
-            if (!src)
-                return undefined;
-            return {
-                configurable: true,
-                enumerable: true,
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                value: src[key],
-                writable: true,
-            };
-        },
-    });
-}
+export { createSvelteTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "./table-core.svelte.js";

package/dist/components/ui/data-table/flex-render.svelte

@@ -2,15 +2,15 @@
 	lang="ts"
 	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
 >
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "./table-core.svelte.js";
 	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
 	import type { Attachment } from "svelte/attachments";
 	type Props = {
 		/** The cell or header field of the current cell's column definition. */
-		content?: TContext extends HeaderContext<TData, TValue>
-			? ColumnDefTemplate<HeaderContext<TData, TValue>>
-			: TContext extends CellContext<TData, TValue>
-				? ColumnDefTemplate<CellContext<TData, TValue>>
+		content?: TContext extends CellContext<TData, TValue>
+			? ColumnDefTemplate<CellContext<TData, TValue>>
+			: TContext extends HeaderContext<TData, TValue>
+				? ColumnDefTemplate<HeaderContext<TData, TValue>>
 				: never;
 		/** The result of the `getContext()` function of the header or cell */
 		context: TContext;

package/dist/components/ui/data-table/flex-render.svelte.d.ts

@@ -1,9 +1,9 @@
-import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+import type { CellContext, ColumnDefTemplate, HeaderContext } from "./table-core.svelte.js";
 import type { Attachment } from "svelte/attachments";
 declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
     props: {
         /** The cell or header field of the current cell's column definition. */
-        content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;
+        content?: TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : never;
         /** The result of the `getContext()` function of the header or cell */
         context: TContext;
         /** Used to pass attachments that can't be gotten through context */

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

@@ -1,3 +1,4 @@
 export { default as FlexRender } from "./flex-render.svelte";
 export { renderComponent, renderSnippet } from "./render-helpers.js";
-export { createSvelteTable } from "./data-table.svelte.js";
+export { createSvelteTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "./data-table.svelte.js";
+export type { Cell, CellContext, Column, ColumnDef, ColumnDefTemplate, ColumnFiltersState, HeaderContext, PaginationState, Row, RowModel, RowSelectionState, SortingState, Table, TableState, Updater, VisibilityState, } from "./table-core.svelte.js";

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

@@ -1,3 +1,3 @@
 export { default as FlexRender } from "./flex-render.svelte";
 export { renderComponent, renderSnippet } from "./render-helpers.js";
-export { createSvelteTable } from "./data-table.svelte.js";
+export { createSvelteTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "./data-table.svelte.js";

package/dist/components/ui/data-table/table-core.svelte.d.ts

@@ -0,0 +1,117 @@
+export type Updater<T> = T | ((prev: T) => T);
+export type SortingState = {
+    id: string;
+    desc: boolean;
+}[];
+export type ColumnFiltersState = {
+    id: string;
+    value: unknown;
+}[];
+export type RowSelectionState = Record<string, boolean>;
+export type PaginationState = {
+    pageIndex: number;
+    pageSize: number;
+};
+export type VisibilityState = Record<string, boolean>;
+export type TableState = {
+    sorting: SortingState;
+    pagination: PaginationState;
+    columnVisibility: VisibilityState;
+    rowSelection: RowSelectionState;
+    columnFilters: ColumnFiltersState;
+};
+export type ColumnDefTemplate<TProps extends object> = string | ((props: TProps) => unknown) | null;
+export type ColumnDef<T, Value = unknown> = {
+    id?: string;
+    accessorKey?: string;
+    header?: ColumnDefTemplate<HeaderContext<T, Value>>;
+    cell?: ColumnDefTemplate<CellContext<T, Value>>;
+    size?: number;
+    minSize?: number;
+    enableSorting?: boolean;
+    enableHiding?: boolean;
+};
+export type Column<T, Value = unknown> = {
+    id: string;
+    columnDef: ColumnDef<T, Value>;
+    getCanHide(): boolean;
+    getIsVisible(): boolean;
+    toggleVisibility(value: boolean): void;
+    getFilterValue(): unknown;
+    setFilterValue(value: unknown): void;
+};
+export type Cell<T, Value = unknown> = {
+    id: string;
+    column: Column<T, Value>;
+    getContext(): CellContext<T, Value>;
+};
+export type Row<T> = {
+    id: string;
+    original: T;
+    getIsSelected(): boolean;
+    toggleSelected(value?: boolean): void;
+    getVisibleCells(): Cell<T>[];
+};
+export type CellContext<T, Value = unknown> = {
+    row: Row<T>;
+    cell?: Cell<T, Value>;
+    column: Column<T, Value>;
+    table: Table<T>;
+    getValue: () => Value;
+    renderValue: () => Value;
+};
+export type HeaderContext<T, Value = unknown> = {
+    column: Column<T, Value>;
+    header?: unknown;
+    table: Table<T>;
+};
+export type RowModel<T> = {
+    rows: Row<T>[];
+};
+export type Table<T> = {
+    getHeaderGroups(): {
+        id: string;
+        headers: {
+            id: string;
+            isPlaceholder: boolean;
+            column: Column<T>;
+            getContext(): HeaderContext<T>;
+        }[];
+    }[];
+    getRowModel(): RowModel<T>;
+    getFilteredRowModel(): RowModel<T>;
+    getFilteredSelectedRowModel(): RowModel<T>;
+    getSelectedRowModel(): RowModel<T>;
+    getAllColumns(): Column<T>[];
+    getColumn(id: string): Column<T> | undefined;
+    getIsAllPageRowsSelected(): boolean;
+    getIsSomePageRowsSelected(): boolean;
+    toggleAllPageRowsSelected(value?: boolean): void;
+    toggleAllRowsSelected(value?: boolean): void;
+    getCanPreviousPage(): boolean;
+    getCanNextPage(): boolean;
+    previousPage(): void;
+    nextPage(): void;
+    setPageIndex(index: number): void;
+    getState(): TableState;
+};
+export type SvelteTableOptions<T> = {
+    data: T[];
+    columns: ColumnDef<T>[];
+    state?: Partial<TableState>;
+    onSortingChange?: Updater<SortingState>;
+    onPaginationChange?: Updater<PaginationState>;
+    onColumnVisibilityChange?: Updater<VisibilityState>;
+    onRowSelectionChange?: Updater<RowSelectionState>;
+    onColumnFiltersChange?: Updater<ColumnFiltersState>;
+    getCoreRowModel?: unknown;
+    getSortedRowModel?: unknown;
+    getFilteredRowModel?: unknown;
+    getPaginationRowModel?: unknown;
+    getRowId?: (original: T) => string;
+};
+export declare function createSvelteTable<T>(options: SvelteTableOptions<T>): Table<T>;
+export declare function getCoreRowModel<T>(): () => unknown;
+export declare function getSortedRowModel<T>(): () => unknown;
+export declare function getFilteredRowModel<T>(): () => unknown;
+export declare function getPaginationRowModel<T>(): () => unknown;

package/dist/components/ui/data-table/table-core.svelte.js

@@ -0,0 +1,260 @@
+export function createSvelteTable(options) {
+    const tableState = $state({
+        sorting: [],
+        pagination: { pageIndex: 0, pageSize: 10 },
+        columnVisibility: {},
+        rowSelection: {},
+        columnFilters: [],
+    });
+    const stateHandlers = {
+        sorting: options.onSortingChange,
+        pagination: options.onPaginationChange,
+        columnVisibility: options.onColumnVisibilityChange,
+        rowSelection: options.onRowSelectionChange,
+        columnFilters: options.onColumnFiltersChange,
+    };
+    function readState(key) {
+        const s = options.state;
+        if (s && key in s)
+            return s[key];
+        return tableState[key];
+    }
+    function updateState(key, updater) {
+        const next = typeof updater === "function"
+            ? updater(readState(key))
+            : updater;
+        tableState[key] = next;
+        const handler = stateHandlers[key];
+        if (typeof handler === "function")
+            handler(updater);
+    }
+    function getColumnId(def, index) {
+        return (def.id ?? def.accessorKey ?? `col_${index}`);
+    }
+    function getAccessorValue(original, def) {
+        if (def.accessorKey != null)
+            return original[def.accessorKey];
+        return undefined;
+    }
+    function makeColumn(def, colId) {
+        return {
+            id: colId,
+            columnDef: def,
+            getCanHide() {
+                return def.enableHiding !== false;
+            },
+            getIsVisible() {
+                return readState("columnVisibility")[colId] !== false;
+            },
+            toggleVisibility(value) {
+                updateState("columnVisibility", (prev) => ({ ...prev, [colId]: value }));
+            },
+            getFilterValue() {
+                const filter = readState("columnFilters").find((f) => f.id === colId);
+                return filter?.value;
+            },
+            setFilterValue(value) {
+                updateState("columnFilters", (prev) => {
+                    const next = prev.filter((f) => f.id !== colId);
+                    if (value !== undefined)
+                        next.push({ id: colId, value });
+                    return next;
+                });
+            },
+        };
+    }
+    function makeCell(rowId, original, column, row, table) {
+        const id = `row_${rowId}_cell_${String(column.id)}`;
+        const cellObj = {
+            id,
+            column,
+            getContext() {
+                return {
+                    row,
+                    cell: cellObj,
+                    column,
+                    table,
+                    getValue: () => getAccessorValue(original, column.columnDef),
+                    renderValue: () => getAccessorValue(original, column.columnDef),
+                };
+            },
+        };
+        return cellObj;
+    }
+    function makeRow(index, original, table) {
+        const rowId = getRowId(index, original);
+        const rowObj = {
+            id: rowId,
+            original,
+            getIsSelected() {
+                return readState("rowSelection")[rowId] === true;
+            },
+            toggleSelected(value) {
+                updateState("rowSelection", (prev) => {
+                    const next = value ?? !(prev[rowId] === true);
+                    return { ...prev, [rowId]: next };
+                });
+            },
+            getVisibleCells() {
+                return getVisibleColumns().map((column) => makeCell(rowId, original, column, rowObj, table));
+            },
+        };
+        return rowObj;
+    }
+    function getRowId(index, original) {
+        if (options.getRowId)
+            return String(options.getRowId(original));
+        for (const def of options.columns) {
+            if (def.accessorKey != null) {
+                const value = original[def.accessorKey];
+                if (value != null)
+                    return String(value);
+            }
+        }
+        return String(index);
+    }
+    function getAllColumns() {
+        return options.columns.map((def, index) => makeColumn(def, getColumnId(def, index)));
+    }
+    function getColumn(id) {
+        return getAllColumns().find((column) => column.id === id);
+    }
+    function getVisibleColumns() {
+        return getAllColumns().filter((column) => column.getIsVisible());
+    }
+    function getAllRows() {
+        return options.data.map((original, index) => makeRow(index, original, table));
+    }
+    function applyFilters(rows) {
+        const filters = readState("columnFilters");
+        if (!filters.length)
+            return rows;
+        return rows.filter((row) => filters.every((filter) => {
+            const column = getColumn(filter.id);
+            if (!column || column.columnDef.accessorKey == null)
+                return true;
+            const value = getAccessorValue(row.original, column.columnDef);
+            return String(value ?? "")
+                .toLowerCase()
+                .includes(String(filter.value).toLowerCase());
+        }));
+    }
+    function applySorting(rows) {
+        const sorting = readState("sorting");
+        if (!sorting.length)
+            return rows;
+        const sort = sorting[0];
+        const column = getColumn(sort.id);
+        if (!column || column.columnDef.enableSorting === false || column.columnDef.accessorKey == null)
+            return rows;
+        const key = column.columnDef.accessorKey;
+        const dir = sort.desc ? -1 : 1;
+        return [...rows].sort((a, b) => {
+            const av = a.original[key];
+            const bv = b.original[key];
+            if (typeof av === "number" && typeof bv === "number") {
+                return av < bv ? -dir : av > bv ? dir : 0;
+            }
+            return dir * String(av ?? "").localeCompare(String(bv ?? ""));
+        });
+    }
+    function getFilteredRows() {
+        return applySorting(applyFilters(getAllRows()));
+    }
+    function getPageRows() {
+        const rows = getFilteredRows();
+        const { pageIndex, pageSize } = readState("pagination");
+        const start = pageIndex * pageSize;
+        return rows.slice(start, start + pageSize);
+    }
+    const table = {
+        getHeaderGroups() {
+            const headers = getVisibleColumns().map((column) => ({
+                id: `header-${column.id}`,
+                isPlaceholder: false,
+                column,
+                getContext() {
+                    return { column, table };
+                },
+            }));
+            return [{ id: "0", headers }];
+        },
+        getRowModel() {
+            return { rows: getPageRows() };
+        },
+        getFilteredRowModel() {
+            return { rows: getFilteredRows() };
+        },
+        getFilteredSelectedRowModel() {
+            return { rows: getFilteredRows().filter((row) => row.getIsSelected()) };
+        },
+        getSelectedRowModel() {
+            return { rows: getAllRows().filter((row) => row.getIsSelected()) };
+        },
+        getAllColumns() {
+            return getAllColumns();
+        },
+        getColumn(id) {
+            return getColumn(id);
+        },
+        getIsAllPageRowsSelected() {
+            const rows = getPageRows();
+            return rows.length > 0 && rows.every((row) => row.getIsSelected());
+        },
+        getIsSomePageRowsSelected() {
+            return getPageRows().some((row) => row.getIsSelected());
+        },
+        toggleAllPageRowsSelected(value) {
+            const rows = getPageRows();
+            const next = value ?? !(rows.length > 0 && rows.every((row) => row.getIsSelected()));
+            updateState("rowSelection", (prev) => {
+                const copy = { ...prev };
+                for (const row of rows)
+                    copy[row.id] = next;
+                return copy;
+            });
+        },
+        toggleAllRowsSelected(value) {
+            const rows = getAllRows();
+            const next = value ?? !(rows.length > 0 && rows.every((row) => row.getIsSelected()));
+            updateState("rowSelection", (prev) => {
+                const copy = { ...prev };
+                for (const row of rows)
+                    copy[row.id] = next;
+                return copy;
+            });
+        },
+        getCanPreviousPage() {
+            return readState("pagination").pageIndex > 0;
+        },
+        getCanNextPage() {
+            const { pageIndex, pageSize } = readState("pagination");
+            return (pageIndex + 1) * pageSize < getFilteredRows().length;
+        },
+        previousPage() {
+            updateState("pagination", (prev) => ({ ...prev, pageIndex: Math.max(0, prev.pageIndex - 1) }));
+        },
+        nextPage() {
+            updateState("pagination", (prev) => ({ ...prev, pageIndex: prev.pageIndex + 1 }));
+        },
+        setPageIndex(index) {
+            updateState("pagination", (prev) => ({ ...prev, pageIndex: index }));
+        },
+        getState() {
+            return tableState;
+        },
+    };
+    return table;
+}
+export function getCoreRowModel() {
+    return () => ({});
+}
+export function getSortedRowModel() {
+    return () => ({});
+}
+export function getFilteredRowModel() {
+    return () => ({});
+}
+export function getPaginationRowModel() {
+    return () => ({});
+}