negodesign 0.0.80 → 0.0.82

package/dist/components/ui/carousel/core/grid/shared/ui/CarouselGridSlot.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import CarouselSlot from "../../../../../panel/CarouselSlot.svelte";
-  import type { CarouselSlotProps } from "../../../../../panel/type";
-  import { useDevice } from "../../../../../../../hooks/responsive.svelte";
-  import { autoplay } from "../../../../autoplay.js";
-  import type { GridProps } from "../../../../../grid/core/data/types";
-  import SimpleGrid from "../../../../../grid/core/ui/ItemsSimpleGrid.svelte";
-
-  type Props = {
-    slotProps?: CarouselSlotProps;
-    gridProps?: GridProps;
-    gridClass?: string;
-    children: Snippet;
-  };
-
-  const { slotProps, gridProps, gridClass, children }: Props = $props();
-
-  const responsive = useDevice();
-</script>
-
-{#if gridProps}
-  <SimpleGrid {...gridProps} />
-{/if}
-{#if responsive.isMobile}
-  <CarouselSlot
-    {...slotProps}
-    plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {@render children()}
-  </CarouselSlot>
-{:else}
-  <div
-    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-2 {gridClass}"
-  >
-    {@render children()}
-  </div>
-{/if}
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import CarouselSlot from "../../../../../panel/CarouselSlot.svelte";
+  import type { CarouselSlotProps } from "../../../../../panel/type";
+  import { useDevice } from "../../../../../../../hooks/responsive.svelte";
+  import { autoplay } from "../../../../autoplay.js";
+  import type { GridProps } from "../../../../../grid/core/data/types";
+  import SimpleGrid from "../../../../../grid/core/ui/ItemsSimpleGrid.svelte";
+
+  type Props = {
+    slotProps?: CarouselSlotProps;
+    gridProps?: GridProps;
+    gridClass?: string;
+    children: Snippet;
+  };
+
+  const { slotProps, gridProps, gridClass, children }: Props = $props();
+
+  const responsive = useDevice();
+</script>
+
+{#if gridProps}
+  <SimpleGrid {...gridProps} />
+{/if}
+{#if responsive.isMobile}
+  <CarouselSlot
+    {...slotProps}
+    plugins={[autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {@render children()}
+  </CarouselSlot>
+{:else}
+  <div
+    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-2 {gridClass}"
+  >
+    {@render children()}
+  </div>
+{/if}

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

@@ -1,181 +1,181 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Menu from "../../../../nav/ui/Menu.svelte";
-  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
-  import SimpleMenu from "../../../../nav/ui/SimpleMenu.svelte";
-  import ComplexMenu from "../../../../nav/ui/ComplexMenu.svelte";
-
-  let {
-    items,
-    menusProps,
-    simpleMenu,
-    complexMenu,
-    children,
-    className,
-    titleClass,
-    descriptionClass,
-    intervalMs = 5000,
-    transitionMs = 1200,
-    indicatorShow = false,
-    sectionClass,
-  }: CarouselHeroProps & {
-    children?: Snippet;
-    intervalMs?: number;
-    transitionMs?: number;
-    indicatorShow?: boolean;
-  } = $props();
-
-  const initialImage = $derived(items?.[0]?.image ?? "");
-  let layers = $state<[string, string]>(["", ""]);
-  let active = $state<0 | 1>(0);
-  let index = $state(0);
-  let switching = false;
-
-  // 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();
-      img.src = src;
-    });
-
-    preloadCache.set(src, promise);
-    return promise;
-  }
-
-  $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);
-
-    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}`)}
-      {@const src = bg || (i === 0 ? initialImage : "")}
-      <div
-        style="
-    position: absolute;
-    inset: 0;
-    will-change: opacity;
-    background-image: {src ? `url(${src})` : '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">
-      {#if menusProps}
-        {#if simpleMenu}
-          <Menu navMenu={simpleMenu} {...menusProps} />
-        {/if}
-        {#if complexMenu}
-          <Menu navMenu={complexMenu} {...menusProps} />
-        {/if}
-      {:else}
-        {#if simpleMenu}
-          <SimpleMenu {...simpleMenu} />
-        {/if}
-        {#if complexMenu}
-          <ComplexMenu {...complexMenu} />
-        {/if}
-      {/if}
-
-      <section
-        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4 {sectionClass}"
-      >
-        {#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 indicatorShow}
-      {#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}
-    {/if}
-  </header>
-{/if}
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Menu from "../../../../nav/ui/Menu.svelte";
+  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
+  import SimpleMenu from "../../../../nav/ui/SimpleMenu.svelte";
+  import ComplexMenu from "../../../../nav/ui/ComplexMenu.svelte";
+
+  let {
+    items,
+    menusProps,
+    simpleMenu,
+    complexMenu,
+    children,
+    className,
+    titleClass,
+    descriptionClass,
+    intervalMs = 5000,
+    transitionMs = 1200,
+    indicatorShow = false,
+    sectionClass,
+  }: CarouselHeroProps & {
+    children?: Snippet;
+    intervalMs?: number;
+    transitionMs?: number;
+    indicatorShow?: boolean;
+  } = $props();
+
+  const initialImage = $derived(items?.[0]?.image ?? "");
+  let layers = $state<[string, string]>(["", ""]);
+  let active = $state<0 | 1>(0);
+  let index = $state(0);
+  let switching = false;
+
+  // 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();
+      img.src = src;
+    });
+
+    preloadCache.set(src, promise);
+    return promise;
+  }
+
+  $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);
+
+    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}`)}
+      {@const src = bg || (i === 0 ? initialImage : "")}
+      <div
+        style="
+    position: absolute;
+    inset: 0;
+    will-change: opacity;
+    background-image: {src ? `url(${src})` : '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">
+      {#if menusProps}
+        {#if simpleMenu}
+          <Menu navMenu={simpleMenu} {...menusProps} />
+        {/if}
+        {#if complexMenu}
+          <Menu navMenu={complexMenu} {...menusProps} />
+        {/if}
+      {:else}
+        {#if simpleMenu}
+          <SimpleMenu {...simpleMenu} />
+        {/if}
+        {#if complexMenu}
+          <ComplexMenu {...complexMenu} />
+        {/if}
+      {/if}
+
+      <section
+        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4 {sectionClass}"
+      >
+        {#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 indicatorShow}
+      {#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}
+    {/if}
+  </header>
+{/if}

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

@@ -1,67 +1,67 @@
-<script lang="ts">
-  import CardHighlight from "../../../../card/core/highlight/CardHighlight.svelte";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
-  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
-  import * as Carousel from "../../../index.js";
-  import type { CarouselHighlightsProps } from "../types";
-  import { useDevice } from "../../../../../../hooks/responsive.svelte";
-  import { t } from "../../../../../../i18n";
-  import { autoplay } from "../../../autoplay.js";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    varient = 1,
-    isDescriptionIcon,
-    isDescriptionLabel,
-    onClickBtn,
-    onClickFavorite,
-  }: CarouselHighlightsProps = $props();
-
-  const responsive = useDevice();
-  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
-</script>
-
-<CarouselHeader {...headerProps}>
-  {#if isEmpty}
-    <NotFoundEmpty
-      title={$t("empty.highlights.title")}
-      description={$t("empty.highlights.description")}
-    />
-  {:else}
-    <CarouselSlot
-      {...slotProps}
-      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 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 basis-auto">
-            <CardHighlight
-              {...item}
-              {varient}
-              {isDescriptionIcon}
-              {isDescriptionLabel}
-              onClickBtn={(id: string | number) => {
-                item.onClickBtn?.(id);
-                onClickBtn?.(id);
-              }}
-              onClickFavorite={(id: string | number) => {
-                item.onClickFavorite?.(id);
-                onClickFavorite?.(id);
-              }}
-            />
-          </Carousel.Item>
-        {/each}
-      {/if}
-    </CarouselSlot>
-  {/if}
-</CarouselHeader>
+<script lang="ts">
+  import CardHighlight from "../../../../card/core/highlight/CardHighlight.svelte";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../index.js";
+  import type { CarouselHighlightsProps } from "../types";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../../i18n";
+  import { autoplay } from "../../../autoplay.js";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    varient = 1,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBtn,
+    onClickFavorite,
+  }: CarouselHighlightsProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.highlights.title")}
+      description={$t("empty.highlights.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      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 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 basis-auto">
+            <CardHighlight
+              {...item}
+              {varient}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+              onClickBtn={(id: string | number) => {
+                item.onClickBtn?.(id);
+                onClickBtn?.(id);
+              }}
+              onClickFavorite={(id: string | number) => {
+                item.onClickFavorite?.(id);
+                onClickFavorite?.(id);
+              }}
+            />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>