negodesign 0.0.59 → 0.0.60

package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-  import Button from "../../../../ui/button/button.svelte";
-  import { t } from "../../../../../i18n";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselHeaderProps } from "../../types";
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    children: Snippet;
-  };
-
-  const {
-    title,
-    description,
-    titleClass,
-    descriptionClass,
-    containerClass = "",
-    onButtonViewAll,
-    children,
-    isBorder,
-  }: CarouselHeaderProps & Props = $props();
-</script>
-
-<div class="w-full flex justify-center">
-  <div
-    class="w-[95%] p-2 rounded-xl
-    {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
-    {containerClass}"
-  >
-    <div class="flex flex-col gap-1">
-      <div class="flex justify-between">
-        <div>
-          {#if title}
-            <h1 class={`text-xl ${titleClass}`}>{title}</h1>
-          {/if}
-          {#if description}
-            <div class={`mt-3 ${descriptionClass}`}>
-              {description}
-            </div>
-          {/if}
-        </div>
-        {#if onButtonViewAll}
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              class="flex items-center gap-0.5"
-              onclick={onButtonViewAll}
-            >
-              {$t("label.view.full")}
-              <HugeiconsIcon icon={ArrowRight02Icon} />
-            </Button>
-          </div>
-        {/if}
-      </div>
-    </div>
-    <div>{@render children()}</div>
-  </div>
-</div>
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import { t } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
+  import type { CarouselHeaderProps } from "../../types";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+  };
+
+  const {
+    title,
+    description,
+    titleClass,
+    descriptionClass,
+    containerClass = "",
+    onButtonViewAll,
+    children,
+    isBorder,
+  }: CarouselHeaderProps & Props = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div
+    class="w-[95%] p-2 rounded-xl
+    {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
+    {containerClass}"
+  >
+    <div class="flex flex-col gap-1">
+      <div class="flex justify-between">
+        <div>
+          {#if title}
+            <h1 class={`text-xl ${titleClass}`}>{title}</h1>
+          {/if}
+          {#if description}
+            <div class={`mt-3 ${descriptionClass}`}>
+              {description}
+            </div>
+          {/if}
+        </div>
+        {#if onButtonViewAll}
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="flex items-center gap-0.5"
+              onclick={onButtonViewAll}
+            >
+              {$t("label.view.full")}
+              <HugeiconsIcon icon={ArrowRight02Icon} />
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div>{@render children()}</div>
+  </div>
+</div>

package/dist/components/core/datatable/ui/DataTableActions.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" generics="T">
-    import type { CellContext } from "@tanstack/table-core";
-    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 "@tanstack/table-core";
+    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>

package/dist/components/core/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 "../../../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}
+/>

package/dist/components/core/datatable/ui/DataTableContent.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-    import type {
-        ColumnDef,
-        Table as TanstackTable,
-    } from "@tanstack/table-core";
-    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 "@tanstack/table-core";
+    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>

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -1,151 +1,151 @@
-<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 "@tanstack/table-core";
-    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),
-            ) => {
-                if (typeof updater === "function") {
-                    pagination = updater(pagination);
-                } else {
-                    pagination = updater;
-                }
-            },
-            onSortingChange: (
-                updater: SortingState | ((arg0: SortingState) => SortingState),
-            ) => {
-                if (typeof updater === "function") {
-                    sorting = updater(sorting);
-                } else {
-                    sorting = updater;
-                }
-            },
-            onColumnFiltersChange: (
-                updater:
-                    | ColumnFiltersState
-                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
-            ) => {
-                if (typeof updater === "function") {
-                    columnFilters = updater(columnFilters);
-                } else {
-                    columnFilters = updater;
-                }
-            },
-            onColumnVisibilityChange: (
-                updater:
-                    | VisibilityState
-                    | ((arg0: VisibilityState) => VisibilityState),
-            ) => {
-                if (typeof updater === "function") {
-                    columnVisibility = updater(columnVisibility);
-                } else {
-                    columnVisibility = updater;
-                }
-            },
-            onRowSelectionChange: (
-                updater:
-                    | RowSelectionState
-                    | ((arg0: RowSelectionState) => RowSelectionState),
-            ) => {
-                if (typeof updater === "function") {
-                    rowSelection = updater(rowSelection);
-                } else {
-                    rowSelection = updater;
-                }
-            },
-        }),
-    );
-</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 "@tanstack/table-core";
+    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),
+            ) => {
+                if (typeof updater === "function") {
+                    pagination = updater(pagination);
+                } else {
+                    pagination = updater;
+                }
+            },
+            onSortingChange: (
+                updater: SortingState | ((arg0: SortingState) => SortingState),
+            ) => {
+                if (typeof updater === "function") {
+                    sorting = updater(sorting);
+                } else {
+                    sorting = updater;
+                }
+            },
+            onColumnFiltersChange: (
+                updater:
+                    | ColumnFiltersState
+                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnFilters = updater(columnFilters);
+                } else {
+                    columnFilters = updater;
+                }
+            },
+            onColumnVisibilityChange: (
+                updater:
+                    | VisibilityState
+                    | ((arg0: VisibilityState) => VisibilityState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnVisibility = updater(columnVisibility);
+                } else {
+                    columnVisibility = updater;
+                }
+            },
+            onRowSelectionChange: (
+                updater:
+                    | RowSelectionState
+                    | ((arg0: RowSelectionState) => RowSelectionState),
+            ) => {
+                if (typeof updater === "function") {
+                    rowSelection = updater(rowSelection);
+                } else {
+                    rowSelection = updater;
+                }
+            },
+        }),
+    );
+</script>
+
+<div class="-mb-8 w-full">
+    <DataTableListFilter {table} column={columnFilter} />
+    <DataTableContent {table} {columns} />
+    <DataTableListPagination {table} />
+</div>

package/dist/components/core/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>