negodesign 0.0.28 → 0.0.29

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

@@ -1,170 +1,229 @@
 <!-- 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")}`;
+  /**
+   * 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";
+
+  type Props = {
+    imageUrl?: string;
+    videoUrl?: string;
+    class?: string;
+    isImageButtonMaximized?: boolean;
+    isVideoButtonMaximized?: boolean;
+    isLoading?: boolean;
+  };
+
+  let {
+    imageUrl,
+    videoUrl,
+    class: className = "w-64 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;
     }
-
-    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();
         }
-    }
-
-    $effect(() => {
-        if (!containerEl) return;
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                if (entry.isIntersecting) {
-                    isVisible = true;
-                    observer.disconnect();
-                }
-            },
-            { rootMargin: "100px" }
-        );
-        observer.observe(containerEl);
-        return () => observer.disconnect();
-    });
+      },
+      { rootMargin: "100px" },
+    );
+    observer.observe(containerEl);
+    return () => observer.disconnect();
+  });
 </script>
 
-<svelte:window onkeydown={isMaximized ? (e) => e.key === "Escape" && (isMaximized = false) : undefined} />
+<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>
+  <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}
+{#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))}
+      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 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}
+          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 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 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}
+      {#if showMaximize}
+        {@render maximizeButton()}
+      {/if}
     </div>
-{/if}
+  {/if}
 
-{#if isMaximized}
+  {#if isMaximized}
     <div class="fixed inset-0 z-50">
-        <button
+      <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 inset-0 h-full w-full cursor-default bg-black/80"
+            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 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>
+            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}
+{/if}

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

@@ -4,6 +4,7 @@ type Props = {
     class?: string;
     isImageButtonMaximized?: boolean;
     isVideoButtonMaximized?: boolean;
+    isLoading?: boolean;
 };
 declare const CardThumbnailVideo: import("svelte").Component<Props, {}, "">;
 type CardThumbnailVideo = ReturnType<typeof CardThumbnailVideo>;

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

@@ -14,6 +14,7 @@ export interface CardMediaProps {
     className?: string;
     tags?: CardTagsProps[];
     isFavorite?: boolean;
+    isLoading?: boolean;
     startNumber?: number;
     isTagBorderBottom?: boolean;
     buttonProfileClass?: string;
@@ -35,6 +36,7 @@ export interface CardProfileProps {
     tags?: CardTagsProps[];
     isFavorite?: boolean;
     startNumber?: number;
+    isLoading?: boolean;
     isTagBorderBottom?: boolean;
     buttonProfileClass?: string;
     buttonDetailsClass?: string;

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

@@ -0,0 +1,10 @@
+import type { CardMediaProps } from "../../../card/types";
+import type { CarouselSlotProps } from "../../../panel/type";
+import type { CarouselHeaderProps } from "../../types";
+export interface CarouselMediaProps {
+    headerProps?: CarouselHeaderProps;
+    slotProps?: CarouselSlotProps;
+    variant?: 1 | 2;
+    items: CardMediaProps[];
+    isLoading?: boolean;
+}

package/dist/components/core/carousel/grid/media/types.js

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

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import type { CarouselMediaProps } from "../types";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import CardMedia from "../../../../card/media/CardMedia.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    variant,
+    isLoading = false,
+  }: CarouselMediaProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader {...headerProps}>
+  <CarouselGridSlot {slotProps} totalItems={items.length}>
+    {#if isLoading}
+      {#each Array.from( { length: responsive.isMobile ? 5 : 9 }, ) as _, i (`loading-${i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardMedia id={i} {variant} isLoading />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardMedia id={i} {variant} isLoading />
+          </div>
+        {/if}
+      {/each}
+    {:else}
+      {#each items as item, i (`media-${item.id ?? i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardMedia {...item} {variant} />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardMedia {...item} {variant} />
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </CarouselGridSlot>
+</CarouselHeader>

package/dist/components/core/carousel/grid/media/ui/CarouselGridMedia.svelte.d.ts

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

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

@@ -0,0 +1,10 @@
+import type { CardProfileProps } from "../../../card/types";
+import type { CarouselSlotProps } from "../../../panel/type";
+import type { CarouselHeaderProps } from "../../types";
+export interface CarouselProfileProps {
+    headerProps?: CarouselHeaderProps;
+    slotProps?: CarouselSlotProps;
+    variant?: 1 | 2;
+    items: CardProfileProps[];
+    isLoading?: boolean;
+}

package/dist/components/core/carousel/grid/profile/types.js

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

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import CarouselGridSlot from "../../shared/ui/CarouselGridSlot.svelte";
+  import * as Carousel from "../../../../../ui/carousel/index.js";
+  import CarouselHeader from "../../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import type { CarouselProfileProps } from "../types";
+  import CardProfile from "../../../../card/profile/CardProfile.svelte";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    variant,
+    isLoading = false,
+  }: CarouselProfileProps = $props();
+
+  const responsive = useDevice();
+</script>
+
+<CarouselHeader {...headerProps}>
+  <CarouselGridSlot
+    {slotProps}
+    totalItems={items.length}
+  >
+    {#if isLoading}
+      {#each Array.from({ length: responsive.isMobile ? 5 : 9 }) as _, i (`loading-${i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProfile id={i} {variant} isLoading />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProfile id={i} {variant} isLoading />
+          </div>
+        {/if}
+      {/each}
+    {:else}
+      {#each items as item, i (`profile-${item.id ?? i}`)}
+        {#if responsive.isMobile}
+          <Carousel.Item class="pl-2 basis-auto">
+            <CardProfile {...item} {variant} />
+          </Carousel.Item>
+        {:else}
+          <div>
+            <CardProfile {...item} {variant} />
+          </div>
+        {/if}
+      {/each}
+    {/if}
+  </CarouselGridSlot>
+</CarouselHeader>

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte.d.ts

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

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import CarouselSlot from "../../../../panel/CarouselSlot.svelte";
+  import type { CarouselSlotProps } from "../../../../panel/type";
+  import { useDevice } from "../../../../../../hooks/responsive.svelte";
+  import Autoplay from "embla-carousel-autoplay";
+
+  type Props = {
+    slotProps?: CarouselSlotProps;
+    totalItems: number;
+    children: Snippet;
+  };
+
+  const {
+    slotProps,
+    totalItems,
+    children,
+  }: Props = $props();
+
+  const responsive = useDevice();
+
+  const colsClass = $derived(
+    totalItems <= 4 ? "grid-cols-2" : "grid-cols-3"
+  );
+</script>
+
+{#if responsive.isMobile}
+  <CarouselSlot
+    {...slotProps}
+    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+  >
+    {@render children()}
+  </CarouselSlot>
+{:else}
+  <div class="grid {colsClass} gap-4 p-2">
+    {@render children()}
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+import type { CarouselSlotProps } from "../../../../panel/type";
+type Props = {
+    slotProps?: CarouselSlotProps;
+    totalItems: number;
+    children: Snippet;
+};
+declare const CarouselGridSlot: import("svelte").Component<Props, {}, "">;
+type CarouselGridSlot = ReturnType<typeof CarouselGridSlot>;
+export default CarouselGridSlot;