negodesign 0.0.80 → 0.0.82

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

@@ -1,83 +1,83 @@
-<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, PlusSignIcon } from "@hugeicons/core-free-icons";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	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}>
-			<HugeiconsIcon icon={PlusSignIcon} 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>
+<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, PlusSignIcon } from "@hugeicons/core-free-icons";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	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}>
+			<HugeiconsIcon icon={PlusSignIcon} 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/ProfileUserTabs.svelte

@@ -1,80 +1,80 @@
-<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>
+<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/security/auth/PageAuth01.svelte

@@ -1,62 +1,62 @@
-<script lang="ts" module>
-  /**
-   * @component PageAuth01
-   * Shared layout for auth pages (login/register) variant 01.
-   * Split layout: hero on the left, auth card on the right with grid pattern.
-   */
-</script>
-
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import LeftHero from "../../../ui/panel/LeftHero.svelte";
-
-  type CarouselItem = {
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonUrl?: string;
-    backgroundUrl?: string;
-  };
-
-  type Props = {
-    title?: string;
-    type?: "NUMBER" | "DOT" | "POINTER";
-    carousel?: CarouselItem[];
-    children?: Snippet;
-  };
-
-  let { title, type, carousel = [], children }: Props = $props();
-</script>
-
-<main class="h-screen w-screen flex items-center">
-  <div class="hidden md:block md:w-7/12 relative">
-    <LeftHero {title} type={type ?? "POINTER"} items={carousel} />
-    <svg width="0" height="0" class="absolute">
-      <defs>
-        <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
-          <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
-        </clipPath>
-      </defs>
-    </svg>
-  </div>
-  <div
-    class="w-full md:w-5/12 border-gray-900 overflow-y-auto px-10 bg-gradient"
-  >
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</main>
-
-<style>
-  :global(.grid-pattern) {
-    background-size: 40px 40px;
-    background-image: linear-gradient(
-        to right,
-        rgba(0, 0, 0, 0.1) 1px,
-        transparent 1px
-      ),
-      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
-    clip-path: url(#grid-curve-clip);
-  }
-</style>
+<script lang="ts" module>
+  /**
+   * @component PageAuth01
+   * Shared layout for auth pages (login/register) variant 01.
+   * Split layout: hero on the left, auth card on the right with grid pattern.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../../../ui/panel/LeftHero.svelte";
+
+  type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+  };
+
+  type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+  };
+
+  let { title, type, carousel = [], children }: Props = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <div class="hidden md:block md:w-7/12 relative">
+    <LeftHero {title} type={type ?? "POINTER"} items={carousel} />
+    <svg width="0" height="0" class="absolute">
+      <defs>
+        <clipPath id="grid-curve-clip" clipPathUnits="objectBoundingBox">
+          <path d="M0.35,0 L1,0 C0.85,0.3 1,0.6 0.4,1 L1,1 Z" />
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+  <div
+    class="w-full md:w-5/12 border-gray-900 overflow-y-auto px-10 bg-gradient"
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+    clip-path: url(#grid-curve-clip);
+  }
+</style>

package/dist/components/pages/security/auth/PageAuth02.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" module>
-  /**
-   * @component PageAuth02
-   * Shared layout for auth pages (login/register) variant 02.
-   * Split layout: hero image on the left, auth card on the right.
-   */
-</script>
-
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import LeftHero from "../login/02/ui/LeftHero02.svelte";
-
-  type CarouselItem = {
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonUrl?: string;
-    backgroundUrl?: string;
-  };
-
-  type Props = {
-    title?: string;
-    type?: "NUMBER" | "DOT" | "POINTER";
-    carousel?: CarouselItem[];
-    children?: Snippet;
-  };
-
-  let { title, type, carousel = [], children }: Props = $props();
-</script>
-
-<main class="h-screen w-screen flex items-center justify-center">
-  <div class="hidden md:flex w-7/12 h-screen">
-    <LeftHero {title} type={type ?? "POINTER"} items={carousel} />
-  </div>
-  <div class="w-full md:w-5/12 flex flex-col h-screen overflow-y-auto">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</main>
+<script lang="ts" module>
+  /**
+   * @component PageAuth02
+   * Shared layout for auth pages (login/register) variant 02.
+   * Split layout: hero image on the left, auth card on the right.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../login/02/ui/LeftHero02.svelte";
+
+  type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+  };
+
+  type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+  };
+
+  let { title, type, carousel = [], children }: Props = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center justify-center">
+  <div class="hidden md:flex w-7/12 h-screen">
+    <LeftHero {title} type={type ?? "POINTER"} items={carousel} />
+  </div>
+  <div class="w-full md:w-5/12 flex flex-col h-screen overflow-y-auto">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>

package/dist/components/pages/security/auth/PageAuth03.svelte

@@ -1,40 +1,40 @@
-<script lang="ts" module>
-  /**
-   * @component PageAuth03
-   * Shared layout for auth pages (login/register) variant 03.
-   * Split layout with glass morphism: hero on the left, auth card on the right.
-   */
-</script>
-
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import LeftHero from "../login/03/ui/LeftHero03.svelte";
-
-  type CarouselItem = {
-    title: string;
-    description: string;
-    buttonText: string;
-    buttonUrl?: string;
-    backgroundUrl?: string;
-  };
-
-  type Props = {
-    title?: string;
-    type?: "NUMBER" | "DOT" | "POINTER";
-    carousel?: CarouselItem[];
-    children?: Snippet;
-  };
-
-  let { title, type, carousel = [], children }: Props = $props();
-</script>
-
-<main class="h-screen w-screen flex items-center justify-center">
-  <div class="hidden md:flex w-1/2 h-screen">
-    <LeftHero {title} type={type ?? "DOT"} items={carousel} />
-  </div>
-  <div class="w-full md:w-1/2 flex flex-col h-screen overflow-y-auto">
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
-</main>
+<script lang="ts" module>
+  /**
+   * @component PageAuth03
+   * Shared layout for auth pages (login/register) variant 03.
+   * Split layout with glass morphism: hero on the left, auth card on the right.
+   */
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import LeftHero from "../login/03/ui/LeftHero03.svelte";
+
+  type CarouselItem = {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
+  };
+
+  type Props = {
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
+  };
+
+  let { title, type, carousel = [], children }: Props = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center justify-center">
+  <div class="hidden md:flex w-1/2 h-screen">
+    <LeftHero {title} type={type ?? "DOT"} items={carousel} />
+  </div>
+  <div class="w-full md:w-1/2 flex flex-col h-screen overflow-y-auto">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</main>