negodesign 0.0.26 → 0.0.28

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte

@@ -1,63 +1,65 @@
-<script lang="ts">
-  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselHighlightsProps } from "../types";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-
-  const {
-    title,
-    items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    isLoading = false,
-    varient = 1,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    onButtonViewAll,
-  }: CarouselHighlightsProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
-  <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    containerClass="w-full"
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-auto">
-          <CardHighlight id={i} {isLoading} {varient} />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item (item.id)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-auto">
-          <CardHighlight
-            {...item}
-            {varient}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselHighlightsProps } from "../types";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
+
+  const {
+    title,
+    items,
+    description,
+    titleClass,
+    descriptionClass,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    isLoading = false,
+    varient = 1,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onButtonViewAll,
+    positionButtonPreviousAndNext,
+  }: CarouselHighlightsProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader
+  {title}
+  {description}
+  {titleClass}
+  {descriptionClass}
+  {containerClass}
+  {onButtonViewAll}
+>
+  <CarouselSlot
+    isBorderBottom={false}
+    {isButtonPreviousAndNext}
+    {buttonPreviousAndNextClass}
+    {positionButtonPreviousAndNext}
+    containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+        <Carousel.Item class="pl-2 basis-auto">
+          <CardHighlight id={i} {isLoading} {varient} />
+        </Carousel.Item>
+      {/each}
+    {:else}
+      {#each items as item, i (`highlight-${item.id ?? i}`)}
+        <Carousel.Item class="pl-2 basis-auto">
+          <CardHighlight
+            {...item}
+            {varient}
+            {isDescriptionIcon}
+            {isDescriptionLabel}
+          />
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </CarouselSlot>
+</CarouselHeader>

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselPromotionProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-
-  const {
-    title,
-    items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
-    isLoading = false,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    positionButtonPreviousAndNext,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    onButtonViewAll,
-  }: CarouselPromotionProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
-  <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    {positionButtonPreviousAndNext}
-    containerClass="w-full"
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/4">
-          <CardPromotion
-            id={i}
-            {isLoading}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item (item.id)}
-        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/4">
-          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselPromotionProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
+
+  const {
+    title,
+    items,
+    description,
+    titleClass,
+    descriptionClass,
+    isButtonPreviousAndNext = true,
+    isLoading = false,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    positionButtonPreviousAndNext,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onButtonViewAll,
+  }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader
+  {title}
+  {description}
+  {titleClass}
+  {descriptionClass}
+  {containerClass}
+  {onButtonViewAll}
+>
+  <CarouselSlot
+    isBorderBottom={false}
+    {isButtonPreviousAndNext}
+    {buttonPreviousAndNextClass}
+    {positionButtonPreviousAndNext}
+    containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+        <Carousel.Item class="pl-2 w-75 basis-auto">
+          <CardPromotion
+            id={i}
+            {isLoading}
+            {isDescriptionIcon}
+            {isDescriptionLabel}
+          />
+        </Carousel.Item>
+      {/each}
+    {:else}
+      {#each items as item, i (`promotion-${item.id ?? i}`)}
+        <Carousel.Item class="pl-2 w-75 basis-auto">
+          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </CarouselSlot>
+</CarouselHeader>

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

@@ -1,55 +1,55 @@
-<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,
-  }: CarouselHeaderProps & Props = $props();
-</script>
-
-<div class="w-full flex justify-center">
-  <div class="w-[95%] p-2 rounded-xl border {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,
+  }: CarouselHeaderProps & Props = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div class="w-[95%] p-2 rounded-xl border {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>