negodesign 0.0.77 → 0.0.79

package/dist/components/ui/carousel/core/product/ui/CarouselProduct.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
-  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
-  import * as Carousel from "../../../index.js";
-  import type { CarouselProductProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import { t } from "../../../../../../i18n";
-  import { autoplay } from "../../../autoplay.js";
-  import CardProduct from "../../../../card/core/product/CardProduct.svelte";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-  }: CarouselProductProps = $props();
-
-  const responsive = useDevice();
-  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
-</script>
-
-<CarouselHeader {...headerProps}>
-  {#if isEmpty}
-    <NotFoundEmpty
-      title={$t("empty.products.title")}
-      description={$t("empty.products.description")}
-    />
-  {:else}
-    <CarouselSlot
-      {...slotProps}
-      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-5 w-75 basis-auto">
-            <CardProduct
-              id={i}
-              {isLoading}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-            />
-          </Carousel.Item>
-        {/each}
-      {:else}
-        {#each items as item, i (`product-${item.id ?? i}`)}
-          <Carousel.Item class="pl-2 w-75 basis-auto">
-            <CardProduct {...item} {isDescriptionIcon} {isDescriptionLabel} />
-          </Carousel.Item>
-        {/each}
-      {/if}
-    </CarouselSlot>
-  {/if}
-</CarouselHeader>
+<script lang="ts">
+  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../index.js";
+  import type { CarouselProductProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
+  import { autoplay } from "../../../autoplay.js";
+  import CardProduct from "../../../../card/core/product/CardProduct.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+  }: CarouselProductProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.products.title")}
+      description={$t("empty.products.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      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-5 w-75 basis-auto">
+            <CardProduct
+              id={i}
+              {isLoading}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {/each}
+      {:else}
+        {#each items as item, i (`product-${item.id ?? i}`)}
+          <Carousel.Item class="pl-2 w-75 basis-auto">
+            <CardProduct {...item} {isDescriptionIcon} {isDescriptionLabel} />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

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

@@ -1,67 +1,67 @@
-<script lang="ts">
-  import CardPromotion from "../../../../card/core/promotion/CardPromotion.svelte";
-  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
-  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
-  import * as Carousel from "../../../index.js";
-  import type { CarouselPromotionProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import { t } from "../../../../../../i18n";
-  import { autoplay } from "../../../autoplay.js";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    onClickBuy,
-    onClickShop,
-    onClickFavorite,
-  }: CarouselPromotionProps = $props();
-
-  const responsive = useDevice();
-  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
-</script>
-
-<CarouselHeader {...headerProps}>
-  {#if isEmpty}
-    <NotFoundEmpty
-      title={$t("empty.promotions.title")}
-      description={$t("empty.promotions.description")}
-    />
-  {:else}
-    <CarouselSlot
-      {...slotProps}
-      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-5 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}
-              {onClickBuy}
-              {onClickShop}
-              {onClickFavorite}
-            />
-          </Carousel.Item>
-        {/each}
-      {/if}
-    </CarouselSlot>
-  {/if}
-</CarouselHeader>
+<script lang="ts">
+  import CardPromotion from "../../../../card/core/promotion/CardPromotion.svelte";
+  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../index.js";
+  import type { CarouselPromotionProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
+  import { autoplay } from "../../../autoplay.js";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.promotions.title")}
+      description={$t("empty.promotions.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      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-5 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}
+              {onClickBuy}
+              {onClickShop}
+              {onClickFavorite}
+            />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

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

@@ -1,59 +1,59 @@
-<script lang="ts">
-  import Button from "../../../../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-full 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="outline"
-              class="flex items-center gap-0.5 border"
-              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 "../../../../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-full 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="outline"
+              class="flex items-center gap-0.5 border"
+              onclick={onButtonViewAll}
+            >
+              {$t("label.view.full")}
+              <HugeiconsIcon icon={ArrowRight02Icon} />
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div>{@render children()}</div>
+  </div>
+</div>

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,97 +1,97 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { Tick02Icon } from "@hugeicons/core-free-icons";
-	import { MinusSignIcon } from "@hugeicons/core-free-icons";
-
-	type CheckboxState = boolean | "indeterminate";
-
-	let {
-		ref = $bindable(null),
-		checked = $bindable(false),
-		indeterminate = $bindable(false),
-		onCheckedChange,
-		disabled = false,
-		id,
-		value,
-		name,
-		class: className,
-		children,
-		onclick,
-		...restProps
-	}: HTMLButtonAttributes & {
-		checked?: CheckboxState;
-		indeterminate?: boolean;
-		onCheckedChange?: (checked: boolean) => void;
-		id?: string;
-		value?: string;
-		name?: string;
-		children?: Snippet<[{ checked: boolean; indeterminate: boolean }]>;
-		ref?: HTMLButtonElement | null;
-	} = $props();
-
-	const state = $derived(
-		checked === "indeterminate" || indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
-	);
-	const isChecked = $derived(checked !== false && checked !== "indeterminate");
-	const isIndeterminate = $derived(state === "indeterminate");
-
-	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
-		if (disabled) return;
-		onclick?.(event);
-		const next = isIndeterminate ? true : !isChecked;
-		indeterminate = false;
-		checked = next;
-		onCheckedChange?.(next);
-	}
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	role="checkbox"
-	aria-checked={isIndeterminate ? "mixed" : isChecked}
-	data-slot="checkbox"
-	data-state={state}
-	disabled={disabled}
-	{id}
-	{name}
-	{value}
-	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	onclick={handleClick}
-	{...restProps}
->
-	{#if children}
-		{@render children({ checked: isChecked, indeterminate: isIndeterminate })}
-	{:else}
-		<div
-			data-slot="checkbox-indicator"
-			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
-		>
-			{#if isChecked}
-				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
-			{:else if isIndeterminate}
-				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
-			{/if}
-		</div>
-	{/if}
-</button>
-
-{#if name}
-	<input
-		type="checkbox"
-		class="sr-only pointer-events-none"
-		tabindex="-1"
-		aria-hidden="true"
-		{name}
-		{value}
-		checked={isChecked}
-		disabled={disabled}
-		onchange={() => {}}
-	/>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { Tick02Icon } from "@hugeicons/core-free-icons";
+	import { MinusSignIcon } from "@hugeicons/core-free-icons";
+
+	type CheckboxState = boolean | "indeterminate";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		onCheckedChange,
+		disabled = false,
+		id,
+		value,
+		name,
+		class: className,
+		children,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		checked?: CheckboxState;
+		indeterminate?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		id?: string;
+		value?: string;
+		name?: string;
+		children?: Snippet<[{ checked: boolean; indeterminate: boolean }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const state = $derived(
+		checked === "indeterminate" || indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
+	);
+	const isChecked = $derived(checked !== false && checked !== "indeterminate");
+	const isIndeterminate = $derived(state === "indeterminate");
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (disabled) return;
+		onclick?.(event);
+		const next = isIndeterminate ? true : !isChecked;
+		indeterminate = false;
+		checked = next;
+		onCheckedChange?.(next);
+	}
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="checkbox"
+	aria-checked={isIndeterminate ? "mixed" : isChecked}
+	data-slot="checkbox"
+	data-state={state}
+	disabled={disabled}
+	{id}
+	{name}
+	{value}
+	class={cn(
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	onclick={handleClick}
+	{...restProps}
+>
+	{#if children}
+		{@render children({ checked: isChecked, indeterminate: isIndeterminate })}
+	{:else}
+		<div
+			data-slot="checkbox-indicator"
+			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+		>
+			{#if isChecked}
+				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+			{:else if isIndeterminate}
+				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
+			{/if}
+		</div>
+	{/if}
+</button>
+
+{#if name}
+	<input
+		type="checkbox"
+		class="sr-only pointer-events-none"
+		tabindex="-1"
+		aria-hidden="true"
+		{name}
+		{value}
+		checked={isChecked}
+		disabled={disabled}
+		onchange={() => {}}
+	/>
 {/if}

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

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import { cn } from "../../../utils.js";
-	import { useCollapsibleContext } from "./collapsible.svelte";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: {
-		ref?: HTMLDivElement | null;
-		class?: string;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
-
-	const state = useCollapsibleContext();
-</script>
-
-{#if state.open}
-	<div
-		bind:this={ref}
-		data-slot="collapsible-content"
-		data-state={state.open ? "open" : "closed"}
-		class={cn("animate-fade-in", className)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useCollapsibleContext } from "./collapsible.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const state = useCollapsibleContext();
+</script>
+
+{#if state.open}
+	<div
+		bind:this={ref}
+		data-slot="collapsible-content"
+		data-state={state.open ? "open" : "closed"}
+		class={cn("animate-fade-in", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}