negodesign 0.0.24 → 0.0.26

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -1,101 +1,98 @@
-<script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardProfileProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
-
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        startNumber,
-        startMax = 5,
-        isTagBorderBottom = true,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardProfileProps = $props();
-
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
-</script>
-
-<article
-    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
->
-    <div class="flex justify-between items-center w-full mb-4">
-        <div class="flex justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex-col">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating startNumber={startNumber} startMax={startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center">
-            <CardFavorite
-                isFavorite={isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
-
-    <div class="h-15 my-2">
-        <CardDescription content={content}/>
-    </div>
-
-    <CardTags
-        className="my-6"
-        tags={tags ?? []}
-        isTagBorderBottom={isTagBorderBottom}
-    />    
-
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    id={id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    id={id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
-</article>
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardProfileProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        startNumber,
+        startMax = 5,
+        isTagBorderBottom = true,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardProfileProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3"
+>
+    <div class="flex justify-between items-center w-full mb-4">
+        <div class="flex justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex-col">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating {startNumber} {startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center">
+            <CardFavorite
+                {id}
+                {isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 my-2">
+        <CardDescription {content} />
+    </div>
+
+    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    {id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    {id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -1,97 +1,98 @@
-<script lang="ts">
-    /**
-     * Card component with a title and content.
-     * @component
-     */
-    import {
-        InformationCircleIcon,
-        UserIcon,
-    } from "@hugeicons/core-free-icons";
-    import { t } from "../../../../../i18n";
-    import type { CardProfileProps } from "../../types";
-    import CardStarRating from "../../shared/CardStarRating.svelte";
-    import CardTags from "../../shared/CardTags.svelte";
-    import CardDescription from "../../shared/CardDescription.svelte";
-    import CardButton from "../../shared/CardButton.svelte";
-    import CardFavorite from "../../shared/CardFavorite.svelte";
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        className,
-        startNumber,
-        startMax = 5,
-        isTagBorderBottom = true,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardProfileProps = $props();
-
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
-</script>
-
-<article
-    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
->
-    <div class="flex flex-col justify-center items-center w-full relative">
-        <div class="flex flex-col justify-start gap-2">
-            <div class="flex justify-center items-center">
-                {#if logo}
-                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
-                {/if}
-            </div>
-            <div class="flex flex-col justify-center items-center">
-                {#if title}
-                    <div class="text-center font-bold text-lg">{title}</div>
-                {/if}
-                {#if startNumber}
-                    <CardStarRating {startNumber} {startMax} />
-                {/if}
-            </div>
-        </div>
-        <div class="flex justify-end items-center absolute top-0 right-0">
-            <CardFavorite
-                {isFavorite}
-                onFavoriteClick={() => onFavoriteClick!(id)}
-            />
-        </div>
-    </div>
-
-    <div class="h-15 mb-8">
-        <CardDescription {content} />
-    </div>
-
-    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom}/>
-
-    {#if onButtonProfile || onButtonDetails}
-        <div class="flex justify-center items-center gap-2 mt-4 w-full">
-            {#if onButtonProfile}
-                <CardButton
-                    {id}
-                    icon={UserIcon}
-                    className={buttonProfileClass}
-                    text={$t("label.view.profile")}
-                    onClick={onButtonProfile}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-            {#if onButtonDetails}
-                <CardButton
-                    {id}
-                    icon={InformationCircleIcon}
-                    className={buttonDetailsClass}
-                    text={$t("label.more.details")}
-                    onClick={onButtonDetails}
-                    isFlex={isShowButtonProfileAndDetails}
-                />
-            {/if}
-        </div>
-    {/if}
-</article>
+<script lang="ts">
+    /**
+     * Card component with a title and content.
+     * @component
+     */
+    import {
+        InformationCircleIcon,
+        UserIcon,
+    } from "@hugeicons/core-free-icons";
+    import { t } from "../../../../../i18n";
+    import type { CardProfileProps } from "../../types";
+    import CardStarRating from "../../shared/CardStarRating.svelte";
+    import CardTags from "../../shared/CardTags.svelte";
+    import CardDescription from "../../shared/CardDescription.svelte";
+    import CardButton from "../../shared/CardButton.svelte";
+    import CardFavorite from "../../shared/CardFavorite.svelte";
+    let {
+        id,
+        tags,
+        logo,
+        title,
+        content,
+        className,
+        startNumber,
+        startMax = 5,
+        isTagBorderBottom = true,
+        isFavorite = false,
+        buttonProfileClass,
+        buttonDetailsClass,
+        onFavoriteClick,
+        onButtonProfile,
+        onButtonDetails,
+    }: CardProfileProps = $props();
+
+    let isShowButtonProfileAndDetails = $derived(
+        onButtonProfile != null && onButtonDetails != null,
+    );
+</script>
+
+<article
+    class="border border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-transparent rounded-lg p-5 space-y-1 md:space-y-3 {className}"
+>
+    <div class="flex flex-col justify-center items-center w-full relative">
+        <div class="flex flex-col justify-start gap-2">
+            <div class="flex justify-center items-center">
+                {#if logo}
+                    <img src={logo} alt={logo} class="w-12 h-12 rounded-lg" />
+                {/if}
+            </div>
+            <div class="flex flex-col justify-center items-center">
+                {#if title}
+                    <div class="text-center font-bold text-lg">{title}</div>
+                {/if}
+                {#if startNumber}
+                    <CardStarRating {startNumber} {startMax} />
+                {/if}
+            </div>
+        </div>
+        <div class="flex justify-end items-center absolute top-0 right-0">
+            <CardFavorite
+                {id}
+                {isFavorite}
+                onFavoriteClick={() => onFavoriteClick!(id)}
+            />
+        </div>
+    </div>
+
+    <div class="h-15 mb-8">
+        <CardDescription {content} />
+    </div>
+
+    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
+
+    {#if onButtonProfile || onButtonDetails}
+        <div class="flex justify-center items-center gap-2 mt-4 w-full">
+            {#if onButtonProfile}
+                <CardButton
+                    {id}
+                    icon={UserIcon}
+                    className={buttonProfileClass}
+                    text={$t("label.view.profile")}
+                    onClick={onButtonProfile}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+            {#if onButtonDetails}
+                <CardButton
+                    {id}
+                    icon={InformationCircleIcon}
+                    className={buttonDetailsClass}
+                    text={$t("label.more.details")}
+                    onClick={onButtonDetails}
+                    isFlex={isShowButtonProfileAndDetails}
+                />
+            {/if}
+        </div>
+    {/if}
+</article>

package/dist/components/core/card/profile/CardProfile.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-    import type { CardProfileProps } from "../types";
-    import CardProfile01 from "./01/CardProfile01.svelte";
-    import CardProfile02 from "./02/CardProfile02.svelte";
-
-    type Props = {
-        variant?: 1 | 2;
-    };
-
-    let { variant, ...restProps }: CardProfileProps & Props = $props();
-</script>
-
-{#if variant === 2}
-  <CardProfile02 {...restProps} />
-{:else}
-  <CardProfile01 {...restProps} />
-{/if}
+<script lang="ts">
+    import type { CardProfileProps } from "../types";
+    import CardProfile01 from "./01/CardProfile01.svelte";
+    import CardProfile02 from "./02/CardProfile02.svelte";
+
+    type Props = {
+        variant?: 1 | 2;
+    };
+
+    let { variant, ...restProps }: CardProfileProps & Props = $props();
+</script>
+
+{#if variant === 2}
+  <CardProfile02 {...restProps} />
+{:else}
+  <CardProfile01 {...restProps} />
+{/if}

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -1,81 +1,112 @@
-<script lang="ts">
-  import Button from "../../../ui/button/button.svelte";
-  import { t } from "../../../../i18n";
-  import CardCart from "../shared/CardCart.svelte";
-  import CardFavorite from "../shared/CardFavorite.svelte";
-  /**
-   * Card component with a title and content.
-   * @component
-   */
-  import type { CardPromotionProps } from "../types";
-
-  let {
-    id,
-    logo,
-    imageUrl,
-    title,
-    isFavorite = false,
-    isCart = false,
-    newPrice,
-    oldPrice,
-    buttonBuyText,
-    onClickBuy,
-    onClickShop,
-    onClickFavorite,
-  }: CardPromotionProps = $props();
-</script>
-
-<article class="relative rounded-sm bg-background">
-  <div class="relative w-full p-2">
-    {#if logo}
-      <div class="absolute top-1 left-1 z-2 hidden gap-1 p-2">
-        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-      </div>
-    {/if}
-
-    <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
-      <CardFavorite {id} {isFavorite} onFavoriteClick={onClickFavorite} />
-      <CardCart {id} {isCart} onCartClick={onClickShop} />
-    </div>
-
-    {#if imageUrl}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-      />
-    {/if}
-    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-
-    {#if newPrice || oldPrice}
-      <div class="absolute bottom-2 right-3 z-2 flex items-center gap-2 mb-1">
-        {#if oldPrice}
-          <div
-            class="text-[10px] md:text-sm line-through bg-red-500 text-white p-1 rounded-sm"
-          >
-            {oldPrice}
-          </div>
-        {/if}
-        {#if newPrice}
-          <div class="font-bold text-lg md:text-xl lg:text-2xl relative">
-            {newPrice}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <div
-    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
-  >
-    <div class="flex justify-between w-full items-center">
-      {#if title}
-        <div class="font-semibold line-clamp-1 flex-nowrap">
-          {title}
-        </div>
-      {/if}
-    </div>
-    <Button onclick={() => onClickBuy!(id)} class="w-full">
-      {buttonBuyText || $t("label.buy")}
-    </Button>
-  </div>
-</article>
+<script lang="ts">
+  import Button from "../../../ui/button/button.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../i18n";
+  import CardCart from "../shared/CardCart.svelte";
+  import CardDescription from "../shared/CardDescription.svelte";
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  import CardStartPrice from "../shared/CardStartPrice.svelte";
+  import CardTags from "../shared/CardTags.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    imageUrl,
+    isFavorite = false,
+    isCart = false,
+    isLoading = false,
+    newPrice,
+    oldPrice,
+    content,
+    buttonBuyText,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-lg border">
+  <aside class="relative w-full">
+    <div class="absolute top-1 left-1 z-2 gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
+      {:else if logo}
+        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+
+    <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={onClickFavorite}
+      />
+      <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg md:h-25 md:w-25 lg:h-45 lg:w-45 object-cover object-center bg-black/15"
+      />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-tr-lg rounded-tl-lg h-25 lg:h-45 w-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+
+  <aside
+    class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
+  >
+    <div class="flex justify-between w-full items-center mb-1">
+      {#if title}
+        {#if isLoading}
+          <Skeleton class="h-4 w-30 rounded-lg" />
+        {:else}
+          <div class="font-semibold line-clamp-1 flex-nowrap">
+            {title}
+          </div>
+        {/if}
+      {/if}
+    </div>
+
+    <div>
+      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
+    </div>
+
+    <div class="w-full mb-3">
+      <CardTags {tags} />
+    </div>
+
+    <div class="flex justify-start gap-2 w-full">
+      {#if isLoading}
+        <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+      {:else if newPrice || oldPrice}
+        <div>
+          <CardStartPrice {newPrice} {oldPrice} />
+        </div>
+      {/if}
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-9 w-full rounded-md" />
+    {:else}
+      <Button onclick={() => onClickBuy!(id)} class="w-full">
+        {buttonBuyText || $t("label.buy")}
+      </Button>
+    {/if}
+  </aside>
+</article>