negodesign 0.0.74 → 0.0.75

package/dist/components/pages/security/login/02/ui/LoginCard02.svelte

@@ -12,7 +12,12 @@
   import LanguageSwitcher from "../../../../../ui/language-switcher/language-switcher.svelte";
   import { LightSwitch } from "../../../../../ui/light-switch";
   import { t } from "../../../../../../i18n";
-  import type { LoginFormType, LoginRequestDto, LinkProps, SocialLoginItem } from "../../types";
+  import type {
+    LoginFormType,
+    LoginRequestDto,
+    LinkProps,
+    SocialLoginItem,
+  } from "../../types";
   import FormLoginUsernamePassword02 from "./FormLoginUsernamePassword02.svelte";
   import FormLoginEmailPassword02 from "./FormLoginEmailPassword02.svelte";
   import FormLoginPhonePassword02 from "./FormLoginPhonePassword02.svelte";
@@ -38,7 +43,7 @@
   }: Props = $props();
 </script>
 
-<div class="flex-1 flex flex-col justify-between h-full bg-white">
+<div class="flex-1 flex flex-col justify-between h-full">
   <nav class="flex justify-end p-5">
     <div class="flex gap-2">
       <LightSwitch />
@@ -49,7 +54,9 @@
   <div class="flex-1 flex flex-col justify-center px-8 md:px-12 pb-8">
     <div class="w-full max-w-sm mx-auto space-y-6">
       <div class="text-center space-y-2">
-        <h1 class="text-2xl font-bold text-gray-900">{$t("text.login.welcome")}</h1>
+        <h1 class="text-2xl font-bold text-gray-900">
+          {$t("text.login.welcome")}
+        </h1>
         <p class="text-sm text-gray-500">
           {$t("text.login.continue")}
         </p>
@@ -58,7 +65,11 @@
       {#if formType == "EMAIL_PASSWORD"}
         <FormLoginEmailPassword02 {onSubmit} {forgetPassword} {socialLogins} />
       {:else if formType == "USERNAME_PASSWORD"}
-        <FormLoginUsernamePassword02 {onSubmit} {forgetPassword} {socialLogins} />
+        <FormLoginUsernamePassword02
+          {onSubmit}
+          {forgetPassword}
+          {socialLogins}
+        />
       {:else if formType == "PHONE_PASSWORD"}
         <FormLoginPhonePassword02 {onSubmit} {forgetPassword} {socialLogins} />
       {/if}

package/dist/components/pages/security/login/03/ui/LoginCard03.svelte

@@ -54,9 +54,7 @@
   <div class="flex-1 flex flex-col justify-center px-8 md:px-12 pb-8">
     <div class="w-full max-w-sm mx-auto space-y-6">
       <div class="space-y-2">
-        <div
-          class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center"
-        >
+        <div class="w-12 h-12 rounded-xl flex items-center justify-center">
           <span class="text-xl font-bold text-gray-600">G</span>
         </div>
         <h1 class="text-2xl font-bold text-gray-900">
@@ -79,21 +77,41 @@
         <FormLoginPhonePassword03 {onSubmit} {forgetPassword} {socialLogins} />
       {/if}
 
-      <p class="text-center text-sm text-gray-600">
-        {$t("text.login.no-account")}
-        <a
-          href={register?.url ?? "/register"}
-          onclick={register?.onclick}
-          class="font-semibold text-primary hover:underline"
-        >
-          {$t("text.login.sign-up")}
-        </a>
-      </p>
+      <div class="flex flex-col space-y-2">
+        <div class="text-center text-xs space-x-2">
+          <a
+            href={privacyPolicy?.url ?? "/privacy-policy"}
+            onclick={privacyPolicy?.onclick}
+            class="hover:underline"
+          >
+            {$t("link.privacy-policy.label")}
+          </a>
+          <span>|</span>
+          <a
+            href={termsOfService?.url ?? "/terms-of-service"}
+            onclick={termsOfService?.onclick}
+            class="hover:underline"
+          >
+            {$t("link.terms-of-service.label")}
+          </a>
+        </div>
+
+        <p class="text-center text-sm">
+          {$t("text.login.no-account")}
+          <a
+            href={register?.url ?? "/register"}
+            onclick={register?.onclick}
+            class="font-semibold text-primary hover:underline"
+          >
+            {$t("text.login.sign-up")}
+          </a>
+        </p>
+      </div>
     </div>
   </div>
 
   <div class="px-8 pb-8">
-    <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl">
+    <div class="flex items-center gap-3 p-4 rounded-xl">
       <div class="flex -space-x-2">
         <div
           class="w-8 h-8 rounded-full bg-linear-to-br from-blue-400 to-blue-600 border-2 border-white"
@@ -106,10 +124,10 @@
         ></div>
       </div>
       <div>
-        <p class="text-sm font-semibold text-gray-900">
+        <p class="text-sm font-semibold">
           {$t("text.login.users.count")}
         </p>
-        <p class="text-xs text-gray-500">{$t("text.login.users.worldwide")}</p>
+        <p class="text-xs">{$t("text.login.users.worldwide")}</p>
       </div>
     </div>
   </div>

package/dist/components/ui/form/Form.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { cn } from "../../../utils";
+  import InputBase from "./ui/input-base.svelte";
+  import InputSelect from "./ui/input-select.svelte";
+  import InputRadio from "./ui/input-radio.svelte";
+  import InputCheckbox from "./ui/input-checkbox.svelte";
+  import InputTextarea from "./ui/input-textarea.svelte";
+  import InputToggle from "./ui/input-toggle.svelte";
+  import InputBadges from "./ui/input-badges.svelte";
+  import type { FormProps, FormInputConfig } from "./types";
+
+  let {
+    inputs = [],
+    onSubmit,
+    submitText = "Submit",
+    submitLoadingText = "Submitting...",
+    isLoading = false,
+    columns = 2,
+    gap = "gap-4",
+    class: className,
+  }: FormProps = $props();
+
+  let formValues = $state<Record<string, string | string[] | boolean>>(getInitialValues());
+
+  function getInitialValues(): Record<string, string | string[] | boolean> {
+    const values: Record<string, string | string[] | boolean> = {};
+    for (const input of inputs) {
+      if (input.type === "toggle") {
+        values[input.name] = (input.value as boolean) ?? false;
+      } else if (input.type === "checkbox" || input.type === "badges" || input.multiple) {
+        values[input.name] = (input.value as string[]) ?? [];
+      } else {
+        values[input.name] = (input.value as string) ?? "";
+      }
+    }
+    return values;
+  }
+
+  function handleTextChange(name: string, e: Event) {
+    const val = (e.target as HTMLInputElement | HTMLTextAreaElement).value;
+    formValues[name] = val;
+    const config = inputs.find((i) => i.name === name);
+    if (config?.onChange) {
+      (config.onChange as (v: string | string[] | boolean) => void)(val);
+    }
+  }
+
+  function handleSelectChange(name: string, val: string | string[]) {
+    formValues[name] = val;
+    const config = inputs.find((i) => i.name === name);
+    if (config?.onChange) {
+      (config.onChange as (v: string | string[] | boolean) => void)(val);
+    }
+  }
+
+  function handleToggleChange(name: string, val: boolean) {
+    formValues[name] = val;
+    const config = inputs.find((i) => i.name === name);
+    if (config?.onChange) {
+      (config.onChange as (v: string | string[] | boolean) => void)(val);
+    }
+  }
+
+  function handleSubmit(e: Event) {
+    e.preventDefault();
+    if (isLoading) return;
+    onSubmit?.(formValues);
+  }
+
+  function getColSpan(input: FormInputConfig): string {
+    if (input.fill) return "col-span-1 md:col-span-2";
+    return "col-span-1";
+  }
+</script>
+
+<form
+  onsubmit={handleSubmit}
+  class={cn(
+    "grid w-full",
+    columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1",
+    gap,
+    className
+  )}
+>
+  {#each inputs as input (input.name)}
+    <div class={getColSpan(input)}>
+      {#if input.type === "select"}
+        <InputSelect
+          label={input.label}
+          isLabel
+          placeholder={input.placeholder}
+          options={input.options ?? []}
+          multiple={input.multiple ?? false}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          bind:value={() => formValues[input.name] as string, (v) => handleSelectChange(input.name, v)}
+        />
+      {:else if input.type === "radio"}
+        <InputRadio
+          label={input.label}
+          isLabel
+          name={input.name}
+          options={input.options ?? []}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          bind:value={() => formValues[input.name] as string, (v) => handleSelectChange(input.name, v)}
+        />
+      {:else if input.type === "checkbox"}
+        <InputCheckbox
+          label={input.label}
+          isLabel
+          name={input.name}
+          options={input.options ?? []}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          bind:value={() => formValues[input.name] as string[], (v) => handleSelectChange(input.name, v)}
+        />
+      {:else if input.type === "textarea"}
+        <InputTextarea
+          label={input.label}
+          isLabel
+          placeholder={input.placeholder}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          rows={input.rows ?? 4}
+          bind:value={() => formValues[input.name] as string, (v) => handleSelectChange(input.name, v)}
+        />
+      {:else if input.type === "toggle"}
+        <InputToggle
+          label={input.label}
+          isLabel
+          description={input.description}
+          disabled={input.disabled ?? false}
+          bind:value={() => formValues[input.name] as boolean, (v) => handleToggleChange(input.name, v)}
+        />
+      {:else if input.type === "badges"}
+        <InputBadges
+          label={input.label}
+          isLabel
+          placeholder={input.placeholder}
+          suggestions={input.suggestions ?? []}
+          maxTags={input.maxTags ?? 0}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          bind:value={() => formValues[input.name] as string[], (v) => handleSelectChange(input.name, v)}
+        />
+      {:else}
+        <InputBase
+          type={input.type === "phone" ? "tel" : input.type}
+          label={input.label}
+          isLabel
+          isIcon
+          placeholder={input.placeholder}
+          disabled={input.disabled ?? false}
+          required={input.required ?? false}
+          bind:value={() => formValues[input.name] as string, (v) => handleSelectChange(input.name, v)}
+        />
+      {/if}
+    </div>
+  {/each}
+
+  <div class={cn("flex justify-end", columns === 2 ? "col-span-1 md:col-span-2" : "col-span-1")}>
+    <button
+      type="submit"
+      disabled={isLoading}
+      class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      {isLoading ? submitLoadingText : submitText}
+    </button>
+  </div>
+</form>

package/dist/components/ui/form/Form.svelte.d.ts

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

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

@@ -0,0 +1,78 @@
+/**
+ * Opção para inputs do tipo select, radio ou checkbox.
+ * @property value - Valor identificador da opção.
+ * @property label - Texto visível da opção.
+ */
+export type FormOption = {
+    value: string;
+    label: string;
+};
+/**
+ * Configuração de um input dentro do Form.
+ * Cada item define um campo do formulário com o seu tipo e propriedades.
+ *
+ * Tipos suportados:
+ * - `'text'` | `'email'` | `'password'` | `'date'` | `'phone'` — inputs de texto
+ * - `'select'` — dropdown/select com opções
+ * - `'radio'` — grupo de radio buttons
+ * - `'checkbox'` — grupo de checkboxes
+ * - `'textarea'` — área de texto
+ * - `'toggle'` — interruptor on/off
+ * - `'badges'` — input de tags/badges com sugestões
+ *
+ * @property type - Tipo do input.
+ * @property name - Nome do campo (usado como chave no objeto de dados).
+ * @property value - Valor inicial do campo.
+ * @property label - Label/rótulo do campo.
+ * @property placeholder - Texto placeholder.
+ * @property onChange - Callback ao alterar o valor.
+ * @property disabled - Desativa o campo.
+ * @property required - Marca como obrigatório.
+ * @property fill - Ocupa 2 colunas (true) ou 1 coluna (false/default).
+ * @property options - Opções para select, radio ou checkbox.
+ * @property multiple - Permite seleção múltipla (apenas select).
+ * @property rows - Número de linhas (apenas textarea).
+ * @property description - Texto descritivo (apenas toggle).
+ * @property suggestions - Sugestões de tags (apenas badges).
+ * @property maxTags - Número máximo de tags (apenas badges, 0 = ilimitado).
+ */
+export type FormInputConfig = {
+    type: "text" | "email" | "password" | "date" | "phone" | "select" | "radio" | "checkbox" | "textarea" | "toggle" | "badges";
+    name: string;
+    value?: string | string[] | boolean;
+    label?: string;
+    placeholder?: string;
+    onChange?: (value: string | string[] | boolean) => void;
+    disabled?: boolean;
+    required?: boolean;
+    fill?: boolean;
+    options?: FormOption[];
+    multiple?: boolean;
+    rows?: number;
+    description?: string;
+    suggestions?: string[];
+    maxTags?: number;
+};
+/**
+ * Props do componente Form — formulário com grid responsivo de 2 colunas.
+ * Organiza os inputs numa grid, onde cada campo pode ocupar 1 ou 2 colunas via `fill`.
+ *
+ * @property inputs - Array de configurações dos inputs do formulário.
+ * @property onSubmit - Callback ao submeter o formulário (objeto com name:value).
+ * @property submitText - Texto do botão de submissão.
+ * @property submitLoadingText - Texto durante carregamento.
+ * @property isLoading - Estado de carregamento.
+ * @property columns - Número de colunas da grid (padrão: 2).
+ * @property gap - Espaçamento entre os campos.
+ * @property class - Classe CSS extra no container.
+ */
+export type FormProps = {
+    inputs: FormInputConfig[];
+    onSubmit?: (data: Record<string, string | string[] | boolean>) => void;
+    submitText?: string;
+    submitLoadingText?: string;
+    isLoading?: boolean;
+    columns?: 1 | 2;
+    gap?: string;
+    class?: string;
+};

package/dist/components/ui/form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/form/ui/input-badges.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+  import { Cancel01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable([]),
+    disabled = false,
+    required = false,
+    placeholder = "Add a tag...",
+    suggestions = [],
+    maxTags = 0,
+    class: className,
+  }: {
+    label?: string;
+    isLabel?: boolean;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    suggestions?: string[];
+    maxTags?: number;
+    class?: string;
+  } = $props();
+
+  let inputValue = $state("");
+  let isInputFocused = $state(false);
+  let showSuggestions = $state(false);
+
+  const filteredSuggestions = $derived(
+    suggestions.filter(
+      (s) =>
+        !value.includes(s) &&
+        s.toLowerCase().includes(inputValue.toLowerCase())
+    )
+  );
+
+  function addTag(tag: string) {
+    const trimmed = tag.trim();
+    if (!trimmed || disabled) return;
+    if (value.includes(trimmed)) return;
+    if (maxTags > 0 && value.length >= maxTags) return;
+    value = [...value, trimmed];
+    inputValue = "";
+    showSuggestions = false;
+  }
+
+  function removeTag(tag: string) {
+    if (disabled) return;
+    value = value.filter((t) => t !== tag);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+      value = value.slice(0, -1);
+    }
+  }
+
+  function handleInput(e: Event) {
+    inputValue = (e.target as HTMLInputElement).value;
+    showSuggestions = inputValue.length > 0 && filteredSuggestions.length > 0;
+  }
+
+  function handleFocus() {
+    isInputFocused = true;
+    if (inputValue.length > 0 && filteredSuggestions.length > 0) {
+      showSuggestions = true;
+    }
+  }
+
+  function handleBlur() {
+    isInputFocused = false;
+    setTimeout(() => (showSuggestions = false), 150);
+  }
+
+  function selectSuggestion(suggestion: string) {
+    addTag(suggestion);
+    inputValue = "";
+  }
+</script>
+
+{#if isLabel}
+  <div class={cn("flex w-full flex-col gap-2", className)}>
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class={cn(
+        "flex min-h-[42px] flex-wrap items-center gap-1.5 rounded-md border border-input bg-card px-3 py-1.5 transition-colors",
+        isInputFocused && "ring-2 ring-ring ring-offset-2 ring-offset-background",
+        disabled && "cursor-not-allowed opacity-50"
+      )}
+      onclick={() => !disabled && document.getElementById(`badges-input-${label}`)?.focus()}
+    >
+      {#each value as tag (tag)}
+        <span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs font-medium text-foreground">
+          {tag}
+          <button
+            type="button"
+            {disabled}
+            class="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-destructive/10 hover:text-destructive"
+            onclick={(e) => { e.stopPropagation(); removeTag(tag); }}
+          >
+            <HugeiconsIcon icon={Cancel01Icon} class="size-3" />
+          </button>
+        </span>
+      {/each}
+
+      {#if maxTags === 0 || value.length < maxTags}
+        <input
+          id="badges-input-{label}"
+          type="text"
+          bind:value={inputValue}
+          {placeholder}
+          {disabled}
+          {required}
+          class="min-w-[120px] flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+          onkeydown={handleKeydown}
+          oninput={handleInput}
+          onfocus={handleFocus}
+          onblur={handleBlur}
+        />
+      {/if}
+    </div>
+
+    {#if showSuggestions && filteredSuggestions.length > 0}
+      <div class="max-h-40 overflow-auto rounded-md border border-border bg-card shadow-md">
+        {#each filteredSuggestions as suggestion (suggestion)}
+          <button
+            type="button"
+            class="flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted"
+            onmousedown={(e) => { e.preventDefault(); selectSuggestion(suggestion); }}
+          >
+            {suggestion}
+          </button>
+        {/each}
+      </div>
+    {/if}
+
+    {#if maxTags > 0}
+      <p class="text-xs text-muted-foreground">
+        {value.length}/{maxTags} tags
+      </p>
+    {/if}
+  </div>
+{:else}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={cn(
+      "flex min-h-[42px] flex-wrap items-center gap-1.5 rounded-md border border-input bg-card px-3 py-1.5 transition-colors",
+      isInputFocused && "ring-2 ring-ring ring-offset-2 ring-offset-background",
+      disabled && "cursor-not-allowed opacity-50",
+      className
+    )}
+    onclick={() => !disabled && document.getElementById(`badges-input-${label}`)?.focus()}
+  >
+    {#each value as tag (tag)}
+      <span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-0.5 text-xs font-medium text-foreground">
+        {tag}
+        <button
+          type="button"
+          {disabled}
+          class="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-destructive/10 hover:text-destructive"
+          onclick={(e) => { e.stopPropagation(); removeTag(tag); }}
+        >
+          <HugeiconsIcon icon={Cancel01Icon} class="size-3" />
+        </button>
+      </span>
+    {/each}
+
+    {#if maxTags === 0 || value.length < maxTags}
+      <input
+        id="badges-input-{label}"
+        type="text"
+        bind:value={inputValue}
+        {placeholder}
+        {disabled}
+        {required}
+        class="min-w-[120px] flex-1 bg-transparent py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+        onkeydown={handleKeydown}
+        oninput={handleInput}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+      />
+    {/if}
+  </div>
+
+  {#if showSuggestions && filteredSuggestions.length > 0}
+    <div class="max-h-40 overflow-auto rounded-md border border-border bg-card shadow-md">
+      {#each filteredSuggestions as suggestion (suggestion)}
+        <button
+          type="button"
+          class="flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted"
+          onmousedown={(e) => { e.preventDefault(); selectSuggestion(suggestion); }}
+        >
+          {suggestion}
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  {#if maxTags > 0}
+    <p class="text-xs text-muted-foreground">
+      {value.length}/{maxTags} tags
+    </p>
+  {/if}
+{/if}

package/dist/components/ui/form/ui/input-badges.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    label?: string;
+    isLabel?: boolean;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    placeholder?: string;
+    suggestions?: string[];
+    maxTags?: number;
+    class?: string;
+};
+declare const InputBadges: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputBadges = ReturnType<typeof InputBadges>;
+export default InputBadges;