svelte-comp 1.2.5 → 1.2.6

package/dist/lib/Field.svelte

@@ -1,299 +0,0 @@
-<!-- src/lib/Field.svelte -->
-<script lang="ts">
-  /**
-   * @component Field
-   * @description Unified input/textarea field with label, leading/trailing content, clear button, and validation.
-   *
-   * @prop as {"input" | "textarea"} - Underlying element to render
-   * @default "input"
-   *
-   * @prop label {string} - Label text rendered above the field
-   *
-   * @prop sz {SizeKey} - Size preset for spacing and typography
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop variant {FieldVariant} - Visual style variant
-   * @options default|filled|neutral
-   * @default default
-   *
-   * @prop clearable {boolean} - Shows a clear button for text inputs
-   * @default true
-   *
-   * @prop rows {number} - Row count for textarea mode
-   * @default 3
-   *
-   * @prop parseNumber {boolean} - Coerces numeric input when possible
-   * @default false
-   *
-   * @prop leading {Snippet | string} - Leading content rendered inside the field
-   *
-   * @prop trailing {Snippet | string} - Trailing content rendered inside the field
-   *
-   * @prop onChange {(val: string | number) => void} - Fired when the value changes
-   *
-   * @prop value {string | number} - Controlled field value (bindable)
-   * @default ""
-   *
-   * @prop class {string} - Additional classes applied to the root label
-   * @default ""
-   *
-   * @prop id {string} - Custom id used for label and input linkage
-   *
-   * @prop type {string} - Input type when `as="input"`
-   *
-   * @prop invalid {boolean} - Marks the field invalid and sets `aria-invalid`
-   * @default false
-   *
-   * @prop describedBy {string} - ID of helper or error text for accessibility
-   *
-   * @note `bind:value` is supported; `onChange` receives cast value (`number` when `parseNumber` succeeds, otherwise `string` or `""`).
-   * @note Clear button appears only for text inputs (not for `type="number"`) and sets value to an empty string.
-   * @note Automatic padding for leading/trailing content; label is linked via an auto-generated `id`.
-   * @note Accessibility: sets `aria-invalid`, `aria-describedby`; number inputs also set `inputmode="decimal"`.
-   */
-  import type { Snippet } from "svelte";
-  import type {
-    HTMLInputAttributes,
-    HTMLTextareaAttributes,
-  } from "svelte/elements";
-  import type { SizeKey, FieldVariant, FieldType } from "./types";
-  import { TEXT } from "./types";
-  import { uid, cx } from "../utils";
-
-  type Props = (HTMLInputAttributes & HTMLTextareaAttributes & FieldType) & {
-    value?: string | number;
-  };
-
-  let {
-    as = "input",
-    label,
-    sz = "md",
-    variant = "default",
-    clearable = true,
-    rows = 3,
-    parseNumber = false,
-    leading,
-    trailing,
-    onChange,
-    value = $bindable<string | number>(""),
-    class: externalClass = "",
-    id: externalId,
-    type,
-    invalid = false,
-    describedBy,
-    ...rest
-  }: Props = $props();
-
-  const base =
-    "w-full outline-none transition-colors duration-[var(--transition-fast)] ease-[var(--timing-default)] box-border rounded-[var(--radius-md)] border focus:border-[var(--border-color-focus)] focus:ring-2 focus:ring-[var(--border-color-focus)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
-
-  const sizes: Record<SizeKey, string> = {
-    xs: "px-2 h-6",
-    sm: "px-3 h-7",
-    md: "px-4 h-8",
-    lg: "px-5 h-9",
-    xl: "px-6 h-10",
-  };
-
-  const variants: Record<FieldVariant, string> = {
-    default:
-      "bg-[var(--color-bg-surface)] [color:var(--color-text-default)] placeholder:[color:var(--color-text-muted)] border-[var(--border-color-default)]",
-    filled:
-      "bg-[var(--color-bg-muted)] [color:var(--color-text-default)] placeholder:[color:var(--color-text-muted)] border-[var(--border-color-default)]",
-    neutral:
-      "bg-transparent [color:var(--color-text-default)] placeholder:[color:var(--color-text-muted)] border-transparent hover:border-[var(--border-color-default)] focus:border-[var(--border-color-focus)]",
-  };
-
-  const rootClass = $derived(cx("flex flex-col gap-1", externalClass));
-
-  const inputClass = $derived(
-    as === "textarea"
-      ? cx(base, variants[variant], TEXT.md, "px-4")
-      : cx(base, sizes[sz], TEXT[sz], variants[variant])
-  );
-
-  const containerClass = $derived(
-    cx("relative flex items-stretch", as === "textarea" && "items-start")
-  );
-
-  const id = $derived(externalId ?? uid("fld-"));
-
-  const effectiveType = $derived(
-    as === "input"
-      ? type || (rest as HTMLInputAttributes).type || "text"
-      : undefined
-  );
-
-  const isNumber = $derived(as === "input" && effectiveType === "number");
-  const isPassword = $derived(as === "input" && effectiveType === "password");
-
-  let showPassword = $state(false);
-
-  function toOutgoing(v: string): string | number {
-    if (parseNumber && isNumber) {
-      if (v === "" || v === "-" || v === "." || v === "-.") {
-        return v;
-      }
-      const n = Number(v);
-      return Number.isNaN(n) ? "" : n;
-    }
-    return v;
-  }
-
-  function handleInput(e: Event) {
-    const t = e.target as HTMLInputElement | HTMLTextAreaElement;
-    const rawValue = t.value;
-    const outgoing = toOutgoing(rawValue);
-    value = outgoing;
-    onChange?.(outgoing);
-  }
-
-  function clear() {
-    const newValue = parseNumber && isNumber ? 0 : "";
-    value = newValue;
-    onChange?.(newValue);
-  }
-
-  const displayValue = $derived(String(value ?? ""));
-  const showClear = $derived(
-    clearable && as === "input" && displayValue.length > 0 && !isNumber
-  );
-  const needsRightPad = $derived(Boolean(trailing) || showClear || isPassword);
-
-  const labelColor = "[color:var(--color-text-muted)]";
-</script>
-
-<label for={id} class={rootClass}>
-  {#if label}
-    <span class={cx(TEXT[sz], "font-medium", labelColor)}>{label}</span>
-  {/if}
-
-  <div class={containerClass}>
-    {#if leading}
-      {@const leadingIsSnippet = typeof leading === "function"}
-      <div
-        class={cx(
-          "absolute inset-y-0 left-2 flex items-center [color:var(--color-text-muted)]"
-        )}
-        aria-hidden="true"
-      >
-        {#if leadingIsSnippet}
-          {@render (leading as Snippet)()}
-        {:else}
-          {leading}
-        {/if}
-      </div>
-    {/if}
-
-    {#if as === "textarea"}
-      <textarea
-        {...rest}
-        {id}
-        {rows}
-        class={cx(inputClass, needsRightPad && "pr-8", leading && "pl-8")}
-        value={displayValue}
-        aria-invalid={invalid || undefined}
-        aria-describedby={describedBy}
-        oninput={handleInput}
-      ></textarea>
-    {:else}
-      <input
-        {...rest}
-        {id}
-        type={isPassword ? (showPassword ? "text" : "password") : effectiveType}
-        inputmode={isNumber ? "decimal" : undefined}
-        class={cx(inputClass, needsRightPad && "pr-8", leading && "pl-8")}
-        value={displayValue}
-        aria-invalid={invalid || undefined}
-        aria-describedby={describedBy}
-        oninput={handleInput}
-      />
-    {/if}
-
-    <div class={cx("absolute inset-y-0 right-2 flex items-center gap-1")}>
-      {#if trailing}
-        {@const trailingIsSnippet = typeof trailing === "function"}
-        <span aria-hidden="true">
-          {#if trailingIsSnippet}
-            {@render (trailing as Snippet)()}
-          {:else}
-            {trailing}
-          {/if}
-        </span>
-      {/if}
-
-      {#if isPassword}
-        <button
-          type="button"
-          class={cx("password-toggle [color:var(--color-text-muted)] hover:opacity-[var(--opacity-hover)]")}
-          onmousedown={(e) => e.preventDefault()}
-          onclick={() => (showPassword = !showPassword)}
-          aria-label={showPassword ? "Hide password" : "Show password"}
-        >
-          {#if showPassword}
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-              <path d="M3 3L21 21" stroke="currentColor" stroke-width="2" />
-              <path
-                d="M10.5 10.677a2 2 0 002.823 2.823"
-                stroke="currentColor"
-                stroke-width="2"
-              />
-              <path
-                d="M7.362 7.561C5.68 8.74 4.279 10.42 3 12c2.4 3.6 6 6 9 6 1.4 0 2.8-.5 4.1-1.2"
-                stroke="currentColor"
-                stroke-width="2"
-              />
-              <path
-                d="M12 6c3 0 6 2.4 9 6-.6.9-1.3 1.7-2 2.5"
-                stroke="currentColor"
-                stroke-width="2"
-              />
-            </svg>
-          {:else}
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-                stroke="currentColor"
-                stroke-width="2"
-              />
-              <circle
-                cx="12"
-                cy="12"
-                r="3"
-                stroke="currentColor"
-                stroke-width="2"
-              />
-            </svg>
-          {/if}
-        </button>
-      {/if}
-
-      {#if showClear}
-        <button
-          type="button"
-          tabindex="-1"
-          onmousedown={(e) => e.preventDefault()}
-          class={cx("[color:var(--color-text-muted)] hover:opacity-[var(--opacity-hover)]")}
-          onclick={clear}
-          aria-label="Clear"
-          title="Clear"
-        >
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      {/if}
-    </div>
-  </div>
-</label>

package/dist/lib/Field.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { HTMLInputAttributes, HTMLTextareaAttributes } from "svelte/elements";
-import type { FieldType } from "./types";
-type Props = (HTMLInputAttributes & HTMLTextareaAttributes & FieldType) & {
-    value?: string | number;
-};
-declare const Field: import("svelte").Component<Props, {}, "value">;
-type Field = ReturnType<typeof Field>;
-export default Field;

package/dist/lib/FilePicker.svelte

@@ -1,241 +0,0 @@
-<!-- src/lib/FilePicker.svelte -->
-<script lang="ts">
-  /**
-   * @component FilePicker
-   * @description Lightweight file selector with click support and drag-and-drop. Internally uses a hidden `<input type="file">` plus a drop zone.
-   *
-   * @prop accept {string} - Accepted file types
-   * @default "*\\/*"
-   *
-   * @prop multiple {boolean} - Allows selecting multiple files
-   * @default false
-   *
-   * @prop label {string} - Button label; falls back to localized text
-   *
-   * @prop disabled {boolean} - Disables all interactions
-   * @default false
-   *
-   * @prop clearable {boolean} - Shows a clear button to reset selection
-   * @default true
-   *
-   * @prop placeholder {string} - Placeholder text for the drop zone
-   *
-   * @prop value {FileList | null} - Controlled selected files (bindable)
-   * @default null
-   *
-   * @prop onFilesSelected {(files: FileList | null) => void} - Fired when files are chosen
-   *
-   * @prop onError {(error: string) => void} - Fired on validation errors
-   *
-   * @prop class {string} - Additional classes for the wrapper
-   * @default ""
-   *
-   * @note The entire area is clickable and supports drag-and-drop.
-   * @note After a selection, the underlying input resets its value, so choosing the same file twice still triggers updates.
-   * @note `accept` does not apply to dropped files, only to the picker UI; validate files inside `onFilesSelected`.
-   * @note When `clearable=true`, the user can clear selected files and the callback receives `null`.
-   * @note When `disabled=true`, clicks, drag events, focus, and keyboard input are blocked.
-   */
-  import type { HTMLAttributes } from "svelte/elements";
-  import { getContext } from "svelte";
-  import Button from "./Button.svelte";
-  import { cx } from "../utils";
-  import { TEXTS } from "./lang";
-
-  type Props = HTMLAttributes<HTMLDivElement> & {
-    accept?: string;
-    multiple?: boolean;
-    label?: string;
-    disabled?: boolean;
-    clearable?: boolean;
-    placeholder?: string;
-    value?: FileList | null;
-    onFilesSelected?: (files: FileList | null) => void;
-    onError?: (error: string) => void;
-    class?: string;
-  };
-
-  let {
-    accept = "*/*",
-    multiple = false,
-    label,
-    disabled = false,
-    clearable = true,
-    placeholder,
-    value: propValue = null,
-    onFilesSelected,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const lang = getContext<{ value: keyof typeof TEXTS }>("lang");
-  const L = $derived(TEXTS[lang.value].components.filePicker);
-
-  const labelFinal = $derived(label ?? L.text);
-  const placeholderFinal = $derived(placeholder ?? L.placeholder);
-
-  let inputEl: HTMLInputElement;
-  let internalValue: FileList | null = $derived(propValue);
-  let isDragOver = $state(false);
-
-  const base = "inline-block w-full";
-  const pickerClass = $derived(cx(base, externalClass));
-
-  const hasValue = $derived(Boolean(internalValue && internalValue.length > 0));
-  const fileNames = $derived(
-    internalValue
-      ? Array.from(internalValue)
-          .map((file) => file.name)
-          .join(", ")
-      : ""
-  );
-
-  function handleButtonClick() {
-    if (disabled) return;
-    inputEl?.click();
-  }
-
-  function handleFileChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const files = target.files;
-    internalValue = files;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
-  }
-
-  function handleDrop(event: DragEvent) {
-    event.preventDefault();
-    isDragOver = false;
-    if (disabled) return;
-    const files = event.dataTransfer?.files;
-    internalValue = files || null;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
-  }
-
-  function handleDragOver(event: DragEvent) {
-    event.preventDefault();
-  }
-
-  function handleDragEnter(event: DragEvent) {
-    event.preventDefault();
-    if (!disabled) {
-      isDragOver = true;
-    }
-  }
-
-  function handleDragLeave(event: DragEvent) {
-    event.preventDefault();
-    isDragOver = false;
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (disabled) return;
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      handleButtonClick();
-    }
-  }
-
-  function clearSelection() {
-    if (!clearable) return;
-    internalValue = null;
-    if (inputEl) {
-      inputEl.value = "";
-    }
-    onFilesSelected?.(null);
-  }
-</script>
-
-<div class={pickerClass} {...rest}>
-  <input
-    bind:this={inputEl}
-    type="file"
-    {accept}
-    {multiple}
-    class="hidden"
-    onchange={handleFileChange}
-  />
-
-  <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
-    <Button {disabled} onClick={handleButtonClick} class="relative" sz="xs">
-      {labelFinal}
-    </Button>
-
-    {#if clearable}
-      <Button
-        onClick={clearSelection}
-        variant="danger"
-        disabled={!hasValue || disabled}
-        sz="xs"
-      >
-        {L.clear}
-      </Button>
-    {/if}
-  </div>
-
-  <div
-    class="mt-2 p-4 border-2 border-dashed rounded-[var(--radius-md)] text-center transition-colors duration-200"
-    class:border-[var(--color-primary)]={isDragOver && !disabled}
-    class:border-[var(--border-color-default)]={!isDragOver || disabled}
-    class:bg-[var(--color-bg-surface-hover)]={isDragOver && !disabled}
-    class:cursor-pointer={!disabled}
-    class:opacity-[var(--opacity-disabled)]={disabled}
-    class:cursor-not-allowed={disabled}
-    class:cursor-copy={isDragOver && !disabled}
-    role="button"
-    tabindex={disabled ? -1 : 0}
-    aria-disabled={disabled}
-    ondrop={handleDrop}
-    ondragover={handleDragOver}
-    ondragenter={handleDragEnter}
-    ondragleave={handleDragLeave}
-    onclick={handleButtonClick}
-    onkeydown={handleKeyDown}
-  >
-    <p class="text-sm [color:var(--color-text-muted)]">
-      {L.dragDrop}
-    </p>
-    {#if accept !== "*/*"}
-      <p class="text-xs mt-1 [color:var(--color-text-muted)]">
-        {L.accepted}: {accept}
-      </p>
-    {/if}
-  </div>
-
-  <div
-    class="mt-3 p-4 bg-[var(--color-bg-surface)] text-center"
-    aria-live="polite"
-  >
-    <p class="text-xs uppercase tracking-wide [color:var(--color-text-muted)]">
-      {L.selectedFiles}
-    </p>
-    <p
-      class="text-sm font-semibold mt-1 [color:var(--color-text-default)] break-words"
-    >
-      {#if hasValue}
-        {fileNames}
-      {:else}
-        {placeholderFinal}
-      {/if}
-    </p>
-    {#if hasValue && internalValue}
-      <p class="text-sm mt-1 [color:var(--color-text-muted)]">
-        {L.fileCount.replace("{n}", String(internalValue.length))}
-
-        {#if multiple && internalValue.length > 1}
-          • {L.totalSize}: {(
-            Array.from(internalValue).reduce(
-              (acc, file) => acc + file.size,
-              0
-            ) /
-            1024 /
-            1024
-          ).toFixed(2)} MB
-        {/if}
-      </p>
-    {/if}
-  </div>
-</div>

package/dist/lib/FilePicker.svelte.d.ts

@@ -1,52 +0,0 @@
-/**
-   * @component FilePicker
-   * @description Lightweight file selector with click support and drag-and-drop. Internally uses a hidden `<input type="file">` plus a drop zone.
-   *
-   * @prop accept {string} - Accepted file types
-   * @default "*\\/*"
-   *
-   * @prop multiple {boolean} - Allows selecting multiple files
-   * @default false
-   *
-   * @prop label {string} - Button label; falls back to localized text
-   *
-   * @prop disabled {boolean} - Disables all interactions
-   * @default false
-   *
-   * @prop clearable {boolean} - Shows a clear button to reset selection
-   * @default true
-   *
-   * @prop placeholder {string} - Placeholder text for the drop zone
-   *
-   * @prop value {FileList | null} - Controlled selected files (bindable)
-   * @default null
-   *
-   * @prop onFilesSelected {(files: FileList | null) => void} - Fired when files are chosen
-   *
-   * @prop onError {(error: string) => void} - Fired on validation errors
-   *
-   * @prop class {string} - Additional classes for the wrapper
-   * @default ""
-   *
-   * @note The entire area is clickable and supports drag-and-drop.
-   * @note After a selection, the underlying input resets its value, so choosing the same file twice still triggers updates.
-   * @note `accept` does not apply to dropped files, only to the picker UI; validate files inside `onFilesSelected`.
-   * @note When `clearable=true`, the user can clear selected files and the callback receives `null`.
-   * @note When `disabled=true`, clicks, drag events, focus, and keyboard input are blocked.
-   */
-import type { HTMLAttributes } from "svelte/elements";
-type Props = HTMLAttributes<HTMLDivElement> & {
-    accept?: string;
-    multiple?: boolean;
-    label?: string;
-    disabled?: boolean;
-    clearable?: boolean;
-    placeholder?: string;
-    value?: FileList | null;
-    onFilesSelected?: (files: FileList | null) => void;
-    onError?: (error: string) => void;
-    class?: string;
-};
-declare const FilePicker: import("svelte").Component<Props, {}, "">;
-type FilePicker = ReturnType<typeof FilePicker>;
-export default FilePicker;