negodesign 0.0.73 → 0.0.74

package/dist/components/{core → ui}/datatable/ui/DataTableActions.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" generics="T">
-    import type { CellContext } from "../../../ui/data-table";
-    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
-    import Button from "../../../ui/button/button.svelte";
-    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-
-    let { row }: CellContext<T, unknown> = $props();
-</script>
-
-<DropdownMenu.Root>
-    <DropdownMenu.Trigger>
-        {#snippet child({ props })}
-            <Button {...props} variant="ghost" class="size-8 p-0">
-                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        {/snippet}
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Copy</DropdownMenu.Item
-        >
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Delete</DropdownMenu.Item
-        >
-    </DropdownMenu.Content>
-</DropdownMenu.Root>
+<script lang="ts" generics="T">
+    import type { CellContext } from "../../data-table";
+    import * as DropdownMenu from "../../dropdown-menu/index.js";
+    import Button from "../../button/button.svelte";
+    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+
+    let { row }: CellContext<T, unknown> = $props();
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" class="size-8 p-0">
+                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
+                <span class="sr-only">Open menu</span>
+            </Button>
+        {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end">
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Copy</DropdownMenu.Item
+        >
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Delete</DropdownMenu.Item
+        >
+    </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/{core → ui}/datatable/ui/DataTableActions.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CellContext } from "../../../ui/data-table";
+import type { CellContext } from "../../data-table";
 declare function $$render<T>(): {
     props: CellContext<T, unknown>;
     exports: {};

package/dist/components/{core → ui}/datatable/ui/DataTableCheckbox.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-    import { Checkbox } from "../../../ui/checkbox";
-
-    let {
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        onCheckedChange,
-        ...restProps
-    }: {
-        checked?: boolean;
-        indeterminate?: boolean;
-        onCheckedChange?: (value: boolean) => void;
-        [key: string]: unknown;
-    } = $props();
-</script>
-
-<Checkbox
-    bind:checked
-    bind:indeterminate
-    onCheckedChange={(v) => onCheckedChange?.(!!v)}
-    {...restProps}
-/>
+<script lang="ts">
+    import { Checkbox } from "../../checkbox";
+
+    let {
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        onCheckedChange,
+        ...restProps
+    }: {
+        checked?: boolean;
+        indeterminate?: boolean;
+        onCheckedChange?: (value: boolean) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<Checkbox
+    bind:checked
+    bind:indeterminate
+    onCheckedChange={(v) => onCheckedChange?.(!!v)}
+    {...restProps}
+/>

package/dist/components/{core → ui}/datatable/ui/DataTableContent.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-    import type {
-        ColumnDef,
-        Table as TanstackTable,
-    } from "../../../ui/data-table";
-    import * as Table from "../../../ui/table/index.js";
-    import FlexRender from "../../../ui/data-table/flex-render.svelte";
-
-    type Props = {
-        table: TanstackTable<T>;
-        columns: ColumnDef<T>[];
-    };
-
-    let { table, columns }: Props = $props();
-</script>
-
-<div class="rounded-md border">
-    <Table.Root>
-        <Table.Header>
-            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-                <Table.Row>
-                    {#each headerGroup.headers as header (header.id)}
-                        <Table.Head class="[&:has([role=checkbox])]:ps-3">
-                            {#if !header.isPlaceholder}
-                                <FlexRender
-                                    content={header.column.columnDef.header}
-                                    context={header.getContext()}
-                                />
-                            {/if}
-                        </Table.Head>
-                    {/each}
-                </Table.Row>
-            {/each}
-        </Table.Header>
-        <Table.Body>
-            {#each table.getRowModel().rows as row (row.id)}
-                <Table.Row data-state={row.getIsSelected() && "selected"}>
-                    {#each row.getVisibleCells() as cell (cell.id)}
-                        <Table.Cell class="[&:has([role=checkbox])]:ps-3">
-                            <FlexRender
-                                content={cell.column.columnDef.cell}
-                                context={cell.getContext()}
-                            />
-                        </Table.Cell>
-                    {/each}
-                </Table.Row>
-            {:else}
-                <Table.Row>
-                    <Table.Cell
-                        colspan={columns.length}
-                        class="h-24 text-center"
-                    >
-                        No results.
-                    </Table.Cell>
-                </Table.Row>
-            {/each}
-        </Table.Body>
-    </Table.Root>
-</div>
+<script lang="ts" generics="T">
+    import type {
+        ColumnDef,
+        Table as TanstackTable,
+    } from "../../data-table";
+    import * as Table from "../../table/index.js";
+    import FlexRender from "../../data-table/flex-render.svelte";
+
+    type Props = {
+        table: TanstackTable<T>;
+        columns: ColumnDef<T>[];
+    };
+
+    let { table, columns }: Props = $props();
+</script>
+
+<div class="rounded-md border">
+    <Table.Root>
+        <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                <Table.Row>
+                    {#each headerGroup.headers as header (header.id)}
+                        <Table.Head class="[&:has([role=checkbox])]:ps-3">
+                            {#if !header.isPlaceholder}
+                                <FlexRender
+                                    content={header.column.columnDef.header}
+                                    context={header.getContext()}
+                                />
+                            {/if}
+                        </Table.Head>
+                    {/each}
+                </Table.Row>
+            {/each}
+        </Table.Header>
+        <Table.Body>
+            {#each table.getRowModel().rows as row (row.id)}
+                <Table.Row data-state={row.getIsSelected() && "selected"}>
+                    {#each row.getVisibleCells() as cell (cell.id)}
+                        <Table.Cell class="[&:has([role=checkbox])]:ps-3">
+                            <FlexRender
+                                content={cell.column.columnDef.cell}
+                                context={cell.getContext()}
+                            />
+                        </Table.Cell>
+                    {/each}
+                </Table.Row>
+            {:else}
+                <Table.Row>
+                    <Table.Cell
+                        colspan={columns.length}
+                        class="h-24 text-center"
+                    >
+                        No results.
+                    </Table.Cell>
+                </Table.Row>
+            {/each}
+        </Table.Body>
+    </Table.Root>
+</div>

package/dist/components/{core → ui}/datatable/ui/DataTableContent.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ColumnDef, Table as TanstackTable } from "../../../ui/data-table";
+import type { ColumnDef, Table as TanstackTable } from "../../data-table";
 declare function $$render<T>(): {
     props: {
         table: TanstackTable<T>;

package/dist/components/{core → ui}/datatable/ui/DataTableCore.svelte

@@ -1,148 +1,148 @@
-<script lang="ts" generics="T">
-    import {
-        type CellContext,
-        type ColumnDef,
-        type ColumnFiltersState,
-        type PaginationState,
-        type RowSelectionState,
-        type SortingState,
-        type VisibilityState,
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-    } from "../../../ui/data-table";
-    import type { DataTableItem } from "../data/data-table";
-    import { resolveHeader } from "../data/resolve-header.svelte";
-    import { resolveCellBadge } from "../data/resolve-cell-badge.svelte";
-    import {
-        createDragColumn,
-        createSelectColumn,
-    } from "../data/columns-create";
-    import {
-        createSvelteTable,
-        renderComponent,
-    } from "../../../ui/data-table";
-    import DataTableListFilter from "./DataTableListFilter.svelte";
-    import DataTableContent from "./DataTableContent.svelte";
-    import DataTableListPagination from "./DataTableListPagination.svelte";
-
-    /**
-     * Generic data table with pagination, sorting, and filtering.
-     * @property {DataTableItem<T>["config"]} config - Column definitions
-     * @property {keyof T} columnFilter - Key for column filtering
-     * @property {Component} actions - Per-row actions component
-     * @property {T[]} items - Table data
-     */
-    let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
-
-    let columns: ColumnDef<T>[] = $derived([
-        createDragColumn<T>(),
-        createSelectColumn<T>(),
-        ...config.map((it) => ({
-            accessorKey: it.accessorKey,
-            header: resolveHeader(it.header),
-            cell: resolveCellBadge(it.cell, it.badge),
-            enableSorting: it.enableSorting,
-            enableHiding: it.enableHiding,
-        })),
-        ...(actions
-            ? [{
-                  id: "actions",
-                  cell: (ctx: CellContext<T, unknown>) => renderComponent(actions, ctx as unknown),
-                  enableSorting: false,
-                  enableHiding: false,
-              } satisfies ColumnDef<T>]
-            : []),
-    ]);
-
-    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
-    let columnFilters = $state<ColumnFiltersState>([]);
-    let columnVisibility = $state<VisibilityState>({});
-    let rowSelection = $state<RowSelectionState>({});
-    let sorting = $state<SortingState>([]);
-
-    let table = $derived(
-        createSvelteTable({
-            data: items,
-            columns,
-            state: {
-                get pagination() {
-                    return pagination;
-                },
-                get sorting() {
-                    return sorting;
-                },
-                get columnVisibility() {
-                    return columnVisibility;
-                },
-                get rowSelection() {
-                    return rowSelection;
-                },
-                get columnFilters() {
-                    return columnFilters;
-                },
-            },
-            getCoreRowModel: getCoreRowModel(),
-            getPaginationRowModel: getPaginationRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getFilteredRowModel: getFilteredRowModel(),
-            onPaginationChange: (
-                updater:
-                    | PaginationState
-                    | ((arg0: PaginationState) => PaginationState),
-            ) => {
-                pagination =
-                    typeof updater === "function"
-                        ? updater(pagination)
-                        : updater;
-                return pagination;
-            },
-            onSortingChange: (
-                updater: SortingState | ((arg0: SortingState) => SortingState),
-            ) => {
-                sorting = typeof updater === "function" ? updater(sorting) : updater;
-                return sorting;
-            },
-            onColumnFiltersChange: (
-                updater:
-                    | ColumnFiltersState
-                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
-            ) => {
-                columnFilters =
-                    typeof updater === "function"
-                        ? updater(columnFilters)
-                        : updater;
-                return columnFilters;
-            },
-            onColumnVisibilityChange: (
-                updater:
-                    | VisibilityState
-                    | ((arg0: VisibilityState) => VisibilityState),
-            ) => {
-                columnVisibility =
-                    typeof updater === "function"
-                        ? updater(columnVisibility)
-                        : updater;
-                return columnVisibility;
-            },
-            onRowSelectionChange: (
-                updater:
-                    | RowSelectionState
-                    | ((arg0: RowSelectionState) => RowSelectionState),
-            ) => {
-                rowSelection =
-                    typeof updater === "function"
-                        ? updater(rowSelection)
-                        : updater;
-                return rowSelection;
-            },
-        }),
-    );
-</script>
-
-<div class="-mb-8 w-full">
-    <DataTableListFilter {table} column={columnFilter} />
-    <DataTableContent {table} {columns} />
-    <DataTableListPagination {table} />
-</div>
+<script lang="ts" generics="T">
+    import {
+        type CellContext,
+        type ColumnDef,
+        type ColumnFiltersState,
+        type PaginationState,
+        type RowSelectionState,
+        type SortingState,
+        type VisibilityState,
+        getCoreRowModel,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+    } from "../../data-table";
+    import type { DataTableItem } from "../data/data-table";
+    import { resolveHeader } from "../data/resolve-header.svelte.js";
+    import { resolveCellBadge } from "../data/resolve-cell-badge.svelte.js";
+    import {
+        createDragColumn,
+        createSelectColumn,
+    } from "../data/columns-create";
+    import {
+        createSvelteTable,
+        renderComponent,
+    } from "../../data-table";
+    import DataTableListFilter from "./DataTableListFilter.svelte";
+    import DataTableContent from "./DataTableContent.svelte";
+    import DataTableListPagination from "./DataTableListPagination.svelte";
+
+    /**
+     * Generic data table with pagination, sorting, and filtering.
+     * @property {DataTableItem<T>["config"]} config - Column definitions
+     * @property {keyof T} columnFilter - Key for column filtering
+     * @property {Component} actions - Per-row actions component
+     * @property {T[]} items - Table data
+     */
+    let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
+
+    let columns: ColumnDef<T>[] = $derived([
+        createDragColumn<T>(),
+        createSelectColumn<T>(),
+        ...config.map((it) => ({
+            accessorKey: it.accessorKey,
+            header: resolveHeader(it.header),
+            cell: resolveCellBadge(it.cell, it.badge),
+            enableSorting: it.enableSorting,
+            enableHiding: it.enableHiding,
+        })),
+        ...(actions
+            ? [{
+                  id: "actions",
+                  cell: (ctx: CellContext<T, unknown>) => renderComponent(actions, ctx as unknown),
+                  enableSorting: false,
+                  enableHiding: false,
+              } satisfies ColumnDef<T>]
+            : []),
+    ]);
+
+    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+    let columnFilters = $state<ColumnFiltersState>([]);
+    let columnVisibility = $state<VisibilityState>({});
+    let rowSelection = $state<RowSelectionState>({});
+    let sorting = $state<SortingState>([]);
+
+    let table = $derived(
+        createSvelteTable({
+            data: items,
+            columns,
+            state: {
+                get pagination() {
+                    return pagination;
+                },
+                get sorting() {
+                    return sorting;
+                },
+                get columnVisibility() {
+                    return columnVisibility;
+                },
+                get rowSelection() {
+                    return rowSelection;
+                },
+                get columnFilters() {
+                    return columnFilters;
+                },
+            },
+            getCoreRowModel: getCoreRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            onPaginationChange: (
+                updater:
+                    | PaginationState
+                    | ((arg0: PaginationState) => PaginationState),
+            ) => {
+                pagination =
+                    typeof updater === "function"
+                        ? updater(pagination)
+                        : updater;
+                return pagination;
+            },
+            onSortingChange: (
+                updater: SortingState | ((arg0: SortingState) => SortingState),
+            ) => {
+                sorting = typeof updater === "function" ? updater(sorting) : updater;
+                return sorting;
+            },
+            onColumnFiltersChange: (
+                updater:
+                    | ColumnFiltersState
+                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
+            ) => {
+                columnFilters =
+                    typeof updater === "function"
+                        ? updater(columnFilters)
+                        : updater;
+                return columnFilters;
+            },
+            onColumnVisibilityChange: (
+                updater:
+                    | VisibilityState
+                    | ((arg0: VisibilityState) => VisibilityState),
+            ) => {
+                columnVisibility =
+                    typeof updater === "function"
+                        ? updater(columnVisibility)
+                        : updater;
+                return columnVisibility;
+            },
+            onRowSelectionChange: (
+                updater:
+                    | RowSelectionState
+                    | ((arg0: RowSelectionState) => RowSelectionState),
+            ) => {
+                rowSelection =
+                    typeof updater === "function"
+                        ? updater(rowSelection)
+                        : updater;
+                return rowSelection;
+            },
+        }),
+    );
+</script>
+
+<div class="-mb-8 w-full">
+    <DataTableListFilter {table} column={columnFilter} />
+    <DataTableContent {table} {columns} />
+    <DataTableListPagination {table} />
+</div>

package/dist/components/{core → ui}/datatable/ui/DataTableDragHandle.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-    import { GripVerticalIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-</script>
-
-<button class="cursor-grab opacity-60 hover:opacity-100 w-min">
-    <HugeiconsIcon icon={GripVerticalIcon} class="size-4" />
-</button>
+<script lang="ts">
+    import { GripVerticalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+</script>
+
+<button class="cursor-grab opacity-60 hover:opacity-100 w-min">
+    <HugeiconsIcon icon={GripVerticalIcon} class="size-4" />
+</button>