negodesign 0.0.29 → 0.0.31

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;

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

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+  /**
+   * Avaliação (estrelas + contagem) do produto.
+   * Quando `isLoading` é true, exibe um Skeleton.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailRating rating={4.5} reviewsCount={120} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CardStarRating from "../../../core/card/shared/CardStarRating.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+
+  let {
+    rating,
+    reviewsCount,
+    isLoading = false,
+  }: {
+    rating?: number;
+    reviewsCount?: number;
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex items-center gap-2">
+    <Skeleton class="h-6 w-24 rounded-md" />
+    <Skeleton class="h-4 w-16 rounded-md" />
+  </div>
+{:else if rating}
+  <div class="flex items-center gap-2">
+    <CardStarRating startNumber={rating} startMax={5} />
+    {#if reviewsCount}
+      <span class="text-sm text-muted-foreground">
+        ({reviewsCount} avaliações)
+      </span>
+    {/if}
+  </div>
+{/if}

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

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

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

@@ -0,0 +1,70 @@
+<script lang="ts" module>
+  /**
+   * Lista de avaliações de clientes do produto.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailReviews reviews={data.reviews} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CardStarRating from "../../../core/card/shared/CardStarRating.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsReview } from "../types";
+
+  let {
+    reviews,
+    isLoading = false,
+  }: {
+    reviews?: ProductDetailsReview[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-col gap-6">
+    {#each Array.from({ length: 2 }) as _, i (i)}
+      <div class="flex flex-col gap-2 border-b pb-6 last:border-b-0">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <Skeleton class="size-9 rounded-full" />
+            <div class="flex flex-col gap-1">
+              <Skeleton class="h-4 w-28 rounded-md" />
+              <Skeleton class="h-3 w-20 rounded-md" />
+            </div>
+          </div>
+          <Skeleton class="h-5 w-24 rounded-md" />
+        </div>
+        <Skeleton class="h-4 w-full rounded-md" />
+        <Skeleton class="h-4 w-3/4 rounded-md" />
+      </div>
+    {/each}
+  </div>
+{:else if reviews?.length}
+  <div class="flex flex-col gap-6">
+    {#each reviews as review (review.id)}
+      <article class="flex flex-col gap-2 border-b pb-6 last:border-b-0">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="flex size-9 items-center justify-center rounded-full bg-muted text-sm font-semibold">
+              {review.author.charAt(0)}
+            </div>
+            <div>
+              <p class="text-sm font-medium">{review.author}</p>
+              {#if review.date}
+                <p class="text-xs text-muted-foreground">{review.date}</p>
+              {/if}
+            </div>
+          </div>
+          <CardStarRating startNumber={review.rating} startMax={5} />
+        </div>
+        <p class="text-sm leading-6 text-foreground/85">{review.comment}</p>
+      </article>
+    {/each}
+  </div>
+{:else}
+  <p class="text-muted-foreground">Sem avaliações disponíveis.</p>
+{/if}

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

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

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

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+  /**
+   * Abas de conteúdo do produto (descrição, avaliações, etc).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailTabs tabs={data.tabs} {data}>
+   *   {#snippet tabContent(tab)}
+   *     ...
+   *   {/snippet}
+   * </ProductDetailTabs>
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsData, ProductDetailsTab } from "../types";
+  import ProductDetailDescription from "./ProductDetailDescription.svelte";
+  import ProductDetailFeatures from "./ProductDetailFeatures.svelte";
+  import ProductDetailReviews from "./ProductDetailReviews.svelte";
+
+  let {
+    data,
+    tabs,
+    isLoading = false,
+    children,
+  }: {
+    data: ProductDetailsData;
+    tabs?: ProductDetailsTab[];
+    isLoading?: boolean;
+    /** Snippet opcional para renderizar o conteúdo de cada aba. */
+    children?: Snippet<[ProductDetailsTab]>;
+  } = $props();
+
+  const defaultTabs = $derived(
+    tabs?.length
+      ? tabs
+      : [
+          { id: "description", label: "Descrição" },
+          { id: "reviews", label: "Avaliações" },
+        ],
+  );
+
+  let activeTab = $state<string | undefined>(undefined);
+  const currentTab = $derived(activeTab ?? defaultTabs[0]?.id ?? "description");
+</script>
+
+<div>
+  <div class="mb-6 flex gap-1 border-b">
+    {#if isLoading}
+      {#each defaultTabs as tab (tab.id)}
+        <Skeleton class="h-9 w-24 rounded-t-md" />
+      {/each}
+    {:else}
+      {#each defaultTabs as tab (tab.id)}
+        <button
+          type="button"
+          onclick={() => (activeTab = tab.id)}
+          class="px-4 py-2 text-sm font-medium transition-colors {currentTab ===
+          tab.id
+            ? 'border-b-2 border-foreground text-foreground'
+            : 'border-b-2 border-transparent text-muted-foreground hover:text-foreground'}"
+        >
+          {tab.label}
+        </button>
+      {/each}
+    {/if}
+  </div>
+
+  {#if isLoading}
+    <div class="flex max-w-3xl flex-col gap-2">
+      {#each Array.from({ length: 4 }) as _, i (i)}
+        <Skeleton class="h-4 w-full rounded-md" />
+      {/each}
+    </div>
+  {:else if children}
+    {@render children(defaultTabs.find((tab) => tab.id === currentTab) ?? defaultTabs[0])}
+  {:else if currentTab === "description"}
+    <div class="flex max-w-3xl flex-col gap-5">
+      <ProductDetailDescription
+        description={data.description}
+        longDescription={data.longDescription}
+      />
+      {#if data.features}
+        <ProductDetailFeatures features={data.features} />
+      {/if}
+    </div>
+  {:else if currentTab === "reviews"}
+    <div class="max-w-3xl">
+      <ProductDetailReviews reviews={data.reviews} />
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+import type { ProductDetailsData, ProductDetailsTab } from "../types";
+type $$ComponentProps = {
+    data: ProductDetailsData;
+    tabs?: ProductDetailsTab[];
+    isLoading?: boolean;
+    /** Snippet opcional para renderizar o conteúdo de cada aba. */
+    children?: Snippet<[ProductDetailsTab]>;
+};
+declare const ProductDetailTabs: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductDetailTabs = ReturnType<typeof ProductDetailTabs>;
+export default ProductDetailTabs;

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

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  /**
+   * Lista de tags do produto (ex: localização, categoria).
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductDetailTags tags={[{ text: "Luanda" }, { text: "Kilamba" }]} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CardTags from "../../../core/card/shared/CardTags.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import type { ProductDetailsTag } from "../types";
+
+  let {
+    tags,
+    isLoading = false,
+  }: {
+    tags?: ProductDetailsTag[];
+    isLoading?: boolean;
+  } = $props();
+</script>
+
+{#if isLoading}
+  <div class="flex flex-wrap gap-2">
+    {#each Array.from({ length: 3 }) as _, i (i)}
+      <Skeleton class="h-5 w-20 rounded-full" />
+    {/each}
+  </div>
+{:else if tags?.length}
+  <CardTags tags={tags} isWrap />
+{/if}

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

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