negodesign 0.0.55 → 0.0.57

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../../../ui/dropdown-menu/index.js";
+  import type { NavigationMenuItemCardProps } from "../../../data/types";
+  import DropdownMenuListItem from "./DropdownMenuListItem.svelte";
+
+  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
+</script>
+
+{#snippet headerSnippet(label: string, description: string)}
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
+  <p
+    class="text-sm leading-tight {header?.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {description}
+  </p>
+{/snippet}
+
+<DropdownMenu.Sub>
+  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
+  <DropdownMenu.SubContent>
+    <ul class="grid gap-2 p-2 w-100 lg:w-125">
+      {#if header}
+        <li
+          class="row-span-3 relative"
+          style={header.imgUrl
+            ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+            : ``}
+        >
+          <a
+            href={header.href ?? "#"}
+            class={`flex h-full w-full flex-col justify-end p-4 ${
+              header.imgUrl
+                ? `no-underline outline-hidden select-none`
+                : `bg-linear-to-b from-muted/50 to-muted rounded-md`
+            }`}
+          >
+            {@render headerSnippet(header.label, header.description)}
+          </a>
+        </li>
+      {/if}
+      {#if items && items.length > 0}
+        {#each items as item, i (i)}
+          <DropdownMenuListItem {...item} />
+        {/each}
+      {/if}
+    </ul>
+  </DropdownMenu.SubContent>
+</DropdownMenu.Sub>

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemCard.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../../../ui/dropdown-menu/index.js";
+  import type { NavigationMenuItemGridProps } from "../../../data/types";
+  import DropdownMenuListItem from "./DropdownMenuListItem.svelte";
+
+  let { label, grids: items }: NavigationMenuItemGridProps = $props();
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
+    if (len > 5) return "md:grid-cols-3";
+    if (len % 3 == 0) return "md:grid-cols-3";
+    if (len % 2 == 0) return "md:grid-cols-2";
+    return "grid-cols-1";
+  };
+</script>
+
+<DropdownMenu.Sub>
+  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
+  {#if items}
+    {@const gridCols = cols()}
+    <DropdownMenu.SubContent>
+      <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols}`}>
+        {#each items as item, i (i)}
+          <DropdownMenuListItem {...item} />
+        {/each}
+      </ul>
+    </DropdownMenu.SubContent>
+  {/if}
+</DropdownMenu.Sub>

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemList.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../../../ui/dropdown-menu/index.js";
+  import type { NavigationMenuItemListProps } from "../../../data/types";
+
+  let { label, list }: NavigationMenuItemListProps = $props();
+</script>
+
+<DropdownMenu.Sub>
+  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
+  <DropdownMenu.SubContent>
+    <ul class="grid w-75 gap-4 p-2">
+      {#each list as item, i (i)}
+        <li>
+          <a href={item.href} class="block rounded-md p-2 no-underline hover:bg-accent">
+            <div class="font-medium">{item.title ?? ""}</div>
+            <div class="text-sm text-muted-foreground">
+              {item.content}
+            </div>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </DropdownMenu.SubContent>
+</DropdownMenu.Sub>

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemList.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItems.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import * as DropdownMenu from "../../../../../ui/dropdown-menu/index.js";
+  import type { NavigationMenuItemsProps } from "../../../data/types";
+
+  let { label, items }: NavigationMenuItemsProps = $props();
+</script>
+
+<DropdownMenu.Sub>
+  <DropdownMenu.SubTrigger>{label}</DropdownMenu.SubTrigger>
+  <DropdownMenu.SubContent>
+    <ul class="grid min-w-50 gap-4 p-1 md:p-2">
+      {#each items as item, i (i)}
+        <li>
+          <a
+            href={item.href}
+            class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent"
+          >
+            {item.title}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </DropdownMenu.SubContent>
+</DropdownMenu.Sub>

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItems.svelte.d.ts

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

package/dist/components/core/nav/ui/shared/{NavigationMenuItem.svelte → navigation/NavigationMenuItem.svelte}

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemProps } from "./types";
-  import { navigationMenuTriggerStyle } from "../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
-
-  let { label, href }: NavigationMenuItemProps = $props();
-</script>
-
-<NavigationMenu.Item>
-  <NavigationMenu.Link>
-    {#snippet child()}
-      <a {href} class={navigationMenuTriggerStyle()}>{label}</a>
-    {/snippet}
-  </NavigationMenu.Link>
-</NavigationMenu.Item>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
+  import type { NavigationMenuItemProps } from "../../../data/types";
+  import { navigationMenuTriggerStyle } from "../../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
+
+  let { label, href }: NavigationMenuItemProps = $props();
+</script>
+
+<NavigationMenu.Item>
+  <NavigationMenu.Link>
+    {#snippet child()}
+      <a {href} class={navigationMenuTriggerStyle()}>{label}</a>
+    {/snippet}
+  </NavigationMenu.Link>
+</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/{NavigationMenuItem.svelte.d.ts → navigation/NavigationMenuItem.svelte.d.ts}

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

package/dist/components/core/nav/ui/shared/{NavigationMenuItemCard.svelte → navigation/NavigationMenuItemCard.svelte}

@@ -1,62 +1,62 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemCardProps } from "./types";
-  import MenuListItem from "./MenuListItem.svelte";
-
-  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
-</script>
-
-{#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
-  <p
-    class="text-sm leading-tight {header?.descriptionClass ||
-      'text-muted-foreground'}"
-  >
-    {description}
-  </p>
-{/snippet}
-
-<NavigationMenu.Item>
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
-      {#if header}
-        <li
-          class="row-span-3 relative"
-          style={header.imgUrl
-            ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
-            : ``}
-        >
-          <NavigationMenu.Link
-            class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
-              header.imgUrl
-                ? `no-underline outline-hidden select-none`
-                : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
-            }`}
-          >
-            {#snippet child({ props })}
-              {#if header.imgUrl}
-                <a
-                  {...props}
-                  href={header.href ?? "#"}
-                  class="bg-transparent absolute left-2 bottom-2"
-                >
-                  {@render headerSnippet(header.label, header.description)}
-                </a>
-              {:else}
-                <a {...props} href={header.href ?? "#"}>
-                  {@render headerSnippet(header.label, header.description)}
-                </a>
-              {/if}
-            {/snippet}
-          </NavigationMenu.Link>
-        </li>
-      {/if}
-      {#if items && items.length > 0}
-        {#each items as item, i (i)}
-          <MenuListItem {...item} />
-        {/each}
-      {/if}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
+  import type { NavigationMenuItemCardProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+
+  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
+</script>
+
+{#snippet headerSnippet(label: string, description: string)}
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
+  <p
+    class="text-sm leading-tight {header?.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {description}
+  </p>
+{/snippet}
+
+<NavigationMenu.Item>
+  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
+  <NavigationMenu.Content>
+    <ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
+      {#if header}
+        <li
+          class="row-span-3 relative"
+          style={header.imgUrl
+            ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+            : ``}
+        >
+          <NavigationMenu.Link
+            class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
+              header.imgUrl
+                ? `no-underline outline-hidden select-none`
+                : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
+            }`}
+          >
+            {#snippet child({ props })}
+              {#if header.imgUrl}
+                <a
+                  {...props}
+                  href={header.href ?? "#"}
+                  class="bg-transparent absolute left-2 bottom-2"
+                >
+                  {@render headerSnippet(header.label, header.description)}
+                </a>
+              {:else}
+                <a {...props} href={header.href ?? "#"}>
+                  {@render headerSnippet(header.label, header.description)}
+                </a>
+              {/if}
+            {/snippet}
+          </NavigationMenu.Link>
+        </li>
+      {/if}
+      {#if items && items.length > 0}
+        {#each items as item, i (i)}
+          <MenuListItem {...item} />
+        {/each}
+      {/if}
+    </ul>
+  </NavigationMenu.Content>
+</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/{NavigationMenuItemCard.svelte.d.ts → navigation/NavigationMenuItemCard.svelte.d.ts}

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

package/dist/components/core/nav/ui/shared/{NavigationMenuItemGrid.svelte → navigation/NavigationMenuItemGrid.svelte}

@@ -1,32 +1,32 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemGridProps } from "./types";
-  import MenuListItem from "./MenuListItem.svelte";
-
-  let { label, grids: items }: NavigationMenuItemGridProps = $props();
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
-    if (len > 5) return "md:grid-cols-3";
-    if (len % 3 == 0) return "md:grid-cols-3";
-    if (len % 2 == 0) return "md:grid-cols-2";
-    return "grid-cols-1";
-  };
-</script>
-
-<NavigationMenu.Item>
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  {#if items}
-    {@const gridCols = cols()}
-    <NavigationMenu.Content>
-      <ul
-        class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
-      >
-        {#each items as item, i (i)}
-          <MenuListItem {...item} />
-        {/each}
-      </ul>
-    </NavigationMenu.Content>
-  {/if}
-</NavigationMenu.Item>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
+  import type { NavigationMenuItemGridProps } from "../../../data/types";
+  import MenuListItem from "../MenuListItem.svelte";
+
+  let { label, grids: items }: NavigationMenuItemGridProps = $props();
+
+  const cols = (): string => {
+    const len = items?.length ?? 0;
+    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
+    if (len > 5) return "md:grid-cols-3";
+    if (len % 3 == 0) return "md:grid-cols-3";
+    if (len % 2 == 0) return "md:grid-cols-2";
+    return "grid-cols-1";
+  };
+</script>
+
+<NavigationMenu.Item>
+  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
+  {#if items}
+    {@const gridCols = cols()}
+    <NavigationMenu.Content>
+      <ul
+        class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
+      >
+        {#each items as item, i (i)}
+          <MenuListItem {...item} />
+        {/each}
+      </ul>
+    </NavigationMenu.Content>
+  {/if}
+</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/{NavigationMenuItemGrid.svelte.d.ts → navigation/NavigationMenuItemGrid.svelte.d.ts}

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

package/dist/components/core/nav/ui/shared/{NavigationMenuItemList.svelte → navigation/NavigationMenuItemList.svelte}

@@ -1,24 +1,24 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemListProps } from "./types";
-
-  let { label, list }: NavigationMenuItemListProps = $props();
-</script>
-
-<NavigationMenu.Item class="hidden md:block">
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid w-75 gap-4 p-2">
-      {#each list as item, i (i)}
-        <li>
-          <NavigationMenu.Link href={item.href}>
-            <div class="font-medium">{item.title ?? ""}</div>
-            <div class="text-muted-foreground">
-              {item.content}
-            </div>
-          </NavigationMenu.Link>
-        </li>
-      {/each}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
+  import type { NavigationMenuItemListProps } from "../../../data/types";
+
+  let { label, list }: NavigationMenuItemListProps = $props();
+</script>
+
+<NavigationMenu.Item class="hidden md:block relative">
+  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
+  <NavigationMenu.Content>
+    <ul class="grid w-75 gap-4 p-2">
+      {#each list as item, i (i)}
+        <li>
+          <NavigationMenu.Link href={item.href}>
+            <div class="font-medium">{item.title ?? ""}</div>
+            <div class="text-muted-foreground">
+              {item.content}
+            </div>
+          </NavigationMenu.Link>
+        </li>
+      {/each}
+    </ul>
+  </NavigationMenu.Content>
+</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/{NavigationMenuItemList.svelte.d.ts → navigation/NavigationMenuItemList.svelte.d.ts}

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

package/dist/components/core/nav/ui/shared/{NavigationMenuItems.svelte → navigation/NavigationMenuItems.svelte}

@@ -1,21 +1,21 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemsProps } from "./types";
-
-  let { label, items }: NavigationMenuItemsProps = $props();
-</script>
-
-<NavigationMenu.Item class="hidden md:block">
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid min-w-50 gap-4 p-1 md:p-2">
-      {#each items as item, i (i)}
-        <li>
-          <NavigationMenu.Link href={item.href} class="py-1">
-            {item.title}
-          </NavigationMenu.Link>
-        </li>
-      {/each}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>
+<script lang="ts">
+  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
+  import type { NavigationMenuItemsProps } from "../../../data/types";
+
+  let { label, items }: NavigationMenuItemsProps = $props();
+</script>
+
+<NavigationMenu.Item class="hidden md:block relative">
+  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
+  <NavigationMenu.Content>
+    <ul class="grid min-w-50 gap-4 p-1 md:p-2">
+      {#each items as item, i (i)}
+        <li>
+          <NavigationMenu.Link href={item.href} class="py-1">
+            {item.title}
+          </NavigationMenu.Link>
+        </li>
+      {/each}
+    </ul>
+  </NavigationMenu.Content>
+</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/{NavigationMenuItems.svelte.d.ts → navigation/NavigationMenuItems.svelte.d.ts}

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

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

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