negodesign 0.0.24 → 0.0.26

package/dist/components/core/card/promotion/data.js

@@ -1,8 +1,10 @@
+import { GlobalIcon, MapPin, NecklaceIcon } from "@hugeicons/core-free-icons";
 const items = [
     {
         id: 1,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Baía Azul',
+        content: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
         isFavorite: true,
         newPrice: 1000,
         oldPrice: 2000,
@@ -10,22 +12,34 @@ const items = [
         onClickBuy: () => alert('Comprar'),
         onClickShop: (id) => alert(`Shop ${id}`),
         isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 2,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Miramar Suites',
+        content: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
         newPrice: 1000,
         oldPrice: 2000,
         buttonBuyText: 'Comprar',
         onClickBuy: (id) => alert(`Buy ${id}`),
         onClickShop: (id) => alert(`Shop ${id}`),
         isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 3,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Palm Resort & Spa',
+        content: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
         isFavorite: true,
         newPrice: 1000,
         oldPrice: 2000,
@@ -33,22 +47,34 @@ const items = [
         onClickBuy: (id) => alert(`Buy ${id}`),
         onClickShop: (id) => alert(`Shop ${id}`),
         isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 4,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Central Park',
+        content: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
         newPrice: 1000,
         oldPrice: 2000,
         buttonBuyText: 'Comprar',
         onClickBuy: (id) => alert(`Buy ${id}`),
         onClickShop: (id) => alert(`Shop ${id}`),
         isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 5,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Villa Serena Boutique',
+        content: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
         isFavorite: true,
         newPrice: 1000,
         oldPrice: 2000,
@@ -56,6 +82,11 @@ const items = [
         onClickBuy: (id) => alert(`Buy ${id}`),
         onClickShop: (id) => alert(`Shop ${id}`),
         isCart: true,
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
 ];
 export default items;

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,32 +1,36 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import {
-    ShoppingCartAdd01Icon,
-    ShoppingCartRemove01Icon,
-  } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isCart: boolean;
-    onCartClick?: (id: string | number) => void;
-  };
-
-  let { id, isCart, onCartClick }: Props = $props();
-</script>
-
-{#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/CardCart.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     id: string | number;
     isCart: boolean;
+    isLoading?: boolean;
     onCartClick?: (id: string | number) => void;
 };
 declare const CardCart: import("svelte").Component<Props, {}, "">;

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

@@ -1,23 +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";
-    
-    type CardDescriptionProps = {
-        content?: string;
-    };
-
-    let { content }: CardDescriptionProps = $props();
-</script>
-
-{#if content}
-    <div class="mb-1 text-[14px] flex items-center gap-1">
-        <HugeiconsIcon icon={Message01Icon} class="h-4 w-4" />
-        <div>{$t("label.description")}</div>
-    </div>
-    <TruncatableText
-        text={content}
-        class="text-justify text-[13px] 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/CardDescription.svelte.d.ts

@@ -1,5 +1,8 @@
 type CardDescriptionProps = {
     content?: string;
+    isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
 };
 declare const CardDescription: import("svelte").Component<CardDescriptionProps, {}, "">;
 type CardDescription = ReturnType<typeof CardDescription>;

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

@@ -1,29 +1,33 @@
-<script lang="ts">
-  import { Button } from "../../../ui/button/index.js";
-  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  type Props = {
-    id: string | number;
-    isFavorite: boolean;
-    onFavoriteClick?: (id: string | number) => void;
-  };
-
-  let { id, isFavorite, onFavoriteClick }: Props = $props();
-</script>
-
-{#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/CardFavorite.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     id: string | number;
     isFavorite: boolean;
+    isLoading?: boolean;
     onFavoriteClick?: (id: string | number) => void;
 };
 declare const CardFavorite: import("svelte").Component<Props, {}, "">;

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

@@ -0,0 +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>

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

@@ -0,0 +1,8 @@
+type Props = {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    type?: "start" | "normal";
+};
+declare const CardStartPrice: import("svelte").Component<Props, {}, "">;
+type CardStartPrice = ReturnType<typeof CardStartPrice>;
+export default CardStartPrice;

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

@@ -1,56 +1,73 @@
-<script lang="ts">
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { CardTagsProps } from "../types";
-
-    type Props = {
-        className?: string;
-        tags: CardTagsProps[];
-        isTagBorderBottom?: boolean;
-        isWrap?: boolean;
-    };
-
-    const {
-        tags,
-        className,
-        isTagBorderBottom,
-        isWrap = 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}
-
-{#if tags && tags.length > 0}
-    {#if isWrap}
-        <div class="flex flex-wrap gap-2 md:gap-5 {className}">
-            {#each tags as tag, i (i)}
-                 {@render createBadge(tag)}
-            {/each}
-        </div>
-    {:else}
-        <div class="flex overflow-x-auto no-scrollbar w-full
-        {isJustify ? 'justify-between' : 'gap-4 md:gap-5 lg:gap-10'}
-        {className}">
-            {#each tags as tag, i (i)}
-                 {@render createBadge(tag)}
-            {/each}
-        </div>
-    {/if}
-{:else}
-    <div class="w-full h-5 {className}"></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}

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

@@ -1,9 +1,10 @@
 import type { CardTagsProps } from "../types";
 type Props = {
     className?: string;
-    tags: CardTagsProps[];
+    tags?: CardTagsProps[];
     isTagBorderBottom?: boolean;
     isWrap?: boolean;
+    isLoading?: boolean;
 };
 declare const CardTags: import("svelte").Component<Props, {}, "">;
 type CardTags = ReturnType<typeof CardTags>;