negodesign 0.0.26 → 0.0.27

package/dist/components/core/card/shared/CardButton.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-
-    type CardButtonProps = {
-        id: string | number;
-        icon: IconSvgElement;
-        isFlex?: boolean;
-        className?: string;
-        text: string;
-        onClick: (id: string | number) => void;
-    };
-
-    let { 
-        id, 
-        icon, 
-        isFlex, 
-        className, 
-        text, 
-        onClick 
-    }: CardButtonProps = $props();
-</script>
-
-<Button
-    class="{isFlex ? 'flex-1' : ''} {className}"
-    onclick={() => onClick(id)}
->
-    <HugeiconsIcon {icon} />
-    <span>{text}</span>
-</Button>
+<script lang="ts">
+    import { Button } from "../../../ui/button/index.js";
+    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+
+    type CardButtonProps = {
+        id: string | number;
+        icon: IconSvgElement;
+        isFlex?: boolean;
+        className?: string;
+        text: string;
+        onClick: (id: string | number) => void;
+    };
+
+    let { 
+        id, 
+        icon, 
+        isFlex, 
+        className, 
+        text, 
+        onClick 
+    }: CardButtonProps = $props();
+</script>
+
+<Button
+    class="{isFlex ? 'flex-1' : ''} {className}"
+    onclick={() => onClick(id)}
+>
+    <HugeiconsIcon {icon} />
+    <span>{text}</span>
+</Button>

package/dist/components/core/card/shared/CardCart.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import {
-    ShoppingCartAdd01Icon,
-    ShoppingCartRemove01Icon,
-  } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isCart: boolean;
-    isLoading?: boolean;
-    onCartClick?: (id: string | number) => void;
-  };
-
-  let { id, isCart, isLoading = false, onCartClick }: Props = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-8 h-8 rounded-full" />
-{:else if isCart}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#1d63be]"
-    onclick={() => onCartClick!(id)}
-  >
-    <HugeiconsIcon icon={ShoppingCartRemove01Icon} />
-  </Button>
-{:else}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#808080]"
-    onclick={() => onCartClick!(id)}
-  >
-    <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
-  </Button>
-{/if}
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import {
+    ShoppingCartAdd01Icon,
+    ShoppingCartRemove01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  type Props = {
+    id: string | number;
+    isCart: boolean;
+    isLoading?: boolean;
+    onCartClick?: (id: string | number) => void;
+  };
+
+  let { id, isCart, isLoading = false, onCartClick }: Props = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-8 h-8 rounded-full" />
+{:else if isCart}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#1d63be]"
+    onclick={() => onCartClick!(id)}
+  >
+    <HugeiconsIcon icon={ShoppingCartRemove01Icon} />
+  </Button>
+{:else}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onCartClick!(id)}
+  >
+    <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
+  </Button>
+{/if}

package/dist/components/core/card/shared/CardDescription.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-    import { Message01Icon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import TruncatableText from "./TruncatableText.svelte";
-    import { t } from "../../../../i18n";
-    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-
-    type CardDescriptionProps = {
-        content?: string;
-        isLoading?: boolean;
-        isDescriptionIcon?: boolean;
-        isDescriptionLabel?: boolean;
-    };
-
-    let {
-        content,
-        isLoading = false,
-        isDescriptionIcon = true,
-        isDescriptionLabel = true,
-    }: CardDescriptionProps = $props();
-</script>
-
-{#if isLoading}
-    <Skeleton class="w-full h-5" />
-{:else if content}
-    {#if isDescriptionLabel}
-        <div class="mb-1 text-[14px] md:text-[15px] flex items-center gap-1">
-            {#if isDescriptionIcon}
-                <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
-            {/if}
-            <div>{$t("label.description")}</div>
-        </div>
-    {/if}
-    <TruncatableText
-        text={content}
-        class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
-    />
-{/if}
+<script lang="ts">
+    import { Message01Icon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import TruncatableText from "./TruncatableText.svelte";
+    import { t } from "../../../../i18n";
+    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+    type CardDescriptionProps = {
+        content?: string;
+        isLoading?: boolean;
+        isDescriptionIcon?: boolean;
+        isDescriptionLabel?: boolean;
+    };
+
+    let {
+        content,
+        isLoading = false,
+        isDescriptionIcon = true,
+        isDescriptionLabel = true,
+    }: CardDescriptionProps = $props();
+</script>
+
+{#if isLoading}
+    <Skeleton class="w-full h-5" />
+{:else if content}
+    {#if isDescriptionLabel}
+        <div class="mb-1 text-[14px] md:text-[15px] flex items-center gap-1">
+            {#if isDescriptionIcon}
+                <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
+            {/if}
+            <div>{$t("label.description")}</div>
+        </div>
+    {/if}
+    <TruncatableText
+        text={content}
+        class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
+    />
+{/if}

package/dist/components/core/card/shared/CardFavorite.svelte

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isFavorite: boolean;
-    isLoading?: boolean;
-    onFavoriteClick?: (id: string | number) => void;
-  };
-
-  let { id, isFavorite, isLoading = false, onFavoriteClick }: Props = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-8 h-8 rounded-full" />
-{:else if isFavorite}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#ce2356]"
-    onclick={() => onFavoriteClick!(id)}
-  >
-    <HugeiconsIcon icon={HeartRemoveIcon} />
-  </Button>
-{:else}
-  <Button
-    class="w-8 h-8 rounded-full bg-[#808080]"
-    onclick={() => onFavoriteClick!(id)}
-  >
-    <HugeiconsIcon icon={HeartAddIcon} />
-  </Button>
-{/if}
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  type Props = {
+    id: string | number;
+    isFavorite: boolean;
+    isLoading?: boolean;
+    onFavoriteClick?: (id: string | number) => void;
+  };
+
+  let { id, isFavorite, isLoading = false, onFavoriteClick }: Props = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-8 h-8 rounded-full" />
+{:else if isFavorite}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#ce2356]"
+    onclick={() => onFavoriteClick!(id)}
+  >
+    <HugeiconsIcon icon={HeartRemoveIcon} />
+  </Button>
+{:else}
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onFavoriteClick!(id)}
+  >
+    <HugeiconsIcon icon={HeartAddIcon} />
+  </Button>
+{/if}

package/dist/components/core/card/shared/CardStarRating.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-    import * as StarRating from "../../../ui/star-rating";
-
-    type Props = {
-        startNumber: number;
-        startMax: number;
-    };
-
-    let { startNumber, startMax }: Props = $props();
-</script>
-
-{#if startNumber}
-    <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
-        {#snippet children({ items })}
-            {#each items as item (item.index)}
-                <StarRating.Star {...item} class="py-0! my-0!" />
-            {/each}
-        {/snippet}
-    </StarRating.Root>
-{/if}
+<script lang="ts">
+    import * as StarRating from "../../../ui/star-rating";
+
+    type Props = {
+        startNumber: number;
+        startMax: number;
+    };
+
+    let { startNumber, startMax }: Props = $props();
+</script>
+
+{#if startNumber}
+    <StarRating.Root max={startMax} value={startNumber} class="size-15 h-auto">
+        {#snippet children({ items })}
+            {#each items as item (item.index)}
+                <StarRating.Star {...item} class="py-0! my-0!" />
+            {/each}
+        {/snippet}
+    </StarRating.Root>
+{/if}

package/dist/components/core/card/shared/CardStartPrice.svelte

@@ -1,34 +1,34 @@
-<script lang="ts">
-    import StartBg from "../../../../assets/start.png";
-
-    type Props = {
-        newPrice?: string | number;
-        oldPrice?: string | number;
-        type?: "start" | "normal";
-    };
-
-    let { newPrice, oldPrice, type = "normal" }: Props = $props();
-</script>
-
-<div class="relative min-w-25 md:min-w-32">
-    {#if type == "start"}
-        <img
-            src={StartBg}
-            alt=""
-            class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
-        />
-    {/if}
-    {#if newPrice && oldPrice}
-        <div class="z-20 flex justify-center items-center">
-            <div class="font-extrabold md:text-3xl lg:text-4xl">{newPrice}</div>
-            <div class="mx-2">/</div>
-            <div
-                class="font-semibold line-through text-red-600 text-[10px] md:text-xl"
-            >
-                {oldPrice}
-            </div>
-        </div>
-    {:else}
-        <div class="z-20 font-bold">{newPrice}</div>
-    {/if}
-</div>
+<script lang="ts">
+    import StartBg from "../../../../assets/start.png";
+
+    type Props = {
+        newPrice?: string | number;
+        oldPrice?: string | number;
+        type?: "start" | "normal";
+    };
+
+    let { newPrice, oldPrice, type = "normal" }: Props = $props();
+</script>
+
+<div class="relative min-w-25 md:min-w-32">
+    {#if type == "start"}
+        <img
+            src={StartBg}
+            alt=""
+            class="shadow rounded-tl-lg rounded-bl-lg md:w-20 md:h-20 lg:w-32 lg:h-24 absolute"
+        />
+    {/if}
+    {#if newPrice && oldPrice}
+        <div class="z-20 flex justify-center items-center">
+            <div class="font-extrabold md:text-3xl lg:text-4xl">{newPrice}</div>
+            <div class="mx-2">/</div>
+            <div
+                class="font-semibold line-through text-red-600 text-[10px] md:text-xl"
+            >
+                {oldPrice}
+            </div>
+        </div>
+    {:else}
+        <div class="z-20 font-bold">{newPrice}</div>
+    {/if}
+</div>

package/dist/components/core/card/shared/CardTags.svelte

@@ -1,73 +1,73 @@
-<script lang="ts">
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { CardTagsProps } from "../types";
-    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-
-    type Props = {
-        className?: string;
-        tags?: CardTagsProps[];
-        isTagBorderBottom?: boolean;
-        isWrap?: boolean;
-        isLoading?: boolean;
-    };
-
-    const {
-        tags,
-        className,
-        isTagBorderBottom,
-        isWrap = false,
-        isLoading = false,
-    }: Props = $props();
-
-    let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
-</script>
-
-{#snippet createBadge(tag: CardTagsProps)}
-    <div
-        class="flex items-center h-5 shrink-0 {isTagBorderBottom
-            ? 'border border-gray-200 rounded-full px-2 py-1'
-            : ''}"
-    >
-        {#if tag.icon}
-            <HugeiconsIcon
-                icon={tag.icon}
-                class="mr-0.5 h-3.75 w-3.75 shrink-0"
-            />
-        {/if}
-        <div class="whitespace-nowrap">{tag.text}</div>
-    </div>
-{/snippet}
-
-{#snippet skeletonTag()}
-    <div class="my-2 flex gap-5">
-        {#each Array.from({ length: 3 }) as it, i (i)}
-            <Skeleton class="h-5 w-25 bg-black/50" />
-        {/each}
-    </div>
-{/snippet}
-
-{#if isWrap}
-    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
-        {#if isLoading}
-            {@render skeletonTag()}
-        {:else if tags && tags.length > 0}
-            {#each tags as tag, i (i)}
-                {@render createBadge(tag)}
-            {/each}
-        {/if}
-    </div>
-{:else}
-    <div
-        class="flex overflow-x-auto no-scrollbar w-full
-        {isJustify ? 'justify-between' : 'gap-4 md:gap-5 lg:gap-10'}
-        {className}"
-    >
-        {#if isLoading}
-            {@render skeletonTag()}
-        {:else if tags && tags.length > 0}
-            {#each tags as tag, i (i)}
-                {@render createBadge(tag)}
-            {/each}
-        {/if}
-    </div>
-{/if}
+<script lang="ts">
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { CardTagsProps } from "../types";
+    import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+    type Props = {
+        className?: string;
+        tags?: CardTagsProps[];
+        isTagBorderBottom?: boolean;
+        isWrap?: boolean;
+        isLoading?: boolean;
+    };
+
+    const {
+        tags,
+        className,
+        isTagBorderBottom,
+        isWrap = false,
+        isLoading = false,
+    }: Props = $props();
+
+    let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
+</script>
+
+{#snippet createBadge(tag: CardTagsProps)}
+    <div
+        class="flex items-center h-5 shrink-0 {isTagBorderBottom
+            ? 'border border-gray-200 rounded-full px-2 py-1'
+            : ''}"
+    >
+        {#if tag.icon}
+            <HugeiconsIcon
+                icon={tag.icon}
+                class="mr-0.5 h-3.75 w-3.75 shrink-0"
+            />
+        {/if}
+        <div class="whitespace-nowrap">{tag.text}</div>
+    </div>
+{/snippet}
+
+{#snippet skeletonTag()}
+    <div class="my-2 flex gap-5">
+        {#each Array.from({ length: 3 }) as it, i (i)}
+            <Skeleton class="h-5 w-25 bg-black/50" />
+        {/each}
+    </div>
+{/snippet}
+
+{#if isWrap}
+    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
+        {#if isLoading}
+            {@render skeletonTag()}
+        {:else if tags && tags.length > 0}
+            {#each tags as tag, i (i)}
+                {@render createBadge(tag)}
+            {/each}
+        {/if}
+    </div>
+{:else}
+    <div
+        class="flex overflow-x-auto no-scrollbar w-full
+        {isJustify ? 'justify-between' : 'gap-4 md:gap-5 lg:gap-10'}
+        {className}"
+    >
+        {#if isLoading}
+            {@render skeletonTag()}
+        {:else if tags && tags.length > 0}
+            {#each tags as tag, i (i)}
+                {@render createBadge(tag)}
+            {/each}
+        {/if}
+    </div>
+{/if}