negodesign 0.0.74 → 0.0.75

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;

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

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+  import type { InputLabelProps } from "../data/InputLabel.svelte";
+
+  type SelectOption = { value: string; label: string };
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable(""),
+    disabled = false,
+    required = false,
+    placeholder = "Select an option",
+    options = [],
+    multiple = false,
+    class: className,
+    ...restProps
+  }: InputLabelProps & {
+    value?: string | string[];
+    options?: SelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+  } = $props();
+
+  let isOpen = $state(false);
+  let selectRef = $state<HTMLDivElement | null>(null);
+
+  function handleSelect(option: SelectOption) {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      const idx = arr.indexOf(option.value);
+      if (idx >= 0) {
+        value = arr.filter((v) => v !== option.value);
+      } else {
+        value = [...arr, option.value];
+      }
+    } else {
+      value = option.value;
+      isOpen = false;
+    }
+  }
+
+  function isSelected(option: SelectOption): boolean {
+    if (multiple) {
+      return Array.isArray(value) && value.includes(option.value);
+    }
+    return value === option.value;
+  }
+
+  function getDisplayText(): string {
+    if (multiple) {
+      const arr = Array.isArray(value) ? value : [];
+      if (arr.length === 0) return placeholder;
+      return arr
+        .map((v) => options.find((o) => o.value === v)?.label ?? v)
+        .join(", ");
+    }
+    return options.find((o) => o.value === value)?.label ?? placeholder;
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    if (selectRef && !selectRef.contains(e.target as Node)) {
+      isOpen = false;
+    }
+  }
+</script>
+
+<svelte:window onclick={handleClickOutside} />
+
+{#if isLabel}
+  <div class="flex w-full flex-col gap-3">
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <div bind:this={selectRef} class={cn("relative", className)}>
+      <button
+        type="button"
+        {disabled}
+        class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        onclick={() => (isOpen = !isOpen)}
+      >
+        <span class={cn(!value && "text-muted-foreground")}>
+          {getDisplayText()}
+        </span>
+        <svg
+          class={cn("size-4 shrink-0 opacity-50 transition-transform", isOpen && "rotate-180")}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+
+      {#if isOpen}
+        <div class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-card shadow-md">
+          {#each options as option (option.value)}
+            <button
+              type="button"
+              class={cn(
+                "flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted",
+                isSelected(option) && "bg-muted font-medium"
+              )}
+              onclick={() => handleSelect(option)}
+            >
+              {#if multiple}
+                <span
+                  class={cn(
+                    "mr-2 flex size-4 items-center justify-center rounded border",
+                    isSelected(option)
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-input"
+                  )}
+                >
+                  {#if isSelected(option)}
+                    <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                      <path d="M20 6 9 17l-5-5" />
+                    </svg>
+                  {/if}
+                </span>
+              {/if}
+              {option.label}
+            </button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <div bind:this={selectRef} class={cn("relative", className)}>
+    <button
+      type="button"
+      {disabled}
+      class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      onclick={() => (isOpen = !isOpen)}
+    >
+      <span class={cn(!value && "text-muted-foreground")}>
+        {getDisplayText()}
+      </span>
+      <svg
+        class={cn("size-4 shrink-0 opacity-50 transition-transform", isOpen && "rotate-180")}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </button>
+
+    {#if isOpen}
+      <div class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-border bg-card shadow-md">
+        {#each options as option (option.value)}
+          <button
+            type="button"
+            class={cn(
+              "flex w-full items-center px-3 py-2 text-sm transition-colors hover:bg-muted",
+              isSelected(option) && "bg-muted font-medium"
+            )}
+            onclick={() => handleSelect(option)}
+          >
+            {#if multiple}
+              <span
+                class={cn(
+                  "mr-2 flex size-4 items-center justify-center rounded border",
+                  isSelected(option)
+                    ? "border-primary bg-primary text-primary-foreground"
+                    : "border-input"
+                )}
+              >
+                {#if isSelected(option)}
+                  <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                {/if}
+              </span>
+            {/if}
+            {option.label}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { InputLabelProps } from "../data/InputLabel.svelte";
+type SelectOption = {
+    value: string;
+    label: string;
+};
+type $$ComponentProps = InputLabelProps & {
+    value?: string | string[];
+    options?: SelectOption[];
+    multiple?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+};
+declare const InputSelect: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputSelect = ReturnType<typeof InputSelect>;
+export default InputSelect;

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { cn } from "../../../../utils";
+  import { Label } from "../../label";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../../utils";
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(""),
+    label,
+    isLabel = false,
+    placeholder,
+    disabled = false,
+    required = false,
+    rows = 4,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLTextareaAttributes> & {
+    label?: string;
+    isLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    rows?: number;
+  } = $props();
+</script>
+
+{#if isLabel}
+  <div class="flex w-full flex-col gap-2">
+    {#if label}
+      <Label>{label}</Label>
+    {/if}
+    <textarea
+      bind:this={ref}
+      bind:value
+      {placeholder}
+      {disabled}
+      {required}
+      {rows}
+      class={cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        className
+      )}
+      {...restProps}
+    ></textarea>
+  </div>
+{:else}
+  <textarea
+    bind:this={ref}
+    bind:value
+    {placeholder}
+    {disabled}
+    {required}
+    {rows}
+    class={cn(
+      "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex min-h-[80px] w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+      className
+    )}
+    {...restProps}
+  ></textarea>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../../utils";
+type $$ComponentProps = WithElementRef<HTMLTextareaAttributes> & {
+    label?: string;
+    isLabel?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    rows?: number;
+};
+declare const InputTextarea: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type InputTextarea = ReturnType<typeof InputTextarea>;
+export default InputTextarea;

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { Label } from "../../label";
+  import { cn } from "../../../../utils";
+
+  let {
+    label,
+    isLabel = false,
+    value = $bindable(false),
+    disabled = false,
+    description,
+    class: className,
+  }: {
+    label?: string;
+    isLabel?: boolean;
+    value?: boolean;
+    disabled?: boolean;
+    description?: string;
+    class?: string;
+  } = $props();
+
+  function toggle() {
+    if (disabled) return;
+    value = !value;
+  }
+</script>
+
+{#if isLabel}
+  <div class={cn("flex w-full flex-col gap-2", className)}>
+    <div class="flex items-center justify-between">
+      <div class="flex flex-col gap-0.5">
+        {#if label}
+          <Label>{label}</Label>
+        {/if}
+        {#if description}
+          <p class="text-xs text-muted-foreground">{description}</p>
+        {/if}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={value}
+        aria-label={label ?? "Toggle"}
+        {disabled}
+        class={cn(
+          "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          value ? "bg-primary" : "bg-input"
+        )}
+        onclick={toggle}
+      >
+        <span
+          class={cn(
+            "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+            value ? "translate-x-5" : "translate-x-0"
+          )}
+        ></span>
+      </button>
+    </div>
+  </div>
+{:else}
+  <div class={cn("flex items-center justify-between", className)}>
+    <div class="flex flex-col gap-0.5">
+      {#if label}
+        <Label>{label}</Label>
+      {/if}
+      {#if description}
+        <p class="text-xs text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <button
+      type="button"
+      role="switch"
+      aria-checked={value}
+      aria-label={label ?? "Toggle"}
+      {disabled}
+      class={cn(
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+        value ? "bg-primary" : "bg-input"
+      )}
+      onclick={toggle}
+    >
+      <span
+        class={cn(
+          "pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+          value ? "translate-x-5" : "translate-x-0"
+        )}
+      ></span>
+    </button>
+  </div>
+{/if}

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    label?: string;
+    isLabel?: boolean;
+    value?: boolean;
+    disabled?: boolean;
+    description?: string;
+    class?: string;
+};
+declare const InputToggle: import("svelte").Component<$$ComponentProps, {}, "value">;
+type InputToggle = ReturnType<typeof InputToggle>;
+export default InputToggle;

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

@@ -0,0 +1,3 @@
+import Root from "./ui/ModalBadgeSelection.svelte";
+export { Root, Root as ModalBadgeSelection, };
+export type { ModelBadge, ModalBadgeSelectionProps } from "./types";

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

@@ -0,0 +1,2 @@
+import Root from "./ui/ModalBadgeSelection.svelte";
+export { Root, Root as ModalBadgeSelection, };

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

@@ -0,0 +1,35 @@
+import type { ModelBadge } from "../core/types";
+export type { ModelBadge } from "../core/types";
+/**
+ * Props do componente ModalBadgeSelection — modal de seleção com badges/pills.
+ * Segunda variação do sistema de modais do NegoDesign.
+ * @property title - Título principal do modal.
+ * @property subtitle - Subtítulo/descrição abaixo do título.
+ * @property badges - Lista de badges/pills seleccionáveis.
+ * @property selectedBadge - Badge actualmente seleccionado.
+ * @property multiple - Permite seleção múltipla de badges.
+ * @property totalSteps - Número total de passos (para a progress bar).
+ * @property currentStep - Passo actual.
+ * @property isOpen - Controla a visibilidade do modal.
+ * @property onSelect - Chamado ao seleccionar um badge.
+ * @property onBack - Chamado ao clicar no botão "Back".
+ * @property onContinue - Chamado ao clicar no botão "Continue".
+ * @property onSkip - Chamado ao clicar no "Skip This Step".
+ * @property class - Classe CSS extra no container do modal.
+ */
+export type ModalBadgeSelectionProps = {
+    title: string;
+    subtitle?: string;
+    badges: ModelBadge[];
+    selectedBadge?: ModelBadge | null;
+    selectedBadges?: ModelBadge[];
+    multiple?: boolean;
+    totalSteps?: number;
+    currentStep?: number;
+    isOpen?: boolean;
+    onSelect?: (badge: ModelBadge) => void;
+    onBack?: () => void;
+    onContinue?: () => void;
+    onSkip?: () => void;
+    class?: string;
+};

package/dist/components/ui/modal/badge/types.js

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