negodesign 0.0.35 → 0.0.36

package/dist/components/pages/product-details/shared/ProductDetailFilesVertical.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ProductDetailsImage } from "../types";
 type $$ComponentProps = {
-    images: ProductDetailsImage[];
+    files: ProductDetailsImage[];
     className?: string;
     isLoading?: boolean;
 };

package/dist/components/pages/product-details/shared/ProductDetailImage.svelte

@@ -1,11 +1,12 @@
 <script lang="ts" module>
   /**
-   * Galeria de imagens do produto com miniatura selecionável.
+   * Galeria de imagens/vídeo do produto com miniatura selecionável.
    * Quando `isLoading` é true, exibe Skeletons.
+   * Se houver um item do tipo "video", ele é priorizado (aparece primeiro).
    * @component
    * @example
    * ```svelte
-   * <ProductDetailImage images={data.gallery} className="md:col-span-2" />
+   * <ProductDetailImage files={data.gallery} className="md:col-span-2" />
    * ```
    */
 </script>
@@ -15,53 +16,83 @@
   import type { ProductDetailsImage } from "../types";
 
   let {
-    images,
+    files,
     className,
     isLoading = false,
   }: {
-    images: ProductDetailsImage[];
+    files: ProductDetailsImage[];
     className?: string;
     isLoading?: boolean;
   } = $props();
 
+  // Vídeo primeiro, mantendo a ordem relativa do resto
+  const sortedFiles = $derived(
+    [...(files ?? [])].sort(
+      (a, b) => (a.type === "video" ? 0 : 1) - (b.type === "video" ? 0 : 1),
+    ),
+  );
+
   let activeIndex = $state(0);
-  const active = $derived(images[activeIndex]);
+  const active = $derived(sortedFiles[activeIndex]);
 </script>
 
+{#snippet media(file: ProductDetailsImage, cls: string)}
+  {#if file.type === "video"}
+    <video src={file.src} class={cls} muted playsinline></video>
+  {:else}
+    <img src={file.src} alt={file.alt ?? ""} class={cls} />
+  {/if}
+{/snippet}
+
 <div class="flex flex-col gap-3 {className}">
   {#if isLoading}
     <Skeleton class="aspect-4/3 w-full rounded-lg" />
     <div class="flex gap-2">
-      {#each Array.from({ length: Math.min(images.length || 3, 4) }) as _, i (i)}
+      {#each Array.from({ length: Math.min(files.length || 3, 4) }) as _, i (i)}
         <Skeleton class="h-16 w-16 rounded-md md:h-20 md:w-20" />
       {/each}
     </div>
   {:else if active}
     <div class="overflow-hidden rounded-lg border">
-      <img
-        src={active.src}
-        alt={active.alt ?? ""}
-        class="aspect-4/3 w-full object-cover"
-      />
+      {#if active.type === "video"}
+        <!-- svelte-ignore a11y_media_has_caption -->
+        <video
+          src={active.src}
+          class="aspect-4/3 w-full object-cover"
+          controls
+          playsinline
+        ></video>
+      {:else}
+        {@render media(active, "aspect-4/3 w-full object-cover")}
+      {/if}
     </div>
 
-    {#if images.length > 1}
+    {#if sortedFiles.length > 1}
       <div class="flex gap-2 overflow-x-auto no-scrollbar">
-        {#each images as image, i (image.src)}
+        {#each sortedFiles as file, i (file.src)}
           <button
             type="button"
-            aria-label={image.alt ?? `Imagem ${i + 1}`}
+            aria-label={file.alt ?? `Item ${i + 1}`}
             onclick={() => (activeIndex = i)}
-            class="shrink-0 overflow-hidden rounded-md border transition-opacity {i ===
+            class="relative shrink-0 overflow-hidden rounded-md border transition-opacity {i ===
             activeIndex
               ? 'border-foreground opacity-100'
               : 'border-muted opacity-60 hover:opacity-100'}"
           >
-            <img
-              src={image.src}
-              alt={image.alt ?? ""}
-              class="h-16 w-16 object-cover md:h-20 md:w-20"
-            />
+            {@render media(file, "h-16 w-16 object-cover md:h-20 md:w-20")}
+            {#if file.type === "video"}
+              <span
+                class="absolute inset-0 flex items-center justify-center bg-black/30"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-5 w-5 fill-white"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            {/if}
           </button>
         {/each}
       </div>

package/dist/components/pages/product-details/shared/ProductDetailImage.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { ProductDetailsImage } from "../types";
 type $$ComponentProps = {
-    images: ProductDetailsImage[];
+    files: ProductDetailsImage[];
     className?: string;
     isLoading?: boolean;
 };

package/dist/components/pages/product-details/shared/ProductDetailPrice.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-  import CardStartPrice from "../../../core/card/shared/CardStartPrice.svelte";
+  import CardStartPrice from "../../../core/card/promotion/CardPromotionPrice.svelte";
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
 
   let {

package/dist/components/pages/product-details/types.d.ts

@@ -1,4 +1,8 @@
 import type { IconSvgElement } from "@hugeicons/svelte";
+export interface ProductDetailsFeatureProps {
+    icon?: IconSvgElement | string;
+    label: string;
+}
 /**
  * Item individual do breadcrumb de navegação.
  * Representa um nível hierárquico na navegação da página
@@ -29,6 +33,7 @@ export interface ProductDetailsImage {
     src: string;
     /** Texto alternativo para acessibilidade (recomendado). */
     alt?: string;
+    type?: "image" | "video";
 }
 /**
  * Informações de localização do produto.
@@ -45,6 +50,8 @@ export interface ProductDetailsLocation {
      * Se não for fornecido, usa um mapa padrão.
      */
     mapUrl?: string;
+    latitude?: number;
+    longitude?: number;
 }
 /**
  * Avaliação de um cliente sobre o produto.
@@ -117,7 +124,7 @@ export interface ProductDetailsData {
     /** Quantidade disponível em stock. */
     quantityAvailable?: number;
     /** Lista de características/features do produto (strings). */
-    features?: string[];
+    features?: string[] | ProductDetailsFeatureProps[];
     /**
      * Abas de conteúdo personalizadas.
      * Se não for fornecido, usa padrão: Descrição + Avaliações.
@@ -143,7 +150,7 @@ export interface ProductDetailsProps {
      * - 4: Abas de conteúdo (descrição e avaliações) abaixo da info
      * @default 1
      */
-    varient?: 1 | 2 | 3 | 4;
+    varient?: 1 | 2 | 3;
     /** Dados completos do produto a serem exibidos. */
     data: ProductDetailsData;
     /**

package/dist/components/pages/profile-user/types.d.ts

@@ -136,6 +136,13 @@ export interface ProfileUserProps {
         id: string;
         label: string;
     }[];
+    onLoginAsUser?: (id: string | number) => void;
+    onAddAddress?: () => void;
+    onChangePassword?: (payload: {
+        currentPassword: string;
+        newPassword: string;
+        confirmPassword: string;
+    }) => void;
     userHeader?: ProfileUserHeaderProps;
     userAddress?: ProfileUserAddressProps;
     userResetPassword?: ProfileUserResetPasswordProps;