@svgrid/grid 1.2.22 → 1.2.24

package/dist/createListbox.svelte.js

@@ -0,0 +1,117 @@
+let uid = 0;
+/** Normalize a listbox value to an array (pure). */
+export function toSelectedArray(value, multiple) {
+    if (multiple)
+        return Array.isArray(value) ? [...value] : value == null ? [] : [value];
+    return value == null ? [] : [value];
+}
+export function createListbox(config) {
+    const id = `sv-lb-${uid++}`;
+    const opts = () => config.options();
+    const multiple = () => config.multiple?.() ?? false;
+    const disabled = () => config.disabled?.() ?? false;
+    let active = $state(0);
+    const selected = $derived(toSelectedArray(config.value(), multiple()));
+    const enabledIdx = $derived(opts().map((o, i) => (o.disabled ? -1 : i)).filter((i) => i >= 0));
+    // Keep the active index on an enabled option as options change.
+    $effect(() => {
+        const o = opts()[active];
+        if (!o || o.disabled)
+            active = enabledIdx[0] ?? 0;
+    });
+    const isSelected = (value) => selected.includes(value);
+    const isActive = (index) => index === active;
+    const optionId = (index) => `${id}-opt-${index}`;
+    function setActive(index) {
+        const o = opts()[index];
+        if (o && !o.disabled)
+            active = index;
+    }
+    function pick(index) {
+        const o = opts()[index];
+        if (!o || o.disabled || disabled())
+            return;
+        active = index;
+        if (multiple()) {
+            const set = new Set(selected);
+            set.has(o.value) ? set.delete(o.value) : set.add(o.value);
+            config.onChange?.([...set]);
+        }
+        else {
+            config.onChange?.(o.value);
+        }
+    }
+    function move(delta) {
+        const list = enabledIdx;
+        if (!list.length)
+            return;
+        const pos = list.indexOf(active);
+        const next = list[(pos + delta + list.length) % list.length];
+        if (next != null)
+            active = next;
+    }
+    const first = () => { active = enabledIdx[0] ?? 0; };
+    const last = () => { active = enabledIdx.at(-1) ?? 0; };
+    function onKeydown(e) {
+        if (disabled())
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                move(1);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                move(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                first();
+                break;
+            case 'End':
+                e.preventDefault();
+                last();
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                pick(active);
+                break;
+        }
+    }
+    return {
+        get activeIndex() { return active; },
+        get selectedValues() { return selected; },
+        isSelected,
+        isActive,
+        setActive,
+        pick,
+        move,
+        first,
+        last,
+        onKeydown,
+        rootProps: () => ({
+            role: 'listbox',
+            'aria-multiselectable': multiple(),
+            'aria-label': config.ariaLabel?.(),
+            'aria-disabled': disabled(),
+            'aria-activedescendant': opts()[active] ? optionId(active) : undefined,
+            tabindex: disabled() ? -1 : 0,
+            onkeydown: onKeydown,
+        }),
+        optionProps: (index) => {
+            const o = opts()[index];
+            return {
+                role: 'option',
+                id: optionId(index),
+                'aria-selected': o ? isSelected(o.value) : false,
+                'aria-disabled': o?.disabled,
+                'data-idx': index,
+                'data-active': isActive(index) ? '' : undefined,
+                'data-selected': o && isSelected(o.value) ? '' : undefined,
+                onclick: () => pick(index),
+                onpointermove: () => setActive(index),
+            };
+        },
+    };
+}

package/dist/createMaskedInput.svelte.d.ts

@@ -0,0 +1,30 @@
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type MaskedInputConfig = {
+    value: () => string;
+    /** Called with (masked, raw, complete). */
+    onChange?: (masked: string, raw: string, complete: boolean) => void;
+    mask?: () => string;
+    placeholder?: () => string | undefined;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createMaskedInput(config: MaskedInputConfig): {
+    /** The current masked display text. */
+    readonly masked: string;
+    /** The raw (unmasked) data characters. */
+    readonly raw: string;
+    /** Whether every token position in the mask is filled. */
+    readonly complete: boolean;
+    /** Spread onto the text input element. */
+    inputProps: () => {
+        value: string;
+        type: "text";
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        'aria-label': string | undefined;
+        oninput: (e: Event) => void;
+    };
+};
+export type MaskedInputCore = ReturnType<typeof createMaskedInput>;

package/dist/createMaskedInput.svelte.js

@@ -0,0 +1,62 @@
+/**
+ * createMaskedInput - the HEADLESS core behind <SvMaskedInput>: a runes-based
+ * state machine that owns the pattern-mask formatting (#=digit, A=letter,
+ * *=alnum; other chars are literals) via the pure `./datetime/mask` engine,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createMaskedInput } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const mi = createMaskedInput({ value: () => value, mask: () => '(###) ###-####', onChange: (m) => (value = m) })
+ * </script>
+ * <input {...mi.inputProps()} />
+ * ```
+ *
+ * The styled <SvMaskedInput> is just one renderer over this core.
+ */
+import { applyMask, unmask, isMaskComplete } from './datetime/mask';
+export function createMaskedInput(config) {
+    const mask = () => config.mask?.() ?? '';
+    const disabled = () => config.disabled?.() ?? false;
+    const readonly = () => config.readonly?.() ?? false;
+    let text = $state('');
+    let lastRaw = '';
+    // Reflect controlled `value` into the masked display text.
+    $effect(() => {
+        const m = mask();
+        const raw = m ? unmask(config.value(), m) : config.value();
+        if (raw !== lastRaw) {
+            lastRaw = raw;
+            text = m ? applyMask(raw, m).formatted : config.value();
+        }
+    });
+    function onInput(e) {
+        const el = e.currentTarget;
+        const m = mask();
+        const raw = m ? unmask(el.value, m) : el.value;
+        const masked = m ? applyMask(raw, m).formatted : el.value;
+        lastRaw = raw;
+        text = masked;
+        el.value = masked;
+        config.onChange?.(masked, raw, m ? isMaskComplete(masked, m) : true);
+    }
+    return {
+        /** The current masked display text. */
+        get masked() { return text; },
+        /** The raw (unmasked) data characters. */
+        get raw() { return mask() ? unmask(text, mask()) : text; },
+        /** Whether every token position in the mask is filled. */
+        get complete() { return mask() ? isMaskComplete(text, mask()) : true; },
+        /** Spread onto the text input element. */
+        inputProps: () => ({
+            value: text,
+            type: 'text',
+            placeholder: config.placeholder?.() ?? mask(),
+            disabled: disabled(),
+            readonly: readonly(),
+            'aria-label': config.ariaLabel?.(),
+            oninput: onInput,
+        }),
+    };
+}

package/dist/createNumberInput.svelte.d.ts

@@ -0,0 +1,72 @@
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type NumberInputConfig = {
+    value: () => number | null;
+    onChange?: (value: number | null) => void;
+    min?: () => number;
+    max?: () => number;
+    step?: () => number;
+    precision?: () => number | undefined;
+    /** Group thousands (1,234) on display. */
+    grouping?: () => boolean;
+    prefix?: () => string;
+    suffix?: () => string;
+    placeholder?: () => string | undefined;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    id?: () => string | undefined;
+    invalid?: () => boolean;
+    required?: () => boolean;
+    error?: () => string | undefined;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createNumberInput(config: NumberInputConfig): {
+    /** The current display text (bind this to your input's value). */
+    readonly text: string;
+    /** Whether the field is being edited. */
+    readonly focused: boolean;
+    /** Whether interaction is allowed (not disabled and not readonly). */
+    readonly isInteractive: boolean;
+    commit: () => void;
+    bump: (dir: 1 | -1) => void;
+    increment: () => void;
+    decrement: () => void;
+    /** Spread onto the text input element. */
+    inputProps: () => {
+        oninput: (e: Event) => void;
+        onfocus: () => void;
+        onblur: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+        'aria-invalid': "true" | undefined;
+        'aria-required': "true" | undefined;
+        'aria-describedby': string | undefined;
+        'aria-label': string | undefined;
+        id: string | undefined;
+        value: string;
+        type: "text";
+        inputmode: "decimal";
+        role: "spinbutton";
+        placeholder: string | undefined;
+        disabled: boolean;
+        readonly: boolean;
+        'aria-valuenow': number | undefined;
+        'aria-valuemin': number | undefined;
+        'aria-valuemax': number | undefined;
+    };
+    /** Spread onto a native increment button. */
+    incrementProps: () => {
+        type: "button";
+        'aria-label': string;
+        disabled: boolean;
+        tabindex: number;
+        onclick: () => void;
+    };
+    /** Spread onto a native decrement button. */
+    decrementProps: () => {
+        type: "button";
+        'aria-label': string;
+        disabled: boolean;
+        tabindex: number;
+        onclick: () => void;
+    };
+};
+export type NumberInputCore = ReturnType<typeof createNumberInput>;

package/dist/createNumberInput.svelte.js

@@ -0,0 +1,167 @@
+/**
+ * createNumberInput - the HEADLESS core behind <SvNumberInput>, in the same
+ * spirit as `createListbox` / `createSvGrid`: a runes-based state machine that
+ * owns parse / format / clamp / spinner state + keyboard, exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createNumberInput } from '@svgrid/grid'
+ *   let value = $state<number | null>(0)
+ *   const num = createNumberInput({ value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...num.inputProps()} />
+ * <button {...num.incrementProps()}>+</button>
+ * <button {...num.decrementProps()}>-</button>
+ * ```
+ *
+ * The styled <SvNumberInput> is just one renderer over this core.
+ */
+import { editorAria } from './editor-contract';
+export function createNumberInput(config) {
+    const min = () => config.min?.() ?? -Infinity;
+    const max = () => config.max?.() ?? Infinity;
+    const step = () => config.step?.() ?? 1;
+    const precision = () => config.precision?.();
+    const grouping = () => config.grouping?.() ?? false;
+    const prefix = () => config.prefix?.() ?? '';
+    const suffix = () => config.suffix?.() ?? '';
+    const disabled = () => config.disabled?.() ?? false;
+    const readonly = () => config.readonly?.() ?? false;
+    const isInteractive = $derived(!disabled() && !readonly());
+    let text = $state('');
+    let focused = $state(false);
+    let lastKey = '';
+    const fmt = $derived(new Intl.NumberFormat(undefined, {
+        useGrouping: grouping(),
+        minimumFractionDigits: precision() ?? 0,
+        maximumFractionDigits: precision() ?? 20,
+    }));
+    function display(v) {
+        if (v == null)
+            return '';
+        return `${prefix()}${fmt.format(v)}${suffix()}`;
+    }
+    // Reflect controlled `value` into the display text unless the user is editing.
+    $effect(() => {
+        const v = config.value();
+        const key = v == null ? 'null' : String(v);
+        if (key !== lastKey) {
+            lastKey = key;
+            if (!focused)
+                text = display(v);
+        }
+    });
+    function clamp(n) {
+        let r = Math.min(max(), Math.max(min(), n));
+        const p = precision();
+        if (p != null)
+            r = Math.round(r * 10 ** p) / 10 ** p;
+        return r;
+    }
+    function parse(s) {
+        const cleaned = s.replace(prefix(), '').replace(suffix(), '').replace(/[,\s]/g, '').trim();
+        if (cleaned === '' || cleaned === '-')
+            return null;
+        const n = Number(cleaned);
+        return isNaN(n) ? null : n;
+    }
+    function commit() {
+        const parsed = parse(text);
+        const next = parsed == null ? null : clamp(parsed);
+        lastKey = next == null ? 'null' : String(next);
+        config.onChange?.(next);
+        text = display(next);
+    }
+    function bump(dir) {
+        if (!isInteractive)
+            return;
+        const base = parse(text) ?? 0;
+        const next = clamp(base + dir * step());
+        lastKey = String(next);
+        config.onChange?.(next);
+        text = focused ? String(next) : display(next);
+    }
+    const increment = () => bump(1);
+    const decrement = () => bump(-1);
+    function onFocus() {
+        focused = true;
+        // Show the bare number for easy editing.
+        const v = config.value();
+        text = v == null ? '' : String(v);
+    }
+    function onBlur() {
+        focused = false;
+        commit();
+    }
+    function onInput(e) {
+        text = e.currentTarget.value;
+    }
+    function onKeydown(e) {
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            bump(1);
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            bump(-1);
+        }
+        else if (e.key === 'Enter') {
+            commit();
+        }
+    }
+    const ariaState = () => ({
+        id: config.id?.(),
+        invalid: config.invalid?.(),
+        required: config.required?.(),
+        error: config.error?.(),
+        ariaLabel: config.ariaLabel?.(),
+    });
+    return {
+        /** The current display text (bind this to your input's value). */
+        get text() { return text; },
+        /** Whether the field is being edited. */
+        get focused() { return focused; },
+        /** Whether interaction is allowed (not disabled and not readonly). */
+        get isInteractive() { return isInteractive; },
+        commit,
+        bump,
+        increment,
+        decrement,
+        /** Spread onto the text input element. */
+        inputProps: () => ({
+            id: config.id?.(),
+            value: text,
+            type: 'text',
+            inputmode: 'decimal',
+            role: 'spinbutton',
+            placeholder: config.placeholder?.(),
+            disabled: disabled(),
+            readonly: readonly(),
+            'aria-valuenow': config.value() ?? undefined,
+            'aria-valuemin': min() === -Infinity ? undefined : min(),
+            'aria-valuemax': max() === Infinity ? undefined : max(),
+            ...editorAria(ariaState()),
+            oninput: onInput,
+            onfocus: onFocus,
+            onblur: onBlur,
+            onkeydown: onKeydown,
+        }),
+        /** Spread onto a native increment button. */
+        incrementProps: () => ({
+            type: 'button',
+            'aria-label': 'Increment',
+            disabled: !isInteractive,
+            tabindex: -1,
+            onclick: increment,
+        }),
+        /** Spread onto a native decrement button. */
+        decrementProps: () => ({
+            type: 'button',
+            'aria-label': 'Decrement',
+            disabled: !isInteractive,
+            tabindex: -1,
+            onclick: decrement,
+        }),
+    };
+}

package/dist/createPasswordInput.svelte.d.ts

@@ -0,0 +1,60 @@
+/**
+ * createPasswordInput - the HEADLESS core behind <SvPasswordInput>: a runes-based
+ * state machine that owns the reveal toggle + a 4-level strength heuristic,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createPasswordInput } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const pw = createPasswordInput({ value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...pw.inputProps()} />
+ * <button {...pw.toggleProps()}>{pw.revealed ? 'Hide' : 'Show'}</button>
+ * ```
+ *
+ * The styled <SvPasswordInput> is just one renderer over this core.
+ */
+export declare const STRENGTH_LABELS: string[];
+/** Score a password 0-4 by length + character-class variety (pure). */
+export declare function passwordStrength(v: string): number;
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type PasswordInputConfig = {
+    value: () => string;
+    onChange?: (value: string) => void;
+    placeholder?: () => string | undefined;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    ariaLabel?: () => string | undefined;
+    autocomplete?: () => string | undefined;
+};
+export declare function createPasswordInput(config: PasswordInputConfig): {
+    /** Whether the value is currently shown as plain text. */
+    readonly revealed: boolean;
+    /** Strength score, 0-4. */
+    readonly strength: number;
+    /** Human label for the strength score. */
+    readonly strengthLabel: string | undefined;
+    toggle: () => boolean;
+    /** Spread onto the text/password input element. */
+    inputProps: () => {
+        value: string;
+        type: "text" | "password";
+        placeholder: string | undefined;
+        disabled: boolean;
+        readonly: boolean;
+        autocomplete: AutoFill;
+        'aria-label': string | undefined;
+        oninput: (e: Event) => void;
+    };
+    /** Spread onto the reveal (show/hide) toggle button. */
+    toggleProps: () => {
+        type: "button";
+        'aria-label': string;
+        'aria-pressed': boolean;
+        disabled: boolean;
+        tabindex: number;
+        onclick: () => boolean;
+    };
+};
+export type PasswordInputCore = ReturnType<typeof createPasswordInput>;

package/dist/createPasswordInput.svelte.js

@@ -0,0 +1,72 @@
+/**
+ * createPasswordInput - the HEADLESS core behind <SvPasswordInput>: a runes-based
+ * state machine that owns the reveal toggle + a 4-level strength heuristic,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createPasswordInput } from '@svgrid/grid'
+ *   let value = $state('')
+ *   const pw = createPasswordInput({ value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...pw.inputProps()} />
+ * <button {...pw.toggleProps()}>{pw.revealed ? 'Hide' : 'Show'}</button>
+ * ```
+ *
+ * The styled <SvPasswordInput> is just one renderer over this core.
+ */
+export const STRENGTH_LABELS = ['', 'Weak', 'Fair', 'Good', 'Strong'];
+/** Score a password 0-4 by length + character-class variety (pure). */
+export function passwordStrength(v) {
+    if (!v)
+        return 0;
+    let score = 0;
+    if (v.length >= 8)
+        score++;
+    if (/[a-z]/.test(v) && /[A-Z]/.test(v))
+        score++;
+    if (/\d/.test(v))
+        score++;
+    if (/[^a-zA-Z0-9]/.test(v))
+        score++;
+    return score;
+}
+export function createPasswordInput(config) {
+    const disabled = () => config.disabled?.() ?? false;
+    const readonly = () => config.readonly?.() ?? false;
+    let revealed = $state(false);
+    const strength = $derived(passwordStrength(config.value()));
+    function onInput(e) {
+        config.onChange?.(e.currentTarget.value);
+    }
+    const toggle = () => (revealed = !revealed);
+    return {
+        /** Whether the value is currently shown as plain text. */
+        get revealed() { return revealed; },
+        /** Strength score, 0-4. */
+        get strength() { return strength; },
+        /** Human label for the strength score. */
+        get strengthLabel() { return STRENGTH_LABELS[strength]; },
+        toggle,
+        /** Spread onto the text/password input element. */
+        inputProps: () => ({
+            value: config.value(),
+            type: (revealed ? 'text' : 'password'),
+            placeholder: config.placeholder?.(),
+            disabled: disabled(),
+            readonly: readonly(),
+            autocomplete: (config.autocomplete?.() ?? 'current-password'),
+            'aria-label': config.ariaLabel?.(),
+            oninput: onInput,
+        }),
+        /** Spread onto the reveal (show/hide) toggle button. */
+        toggleProps: () => ({
+            type: 'button',
+            'aria-label': revealed ? 'Hide password' : 'Show password',
+            'aria-pressed': revealed,
+            disabled: disabled(),
+            tabindex: -1,
+            onclick: toggle,
+        }),
+    };
+}

package/dist/createPhoneInput.svelte.d.ts

@@ -0,0 +1,46 @@
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type PhoneInputConfig = {
+    value: () => string;
+    onChange?: (value: string, parts: {
+        country: string;
+        dial: string;
+        national: string;
+    }) => void;
+    /** Default country ISO code. */
+    country?: () => string;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    placeholder?: () => string | undefined;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createPhoneInput(config: PhoneInputConfig): {
+    /** Selected country ISO code. */
+    readonly iso: string;
+    /** Dial code for the selected country (e.g. `+1`). */
+    readonly dial: string;
+    /** Flag emoji for the selected country. */
+    readonly flag: string;
+    /** National number formatted for display. */
+    readonly displayNational: string;
+    /** The full emitted value (`+<dial><digits>`). */
+    readonly value: string;
+    /** Spread onto the country `<select>` element. */
+    selectProps: () => {
+        value: string;
+        disabled: boolean;
+        'aria-label': string;
+        onchange: (e: Event) => void;
+    };
+    /** Spread onto the national number input element. */
+    inputProps: () => {
+        value: string;
+        type: "tel";
+        inputmode: "tel";
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        'aria-label': string;
+        oninput: (e: Event) => void;
+    };
+};
+export type PhoneInputCore = ReturnType<typeof createPhoneInput>;