negodesign 0.0.30 → 0.0.32

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;

package/dist/components/pages/profile-user/shared/ProfileUserAddress.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" module>
+	/**
+	 * Lista de moradas do utilizador com opção de adicionar e badge para default.
+	 * Extraído da variante 1. Todos os textos são parametrizáveis com defaults via i18n.
+	 * @component
+	 */
+</script>
+
+<script lang="ts">
+	import { MapPin } from "@hugeicons/core-free-icons";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import PlusIcon from "@lucide/svelte/icons/plus";
+	import Badge from "../../../ui/badge/badge.svelte";
+	import Button from "../../../ui/button/button.svelte";
+	import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+	import { cn } from "../../../../utils.js";
+	import { t } from "../../../../i18n";
+	import type { ProfileUserAddress, ProfileUserAddressProps } from "../types";
+
+	let {
+		addresses,
+		isLoading = false,
+		onAddAddress,
+		className,
+		title = $t("profile-user.variant1.addresses.title"),
+		addLabel = $t("profile-user.variant1.addresses.add"),
+		defaultBadge = $t("profile-user.variant1.addresses.defaultBadge"),
+		emptyText = $t("profile-user.variant1.addresses.empty"),
+	}: ProfileUserAddressProps & {
+		addresses?: ProfileUserAddress[];
+		isLoading?: boolean;
+	} = $props();
+</script>
+
+<section
+	class={cn("rounded-lg border bg-card p-6", className)}
+	data-slot="profile-user-address"
+>
+	<div class="mb-6 flex items-center justify-between">
+		<h3 class="text-lg font-semibold">{title}</h3>
+		<Button variant="ghost" size="sm" onclick={onAddAddress}>
+			<PlusIcon class="size-4" />
+			{addLabel}
+		</Button>
+	</div>
+
+	{#if isLoading}
+		<div class="grid gap-4 md:grid-cols-2">
+			{#each Array.from({ length: 2 }) as _, i (i)}
+				<Skeleton class="h-32 w-full rounded-md" />
+			{/each}
+		</div>
+	{:else if addresses && addresses.length > 0}
+		<div class="grid gap-4 md:grid-cols-2">
+			{#each addresses as address (address.id)}
+				<div
+					class={cn(
+						"rounded-md border p-4 transition-colors",
+						address.isDefault ? "border-primary bg-primary/5" : ""
+					)}
+				>
+					<div class="mb-2 flex items-center justify-between">
+						<span class="font-medium">{address.label}</span>
+						{#if address.isDefault}
+							<Badge>{defaultBadge}</Badge>
+						{/if}
+					</div>
+					<div class="flex flex-col gap-1 text-sm text-muted-foreground">
+						<p class="flex items-start gap-1.5">
+							<HugeiconsIcon icon={MapPin} class="mt-0.5 size-4 shrink-0" />
+							{address.street}
+							{#if address.apartment}, {address.apartment}{/if}
+						</p>
+						{#if address.state || address.zip}
+							<p class="pl-5.5">{address.state ?? ""} {address.zip ?? ""}</p>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else}
+		<p class="text-sm text-muted-foreground">{emptyText}</p>
+	{/if}
+</section>

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

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

package/dist/components/pages/profile-user/shared/ProfileUserHeader.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" module>
+  /**
+   * Header da página de perfil: gradiente amarelo/laranja, avatar à esquerda,
+   * nome + status, role, email/telefone e botão "LOGIN AS USER".
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import {
+    BadgeCheckIcon,
+    Mail01Icon,
+    UserIcon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import Avatar from "../../../ui/avatar/avatar.svelte";
+  import AvatarImage from "../../../ui/avatar/avatar-image.svelte";
+  import Badge from "../../../ui/badge/badge.svelte";
+  import Button from "../../../ui/button/button.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../i18n";
+  import type { ProfileUserData, ProfileUserHeaderProps } from "../types";
+
+  let {
+    data,
+    isLoading = false,
+    fullName,
+    onLoginAsUser,
+    statusDefault = $t("profile-user.variant1.statusActive"),
+    roleDefault = $t("profile-user.variant1.roleDefault"),
+    loginAsUserLabel = $t("profile-user.variant1.actionLoginAsUser"),
+  }: ProfileUserHeaderProps & {
+    data: ProfileUserData;
+    isLoading?: boolean;
+    fullName: string;
+  } = $props();
+</script>
+
+<header
+  class="bg-linear-to-r from-blue-400 to-blue-500 px-6 py-10 text-white"
+  data-slot="profile-user-header"
+>
+  <div class="mx-auto max-w-7xl">
+    <div
+      class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between"
+    >
+      <div class="flex items-center gap-5">
+        {#if isLoading}
+          <Skeleton class="size-24 rounded-full" />
+        {:else}
+          <Avatar size="lg" class="size-24 ring-4 ring-white/30">
+            <AvatarImage src={data.avatarUrl} alt={fullName} />
+          </Avatar>
+        {/if}
+        <div class="flex flex-col gap-2">
+          {#if isLoading}
+            <Skeleton class="h-8 w-48 rounded-md bg-white/30" />
+            <Skeleton class="h-5 w-36 rounded-md bg-white/20" />
+            <Skeleton class="h-4 w-44 rounded-md bg-white/20" />
+          {:else}
+            <div class="flex items-center gap-2">
+              <h1 class="text-2xl font-bold text-white">{fullName}</h1>
+              <Badge
+                variant="secondary"
+                class="bg-white/20 text-white hover:bg-white/30"
+              >
+                <HugeiconsIcon icon={BadgeCheckIcon} />
+                {data.status ?? statusDefault}
+              </Badge>
+            </div>
+            <p class="text-base font-medium text-white/90">
+              {data.role ?? roleDefault}
+            </p>
+            <div class="flex items-center gap-4 text-sm text-white/80">
+              <span class="flex items-center gap-1.5">
+                <HugeiconsIcon icon={Mail01Icon} class="size-4" />
+                {data.email}
+              </span>
+              {#if data.phone}
+                <span class="flex items-center gap-1.5">
+                  <HugeiconsIcon icon={UserIcon} class="size-4" />
+                  {data.phone}
+                </span>
+              {/if}
+            </div>
+          {/if}
+        </div>
+      </div>
+      <div>
+        {#if isLoading}
+          <Skeleton class="h-9 w-36 rounded-md bg-white/30" />
+        {:else}
+          <Button
+            variant="outline"
+            class="border-white/30 bg-white/10 text-white hover:bg-white/20 hover:text-white"
+            onclick={() => onLoginAsUser?.(data.id)}
+          >
+            {loginAsUserLabel}
+          </Button>
+        {/if}
+      </div>
+    </div>
+  </div>
+</header>

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

@@ -0,0 +1,9 @@
+import type { ProfileUserData, ProfileUserHeaderProps } from "../types";
+type $$ComponentProps = ProfileUserHeaderProps & {
+    data: ProfileUserData;
+    isLoading?: boolean;
+    fullName: string;
+};
+declare const ProfileUserHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileUserHeader = ReturnType<typeof ProfileUserHeader>;
+export default ProfileUserHeader;

package/dist/components/pages/profile-user/shared/ProfileUserResetPassword.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" module>
+  /**
+   * Formulário de alteração de senha da variante 2 (aba "Security").
+   * Contém campos Current password, New password e Confirm new password,
+   * além dos botões Update Password e Cancel.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import Button from "../../../ui/button/button.svelte";
+  import Input from "../../../ui/input/input.svelte";
+  import Label from "../../../ui/label/label.svelte";
+  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+  import { cn } from "../../../../utils.js";
+  import { t } from "../../../../i18n";
+  import type { ProfileUserResetPasswordProps } from "../types";
+
+  let {
+    isLoading = false,
+    className,
+    onChangePassword,
+    onCancel,
+    title = $t("profile-user.resetPassword.title"),
+    currentLabel = $t("profile-user.resetPassword.current.label"),
+    currentPlaceholder = $t("profile-user.resetPassword.current.placeholder"),
+    newLabel = $t("profile-user.resetPassword.new.label"),
+    newPlaceholder = $t("profile-user.resetPassword.new.placeholder"),
+    confirmLabel = $t("profile-user.resetPassword.confirm.label"),
+    confirmPlaceholder = $t("profile-user.resetPassword.confirm.placeholder"),
+    submitLabel = $t("profile-user.resetPassword.submit"),
+    cancelLabel = $t("profile-user.resetPassword.cancel"),
+  }: ProfileUserResetPasswordProps & {
+    isLoading?: boolean;
+  } = $props();
+
+  let currentPassword = $state("");
+  let newPassword = $state("");
+  let confirmPassword = $state("");
+
+  const handleSubmit = () => {
+    onChangePassword?.({
+      currentPassword,
+      newPassword,
+      confirmPassword,
+    });
+  };
+
+  const handleCancel = () => {
+    currentPassword = "";
+    newPassword = "";
+    confirmPassword = "";
+    onCancel?.();
+  };
+</script>
+
+<section class={cn("rounded-lg border bg-card p-6", className)} data-slot="profile-user-reset-password">
+  <h3 class="mb-6 text-lg font-semibold">{title}</h3>
+
+  <form
+    class="flex max-w-md flex-col gap-5"
+    onsubmit={(e) => {
+      e.preventDefault();
+      handleSubmit();
+    }}
+  >
+    <div class="flex flex-col gap-2">
+      <Label for="currentPassword">{currentLabel}</Label>
+      {#if isLoading}
+        <Skeleton class="h-9 w-full rounded-md" />
+      {:else}
+        <Input
+          id="currentPassword"
+          type="password"
+          bind:value={currentPassword}
+          placeholder={currentPlaceholder}
+        />
+      {/if}
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label for="newPassword">{newLabel}</Label>
+      {#if isLoading}
+        <Skeleton class="h-9 w-full rounded-md" />
+      {:else}
+        <Input
+          id="newPassword"
+          type="password"
+          bind:value={newPassword}
+          placeholder={newPlaceholder}
+        />
+      {/if}
+    </div>
+
+    <div class="flex flex-col gap-2">
+      <Label for="confirmPassword">{confirmLabel}</Label>
+      {#if isLoading}
+        <Skeleton class="h-9 w-full rounded-md" />
+      {:else}
+        <Input
+          id="confirmPassword"
+          type="password"
+          bind:value={confirmPassword}
+          placeholder={confirmPlaceholder}
+        />
+      {/if}
+    </div>
+
+    <div class="flex gap-3 pt-2">
+      <Button type="submit" disabled={isLoading}>{submitLabel}</Button>
+      <Button type="button" variant="outline" onclick={handleCancel} disabled={isLoading}>
+        {cancelLabel}
+      </Button>
+    </div>
+  </form>
+</section>

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

@@ -0,0 +1,7 @@
+import type { ProfileUserResetPasswordProps } from "../types";
+type $$ComponentProps = ProfileUserResetPasswordProps & {
+    isLoading?: boolean;
+};
+declare const ProfileUserResetPassword: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileUserResetPassword = ReturnType<typeof ProfileUserResetPassword>;
+export default ProfileUserResetPassword;