negodesign 0.0.80 → 0.0.82

package/dist/components/ui/card/core/shared/CardTags.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { CardTagsProps } from "../types";
-  import Skeleton from "../../../skeleton/skeleton.svelte";
-  import * as Popover from "../../../popover"; // adjust path to your setup
-
-  type Props = {
-    className?: string;
-    tags?: CardTagsProps[];
-    isTagBorderBottom?: boolean;
-    isWrap?: boolean;
-    isLoading?: boolean;
-  };
-
-  const {
-    tags = [],
-    className,
-    isTagBorderBottom,
-    isWrap = false,
-    isLoading = false,
-  }: Props = $props();
-
-  let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
-  let open = $state(false);
-</script>
-
-{#snippet createBadge(tag: CardTagsProps, clasName?: string)}
-  <div
-    class="flex items-center h-5 shrink-0 {isTagBorderBottom
-      ? 'border border-gray-200 rounded-full px-2 py-1'
-      : ''} {clasName}"
-  >
-    {#if tag.icon}
-      <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
-    {/if}
-    <div class="whitespace-nowrap">{tag.text}</div>
-  </div>
-{/snippet}
-
-{#snippet skeletonTag()}
-  <div class="my-2 flex gap-5">
-    {#each Array.from({ length: 3 }) as it, i (i)}
-      <Skeleton class="h-5 w-25 bg-black/50" />
-    {/each}
-  </div>
-{/snippet}
-
-{#snippet tagsRow()}
-  {#if isWrap}
-    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
-      {#if isLoading}
-        {@render skeletonTag()}
-      {:else if tags && tags.length > 0}
-        {#each tags as tag, i (i)}
-          {@render createBadge(tag)}
-        {/each}
-      {/if}
-    </div>
-  {:else}
-    <div
-      class="flex overflow-x-auto no-scrollbar w-full min-w-0
-          {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
-          {className}"
-    >
-      {#if isLoading}
-        {@render skeletonTag()}
-      {:else if tags && tags.length > 0}
-        {#each tags as tag, i (i)}
-          {@render createBadge(tag)}
-        {/each}
-      {/if}
-    </div>
-  {/if}
-{/snippet}
-
-<Popover.Root bind:open>
-  <Popover.Trigger
-    onmouseenter={() => (open = true)}
-    onmouseleave={() => (open = false)}
-    class="block w-full text-left h-8"
-  >
-    {@render tagsRow()}
-  </Popover.Trigger>
-  <Popover.Content
-    class="w-auto max-w-xs p-3"
-    onmouseenter={() => (open = true)}
-    onmouseleave={() => (open = false)}
-  >
-    <div class="flex flex-col gap-2">
-      {#each tags as tag, i (i)}
-        {@render createBadge(tag, "gap-2")}
-      {/each}
-    </div>
-  </Popover.Content>
-</Popover.Root>
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { CardTagsProps } from "../types";
+  import Skeleton from "../../../skeleton/skeleton.svelte";
+  import * as Popover from "../../../popover"; // adjust path to your setup
+
+  type Props = {
+    className?: string;
+    tags?: CardTagsProps[];
+    isTagBorderBottom?: boolean;
+    isWrap?: boolean;
+    isLoading?: boolean;
+  };
+
+  const {
+    tags = [],
+    className,
+    isTagBorderBottom,
+    isWrap = false,
+    isLoading = false,
+  }: Props = $props();
+
+  let isJustify = $derived(tags?.length == 2 || tags?.length == 3);
+  let open = $state(false);
+</script>
+
+{#snippet createBadge(tag: CardTagsProps, clasName?: string)}
+  <div
+    class="flex items-center h-5 shrink-0 {isTagBorderBottom
+      ? 'border border-gray-200 rounded-full px-2 py-1'
+      : ''} {clasName}"
+  >
+    {#if tag.icon}
+      <HugeiconsIcon icon={tag.icon} class="mr-0.5 h-3.75 w-3.75 shrink-0" />
+    {/if}
+    <div class="whitespace-nowrap">{tag.text}</div>
+  </div>
+{/snippet}
+
+{#snippet skeletonTag()}
+  <div class="my-2 flex gap-5">
+    {#each Array.from({ length: 3 }) as it, i (i)}
+      <Skeleton class="h-5 w-25 bg-black/50" />
+    {/each}
+  </div>
+{/snippet}
+
+{#snippet tagsRow()}
+  {#if isWrap}
+    <div class="flex flex-wrap gap-2 md:gap-5 {className}">
+      {#if isLoading}
+        {@render skeletonTag()}
+      {:else if tags && tags.length > 0}
+        {#each tags as tag, i (i)}
+          {@render createBadge(tag)}
+        {/each}
+      {/if}
+    </div>
+  {:else}
+    <div
+      class="flex overflow-x-auto no-scrollbar w-full min-w-0
+          {isJustify ? 'justify-between gap-3' : 'gap-4 md:gap-5 lg:gap-10'}
+          {className}"
+    >
+      {#if isLoading}
+        {@render skeletonTag()}
+      {:else if tags && tags.length > 0}
+        {#each tags as tag, i (i)}
+          {@render createBadge(tag)}
+        {/each}
+      {/if}
+    </div>
+  {/if}
+{/snippet}
+
+<Popover.Root bind:open>
+  <Popover.Trigger
+    onmouseenter={() => (open = true)}
+    onmouseleave={() => (open = false)}
+    class="block w-full text-left h-8"
+  >
+    {@render tagsRow()}
+  </Popover.Trigger>
+  <Popover.Content
+    class="w-auto max-w-xs p-3"
+    onmouseenter={() => (open = true)}
+    onmouseleave={() => (open = false)}
+  >
+    <div class="flex flex-col gap-2">
+      {#each tags as tag, i (i)}
+        {@render createBadge(tag, "gap-2")}
+      {/each}
+    </div>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/ui/card/core/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 "../../../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 "../../../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}