negodesign 0.0.13 → 0.0.15

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

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
+  import NavMenu from "../../nav/ui/nav-menu.svelte";
+  import type { Snippet } from "svelte";
+
+  let {
+    navMenu,
+    items,
+    children,
+    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-[300px] md:h-[400px] overflow-hidden"
+  >
+    {#each layers as bg, i (i)}
+      <div
+        class="absolute inset-0 bg-cover bg-center will-change-[opacity]"
+        style="
+          background-image: {bg ? `url(${bg})` : 'none'};
+          opacity: {i === active ? 1 : 0};
+          transition: opacity {transitionMs}ms ease-in-out;
+        "
+      ></div>
+    {/each}
+
+    <div class="absolute inset-0 bg-black/40"></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"
+            use:fadeIn
+          >
+            <h1 class="text-white text-2xl md:text-4xl font-bold">
+              {selected.title}
+            </h1>
+            <p class="text-white/90 mt-2 max-w-2xl">
+              {selected.description}
+            </p>
+          </div>
+        {/key}
+
+        {#if children}
+          {@render children()}
+        {/if}
+      </section>
+    </div>
+
+    {#if items && items.length > 1}
+      <div class="absolute bottom-3 z-10 flex gap-2">
+        {#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}

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

@@ -0,0 +1,10 @@
+import type { CarouselHeroProps } from "../types";
+import type { Snippet } from "svelte";
+type $$ComponentProps = CarouselHeroProps & {
+    children?: Snippet;
+    intervalMs?: number;
+    transitionMs?: number;
+};
+declare const CarouselHero: import("svelte").Component<$$ComponentProps, {}, "">;
+type CarouselHero = ReturnType<typeof CarouselHero>;
+export default CarouselHero;

package/dist/components/core/carousel/types.d.ts

@@ -1,5 +1,6 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
 import type { CardPromotionProps } from "../card/types";
+import type { NavMenuProps } from "../nav/data/nav-menu";
 export interface ItemCarousel {
     value: string;
     label: string;
@@ -32,3 +33,12 @@ export interface CarouselPromotionProps {
     containerClass?: string;
     onButtonViewAll?: () => void;
 }
+export interface CarouselHeroItem {
+    title: string;
+    image: string;
+    description: string;
+}
+export interface CarouselHeroProps {
+    navMenu: NavMenuProps;
+    items: CarouselHeroItem[];
+}

package/dist/components/core/hero/SimpleHero.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Button } from "../../ui/button/index.js";
+  import type { HeroSimpleProps } from "./types";
+  let {
+    title,
+    subTitle,
+    description,
+    image,
+    buttons,
+    titleClass,
+    subTitleClass,
+    descriptionClass,
+    imageClass,
+  }: HeroSimpleProps = $props();
+</script>
+
+<section class="relative flex p-2">
+  <div class="w-full grid grid-cols-10 md:grid-cols-2 min-h-50 md:min-h-125">
+    <div class="flex justify-center items-center">
+      <div class="space-y-1">
+        {#if title}
+          <h1
+            class="font-bold text-[24px] md:text-[60px] lg:text-[80px] {titleClass}"
+          >
+            {title}
+          </h1>
+        {/if}
+        {#if subTitle}
+          <p class="font-semibold text-[16px] md:text-[40px] {subTitleClass}">
+            {subTitle}
+          </p>
+        {/if}
+        {#if description}
+          <p
+            class="text-[12px] md:text-[20px] md:w-8/12 mt-5 {descriptionClass}"
+          >
+            {description}
+          </p>
+        {/if}
+        {#if buttons}
+          <div class="flex flex-wrap gap-2 mt-5 md:mt-10">
+            {#each buttons as button, i (i)}
+              <Button
+                href={button.href}
+                class={button.className}
+                onclick={button.onClick}
+              >
+                {button.label}
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+    <div class="flex justify-center items-center">
+      {#if image}
+        <img
+          src={image}
+          alt={image}
+          class="rounded-lg h-50 md:h-125 w-[60%] object-cover {imageClass}"
+        />
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/components/core/hero/SimpleHero.svelte.d.ts

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

package/dist/components/core/hero/types.d.ts

@@ -0,0 +1,18 @@
+export interface HeroButtonProps {
+    label: string;
+    href: string;
+    variant?: "primary" | "outline" | "ghost";
+    className?: string;
+    onClick?: () => void;
+}
+export interface HeroSimpleProps {
+    title?: string;
+    subTitle?: string;
+    description?: string;
+    image?: string;
+    buttons?: HeroButtonProps[];
+    titleClass?: string;
+    subTitleClass?: string;
+    descriptionClass?: string;
+    imageClass?: string;
+}

package/dist/components/core/hero/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/core/nav/data/nav-menu.d.ts

@@ -1,6 +1,7 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
 export interface NavMenuLogoProps {
     img?: string;
+    url?: string;
     label: string;
     className?: string;
     onclick?: () => void;
@@ -20,12 +21,15 @@ export interface NavMenuActionsProps {
     onclick?: () => void;
 }
 export interface NavMenuProps {
+    navClass?: string;
     linkClass?: string;
     buttonClass?: string;
     logo?: NavMenuLogoProps;
     links: NavMenuLinksProps[];
-    actions: NavMenuActionsProps[];
+    actions?: NavMenuActionsProps[];
     align?: 'LINK_SEPARATED_ACTIONS' | 'LINK_INTO_ACTIONS';
+    isLightSwitch?: boolean;
+    isLanguageSwitcher?: boolean;
     onclickButtonLogin?: () => void;
     onclickButtonRegister?: () => void;
 }

package/dist/components/core/nav/ui/nav-menu.svelte

@@ -1,98 +1,105 @@
 <script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { NavMenuProps } from "../data/nav-menu";
-    import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
-    import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
-    import { t } from "../../../../i18n";
-    import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
-    import { useIsMobile } from "../../../../hooks/responsive.svelte";
-    import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
-    import MenuLinks from "./menu-links.svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { NavMenuProps } from "../data/nav-menu";
+  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+  import { t } from "../../../../i18n";
+  import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+  import { useIsMobile } from "../../../../hooks/responsive.svelte";
+  import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
+  import MenuLinks from "./menu-links.svelte";
 
-    let {
-        logo,
-        links,
-        actions,
-        linkClass = "",
-        buttonClass = "",
-        align = "LINK_SEPARATED_ACTIONS",
-        onclickButtonLogin,
-        onclickButtonRegister,
-    }: NavMenuProps = $props();
+  let {
+    logo,
+    links,
+    actions,
+    navClass = "",
+    linkClass = "",
+    buttonClass = "",
+    align = "LINK_SEPARATED_ACTIONS",
+    isLightSwitch = false,
+    isLanguageSwitcher = false,
+    onclickButtonLogin,
+    onclickButtonRegister,
+  }: NavMenuProps = $props();
 
-    const responsive = useIsMobile();
+  const responsive = useIsMobile();
 </script>
 
 {#snippet actionButtons()}
-    <div class="flex items-center gap-2">
-        <LightSwitch />
-        <LanguageSwitcher />
-        {#each actions as item (item.label)}
-            <Button
-                variant={item.type === "LINK" ? "ghost" : "outline"}
-                class={item.className}
-                onclick={item.onclick}
-            >
-                {#if item.icon}
-                    <HugeiconsIcon icon={item.icon} />
-                {/if}
-                {item.label}
-            </Button>
-        {/each}
-        {#if onclickButtonRegister}
-            <Button
-                variant="outline"
-                onclick={onclickButtonRegister}
-                class={buttonClass}
-            >
-                <HugeiconsIcon icon={User03Icon} />
-                {$t("label.register")}
-            </Button>
-        {/if}
-        {#if onclickButtonLogin}
-            <Button
-                variant="outline"
-                onclick={onclickButtonLogin}
-                class={buttonClass}
-            >
-                <HugeiconsIcon icon={Login03Icon} />
-                {$t("label.login")}
-            </Button>
+  <div class="flex items-center gap-2">
+    {#if isLightSwitch}
+      <LightSwitch />
+    {/if}
+    {#if isLanguageSwitcher}
+      <LanguageSwitcher />
+    {/if}
+    {#each actions as item (item.label)}
+      <Button
+        variant={item.type === "LINK" ? "ghost" : "outline"}
+        class={item.className}
+        onclick={item.onclick}
+      >
+        {#if item.icon}
+          <HugeiconsIcon icon={item.icon} />
         {/if}
-    </div>
+        {item.label}
+      </Button>
+    {/each}
+    {#if onclickButtonRegister}
+      <Button
+        variant="outline"
+        onclick={onclickButtonRegister}
+        class={buttonClass}
+      >
+        <HugeiconsIcon icon={User03Icon} />
+        {$t("label.register")}
+      </Button>
+    {/if}
+    {#if onclickButtonLogin}
+      <Button
+        variant="outline"
+        onclick={onclickButtonLogin}
+        class={buttonClass}
+      >
+        <HugeiconsIcon icon={Login03Icon} />
+        {$t("label.login")}
+      </Button>
+    {/if}
+  </div>
 {/snippet}
 
-<nav class="flex items-center justify-between container py-5 md:px-5">
-    {#if logo}
-        <div>
-            {#if logo.img}
-                <img
-                    src={logo.img}
-                    alt="logo of site"
-                    class={`max-h-50 ${logo.className}`}
-                />
-            {:else if logo.label}
-                <span class={logo.className}>{logo.label}</span>
-            {/if}
-        </div>
-    {:else}
-        <div>
-            <span class="hidden">Logo</span>
-        </div>
-    {/if}
+<nav
+  class={`flex items-center justify-between container py-5 md:px-5 ${navClass}`}
+>
+  {#if logo}
+    <div>
+      {#if logo.img}
+        <img
+          src={logo.img}
+          alt="logo of site"
+          class={`max-h-50 ${logo.className}`}
+        />
+      {:else if logo.label}
+        <span class={logo.className}>{logo.label}</span>
+      {/if}
+    </div>
+  {:else}
+    <div>
+      <span class="hidden">Logo</span>
+    </div>
+  {/if}
 
-    {#if responsive.isMobile}
-        <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
-    {:else}
-        {#if align === "LINK_SEPARATED_ACTIONS"}
-            <MenuLinks {links} {linkClass} orientation="horizontal" />
-            {@render actionButtons()}
-        {:else if align === "LINK_INTO_ACTIONS"}
-            <div class="flex items-center gap-2">
-                <MenuLinks {links} {linkClass} orientation="vertical" />
-                {@render actionButtons()}
-            </div>
-        {/if}
-    {/if}
+  {#if responsive.isMobile}
+    <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
+  {:else if align === "LINK_SEPARATED_ACTIONS"}
+    <MenuLinks {links} {linkClass} orientation="horizontal" />
+    {@render actionButtons()}
+  {:else if align === "LINK_INTO_ACTIONS"}
+    <div class="flex items-center gap-2">
+      <MenuLinks {links} {linkClass} orientation="vertical" />
+      {@render actionButtons()}
+    </div>
+  {/if}
 </nav>