negodesign 0.0.35 → 0.0.37

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

@@ -12,12 +12,13 @@
 
 <script lang="ts">
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsFeatureProps } from "../types";
 
   let {
     features,
     isLoading = false,
   }: {
-    features: string[];
+    features: string[] | ProductDetailsFeatureProps[];
     isLoading?: boolean;
   } = $props();
 </script>
@@ -29,10 +30,15 @@
     {/each}
   </div>
 {:else}
-  <ul class="flex flex-col gap-2">
-    {#each features as feature, i (feature)}
-      <li class="flex items-start gap-2 text-sm text-foreground/90">
-        <span aria-hidden="true" class="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary"></span>
+  <ul class="flex flex-wrap gap-2 md:gap-5">
+    {#each features as feature, i (i)}
+      <li
+        class="flex items-start gap-2 text-sm text-foreground/90 border rounded-lg p-2"
+      >
+        <span
+          aria-hidden="true"
+          class="mt-1.5 size-1.5 shrink-0 rounded-full bg-gradient"
+        ></span>
         <span>{feature}</span>
       </li>
     {/each}

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

@@ -1,5 +1,6 @@
+import type { ProductDetailsFeatureProps } from "../types";
 type $$ComponentProps = {
-    features: string[];
+    features: string[] | ProductDetailsFeatureProps[];
     isLoading?: boolean;
 };
 declare const ProductDetailFeatures: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1,11 +1,12 @@
 <script lang="ts" module>
   /**
-   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem.
+   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem/vídeo.
    * Quando `isLoading` é true, exibe Skeletons.
+   * Se houver um item do tipo "video", ele é priorizado (aparece primeiro).
    * @component
    * @example
    * ```svelte
-   * <ProductDetailFilesVertical images={data.gallery} />
+   * <ProductDetailFilesVertical files={data.gallery} />
    * ```
    */
 </script>
@@ -15,57 +16,88 @@
   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"}
+    <!-- svelte-ignore a11y_media_has_caption -->
+    <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}
     <div class="flex gap-3">
       <div class="flex shrink-0 flex-col 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" />
         {/each}
       </div>
       <Skeleton class="aspect-4/3 min-w-0 flex-1 rounded-lg" />
     </div>
-  {:else if images.length > 0}
+  {:else if sortedFiles.length > 0}
     <div class="flex gap-3">
       <div class="flex shrink-0 flex-col gap-2">
-        {#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="overflow-hidden rounded-md border transition-opacity {i ===
+            class="relative 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"
-            />
+            {@render media(file, "h-16 w-16 object-cover")}
+            {#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-4 w-4 fill-white"
+                  aria-hidden="true"
+                >
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            {/if}
           </button>
         {/each}
       </div>
 
       <div class="min-w-0 flex-1 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>
     </div>
   {/if}

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;

package/dist/components/ui/empty/empty-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={cn(
+		"gap-4 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const EmptyContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type EmptyContent = ReturnType<typeof EmptyContent>;
+export default EmptyContent;

package/dist/components/ui/empty/empty-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={cn(
+		"text-sm/relaxed text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const EmptyDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type EmptyDescription = ReturnType<typeof EmptyDescription>;
+export default EmptyDescription;

package/dist/components/ui/empty/empty-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={cn("gap-2 flex max-w-sm flex-col items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const EmptyHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type EmptyHeader = ReturnType<typeof EmptyHeader>;
+export default EmptyHeader;

package/dist/components/ui/empty/empty-media.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const emptyMediaVariants = tv({
+		base: "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-icon"
+	data-variant={variant}
+	class={cn(emptyMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-media.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const emptyMediaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-transparent";
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined, "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: "bg-transparent";
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-transparent";
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6";
+    };
+}, undefined>>;
+export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: EmptyMediaVariant;
+};
+declare const EmptyMedia: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type EmptyMedia = ReturnType<typeof EmptyMedia>;
+export default EmptyMedia;

package/dist/components/ui/empty/empty-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-title"
+	class={cn("text-lg font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const EmptyTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type EmptyTitle = ReturnType<typeof EmptyTitle>;
+export default EmptyTitle;

package/dist/components/ui/empty/empty.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={cn(
+		"gap-4 rounded-lg border-dashed p-12 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/empty/empty.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const Empty: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/ui/empty/index.d.ts

@@ -0,0 +1,7 @@
+import Content from "./empty-content.svelte";
+import Description from "./empty-description.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Root from "./empty.svelte";
+export { Root, Header, Media, Title, Description, Content, Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent, };

package/dist/components/ui/empty/index.js

@@ -0,0 +1,9 @@
+import Content from "./empty-content.svelte";
+import Description from "./empty-description.svelte";
+import Header from "./empty-header.svelte";
+import Media from "./empty-media.svelte";
+import Title from "./empty-title.svelte";
+import Root from "./empty.svelte";
+export { Root, Header, Media, Title, Description, Content, 
+//
+Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent, };