negodesign 0.0.74 → 0.0.76

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;

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/ui/form/ui/input-radio.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+
+  type RadioOption = { 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?: RadioOption[];
+    name?: string;
+    class?: string;
+  } = $props();
+
+  function handleSelect(option: RadioOption) {
+    if (disabled) return;
+    value = option.value;
+  }
+</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"
+          )}
+        >
+          <input
+            type="radio"
+            {name}
+            {disabled}
+            {required}
+            checked={value === option.value}
+            onchange={() => handleSelect(option)}
+            class="size-4 border-input text-primary accent-primary"
+          />
+          <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"
+        )}
+      >
+        <input
+          type="radio"
+          {name}
+          {disabled}
+          {required}
+          checked={value === option.value}
+          onchange={() => handleSelect(option)}
+          class="size-4 border-input text-primary accent-primary"
+        />
+        <span class="text-foreground">{option.label}</span>
+      </label>
+    {/each}
+  </div>
+{/if}

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

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