negodesign 0.0.25 → 0.0.27

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

@@ -1,158 +1,158 @@
-<script lang="ts">
-  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
-  import NavMenu from "../../nav/ui/nav-menu.svelte";
-  import type { Snippet } from "svelte";
-
-  let {
-    items,
-    navMenu,
-    children,
-    className,
-    titleClass,
-    descriptionClass,
-    intervalMs = 5000,
-    transitionMs = 1200,
-  }: CarouselHeroProps & {
-    children?: Snippet;
-    intervalMs?: number;
-    transitionMs?: number;
-  } = $props();
-
-  // Buffer duplo: duas camadas fixas, nunca desmontadas — só a opacidade muda.
-  let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
-  let active = $state<0 | 1>(0);
-  let index = $state(0);
-  let switching = false; // evita trocas sobrepostas se o intervalo disparar antes do preload acabar
-
-  // eslint-disable-next-line svelte/prefer-svelte-reactivity
-  const preloadCache = new Map<string, Promise<void>>();
-
-  function preload(src: string): Promise<void> {
-    if (!src) return Promise.resolve();
-    const cached = preloadCache.get(src);
-    if (cached) return cached;
-
-    const promise = new Promise<void>((resolve) => {
-      const img = new Image();
-      img.onload = () => resolve();
-      img.onerror = () => resolve(); // não bloqueia o carousel por uma imagem partida
-      img.src = src;
-    });
-
-    preloadCache.set(src, promise);
-    return promise;
-  }
-
-  // Pré-carrega todas as imagens uma vez, assim que os items ficam disponíveis.
-  $effect(() => {
-    items?.forEach((item) => void preload(item.image));
-  });
-
-  async function goTo(nextIndex: number) {
-    if (!items || nextIndex === index || switching) return;
-    switching = true;
-
-    const nextSrc = items[nextIndex].image;
-    await preload(nextSrc); // garante decode/cache antes de trocar a camada -> sem flash
-
-    const nextLayer = active === 0 ? 1 : 0;
-    layers[nextLayer] = nextSrc;
-    active = nextLayer;
-    index = nextIndex;
-    switching = false;
-  }
-
-  $effect(() => {
-    if (!items || items.length <= 1) return;
-
-    const timer = setInterval(() => {
-      goTo((index + 1) % items.length);
-    }, intervalMs);
-
-    return () => clearInterval(timer);
-  });
-
-  function fadeIn(node: HTMLElement) {
-    requestAnimationFrame(() => {
-      node.style.opacity = "1";
-    });
-    return {};
-  }
-
-  let selected = $derived<CarouselHeroItem | undefined>(items?.[index]);
-</script>
-
-{#if selected}
-  <header
-    class="w-full relative flex flex-col justify-center items-center h-75 md:h-100 overflow-hidden {className}"
-  >
-    {#each layers as bg, i (i)}
-      <div
-        style="
-    position: absolute;
-    inset: 0;
-    will-change: opacity;
-    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
-      style="position: absolute; inset: 0; height: 100%; background-color: rgba(0,0,0,0.4);"
-    ></div>
-
-    <div class="relative z-10 w-full flex flex-col items-center flex-1">
-      <NavMenu {...navMenu} />
-
-      <section
-        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4"
-      >
-        {#key selected.title}
-          <div
-            style="transition: opacity {transitionMs * 0.6}ms ease-in-out;"
-            class="opacity-0 flex flex-col justify-center items-center text-center"
-            use:fadeIn
-          >
-            <div>
-              <h1
-                class="text-white text-2xl md:text-4xl font-bold {titleClass}"
-              >
-                {selected.title}
-              </h1>
-            </div>
-            <div class="flex flex-col justify-center items-center">
-              <p class="text-white/90 mt-2 max-w-2xl {descriptionClass}">
-                {selected.description}
-              </p>
-            </div>
-          </div>
-        {/key}
-
-        {#if children}
-          {@render children()}
-        {/if}
-      </section>
-    </div>
-
-    {#if items && items.length > 1}
-      <div
-        style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
-      >
-        {#each items as item, i (i)}
-          <button
-            aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
-            class="w-2 h-2 rounded-full transition-colors {i === index
-              ? 'bg-white'
-              : 'bg-white/40'}"
-            onclick={() => goTo(i)}
-          ></button>
-        {/each}
-      </div>
-    {/if}
-  </header>
-{/if}
+<script lang="ts">
+  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
+  import NavMenu from "../../nav/ui/nav-menu.svelte";
+  import type { Snippet } from "svelte";
+
+  let {
+    items,
+    navMenu,
+    children,
+    className,
+    titleClass,
+    descriptionClass,
+    intervalMs = 5000,
+    transitionMs = 1200,
+  }: CarouselHeroProps & {
+    children?: Snippet;
+    intervalMs?: number;
+    transitionMs?: number;
+  } = $props();
+
+  // Buffer duplo: duas camadas fixas, nunca desmontadas — só a opacidade muda.
+  let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
+  let active = $state<0 | 1>(0);
+  let index = $state(0);
+  let switching = false; // evita trocas sobrepostas se o intervalo disparar antes do preload acabar
+
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const preloadCache = new Map<string, Promise<void>>();
+
+  function preload(src: string): Promise<void> {
+    if (!src) return Promise.resolve();
+    const cached = preloadCache.get(src);
+    if (cached) return cached;
+
+    const promise = new Promise<void>((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = () => resolve(); // não bloqueia o carousel por uma imagem partida
+      img.src = src;
+    });
+
+    preloadCache.set(src, promise);
+    return promise;
+  }
+
+  // Pré-carrega todas as imagens uma vez, assim que os items ficam disponíveis.
+  $effect(() => {
+    items?.forEach((item) => void preload(item.image));
+  });
+
+  async function goTo(nextIndex: number) {
+    if (!items || nextIndex === index || switching) return;
+    switching = true;
+
+    const nextSrc = items[nextIndex].image;
+    await preload(nextSrc); // garante decode/cache antes de trocar a camada -> sem flash
+
+    const nextLayer = active === 0 ? 1 : 0;
+    layers[nextLayer] = nextSrc;
+    active = nextLayer;
+    index = nextIndex;
+    switching = false;
+  }
+
+  $effect(() => {
+    if (!items || items.length <= 1) return;
+
+    const timer = setInterval(() => {
+      goTo((index + 1) % items.length);
+    }, intervalMs);
+
+    return () => clearInterval(timer);
+  });
+
+  function fadeIn(node: HTMLElement) {
+    requestAnimationFrame(() => {
+      node.style.opacity = "1";
+    });
+    return {};
+  }
+
+  let selected = $derived<CarouselHeroItem | undefined>(items?.[index]);
+</script>
+
+{#if selected}
+  <header
+    class="w-full relative flex flex-col justify-center items-center h-75 md:h-100 overflow-hidden {className}"
+  >
+    {#each layers as bg, i (`layer-${i}`)}
+      <div
+        style="
+    position: absolute;
+    inset: 0;
+    will-change: opacity;
+    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
+      style="position: absolute; inset: 0; height: 100%; background-color: rgba(0,0,0,0.4);"
+    ></div>
+
+    <div class="relative z-10 w-full flex flex-col items-center flex-1">
+      <NavMenu {...navMenu} />
+
+      <section
+        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4"
+      >
+        {#key selected.title}
+          <div
+            style="transition: opacity {transitionMs * 0.6}ms ease-in-out;"
+            class="opacity-0 flex flex-col justify-center items-center text-center"
+            use:fadeIn
+          >
+            <div>
+              <h1
+                class="text-white text-2xl md:text-4xl font-bold {titleClass}"
+              >
+                {selected.title}
+              </h1>
+            </div>
+            <div class="flex flex-col justify-center items-center">
+              <p class="text-white/90 mt-2 max-w-2xl {descriptionClass}">
+                {selected.description}
+              </p>
+            </div>
+          </div>
+        {/key}
+
+        {#if children}
+          {@render children()}
+        {/if}
+      </section>
+    </div>
+
+    {#if items && items.length > 1}
+      <div
+        style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
+      >
+        {#each items as item, i (`hero-dot-${i}`)}
+          <button
+            aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
+            class="w-2 h-2 rounded-full transition-colors {i === index
+              ? 'bg-white'
+              : 'bg-white/40'}"
+            onclick={() => goTo(i)}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  </header>
+{/if}

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

@@ -1,41 +1,63 @@
-<script lang="ts">
-  import CardHighlight from "../../../card/highlight/CardHighlight.svelte";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import type { CarouselHighlightsProps } from "../types";
-
-  const {
-    title,
-    items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    isLoading = false,
-    onButtonViewAll,
-  }: CarouselHighlightsProps = $props();
-</script>
-
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
-  <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    containerClass="w-full"
-  >
-    {#each items as item (item.id)}
-      <div class="mx-2">
-        <CardHighlight {...item} {isLoading} />
-      </div>
-    {/each}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  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,
+    items,
+    description,
+    titleClass,
+    descriptionClass,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    isLoading = false,
+    varient = 1,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onButtonViewAll,
+  }: CarouselHighlightsProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader
+  {title}
+  {description}
+  {titleClass}
+  {descriptionClass}
+  {containerClass}
+  {onButtonViewAll}
+>
+  <CarouselSlot
+    isBorderBottom={false}
+    {isButtonPreviousAndNext}
+    {buttonPreviousAndNextClass}
+    containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {#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, i (`highlight-${item.id ?? i}`)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/3">
+          <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,41 +1,64 @@
-<script lang="ts">
-  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import type { CarouselPromotionProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-
-  const {
-    title,
-    items,
-    description,
-    titleClass,
-    descriptionClass,
-    isButtonPreviousAndNext = true,
-    isLoading = false,
-    buttonPreviousAndNextClass = "",
-    containerClass = "",
-    onButtonViewAll,
-  }: CarouselPromotionProps = $props();
-</script>
-
-<CarouselHeader
-  {title}
-  {description}
-  {titleClass}
-  {descriptionClass}
-  {containerClass}
-  {onButtonViewAll}
->
-  <CarouselSlot
-    isBorderBottom={false}
-    {isButtonPreviousAndNext}
-    {buttonPreviousAndNextClass}
-    containerClass="w-full"
-  >
-    {#each items as item (item.id)}
-      <div class="mx-2">
-        <CardPromotion {...item} {isLoading} />
-      </div>
-    {/each}
-  </CarouselSlot>
-</CarouselHeader>
+<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,
+    items,
+    description,
+    titleClass,
+    descriptionClass,
+    isButtonPreviousAndNext = true,
+    isLoading = false,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    positionButtonPreviousAndNext,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onButtonViewAll,
+  }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader
+  {title}
+  {description}
+  {titleClass}
+  {descriptionClass}
+  {containerClass}
+  {onButtonViewAll}
+>
+  <CarouselSlot
+    isBorderBottom={false}
+    {isButtonPreviousAndNext}
+    {buttonPreviousAndNextClass}
+    {positionButtonPreviousAndNext}
+    containerClass="w-full"
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {#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, i (`promotion-${item.id ?? i}`)}
+        <Carousel.Item class="pl-2 md:basis-1/2 lg:basis-1/3">
+          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </CarouselSlot>
+</CarouselHeader>

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

@@ -1,50 +1,55 @@
-<script lang="ts">
-  import Button from "../../../../ui/button/button.svelte";
-  import { t } from "../../../../../i18n";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselHeaderProps } from "../../types";
-
-  const {
-    title,
-    description,
-    titleClass,
-    descriptionClass,
-    containerClass = "",
-    onButtonViewAll,
-    children,
-  }: CarouselHeaderProps = $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>
-  </div>
-  <div>{@render children()}</div>
-</div>
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import { t } from "../../../../../i18n";
+  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,
+    description,
+    titleClass,
+    descriptionClass,
+    containerClass = "",
+    onButtonViewAll,
+    children,
+  }: CarouselHeaderProps & Props = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <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 ${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>
+    <div>{@render children()}</div>
+  </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;