negodesign 0.0.26 → 0.0.27

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

@@ -1,170 +1,170 @@
-<!-- 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";
-
-    type Props = {
-        imageUrl?: string;
-        videoUrl?: string;
-        class?: string;
-        isImageButtonMaximized?: boolean;
-        isVideoButtonMaximized?: boolean;
-    };
-
-    let {
-        imageUrl,
-        videoUrl,
-        class: className = "w-64 h-64",
-        isImageButtonMaximized = false,
-        isVideoButtonMaximized = 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 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 w-full {className} rounded-md object-cover transition-opacity duration-500"
-                class:opacity-0={videoUrl && showVideo}
-            />
-        {/if}
-
-        {#if videoUrl && isVisible}
-            <video
-                bind:this={videoEl}
-                src={videoUrl}
-                preload="metadata"
-                onloadedmetadata={onLoadedMetadata}
-                class="absolute inset-0 w-full {className} rounded-md object-cover transition-opacity duration-500"
-                class:opacity-0={imageUrl && !showVideo}
-                muted
-                loop
-                playsinline
-            ></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>
+<!-- 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";
+
+    type Props = {
+        imageUrl?: string;
+        videoUrl?: string;
+        class?: string;
+        isImageButtonMaximized?: boolean;
+        isVideoButtonMaximized?: boolean;
+    };
+
+    let {
+        imageUrl,
+        videoUrl,
+        class: className = "w-64 h-64",
+        isImageButtonMaximized = false,
+        isVideoButtonMaximized = 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 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 w-full {className} rounded-md object-cover transition-opacity duration-500"
+                class:opacity-0={videoUrl && showVideo}
+            />
+        {/if}
+
+        {#if videoUrl && isVisible}
+            <video
+                bind:this={videoEl}
+                src={videoUrl}
+                preload="metadata"
+                onloadedmetadata={onLoadedMetadata}
+                class="absolute inset-0 w-full {className} rounded-md object-cover transition-opacity duration-500"
+                class:opacity-0={imageUrl && !showVideo}
+                muted
+                loop
+                playsinline
+            ></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}

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

@@ -1,56 +1,56 @@
-<!-- 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?: 2 | 3 | 4 };
-    let { text, class: className = "", lines = 2 }: Props = $props();
-
-    // Tailwind precisa de classes literais no código-fonte para as gerar —
-    // "line-clamp-{lines}" interpolado nunca é detectado pelo scanner.
-    const clampClasses = {
-        2: "line-clamp-2",
-        3: "line-clamp-3",
-        4: "line-clamp-4",
-    } as const;
-
-    let textEl: HTMLParagraphElement | undefined = $state();
-    let isTruncated = $state(false);
-
-    $effect(() => {
-        if (!textEl) return;
-        const check = () =>
-            (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 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="{clampClasses[lines]} {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}
+<!-- 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?: 2 | 3 | 4 };
+    let { text, class: className = "", lines = 2 }: Props = $props();
+
+    // Tailwind precisa de classes literais no código-fonte para as gerar —
+    // "line-clamp-{lines}" interpolado nunca é detectado pelo scanner.
+    const clampClasses = {
+        2: "line-clamp-2",
+        3: "line-clamp-3",
+        4: "line-clamp-4",
+    } as const;
+
+    let textEl: HTMLParagraphElement | undefined = $state();
+    let isTruncated = $state(false);
+
+    $effect(() => {
+        if (!textEl) return;
+        const check = () =>
+            (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 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="{clampClasses[lines]} {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/carousel/badge/ui/CarouselBadge.svelte

@@ -1,83 +1,82 @@
-<script lang="ts">
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselBadgeProps } from "../../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-
-  const {
-    items,
-    imageClass,
-    iconClass,
-    labelClass,
-    activeClass,
-    valueActive,
-    isLoading = false,
-    itemCarouselClass,
-    orientation = "horizontal",
-    isBorderItem = false,
-    isBorderBottom = false,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-  }: CarouselBadgeProps = $props();
-
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
-  const responsive = useDevice();
-</script>
-
-<CarouselSlot
-  {isBorderBottom}
-  {isButtonPreviousAndNext}
-  {buttonPreviousAndNextClass}
->
-  {#if isLoading}
-    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as it, i (i)}
-        <Skeleton class="h-4 w-25 bg-black/20" />
-        <div class="src-only">{it}</div>
-      {/each}
-    </div>
-  {:else}
-    {#each items as item, i (i)}
-      <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 : ""}
-          ${itemCarouselClass}`}
-      >
-        <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}
-            {#if typeof item.icon === "string"}
-              <div>
-                <i
-                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
-                >
-                </i>
-              </div>
-            {:else}
-              <HugeiconsIcon
-                icon={item.icon}
-                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-              />
-            {/if}
-          {/if}
-          <div class={`${labelClass}`}>{item.label}</div>
-        </div>
-      </Carousel.Item>
-    {/each}
-  {/if}
-</CarouselSlot>
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselBadgeProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+
+  const {
+    items = [],
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    isLoading = false,
+    itemCarouselClass,
+    orientation = "horizontal",
+    isBorderItem = false,
+    isBorderBottom = false,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: CarouselBadgeProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
+  const responsive = useDevice();
+</script>
+
+<CarouselSlot
+  {isBorderBottom}
+  {isButtonPreviousAndNext}
+  {buttonPreviousAndNextClass}
+>
+  {#if isLoading}
+    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as _, i (`skeleton-${i}`)}
+        <Skeleton class="h-4 w-25 bg-black/20" />
+      {/each}
+    </div>
+  {:else}
+    {#each (items ?? []) as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
+      <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 : ""}
+          ${itemCarouselClass}`}
+      >
+        <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}
+            {#if typeof item.icon === "string"}
+              <div>
+                <i
+                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
+                >
+                </i>
+              </div>
+            {:else}
+              <HugeiconsIcon
+                icon={item.icon}
+                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+              />
+            {/if}
+          {/if}
+          <div class={`${labelClass}`}>{item.label}</div>
+        </div>
+      </Carousel.Item>
+    {/each}
+  {/if}
+</CarouselSlot>