negodesign 0.0.30 → 0.0.32

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;

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

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+  /**
+   * Painel de compra do produto: avaliação, preço e ações.
+   * Compõe ProductDetailRating, ProductDetailPrice e ProductDetailActions.
+   * @component
+   * @example
+   * ```svelte
+   * <ProductPurchasePanel {data} isLoading={true} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import ProductDetailActions from "./ProductDetailActions.svelte";
+  import ProductDetailPrice from "./ProductDetailPrice.svelte";
+  import ProductDetailRating from "./ProductDetailRating.svelte";
+  import type { ProductDetailsData } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: {
+    data: ProductDetailsData;
+    isLoading?: boolean;
+    onBuy?: (id: string | number) => void;
+    onFavorite?: (id: string | number) => void;
+    onCart?: (id: string | number) => void;
+  } = $props();
+</script>
+
+<div class="flex flex-col gap-4">
+  <ProductDetailRating
+    rating={data.rating}
+    reviewsCount={data.reviewsCount}
+    {isLoading}
+  />
+
+  <ProductDetailPrice
+    newPrice={data.newPrice}
+    oldPrice={data.oldPrice}
+    currency={data.currency}
+    {isLoading}
+  />
+
+  <ProductDetailActions
+    id={data.id}
+    buttonBuyText={data.buttonBuyText}
+    isFavorite={data.isFavorite}
+    isCart={data.isCart}
+    {isLoading}
+    {onBuy}
+    {onFavorite}
+    {onCart}
+  />
+</div>

package/dist/components/pages/product-details/shared/ProductPurchasePanel.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 ProductPurchasePanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProductPurchasePanel = ReturnType<typeof ProductPurchasePanel>;
+export default ProductPurchasePanel;

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

@@ -0,0 +1,170 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+/**
+ * Item individual do breadcrumb de navegação.
+ * Representa um nível hierárquico na navegação da página
+ * (ex: Home / Turismo / Hotel Baía Azul).
+ */
+export interface ProductDetailsBreadcrumbItem {
+    /** Texto visível do item no breadcrumb. */
+    label: string;
+    /** URL de destino quando o item é clicável (último item geralmente não tem href). */
+    href?: string;
+}
+/**
+ * Tag/badge associada ao produto.
+ * Usada para destacar categorias, localização ou características rápidas.
+ */
+export interface ProductDetailsTag {
+    /** Ícone opcional exibido antes do texto da tag. */
+    icon?: IconSvgElement;
+    /** Texto principal da tag (ex: "Luanda", "5 Estrelas"). */
+    text: string;
+}
+/**
+ * Imagem da galeria do produto.
+ * Cada imagem pode ter um texto alternativo para acessibilidade.
+ */
+export interface ProductDetailsImage {
+    /** Caminho ou URL completa da imagem (obrigatório). */
+    src: string;
+    /** Texto alternativo para acessibilidade (recomendado). */
+    alt?: string;
+}
+/**
+ * Informações de localização do produto.
+ * Usada para exibir o mapa embed e detalhes do endereço.
+ */
+export interface ProductDetailsLocation {
+    /** Nome/título da localização (ex: "Morro da Luz"). */
+    label?: string;
+    /** Endereço completo ou parcial para exibição. */
+    address?: string;
+    /**
+     * URL do embed do mapa.
+     * Suporta OpenStreetMap, Google Maps e outros serviços de embed.
+     * Se não for fornecido, usa um mapa padrão.
+     */
+    mapUrl?: string;
+}
+/**
+ * Avaliação de um cliente sobre o produto.
+ * Contém autor, classificação, data e comentário.
+ */
+export interface ProductDetailsReview {
+    /** Identificador único da avaliação (usado como key nos {#each}). */
+    id: string | number;
+    /** Nome do autor da avaliação. */
+    author: string;
+    /**
+     * Classificação numérica (ex: 4.5 de 5).
+     * Geralmente um valor entre 0 e 5.
+     */
+    rating: number;
+    /** Data da avaliação (formato string, ex: "12/08/2024"). */
+    date?: string;
+    /** Comentário/texto completo da avaliação. */
+    comment: string;
+}
+/**
+ * Aba de conteúdo adicional no produto.
+ * Usada para organizar descrição, avaliações, detalhes técnicos, etc.
+ */
+export interface ProductDetailsTab {
+    /** Identificador único da aba (ex: "description", "reviews"). */
+    id: string;
+    /** Rótulo visível no botão da aba. */
+    label: string;
+}
+/**
+ * Dados completos apresentados na página de detalhes do produto.
+ * Interface principal que agrega todas as informações necessárias
+ * para renderizar qualquer variante do componente.
+ */
+export interface ProductDetailsData {
+    /** Identificador único do produto. */
+    id: string | number;
+    /** Itens do breadcrumb de navegação. */
+    breadcrumb: ProductDetailsBreadcrumbItem[];
+    /** Título principal do produto (nome). */
+    title: string;
+    /** Subtítulo opcional (slogan ou descrição curta). */
+    subtitle?: string;
+    /** Descrição curta do produto. */
+    description: string;
+    /** Descrição longa/detalhada (opcional). */
+    longDescription?: string;
+    /** Lista de tags/categorias associadas ao produto. */
+    tags?: ProductDetailsTag[];
+    /** Galeria de imagens do produto. */
+    gallery: ProductDetailsImage[];
+    /** Informações de localização para exibir no mapa. */
+    location?: ProductDetailsLocation;
+    /**
+     * Classificação média do produto.
+     * Valor entre 0 e 5 (ex: 4.2).
+     */
+    rating?: number;
+    /** Número total de avaliações recebidas. */
+    reviewsCount?: number;
+    /** Lista de avaliações individuais dos clientes. */
+    reviews?: ProductDetailsReview[];
+    /** Preço atual/promocional do produto. */
+    newPrice?: string | number;
+    /** Preço original (antes do desconto). */
+    oldPrice?: string | number;
+    /** Símbolo da moeda (ex: "Kz", "€", "$"). */
+    currency?: string;
+    /** Quantidade disponível em stock. */
+    quantityAvailable?: number;
+    /** Lista de características/features do produto (strings). */
+    features?: string[];
+    /**
+     * Abas de conteúdo personalizadas.
+     * Se não for fornecido, usa padrão: Descrição + Avaliações.
+     */
+    tabs?: ProductDetailsTab[];
+    /** Texto customizado para o botão de compra (padrão: "Comprar"). */
+    buttonBuyText?: string;
+    /** Estado inicial do produto no carrinho. */
+    isCart?: boolean;
+    /** Estado inicial do produto nos favoritos. */
+    isFavorite?: boolean;
+}
+/**
+ * Propriedades do componente principal ProductDetails.
+ * Suporta quatro variantes de layout e callbacks de interação.
+ */
+export interface ProductDetailsProps {
+    /**
+     * Variante do layout da página de detalhes.
+     * - 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
+     * @default 1
+     */
+    varient?: 1 | 2 | 3 | 4;
+    /** Dados completos do produto a serem exibidos. */
+    data: ProductDetailsData;
+    /**
+     * Estado de carregamento.
+     * Quando true, todos os blocos exibem Skeletons no lugar do conteúdo.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Callback executado quando o utilizador clica no botão de compra.
+     * Recebe o id do produto como argumento.
+     */
+    onBuy?: (id: string | number) => void;
+    /**
+     * Callback executado quando o utilizador clica no botão de favorito.
+     * Recebe o id do produto como argumento.
+     */
+    onFavorite?: (id: string | number) => void;
+    /**
+     * Callback executado quando o utilizador clica no botão de carrinho.
+     * Recebe o id do produto como argumento.
+     */
+    onCart?: (id: string | number) => void;
+}

package/dist/components/pages/product-details/types.js

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

package/dist/components/pages/profile-user/01/ProfileUser01.svelte

@@ -0,0 +1,113 @@
+<script lang="ts" module>
+	/**
+	 * Variante 01 da página de perfil. Reutiliza headers partilhados,
+	 * tabs, moradas, segurança e definições.
+	 * @component
+	 */
+</script>
+
+<script lang="ts">
+	import { t } from "../../../../i18n";
+	import type { ProfileUserData } from "../types";
+	import ProfileUserHeader from "../shared/ProfileUserHeader.svelte";
+	import ProfileUserTabs from "../shared/ProfileUserTabs.svelte";
+	import ProfileUserAddress from "../shared/ProfileUserAddress.svelte";
+	import ProfileUserResetPassword from "../shared/ProfileUserResetPassword.svelte";
+	import ProfileUserSetting from "../shared/ProfileUserSetting.svelte";
+
+	let {
+		data,
+		activeTab = $bindable(),
+		isLoading = false,
+		onLoginAsUser,
+		onAddAddress,
+		onChangePassword,
+		tabs: customTabs,
+		// Header V1
+		statusDefault = $t("profile-user.variant1.statusActive"),
+		roleDefault = $t("profile-user.variant1.roleAdministrator"),
+		loginAsUserLabel = $t("profile-user.variant1.loginAsUser"),
+		// Address
+		addressesTitle = $t("profile-user.variant1.addresses.title"),
+		addressesAddLabel = $t("profile-user.variant1.addresses.add"),
+		addressesDefaultBadge = $t("profile-user.variant1.addresses.defaultBadge"),
+		addressesEmptyText = $t("profile-user.variant1.addresses.empty"),
+	}: {
+		data: ProfileUserData;
+		activeTab?: string;
+		isLoading?: boolean;
+		onLoginAsUser?: (id: string | number) => void;
+		onAddAddress?: () => void;
+		onChangePassword?: (payload: {
+			currentPassword: string;
+			newPassword: string;
+			confirmPassword: string;
+		}) => void;
+		tabs?: { id: string; label: string }[];
+		// Header V1
+		statusDefault?: string;
+		roleDefault?: string;
+		loginAsUserLabel?: string;
+		// Address
+		addressesTitle?: string;
+		addressesAddLabel?: string;
+		addressesDefaultBadge?: string;
+		addressesEmptyText?: string;
+	} = $props();
+
+	const defaultTabs = $derived(
+		customTabs?.length
+			? customTabs
+			: [
+					{ id: "addresses", label: $t("profile-user.variant1.tabs.addresses") || "Moradas" },
+					{ id: "security", label: $t("profile-user.variant2.tabs.security") || "Segurança" },
+					{ id: "settings", label: $t("profile-user.variant1.tabs.settings") || "Definições" },
+				]
+	);
+
+	const currentTab = $derived(activeTab ?? defaultTabs[0]?.id ?? "addresses");
+	const fullName = $derived(data.fullName ?? `${data.firstName} ${data.lastName}`);
+</script>
+
+<div class="bg-background">
+	<ProfileUserHeader
+		{data}
+		{isLoading}
+		{fullName}
+		{onLoginAsUser}
+		{statusDefault}
+		{roleDefault}
+		{loginAsUserLabel}
+	/>
+
+	<div class="mx-auto max-w-7xl px-6 py-8">
+		<ProfileUserTabs
+			tabs={defaultTabs}
+			bind:activeTab
+			{isLoading}
+		/>
+
+		<div class="flex flex-col gap-8">
+			{#if currentTab === "addresses"}
+				<ProfileUserAddress
+					addresses={data.addresses}
+					{isLoading}
+					{onAddAddress}
+					title={addressesTitle}
+					addLabel={addressesAddLabel}
+					defaultBadge={addressesDefaultBadge}
+					emptyText={addressesEmptyText}
+				/>
+			{:else if currentTab === "security"}
+				<ProfileUserResetPassword {isLoading} {onChangePassword} />
+			{:else if currentTab === "settings"}
+				<ProfileUserSetting
+					notificationPref={data.notificationPref}
+					enableNotification={data.enableNotification}
+					marketingPrefs={data.marketingPrefs}
+					{isLoading}
+				/>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/pages/profile-user/01/ProfileUser01.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { ProfileUserData } from "../types";
+type $$ComponentProps = {
+    data: ProfileUserData;
+    activeTab?: string;
+    isLoading?: boolean;
+    onLoginAsUser?: (id: string | number) => void;
+    onAddAddress?: () => void;
+    onChangePassword?: (payload: {
+        currentPassword: string;
+        newPassword: string;
+        confirmPassword: string;
+    }) => void;
+    tabs?: {
+        id: string;
+        label: string;
+    }[];
+    statusDefault?: string;
+    roleDefault?: string;
+    loginAsUserLabel?: string;
+    addressesTitle?: string;
+    addressesAddLabel?: string;
+    addressesDefaultBadge?: string;
+    addressesEmptyText?: string;
+};
+declare const ProfileUser01: import("svelte").Component<$$ComponentProps, {}, "activeTab">;
+type ProfileUser01 = ReturnType<typeof ProfileUser01>;
+export default ProfileUser01;