negodesign 0.0.25 → 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/CardDescription.svelte

@@ -3,21 +3,36 @@
     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 }: CardDescriptionProps = $props();
+    let {
+        content,
+        isLoading = false,
+        isDescriptionIcon = true,
+        isDescriptionLabel = true,
+    }: 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>
+{#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] text-gray-800  dark:text-gray-50 mt-3 my-4"
+        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/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,12 +1,14 @@
 <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[];
+        tags?: CardTagsProps[];
         isTagBorderBottom?: boolean;
         isWrap?: boolean;
+        isLoading?: boolean;
     };
 
     const {
@@ -14,9 +16,10 @@
         className,
         isTagBorderBottom,
         isWrap = false,
+        isLoading = false,
     }: Props = $props();
 
-    let isJustify = $derived(tags.length == 2 || tags.length == 3);
+    let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
 </script>
 
 {#snippet createBadge(tag: CardTagsProps)}
@@ -35,22 +38,36 @@
     </div>
 {/snippet}
 
-{#if tags && tags.length > 0}
-    {#if isWrap}
-        <div class="flex flex-wrap gap-2 md:gap-5 {className}">
+{#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)}
+                {@render createBadge(tag)}
             {/each}
-        </div>
-    {:else}
-        <div class="flex overflow-x-auto no-scrollbar w-full
+        {/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}">
+        {className}"
+    >
+        {#if isLoading}
+            {@render skeletonTag()}
+        {:else if tags && tags.length > 0}
             {#each tags as tag, i (i)}
-                 {@render createBadge(tag)}
+                {@render createBadge(tag)}
             {/each}
-        </div>
-    {/if}
-{:else}
-    <div class="w-full h-5 {className}"></div>
+        {/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>;

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

@@ -47,13 +47,17 @@ export interface CardPromotionProps {
     logo?: string;
     imageUrl?: string;
     title?: string;
+    content?: string;
     className?: string;
     isCart?: boolean;
-    isFavorite?: boolean;
     isLoading?: boolean;
+    isFavorite?: boolean;
+    tags?: CardTagsProps[];
     oldPrice?: string | number;
     newPrice?: string | number;
     buttonBuyText?: string;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
     onClickBuy?: (id: string | number) => void;
     onClickShop?: (id: string | number) => void;
     onClickFavorite?: (id: string | number) => void;
@@ -65,4 +69,12 @@ export interface CardHighlightProps {
     title?: string;
     className?: string;
     isFavorite?: boolean;
+    isLoading?: boolean;
+    content?: string;
+    buttonText?: string;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
+    tags?: CardTagsProps[];
+    onClickFavorite?: (id: string | number) => void;
+    onClickBtn?: (id: string | number) => void;
 }

package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte

@@ -4,6 +4,7 @@
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import CarouselSlot from "../../../panel/CarouselSlot.svelte";
   import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
 
   const {
     items,
@@ -22,6 +23,7 @@
   }: CarouselBadgeProps = $props();
 
   const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
+  const responsive = useDevice();
 </script>
 
 <CarouselSlot
@@ -30,11 +32,12 @@
   {buttonPreviousAndNextClass}
 >
   {#if isLoading}
-    {#each Array.from({ length: 10 }) as it (it)}
-      <Carousel.Item>
-        <Skeleton class="h-4 w-37.5" />
-      </Carousel.Item>
-    {/each}
+    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as it, i (i)}
+        <Skeleton class="h-4 w-25 bg-black/20" />
+        <div class="src-only">{it}</div>
+      {/each}
+    </div>
   {:else}
     {#each items as item, i (i)}
       <Carousel.Item

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

@@ -2,8 +2,11 @@ import type { CardHighlightProps } from "../../card/types";
 import type { CarouselHeaderProps } from "../types";
 export interface CarouselHighlightsProps extends CarouselHeaderProps {
     items: CardHighlightProps[];
+    varient?: 1 | 2;
     isBorderBottom?: boolean;
     isLoading?: boolean;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
     isButtonPreviousAndNext?: boolean;
     buttonPreviousAndNextClass?: string;
 }

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

@@ -2,7 +2,10 @@
   import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
   import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
   import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
   import type { CarouselHighlightsProps } from "../types";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
 
   const {
     title,
@@ -14,8 +17,13 @@
     buttonPreviousAndNextClass = "",
     containerClass = "",
     isLoading = false,
+    varient = 1,
+    isDescriptionIcon,
+    isDescriptionLabel,
     onButtonViewAll,
   }: CarouselHighlightsProps = $props();
+
+  const responsive = useDevice();
 </script>
 
 <CarouselHeader
@@ -31,11 +39,25 @@
     {isButtonPreviousAndNext}
     {buttonPreviousAndNextClass}
     containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
   >
-    {#each items as item (item.id)}
-      <div class="mx-2">
-        <CardHighlight {...item} {isLoading} />
-      </div>
-    {/each}
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-auto">
+          <CardHighlight id={i} {isLoading} {varient} />
+        </Carousel.Item>
+      {/each}
+    {:else}
+      {#each items as item (item.id)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-auto">
+          <CardHighlight
+            {...item}
+            {varient}
+            {isDescriptionIcon}
+            {isDescriptionLabel}
+          />
+        </Carousel.Item>
+      {/each}
+    {/if}
   </CarouselSlot>
 </CarouselHeader>

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

@@ -6,4 +6,6 @@ export interface CarouselPromotionProps extends CarouselHeaderProps {
     isLoading?: boolean;
     isButtonPreviousAndNext?: boolean;
     buttonPreviousAndNextClass?: string;
+    isDescriptionIcon?: boolean;
+    isDescriptionLabel?: boolean;
 }

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

@@ -1,8 +1,11 @@
 <script lang="ts">
   import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
   import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
   import type { CarouselPromotionProps } from "../types";
   import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
 
   const {
     title,
@@ -14,8 +17,13 @@
     isLoading = false,
     buttonPreviousAndNextClass = "",
     containerClass = "",
+    positionButtonPreviousAndNext,
+    isDescriptionIcon,
+    isDescriptionLabel,
     onButtonViewAll,
   }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
 </script>
 
 <CarouselHeader
@@ -30,12 +38,27 @@
     isBorderBottom={false}
     {isButtonPreviousAndNext}
     {buttonPreviousAndNextClass}
+    {positionButtonPreviousAndNext}
     containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
   >
-    {#each items as item (item.id)}
-      <div class="mx-2">
-        <CardPromotion {...item} {isLoading} />
-      </div>
-    {/each}
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/4">
+          <CardPromotion
+            id={i}
+            {isLoading}
+            {isDescriptionIcon}
+            {isDescriptionLabel}
+          />
+        </Carousel.Item>
+      {/each}
+    {:else}
+      {#each items as item (item.id)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/4">
+          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+        </Carousel.Item>
+      {/each}
+    {/if}
   </CarouselSlot>
 </CarouselHeader>

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

@@ -4,6 +4,11 @@
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
   import type { CarouselHeaderProps } from "../../types";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children: Snippet;
+  };
 
   const {
     title,
@@ -13,19 +18,19 @@
     containerClass = "",
     onButtonViewAll,
     children,
-  }: CarouselHeaderProps = $props();
+  }: CarouselHeaderProps & Props = $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="w-[95%] p-2 rounded-xl border {containerClass}">
+    <div class="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}`}>
+            <div class={`mt-3 ${descriptionClass}`}>
               {description}
             </div>
           {/if}
@@ -45,6 +50,6 @@
         {/if}
       </div>
     </div>
+    <div>{@render children()}</div>
   </div>
-  <div>{@render children()}</div>
 </div>

package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte.d.ts

@@ -1,4 +1,9 @@
 import type { CarouselHeaderProps } from "../../types";
-declare const CarouselHeader: import("svelte").Component<CarouselHeaderProps, {}, "">;
+import type { Snippet } from "svelte";
+type Props = {
+    children: Snippet;
+};
+type $$ComponentProps = CarouselHeaderProps & Props;
+declare const CarouselHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type CarouselHeader = ReturnType<typeof CarouselHeader>;
 export default CarouselHeader;

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

@@ -1,6 +1,5 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
 import type { NavMenuProps } from "../nav/data/nav-menu";
-import type { Snippet } from "svelte";
 export interface ItemCarousel {
     value: string;
     label: string;
@@ -17,7 +16,7 @@ export interface CarouselHeaderProps {
     descriptionClass?: string;
     containerClass?: string;
     onButtonViewAll?: () => void;
-    children: Snippet;
+    positionButtonPreviousAndNext?: "center" | "top_right";
 }
 export interface CarouselBadgeProps {
     items: ItemCarousel[];

package/dist/components/core/nav/ui/nav-menu.svelte

@@ -6,7 +6,7 @@
   import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
   import { t } from "../../../../i18n";
   import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
-  import { useIsMobile } from "../../../../hooks/responsive.svelte";
+  import { useDevice } from "../../../../hooks/responsive.svelte";
   import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
   import MenuLinks from "./menu-links.svelte";
 
@@ -25,7 +25,7 @@
     onclickButtonRegister,
   }: NavMenuProps = $props();
 
-  const responsive = useIsMobile();
+  const responsive = useDevice();
 </script>
 
 {#snippet actionButtons()}
@@ -36,7 +36,7 @@
     {#if isLanguageSwitcher}
       <LanguageSwitcher />
     {/if}
-    {#each (actions ?? []) as item (item.label)}
+    {#each actions ?? [] as item (item.label)}
       <Button
         variant={item.type === "LINK" ? "ghost" : "outline"}
         class={item.className}

package/dist/components/core/panel/CarouselSlot.svelte

@@ -1,38 +1,63 @@
 <script lang="ts">
   import * as Carousel from "../../ui/carousel/index.js";
   import type { Snippet } from "svelte";
+  import type { CarouselPlugins } from "../../ui/carousel/context.js";
 
   type Props = {
-    isBorderBottom?: boolean;
-    isButtonPreviousAndNext?: boolean;
+    positionButtonPreviousAndNext?: "center" | "top_right";
     buttonPreviousAndNextClass?: string;
+    isButtonPreviousAndNext?: boolean;
+    isBorderBottom?: boolean;
     containerClass?: string;
+    plugins?: CarouselPlugins;
     children: Snippet;
   };
 
   const {
-    isBorderBottom = true,
+    positionButtonPreviousAndNext = "center",
     isButtonPreviousAndNext = true,
     buttonPreviousAndNextClass = "",
+    isBorderBottom = true,
     containerClass = "",
+    plugins = [],
     children,
   }: Props = $props();
+
+  const styleTopCenter = "bg-blue-700! text-white! cursor-pointer!";
+  const styleCenter =
+    "absolute top-1/2 -translate-y-1/2 mt-0.5 mr-0 z-50 bg-blue-700! text-white! cursor-pointer!";
 </script>
 
 <div
   class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
 >
-  <Carousel.Root>
-    <Carousel.Content class="ml-10">
+  <Carousel.Root {plugins}>
+    <Carousel.Content
+      class={positionButtonPreviousAndNext == "top_right" ? "" : "ml-0"}
+    >
       {@render children()}
     </Carousel.Content>
-    {#if isButtonPreviousAndNext}
-      <Carousel.Previous
-        class={`absolute top-1/2 -translate-y-1/2 left-1 mt-0.5 ${buttonPreviousAndNextClass}`}
-      />
-      <Carousel.Next
-        class={`absolute top-1/2 -translate-y-1/2 right-1 mt-0.5 ${buttonPreviousAndNextClass}`}
-      />
+    {#if positionButtonPreviousAndNext == "center"}
+      {#if isButtonPreviousAndNext}
+        <Carousel.Previous
+          class={`-left-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+        <Carousel.Next
+          class={`-right-8 ${styleCenter} ${buttonPreviousAndNextClass}`}
+        />
+      {/if}
+    {/if}
+    {#if positionButtonPreviousAndNext == "top_right"}
+      {#if isButtonPreviousAndNext}
+        <div class="absolute -top-6 right-10 md:right-10 lg:right-12 z-20">
+          <Carousel.Previous
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+          <Carousel.Next
+            class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}
+          />
+        </div>
+      {/if}
     {/if}
   </Carousel.Root>
 </div>