negodesign 0.0.73 → 0.0.75

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/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;

package/dist/components/{core → ui}/form/ui/input-base.svelte

@@ -1,81 +1,81 @@
-<script lang="ts">
-  import Input from "../../../ui/input/input.svelte";
-  import { Label } from "../../../ui/label";
-  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
-  import { inputIconMap } from "../data/InputIconDefault.svelte";
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-
-  let {
-    label,
-    isIcon,
-    isLabel,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-
-  let showPassword = $state(false);
-
-  const isPassword = $derived(restProps.type == "password");
-
-  const inputType = $derived(
-    isPassword && showPassword ? "text" : restProps.type,
-  );
-
-  const currentIcon = $derived(
-    restProps.type ? inputIconMap[restProps.type] : undefined,
-  );
-
-  function togglePasswordVisibility() {
-    showPassword = !showPassword;
-  }
-</script>
-
-{#snippet renderInput()}
-  <div class="flex items-center relative w-full">
-    {#if isIcon && currentIcon}
-      <span class="absolute left-3 flex items-center pointer-events-none">
-        <HugeiconsIcon
-          icon={currentIcon}
-          size={16}
-          color="#94a3b8"
-          strokeWidth={1.5}
-        />
-      </span>
-    {/if}
-
-    <Input
-      class="{isIcon && currentIcon ? 'pl-9' : ''} {isPassword ? 'pr-9' : ''}"
-      bind:value
-      {...restProps}
-      type={inputType}
-    />
-
-    {#if isPassword}
-      <button
-        type="button"
-        onclick={togglePasswordVisibility}
-        class="absolute right-3 flex items-center cursor-pointer z-10 text-slate-400 hover:text-slate-600 focus:outline-none"
-        aria-label={showPassword ? "Ocultar senha" : "Ver senha"}
-      >
-        <HugeiconsIcon
-          icon={showPassword ? EyeOffIcon : EyeIcon}
-          size={16}
-          color="#94a3b8"
-          strokeWidth={1.5}
-        />
-      </button>
-    {/if}
-  </div>
-{/snippet}
-
-{#if isLabel}
-  <div class="flex flex-col gap-3 w-full">
-    {#if label}
-      <Label>{label}</Label>
-    {/if}
-    {@render renderInput()}
-  </div>
-{:else}
-  {@render renderInput()}
-{/if}
+<script lang="ts">
+  import Input from "../../input/input.svelte";
+  import { Label } from "../../label";
+  import { EyeIcon, EyeOffIcon } from "@hugeicons/core-free-icons";
+  import { inputIconMap } from "../data/InputIconDefault.svelte.js";
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let {
+    label,
+    isIcon,
+    isLabel,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+
+  let showPassword = $state(false);
+
+  const isPassword = $derived(restProps.type == "password");
+
+  const inputType = $derived(
+    isPassword && showPassword ? "text" : restProps.type,
+  );
+
+  const currentIcon = $derived(
+    restProps.type ? inputIconMap[restProps.type] : undefined,
+  );
+
+  function togglePasswordVisibility() {
+    showPassword = !showPassword;
+  }
+</script>
+
+{#snippet renderInput()}
+  <div class="flex items-center relative w-full">
+    {#if isIcon && currentIcon}
+      <span class="absolute left-3 flex items-center pointer-events-none">
+        <HugeiconsIcon
+          icon={currentIcon}
+          size={16}
+          color="#94a3b8"
+          strokeWidth={1.5}
+        />
+      </span>
+    {/if}
+
+    <Input
+      class="{isIcon && currentIcon ? 'pl-9' : ''} {isPassword ? 'pr-9' : ''}"
+      bind:value
+      {...restProps}
+      type={inputType}
+    />
+
+    {#if isPassword}
+      <button
+        type="button"
+        onclick={togglePasswordVisibility}
+        class="absolute right-3 flex items-center cursor-pointer z-10 text-slate-400 hover:text-slate-600 focus:outline-none"
+        aria-label={showPassword ? "Ocultar senha" : "Ver senha"}
+      >
+        <HugeiconsIcon
+          icon={showPassword ? EyeOffIcon : EyeIcon}
+          size={16}
+          color="#94a3b8"
+          strokeWidth={1.5}
+        />
+      </button>
+    {/if}
+  </div>
+{/snippet}
+
+{#if isLabel}
+  <div class="flex flex-col gap-3 w-full">
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    {@render renderInput()}
+  </div>
+{:else}
+  {@render renderInput()}
+{/if}

package/dist/components/{core → ui}/form/ui/input-base.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InputLabelProps } from "../data/InputLabel.svelte";
+import type { InputLabelProps } from "../data/InputLabel.svelte.ts";
 declare const InputBase: import("svelte").Component<InputLabelProps, {}, "value">;
 type InputBase = ReturnType<typeof InputBase>;
 export default InputBase;

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { Checkbox } from "../../checkbox";
+  import { cn } from "../../../../utils";
+
+  type CheckboxOption = { value: string; label: string };
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable([]),
+    disabled = false,
+    required = false,
+    options = [],
+    name = "",
+    class: className,
+  }: {
+    label?: string;
+    isLabel?: boolean;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    options?: CheckboxOption[];
+    name?: string;
+    class?: string;
+  } = $props();
+
+  function handleToggle(optionValue: string) {
+    if (disabled) return;
+    const idx = value.indexOf(optionValue);
+    if (idx >= 0) {
+      value = value.filter((v) => v !== optionValue);
+    } else {
+      value = [...value, optionValue];
+    }
+  }
+
+  function isChecked(optionValue: string): boolean {
+    return value.includes(optionValue);
+  }
+</script>
+
+{#if isLabel}
+  <div class={cn("flex w-full flex-col gap-2", className)}>
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <div class="flex flex-wrap gap-4">
+      {#each options as option (option.value)}
+        <label
+          class={cn(
+            "flex cursor-pointer items-center gap-2 text-sm",
+            disabled && "cursor-not-allowed opacity-50"
+          )}
+        >
+          <Checkbox
+            {disabled}
+            {name}
+            checked={isChecked(option.value)}
+            onCheckedChange={() => handleToggle(option.value)}
+          />
+          <span class="text-foreground">{option.label}</span>
+        </label>
+      {/each}
+    </div>
+  </div>
+{:else}
+  <div class={cn("flex flex-wrap gap-4", className)}>
+    {#each options as option (option.value)}
+      <label
+        class={cn(
+          "flex cursor-pointer items-center gap-2 text-sm",
+          disabled && "cursor-not-allowed opacity-50"
+        )}
+      >
+        <Checkbox
+          {disabled}
+          {name}
+          checked={isChecked(option.value)}
+          onCheckedChange={() => handleToggle(option.value)}
+        />
+        <span class="text-foreground">{option.label}</span>
+      </label>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,17 @@
+type CheckboxOption = {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = {
+    label?: string;
+    isLabel?: boolean;
+    value?: string[];
+    disabled?: boolean;
+    required?: boolean;
+    options?: CheckboxOption[];
+    name?: string;
+    class?: string;
+};
+declare const InputCheckbox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputCheckbox = ReturnType<typeof InputCheckbox>;
+export default InputCheckbox;

package/dist/components/{core → ui}/form/ui/input-code-otp.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import * as InputOTP from "../../../ui/input-otp/index.js";
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import { Label } from "../../../ui/label";
+  import * as InputOTP from "../../input-otp/index.js";
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import { Label } from "../../label";
   import { t } from "../../../../i18n";
 
   /** OTP code input field with configurable boxes. */

package/dist/components/{core → ui}/form/ui/input-code-otp.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InputLabelProps } from "../data/InputLabel.svelte";
+import type { InputLabelProps } from "../data/InputLabel.svelte.ts";
 type $$ComponentProps = InputLabelProps & {
     /** Number of OTP code boxes. Default: 6 */
     length?: number;

package/dist/components/{core → ui}/form/ui/input-email-or-phone.svelte

@@ -1,23 +1,23 @@
-<script lang="ts">
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import InputBase from "./input-base.svelte";
-  import { t } from "../../../../i18n";
-
-  /** Email or phone input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="text"
-  label={label || $t("input.email-or-phone.label")}
-  placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-  isLabel
-  isIcon
-  bind:value
-  {...restProps}
-/>
+<script lang="ts">
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import InputBase from "./input-base.svelte";
+  import { t } from "../../../../i18n";
+
+  /** Email or phone input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="text"
+  label={label || $t("input.email-or-phone.label")}
+  placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

package/dist/components/{core → ui}/form/ui/input-email-or-phone.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InputLabelProps } from "../data/InputLabel.svelte";
+import type { InputLabelProps } from "../data/InputLabel.svelte.ts";
 declare const InputEmailOrPhone: import("svelte").Component<InputLabelProps, {}, "value">;
 type InputEmailOrPhone = ReturnType<typeof InputEmailOrPhone>;
 export default InputEmailOrPhone;