@svgrid/grid 1.2.23 → 1.2.25

package/dist/createCombobox.svelte.d.ts

@@ -0,0 +1,102 @@
+/**
+ * createCombobox - the HEADLESS core behind <SvComboBox>, in the same spirit as
+ * `createListbox` / `createSvGrid`: a runes-based state machine (type-to-filter,
+ * roving active index, full keyboard, unmatched-text revert) exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM, no portal
+ * or measurement - those render concerns stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCombobox } from '@svgrid/grid'
+ *   let value = $state<string | null>(null)
+ *   const cb = createCombobox({ options: () => options, value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...cb.inputProps()} />
+ * {#if cb.open}
+ *   <ul {...cb.listboxProps()}>
+ *     {#each cb.filtered as opt, i (opt.value)}<li {...cb.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { type ListOption } from './list-option';
+export type ComboboxValue = string | number | null;
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type ComboboxConfig = {
+    options: () => ReadonlyArray<ListOption>;
+    value: () => ComboboxValue;
+    onChange?: (value: ComboboxValue) => void;
+    disabled?: () => boolean;
+    ariaLabel?: () => string | undefined;
+    /** DOM focus hooks provided by the renderer; the core itself never touches the DOM. */
+    focusInput?: () => void;
+    blurInput?: () => void;
+};
+export declare function createCombobox(config: ComboboxConfig): {
+    /** Panel open state. */
+    readonly open: boolean;
+    /** Highlighted option index into `filtered`. */
+    readonly activeIndex: number;
+    /** True while the user is typing a filter query. */
+    readonly editing: boolean;
+    /** Current filter query text. */
+    readonly query: string;
+    /** Options after the live substring filter. */
+    readonly filtered: ListOption[];
+    /** The option matching the controlled value, if any. */
+    readonly selected: ListOption | null;
+    /** Text shown in the field (query while editing, else the selected label). */
+    readonly shownText: string;
+    /** Controlled value. */
+    readonly value: ComboboxValue;
+    /** id of the listbox element (matches inputProps `aria-controls`). */
+    listId: string;
+    isActive: (i: number) => boolean;
+    isSelected: (o: ListOption) => boolean;
+    setActive: (i: number) => void;
+    openPanel: () => void;
+    close: (revert?: boolean) => void;
+    toggle: () => void;
+    pick: (o: ListOption | undefined) => void;
+    onInput: (e: Event) => void;
+    onFocus: () => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Spread onto the editable <input>. */
+    inputProps: () => {
+        role: "combobox";
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-autocomplete': "list";
+        'aria-label': string | undefined;
+        value: string;
+        disabled: boolean;
+        oninput: (e: Event) => void;
+        onfocus: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** Spread onto the chevron/toggle <button>. */
+    triggerProps: () => {
+        type: "button";
+        tabindex: number;
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** Spread onto the listbox container. */
+    listboxProps: () => {
+        id: string;
+        role: "listbox";
+    };
+    /** Spread onto the option at `index` (index into `filtered`). */
+    optionProps: (index: number) => {
+        role: "option";
+        id: string;
+        tabindex: number;
+        'aria-selected': boolean;
+        'aria-disabled': boolean | undefined;
+        'data-idx': number;
+        onclick: () => void;
+        onpointermove: () => void;
+    };
+};
+export type Combobox = ReturnType<typeof createCombobox>;

package/dist/createCombobox.svelte.js

@@ -0,0 +1,171 @@
+/**
+ * createCombobox - the HEADLESS core behind <SvComboBox>, in the same spirit as
+ * `createListbox` / `createSvGrid`: a runes-based state machine (type-to-filter,
+ * roving active index, full keyboard, unmatched-text revert) exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM, no portal
+ * or measurement - those render concerns stay in the styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCombobox } from '@svgrid/grid'
+ *   let value = $state<string | null>(null)
+ *   const cb = createCombobox({ options: () => options, value: () => value, onChange: (v) => (value = v) })
+ * </script>
+ * <input {...cb.inputProps()} />
+ * {#if cb.open}
+ *   <ul {...cb.listboxProps()}>
+ *     {#each cb.filtered as opt, i (opt.value)}<li {...cb.optionProps(i)}>{opt.label}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { filterOptions } from './list-option';
+let uid = 0;
+export function createCombobox(config) {
+    const id = `sv-combo-${uid++}`;
+    const listId = `${id}-list`;
+    const opts = () => config.options();
+    const disabled = () => config.disabled?.() ?? false;
+    let open = $state(false);
+    let query = $state('');
+    let active = $state(0);
+    let editing = $state(false);
+    const selected = $derived(opts().find((o) => o.value === config.value()) ?? null);
+    const filtered = $derived(editing ? filterOptions(opts(), query) : [...opts()]);
+    const shownText = $derived(editing ? query : selected?.label ?? '');
+    // While not actively editing, keep the shown text in sync with the selection.
+    $effect(() => { if (!editing)
+        query = selected?.label ?? ''; });
+    const optionId = (i) => `${listId}-opt-${i}`;
+    function openPanel() { if (disabled() || open)
+        return; open = true; active = 0; }
+    function close(revert = true) {
+        open = false;
+        editing = false;
+        if (revert)
+            query = selected?.label ?? '';
+    }
+    function toggle() { if (open) {
+        close();
+    }
+    else {
+        config.focusInput?.();
+        openPanel();
+    } }
+    function pick(o) {
+        if (!o || o.disabled)
+            return;
+        config.onChange?.(o.value);
+        query = o.label;
+        editing = false;
+        open = false;
+        config.blurInput?.();
+    }
+    function setActive(i) { const o = filtered[i]; if (o && !o.disabled)
+        active = i; }
+    function onInput(e) {
+        query = e.currentTarget.value;
+        editing = true;
+        active = 0;
+        if (!open)
+            openPanel();
+    }
+    function onFocus() { editing = true; query = selected?.label ?? ''; openPanel(); }
+    function onKeydown(e) {
+        if (disabled())
+            return;
+        if (!open && e.key === 'ArrowDown') {
+            e.preventDefault();
+            editing = true;
+            openPanel();
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            active = Math.min(active + 1, filtered.length - 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            active = Math.max(active - 1, 0);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            pick(filtered[active]);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+        }
+    }
+    return {
+        /** Panel open state. */
+        get open() { return open; },
+        /** Highlighted option index into `filtered`. */
+        get activeIndex() { return active; },
+        /** True while the user is typing a filter query. */
+        get editing() { return editing; },
+        /** Current filter query text. */
+        get query() { return query; },
+        /** Options after the live substring filter. */
+        get filtered() { return filtered; },
+        /** The option matching the controlled value, if any. */
+        get selected() { return selected; },
+        /** Text shown in the field (query while editing, else the selected label). */
+        get shownText() { return shownText; },
+        /** Controlled value. */
+        get value() { return config.value(); },
+        /** id of the listbox element (matches inputProps `aria-controls`). */
+        listId,
+        isActive: (i) => i === active,
+        isSelected: (o) => o.value === config.value(),
+        setActive,
+        openPanel,
+        close,
+        toggle,
+        pick,
+        onInput,
+        onFocus,
+        onKeydown,
+        /** Spread onto the editable <input>. */
+        inputProps: () => ({
+            role: 'combobox',
+            'aria-expanded': open,
+            'aria-controls': listId,
+            'aria-autocomplete': 'list',
+            'aria-label': config.ariaLabel?.(),
+            value: shownText,
+            disabled: disabled(),
+            oninput: onInput,
+            onfocus: onFocus,
+            onkeydown: onKeydown,
+        }),
+        /** Spread onto the chevron/toggle <button>. */
+        triggerProps: () => ({
+            type: 'button',
+            tabindex: -1,
+            'aria-label': 'Toggle',
+            disabled: disabled(),
+            onclick: toggle,
+        }),
+        /** Spread onto the listbox container. */
+        listboxProps: () => ({
+            id: listId,
+            role: 'listbox',
+        }),
+        /** Spread onto the option at `index` (index into `filtered`). */
+        optionProps: (index) => {
+            const o = filtered[index];
+            return {
+                role: 'option',
+                id: optionId(index),
+                tabindex: -1,
+                'aria-selected': o ? o.value === config.value() : false,
+                'aria-disabled': o?.disabled,
+                'data-idx': index,
+                onclick: () => pick(o),
+                onpointermove: () => { if (o && !o.disabled)
+                    active = index; },
+            };
+        },
+    };
+}

package/dist/createCountryInput.svelte.d.ts

@@ -0,0 +1,86 @@
+/**
+ * createCountryInput - the HEADLESS core behind <SvCountryInput>: a searchable
+ * country picker (search by name, dial code, or ISO code; roving active index +
+ * keyboard) that emits the ISO 3166-1 alpha-2 code. Exposed as **prop-getters**
+ * you spread onto YOUR OWN markup. No styles/DOM/portal - those stay in the
+ * styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCountryInput, flagEmoji } from '@svgrid/grid'
+ *   let value = $state<string | null>(null)
+ *   const ci = createCountryInput({ value: () => value, onChange: (c) => (value = c) })
+ * </script>
+ * <button {...ci.triggerProps()}>{ci.selected?.name ?? 'Select'}</button>
+ * {#if ci.open}
+ *   <input {...ci.searchProps()} />
+ *   <ul {...ci.listboxProps()}>
+ *     {#each ci.filtered as c, i (c.code)}<li {...ci.optionProps(i)}>{c.name}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { type Country } from './countries';
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type CountryInputConfig = {
+    value: () => string | null;
+    onChange?: (code: string) => void;
+    disabled?: () => boolean;
+    ariaLabel?: () => string | undefined;
+    /** DOM focus hook provided by the renderer; the core never touches the DOM. */
+    focusTrigger?: () => void;
+};
+export declare function createCountryInput(config: CountryInputConfig): {
+    /** Panel open state. */
+    readonly open: boolean;
+    /** Highlighted country index into `filtered`. */
+    readonly activeIndex: number;
+    /** Current search query. */
+    readonly query: string;
+    /** Countries after the current search filter. */
+    readonly filtered: Country[];
+    /** The selected country, if any. */
+    readonly selected: Country | null;
+    /** Controlled value (ISO alpha-2 code). */
+    readonly value: string | null;
+    isActive: (i: number) => boolean;
+    isSelected: (code: string) => boolean;
+    setActive: (i: number) => void;
+    setQuery: (v: string) => void;
+    openPanel: () => void;
+    close: () => void;
+    toggle: () => void;
+    pick: (code: string) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Spread onto the trigger <button>. */
+    triggerProps: () => {
+        type: "button";
+        'aria-haspopup': "listbox";
+        'aria-expanded': boolean;
+        'aria-label': string | undefined;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** Spread onto the search <input> inside the panel. */
+    searchProps: () => {
+        type: "text";
+        value: string;
+        'aria-label': string;
+        oninput: (e: Event) => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** Spread onto the listbox container. */
+    listboxProps: () => {
+        role: "listbox";
+    };
+    /** Spread onto the country option at `index` (index into `filtered`). */
+    optionProps: (index: number) => {
+        role: "option";
+        tabindex: number;
+        'aria-selected': boolean;
+        'data-idx': number;
+        onclick: () => void;
+        onpointermove: () => void;
+    };
+};
+export type CountryInput = ReturnType<typeof createCountryInput>;

package/dist/createCountryInput.svelte.js

@@ -0,0 +1,126 @@
+/**
+ * createCountryInput - the HEADLESS core behind <SvCountryInput>: a searchable
+ * country picker (search by name, dial code, or ISO code; roving active index +
+ * keyboard) that emits the ISO 3166-1 alpha-2 code. Exposed as **prop-getters**
+ * you spread onto YOUR OWN markup. No styles/DOM/portal - those stay in the
+ * styled component.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createCountryInput, flagEmoji } from '@svgrid/grid'
+ *   let value = $state<string | null>(null)
+ *   const ci = createCountryInput({ value: () => value, onChange: (c) => (value = c) })
+ * </script>
+ * <button {...ci.triggerProps()}>{ci.selected?.name ?? 'Select'}</button>
+ * {#if ci.open}
+ *   <input {...ci.searchProps()} />
+ *   <ul {...ci.listboxProps()}>
+ *     {#each ci.filtered as c, i (c.code)}<li {...ci.optionProps(i)}>{c.name}</li>{/each}
+ *   </ul>
+ * {/if}
+ * ```
+ */
+import { COUNTRIES, COUNTRY_BY_CODE } from './countries';
+export function createCountryInput(config) {
+    const disabled = () => config.disabled?.() ?? false;
+    let open = $state(false);
+    let query = $state('');
+    let active = $state(0);
+    const selected = $derived(config.value() ? COUNTRY_BY_CODE.get(config.value()) ?? null : null);
+    const filtered = $derived(query.trim() === ''
+        ? COUNTRIES
+        : COUNTRIES.filter((c) => c.name.toLowerCase().includes(query.toLowerCase()) ||
+            c.dial.includes(query) ||
+            c.code.toLowerCase() === query.toLowerCase()));
+    function openPanel() { if (disabled() || open)
+        return; open = true; query = ''; active = 0; }
+    function close() { open = false; config.focusTrigger?.(); }
+    function toggle() { if (open) {
+        open = false;
+    }
+    else {
+        openPanel();
+    } }
+    function pick(code) { config.onChange?.(code); open = false; config.focusTrigger?.(); }
+    function setQuery(v) { query = v; active = 0; }
+    function onSearchInput(e) { setQuery(e.currentTarget.value); }
+    function onKeydown(e) {
+        if (!open)
+            return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            active = Math.min(active + 1, filtered.length - 1);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            active = Math.max(active - 1, 0);
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            const c = filtered[active];
+            if (c)
+                pick(c.code);
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            close();
+        }
+    }
+    return {
+        /** Panel open state. */
+        get open() { return open; },
+        /** Highlighted country index into `filtered`. */
+        get activeIndex() { return active; },
+        /** Current search query. */
+        get query() { return query; },
+        /** Countries after the current search filter. */
+        get filtered() { return filtered; },
+        /** The selected country, if any. */
+        get selected() { return selected; },
+        /** Controlled value (ISO alpha-2 code). */
+        get value() { return config.value(); },
+        isActive: (i) => i === active,
+        isSelected: (code) => code === config.value(),
+        setActive: (i) => { active = i; },
+        setQuery,
+        openPanel,
+        close,
+        toggle,
+        pick,
+        onKeydown,
+        /** Spread onto the trigger <button>. */
+        triggerProps: () => ({
+            type: 'button',
+            'aria-haspopup': 'listbox',
+            'aria-expanded': open,
+            'aria-label': config.ariaLabel?.(),
+            disabled: disabled(),
+            onclick: toggle,
+        }),
+        /** Spread onto the search <input> inside the panel. */
+        searchProps: () => ({
+            type: 'text',
+            value: query,
+            'aria-label': 'Search countries',
+            oninput: onSearchInput,
+            onkeydown: onKeydown,
+        }),
+        /** Spread onto the listbox container. */
+        listboxProps: () => ({
+            role: 'listbox',
+        }),
+        /** Spread onto the country option at `index` (index into `filtered`). */
+        optionProps: (index) => {
+            const c = filtered[index];
+            return {
+                role: 'option',
+                tabindex: -1,
+                'aria-selected': c ? c.code === config.value() : false,
+                'data-idx': index,
+                onclick: () => { if (c)
+                    pick(c.code); },
+                onpointermove: () => { active = index; },
+            };
+        },
+    };
+}

package/dist/createDateTimePicker.svelte.d.ts

@@ -0,0 +1,83 @@
+import { type DateLike } from './datetime/date-core';
+export type DateTimeValue = Date | string | number | null;
+export type DropDownDisplayMode = 'both' | 'calendar' | 'time';
+export type DateTimeTab = 'date' | 'time';
+/** Reactive inputs are getters; callbacks are closures. */
+export type DateTimePickerConfig = {
+    value: () => DateTimeValue;
+    onChange?: (value: Date | null) => void;
+    /** Fired when the value is finalized (Enter, blur, or a single-date pick). */
+    onCommit?: (value: Date | null) => void;
+    /** Fired on Escape / dismiss without committing. */
+    onCancel?: () => void;
+    formatString?: () => string;
+    min?: () => DateLike | null;
+    max?: () => DateLike | null;
+    nullable?: () => boolean;
+    locale?: () => string;
+    dropDownDisplayMode?: () => DropDownDisplayMode;
+    spinButtons?: () => boolean;
+    stepMinutes?: () => number;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+};
+export declare function createDateTimePicker(config: DateTimePickerConfig): {
+    readonly current: Date | null;
+    text: string;
+    readonly open: boolean;
+    readonly tab: DateTimeTab;
+    readonly isInteractive: boolean;
+    readonly showDateTab: boolean;
+    readonly showTimeTab: boolean;
+    commit: (next: Date | null) => void;
+    commitFromText: () => void;
+    bump: (deltaMin: number) => void;
+    onCalendarChange: (dates: Date[]) => void;
+    onTimeChange: (t: Date) => void;
+    openPanel: () => void;
+    closePanel: () => void;
+    toggle: () => void;
+    setTab: (t: DateTimeTab) => void;
+    onInputKeydown: (e: KeyboardEvent) => void;
+    /** The text field: masked value round-trips through the token engine. Spread
+     *  alongside `bind:value={dtp.text}`. */
+    inputProps(): {
+        type: "text";
+        disabled: boolean;
+        readonly: boolean;
+        onblur: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** The calendar-toggle button. */
+    toggleProps(): {
+        type: "button";
+        'aria-label': string;
+        'aria-haspopup': "dialog";
+        'aria-expanded': boolean;
+        disabled: boolean;
+        tabindex: number;
+        onclick: () => void;
+    };
+    /** The inline clear (x) button (nullable values). */
+    clearProps(): {
+        type: "button";
+        'aria-label': string;
+        onclick: () => void;
+    };
+    /** A spin (increment/decrement) button that steps by `stepMinutes`. */
+    spinProps(dir: 1 | -1): {
+        type: "button";
+        tabindex: number;
+        'aria-label': string;
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** A DATE / TIME tab button. */
+    tabProps(which: DateTimeTab): {
+        type: "button";
+        role: "tab";
+        'aria-selected': boolean;
+        onclick: () => void;
+    };
+};
+export type DateTimePicker = ReturnType<typeof createDateTimePicker>;