negodesign 0.0.29 → 0.0.31

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;

package/dist/components/pages/profile-user/02/ProfileUser02.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+	/**
+	 * Variante 02 da página de perfil. Reutiliza header,
+	 * tabs underline, 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,
+		onAddAddress,
+		onChangePassword,
+		onLoginAsUser,
+		tabs: customTabs,
+	}: {
+		data: ProfileUserData;
+		activeTab?: string;
+		isLoading?: boolean;
+		onAddAddress?: () => void;
+		onChangePassword?: (payload: {
+			currentPassword: string;
+			newPassword: string;
+			confirmPassword: string;
+		}) => void;
+		onLoginAsUser?: (id: string | number) => void;
+		tabs?: { id: string; label: 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} />
+
+	<div class="mx-auto max-w-5xl px-6 pb-12">
+		<ProfileUserTabs
+			tabs={defaultTabs}
+			bind:activeTab
+			{isLoading}
+		/>
+
+		<div class="flex flex-col gap-6">
+			{#if currentTab === "addresses"}
+				<ProfileUserAddress
+					addresses={data.addresses}
+					{isLoading}
+					{onAddAddress}
+				/>
+			{: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/02/ProfileUser02.svelte.d.ts

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

package/dist/components/pages/profile-user/03/ProfileUser03.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" module>
+	/**
+	 * Variante 03 da página de perfil. Reutiliza header, tabs pill,
+	 * moradas, segurança e definições.
+	 * Todos os textos parametrizáveis com defaults via i18n.
+	 * @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,
+		onAddAddress,
+		onChangePassword,
+		onLoginAsUser,
+		tabs: customTabs,
+	}: {
+		data: ProfileUserData;
+		activeTab?: string;
+		isLoading?: boolean;
+		onAddAddress?: () => void;
+		onChangePassword?: (payload: {
+			currentPassword: string;
+			newPassword: string;
+			confirmPassword: string;
+		}) => void;
+		onLoginAsUser?: (id: string | number) => void;
+		tabs?: { id: string; label: 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} />
+
+	<div class="mx-auto max-w-7xl px-6">
+		<ProfileUserTabs
+			tabs={defaultTabs}
+			bind:activeTab
+			style="pill"
+			{isLoading}
+		/>
+
+		<div class="pb-12">
+			{#if currentTab === "addresses"}
+				<ProfileUserAddress
+					addresses={data.addresses}
+					{isLoading}
+					{onAddAddress}
+				/>
+			{: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/03/ProfileUser03.svelte.d.ts

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

package/dist/components/pages/profile-user/ProfileUser.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+  /**
+   * Página de perfil do utilizador com seleção de layout.
+   * Permite escolher entre três variantes.
+   * - **1**: Header com avatar à esquerda, tabs para moradas e definições.
+   * - **2**: Header com avatar à esquerda, tabs para segurança.
+   * - **3**: Header com avatar à esquerda, tabs pill para moradas, segurança e definições.
+   *
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import type { ProfileUserProps } from "./types";
+  import ProfileUser01 from "./01/ProfileUser01.svelte";
+  import ProfileUser02 from "./02/ProfileUser02.svelte";
+  import ProfileUser03 from "./03/ProfileUser03.svelte";
+
+  let {
+    varient = 1,
+    data,
+    activeTab,
+    isLoading = false,
+    tabs,
+    ...restProps
+  }: ProfileUserProps = $props();
+</script>
+
+{#if varient === 2}
+  <ProfileUser02
+    {data}
+    {activeTab}
+    {isLoading}
+    {tabs}
+    {...restProps}
+  />
+{:else if varient === 3}
+  <ProfileUser03
+    {data}
+    {activeTab}
+    {isLoading}
+    {tabs}
+    {...restProps}
+  />
+{:else}
+  <ProfileUser01
+    {data}
+    {activeTab}
+    {isLoading}
+    {tabs}
+    {...restProps}
+  />
+{/if}

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

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