negodesign 0.0.30 → 0.0.32

package/dist/components/pages/product-details/04/ProductDetails04.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProductDetailsData } from "../types";
+type $$ComponentProps = {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetails04: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetails04 = ReturnType<typeof ProductDetails04>;
+export default ProductDetails04;

package/dist/components/pages/product-details/ProductDetails.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  /**
+   * Página de detalhes do produto com seleção de layout.
+   * Permite escolher entre quatro variantes:
+   * - **1**: Duas colunas (galeria à esquerda, info à direita).
+   * - **2**: Galeria em destaque com conteúdo centralizado.
+   * - **3**: Painel de compra sticky no lado direito.
+   * - **4**: Abas de conteúdo (descrição e avaliações) abaixo da info.
+   *
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetails varient={1} data={productData} />
+   *
+   * <ProductDetails varient={3} data={productData} onBuy={(id) => console.log(id)} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { ProductDetailsProps } from "./types";
+  import ProductDetails01 from "./01/ProductDetails01.svelte";
+  import ProductDetails02 from "./02/ProductDetails02.svelte";
+  import ProductDetails03 from "./03/ProductDetails03.svelte";
+  import ProductDetails04 from "./04/ProductDetails04.svelte";
+
+  let { varient = 1, data, isLoading = false, onBuy, onFavorite, onCart }: ProductDetailsProps = $props();
+</script>
+
+{#if varient === 2}
+  <ProductDetails02 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else if varient === 3}
+  <ProductDetails03 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else if varient === 4}
+  <ProductDetails04 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{:else}
+  <ProductDetails01 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
+{/if}

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

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

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

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+  /**
+   * Ações do produto: botões de compra, favorito e carrinho.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailActions id={data.id} {onBuy} {onFavorite} {onCart} buttonBuyText="Comprar" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import { Button } from "../../../ui/button/index.js";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import {
+    HeartAddIcon,
+    HeartRemoveIcon,
+    ShoppingCartAdd01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    id,
+    buttonBuyText = "Comprar",
+    isFavorite = $bindable(false),
+    isCart = $bindable(false),
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    id: string | number;
+    buttonBuyText?: string;
+    isFavorite?: boolean;
+    isCart?: boolean;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex items-center gap-2">
+    <Skeleton class="h-9 min-w-40 flex-1 rounded-md" />
+    <Skeleton class="size-9 rounded-full" />
+    <Skeleton class="size-9 rounded-full" />
+  </div>
+{:else}
+  <div class="flex flex-wrap items-center gap-2">
+    <Button class="flex-1 min-w-40 bg-gradient" onclick={() => onBuy?.(id)}>
+      {buttonBuyText}
+    </Button>
+
+    <Button
+      size="icon"
+      class="rounded-full"
+      variant="outline"
+      aria-label={isFavorite ? "Remover dos favoritos" : "Adicionar aos favoritos"}
+      onclick={() => {
+        isFavorite = !isFavorite;
+        onFavorite?.(id);
+      }}
+    >
+      <HugeiconsIcon icon={isFavorite ? HeartRemoveIcon : HeartAddIcon} />
+    </Button>
+
+    <Button
+      size="icon"
+      class="rounded-full"
+      variant="outline"
+      aria-label="Adicionar ao carrinho"
+      onclick={() => {
+        isCart = !isCart;
+        onCart?.(id);
+      }}
+    >
+      <HugeiconsIcon icon={ShoppingCartAdd01Icon} />
+    </Button>
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    id: string | number;
+    buttonBuyText?: string;
+    isFavorite?: boolean;
+    isCart?: boolean;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+};
+declare const ProductDetailActions: import("svelte").Component<$$ComponentProps, {}, "isFavorite" | "isCart">;
+type ProductDetailActions = ReturnType<typeof ProductDetailActions>;
+export default ProductDetailActions;

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

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+  /**
+   * Breadcrumb de navegação para a página de detalhes do produto.
+   * Quando `isLoading` é true, exibe um Skeleton.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailBreadcrumb items={[{ label: "Home", href: "/" }, { label: "Hotel Baía Azul" }]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsBreadcrumbItem } from "../types";
+
+  let {
+    items,
+    isLoading = false,
+  }: {
+    items: ProductDetailsBreadcrumbItem[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <Skeleton class="h-4 w-48 rounded-md" />
+{:else}
+  <nav
+    aria-label="Breadcrumb"
+    class="flex items-center gap-1.5 text-sm text-muted-foreground"
+  >
+    {#each items as item, i (item.label)}
+      {#if item.href}
+        <a href={item.href} class="hover:text-foreground transition-colors"
+          >{item.label}</a
+        >
+      {:else}
+        <span class="text-foreground font-medium">{item.label}</span>
+      {/if}
+      {#if i < items.length - 1}
+        <span class="select-none">/</span>
+      {/if}
+    {/each}
+  </nav>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { ProductDetailsBreadcrumbItem } from "../types";
+type $$ComponentProps = {
+    items: ProductDetailsBreadcrumbItem[];
+    isLoading?: boolean;
+};
+declare const ProductDetailBreadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailBreadcrumb = ReturnType<typeof ProductDetailBreadcrumb>;
+export default ProductDetailBreadcrumb;

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

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  /**
+   * Descrição do produto (curta e longa opcional).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailDescription description={data.description} longDescription={data.longDescription} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    description,
+    longDescription,
+    isLoading = false,
+  }: {
+    description: string;
+    longDescription?: string;
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2">
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-4 w-full rounded-md" />
+    {/each}
+  </div>
+{:else}
+  <p class="leading-7 text-foreground/90">{description}</p>
+  {#if longDescription}
+    <p class="leading-7 text-foreground/75">{longDescription}</p>
+  {/if}
+{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    description: string;
+    longDescription?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailDescription = ReturnType<typeof ProductDetailDescription>;
+export default ProductDetailDescription;

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

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+  /**
+   * Bloco de características do produto (lista de bullets).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailFeatures features={["Wi-Fi gratuito", "Pequeno-almoço incluído"]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    features,
+    isLoading = false,
+  }: {
+    features: string[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2">
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-4 w-2/3 rounded-md" />
+    {/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>
+        <span>{feature}</span>
+      </li>
+    {/each}
+  </ul>
+{/if}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    features: string[];
+    isLoading?: boolean;
+};
+declare const ProductDetailFeatures: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailFeatures = ReturnType<typeof ProductDetailFeatures>;
+export default ProductDetailFeatures;

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

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+  /**
+   * Lista vertical de ficheiros/thumbnails do produto com seleção de imagem.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailFilesVertical images={data.gallery} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsImage } from "../types";
+
+  let {
+    images,
+    className,
+    isLoading = false,
+  }: {
+    images: ProductDetailsImage[];
+    className?: string;
+    isLoading?: boolean;
+  } = $props();
+
+  let activeIndex = $state(0);
+  const active = $derived(images[activeIndex]);
+</script>
+
+<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)}
+          <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}
+    <div class="flex gap-3">
+      <div class="flex shrink-0 flex-col gap-2">
+        {#each images as image, i (image.src)}
+          <button
+            type="button"
+            aria-label={image.alt ?? `Imagem ${i + 1}`}
+            onclick={() => (activeIndex = i)}
+            class="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"
+            />
+          </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"
+        />
+      </div>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { ProductDetailsImage } from "../types";
+type $$ComponentProps = {
+    images: ProductDetailsImage[];
+    className?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailFilesVertical: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailFilesVertical = ReturnType<typeof ProductDetailFilesVertical>;
+export default ProductDetailFilesVertical;

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

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  /**
+   * Cabeçalho do produto: título e subtítulo.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailHeader title={data.title} subtitle={data.subtitle} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    title,
+    subtitle,
+    className,
+    isLoading = false,
+  }: {
+    title: string;
+    subtitle?: string;
+    className?: string;
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-2 {className}">
+    <Skeleton class="h-8 w-2/3 rounded-md" />
+    <Skeleton class="h-4 w-1/2 rounded-md" />
+  </div>
+{:else}
+  <header class="flex flex-col gap-2 {className}">
+    <h1 class="text-3xl font-bold tracking-tight">{title}</h1>
+    {#if subtitle}
+      <p class="text-muted-foreground">{subtitle}</p>
+    {/if}
+  </header>
+{/if}

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    title: string;
+    subtitle?: string;
+    className?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailHeader = ReturnType<typeof ProductDetailHeader>;
+export default ProductDetailHeader;

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

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  /**
+   * Galeria de imagens do produto com miniatura selecionável.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailImage images={data.gallery} className="md:col-span-2" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsImage } from "../types";
+
+  let {
+    images,
+    className,
+    isLoading = false,
+  }: {
+    images: ProductDetailsImage[];
+    className?: string;
+    isLoading?: boolean;
+  } = $props();
+
+  let activeIndex = $state(0);
+  const active = $derived(images[activeIndex]);
+</script>
+
+<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)}
+        <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"
+      />
+    </div>
+
+    {#if images.length > 1}
+      <div class="flex gap-2 overflow-x-auto no-scrollbar">
+        {#each images as image, i (image.src)}
+          <button
+            type="button"
+            aria-label={image.alt ?? `Imagem ${i + 1}`}
+            onclick={() => (activeIndex = i)}
+            class="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"
+            />
+          </button>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>

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

@@ -0,0 +1,9 @@
+import type { ProductDetailsImage } from "../types";
+type $$ComponentProps = {
+    images: ProductDetailsImage[];
+    className?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailImage = ReturnType<typeof ProductDetailImage>;
+export default ProductDetailImage;

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

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  /**
+   * Mapa de localização do produto (iframe embed).
+   * Quando `isLoading` é true, exibe um Skeleton.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailMap location={data.location} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsLocation } from "../types";
+
+  let {
+    location,
+    className,
+    isLoading = false,
+  }: {
+    location?: ProductDetailsLocation;
+    className?: string;
+    isLoading?: boolean;
+  } = $props();
+
+  const defaultMapUrl = $derived(
+    "https://www.openstreetmap.org/export/embed.html?bbox=13.2292%2C-8.8486%2C13.2462%2C-8.8339&layer=mapnik&marker=-8.8412%2C13.2377",
+  );
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-3 {className}">
+    <Skeleton class="h-4 w-40 rounded-md" />
+    <Skeleton class="h-72 w-full rounded-lg" />
+  </div>
+{:else if location}
+  <div class="flex flex-col gap-3 {className}">
+    {#if location.label || location.address}
+      <div class="flex flex-col gap-1">
+        {#if location.label}
+          <p class="text-sm font-semibold">{location.label}</p>
+        {/if}
+        {#if location.address}
+          <p class="text-sm text-muted-foreground">{location.address}</p>
+        {/if}
+      </div>
+    {/if}
+
+    <iframe
+      title={location.label ?? "Localização"}
+      src={location.mapUrl ?? defaultMapUrl}
+      class="h-72 w-full rounded-lg border"
+      loading="lazy"
+    ></iframe>
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { ProductDetailsLocation } from "../types";
+type $$ComponentProps = {
+    location?: ProductDetailsLocation;
+    className?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailMap: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailMap = ReturnType<typeof ProductDetailMap>;
+export default ProductDetailMap;

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

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  /**
+   * Preço do produto (novo e antigo), com moeda opcional.
+   * Quando `isLoading` é true, exibe um Skeleton.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailPrice newPrice={1000} oldPrice={2000} currency="Kz" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CardStartPrice from "../../../core/card/shared/CardStartPrice.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    newPrice,
+    oldPrice,
+    currency,
+    isLoading = false,
+  }: {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    currency?: string;
+    isLoading?: boolean;
+  } = $props();
+
+  const formatted = $derived(
+    newPrice != null
+      ? currency
+        ? `${newPrice} ${currency}`
+        : String(newPrice)
+      : undefined,
+  );
+</script>
+
+{#if isLoading}
+  <Skeleton class="h-7 w-28 rounded-md" />
+{:else if formatted || oldPrice}
+  <div class="flex items-end gap-3">
+    <CardStartPrice newPrice={formatted} oldPrice={oldPrice} />
+  </div>
+{/if}

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    newPrice?: string | number;
+    oldPrice?: string | number;
+    currency?: string;
+    isLoading?: boolean;
+};
+declare const ProductDetailPrice: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailPrice = ReturnType<typeof ProductDetailPrice>;
+export default ProductDetailPrice;