negodesign 0.0.28 → 0.0.30

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

@@ -1,98 +1,116 @@
 <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";
+  /**
+   * 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";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
 
-    let {
-        id,
-        tags,
-        logo,
-        title,
-        content,
-        startNumber,
-        startMax = 5,
-        isTagBorderBottom = true,
-        isFavorite = false,
-        buttonProfileClass,
-        buttonDetailsClass,
-        onFavoriteClick,
-        onButtonProfile,
-        onButtonDetails,
-    }: CardProfileProps = $props();
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    startNumber,
+    startMax = 5,
+    isTagBorderBottom = true,
+    isFavorite = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    isLoading = false,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardProfileProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  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"
+  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="flex justify-between items-center w-full mb-4">
+    <div class="flex justify-start gap-2">
+      <div class="flex justify-center items-center">
+        {#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" />
+        {/if}
+      </div>
+      <div class="flex-col">
+        {#if title}
+          <div class="text-center font-bold text-lg">{title}</div>
+        {:else if isLoading}
+          <Skeleton class="w-40 h-5 rounded-lg bg-gray-400 mb-0.5" />
+        {/if}
 
-    <div class="h-15 my-2">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-end items-center">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+        {isLoading}
+      />
     </div>
+  </div>
 
-    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+  <div class="h-15 my-2">
+    <CardDescription {content} {isLoading} />
+  </div>
 
-    {#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}
+  <CardTags
+    className="my-6"
+    tags={tags ?? []}
+    {isTagBorderBottom}
+    {isLoading}
+  />
+
+  {#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}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+          {isLoading}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>

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

@@ -1,98 +1,114 @@
 <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();
+  /**
+   * 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";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  let {
+    id,
+    tags,
+    logo,
+    title,
+    content,
+    className,
+    startNumber,
+    startMax = 5,
+    isTagBorderBottom = true,
+    isFavorite = false,
+    buttonProfileClass,
+    buttonDetailsClass,
+    isLoading = false,
+    onFavoriteClick,
+    onButtonProfile,
+    onButtonDetails,
+  }: CardProfileProps = $props();
 
-    let isShowButtonProfileAndDetails = $derived(
-        onButtonProfile != null && onButtonDetails != null,
-    );
+  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}"
+  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="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 isLoading}
+          <Skeleton class="w-12 h-12 rounded-lg bg-gray-400 mt-0.5" />
+        {:else 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>
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+        {/if}
 
-    <div class="h-15 mb-8">
-        <CardDescription {content} />
+        {#if startNumber}
+          <CardStarRating {startNumber} {startMax} {isLoading} />
+        {:else if isLoading}
+          <Skeleton class="w-20 h-4 rounded-lg bg-gray-300 mt-0.5" />
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-end items-center absolute top-0 right-0">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        onFavoriteClick={() => onFavoriteClick!(id)}
+        {isLoading}
+      />
     </div>
+  </div>
 
-    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
+  <div class="h-15 mb-8">
+    <CardDescription {content} {isLoading} />
+  </div>
 
-    {#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}
+  <CardTags
+    className="my-4"
+    tags={tags ?? []}
+    {isTagBorderBottom}
+    {isLoading}
+  />
+
+  {#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}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+      {#if onButtonDetails}
+        <CardButton
+          {id}
+          icon={InformationCircleIcon}
+          className={buttonDetailsClass}
+          text={$t("label.more.details")}
+          onClick={onButtonDetails}
+          isFlex={isShowButtonProfileAndDetails}
+        />
+      {:else if isLoading}
+        <Skeleton class="w-20 h-4 rounded-lg bg-gray-400 mt-0.5" />
+      {/if}
+    </div>
+  {/if}
 </article>

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

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

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

@@ -1,6 +1,7 @@
 import type { CardProfileProps } from "../types";
 type Props = {
     variant?: 1 | 2;
+    isLoading?: boolean;
 };
 type $$ComponentProps = CardProfileProps & Props;
 declare const CardProfile: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -29,6 +29,7 @@
     oldPrice,
     content,
     buttonBuyText,
+    buttonBuyClass,
     isDescriptionIcon,
     isDescriptionLabel,
     onClickBuy,
@@ -108,9 +109,11 @@
       <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
     </div>
 
-    <div class="w-full mb-2">
-      <CardTags {tags} />
-    </div>
+    {#if tags && tags.length > 0}
+      <div class="w-full mb-2">
+        <CardTags {tags} />
+      </div>
+    {/if}
 
     <div class="flex justify-start gap-2 w-full">
       {#if isLoading}
@@ -125,7 +128,10 @@
     {#if isLoading}
       <Skeleton class="h-9 w-full rounded-md" />
     {:else}
-      <Button onclick={() => onClickBuy!(id)} class="w-full">
+      <Button
+        onclick={() => onClickBuy!(id)}
+        class="w-full bottom-0 bg-gradient {buttonBuyClass}"
+      >
         {buttonBuyText || $t("label.buy")}
       </Button>
     {/if}

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

@@ -1,30 +1,45 @@
 <script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  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;
-    };
+  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, 
-        onClick 
-    }: CardButtonProps = $props();
+  let {
+    id,
+    icon,
+    isFlex,
+    className,
+    text,
+    isLoading,
+    onClick,
+  }: CardButtonProps = $props();
 </script>
 
-<Button
-    class="{isFlex ? 'flex-1' : ''} {className}"
+{#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 {isFlex ? 'flex-1' : ''} {className}"
     onclick={() => onClick(id)}
->
-    <HugeiconsIcon {icon} />
+  >
+    {#if icon}
+      {#if typeof icon === "string"}
+        <i class={icon}></i>
+      {:else}
+        <HugeiconsIcon {icon} />
+      {/if}
+    {/if}
     <span>{text}</span>
-</Button>
+  </Button>
+{/if}

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

@@ -1,10 +1,11 @@
 import { type IconSvgElement } from "@hugeicons/svelte";
 type CardButtonProps = {
     id: string | number;
-    icon: IconSvgElement;
+    icon?: IconSvgElement | string;
     isFlex?: boolean;
     className?: string;
     text: string;
+    isLoading?: boolean;
     onClick: (id: string | number) => void;
 };
 declare const CardButton: import("svelte").Component<CardButtonProps, {}, "">;

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";
+  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;
-    };
+  type CardDescriptionProps = {
+    content?: string;
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+  };
 
-    let {
-        content,
-        isLoading = false,
-        isDescriptionIcon = true,
-        isDescriptionLabel = true,
-    }: CardDescriptionProps = $props();
+  let {
+    content,
+    isLoading = false,
+    isDescriptionIcon = true,
+    isDescriptionLabel = true,
+  }: CardDescriptionProps = $props();
 </script>
 
 {#if isLoading}
-    <Skeleton class="w-full h-5" />
+  <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}
-        class="text-justify text-[13px] md:text-[14px] text-gray-800  dark:text-gray-50 mt-3 my-4"
-    />
+  {#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}11
+      <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/CardLogo.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Skeleton from "../../../ui/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/core/card/shared/CardLogo.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    logo?: string;
+    isLoading?: boolean;
+};
+declare const CardLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardLogo = ReturnType<typeof CardLogo>;
+export default CardLogo;