negodesign 0.0.77 → 0.0.79

package/dist/components/pages/security/register/01/ui/{RegisterCard.svelte → RegisterCard01.svelte}

@@ -44,7 +44,7 @@
   }: Props = $props();
 </script>
 
-<div class="flex-1 flex flex-col justify-between h-screen bg-gradient-right">
+<div class="flex-1 flex flex-col justify-between h-screen">
   <nav class="flex justify-between p-5 md:bg-transparent">
     <div>
       <ButtonBack />
@@ -56,15 +56,21 @@
   </nav>
 
   <div
-    class="p-5 h-full border-t-2 bg-background md:border-none rounded-tl-[35px] rounded-tr-[35px]"
+    class="p-5 h-full border-t-2 md:border-none rounded-tl-[35px] rounded-tr-[35px]"
   >
-    <div class="space-y-6">
-      <div>
-        <h1 class="text-2xl font-bold">{$t("label.register")}</h1>
-        <p class="text-sm text-muted-foreground">{$t("text.register")}</p>
+    <div class="space-y-4">
+      <div class="space-y-1">
+        <h1 class="text-2xl font-bold text-white">{$t("label.register")}</h1>
+        <p class="text-sm text-white/90">{$t("text.register")}</p>
       </div>
 
-      <FormRegister {fields} {onSubmit} />
+      <FormRegister
+        {fields}
+        {onSubmit}
+        inputLabelClass="text-white"
+        inputClass="text-white/90 placeholder:text-white/50"
+        placeholderClass="text-white/50"
+      />
 
       {#if socialLogins.length > 0}
         <SocialLogin items={socialLogins} />
@@ -75,26 +81,24 @@
         <a
           href={login?.url ?? "/login"}
           onclick={login?.onclick}
-          class="font-semibold text-primary hover:underline"
+          class="font-semibold hover:underline"
         >
           {$t("text.login.sign-in")}
         </a>
       </p>
     </div>
-  </div>
 
-  <!-- Footer Terms -->
-  <div
-    class="text-[11px] text-slate-400 py-2 flex justify-center gap-2 bg-background"
-  >
-    <LinkPrivacyPolity
-      href={privacyPolicy?.url}
-      onclick={privacyPolicy?.onclick}
-    />
-    <LabelOr />
-    <LinkTermsOfService
-      href={termsOfService?.url}
-      onclick={termsOfService?.onclick}
-    />
+    <!-- Footer Terms -->
+    <div class="text-[11px] flex justify-center gap-2 relative my-3 pb-5">
+      <LinkPrivacyPolity
+        href={privacyPolicy?.url}
+        onclick={privacyPolicy?.onclick}
+      />
+      <LabelOr />
+      <LinkTermsOfService
+        href={termsOfService?.url}
+        onclick={termsOfService?.onclick}
+      />
+    </div>
   </div>
 </div>

package/dist/components/pages/security/register/01/ui/{RegisterCard.svelte.d.ts → RegisterCard01.svelte.d.ts}

@@ -7,6 +7,6 @@ type Props = {
     termsOfService?: LinkProps;
     socialLogins?: SocialLoginItem[];
 };
-declare const RegisterCard: import("svelte").Component<Props, {}, "">;
-type RegisterCard = ReturnType<typeof RegisterCard>;
-export default RegisterCard;
+declare const RegisterCard01: import("svelte").Component<Props, {}, "">;
+type RegisterCard01 = ReturnType<typeof RegisterCard01>;
+export default RegisterCard01;

package/dist/components/pages/security/register/FormRegister.svelte

@@ -2,6 +2,8 @@
   import InputPasswordConfirm from "../../../ui/form/ui/input-password-confirm.svelte";
   import InputPassword from "../../../ui/form/ui/input-password.svelte";
   import InputEmail from "../../../ui/form/ui/input-email.svelte";
+  import InputSelect from "../../../ui/form/ui/input-select.svelte";
+  import InputCalendar from "../../../ui/form/ui/input-calendar.svelte";
   import InputBase from "../../../ui/form/ui/input-base.svelte";
   import InputPhone from "../../../ui/form/ui/input-phone.svelte";
   import ButtonLogin from "../../../ui/button/ButtonLogin.svelte";
@@ -11,11 +13,17 @@
   type Props = {
     fields?: RegisterFormFields;
     onSubmit?: (data: RegisterRequestDto) => void;
+    inputLabelClass?: string;
+    inputClass?: string;
+    placeholderClass?: string;
   };
 
   let {
     fields = {},
     onSubmit,
+    inputLabelClass,
+    inputClass,
+    placeholderClass,
   }: Props = $props();
 
   let name = $state("");
@@ -51,8 +59,6 @@
 </script>
 
 <form class="space-y-4" onsubmit={handleSubmit}>
-  <p class="text-[13px] py-3">{$t("text.register")}</p>
-
   {#if isName}
     <div class="space-y-1">
       <InputBase
@@ -61,6 +67,8 @@
         placeholder={$t("input.name.placeholder")}
         isLabel
         isIcon
+        labelClass={inputLabelClass}
+        {inputClass}
         bind:value={name}
       />
     </div>
@@ -68,24 +76,33 @@
 
   {#if isEmail}
     <div class="space-y-1">
-      <InputEmail bind:value={email} />
+      <InputEmail
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={email}
+      />
     </div>
   {/if}
 
   {#if isPhone}
     <div class="space-y-1">
-      <InputPhone bind:value={phone} />
+      <InputPhone
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={phone}
+        isLabel
+      />
     </div>
   {/if}
 
   {#if isBirthday}
     <div class="space-y-1">
-      <InputBase
-        type="date"
+      <InputCalendar
         label={$t("input.birthday.label")}
         placeholder={$t("input.birthday.placeholder")}
-        isLabel
-        isIcon
+        labelClass={inputLabelClass}
+        {placeholderClass}
+        {inputClass}
         bind:value={birthday}
       />
     </div>
@@ -93,12 +110,13 @@
 
   {#if isGender}
     <div class="space-y-1">
-      <InputBase
-        type="text"
+      <InputSelect
         label={$t("input.gender.label")}
         placeholder={$t("input.gender.placeholder")}
-        isLabel
-        isIcon
+        options={{ MALE: "Masculino", FEMALE: "Feminino" }}
+        labelClass={inputLabelClass}
+        {placeholderClass}
+        {inputClass}
         bind:value={gender}
       />
     </div>
@@ -106,13 +124,21 @@
 
   {#if isPassword}
     <div class="space-y-1">
-      <InputPassword bind:value={password} />
+      <InputPassword
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={password}
+      />
     </div>
   {/if}
 
   {#if isConfirmPassword}
     <div class="space-y-1">
-      <InputPasswordConfirm bind:value={confirmPassword} />
+      <InputPasswordConfirm
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={confirmPassword}
+      />
     </div>
   {/if}
 

package/dist/components/pages/security/register/FormRegister.svelte.d.ts

@@ -2,6 +2,9 @@ import type { RegisterFormFields, RegisterRequestDto } from "./types";
 type Props = {
     fields?: RegisterFormFields;
     onSubmit?: (data: RegisterRequestDto) => void;
+    inputLabelClass?: string;
+    inputClass?: string;
+    placeholderClass?: string;
 };
 declare const FormRegister: import("svelte").Component<Props, {}, "">;
 type FormRegister = ReturnType<typeof FormRegister>;

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -1,30 +1,30 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-
-	const ctx = getAvatarContext();
-
-	let show = $derived(!ctx.src || ctx.imageError);
-</script>
-
-{#if show}
-	<div
-		bind:this={ref}
-		data-slot="avatar-fallback"
-		class={cn(
-			"bg-muted flex size-full items-center justify-center rounded-full fill-foreground text-sm select-none [&>svg]:size-full",
-			className
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const ctx = getAvatarContext();
+
+	let show = $derived(!ctx.src || ctx.imageError);
+</script>
+
+{#if show}
+	<div
+		bind:this={ref}
+		data-slot="avatar-fallback"
+		class={cn(
+			"bg-muted flex size-full items-center justify-center rounded-full fill-foreground text-sm select-none [&>svg]:size-full",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

package/dist/components/ui/avatar/avatar-image.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLImgAttributes } from "svelte/elements";
-	import { getAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		src,
-		srcset,
-		alt = "",
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLImgAttributes> = $props();
-
-	const ctx = getAvatarContext();
-
-	$effect(() => {
-		if (src) ctx.src = src;
-		if (srcset) ctx.srcset = srcset;
-	});
-</script>
-
-{#if src || ctx.src}
-	<img
-		bind:this={ref}
-		data-slot="avatar-image"
-		src={src ?? ctx.src}
-		srcset={srcset ?? ctx.srcset}
-		{alt}
-		onerror={() => {
-			ctx.imageError = true;
-		}}
-		onload={() => {
-			ctx.imageError = false;
-		}}
-		class={cn("aspect-square size-full rounded-full object-cover", className)}
-		{...restProps}
-	/>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { getAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		src,
+		srcset,
+		alt = "",
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLImgAttributes> = $props();
+
+	const ctx = getAvatarContext();
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
+</script>
+
+{#if src || ctx.src}
+	<img
+		bind:this={ref}
+		data-slot="avatar-image"
+		src={src ?? ctx.src}
+		srcset={srcset ?? ctx.srcset}
+		{alt}
+		onerror={() => {
+			ctx.imageError = true;
+		}}
+		onload={() => {
+			ctx.imageError = false;
+		}}
+		class={cn("aspect-square size-full rounded-full object-cover", className)}
+		{...restProps}
+	/>
 {/if}

package/dist/components/ui/avatar/avatar.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { setAvatarContext } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		size = "default",
-		src,
-		srcset,
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		size?: "default" | "sm" | "lg";
-		src?: string;
-		srcset?: string;
-	} = $props();
-
-	// svelte-ignore state_referenced_locally
-	const ctx = setAvatarContext(src, srcset);
-
-	$effect(() => {
-		if (src) ctx.src = src;
-		if (srcset) ctx.srcset = srcset;
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="avatar"
-	data-size={size}
-	class={cn(
-		"group/avatar relative flex size-10 shrink-0 select-none overflow-hidden rounded-full",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setAvatarContext } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		size = "default",
+		src,
+		srcset,
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		size?: "default" | "sm" | "lg";
+		src?: string;
+		srcset?: string;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	const ctx = setAvatarContext(src, srcset);
+
+	$effect(() => {
+		if (src) ctx.src = src;
+		if (srcset) ctx.srcset = srcset;
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="avatar"
+	data-size={size}
+	class={cn(
+		"group/avatar relative flex size-10 shrink-0 select-none overflow-hidden rounded-full",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>

package/dist/components/ui/badge/badge.svelte

@@ -1,47 +1,47 @@
-<script lang="ts" module>
-	import { cn } from "../../../utils.js";
-
-	const badgeBase =
-		"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none";
-
-	const badgeVariantClasses = {
-		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-		destructive:
-			"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-		link: "text-primary underline-offset-4 hover:underline",
-	} as const;
-
-	export type BadgeVariant = keyof typeof badgeVariantClasses;
-
-	export function badgeVariants(opts: { variant?: BadgeVariant } = {}): string {
-		const variant = opts.variant ?? "default";
-		return cn(badgeBase, badgeVariantClasses[variant]);
-	}
-</script>
-
-<script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		variant = "default",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		variant?: BadgeVariant;
-	} = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="badge"
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts" module>
+	import { cn } from "../../../utils.js";
+
+	const badgeBase =
+		"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none";
+
+	const badgeVariantClasses = {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive:
+			"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline",
+	} as const;
+
+	export type BadgeVariant = keyof typeof badgeVariantClasses;
+
+	export function badgeVariants(opts: { variant?: BadgeVariant } = {}): string {
+		const variant = opts.variant ?? "default";
+		return cn(badgeBase, badgeVariantClasses[variant]);
+	}
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="badge"
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
 </div>