negodesign 0.0.20 → 0.0.21

package/dist/components/core/card/highlight/CardHighlight.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    logo,
+    imageUrl,
+    title,
+    isFavorite = false,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-sm">
+  {#if logo}
+    <div class="absolute top-1 left-1 z-2 flex 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 gap-1 p-2">
+    <CardFavorite {isFavorite} />
+  </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>
+
+  <div
+    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
+  >
+    {#if title}
+      <div class="text-center font-semibold text-[12px]">{title}</div>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/CardHighlight.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardPromotionProps } from "../types";
+declare const CardHighlight: import("svelte").Component<CardPromotionProps, {}, "">;
+type CardHighlight = ReturnType<typeof CardHighlight>;
+export default CardHighlight;

package/dist/components/core/card/highlight/data.d.ts

@@ -0,0 +1,3 @@
+import type { CardHighlightProps } from "../types";
+declare const items: CardHighlightProps[];
+export default items;

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

@@ -0,0 +1,31 @@
+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',
+        isFavorite: true,
+    },
+    {
+        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',
+    },
+    {
+        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',
+        isFavorite: true
+    },
+    {
+        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',
+    },
+    {
+        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',
+        isFavorite: true,
+    },
+];
+export default items;

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

@@ -1,4 +1,7 @@
 <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.
@@ -7,38 +10,72 @@
   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">
-  {#if logo}
-    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
-      <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-    </div>
-  {/if}
+<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 gap-1 p-2">
-    <CardFavorite {isFavorite} />
-  </div>
+    <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 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="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
+    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"
   >
-    {#if title}
-      <div class="text-center font-semibold text-[12px]">{title}</div>
-    {/if}
+    <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>

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

@@ -4,28 +4,58 @@ const items = [
         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',
         isFavorite: true,
+        newPrice: 1000,
+        oldPrice: 2000,
+        buttonBuyText: 'Comprar',
+        onClickBuy: () => alert('Comprar'),
+        onClickShop: (id) => alert(`Shop ${id}`),
+        isCart: true,
     },
     {
         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',
+        newPrice: 1000,
+        oldPrice: 2000,
+        buttonBuyText: 'Comprar',
+        onClickBuy: (id) => alert(`Buy ${id}`),
+        onClickShop: (id) => alert(`Shop ${id}`),
+        isCart: true,
     },
     {
         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',
-        isFavorite: true
+        isFavorite: true,
+        newPrice: 1000,
+        oldPrice: 2000,
+        buttonBuyText: 'Comprar',
+        onClickBuy: (id) => alert(`Buy ${id}`),
+        onClickShop: (id) => alert(`Shop ${id}`),
+        isCart: true,
     },
     {
         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',
+        newPrice: 1000,
+        oldPrice: 2000,
+        buttonBuyText: 'Comprar',
+        onClickBuy: (id) => alert(`Buy ${id}`),
+        onClickShop: (id) => alert(`Shop ${id}`),
+        isCart: true,
     },
     {
         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',
         isFavorite: true,
+        newPrice: 1000,
+        oldPrice: 2000,
+        buttonBuyText: 'Comprar',
+        onClickBuy: (id) => alert(`Buy ${id}`),
+        onClickShop: (id) => alert(`Shop ${id}`),
+        isCart: true,
     },
 ];
 export default items;

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

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

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

@@ -0,0 +1,8 @@
+type Props = {
+    id: string | number;
+    isCart: boolean;
+    onCartClick?: (id: string | number) => void;
+};
+declare const CardCart: import("svelte").Component<Props, {}, "">;
+type CardCart = ReturnType<typeof CardCart>;
+export default CardCart;

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

@@ -4,24 +4,25 @@
   import { HugeiconsIcon } from "@hugeicons/svelte";
 
   type Props = {
+    id: string | number;
     isFavorite: boolean;
-    onFavoriteClick?: () => void;
+    onFavoriteClick?: (id: string | number) => void;
   };
 
-  let { isFavorite, onFavoriteClick }: Props = $props();
+  let { id, isFavorite, onFavoriteClick }: Props = $props();
 </script>
 
 {#if isFavorite}
   <Button
     class="w-8 h-8 rounded-full bg-[#ce2356]"
-    onclick={() => onFavoriteClick!()}
+    onclick={() => onFavoriteClick!(id)}
   >
     <HugeiconsIcon icon={HeartRemoveIcon} />
   </Button>
 {:else}
   <Button
     class="w-8 h-8 rounded-full bg-[#808080]"
-    onclick={() => onFavoriteClick!()}
+    onclick={() => onFavoriteClick!(id)}
   >
     <HugeiconsIcon icon={HeartAddIcon} />
   </Button>

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

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

package/dist/components/core/card/types.d.ts

@@ -48,7 +48,20 @@ export interface CardPromotionProps {
     imageUrl?: string;
     title?: string;
     className?: string;
+    isCart?: boolean;
     isFavorite?: boolean;
     oldPrice?: string | number;
     newPrice?: string | number;
+    buttonBuyText?: string;
+    onClickBuy?: (id: string | number) => void;
+    onClickShop?: (id: string | number) => void;
+    onClickFavorite?: (id: string | number) => void;
+}
+export interface CardHighlightProps {
+    id: string | number;
+    logo?: string;
+    imageUrl?: string;
+    title?: string;
+    className?: string;
+    isFavorite?: boolean;
 }

package/dist/components/core/carousel/hero/CarouselHero.svelte

@@ -88,16 +88,19 @@
   >
     {#each layers as bg, i (i)}
       <div
-        class="absolute inset-0 bg-cover bg-center bg-no-repeat will-change-[opacity]"
+        class="absolute inset-0 will-change-[opacity]"
         style="
     background-image: {bg ? `url(${bg})` : 'none'};
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
     opacity: {i === active ? 1 : 0};
     transition: opacity {transitionMs}ms ease-in-out;
   "
       ></div>
     {/each}
 
-    <div class="absolute inset-0 bg-black/40"></div>
+    <div class="h-full absolute inset-0 bg-black/40"></div>
 
     <div class="relative z-10 w-full flex flex-col items-center flex-1">
       <NavMenu {...navMenu} />

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { CarouselHighlightsProps } from "../../types.js";
+  import Button from "../../../../ui/button/button.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import { t } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
+  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
+
+  const {
+    title,
+    items,
+    description,
+    titleClass,
+    descriptionClass,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    onButtonViewAll,
+  }: CarouselHighlightsProps = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div class="w-[95%] p-2 rounded-xl {containerClass}">
+    <div class="ml-10 flex flex-col gap-1">
+      <div class="flex justify-between">
+        <div>
+          {#if title}
+            <h1 class={`text-xl ${titleClass}`}>{title}</h1>
+          {/if}
+          {#if description}
+            <div class={`mt-3 w-11/12 ${descriptionClass}`}>
+              {description}
+            </div>
+          {/if}
+        </div>
+        {#if onButtonViewAll}
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="flex items-center gap-0.5"
+              onclick={onButtonViewAll}
+            >
+              {$t("label.view.full")}
+              <HugeiconsIcon icon={ArrowRight02Icon} />
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <CarouselSlot
+      isBorderBottom={false}
+      {isButtonPreviousAndNext}
+      {buttonPreviousAndNextClass}
+      containerClass="w-full"
+    >
+      {#each items as item (item.id)}
+        <div class="mx-2">
+          <CardHighlight {...item} />
+        </div>
+      {/each}
+    </CarouselSlot>
+  </div>
+</div>

package/dist/components/core/carousel/highlights/ui/CarouselHighlights.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CarouselHighlightsProps } from "../../types.js";
+declare const CarouselHighlights: import("svelte").Component<CarouselHighlightsProps, {}, "">;
+type CarouselHighlights = ReturnType<typeof CarouselHighlights>;
+export default CarouselHighlights;

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -10,6 +10,9 @@
   const {
     title,
     items,
+    description,
+    titleClass,
+    descriptionClass,
     isButtonPreviousAndNext = true,
     buttonPreviousAndNextClass = "",
     containerClass = "",
@@ -21,7 +24,16 @@
   <div class="w-[95%] p-2 rounded-xl {containerClass}">
     <div class="ml-10 flex flex-col gap-1">
       <div class="flex justify-between">
-        <div class="text-xl">{title ?? $t("label.promotion")}</div>
+        <div>
+          {#if title}
+            <h1 class={`text-xl ${titleClass}`}>{title}</h1>
+          {/if}
+          {#if description}
+            <div class={`mt-3 w-11/12 ${descriptionClass}`}>
+              {description}
+            </div>
+          {/if}
+        </div>
         {#if onButtonViewAll}
           <div>
             <Button

package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte

@@ -3,6 +3,7 @@
   import type { SimpleBadgeCarouselProps } from "../../types.js";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
 
   const {
     items,
@@ -11,14 +12,16 @@
     labelClass,
     activeClass,
     valueActive,
+    isLoading = false,
+    itemCarouselClass,
     orientation = "horizontal",
-    isBorderItem = true,
-    isBorderBottom = true,
+    isBorderItem = false,
+    isBorderBottom = false,
     isButtonPreviousAndNext = true,
     buttonPreviousAndNextClass = "",
   }: SimpleBadgeCarouselProps = $props();
 
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
 </script>
 
 <CarouselSlot
@@ -26,34 +29,52 @@
   {isButtonPreviousAndNext}
   {buttonPreviousAndNextClass}
 >
-  {#each items as item (item.value)}
-    <Carousel.Item
-      onclick={() => item.onClick?.(item.value)}
-      class={`
+  {#if isLoading}
+    {#each Array.from({ length: 10 }) as it (it)}
+      <Carousel.Item>
+        <Skeleton class="h-4 w-37.5" />
+      </Carousel.Item>
+    {/each}
+  {:else}
+    {#each items as item (item.value)}
+      <Carousel.Item
+        onclick={() => item.onClick?.(item.value)}
+        class={`
           flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
           ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
-          ${item.value === valueActive ? activeClass : ""}`}
-    >
-      <div
-        class={`
+          ${item.value === valueActive ? activeClass : ""}
+          ${itemCarouselClass}`}
+      >
+        <div
+          class={`
               flex gap-1 mx-2 p-0.5 justify-center items-center
                ${orientation === "horizontal" ? "flex-row" : "flex-col"}
           `}
-      >
-        {#if item.image}
-          <img
-            src={item.image}
-            alt={item.label}
-            class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
-          />
-        {:else if item.icon}
-          <HugeiconsIcon
-            icon={item.icon}
-            class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-          />
-        {/if}
-        <div class={`${labelClass}`}>{item.label}</div>
-      </div>
-    </Carousel.Item>
-  {/each}
+        >
+          {#if item.image}
+            <img
+              src={item.image}
+              alt={item.label}
+              class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+            />
+          {:else if item.icon}
+            {#if typeof item.icon === "string"}
+              <div>
+                <i
+                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
+                >
+                </i>
+              </div>
+            {:else}
+              <HugeiconsIcon
+                icon={item.icon}
+                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+              />
+            {/if}
+          {/if}
+          <div class={`${labelClass}`}>{item.label}</div>
+        </div>
+      </Carousel.Item>
+    {/each}
+  {/if}
 </CarouselSlot>

package/dist/components/core/carousel/types.d.ts

@@ -1,12 +1,12 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
-import type { CardPromotionProps } from "../card/types";
+import type { CardHighlightProps, CardPromotionProps } from "../card/types";
 import type { NavMenuProps } from "../nav/data/nav-menu";
 export interface ItemCarousel {
     value: string;
     label: string;
     image?: string;
     link?: string;
-    icon?: IconSvgElement;
+    icon?: IconSvgElement | string;
     isActive?: boolean;
     onClick?: (value: string) => void;
 }
@@ -18,14 +18,18 @@ export interface SimpleBadgeCarouselProps {
     labelClass?: string;
     activeClass?: string;
     valueActive?: string;
+    isLoading?: boolean;
     isBorderItem?: boolean;
     isBorderBottom?: boolean;
+    itemCarouselClass?: string;
     isButtonPreviousAndNext?: boolean;
     buttonPreviousAndNextClass?: string;
 }
 export interface CarouselPromotionProps {
     title?: string;
     description?: string;
+    titleClass?: string;
+    descriptionClass?: string;
     items: CardPromotionProps[];
     isBorderBottom?: boolean;
     isButtonPreviousAndNext?: boolean;
@@ -45,3 +49,15 @@ export interface CarouselHeroProps {
     titleClass?: string;
     descriptionClass?: string;
 }
+export interface CarouselHighlightsProps {
+    title?: string;
+    description?: string;
+    titleClass?: string;
+    descriptionClass?: string;
+    items: CardHighlightProps[];
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    onButtonViewAll?: () => void;
+}

package/dist/components/ui/skeleton/skeleton.svelte

@@ -12,6 +12,6 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn("bg-muted rounded-xl animate-pulse", className)}
+	class={cn("rounded-xl bg-muted animate-pulse", className)}
 	{...restProps}
 ></div>