negodesign 0.0.80 → 0.0.82

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

@@ -1,42 +1,42 @@
-<script lang="ts">
-  import { Button } from "../../../button/index.js";
-  import Skeleton from "../../../skeleton/skeleton.svelte";
-  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
-
-  type CardButtonProps = {
-    id: string | number;
-    icon?: IconSvgElement | string;
-    isFlex?: boolean;
-    className?: string;
-    text: string;
-    isLoading?: boolean;
-    onClick: (id: string | number) => void;
-  };
-
-  let {
-    id,
-    icon,
-    isFlex,
-    className,
-    text,
-    isLoading,
-    onClick,
-  }: CardButtonProps = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton
-    class="w-full h-7.5 rounded-lg bg-gray-500/80 dark:bg-gray-500/30"
-  />
-{:else}
-  <Button class="bg-gradient flex-1 {className}" onclick={() => onClick(id)}>
-    {#if icon}
-      {#if typeof icon === "string"}
-        <i class={icon}></i>
-      {:else}
-        <HugeiconsIcon {icon} />
-      {/if}
-    {/if}
-    <span>{text}</span>
-  </Button>
-{/if}
+<script lang="ts">
+  import { Button } from "../../../button/index.js";
+  import Skeleton from "../../../skeleton/skeleton.svelte";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+
+  type CardButtonProps = {
+    id: string | number;
+    icon?: IconSvgElement | string;
+    isFlex?: boolean;
+    className?: string;
+    text: string;
+    isLoading?: boolean;
+    onClick: (id: string | number) => void;
+  };
+
+  let {
+    id,
+    icon,
+    isFlex,
+    className,
+    text,
+    isLoading,
+    onClick,
+  }: CardButtonProps = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton
+    class="w-full h-7.5 rounded-lg bg-gray-500/80 dark:bg-gray-500/30"
+  />
+{:else}
+  <Button class="bg-gradient flex-1 {className}" onclick={() => onClick(id)}>
+    {#if icon}
+      {#if typeof icon === "string"}
+        <i class={icon}></i>
+      {:else}
+        <HugeiconsIcon {icon} />
+      {/if}
+    {/if}
+    <span>{text}</span>
+  </Button>
+{/if}

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

@@ -1,36 +1,36 @@
-<script lang="ts">
-  import { Button } from "../../../button/index.js";
-  import Skeleton from "../../../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 "../../../button/index.js";
+  import Skeleton from "../../../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/ui/card/core/shared/CardDescription.svelte

@@ -1,41 +1,41 @@
-<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 "../../../skeleton/skeleton.svelte";
-
-  type CardDescriptionProps = {
-    lines?: number;
-    content?: string;
-    isLoading?: boolean;
-    isDescriptionIcon?: boolean;
-    isDescriptionLabel?: boolean;
-  };
-
-  let {
-    lines = 2,
-    content,
-    isLoading = false,
-    isDescriptionIcon = false,
-    isDescriptionLabel = true,
-  }: CardDescriptionProps = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-full h-full bg-gray-500/89" />
-{: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}
-    {lines}
-    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-2 h-[65px] mb-1"
-  />
-{/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 "../../../skeleton/skeleton.svelte";
+
+  type CardDescriptionProps = {
+    lines?: number;
+    content?: string;
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+  };
+
+  let {
+    lines = 2,
+    content,
+    isLoading = false,
+    isDescriptionIcon = false,
+    isDescriptionLabel = true,
+  }: CardDescriptionProps = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-full h-full bg-gray-500/89" />
+{: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}
+    {lines}
+    class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-2 h-[65px] mb-1"
+  />
+{/if}

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

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import { Button } from "../../../button/index.js";
-  import Skeleton from "../../../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 "../../../button/index.js";
+  import Skeleton from "../../../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/ui/card/core/shared/CardLogo.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-  import Skeleton from "../../../skeleton/skeleton.svelte";
-  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
-
-  let { logo, isLoading = false }: { logo?: string; isLoading?: boolean } =
-    $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
-{:else if logo}
-  <img
-    src={logo}
-    alt={logo}
-    class="w-12 h-12 rounded-lg"
-    onerror={(e) =>
-      ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
-  />
-{/if}
+<script lang="ts">
+  import Skeleton from "../../../skeleton/skeleton.svelte";
+  import ImgPlaceholderCompany from "../../../../../assets/placeholder-company.png";
+
+  let { logo, isLoading = false }: { logo?: string; isLoading?: boolean } =
+    $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-12 h-12 rounded-lg bg-gray-300" />
+{:else if logo}
+  <img
+    src={logo}
+    alt={logo}
+    class="w-12 h-12 rounded-lg"
+    onerror={(e) =>
+      ((e.target as HTMLImageElement).src = ImgPlaceholderCompany)}
+  />
+{/if}

package/dist/components/ui/card/core/shared/CardPhoneOrWhatsapp.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-  import { Mail01Icon, WhatsappIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { CardPhoneOrWhatsappProps } from "../types";
-
-  let {
-    id,
-    className,
-    buttonClass,
-    btnWhatsappClass,
-    btnEmailClass,
-    onEmailClick,
-    onWhatsappClick,
-  }: CardPhoneOrWhatsappProps = $props();
-
-  let isFlex = $derived(onEmailClick && onWhatsappClick);
-</script>
-
-<div class="flex border-t border-gray-300 dark:border-gray-700 {className}">
-  {#if onEmailClick}
-    <button
-      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {!isFlex
-        ? 'rounded-br-lg'
-        : ''} {buttonClass} {btnEmailClass}"
-      onclick={() => onEmailClick?.(id)}
-    >
-      <HugeiconsIcon icon={Mail01Icon} size={20} />
-      <span>Email</span>
-    </button>
-  {/if}
-  {#if isFlex}
-    <div class="border-l border-gray-300 dark:border-gray-700"></div>
-  {/if}
-  {#if onWhatsappClick}
-    <button
-      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {!isFlex
-        ? 'rounded-bl-lg'
-        : ''} {buttonClass} {btnWhatsappClass}"
-      onclick={() => onWhatsappClick?.(id)}
-    >
-      <HugeiconsIcon icon={WhatsappIcon} size={20} />
-      <span>Whatsapp</span>
-    </button>
-  {/if}
-</div>
+<script lang="ts">
+  import { Mail01Icon, WhatsappIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { CardPhoneOrWhatsappProps } from "../types";
+
+  let {
+    id,
+    className,
+    buttonClass,
+    btnWhatsappClass,
+    btnEmailClass,
+    onEmailClick,
+    onWhatsappClick,
+  }: CardPhoneOrWhatsappProps = $props();
+
+  let isFlex = $derived(onEmailClick && onWhatsappClick);
+</script>
+
+<div class="flex border-t border-gray-300 dark:border-gray-700 {className}">
+  {#if onEmailClick}
+    <button
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-red-800 hover:text-white cursor-pointer rounded-bl-lg {!isFlex
+        ? 'rounded-br-lg'
+        : ''} {buttonClass} {btnEmailClass}"
+      onclick={() => onEmailClick?.(id)}
+    >
+      <HugeiconsIcon icon={Mail01Icon} size={20} />
+      <span>Email</span>
+    </button>
+  {/if}
+  {#if isFlex}
+    <div class="border-l border-gray-300 dark:border-gray-700"></div>
+  {/if}
+  {#if onWhatsappClick}
+    <button
+      class="flex-1 flex justify-center items-center gap-2 p-3 hover:bg-green-600 hover:text-white cursor-pointer rounded-br-lg {!isFlex
+        ? 'rounded-bl-lg'
+        : ''} {buttonClass} {btnWhatsappClass}"
+      onclick={() => onWhatsappClick?.(id)}
+    >
+      <HugeiconsIcon icon={WhatsappIcon} size={20} />
+      <span>Whatsapp</span>
+    </button>
+  {/if}
+</div>

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

@@ -1,24 +1,24 @@
-<script lang="ts">
-  import Skeleton from "../../../skeleton/skeleton.svelte";
-  import * as StarRating from "../../../star-rating";
-
-  type Props = {
-    startNumber: number;
-    startMax: number;
-    isLoading?: boolean;
-  };
-
-  let { startNumber, startMax, isLoading }: Props = $props();
-</script>
-
-{#if isLoading}
-  <Skeleton class="w-12 h-6 rounded-lg bg-gray-300/90" />
-{:else 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 Skeleton from "../../../skeleton/skeleton.svelte";
+  import * as StarRating from "../../../star-rating";
+
+  type Props = {
+    startNumber: number;
+    startMax: number;
+    isLoading?: boolean;
+  };
+
+  let { startNumber, startMax, isLoading }: Props = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="w-12 h-6 rounded-lg bg-gray-300/90" />
+{:else 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}