negodesign 0.0.81 → 0.0.82

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

@@ -1,146 +1,148 @@
-<script lang="ts">
-  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";
-  import { t } from "../../../../i18n";
-  import type { RegisterFormFields, RegisterRequestDto } from "./types";
-
-  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("");
-  let email = $state("");
-  let password = $state("");
-  let confirmPassword = $state("");
-  let birthday = $state("");
-  let gender = $state("");
-  let phone = $state("");
-
-  const {
-    isName = false,
-    isEmail = true,
-    isPassword = true,
-    isConfirmPassword = true,
-    isBirthday = false,
-    isGender = false,
-    isPhone = false,
-  } = fields;
-
-  function handleSubmit(e: Event) {
-    e.preventDefault();
-    onSubmit?.({
-      name: isName ? name : undefined,
-      email,
-      password: isPassword ? password : undefined,
-      confirmPassword: isConfirmPassword ? confirmPassword : undefined,
-      birthday: isBirthday ? birthday : undefined,
-      gender: isGender ? gender : undefined,
-      phone: isPhone ? phone : undefined,
-    });
-  }
-</script>
-
-<form class="space-y-4" onsubmit={handleSubmit}>
-  {#if isName}
-    <div class="space-y-1">
-      <InputBase
-        type="text"
-        label={$t("input.name.label")}
-        placeholder={$t("input.name.placeholder")}
-        isLabel
-        isIcon
-        labelClass={inputLabelClass}
-        {inputClass}
-        bind:value={name}
-      />
-    </div>
-  {/if}
-
-  {#if isEmail}
-    <div class="space-y-1">
-      <InputEmail
-        labelClass={inputLabelClass}
-        {inputClass}
-        bind:value={email}
-      />
-    </div>
-  {/if}
-
-  {#if isPhone}
-    <div class="space-y-1">
-      <InputPhone
-        labelClass={inputLabelClass}
-        {inputClass}
-        bind:value={phone}
-        isLabel
-      />
-    </div>
-  {/if}
-
-  {#if isBirthday}
-    <div class="space-y-1">
-      <InputCalendar
-        label={$t("input.birthday.label")}
-        placeholder={$t("input.birthday.placeholder")}
-        labelClass={inputLabelClass}
-        {placeholderClass}
-        {inputClass}
-        bind:value={birthday}
-      />
-    </div>
-  {/if}
-
-  {#if isGender}
-    <div class="space-y-1">
-      <InputSelect
-        label={$t("input.gender.label")}
-        placeholder={$t("input.gender.placeholder")}
-        options={{ MALE: "Masculino", FEMALE: "Feminino" }}
-        labelClass={inputLabelClass}
-        {placeholderClass}
-        {inputClass}
-        bind:value={gender}
-      />
-    </div>
-  {/if}
-
-  {#if isPassword}
-    <div class="space-y-1">
-      <InputPassword
-        labelClass={inputLabelClass}
-        {inputClass}
-        bind:value={password}
-      />
-    </div>
-  {/if}
-
-  {#if isConfirmPassword}
-    <div class="space-y-1">
-      <InputPasswordConfirm
-        labelClass={inputLabelClass}
-        {inputClass}
-        bind:value={confirmPassword}
-      />
-    </div>
-  {/if}
-
-  <ButtonLogin />
-</form>
+<script lang="ts">
+  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";
+  import { t } from "../../../../i18n";
+  import type { RegisterFormFields, RegisterRequestDto } from "./types";
+
+  type Props = {
+    fields?: RegisterFormFields;
+    onSubmit?: (data: RegisterRequestDto) => void;
+    inputLabelClass?: string;
+    inputClass?: string;
+    placeholderClass?: string;
+    isLoading?: boolean;
+  };
+
+  let {
+    fields = {},
+    onSubmit,
+    inputLabelClass,
+    inputClass,
+    placeholderClass,
+    isLoading = false,
+  }: Props = $props();
+
+  let name = $state("");
+  let email = $state("");
+  let password = $state("");
+  let confirmPassword = $state("");
+  let birthday = $state("");
+  let gender = $state("");
+  let phone = $state("");
+
+  const {
+    isName = false,
+    isEmail = true,
+    isPassword = true,
+    isConfirmPassword = true,
+    isBirthday = false,
+    isGender = false,
+    isPhone = false,
+  } = fields;
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    onSubmit?.({
+      name: isName ? name : undefined,
+      email,
+      password: isPassword ? password : undefined,
+      confirmPassword: isConfirmPassword ? confirmPassword : undefined,
+      birthday: isBirthday ? birthday : undefined,
+      gender: isGender ? gender : undefined,
+      phone: isPhone ? phone : undefined,
+    });
+  }
+</script>
+
+<form class="space-y-4" onsubmit={handleSubmit}>
+  {#if isName}
+    <div class="space-y-1">
+      <InputBase
+        type="text"
+        label={$t("input.name.label")}
+        placeholder={$t("input.name.placeholder")}
+        isLabel
+        isIcon
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={name}
+      />
+    </div>
+  {/if}
+
+  {#if isEmail}
+    <div class="space-y-1">
+      <InputEmail
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={email}
+      />
+    </div>
+  {/if}
+
+  {#if isPhone}
+    <div class="space-y-1">
+      <InputPhone
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={phone}
+        isLabel
+      />
+    </div>
+  {/if}
+
+  {#if isBirthday}
+    <div class="space-y-1">
+      <InputCalendar
+        label={$t("input.birthday.label")}
+        placeholder={$t("input.birthday.placeholder")}
+        labelClass={inputLabelClass}
+        {placeholderClass}
+        {inputClass}
+        bind:value={birthday}
+      />
+    </div>
+  {/if}
+
+  {#if isGender}
+    <div class="space-y-1">
+      <InputSelect
+        label={$t("input.gender.label")}
+        placeholder={$t("input.gender.placeholder")}
+        options={{ MALE: "Masculino", FEMALE: "Feminino" }}
+        labelClass={inputLabelClass}
+        {placeholderClass}
+        {inputClass}
+        bind:value={gender}
+      />
+    </div>
+  {/if}
+
+  {#if isPassword}
+    <div class="space-y-1">
+      <InputPassword
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={password}
+      />
+    </div>
+  {/if}
+
+  {#if isConfirmPassword}
+    <div class="space-y-1">
+      <InputPasswordConfirm
+        labelClass={inputLabelClass}
+        {inputClass}
+        bind:value={confirmPassword}
+      />
+    </div>
+  {/if}
+
+  <ButtonLogin type="submit" disabled={isLoading} />
+</form>

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

@@ -5,6 +5,7 @@ type Props = {
     inputLabelClass?: string;
     inputClass?: string;
     placeholderClass?: string;
+    isLoading?: boolean;
 };
 declare const FormRegister: import("svelte").Component<Props, {}, "">;
 type FormRegister = ReturnType<typeof FormRegister>;

package/dist/components/pages/security/register/types.d.ts

@@ -48,4 +48,5 @@ export type PageRegisterProps = {
     privacyPolicy?: LinkProps;
     termsOfService?: LinkProps;
     socialLogins?: SocialLoginItem[];
+    isLoading?: boolean;
 };

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>