negodesign 0.0.59 → 0.0.60

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

@@ -1,109 +1,109 @@
-<script lang="ts">
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselBadgeProps } from "../../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-
-  const {
-    items = [],
-    imageClass,
-    iconClass,
-    labelClass,
-    activeClass = "bg-gradient text-white rounded-full px-3",
-    orientation = "horizontal",
-    itemStyle = "DEFAULT",
-    isBorderInline = false,
-    showButton = true,
-    isLoading = false,
-    btnNavClass,
-    itemClass,
-    onClick,
-  }: CarouselBadgeProps = $props();
-
-  const TOP_NAV = $derived(isBorderInline ? "top-5.5" : "top-7.5");
-  const borderB = $derived(
-    isBorderInline ? `border-b-2 ${itemStyle == "BORDER" ? "pb-2" : ""}` : "",
-  );
-  const isInlineBorder = $derived(isBorderInline && itemStyle == "INLINE");
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-3 md:size-6";
-
-  const responsive = useDevice();
-  const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
-
-  let selectedValue = $state<unknown>(undefined);
-
-  function isSelected(item: (typeof items)[number]) {
-    return item.value !== undefined && item.value === selectedValue;
-  }
-
-  function selectItem(item: (typeof items)[number]) {
-    selectedValue = item.value;
-    item.onClick?.(item.value);
-    onClick?.(item.value);
-  }
-</script>
-
-{#snippet itemVisual(item: (typeof items)[number])}
-  {#if item.image}
-    <img
-      src={item.image}
-      alt={item.label}
-      class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
-    />
-  {:else if typeof item.icon === "string"}
-    <i class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}></i>
-  {:else if item.icon}
-    <HugeiconsIcon
-      icon={item.icon}
-      class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-    />
-  {/if}
-{/snippet}
-
-{#if items.length > 0}
-  <Carousel.Root>
-    <Carousel.Content class={borderB}>
-      {#if isLoading}
-        <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-          {#each Array.from( { length: skeletonCount }, ) as _, i (`skeleton-${i}`)}
-            <Skeleton class="h-4 w-25 bg-gray-50/90" />
-          {/each}
-        </div>
-      {:else}
-        {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
-          <Carousel.Item
-            class="basis-auto relative"
-            onclick={() => selectItem(item)}
-          >
-            <div
-              class="flex gap-1 mx-2 p-1 justify-center items-center cursor-pointer relative hover:text-lg hover:font-bold
-            {isSelected(item)
-                ? isInlineBorder
-                  ? 'text-gradient font-bold'
-                  : activeClass
-                : ''} 
-            {itemStyle == 'BORDER' ? 'border-2 rounded-full min-w-25 px-1' : ''}
-            {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
-            {isInlineBorder ? 'pb-3' : ''}
-            {itemClass} 
-          "
-            >
-              {@render itemVisual(item)}
-              <div class={labelClass}>{item.label}</div>
-            </div>
-            {#if isSelected(item) && isInlineBorder}
-              <div class="absolute pt-5 w-full h-2 bg-gradient"></div>
-            {/if}
-          </Carousel.Item>
-        {/each}
-      {/if}
-    </Carousel.Content>
-    {#if showButton}
-      {@const navClass =
-        "absolute -translate-y-1/2 z-50 bg-blue-700! text-white! cursor-pointer"}
-      <Carousel.Previous class="-left-8 {navClass} {TOP_NAV} {btnNavClass}" />
-      <Carousel.Next class="-right-8 {navClass} {TOP_NAV} {btnNavClass}" />
-    {/if}
-  </Carousel.Root>
-{/if}
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselBadgeProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+
+  const {
+    items = [],
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass = "bg-gradient text-white rounded-full px-3",
+    orientation = "horizontal",
+    itemStyle = "DEFAULT",
+    isBorderInline = false,
+    showButton = true,
+    isLoading = false,
+    btnNavClass,
+    itemClass,
+    onClick,
+  }: CarouselBadgeProps = $props();
+
+  const TOP_NAV = $derived(isBorderInline ? "top-5.5" : "top-7.5");
+  const borderB = $derived(
+    isBorderInline ? `border-b-2 ${itemStyle == "BORDER" ? "pb-2" : ""}` : "",
+  );
+  const isInlineBorder = $derived(isBorderInline && itemStyle == "INLINE");
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3 md:size-6";
+
+  const responsive = useDevice();
+  const skeletonCount = $derived(responsive.isMobile ? 2 : 8);
+
+  let selectedValue = $state<unknown>(undefined);
+
+  function isSelected(item: (typeof items)[number]) {
+    return item.value !== undefined && item.value === selectedValue;
+  }
+
+  function selectItem(item: (typeof items)[number]) {
+    selectedValue = item.value;
+    item.onClick?.(item.value);
+    onClick?.(item.value);
+  }
+</script>
+
+{#snippet itemVisual(item: (typeof items)[number])}
+  {#if item.image}
+    <img
+      src={item.image}
+      alt={item.label}
+      class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
+  {:else if typeof item.icon === "string"}
+    <i class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}></i>
+  {:else if item.icon}
+    <HugeiconsIcon
+      icon={item.icon}
+      class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+    />
+  {/if}
+{/snippet}
+
+{#if items.length > 0}
+  <Carousel.Root>
+    <Carousel.Content class={borderB}>
+      {#if isLoading}
+        <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+          {#each Array.from( { length: skeletonCount }, ) as _, i (`skeleton-${i}`)}
+            <Skeleton class="h-4 w-25 bg-gray-50/90" />
+          {/each}
+        </div>
+      {:else}
+        {#each items as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
+          <Carousel.Item
+            class="basis-auto relative"
+            onclick={() => selectItem(item)}
+          >
+            <div
+              class="flex gap-1 mx-2 p-1 justify-center items-center cursor-pointer relative hover:text-lg hover:font-bold
+            {isSelected(item)
+                ? isInlineBorder
+                  ? 'text-gradient font-bold'
+                  : activeClass
+                : ''} 
+            {itemStyle == 'BORDER' ? 'border-2 rounded-full min-w-25 px-1' : ''}
+            {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
+            {isInlineBorder ? 'pb-3' : ''}
+            {itemClass} 
+          "
+            >
+              {@render itemVisual(item)}
+              <div class={labelClass}>{item.label}</div>
+            </div>
+            {#if isSelected(item) && isInlineBorder}
+              <div class="absolute pt-5 w-full h-2 bg-gradient"></div>
+            {/if}
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </Carousel.Content>
+    {#if showButton}
+      {@const navClass =
+        "absolute -translate-y-1/2 z-50 bg-blue-700! text-white! cursor-pointer"}
+      <Carousel.Previous class="-left-8 {navClass} {TOP_NAV} {btnNavClass}" />
+      <Carousel.Next class="-right-8 {navClass} {TOP_NAV} {btnNavClass}" />
+    {/if}
+  </Carousel.Root>
+{/if}

package/dist/components/core/carousel/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 "embla-carousel-autoplay";
-  import type { GridProps } from "../../../../grid/data/types";
-  import SimpleGrid from "../../../../grid/ui/SimpleGrid.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 lg:grid-cols-4 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 "embla-carousel-autoplay";
+  import type { GridProps } from "../../../../grid/data/types";
+  import SimpleGrid from "../../../../grid/ui/SimpleGrid.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 lg:grid-cols-4 gap-4 p-2 {gridClass}"
+  >
+    {@render children()}
+  </div>
+{/if}

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

@@ -1,163 +1,163 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Menu from "../../../nav/ui/Menu.svelte";
-  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
-
-  let {
-    items,
-    navMenu,
-    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">
-      <Menu {navMenu} />
-
-      <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";
+
+  let {
+    items,
+    navMenu,
+    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">
+      <Menu {navMenu} />
+
+      <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}