negodesign 0.0.73 → 0.0.75

package/dist/components/{core → ui}/form/ui/input-email.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 input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="email"
-  label={label || $t("input.email.label")}
-  placeholder={placeholder || $t("input.email.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 input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="email"
+  label={label || $t("input.email.label")}
+  placeholder={placeholder || $t("input.email.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

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

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

package/dist/components/{core → ui}/form/ui/input-password-confirm.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";
-
-  /** Password confirmation input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="password"
-  label={label || $t("input.password-confirm.label")}
-  placeholder={placeholder || $t("input.password-confirm.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";
+
+  /** Password confirmation input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="password"
+  label={label || $t("input.password-confirm.label")}
+  placeholder={placeholder || $t("input.password-confirm.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

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

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

package/dist/components/{core → ui}/form/ui/input-password.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";
-
-  /** Password input field with icon and label. */
-  let {
-    label,
-    placeholder,
-    value = $bindable(""),
-    ...restProps
-  }: InputLabelProps = $props();
-</script>
-
-<InputBase
-  type="password"
-  label={label || $t("input.password.label")}
-  placeholder={placeholder || $t("input.password.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";
+
+  /** Password input field with icon and label. */
+  let {
+    label,
+    placeholder,
+    value = $bindable(""),
+    ...restProps
+  }: InputLabelProps = $props();
+</script>
+
+<InputBase
+  type="password"
+  label={label || $t("input.password.label")}
+  placeholder={placeholder || $t("input.password.placeholder")}
+  isLabel
+  isIcon
+  bind:value
+  {...restProps}
+/>

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

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

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

@@ -1,33 +1,33 @@
-<script lang="ts">
-  import { PhoneInput } from "../../../ui/phone-input";
-  import type { InputLabelProps } from "../data/InputLabel.svelte";
-  import { Label } from "../../../ui/label";
-  import { t } from "../../../../i18n";
-
-  /** Phone input field with icon and label. */
-  let {
-    label,
-    isLabel,
-    placeholder,
-    value = $bindable(""),
-  }: InputLabelProps = $props();
-</script>
-
-{#if isLabel}
-  <div class="flex flex-col gap-3 w-full">
-    {#if label}
-      <Label>{label}</Label>
-    {:else}
-      <Label>{$t("input.email-or-phone.label")}</Label>
-    {/if}
-    <PhoneInput
-      placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-      bind:value
-    />
-  </div>
-{:else}
-  <PhoneInput
-    placeholder={placeholder || $t("input.email-or-phone.placeholder")}
-    bind:value
-  />
-{/if}
+<script lang="ts">
+  import { PhoneInput } from "../../phone-input";
+  import type { InputLabelProps } from "../data/InputLabel.svelte.js";
+  import { Label } from "../../label";
+  import { t } from "../../../../i18n";
+
+  /** Phone input field with icon and label. */
+  let {
+    label,
+    isLabel,
+    placeholder,
+    value = $bindable(""),
+  }: InputLabelProps = $props();
+</script>
+
+{#if isLabel}
+  <div class="flex flex-col gap-3 w-full">
+    {#if label}
+      <Label>{label}</Label>
+    {:else}
+      <Label>{$t("input.email-or-phone.label")}</Label>
+    {/if}
+    <PhoneInput
+      placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+      bind:value
+    />
+  </div>
+{:else}
+  <PhoneInput
+    placeholder={placeholder || $t("input.email-or-phone.placeholder")}
+    bind:value
+  />
+{/if}

package/dist/components/{core → ui}/form/ui/input-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 InputPhone: import("svelte").Component<InputLabelProps, {}, "value">;
 type InputPhone = ReturnType<typeof InputPhone>;
 export default InputPhone;

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;