negodesign 0.0.56 → 0.0.57

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

@@ -1,232 +1,232 @@
-<!-- CardMedia.svelte -->
-<script lang="ts">
-  /**
-   * Image thumbnail with hover-to-play video, lazy loading,
-   * duration badge, video indicator, and optional maximize overlay.
-   * @component
-   */
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import {
-    Maximize01Icon,
-    Cancel01Icon,
-    VideoReplayIcon,
-  } from "@hugeicons/core-free-icons";
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import ImgPlaceholder from "../../../../assets/placeholder-image.png";
-  import VideoPlaceholder from "../../../../assets/lonely-404.mp4";
-
-  type Props = {
-    imageUrl?: string;
-    videoUrl?: string;
-    class?: string;
-    isImageButtonMaximized?: boolean;
-    isVideoButtonMaximized?: boolean;
-    isLoading?: boolean;
-  };
-
-  let {
-    imageUrl,
-    videoUrl,
-    class: className = "h-32 w-full md:h-64",
-    isImageButtonMaximized = false,
-    isVideoButtonMaximized = false,
-    isLoading = false,
-  }: Props = $props();
-
-  let containerEl: HTMLDivElement | undefined = $state();
-  let videoEl: HTMLVideoElement | undefined = $state();
-
-  let isHovering = $state(false);
-  let isVisible = $state(false);
-  let isMaximized = $state(false);
-  let duration = $state("");
-
-  let showVideo = $derived(!imageUrl || isHovering);
-  let showMaximize = $derived(
-    (imageUrl && isImageButtonMaximized) ||
-      (videoUrl && isVideoButtonMaximized),
-  );
-  let showVideoBadge = $derived(!!imageUrl && !!videoUrl && !isHovering);
-
-  function onLoadedMetadata() {
-    if (!videoEl) return;
-    const m = Math.floor(videoEl.duration / 60);
-    const s = Math.floor(videoEl.duration % 60);
-    duration = `${m}:${s.toString().padStart(2, "0")}`;
-  }
-
-  function toggleHover(state: boolean) {
-    if (!videoUrl) return;
-    isHovering = state;
-    if (state) videoEl?.play();
-    else {
-      videoEl?.pause();
-      if (imageUrl && videoEl) videoEl.currentTime = 0;
-    }
-  }
-
-  $effect(() => {
-    if (!containerEl) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          isVisible = true;
-          observer.disconnect();
-        }
-      },
-      { rootMargin: "100px" },
-    );
-    observer.observe(containerEl);
-    return () => observer.disconnect();
-  });
-</script>
-
-<svelte:window
-  onkeydown={isMaximized
-    ? (e) => e.key === "Escape" && (isMaximized = false)
-    : undefined}
-/>
-
-{#snippet maximizeButton()}
-  <button
-    type="button"
-    class="absolute top-2 right-2 z-10 rounded-full bg-black/50 p-1.5 text-white transition-colors hover:bg-black/70"
-    onclick={(e) => {
-      e.stopPropagation();
-      isMaximized = true;
-      videoEl?.pause();
-    }}
-    aria-label="Maximizar"
-  >
-    <HugeiconsIcon
-      icon={Maximize01Icon}
-      size={16}
-      color="currentColor"
-      strokeWidth={1.5}
-    />
-  </button>
-{/snippet}
-
-{#if isLoading}
-  <Skeleton class="w-full h-12.5 md:h-50 bg-gray-500/90" />
-{:else}
-  {#if imageUrl || videoUrl}
-    <div
-      bind:this={containerEl}
-      class="relative w-full {className}"
-      role="button"
-      tabindex="0"
-      onmouseenter={() => toggleHover(true)}
-      onmouseleave={() => toggleHover(false)}
-      onfocus={() => toggleHover(true)}
-      onblur={() => toggleHover(false)}
-      onkeydown={(e) =>
-        (e.key === "Enter" || e.key === " ") &&
-        (e.preventDefault(), toggleHover(!isHovering))}
-    >
-      {#if imageUrl}
-        <img
-          src={isVisible ? imageUrl : undefined}
-          loading="lazy"
-          decoding="async"
-          alt={imageUrl}
-          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
-          class:opacity-0={videoUrl && showVideo}
-          onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
-        />
-      {/if}
-
-      {#if videoUrl && isVisible}
-        <video
-          bind:this={videoEl}
-          src={videoUrl}
-          preload="metadata"
-          onloadedmetadata={onLoadedMetadata}
-          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
-          class:opacity-0={imageUrl && !showVideo}
-          muted
-          loop
-          playsinline
-          onerror={(e) =>
-            ((e.target as HTMLImageElement).src = VideoPlaceholder)}
-        ></video>
-      {/if}
-
-      {#if showVideoBadge}
-        <div
-          class="pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-300"
-        >
-          <div
-            class="flex h-11 w-11 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm"
-          >
-            <HugeiconsIcon
-              icon={VideoReplayIcon}
-              size={22}
-              color="white"
-              strokeWidth={1.5}
-            />
-          </div>
-        </div>
-        {#if duration}
-          <span
-            class="absolute bottom-2 right-2 z-10 rounded bg-black/60 px-1.5 py-0.5 text-xs font-medium text-white"
-          >
-            {duration}
-          </span>
-        {/if}
-      {/if}
-
-      {#if showMaximize}
-        {@render maximizeButton()}
-      {/if}
-    </div>
-  {/if}
-
-  {#if isMaximized}
-    <div class="fixed inset-0 z-50">
-      <button
-        type="button"
-        class="absolute inset-0 h-full w-full cursor-default bg-black/80"
-        onclick={() => (isMaximized = false)}
-        aria-label="Fechar modal"
-      ></button>
-
-      <div
-        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
-      >
-        <div class="pointer-events-auto relative max-h-[90vh] max-w-4xl">
-          <button
-            type="button"
-            class="absolute top-3 right-3 rounded-full bg-red-900/50 p-2 text-white hover:bg-black/70"
-            onclick={() => (isMaximized = false)}
-            aria-label="Fechar"
-          >
-            <HugeiconsIcon
-              icon={Cancel01Icon}
-              size={20}
-              color="currentColor"
-              strokeWidth={1.5}
-            />
-          </button>
-
-          {#if videoUrl && showVideo}
-            <!-- svelte-ignore a11y_media_has_caption -->
-            <video
-              src={videoUrl}
-              class="max-h-[90vh] max-w-full rounded-md"
-              controls
-              autoplay
-              playsinline
-            ></video>
-          {:else if imageUrl}
-            <img
-              src={imageUrl}
-              alt={imageUrl}
-              class="max-h-[90vh] max-w-full rounded-md object-contain"
-            />
-          {/if}
-        </div>
-      </div>
-    </div>
-  {/if}
-{/if}
+<!-- CardMedia.svelte -->
+<script lang="ts">
+  /**
+   * Image thumbnail with hover-to-play video, lazy loading,
+   * duration badge, video indicator, and optional maximize overlay.
+   * @component
+   */
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import {
+    Maximize01Icon,
+    Cancel01Icon,
+    VideoReplayIcon,
+  } from "@hugeicons/core-free-icons";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import ImgPlaceholder from "../../../../assets/placeholder-image.png";
+  import VideoPlaceholder from "../../../../assets/lonely-404.mp4";
+
+  type Props = {
+    imageUrl?: string;
+    videoUrl?: string;
+    class?: string;
+    isImageButtonMaximized?: boolean;
+    isVideoButtonMaximized?: boolean;
+    isLoading?: boolean;
+  };
+
+  let {
+    imageUrl,
+    videoUrl,
+    class: className = "h-32 w-full md:h-64",
+    isImageButtonMaximized = false,
+    isVideoButtonMaximized = false,
+    isLoading = false,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | undefined = $state();
+  let videoEl: HTMLVideoElement | undefined = $state();
+
+  let isHovering = $state(false);
+  let isVisible = $state(false);
+  let isMaximized = $state(false);
+  let duration = $state("");
+
+  let showVideo = $derived(!imageUrl || isHovering);
+  let showMaximize = $derived(
+    (imageUrl && isImageButtonMaximized) ||
+      (videoUrl && isVideoButtonMaximized),
+  );
+  let showVideoBadge = $derived(!!imageUrl && !!videoUrl && !isHovering);
+
+  function onLoadedMetadata() {
+    if (!videoEl) return;
+    const m = Math.floor(videoEl.duration / 60);
+    const s = Math.floor(videoEl.duration % 60);
+    duration = `${m}:${s.toString().padStart(2, "0")}`;
+  }
+
+  function toggleHover(state: boolean) {
+    if (!videoUrl) return;
+    isHovering = state;
+    if (state) videoEl?.play();
+    else {
+      videoEl?.pause();
+      if (imageUrl && videoEl) videoEl.currentTime = 0;
+    }
+  }
+
+  $effect(() => {
+    if (!containerEl) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          isVisible = true;
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "100px" },
+    );
+    observer.observe(containerEl);
+    return () => observer.disconnect();
+  });
+</script>
+
+<svelte:window
+  onkeydown={isMaximized
+    ? (e) => e.key === "Escape" && (isMaximized = false)
+    : undefined}
+/>
+
+{#snippet maximizeButton()}
+  <button
+    type="button"
+    class="absolute top-2 right-2 z-10 rounded-full bg-black/50 p-1.5 text-white transition-colors hover:bg-black/70"
+    onclick={(e) => {
+      e.stopPropagation();
+      isMaximized = true;
+      videoEl?.pause();
+    }}
+    aria-label="Maximizar"
+  >
+    <HugeiconsIcon
+      icon={Maximize01Icon}
+      size={16}
+      color="currentColor"
+      strokeWidth={1.5}
+    />
+  </button>
+{/snippet}
+
+{#if isLoading}
+  <Skeleton class="w-full h-12.5 md:h-50 bg-gray-500/90" />
+{:else}
+  {#if imageUrl || videoUrl}
+    <div
+      bind:this={containerEl}
+      class="relative w-full {className}"
+      role="button"
+      tabindex="0"
+      onmouseenter={() => toggleHover(true)}
+      onmouseleave={() => toggleHover(false)}
+      onfocus={() => toggleHover(true)}
+      onblur={() => toggleHover(false)}
+      onkeydown={(e) =>
+        (e.key === "Enter" || e.key === " ") &&
+        (e.preventDefault(), toggleHover(!isHovering))}
+    >
+      {#if imageUrl}
+        <img
+          src={isVisible ? imageUrl : undefined}
+          loading="lazy"
+          decoding="async"
+          alt={imageUrl}
+          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
+          class:opacity-0={videoUrl && showVideo}
+          onerror={(e) => ((e.target as HTMLImageElement).src = ImgPlaceholder)}
+        />
+      {/if}
+
+      {#if videoUrl && isVisible}
+        <video
+          bind:this={videoEl}
+          src={videoUrl}
+          preload="metadata"
+          onloadedmetadata={onLoadedMetadata}
+          class="absolute inset-0 h-full w-full rounded-md object-cover transition-opacity duration-500"
+          class:opacity-0={imageUrl && !showVideo}
+          muted
+          loop
+          playsinline
+          onerror={(e) =>
+            ((e.target as HTMLImageElement).src = VideoPlaceholder)}
+        ></video>
+      {/if}
+
+      {#if showVideoBadge}
+        <div
+          class="pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-300"
+        >
+          <div
+            class="flex h-11 w-11 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm"
+          >
+            <HugeiconsIcon
+              icon={VideoReplayIcon}
+              size={22}
+              color="white"
+              strokeWidth={1.5}
+            />
+          </div>
+        </div>
+        {#if duration}
+          <span
+            class="absolute bottom-2 right-2 z-10 rounded bg-black/60 px-1.5 py-0.5 text-xs font-medium text-white"
+          >
+            {duration}
+          </span>
+        {/if}
+      {/if}
+
+      {#if showMaximize}
+        {@render maximizeButton()}
+      {/if}
+    </div>
+  {/if}
+
+  {#if isMaximized}
+    <div class="fixed inset-0 z-50">
+      <button
+        type="button"
+        class="absolute inset-0 h-full w-full cursor-default bg-black/80"
+        onclick={() => (isMaximized = false)}
+        aria-label="Fechar modal"
+      ></button>
+
+      <div
+        class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
+      >
+        <div class="pointer-events-auto relative max-h-[90vh] max-w-4xl">
+          <button
+            type="button"
+            class="absolute top-3 right-3 rounded-full bg-red-900/50 p-2 text-white hover:bg-black/70"
+            onclick={() => (isMaximized = false)}
+            aria-label="Fechar"
+          >
+            <HugeiconsIcon
+              icon={Cancel01Icon}
+              size={20}
+              color="currentColor"
+              strokeWidth={1.5}
+            />
+          </button>
+
+          {#if videoUrl && showVideo}
+            <!-- svelte-ignore a11y_media_has_caption -->
+            <video
+              src={videoUrl}
+              class="max-h-[90vh] max-w-full rounded-md"
+              controls
+              autoplay
+              playsinline
+            ></video>
+          {:else if imageUrl}
+            <img
+              src={imageUrl}
+              alt={imageUrl}
+              class="max-h-[90vh] max-w-full rounded-md object-contain"
+            />
+          {/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+{/if}

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

@@ -1,24 +1,24 @@
-<script>
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-
-  let { title, isLoading, price } = $props();
-</script>
-
-<div class="flex justify-between w-full items-center">
-  {#if title}
-    {#if isLoading}
-      <Skeleton class="h-4 w-30 rounded-lg" />
-    {:else}
-      <div class="font-semibold line-clamp-1 flex-nowrap">
-        {title}
-      </div>
-    {/if}
-  {/if}
-  <div class="flex justify-start gap-2">
-    {#if isLoading}
-      <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
-    {:else if price}
-      <div class="text-lg font-semibold text-primary">{price}</div>
-    {/if}
-  </div>
-</div>
+<script>
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let { title, isLoading, price } = $props();
+</script>
+
+<div class="flex justify-between w-full items-center">
+  {#if title}
+    {#if isLoading}
+      <Skeleton class="h-4 w-30 rounded-lg" />
+    {:else}
+      <div class="font-semibold line-clamp-1 flex-nowrap">
+        {title}
+      </div>
+    {/if}
+  {/if}
+  <div class="flex justify-start gap-2">
+    {#if isLoading}
+      <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+    {:else if price}
+      <div class="text-lg font-semibold text-primary">{price}</div>
+    {/if}
+  </div>
+</div>

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

@@ -1,49 +1,49 @@
-<!-- shared/TruncatableText.svelte -->
-<script lang="ts">
-  /**
-   * Clamps text to N lines; if it overflows, shows an indicator
-   * ("Ler texto completo") positioned absolutely at the end of the
-   * text, that opens the full text in a Popover.
-   * @component
-   */
-  import * as Popover from "../../../ui/popover";
-  import { t } from "../../../../i18n";
-
-  type Props = { text: string; class?: string; lines?: number };
-  let { text, class: className = "", lines = 2 }: Props = $props();
-
-  let textEl: HTMLParagraphElement | undefined = $state();
-  let isTruncated = $state(false);
-
-  $effect(() => {
-    if (!textEl) return;
-    const check = () =>
-      (isTruncated =
-        (textEl?.scrollHeight ?? 0) > (textEl?.clientHeight ?? 0) + 1);
-    // requestAnimationFrame garante que o layout com o clamp já foi aplicado
-    // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
-    requestAnimationFrame(check);
-    const ro = new ResizeObserver(check);
-    ro.observe(textEl);
-    return () => ro.disconnect();
-  });
-</script>
-
-<div class="relative">
-  <p bind:this={textEl} class="line-clamp-3 {className}">
-    {text}
-  </p>
-
-  {#if isTruncated}
-    <Popover.Root>
-      <Popover.Trigger
-        class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
-      >
-        {$t("label.view.full")}
-      </Popover.Trigger>
-      <Popover.Content>
-        <p class="max-w-xs text-justify text-[12px]">{text}</p>
-      </Popover.Content>
-    </Popover.Root>
-  {/if}
-</div>
+<!-- shared/TruncatableText.svelte -->
+<script lang="ts">
+  /**
+   * Clamps text to N lines; if it overflows, shows an indicator
+   * ("Ler texto completo") positioned absolutely at the end of the
+   * text, that opens the full text in a Popover.
+   * @component
+   */
+  import * as Popover from "../../../ui/popover";
+  import { t } from "../../../../i18n";
+
+  type Props = { text: string; class?: string; lines?: number };
+  let { text, class: className = "", lines = 2 }: Props = $props();
+
+  let textEl: HTMLParagraphElement | undefined = $state();
+  let isTruncated = $state(false);
+
+  $effect(() => {
+    if (!textEl) return;
+    const check = () =>
+      (isTruncated =
+        (textEl?.scrollHeight ?? 0) > (textEl?.clientHeight ?? 0) + 1);
+    // requestAnimationFrame garante que o layout com o clamp já foi aplicado
+    // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
+    requestAnimationFrame(check);
+    const ro = new ResizeObserver(check);
+    ro.observe(textEl);
+    return () => ro.disconnect();
+  });
+</script>
+
+<div class="relative">
+  <p bind:this={textEl} class="line-clamp-3 {className}">
+    {text}
+  </p>
+
+  {#if isTruncated}
+    <Popover.Root>
+      <Popover.Trigger
+        class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
+      >
+        {$t("label.view.full")}
+      </Popover.Trigger>
+      <Popover.Content>
+        <p class="max-w-xs text-justify text-[12px]">{text}</p>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>

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

@@ -90,10 +90,14 @@ export interface CardProfileProps {
     isTagBorderBottom?: boolean;
     /** Classe CSS personalizada para botão de perfil */
     buttonProfileClass?: string;
+    /** Classe CSS personalizada para o botão de detalhes */
+    buttonDetailsClass?: string;
     /** Callback ao clicar no botão favorito */
     onFavoriteClick?: (id: string | number) => void;
     /** Callback ao clicar no botão perfil */
     onButtonProfile?: (id: string | number) => void;
+    /** Callback acionado ao clicar no botão de detalhes */
+    onButtonDetails?: (id: string | number) => void;
     /** Callback ao clicar no botão email */
     onEmailClick?: (id: string | number) => void;
     /** Callback ao clicar no botão whatsapp */

package/dist/components/core/carousel/badge/type.d.ts

@@ -0,0 +1,27 @@
+import type { ItemCarousel } from "../types";
+/**
+ * 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;
+}