svelte-comp 1.2.2 → 1.2.6

package/dist/lib/Form.svelte

@@ -1,438 +0,0 @@
-<!-- src/lib/Form.svelte -->
-<script lang="ts">
-  /**
-   * @component Form
-   * @description Declarative, schema-driven form generator. Renders `Field`, `Select`, and `CheckBox` based on `FieldSchema`. Supports validation, controlled state, and an external API via `expose`.
-   *
-   * @prop schema {FieldSchema[]} - Field configuration for the generated form
-   *
-   * @prop value {FormValues} - Initial form data
-   * @default {}
-   *
-   * @prop rowGap {number | SizeKey} - Vertical spacing between fields
-   * @default "md"
-   *
-   * @prop validateOn {"input" | "blur" | "submit"} - When validation should run
-   * @default "blur"
-   *
-   * @prop onChange {(form: FormValues) => void} - Fired when form values change
-   *
-   * @prop onSubmit {(form: FormValues, ctx: { reset: () => void }) => void | Promise<void>} - Submission handler
-   *
-   * @prop formId {string} - Stable identifier for form elements
-   *
-   * @prop expose {(api: FormApi) => void} - Exposes imperative Form API
-   *
-   * @prop labelAlign {AlignText} - Alignment for labels
-   * @options left|center|right
-   * @default "left"
-   *
-   * @prop labelWeight {LabelWeight} - Font weight for labels
-   * @options normal|medium|semibold|bold
-   * @default "medium"
-   *
-   * @prop labelSize {SizeKey} - Size preset for labels
-   * @options xs|sm|md|lg|xl
-   * @default "md"
-   *
-   * @prop compact {boolean} - Enables denser sizing across controls
-   * @default false
-   *
-   * @note Initial value for each field: `value[name]` → `schema.default` → `''` (or `false` for checkboxes).
-   * @note `validateOn='input'|'blur'|'submit'` controls when validators run; built-in checks: `required`, `number`, and `email` regex.
-   * @note `when(form)` hides a field dynamically; hidden fields are skipped during validation.
-   * @note `Select` options are coerced to strings for the underlying control; provide string values if you rely on strict equality.
-   * @note Errors are rendered with stable `id`s and wired via `aria-describedby`; `invalid` flags are passed to inputs.
-   * @note `expose` provides `{ reset, submit, validate, getData }`; `validate` returns `Promise<boolean>`.
-   * @note `compact` reduces control sizes (`xs→xs`, `sm→xs`, `md→sm`, `lg→md`, `xl→lg`) and centers labels where applicable.
-   */
-  import Field from "./Field.svelte";
-  import Select from "./Select.svelte";
-  import CheckBox from "./CheckBox.svelte";
-  import Toast from "./Toast.svelte";
-  import type {
-    AlignText,
-    LabelWeight,
-    SizeKey,
-    ToastVariant,
-    FieldSchema,
-    FormApi,
-    FormValues,
-  } from "./types";
-  import { TEXT } from "./types";
-  import { cx, debounce } from "../utils";
-
-  type Props = {
-    schema: FieldSchema[];
-    value?: FormValues;
-    rowGap?: number | SizeKey;
-    validateOn?: "input" | "blur" | "submit";
-    onChange?: (form: FormValues) => void;
-    onSubmit?: (
-      form: FormValues,
-      ctx: { reset: () => void }
-    ) => void | Promise<void>;
-    formId?: string;
-    expose?: (api: FormApi) => void;
-    labelAlign?: AlignText;
-    labelWeight?: LabelWeight;
-    labelSize?: SizeKey;
-    compact?: boolean;
-  };
-
-  let {
-    schema,
-    value = {},
-    rowGap = "md",
-    validateOn = "blur",
-    onChange,
-    onSubmit,
-    formId,
-    expose,
-    labelAlign = "left",
-    labelWeight = "medium",
-    labelSize = "md",
-    compact = false,
-  }: Props = $props();
-
-  const compactMap = {
-    xs: "xs",
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-    xl: "lg",
-  } as const;
-
-  const weightClasses = {
-    normal: "font-normal",
-    medium: "font-medium",
-    semibold: "font-semibold",
-    bold: "font-bold",
-  } as const;
-
-  const gapClasses = {
-    xs: "gap-1",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-6",
-    xl: "gap-8",
-  } as const;
-
-  const toStr = (v: unknown) => (v == null ? "" : String(v));
-
-  let form = $state<FormValues>({});
-
-  const touched = $state<Record<string, boolean>>({});
-  const errors = $state<Record<string, string[]>>({});
-  let toasts = $state<
-    Array<{
-      id: number;
-      message: string;
-      variant: ToastVariant;
-      title?: string;
-    }>
-  >([]);
-  let toastId = 0;
-
-  const inputWidthClass = $derived(compact ? "" : "w-full");
-
-  const rowGapClass = $derived(
-    typeof rowGap === "number" ? "" : (gapClasses[rowGap] ?? gapClasses.md)
-  );
-
-  const rowGapStyle = $derived(typeof rowGap === "number" ? rowGap + "px" : "");
-
-  const getFieldValue = (name: string): string | number => {
-    const current = form[name];
-    return typeof current === "number" ? current : toStr(current);
-  };
-
-  function getCompactSize(size: SizeKey) {
-    return compact ? (compactMap[size] ?? "md") : size;
-  }
-
-  const globalFormInstanceCounter = globalThis as unknown as {
-    __svelteCompFormInstanceCounter?: number;
-  };
-  globalFormInstanceCounter.__svelteCompFormInstanceCounter ??= 0;
-  const instanceId = $state(globalFormInstanceCounter.__svelteCompFormInstanceCounter++);
-
-  const baseFormId = $derived.by(() => {
-    if (formId && formId.trim()) return formId.trim();
-    const key = schema.map((f) => f.name).join("|");
-    let hash = 0;
-    for (let i = 0; i < key.length; i += 1) {
-      hash = (hash << 5) - hash + key.charCodeAt(i);
-      hash |= 0;
-    }
-    const suffix = Math.abs(hash >>> 0).toString(36) || "form";
-    return `form-${suffix}`;
-  });
-
-  const stableFormId = $derived.by(() => {
-    if (formId && formId.trim()) return baseFormId;
-    return `${baseFormId}-${instanceId}`;
-  });
-
-  $effect(() => {
-    const nextNames = new Set(schema.map((f) => f.name));
-
-    for (const key of Object.keys(form)) {
-      if (!nextNames.has(key)) {
-        delete form[key];
-        delete touched[key];
-        delete errors[key];
-      }
-    }
-
-    for (const f of schema) {
-      const hasIncoming = Object.prototype.hasOwnProperty.call(value, f.name);
-      if (hasIncoming) {
-        form[f.name] = value[f.name];
-      } else if (!(f.name in form)) {
-        form[f.name] = f.default ?? (f.type === "checkbox" ? false : "");
-      }
-
-      if (!(f.name in touched)) touched[f.name] = false;
-      if (!errors[f.name]) errors[f.name] = [];
-    }
-  });
-
-  const scheduleValidation = debounce((name: string) => {
-    void validateField(name);
-  }, 150);
-
-  function setValue(name: string, v: unknown) {
-    if (form[name] === v) return;
-    form[name] = v;
-    if (validateOn === "input") scheduleValidation(name);
-    onChange?.({ ...form });
-  }
-
-  function blur(name: string) {
-    if (!touched[name]) touched[name] = true;
-    if (validateOn !== "submit") validateField(name);
-  }
-
-  function removeToast(id: number) {
-    toasts = toasts.filter((t) => t.id !== id);
-  }
-
-  function addToast(variant: ToastVariant, message: string, title?: string) {
-    const id = toastId++;
-    toasts = [...toasts, { id, message, variant, title }];
-  }
-
-  async function validateField(name: string) {
-    const f = schema.find((s) => s.name === name);
-    if (!f) return;
-    const val = form[name];
-    const out: string[] = [];
-
-    if (
-      f.required &&
-      (val === "" || val == null || (f.type === "checkbox" && !val))
-    ) {
-      out.push("Required");
-    }
-
-    if (f.type === "number" && val !== "" && Number.isNaN(Number(val))) {
-      out.push("Must be a number");
-    }
-
-    if (f.type === "email" && val !== "") {
-      const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(val));
-      if (!ok) out.push("Invalid email");
-    }
-
-    if (f.validators) {
-      for (const v of f.validators) {
-        const r = await v(val, form);
-        if (r) out.push(r);
-      }
-    }
-
-    errors[name] = out;
-  }
-
-  function showField(f: FieldSchema) {
-    return f.when ? !!f.when(form) : true;
-  }
-
-  const visible = $derived(schema.filter(showField));
-  const visibleNames = $derived(visible.map((f) => f.name));
-
-  async function validateForm() {
-    await Promise.all(visibleNames.map(validateField));
-    return visibleNames.every((n) => (errors[n]?.length ?? 0) === 0);
-  }
-
-  function reset() {
-    for (const f of schema) {
-      form[f.name] = f.default ?? (f.type === "checkbox" ? false : "");
-      touched[f.name] = false;
-      errors[f.name] = [];
-    }
-    onChange?.({ ...form });
-  }
-
-  async function submit(e?: Event) {
-    e?.preventDefault?.();
-    const ok = await validateForm();
-    if (!ok) return;
-    try {
-      await onSubmit?.({ ...form }, { reset });
-      addToast("success", "Form submitted successfully");
-    } catch (err) {
-      addToast("danger", "Form submission failed", "Error");
-      throw err;
-    }
-  }
-
-  $effect(() => {
-    const api: FormApi = {
-      reset,
-      submit: () => submit(),
-      validate: () => validateForm(),
-      getData: () => ({ ...form }),
-      setValue: (name, value) => setValue(name, value),
-    };
-    expose?.(api);
-  });
-</script>
-
-<form
-  id={stableFormId}
-  onsubmit={submit}
-  novalidate
-  class={cx(
-    "grid font-sans w-full",
-    rowGapClass,
-    compact && "gap-2 justify-items-center"
-  )}
-  style:gap={rowGapStyle}
->
-  {#each visible as f (f.name)}
-    {#key f.name}
-      <div
-        class={cx(
-          "grid gap-1 w-full min-w-0",
-          compact ? "justify-items-center" : "justify-items-stretch"
-        )}
-      >
-        {#if f.label}
-          <div
-            class={cx(
-              weightClasses[labelWeight],
-              compact
-                ? "text-xs -mb-1 text-center"
-                : [
-                    TEXT[labelSize],
-                    labelAlign === "center"
-                      ? "text-center"
-                      : labelAlign === "right"
-                        ? "text-right"
-                        : "text-left",
-                  ],
-              "text-[var(--color-text-default)] leading-normal"
-            )}
-          >
-            {f.label}
-            {#if f.required}
-              <span class="text-[var(--color-text-default)]">*</span>
-            {/if}
-          </div>
-        {/if}
-
-        {#if f.type === "select"}
-          {@const hasErr =
-            (touched[f.name] || validateOn !== "submit") &&
-            errors[f.name]?.length > 0}
-          {@const errId = hasErr ? `${stableFormId}-err-${f.name}` : undefined}
-          <Select
-            class={cx(f.class, inputWidthClass)}
-            options={(f.options ?? []).map((o) => ({
-              label: toStr(o.label),
-              value: toStr(o.value),
-              disabled: o.disabled,
-            }))}
-            sz={getCompactSize(f.sz ?? "md")}
-            variant={f.variant ?? "default"}
-            value={toStr(form[f.name])}
-            onChange={(v: string) => setValue(f.name, v)}
-            onblur={() => blur(f.name)}
-            invalid={hasErr}
-            describedBy={errId}
-          />
-        {:else if f.type === "checkbox"}
-          <div class={cx(f.class, compact && "mx-auto justify-self-center")}>
-            <CheckBox
-              class={f.class ?? ""}
-              sz={getCompactSize(f.sz ?? "md")}
-              variant="default"
-              checked={!!form[f.name]}
-              onChange={(c: boolean) => setValue(f.name, c)}
-              onblur={() => blur(f.name)}
-            />
-          </div>
-        {:else}
-          {@const hasErr =
-            (touched[f.name] || validateOn !== "submit") &&
-            errors[f.name]?.length > 0}
-
-          {@const errId = hasErr ? `${stableFormId}-err-${f.name}` : undefined}
-
-          <Field
-            class={cx(f.class, inputWidthClass)}
-            as={f.type === "textarea" ? "textarea" : "input"}
-            type={f.type === "number"
-              ? "number"
-              : f.type === "password"
-                ? "password"
-                : f.type === "email"
-                  ? "email"
-                  : "text"}
-            rows={f.rows ?? 3}
-            parseNumber={f.type === "number"}
-            sz={getCompactSize(f.sz ?? "md")}
-            variant={f.variant ?? "default"}
-            value={getFieldValue(f.name)}
-            onChange={(v: string | number) => setValue(f.name, v)}
-            onblur={() => blur(f.name)}
-            invalid={hasErr}
-            describedBy={errId}
-            autocomplete={f.type === "email" ? "email" : undefined}
-            inputmode={f.type === "email" ? "email" : undefined}
-          />
-        {/if}
-
-        {#if (touched[f.name] || validateOn !== "submit") && errors[f.name]?.length}
-          <ul
-            id={`${stableFormId}-err-${f.name}`}
-            class={cx("m-0 pl-4 list-none", compact && "text-center")}
-          >
-            {#each errors[f.name] ?? [] as m, idx (`${f.name}-${idx}`)}
-              <li
-                class={cx(
-                  "text-xs leading-tight mt-1 text-[var(--color-text-red)]",
-                  compact && "text-[10px]"
-                )}
-              >
-                {m}
-              </li>
-            {/each}
-          </ul>
-        {/if}
-      </div>
-    {/key}
-  {/each}
-</form>
-
-{#each toasts as t (t.id)}
-  <Toast
-    title={t.title}
-    message={t.message}
-    variant={t.variant}
-    onClose={() => removeToast(t.id)}
-  />
-{/each}

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

@@ -1,20 +0,0 @@
-import type { AlignText, LabelWeight, SizeKey, FieldSchema, FormApi, FormValues } from "./types";
-type Props = {
-    schema: FieldSchema[];
-    value?: FormValues;
-    rowGap?: number | SizeKey;
-    validateOn?: "input" | "blur" | "submit";
-    onChange?: (form: FormValues) => void;
-    onSubmit?: (form: FormValues, ctx: {
-        reset: () => void;
-    }) => void | Promise<void>;
-    formId?: string;
-    expose?: (api: FormApi) => void;
-    labelAlign?: AlignText;
-    labelWeight?: LabelWeight;
-    labelSize?: SizeKey;
-    compact?: boolean;
-};
-declare const Form: import("svelte").Component<Props, {}, "">;
-type Form = ReturnType<typeof Form>;
-export default Form;

package/dist/lib/Hamburger.svelte

@@ -1,211 +0,0 @@
-<!-- src/lib/Hamburger.svelte -->
-<script lang="ts">
-  /**
-   * @component Hamburger
-   * @description Off-canvas navigation drawer controlled by a floating hamburger button.
-   *
-   * @prop menuItems {Item[]} - Menu entries rendered in the drawer
-   * @default []
-   *
-   * @prop activeItem {string} - ID of the currently active item
-   * @default ""
-   *
-   * @prop header {Snippet} - Custom content rendered above the menu
-   *
-   * @prop footer {Snippet} - Custom content rendered below the menu
-   *
-   * @prop closeOnSelect {boolean} - Automatically closes after selecting an item
-   * @default true
-   *
-   * @prop onSelect {(id: string) => void} - Fired when a menu item is chosen
-   *
-   * @prop onOpenChange {(v: boolean) => void} - Fired when open state changes in controlled mode
-   *
-   * @prop pressed {boolean} - Controlled open state
-   *
-   * @prop class {string} - Extra classes applied to the trigger button
-   * @default ""
-   *
-   * @prop width {number | string} - Drawer width (px or CSS value)
-   * @default 300
-   *
-   * @note Clicking outside the panel or pressing `Escape` closes the drawer.
-   * @note Focus moves to the first interactive element inside the panel, is trapped while open, and returns to the trigger on close.
-   * @note In controlled mode (`pressed` is defined), state changes are requested via `onOpenChange(open)`.
-   * @note When `menuItems` is empty, a "No items" placeholder is shown.
-   * @note The drawer uses `role=\"dialog\"` and `aria-modal=\"true\"`; the trigger reflects state via `aria-expanded`.
-   */
-  import type { Snippet } from "svelte";
-  import type { Item } from "./types";
-  import { cx, throttle, focusFirstInteractive, trapFocus } from "../utils";
-
-  type Props = {
-    menuItems?: Item[];
-    activeItem?: string;
-    header?: Snippet;
-    footer?: Snippet;
-    closeOnSelect?: boolean;
-    onSelect?: (id: string) => void;
-    onOpenChange?: (v: boolean) => void;
-    pressed?: boolean;
-    class?: string;
-    width?: number | string;
-  };
-
-  let {
-    menuItems = [],
-    activeItem = "",
-    header,
-    footer,
-    closeOnSelect = true,
-    onSelect,
-    onOpenChange,
-    pressed,
-    class: externalClass = "",
-    width = 300,
-  }: Props = $props();
-
-  let triggerEl = $state<HTMLButtonElement | undefined>(undefined);
-  let panelEl = $state<HTMLDivElement | undefined>(undefined);
-  let releaseFocus: (() => void) | null = null;
-
-  let _open = $state(false);
-  const open = $derived(pressed ?? _open);
-
-  function setOpen(v: boolean) {
-    if (pressed === undefined) {
-      _open = v;
-    } else {
-      onOpenChange?.(v);
-    }
-  }
-
-  function toggle() {
-    setOpen(!open);
-  }
-
-  function closeMenu() {
-    setOpen(false);
-    queueMicrotask(() => triggerEl?.focus());
-  }
-
-  const throttledClose = throttle(() => closeMenu(), 150);
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape") throttledClose();
-  }
-
-  $effect(() => {
-    if (open && panelEl) {
-      queueMicrotask(() => {
-        focusFirstInteractive(panelEl!);
-      });
-      releaseFocus?.();
-      releaseFocus = trapFocus(panelEl);
-      document.addEventListener("keydown", handleKeydown);
-    } else {
-      releaseFocus?.();
-      releaseFocus = null;
-      document.removeEventListener("keydown", handleKeydown);
-    }
-
-    return () => {
-      document.removeEventListener("keydown", handleKeydown);
-      releaseFocus?.();
-      releaseFocus = null;
-    };
-  });
-
-  const triggerBase =
-    "fixed top-4 left-4 inline-flex items-center justify-center h-8 w-8 rounded-md border border-[var(--border-color-default)] bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] transition-colors z-[var(--z-modal)]";
-
-  const triggerClass = $derived(cx(triggerBase, externalClass));
-</script>
-
-<button
-  type="button"
-  aria-label="Toggle navigation"
-  aria-expanded={open}
-  class={triggerClass}
-  onclick={toggle}
-  bind:this={triggerEl}
->
-  <span class="relative block w-5 h-3.5">
-    <span
-      class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-200",
-        open ? "translate-y-[-50%] rotate-45" : "translate-y-[calc(-50%_-_6px)]"
-      )}
-    ></span>
-    <span
-      class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-opacity duration-200 translate-y-[-50%]",
-        open ? "opacity-0" : "opacity-100"
-      )}
-    ></span>
-    <span
-      class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-200",
-        open
-          ? "translate-y-[-50%] -rotate-45"
-          : "translate-y-[calc(-50%_+_6px)]"
-      )}
-    ></span>
-  </span>
-</button>
-
-{#if open}
-  <div class="fixed inset-0 z-[var(--z-overlay)] flex">
-    <div
-      role="dialog"
-      aria-modal="true"
-      tabindex="-1"
-      bind:this={panelEl}
-      class="flex flex-col h-full bg-[var(--color-bg-surface)] shadow-xl"
-      style={`width:${typeof width === "number" ? `${width}px` : width}`}
-    >
-      {#if header}
-        <div class="p-4 border-b border-[var(--border-color-default)]">
-          {@render header?.()}
-        </div>
-      {/if}
-
-      <div class="flex-1 overflow-y-auto" tabindex="-1">
-        {#if menuItems.length === 0}
-          <div class="text-xs opacity-70 px-3 py-2 text-center">No items</div>
-        {:else}
-          <ul class="grid gap-2 p-4">
-            {#each menuItems as it (it.id)}
-              <li>
-                <button
-                  type="button"
-                  class="w-full text-left px-3 py-2 rounded-md hover:bg-[var(--color-bg-hover)] focus:outline-[var(--border-color-focus)] focus:outline-2 transition-colors"
-                  aria-current={activeItem === it.id ? "page" : undefined}
-                  onclick={() => {
-                    onSelect?.(it.id);
-                    if (closeOnSelect) closeMenu();
-                  }}
-                >
-                  {it.label}
-                </button>
-              </li>
-            {/each}
-          </ul>
-        {/if}
-      </div>
-
-      {#if footer}
-        <div class="p-4 border-t border-[var(--border-color-default)]">
-          {@render footer?.()}
-        </div>
-      {/if}
-    </div>
-
-    <button
-      type="button"
-      class="flex-1 bg-black/40"
-      aria-hidden="true"
-      onclick={closeMenu}
-    ></button>
-  </div>
-{/if}