negodesign 0.0.77 → 0.0.79

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

@@ -11,40 +11,37 @@
   import LeftHero from "../../../ui/panel/LeftHero.svelte";
 
   type CarouselItem = {
-    title: string
-    description: string
-    buttonText: string
-    buttonUrl?: string
-    backgroundUrl?: string
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
   };
 
   type Props = {
-    title?: string
-    type?: "NUMBER" | "DOT" | "POINTER"
-    carousel?: CarouselItem[]
-    children?: Snippet
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
   };
 
-  let {
-    title,
-    type,
-    carousel = [],
-    children,
-  }: Props = $props();
+  let { title, type, carousel = [], children }: Props = $props();
 </script>
 
 <main class="h-screen w-screen flex items-center">
-  <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 class="hidden md:block md:w-8/12">
+  <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:px-0 md:w-4/12 border-gray-900">
+  <div
+    class="w-full md:w-5/12 border-gray-900 overflow-y-auto px-10 bg-gradient"
+  >
     {#if children}
       {@render children()}
     {/if}

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

@@ -11,33 +11,28 @@
   import LeftHero from "../login/02/ui/LeftHero02.svelte";
 
   type CarouselItem = {
-    title: string
-    description: string
-    buttonText: string
-    buttonUrl?: string
-    backgroundUrl?: string
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
   };
 
   type Props = {
-    title?: string
-    type?: "NUMBER" | "DOT" | "POINTER"
-    carousel?: CarouselItem[]
-    children?: Snippet
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
   };
 
-  let {
-    title,
-    type,
-    carousel = [],
-    children,
-  }: Props = $props();
+  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">
+  <div class="w-full md:w-5/12 flex flex-col h-screen overflow-y-auto">
     {#if children}
       {@render children()}
     {/if}

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

@@ -11,33 +11,28 @@
   import LeftHero from "../login/03/ui/LeftHero03.svelte";
 
   type CarouselItem = {
-    title: string
-    description: string
-    buttonText: string
-    buttonUrl?: string
-    backgroundUrl?: string
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+    backgroundUrl?: string;
   };
 
   type Props = {
-    title?: string
-    type?: "NUMBER" | "DOT" | "POINTER"
-    carousel?: CarouselItem[]
-    children?: Snippet
+    title?: string;
+    type?: "NUMBER" | "DOT" | "POINTER";
+    carousel?: CarouselItem[];
+    children?: Snippet;
   };
 
-  let {
-    title,
-    type,
-    carousel = [],
-    children,
-  }: Props = $props();
+  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">
+  <div class="w-full md:w-1/2 flex flex-col h-screen overflow-y-auto">
     {#if children}
       {@render children()}
     {/if}

package/dist/components/pages/security/login/01/ui/FormLogin.svelte

@@ -24,9 +24,11 @@
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
   };
 
-  let { variant, onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+  let { variant, onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
   let data = $state("");
   let password = $state("");
 
@@ -41,16 +43,16 @@
 
   <div class="space-y-1">
     {#if variant === "EMAIL"}
-      <InputEmail bind:value={data} />
+      <InputEmail labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
     {:else if variant === "USERNAME"}
-      <InputUsername bind:value={data} />
+      <InputUsername labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
     {:else if variant === "PHONE"}
-      <InputPhone bind:value={data} />
+      <InputPhone labelClass={inputLabelClass} inputClass={inputClass} bind:value={data} />
     {/if}
   </div>
 
   <div class="space-y-1 relative">
-    <InputPassword bind:value={password} />
+    <InputPassword labelClass={inputLabelClass} inputClass={inputClass} bind:value={password} />
     <LinkForgetPassword href={forgetPassword?.url} onclick={forgetPassword?.onclick} />
   </div>
 

package/dist/components/pages/security/login/01/ui/FormLogin.svelte.d.ts

@@ -4,6 +4,8 @@ type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
 };
 declare const FormLogin: import("svelte").Component<Props, {}, "">;
 type FormLogin = ReturnType<typeof FormLogin>;

package/dist/components/pages/security/login/01/ui/FormLoginEmailPassword.svelte

@@ -16,9 +16,11 @@
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
   };
 
-  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+  let { onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
 </script>
 
-<FormLogin variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} />
+<FormLogin variant="EMAIL" {onSubmit} {forgetPassword} {socialLogins} {inputLabelClass} {inputClass} />

package/dist/components/pages/security/login/01/ui/FormLoginEmailPassword.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
 };
 declare const FormLoginEmailPassword: import("svelte").Component<Props, {}, "">;
 type FormLoginEmailPassword = ReturnType<typeof FormLoginEmailPassword>;

package/dist/components/pages/security/login/01/ui/FormLoginPhonePassword.svelte

@@ -16,9 +16,11 @@
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
   };
 
-  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+  let { onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
 </script>
 
-<FormLogin variant="PHONE" {onSubmit} {forgetPassword} {socialLogins} />
+<FormLogin variant="PHONE" {onSubmit} {forgetPassword} {socialLogins} {inputLabelClass} {inputClass} />

package/dist/components/pages/security/login/01/ui/FormLoginPhonePassword.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
 };
 declare const FormLoginPhonePassword: import("svelte").Component<Props, {}, "">;
 type FormLoginPhonePassword = ReturnType<typeof FormLoginPhonePassword>;

package/dist/components/pages/security/login/01/ui/FormLoginUsernamePassword.svelte

@@ -16,9 +16,11 @@
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
   };
 
-  let { onSubmit, forgetPassword, socialLogins = [] }: Props = $props();
+  let { onSubmit, forgetPassword, socialLogins = [], inputLabelClass, inputClass }: Props = $props();
 </script>
 
-<FormLogin variant="USERNAME" {onSubmit} {forgetPassword} {socialLogins} />
+<FormLogin variant="USERNAME" {onSubmit} {forgetPassword} {socialLogins} {inputLabelClass} {inputClass} />

package/dist/components/pages/security/login/01/ui/FormLoginUsernamePassword.svelte.d.ts

@@ -3,6 +3,8 @@ type Props = {
     onSubmit?: (credential: LoginRequestDto) => void;
     forgetPassword?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    inputLabelClass?: string;
+    inputClass?: string;
 };
 declare const FormLoginUsernamePassword: import("svelte").Component<Props, {}, "">;
 type FormLoginUsernamePassword = ReturnType<typeof FormLoginUsernamePassword>;