negodesign 0.0.80 → 0.0.82

package/dist/components/ui/link/link-privacy-polity.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.privacy-policy.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs z-10 {className}">
+  {$t("link.privacy-policy.label")}
+</a>

package/dist/components/ui/link/link-terms-of-service.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.terms-of-service.label")}
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { class: className, ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs z-10 {className}">
+  {$t("link.terms-of-service.label")}
+</a>

package/dist/components/ui/modal/core/ui/ModalCore.svelte

@@ -1,132 +1,132 @@
-<script lang="ts">
-  import { cn } from "../../../../../utils";
-  import {
-    ArrowLeft01Icon,
-    ArrowRight01Icon,
-  } from "@hugeicons/core-free-icons";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import type { ModalCoreProps } from "../types";
-
-  let {
-    isOpen = $bindable(false),
-    title,
-    subtitle,
-    totalSteps = 1,
-    currentStep = 1,
-    showProgress = true,
-    showBack = true,
-    showSkip = false,
-    skipText = "Skip This Step",
-    continueText = "Continue",
-    backText = "Back",
-    onBack,
-    onContinue,
-    onSkip,
-    onClose,
-    content,
-    footer,
-    class: className,
-  }: ModalCoreProps = $props();
-
-  function handleClose() {
-    isOpen = false;
-    onClose?.();
-  }
-
-  const progressPercent = $derived(
-    totalSteps > 0 ? (currentStep / totalSteps) * 100 : 0,
-  );
-</script>
-
-{#if isOpen}
-  <div class="fixed inset-0 z-50 flex items-center justify-center">
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="absolute inset-0 bg-black/50 backdrop-blur-sm"
-      onclick={handleClose}
-      onkeydown={(e) => {
-        if (e.key === "Escape") handleClose();
-      }}
-    ></div>
-
-    <div
-      class={cn(
-        "relative z-10 mx-4 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-border shadow-lg bg-background",
-        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl",
-        "animate-in fade-in zoom-in-95 duration-200",
-        className,
-      )}
-    >
-      <!-- Header -->
-      <div class="px-8 pt-8">
-        <h2 class="text-2xl font-semibold tracking-tight">
-          {title}
-        </h2>
-        {#if subtitle}
-          <p class="mt-2 text-sm text-muted-foreground">{subtitle}</p>
-        {/if}
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto px-8 py-6">
-        {#if content}
-          {@render content()}
-        {/if}
-      </div>
-
-      <!-- Footer -->
-      {#if footer}
-        <div class="border-t border-border px-8 py-5">
-          {@render footer()}
-        </div>
-      {:else}
-        <div class="border-t border-border px-8 py-5">
-          {#if showProgress}
-            <div class="mb-5 h-1.5 w-full overflow-hidden rounded-full">
-              <div
-                class="h-full rounded-full transition-all duration-300"
-                style="width: {progressPercent}%"
-              ></div>
-            </div>
-          {/if}
-
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-4">
-              {#if showSkip}
-                <button
-                  type="button"
-                  class="text-sm font-medium text-muted-foreground transition hover:text-foreground"
-                  onclick={onSkip}
-                >
-                  {skipText}
-                </button>
-              {/if}
-            </div>
-
-            <div class="flex items-center gap-3">
-              {#if showBack && currentStep > 1}
-                <button
-                  type="button"
-                  class="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold transition"
-                  onclick={onBack}
-                >
-                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
-                  {backText}
-                </button>
-              {/if}
-
-              <button
-                type="button"
-                class="inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-semibold bg-primary text-white transition"
-                onclick={onContinue}
-              >
-                {continueText}
-                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
-              </button>
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { cn } from "../../../../../utils";
+  import {
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type { ModalCoreProps } from "../types";
+
+  let {
+    isOpen = $bindable(false),
+    title,
+    subtitle,
+    totalSteps = 1,
+    currentStep = 1,
+    showProgress = true,
+    showBack = true,
+    showSkip = false,
+    skipText = "Skip This Step",
+    continueText = "Continue",
+    backText = "Back",
+    onBack,
+    onContinue,
+    onSkip,
+    onClose,
+    content,
+    footer,
+    class: className,
+  }: ModalCoreProps = $props();
+
+  function handleClose() {
+    isOpen = false;
+    onClose?.();
+  }
+
+  const progressPercent = $derived(
+    totalSteps > 0 ? (currentStep / totalSteps) * 100 : 0,
+  );
+</script>
+
+{#if isOpen}
+  <div class="fixed inset-0 z-50 flex items-center justify-center">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute inset-0 bg-black/50 backdrop-blur-sm"
+      onclick={handleClose}
+      onkeydown={(e) => {
+        if (e.key === "Escape") handleClose();
+      }}
+    ></div>
+
+    <div
+      class={cn(
+        "relative z-10 mx-4 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-3xl border border-border shadow-lg bg-background",
+        "before:absolute before:-inset-px before:z-[-1] before:rounded-3xl",
+        "animate-in fade-in zoom-in-95 duration-200",
+        className,
+      )}
+    >
+      <!-- Header -->
+      <div class="px-8 pt-8">
+        <h2 class="text-2xl font-semibold tracking-tight">
+          {title}
+        </h2>
+        {#if subtitle}
+          <p class="mt-2 text-sm text-muted-foreground">{subtitle}</p>
+        {/if}
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto px-8 py-6">
+        {#if content}
+          {@render content()}
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      {#if footer}
+        <div class="border-t border-border px-8 py-5">
+          {@render footer()}
+        </div>
+      {:else}
+        <div class="border-t border-border px-8 py-5">
+          {#if showProgress}
+            <div class="mb-5 h-1.5 w-full overflow-hidden rounded-full">
+              <div
+                class="h-full rounded-full transition-all duration-300"
+                style="width: {progressPercent}%"
+              ></div>
+            </div>
+          {/if}
+
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              {#if showSkip}
+                <button
+                  type="button"
+                  class="text-sm font-medium text-muted-foreground transition hover:text-foreground"
+                  onclick={onSkip}
+                >
+                  {skipText}
+                </button>
+              {/if}
+            </div>
+
+            <div class="flex items-center gap-3">
+              {#if showBack && currentStep > 1}
+                <button
+                  type="button"
+                  class="inline-flex items-center gap-2 rounded-full border border-border px-5 py-2.5 text-sm font-semibold transition"
+                  onclick={onBack}
+                >
+                  <HugeiconsIcon icon={ArrowLeft01Icon} class="size-4" />
+                  {backText}
+                </button>
+              {/if}
+
+              <button
+                type="button"
+                class="inline-flex items-center gap-2 rounded-full px-6 py-2.5 text-sm font-semibold bg-primary text-white transition"
+                onclick={onContinue}
+              >
+                {continueText}
+                <HugeiconsIcon icon={ArrowRight01Icon} class="size-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/ui/modal/form/index.d.ts

@@ -1,3 +1,4 @@
 import Root from "./ui/ModalForm.svelte";
-export { Root, Root as ModalForm, };
-export type { ModalFormProps, FormInputConfig, FormOption } from "./types";
+import ModalFormEmailOrPhone from "./ui/ModalFormEmailOrPhone.svelte";
+export { Root, Root as ModalForm, ModalFormEmailOrPhone, };
+export type { ModalFormProps, ModalFormEmailOrPhoneProps, ModalFormEmailOrPhoneSubmitData, ModalFormEmailOrPhoneType, FormInputConfig, FormOption, } from "./types";

package/dist/components/ui/modal/form/index.js

@@ -1,2 +1,3 @@
 import Root from "./ui/ModalForm.svelte";
-export { Root, Root as ModalForm, };
+import ModalFormEmailOrPhone from "./ui/ModalFormEmailOrPhone.svelte";
+export { Root, Root as ModalForm, ModalFormEmailOrPhone, };

package/dist/components/ui/modal/form/types.d.ts

@@ -36,3 +36,44 @@ export type ModalFormProps = {
     onClose?: () => void;
     class?: string;
 };
+export type ModalFormEmailOrPhoneType = "EMAIL" | "PHONE" | "EMAIL_OR_PHONE";
+export type ModalFormEmailOrPhoneSubmitData = {
+    type: ModalFormEmailOrPhoneType;
+    value: string;
+    email?: string;
+    phone?: string;
+};
+/**
+ * Props do componente ModalFormEmailOrPhone — formulário em modal para envio de OTP por email ou telefone.
+ *
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição do modal.
+ * @property email - Email pré-existente (opcional).
+ * @property phone - Telefone pré-existente (opcional).
+ * @property isOpen - Controla a visibilidade do modal (bindable).
+ * @property submitText - Texto do botão de submissão.
+ * @property submitLoadingText - Texto durante carregamento.
+ * @property cancelText - Texto do botão cancelar.
+ * @property isLoading - Estado de carregamento.
+ * @property showCancel - Exibe o botão cancelar.
+ * @property onSubmit - Callback ao submeter o formulário com o canal e valor escolhido.
+ * @property onCancel - Chamado ao cancelar.
+ * @property onClose - Chamado ao fechar o modal.
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalFormEmailOrPhoneProps = {
+    title?: string;
+    subtitle?: string;
+    email?: string;
+    phone?: string;
+    isOpen?: boolean;
+    submitText?: string;
+    submitLoadingText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    showCancel?: boolean;
+    onSubmit?: (data: ModalFormEmailOrPhoneSubmitData) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    class?: string;
+};

package/dist/components/ui/modal/form/ui/ModalForm.svelte

@@ -2,6 +2,7 @@
   import { cn } from "../../../../../utils";
   import ModalCore from "../../core/ui/ModalCore.svelte";
   import Form from "../../../form/Form.svelte";
+  import { t } from "../../../../../i18n";
   import type { ModalFormProps } from "../types";
 
   let {
@@ -9,9 +10,9 @@
     subtitle,
     inputs = [],
     isOpen = $bindable(false),
-    submitText = "Submit",
-    submitLoadingText = "Submitting...",
-    cancelText = "Cancel",
+    submitText,
+    submitLoadingText,
+    cancelText,
     isLoading = false,
     showCancel = true,
     columns = 2,
@@ -21,6 +22,10 @@
     class: className,
   }: ModalFormProps = $props();
 
+  const finalSubmitText = $derived(submitText ?? $t("label.submit") ?? "Submit");
+  const finalSubmitLoadingText = $derived(submitLoadingText ?? $t("label.submitting") ?? "Submitting...");
+  const finalCancelText = $derived(cancelText ?? $t("label.cancel") ?? "Cancel");
+
   function handleSubmit(data: Record<string, string | string[] | boolean>) {
     onSubmit?.(data);
   }
@@ -44,8 +49,8 @@
     <Form
       {inputs}
       {columns}
-      {submitText}
-      {submitLoadingText}
+      submitText={finalSubmitText}
+      submitLoadingText={finalSubmitLoadingText}
       {isLoading}
       onSubmit={handleSubmit}
     />
@@ -59,7 +64,7 @@
           class="rounded-lg border border-border px-5 py-2.5 text-sm font-semibold transition hover:bg-muted"
           onclick={handleCancel}
         >
-          {cancelText}
+          {finalCancelText}
         </button>
       </div>
     {/if}

package/dist/components/ui/modal/form/ui/ModalFormEmailOrPhone.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import ModalCore from "../../core/ui/ModalCore.svelte";
+  import InputEmailOrPhone from "../../../form/ui/input-email-or-phone.svelte";
+  import InputEmail from "../../../form/ui/input-email.svelte";
+  import InputPhone from "../../../form/ui/input-phone.svelte";
+  import Button from "../../../button/button.svelte";
+  import { t } from "../../../../../i18n";
+  import {
+    Mail01Icon,
+    SmartPhone01Icon,
+    CheckmarkCircle02Icon,
+    Login02Icon,
+  } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import type {
+    ModalFormEmailOrPhoneProps,
+    ModalFormEmailOrPhoneType,
+  } from "../types";
+
+  let {
+    title,
+    subtitle,
+    email,
+    phone,
+    isOpen = $bindable(false),
+    submitText,
+    submitLoadingText,
+    cancelText,
+    isLoading = false,
+    showCancel = true,
+    onSubmit,
+    onCancel,
+    onClose,
+    class: className,
+  }: ModalFormEmailOrPhoneProps = $props();
+
+  let userEmail = $state(email ?? "");
+  let userPhone = $state(phone ?? "");
+  let emailOrPhone = $state("");
+  let channel = $state<ModalFormEmailOrPhoneType>("EMAIL_OR_PHONE");
+
+  const hasPreset = $derived(Boolean(email || phone));
+  const isValid = $derived(
+    !hasPreset
+      ? Boolean(emailOrPhone.trim())
+      : channel === "EMAIL"
+        ? Boolean(userEmail.trim())
+        : Boolean(userPhone.trim()),
+  );
+
+  const finalTitle = $derived(
+    title ?? $t("label.otp-verification") ?? "Verificação OTP",
+  );
+  const finalSubtitle = $derived(
+    subtitle ??
+      $t("text.otp-verification") ??
+      "Insira o seu email ou telefone para receber o código de verificação.",
+  );
+  const finalSubmitText = $derived(submitText ?? $t("label.send") ?? "Enviar");
+  const finalLoadingText = $derived(
+    submitLoadingText ?? $t("label.submitting") ?? "A submeter...",
+  );
+  const finalCancelText = $derived(
+    cancelText ?? $t("label.cancel") ?? "Cancelar",
+  );
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    if (isLoading || !isValid) return;
+    const value = !hasPreset
+      ? emailOrPhone.trim()
+      : channel === "EMAIL"
+        ? userEmail.trim()
+        : userPhone.trim();
+    onSubmit?.({
+      type: !hasPreset ? "EMAIL_OR_PHONE" : channel,
+      value,
+      email: hasPreset ? userEmail.trim() : undefined,
+      phone: hasPreset ? userPhone.trim() : undefined,
+    });
+  }
+
+  function handleCancel() {
+    isOpen = false;
+    onCancel?.();
+  }
+</script>
+
+<ModalCore
+  bind:isOpen
+  title={finalTitle}
+  subtitle={finalSubtitle}
+  showProgress={false}
+  showBack={false}
+  {onClose}
+  class={className}
+>
+  {#snippet content()}
+    <form class="space-y-4" onsubmit={handleSubmit}>
+      {#if !hasPreset}
+        <InputEmailOrPhone
+          bind:value={emailOrPhone}
+          isLabel
+          isIcon
+          disabled={isLoading}
+        />
+      {:else}
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          {#each [{ type: "EMAIL" as const, label: $t("input.email.label") ?? "Email", val: email, icon: Mail01Icon }, { type: "PHONE" as const, label: $t("input.phone.label") ?? "Telefone", val: phone, icon: SmartPhone01Icon }] as item (item.type)}
+            {@const isSelected = channel === item.type}
+            <button
+              type="button"
+              class="relative flex flex-col items-start gap-1 rounded-2xl border p-4 text-left transition {isSelected
+                ? 'border-primary bg-primary/5 ring-2 ring-primary/20'
+                : 'border-border bg-card hover:bg-muted/50'}"
+              onclick={() => (channel = item.type)}
+            >
+              <div class="flex w-full items-center justify-between">
+                <div
+                  class="flex size-9 items-center justify-center rounded-xl {isSelected
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground'}"
+                >
+                  <HugeiconsIcon icon={item.icon} size={18} />
+                </div>
+                {#if isSelected}
+                  <HugeiconsIcon
+                    icon={CheckmarkCircle02Icon}
+                    class="size-5 text-primary"
+                  />
+                {/if}
+              </div>
+              <span class="mt-2 text-sm font-semibold">{item.label}</span>
+              {#if item.val}
+                <p class="truncate text-xs text-muted-foreground max-w-50">
+                  {item.val}
+                </p>
+              {/if}
+            </button>
+          {/each}
+        </div>
+
+        <div class="space-y-3 pt-1">
+          <div
+            class="transition-opacity {channel !== 'EMAIL'
+              ? 'opacity-50 pointer-events-none'
+              : ''}"
+          >
+            <InputEmail
+              bind:value={userEmail}
+              isLabel
+              isIcon
+              disabled={isLoading || channel !== "EMAIL"}
+            />
+          </div>
+          <div
+            class="transition-opacity {channel !== 'PHONE'
+              ? 'opacity-50 pointer-events-none'
+              : ''}"
+          >
+            <InputPhone
+              bind:value={userPhone}
+              isLabel
+              disabled={isLoading || channel !== "PHONE"}
+            />
+          </div>
+        </div>
+      {/if}
+
+      <div class="pt-2">
+        <Button
+          type="submit"
+          {isLoading}
+          disabled={isLoading || !isValid}
+          class="w-full flex items-center justify-center gap-2 py-2.5"
+        >
+          {#if isLoading}
+            <span
+              class="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+            ></span>
+            {finalLoadingText}
+          {:else}
+            <HugeiconsIcon icon={Login02Icon} size={16} />
+            {finalSubmitText}
+          {/if}
+        </Button>
+      </div>
+    </form>
+  {/snippet}
+
+  {#snippet footer()}
+    {#if showCancel}
+      <div class="flex items-center justify-end">
+        <button
+          type="button"
+          class="rounded-lg border border-border px-5 py-2 text-sm font-semibold transition hover:bg-muted"
+          onclick={handleCancel}
+        >
+          {finalCancelText}
+        </button>
+      </div>
+    {/if}
+  {/snippet}
+</ModalCore>

package/dist/components/ui/modal/form/ui/ModalFormEmailOrPhone.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalFormEmailOrPhoneProps } from "../types";
+declare const ModalFormEmailOrPhone: import("svelte").Component<ModalFormEmailOrPhoneProps, {}, "isOpen">;
+type ModalFormEmailOrPhone = ReturnType<typeof ModalFormEmailOrPhone>;
+export default ModalFormEmailOrPhone;