negodesign 0.0.55 → 0.0.57

package/dist/components/core/carousel/hero/{CarouselHero.svelte → ui/CarouselHero.svelte}

@@ -1,161 +1,163 @@
-<script lang="ts">
-  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
-  import NavMenu from "../../nav/ui/NavMenu.svelte";
-  import type { Snippet } from "svelte";
-
-  let {
-    items,
-    navMenu,
-    children,
-    className,
-    titleClass,
-    descriptionClass,
-    intervalMs = 5000,
-    transitionMs = 1200,
-    indicatorShow = false,
-    sectionClass,
-  }: CarouselHeroProps & {
-    children?: Snippet;
-    intervalMs?: number;
-    transitionMs?: number;
-    indicatorShow?: boolean;
-  } = $props();
-
-  let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
-  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}`)}
-      <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 {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}

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

@@ -1,60 +1,60 @@
-<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,
-    isBorder,
-  }: CarouselHeaderProps & Props = $props();
-</script>
-
-<div class="w-full flex justify-center">
-  <div
-    class="w-[95%] p-2 rounded-xl
-    {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
-    {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>
+<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,
+    isBorder,
+  }: CarouselHeaderProps & Props = $props();
+</script>
+
+<div class="w-full flex justify-center">
+  <div
+    class="w-[95%] p-2 rounded-xl
+    {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
+    {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/types.d.ts

@@ -1,5 +1,6 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
-import type { NavMenuProps } from "../nav/data/nav-menu";
+export type { CarouselBadgeProps } from "./badge/type";
+export type { CarouselHeroItem, CarouselHeroProps } from "./hero/types";
 /**
  * Item individual do CarouselBadge — categoria/opção com ícone,
  * imagem, label e callback de clique.
@@ -42,58 +43,3 @@ export interface CarouselHeaderProps {
     /** Exibe borda inferior no header */
     isBorder?: boolean;
 }
-/**
- * Props do CarouselBadge — carousel de badges/categorias
- * com orientação horizontal ou vertical.
- */
-export interface CarouselBadgeProps {
-    /** Lista de itens do carousel de badges */
-    items: ItemCarousel[];
-    /** Orientação do layout: horizontal (padrão) ou vertical */
-    orientation?: "horizontal" | "vertical";
-    /** Classe CSS personalizada para a imagem */
-    imageClass?: string;
-    /** Classe CSS personalizada para o ícone */
-    iconClass?: string;
-    /** Classe CSS personalizada para o label */
-    labelClass?: string;
-    /** Classe CSS personalizada para o estado ativo */
-    activeClass?: string;
-    /** Estado de carregamento (skeleton) */
-    isLoading?: boolean;
-    itemClass?: string;
-    btnNavClass?: string;
-    isBorderInline?: boolean;
-    showButton?: boolean;
-    itemStyle?: 'BORDER' | 'INLINE' | 'DEFAULT';
-    onClick?: (value: string | number) => void;
-}
-/**
- * Item individual do CarouselHero — slide com imagem,
- * título e descrição.
- */
-export interface CarouselHeroItem {
-    /** Título do slide hero */
-    title: string;
-    /** URL da imagem de fundo do slide */
-    image: string;
-    /** Descrição do slide */
-    description: string;
-}
-/**
- * Props do CarouselHero — carousel hero principal (ex: página de login)
- * com slides em fullscreen e menu de navegação sobreposto.
- */
-export interface CarouselHeroProps {
-    /** Lista de slides do hero */
-    items: CarouselHeroItem[];
-    /** Configuração do menu de navegação sobreposto */
-    navMenu: NavMenuProps;
-    /** Classe CSS adicional para o container */
-    className?: string;
-    /** Classe CSS personalizada para o título */
-    titleClass?: string;
-    /** Classe CSS personalizada para a descrição */
-    descriptionClass?: string;
-    sectionClass?: string;
-}

package/dist/components/core/datatable/ui/DataTableActions.svelte

@@ -1,28 +1,28 @@
-<script lang="ts" generics="T">
-    import type { CellContext } from "@tanstack/table-core";
-    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
-    import Button from "../../../ui/button/button.svelte";
-    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-
-    let { row }: CellContext<T, unknown> = $props();
-</script>
-
-<DropdownMenu.Root>
-    <DropdownMenu.Trigger>
-        {#snippet child({ props })}
-            <Button {...props} variant="ghost" class="size-8 p-0">
-                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
-                <span class="sr-only">Open menu</span>
-            </Button>
-        {/snippet}
-    </DropdownMenu.Trigger>
-    <DropdownMenu.Content align="end">
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Copy</DropdownMenu.Item
-        >
-        <DropdownMenu.Item onclick={() => console.log(row.original)}
-            >Delete</DropdownMenu.Item
-        >
-    </DropdownMenu.Content>
-</DropdownMenu.Root>
+<script lang="ts" generics="T">
+    import type { CellContext } from "@tanstack/table-core";
+    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+    import Button from "../../../ui/button/button.svelte";
+    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+
+    let { row }: CellContext<T, unknown> = $props();
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" class="size-8 p-0">
+                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
+                <span class="sr-only">Open menu</span>
+            </Button>
+        {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end">
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Copy</DropdownMenu.Item
+        >
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Delete</DropdownMenu.Item
+        >
+    </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/core/datatable/ui/DataTableCheckbox.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-    import { Checkbox } from "../../../ui/checkbox";
-
-    let {
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        onCheckedChange,
-        ...restProps
-    }: {
-        checked?: boolean;
-        indeterminate?: boolean;
-        onCheckedChange?: (value: boolean) => void;
-        [key: string]: unknown;
-    } = $props();
-</script>
-
-<Checkbox
-    bind:checked
-    bind:indeterminate
-    onCheckedChange={(v) => onCheckedChange?.(!!v)}
-    {...restProps}
-/>
+<script lang="ts">
+    import { Checkbox } from "../../../ui/checkbox";
+
+    let {
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        onCheckedChange,
+        ...restProps
+    }: {
+        checked?: boolean;
+        indeterminate?: boolean;
+        onCheckedChange?: (value: boolean) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<Checkbox
+    bind:checked
+    bind:indeterminate
+    onCheckedChange={(v) => onCheckedChange?.(!!v)}
+    {...restProps}
+/>