negodesign 0.0.29 → 0.0.31

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;

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

@@ -0,0 +1,176 @@
+<script lang="ts" module>
+  /**
+   * Preferências de notificações e marketing.
+   * Inclui secções "Email/Notification preferences" e "Enable notification",
+   * além das preferências de marketing.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import Checkbox from "../../../ui/checkbox/checkbox.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 {
+    ProfileUserMarketingPref,
+    ProfileUserNotificationPref,
+    ProfileUserSettingProps,
+  } from "../types";
+
+  let {
+    notificationPref,
+    enableNotification,
+    marketingPrefs,
+    isLoading = false,
+    className,
+    notificationTitle = $t("profile-user.setting.notification.title"),
+    notificationEmailLabel = $t("profile-user.setting.notification.email.label"),
+    notificationEmailDesc = $t("profile-user.setting.notification.email.desc"),
+    notificationWebLabel = $t("profile-user.setting.notification.web.label"),
+    notificationWebDesc = $t("profile-user.setting.notification.web.desc"),
+    notificationAppLabel = $t("profile-user.setting.notification.app.label"),
+    notificationAppDesc = $t("profile-user.setting.notification.app.desc"),
+    enableTitle = $t("profile-user.setting.enable.title"),
+    enableEmailLabel = $t("profile-user.setting.enable.email"),
+    enableWebLabel = $t("profile-user.setting.enable.web"),
+    enableAppLabel = $t("profile-user.setting.enable.app"),
+    marketingTitle = $t("profile-user.setting.marketing.title"),
+    marketingTypeLabel = $t("profile-user.setting.marketing.type"),
+    marketingEmailLabel = $t("profile-user.setting.marketing.email"),
+    marketingPushLabel = $t("profile-user.setting.marketing.push"),
+  }: ProfileUserSettingProps & {
+    notificationPref?: ProfileUserNotificationPref;
+    enableNotification?: { email?: boolean; web?: boolean; app?: boolean };
+    marketingPrefs?: ProfileUserMarketingPref[];
+    isLoading?: boolean;
+  } = $props();
+
+  let emailEnabled = $state(false);
+  let webEnabled = $state(false);
+  let appEnabled = $state(false);
+
+  let enableEmailChecked = $state(false);
+  let enableWebChecked = $state(false);
+  let enableAppChecked = $state(false);
+
+  $effect(() => {
+    emailEnabled = notificationPref?.emailEnabled ?? false;
+    webEnabled = notificationPref?.webEnabled ?? false;
+    appEnabled = notificationPref?.appEnabled ?? false;
+  });
+
+  $effect(() => {
+    enableEmailChecked = enableNotification?.email ?? false;
+    enableWebChecked = enableNotification?.web ?? false;
+    enableAppChecked = enableNotification?.app ?? false;
+  });
+
+  const marketingState = $state<Record<string, { email: boolean; push: boolean }>>({});
+  $effect(() => {
+    marketingPrefs?.forEach((pref) => {
+      if (!marketingState[pref.id]) {
+        marketingState[pref.id] = {
+          email: pref.email ?? false,
+          push: pref.push ?? false,
+        };
+      }
+    });
+  });
+</script>
+
+<div class={cn("flex flex-col gap-6", className)} data-slot="profile-user-setting">
+  <section class="rounded-lg border bg-card p-6">
+    <h3 class="mb-6 text-lg font-semibold">{notificationTitle}</h3>
+    {#if isLoading}
+      <div class="flex flex-col gap-4">
+        {#each Array.from({ length: 3 }) as _, i (i)}
+          <Skeleton class="h-6 w-full rounded-md" />
+        {/each}
+      </div>
+    {:else}
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationEmailLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationEmailDesc}</p>
+          </div>
+          <Checkbox bind:checked={emailEnabled} />
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationWebLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationWebDesc}</p>
+          </div>
+          <Checkbox bind:checked={webEnabled} />
+        </div>
+        <div class="flex items-center justify-between">
+          <div>
+            <Label class="cursor-pointer">{notificationAppLabel}</Label>
+            <p class="text-sm text-muted-foreground">{notificationAppDesc}</p>
+          </div>
+          <Checkbox bind:checked={appEnabled} />
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  <section class="rounded-lg border bg-card p-6">
+    <h3 class="mb-6 text-lg font-semibold">{enableTitle}</h3>
+    {#if isLoading}
+      <div class="flex flex-col gap-4">
+        {#each Array.from({ length: 3 }) as _, i (i)}
+          <Skeleton class="h-6 w-full rounded-md" />
+        {/each}
+      </div>
+    {:else}
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableEmailLabel}</Label>
+          <Checkbox bind:checked={enableEmailChecked} />
+        </div>
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableWebLabel}</Label>
+          <Checkbox bind:checked={enableWebChecked} />
+        </div>
+        <div class="flex flex-col items-center gap-2 rounded-md border p-4 text-center">
+          <Label class="cursor-pointer text-base font-medium">{enableAppLabel}</Label>
+          <Checkbox bind:checked={enableAppChecked} />
+        </div>
+      </div>
+    {/if}
+  </section>
+
+  {#if marketingPrefs && marketingPrefs.length > 0}
+    <section class="rounded-lg border bg-card p-6">
+      <h3 class="mb-6 text-lg font-semibold">{marketingTitle}</h3>
+      {#if isLoading}
+        <div class="flex flex-col gap-4">
+          {#each marketingPrefs as _, i (i)}
+            <Skeleton class="h-12 w-full rounded-md" />
+          {/each}
+        </div>
+      {:else}
+        <div class="overflow-hidden rounded-md border">
+          <div class="grid grid-cols-[1fr_auto_auto] gap-4 border-b bg-muted/50 px-4 py-3 text-sm font-medium">
+            <span>{marketingTypeLabel}</span>
+            <span class="text-center">{marketingEmailLabel}</span>
+            <span class="text-center">{marketingPushLabel}</span>
+          </div>
+          {#each marketingPrefs as pref (pref.id)}
+            <div class="grid grid-cols-[1fr_auto_auto] items-center gap-4 border-b px-4 py-3 last:border-b-0">
+              <span class="font-medium">{pref.label}</span>
+              <div class="flex justify-center">
+                <Checkbox bind:checked={marketingState[pref.id].email} />
+              </div>
+              <div class="flex justify-center">
+                <Checkbox bind:checked={marketingState[pref.id].push} />
+              </div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </section>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import type { ProfileUserMarketingPref, ProfileUserNotificationPref, ProfileUserSettingProps } from "../types";
+type $$ComponentProps = ProfileUserSettingProps & {
+    notificationPref?: ProfileUserNotificationPref;
+    enableNotification?: {
+        email?: boolean;
+        web?: boolean;
+        app?: boolean;
+    };
+    marketingPrefs?: ProfileUserMarketingPref[];
+    isLoading?: boolean;
+};
+declare const ProfileUserSetting: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileUserSetting = ReturnType<typeof ProfileUserSetting>;
+export default ProfileUserSetting;

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

@@ -0,0 +1,78 @@
+<script lang="ts" module>
+	/**
+	 * Barra de tabs reutilizável para as variantes de perfil.
+	 * Suporta loading state, tabs customizadas, active tab controlável
+	 * e estilos variantes (underline vs pill).
+	 * @component
+	 */
+	export type ProfileUserTabItem = { id: string; label: string };
+	export type ProfileUserTabsStyle = "underline" | "pill";
+</script>
+
+<script lang="ts">
+	import Skeleton from "../../../ui/skeleton/skeleton.svelte";
+	import { cn } from "../../../../utils.js";
+
+	let {
+		tabs,
+		activeTab = $bindable(),
+		style = "underline",
+		isLoading = false,
+		className,
+		onchange,
+	}: {
+		tabs: ProfileUserTabItem[];
+		activeTab?: string;
+		style?: ProfileUserTabsStyle;
+		isLoading?: boolean;
+		className?: string;
+		onchange?: (id: string) => void;
+	} = $props();
+
+	const currentTab = $derived(activeTab ?? tabs[0]?.id ?? "");
+
+	const handleSelect = (id: string) => {
+		activeTab = id;
+		onchange?.(id);
+	};
+</script>
+
+<div
+	class={cn(
+		"mb-6 flex gap-1 border-b overflow-x-auto",
+		style === "pill" && "-mt-12 mb-6 rounded-t-lg border border-t bg-background px-2 py-1 shadow-sm border-b",
+		className
+	)}
+	data-slot="profile-user-tabs"
+>
+	{#if isLoading}
+		{#each tabs as tab (tab.id)}
+			<Skeleton class="h-9 w-32 shrink-0 rounded-t-md" />
+		{/each}
+	{:else}
+		{#each tabs as tab (tab.id)}
+			<button
+				type="button"
+				onclick={() => handleSelect(tab.id)}
+				class={cn(
+					"shrink-0 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+					style === "underline"
+						? cn(
+								"border-b-2",
+								currentTab === tab.id
+									? "border-foreground text-foreground"
+									: "border-transparent text-muted-foreground hover:text-foreground"
+							)
+						: cn(
+								"rounded-md",
+								currentTab === tab.id
+									? "bg-primary/10 text-primary"
+									: "text-muted-foreground hover:bg-muted hover:text-foreground"
+							)
+				)}
+			>
+				{tab.label}
+			</button>
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,22 @@
+/**
+ * Barra de tabs reutilizável para as variantes de perfil.
+ * Suporta loading state, tabs customizadas, active tab controlável
+ * e estilos variantes (underline vs pill).
+ * @component
+ */
+export type ProfileUserTabItem = {
+    id: string;
+    label: string;
+};
+export type ProfileUserTabsStyle = "underline" | "pill";
+type $$ComponentProps = {
+    tabs: ProfileUserTabItem[];
+    activeTab?: string;
+    style?: ProfileUserTabsStyle;
+    isLoading?: boolean;
+    className?: string;
+    onchange?: (id: string) => void;
+};
+declare const ProfileUserTabs: import("svelte").Component<$$ComponentProps, {}, "activeTab">;
+type ProfileUserTabs = ReturnType<typeof ProfileUserTabs>;
+export default ProfileUserTabs;