negodesign 0.0.12 → 0.0.14

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import CardFavorite from "../shared/CardFavorite.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardPromotionProps } from "../types";
+
+  let {
+    logo,
+    imageUrl,
+    title,
+    isFavorite = false,
+  }: CardPromotionProps = $props();
+</script>
+
+<article class="relative rounded-sm">
+  {#if logo}
+    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
+      <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
+    </div>
+  {/if}
+
+  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
+    <CardFavorite {isFavorite} />
+  </div>
+
+  {#if imageUrl}
+    <img
+      src={imageUrl}
+      alt={imageUrl}
+      class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
+    />
+  {/if}
+  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+
+  <div
+    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
+  >
+    {#if title}
+      <div class="text-center font-semibold text-[12px]">{title}</div>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/promotion/CardPromotion.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardPromotionProps } from "../types";
+declare const CardPromotion: import("svelte").Component<CardPromotionProps, {}, "">;
+type CardPromotion = ReturnType<typeof CardPromotion>;
+export default CardPromotion;

package/dist/components/core/card/promotion/data.d.ts

@@ -0,0 +1,3 @@
+import type { CardPromotionProps } from "../types";
+declare const items: CardPromotionProps[];
+export default items;

package/dist/components/core/card/promotion/data.js

@@ -0,0 +1,31 @@
+const items = [
+    {
+        id: 1,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Hotel Baía Azul',
+        isFavorite: true,
+    },
+    {
+        id: 2,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Miramar Suites',
+    },
+    {
+        id: 3,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Palm Resort & Spa',
+        isFavorite: true
+    },
+    {
+        id: 4,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Hotel Central Park',
+    },
+    {
+        id: 5,
+        imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        title: 'Villa Serena Boutique',
+        isFavorite: true,
+    },
+];
+export default items;

package/dist/components/core/card/shared/CardFavorite.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-    import { Button } from "../../../ui/button/index.js";
-    import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Button } from "../../../ui/button/index.js";
+  import { HeartAddIcon, HeartRemoveIcon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
 
-    type Props = {
-        isFavorite: boolean;
-        onFavoriteClick: () => void;
-    };
+  type Props = {
+    isFavorite: boolean;
+    onFavoriteClick?: () => void;
+  };
 
-    let { isFavorite, onFavoriteClick }: Props = $props();
+  let { isFavorite, onFavoriteClick }: Props = $props();
 </script>
 
 {#if isFavorite}
-    <Button
-        class="w-8 h-8 rounded-full bg-[#ce2356]"
-        onclick={() => onFavoriteClick!()}
-    >
-        <HugeiconsIcon icon={HeartRemoveIcon} />
-    </Button>
+  <Button
+    class="w-8 h-8 rounded-full bg-[#ce2356]"
+    onclick={() => onFavoriteClick!()}
+  >
+    <HugeiconsIcon icon={HeartRemoveIcon} />
+  </Button>
 {:else}
-    <Button
-        class="w-8 h-8 rounded-full bg-[#808080]"
-        onclick={() => onFavoriteClick!()}
-    >
-        <HugeiconsIcon icon={HeartAddIcon} />
-    </Button>
+  <Button
+    class="w-8 h-8 rounded-full bg-[#808080]"
+    onclick={() => onFavoriteClick!()}
+  >
+    <HugeiconsIcon icon={HeartAddIcon} />
+  </Button>
 {/if}

package/dist/components/core/card/shared/CardFavorite.svelte.d.ts

@@ -1,6 +1,6 @@
 type Props = {
     isFavorite: boolean;
-    onFavoriteClick: () => void;
+    onFavoriteClick?: () => void;
 };
 declare const CardFavorite: import("svelte").Component<Props, {}, "">;
 type CardFavorite = ReturnType<typeof CardFavorite>;

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

@@ -42,3 +42,13 @@ export interface CardProfileProps {
     onButtonProfile?: (id: string | number) => void;
     onButtonDetails?: (id: string | number) => void;
 }
+export interface CardPromotionProps {
+    id: string | number;
+    logo?: string;
+    imageUrl?: string;
+    title?: string;
+    className?: string;
+    isFavorite?: boolean;
+    oldPrice?: string | number;
+    newPrice?: string | number;
+}

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/promotion/ui/CarouselPromotion.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import type { CarouselPromotionProps } from "../../types.js";
+  import Button from "../../../../ui/button/button.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import { t } from "../../../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight02Icon } from "@hugeicons/core-free-icons";
+
+  const {
+    title,
+    items,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    onButtonViewAll,
+  }: CarouselPromotionProps = $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 class="text-xl">{title ?? $t("label.promotion")}</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>
+    <CarouselSlot
+      isBorderBottom={false}
+      {isButtonPreviousAndNext}
+      {buttonPreviousAndNextClass}
+      containerClass="w-full"
+    >
+      {#each items as item (item.id)}
+        <div class="mx-2">
+          <CardPromotion {...item} />
+        </div>
+      {/each}
+    </CarouselSlot>
+  </div>
+</div>

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte.d.ts

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

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

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { SimpleBadgeCarouselProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+
+  const {
+    items,
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    orientation = "horizontal",
+    isBorderItem = true,
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: SimpleBadgeCarouselProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-5 rounded-lg";
+</script>
+
+<CarouselSlot
+  {isBorderBottom}
+  {isButtonPreviousAndNext}
+  {buttonPreviousAndNextClass}
+>
+  {#each items as item (item.value)}
+    <Carousel.Item
+      onclick={() => item.onClick?.(item.value)}
+      class={`
+          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
+          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
+          ${item.value === valueActive ? activeClass : ""}`}
+    >
+      <div
+        class={`
+              flex gap-1 mx-2 p-0.5 justify-center items-center
+               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
+          `}
+      >
+        {#if item.image}
+          <img
+            src={item.image}
+            alt={item.label}
+            class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+          />
+        {:else if item.icon}
+          <HugeiconsIcon
+            icon={item.icon}
+            class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+          />
+        {/if}
+        <div class={`${labelClass}`}>{item.label}</div>
+      </div>
+    </Carousel.Item>
+  {/each}
+</CarouselSlot>

package/dist/components/core/carousel/shared/ui/SimpleBadgeCarousel.svelte.d.ts

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

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

@@ -1,4 +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;
@@ -8,7 +10,7 @@ export interface ItemCarousel {
     isActive?: boolean;
     onClick?: (value: string) => void;
 }
-export interface SimpleCarouselProps {
+export interface SimpleBadgeCarouselProps {
     items: ItemCarousel[];
     orientation?: "horizontal" | "vertical";
     imageClass?: string;
@@ -21,3 +23,22 @@ export interface SimpleCarouselProps {
     isButtonPreviousAndNext?: boolean;
     buttonPreviousAndNextClass?: string;
 }
+export interface CarouselPromotionProps {
+    title?: string;
+    description?: string;
+    items: CardPromotionProps[];
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    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;
 }