@llui/components 0.0.1

package/dist/components/number-input.js

@@ -0,0 +1,178 @@
+export function init(opts = {}) {
+    const value = opts.value ?? null;
+    return {
+        value,
+        min: opts.min ?? -Infinity,
+        max: opts.max ?? Infinity,
+        step: opts.step ?? 1,
+        disabled: opts.disabled ?? false,
+        readOnly: opts.readOnly ?? false,
+        rawText: value === null ? '' : String(value),
+    };
+}
+function clamp(n, min, max) {
+    if (n < min)
+        return min;
+    if (n > max)
+        return max;
+    return n;
+}
+function snap(n, step, anchor = 0) {
+    if (step <= 0)
+        return n;
+    const origin = isFinite(anchor) ? anchor : 0;
+    const decimals = decimalPlaces(step);
+    const steps = Math.round((n - origin) / step);
+    const snapped = origin + steps * step;
+    return Number(snapped.toFixed(decimals));
+}
+function decimalPlaces(n) {
+    if (Math.floor(n) === n)
+        return 0;
+    const str = n.toString();
+    const dot = str.indexOf('.');
+    return dot === -1 ? 0 : str.length - dot - 1;
+}
+export function update(state, msg) {
+    if (msg.type !== 'setDisabled' && (state.disabled || state.readOnly)) {
+        // Allow setRawText for controlled typing? No — disabled means no interaction.
+        return [state, []];
+    }
+    switch (msg.type) {
+        case 'setValue': {
+            const v = msg.value === null
+                ? null
+                : clamp(snap(msg.value, state.step, state.min), state.min, state.max);
+            return [{ ...state, value: v, rawText: v === null ? '' : String(v) }, []];
+        }
+        case 'setRawText':
+            return [{ ...state, rawText: msg.text }, []];
+        case 'commit': {
+            const parsed = parseFloat(state.rawText);
+            if (isNaN(parsed))
+                return [{ ...state, rawText: state.value === null ? '' : String(state.value) }, []];
+            const v = clamp(snap(parsed, state.step, state.min), state.min, state.max);
+            return [{ ...state, value: v, rawText: String(v) }, []];
+        }
+        case 'increment': {
+            const base = state.value ?? 0;
+            const raw = base + state.step * (msg.multiplier ?? 1);
+            const decimals = decimalPlaces(state.step);
+            const v = clamp(Number(raw.toFixed(decimals)), state.min, state.max);
+            return [{ ...state, value: v, rawText: String(v) }, []];
+        }
+        case 'decrement': {
+            const base = state.value ?? 0;
+            const raw = base - state.step * (msg.multiplier ?? 1);
+            const decimals = decimalPlaces(state.step);
+            const v = clamp(Number(raw.toFixed(decimals)), state.min, state.max);
+            return [{ ...state, value: v, rawText: String(v) }, []];
+        }
+        case 'toMin':
+            return [{ ...state, value: state.min, rawText: String(state.min) }, []];
+        case 'toMax':
+            return [{ ...state, value: state.max, rawText: String(state.max) }, []];
+        case 'setDisabled':
+            return [{ ...state, disabled: msg.disabled }, []];
+    }
+}
+export function connect(get, send, opts = {}) {
+    const incrementLabel = opts.incrementLabel ?? 'Increase value';
+    const decrementLabel = opts.decrementLabel ?? 'Decrease value';
+    const validate = opts.validate;
+    const trySetValue = (value) => {
+        if (validate) {
+            const errors = validate(value);
+            if (errors && errors.length > 0)
+                return;
+        }
+        send({ type: 'setValue', value });
+    };
+    return {
+        root: {
+            'data-scope': 'number-input',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        input: {
+            type: 'text',
+            role: 'spinbutton',
+            inputMode: 'decimal',
+            'aria-valuemin': (s) => (isFinite(get(s).min) ? get(s).min : undefined),
+            'aria-valuemax': (s) => (isFinite(get(s).max) ? get(s).max : undefined),
+            'aria-valuenow': (s) => get(s).value ?? undefined,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'aria-readonly': (s) => (get(s).readOnly ? 'true' : undefined),
+            disabled: (s) => get(s).disabled,
+            readOnly: (s) => get(s).readOnly,
+            value: (s) => get(s).rawText,
+            'data-scope': 'number-input',
+            'data-part': 'input',
+            onInput: (e) => {
+                const text = e.target.value;
+                send({ type: 'setRawText', text });
+                const parsed = parseFloat(text);
+                if (!isNaN(parsed))
+                    trySetValue(parsed);
+            },
+            onBlur: () => send({ type: 'commit' }),
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        send({ type: 'increment' });
+                        return;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        send({ type: 'decrement' });
+                        return;
+                    case 'PageUp':
+                        e.preventDefault();
+                        send({ type: 'increment', multiplier: 10 });
+                        return;
+                    case 'PageDown':
+                        e.preventDefault();
+                        send({ type: 'decrement', multiplier: 10 });
+                        return;
+                    case 'Home':
+                        e.preventDefault();
+                        send({ type: 'toMin' });
+                        return;
+                    case 'End':
+                        e.preventDefault();
+                        send({ type: 'toMax' });
+                        return;
+                    case 'Enter':
+                        e.preventDefault();
+                        send({ type: 'commit' });
+                        return;
+                }
+            },
+        },
+        increment: {
+            type: 'button',
+            'aria-label': incrementLabel,
+            'aria-disabled': (s) => get(s).disabled || get(s).readOnly || (get(s).value ?? 0) >= get(s).max
+                ? 'true'
+                : undefined,
+            disabled: (s) => get(s).disabled || get(s).readOnly || (get(s).value ?? 0) >= get(s).max,
+            'data-scope': 'number-input',
+            'data-part': 'increment',
+            tabIndex: -1,
+            onClick: () => send({ type: 'increment' }),
+        },
+        decrement: {
+            type: 'button',
+            'aria-label': decrementLabel,
+            'aria-disabled': (s) => get(s).disabled || get(s).readOnly || (get(s).value ?? 0) <= get(s).min
+                ? 'true'
+                : undefined,
+            disabled: (s) => get(s).disabled || get(s).readOnly || (get(s).value ?? 0) <= get(s).min,
+            'data-scope': 'number-input',
+            'data-part': 'decrement',
+            tabIndex: -1,
+            onClick: () => send({ type: 'decrement' }),
+        },
+    };
+}
+export const numberInput = { init, update, connect };

package/dist/components/pagination.d.ts

@@ -0,0 +1,113 @@
+import type { Send } from '@llui/dom';
+/**
+ * Pagination — page navigation with ellipses for large ranges.
+ * `page` is 1-based. Siblings are the count of pages shown on each side
+ * of the current page. Boundaries are shown at the start/end.
+ */
+export interface PaginationState {
+    page: number;
+    pageSize: number;
+    total: number;
+    siblings: number;
+    boundaries: number;
+    disabled: boolean;
+}
+export type PaginationMsg = {
+    type: 'goTo';
+    page: number;
+} | {
+    type: 'next';
+} | {
+    type: 'prev';
+} | {
+    type: 'first';
+} | {
+    type: 'last';
+} | {
+    type: 'setPageSize';
+    pageSize: number;
+} | {
+    type: 'setTotal';
+    total: number;
+};
+export interface PaginationInit {
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    siblings?: number;
+    boundaries?: number;
+    disabled?: boolean;
+}
+export declare function init(opts?: PaginationInit): PaginationState;
+export declare function totalPages(state: PaginationState): number;
+export declare function update(state: PaginationState, msg: PaginationMsg): [PaginationState, never[]];
+export type PageItem = {
+    type: 'page';
+    page: number;
+} | {
+    type: 'ellipsis';
+    position: 'start' | 'end';
+};
+/**
+ * Compute the visible page buttons with ellipses:
+ * `[first ..boundaries] … [siblings around current] … [boundaries ..last]`.
+ */
+export declare function pageItems(state: PaginationState): PageItem[];
+export interface PaginationParts<S> {
+    root: {
+        role: 'navigation';
+        'aria-label': string;
+        'data-scope': 'pagination';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    prevTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-scope': 'pagination';
+        'data-part': 'prev-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    nextTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        disabled: (s: S) => boolean;
+        'data-scope': 'pagination';
+        'data-part': 'next-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+    item: (page: number) => {
+        type: 'button';
+        'aria-label': string;
+        'aria-current': (s: S) => 'page' | undefined;
+        'data-selected': (s: S) => '' | undefined;
+        'data-scope': 'pagination';
+        'data-part': 'item';
+        'data-value': string;
+        onClick: (e: MouseEvent) => void;
+    };
+    ellipsis: (position: 'start' | 'end') => {
+        'aria-hidden': 'true';
+        'data-scope': 'pagination';
+        'data-part': 'ellipsis';
+        'data-position': 'start' | 'end';
+    };
+}
+export interface ConnectOptions {
+    label?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    pageLabel?: (page: number) => string;
+}
+export declare function connect<S>(get: (s: S) => PaginationState, send: Send<PaginationMsg>, opts?: ConnectOptions): PaginationParts<S>;
+export declare const pagination: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    totalPages: typeof totalPages;
+    pageItems: typeof pageItems;
+};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.ts"],"names":[],"mappings":"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"}

package/dist/components/pagination.js

@@ -0,0 +1,135 @@
+export function init(opts = {}) {
+    return {
+        page: opts.page ?? 1,
+        pageSize: opts.pageSize ?? 10,
+        total: opts.total ?? 0,
+        siblings: opts.siblings ?? 1,
+        boundaries: opts.boundaries ?? 1,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function totalPages(state) {
+    if (state.pageSize <= 0 || state.total <= 0)
+        return 0;
+    return Math.max(1, Math.ceil(state.total / state.pageSize));
+}
+function clampPage(page, total) {
+    if (total === 0)
+        return 1;
+    return Math.max(1, Math.min(page, total));
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    const pages = totalPages(state);
+    switch (msg.type) {
+        case 'goTo':
+            return [{ ...state, page: clampPage(msg.page, pages) }, []];
+        case 'next':
+            return [{ ...state, page: clampPage(state.page + 1, pages) }, []];
+        case 'prev':
+            return [{ ...state, page: clampPage(state.page - 1, pages) }, []];
+        case 'first':
+            return [{ ...state, page: 1 }, []];
+        case 'last':
+            return [{ ...state, page: pages }, []];
+        case 'setPageSize': {
+            // Preserve first visible item when pageSize changes
+            const firstItem = (state.page - 1) * state.pageSize;
+            const nextPage = Math.floor(firstItem / msg.pageSize) + 1;
+            const nextPages = Math.max(1, Math.ceil(state.total / msg.pageSize));
+            return [{ ...state, pageSize: msg.pageSize, page: Math.min(nextPage, nextPages) }, []];
+        }
+        case 'setTotal': {
+            const nextPages = Math.max(1, Math.ceil(msg.total / state.pageSize));
+            return [{ ...state, total: msg.total, page: Math.min(state.page, nextPages) }, []];
+        }
+    }
+}
+/**
+ * Compute the visible page buttons with ellipses:
+ * `[first ..boundaries] … [siblings around current] … [boundaries ..last]`.
+ */
+export function pageItems(state) {
+    const pages = totalPages(state);
+    if (pages === 0)
+        return [];
+    // Build the set of pages we want to show: first boundary, last boundary,
+    // and current ± siblings.
+    const pageSet = new Set();
+    for (let i = 1; i <= Math.min(state.boundaries, pages); i++)
+        pageSet.add(i);
+    for (let i = Math.max(pages - state.boundaries + 1, 1); i <= pages; i++)
+        pageSet.add(i);
+    const start = Math.max(1, state.page - state.siblings);
+    const end = Math.min(pages, state.page + state.siblings);
+    for (let i = start; i <= end; i++)
+        pageSet.add(i);
+    // Emit items in order, inserting ellipses for gaps > 1.
+    const sorted = [...pageSet].sort((a, b) => a - b);
+    const items = [];
+    for (let i = 0; i < sorted.length; i++) {
+        const page = sorted[i];
+        items.push({ type: 'page', page });
+        if (i < sorted.length - 1 && sorted[i + 1] - page > 1) {
+            items.push({ type: 'ellipsis', position: page < state.page ? 'start' : 'end' });
+        }
+    }
+    return items;
+}
+export function connect(get, send, opts = {}) {
+    const label = opts.label ?? 'Pagination';
+    const prevLabel = opts.prevLabel ?? 'Previous page';
+    const nextLabel = opts.nextLabel ?? 'Next page';
+    const pageLabel = opts.pageLabel ?? ((p) => `Page ${p}`);
+    return {
+        root: {
+            role: 'navigation',
+            'aria-label': label,
+            'data-scope': 'pagination',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        prevTrigger: {
+            type: 'button',
+            'aria-label': prevLabel,
+            'aria-disabled': (s) => (get(s).page <= 1 || get(s).disabled ? 'true' : undefined),
+            disabled: (s) => get(s).page <= 1 || get(s).disabled,
+            'data-scope': 'pagination',
+            'data-part': 'prev-trigger',
+            onClick: () => send({ type: 'prev' }),
+        },
+        nextTrigger: {
+            type: 'button',
+            'aria-label': nextLabel,
+            'aria-disabled': (s) => {
+                const st = get(s);
+                return st.page >= totalPages(st) || st.disabled ? 'true' : undefined;
+            },
+            disabled: (s) => {
+                const st = get(s);
+                return st.page >= totalPages(st) || st.disabled;
+            },
+            'data-scope': 'pagination',
+            'data-part': 'next-trigger',
+            onClick: () => send({ type: 'next' }),
+        },
+        item: (page) => ({
+            type: 'button',
+            'aria-label': pageLabel(page),
+            'aria-current': (s) => (get(s).page === page ? 'page' : undefined),
+            'data-selected': (s) => (get(s).page === page ? '' : undefined),
+            'data-scope': 'pagination',
+            'data-part': 'item',
+            'data-value': String(page),
+            onClick: () => send({ type: 'goTo', page }),
+        }),
+        ellipsis: (position) => ({
+            'aria-hidden': 'true',
+            'data-scope': 'pagination',
+            'data-part': 'ellipsis',
+            'data-position': position,
+        }),
+    };
+}
+export const pagination = { init, update, connect, totalPages, pageItems };

package/dist/components/password-input.d.ts

@@ -0,0 +1,64 @@
+import type { Send } from '@llui/dom';
+/**
+ * Password input — text input with show/hide visibility toggle.
+ */
+export interface PasswordInputState {
+    value: string;
+    visible: boolean;
+    disabled: boolean;
+}
+export type PasswordInputMsg = {
+    type: 'setValue';
+    value: string;
+} | {
+    type: 'toggleVisibility';
+} | {
+    type: 'setVisible';
+    visible: boolean;
+};
+export interface PasswordInputInit {
+    value?: string;
+    visible?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: PasswordInputInit): PasswordInputState;
+export declare function update(state: PasswordInputState, msg: PasswordInputMsg): [PasswordInputState, never[]];
+export interface PasswordInputParts<S> {
+    root: {
+        'data-scope': 'password-input';
+        'data-part': 'root';
+        'data-visible': (s: S) => '' | undefined;
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    input: {
+        type: (s: S) => 'text' | 'password';
+        autoComplete: string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'password-input';
+        'data-part': 'input';
+        onInput: (e: Event) => void;
+    };
+    visibilityTrigger: {
+        type: 'button';
+        'aria-label': (s: S) => string;
+        'aria-pressed': (s: S) => boolean;
+        disabled: (s: S) => boolean;
+        tabIndex: -1;
+        'data-scope': 'password-input';
+        'data-part': 'visibility-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    autoComplete?: string;
+    showLabel?: string;
+    hideLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => PasswordInputState, send: Send<PasswordInputMsg>, opts?: ConnectOptions): PasswordInputParts<S>;
+export declare const passwordInput: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=password-input.d.ts.map

package/dist/components/password-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input.d.ts","sourceRoot":"","sources":["../../src/components/password-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,gBAAgB,GACxB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5C,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,iBAAsB,GAAG,kBAAkB,CAMrE;AAED,wBAAgB,MAAM,CACpB,KAAK,EAAE,kBAAkB,EACzB,GAAG,EAAE,gBAAgB,GACpB,CAAC,kBAAkB,EAAE,KAAK,EAAE,CAAC,CAU/B;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,IAAI,EAAE;QACJ,YAAY,EAAE,gBAAgB,CAAA;QAC9B,WAAW,EAAE,MAAM,CAAA;QACnB,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACxC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;KAC1C,CAAA;IACD,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,UAAU,CAAA;QACnC,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACvB,YAAY,EAAE,gBAAgB,CAAA;QAC9B,WAAW,EAAE,OAAO,CAAA;QACpB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;KAC5B,CAAA;IACD,iBAAiB,EAAE;QACjB,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QAC9B,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,QAAQ,EAAE,CAAC,CAAC,CAAA;QACZ,YAAY,EAAE,gBAAgB,CAAA;QAC9B,WAAW,EAAE,oBAAoB,CAAA;QACjC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;KACjC,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,kBAAkB,EACjC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAC5B,IAAI,GAAE,cAAmB,GACxB,kBAAkB,CAAC,CAAC,CAAC,CAgCvB;AAED,eAAO,MAAM,aAAa;;;;CAA4B,CAAA"}

package/dist/components/password-input.js

@@ -0,0 +1,52 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? '',
+        visible: opts.visible ?? false,
+        disabled: opts.disabled ?? false,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setValue')
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'toggleVisibility':
+            return [{ ...state, visible: !state.visible }, []];
+        case 'setVisible':
+            return [{ ...state, visible: msg.visible }, []];
+    }
+}
+export function connect(get, send, opts = {}) {
+    const autoComplete = opts.autoComplete ?? 'current-password';
+    const showLabel = opts.showLabel ?? 'Show password';
+    const hideLabel = opts.hideLabel ?? 'Hide password';
+    return {
+        root: {
+            'data-scope': 'password-input',
+            'data-part': 'root',
+            'data-visible': (s) => (get(s).visible ? '' : undefined),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        input: {
+            type: (s) => (get(s).visible ? 'text' : 'password'),
+            autoComplete,
+            disabled: (s) => get(s).disabled,
+            value: (s) => get(s).value,
+            'data-scope': 'password-input',
+            'data-part': 'input',
+            onInput: (e) => send({ type: 'setValue', value: e.target.value }),
+        },
+        visibilityTrigger: {
+            type: 'button',
+            'aria-label': (s) => (get(s).visible ? hideLabel : showLabel),
+            'aria-pressed': (s) => get(s).visible,
+            disabled: (s) => get(s).disabled,
+            tabIndex: -1,
+            'data-scope': 'password-input',
+            'data-part': 'visibility-trigger',
+            onClick: () => send({ type: 'toggleVisibility' }),
+        },
+    };
+}
+export const passwordInput = { init, update, connect };

package/dist/components/pin-input.d.ts

@@ -0,0 +1,89 @@
+import type { Send } from '@llui/dom';
+/**
+ * Pin input — a sequence of single-character fields for OTP codes, etc.
+ * Auto-advances on input, handles backspace to previous field, supports
+ * paste-to-fill across multiple fields.
+ */
+export type PinType = 'numeric' | 'alphanumeric' | 'alphabetic';
+export interface PinInputState {
+    values: string[];
+    length: number;
+    type: PinType;
+    mask: boolean;
+    disabled: boolean;
+    focusedIndex: number;
+}
+export type PinInputMsg = {
+    type: 'setValue';
+    index: number;
+    value: string;
+} | {
+    type: 'setAll';
+    values: string[];
+} | {
+    type: 'focus';
+    index: number;
+} | {
+    type: 'clear';
+} | {
+    type: 'backspace';
+    index: number;
+};
+export interface PinInputInit {
+    length?: number;
+    type?: PinType;
+    mask?: boolean;
+    disabled?: boolean;
+    values?: string[];
+}
+export declare function init(opts?: PinInputInit): PinInputState;
+export declare function update(state: PinInputState, msg: PinInputMsg): [PinInputState, never[]];
+export declare function isComplete(state: PinInputState): boolean;
+export declare function getValue(state: PinInputState): string;
+export interface PinInputParts<S> {
+    root: {
+        role: 'group';
+        'aria-labelledby': string;
+        'data-scope': 'pin-input';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    label: {
+        id: string;
+        'data-scope': 'pin-input';
+        'data-part': 'label';
+    };
+    /** Props for the input at a given index. */
+    input: (index: number) => {
+        type: (s: S) => 'text' | 'password';
+        inputMode: (s: S) => 'numeric' | 'text';
+        pattern: (s: S) => string;
+        maxLength: 1;
+        autoComplete: 'off';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'pin-input';
+        'data-part': 'input';
+        'data-index': string;
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+        onPaste: (e: ClipboardEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    id: string;
+    inputLabel?: (index: number) => string;
+    /** Validate each character before setting. Non-empty array blocks setDigit. */
+    validate?: (value: string) => string[] | null;
+}
+export declare function connect<S>(get: (s: S) => PinInputState, send: Send<PinInputMsg>, opts: ConnectOptions): PinInputParts<S>;
+export declare const pinInput: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    isComplete: typeof isComplete;
+    getValue: typeof getValue;
+};
+//# sourceMappingURL=pin-input.d.ts.map

package/dist/components/pin-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.d.ts","sourceRoot":"","sources":["../../src/components/pin-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;GAIG;AAEH,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAA;AAE/D,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,MAAM,WAAW,GACnB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GACpC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAChC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,YAAiB,GAAG,aAAa,CAW3D;AAUD,wBAAgB,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,WAAW,GAAG,CAAC,aAAa,EAAE,KAAK,EAAE,CAAC,CAqCvF;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAExD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAErD;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO,CAAA;QACb,iBAAiB,EAAE,MAAM,CAAA;QACzB,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,MAAM,CAAA;QACnB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;KAC1C,CAAA;IACD,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAA;QACV,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;IACD,4CAA4C;IAC5C,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK;QACxB,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,UAAU,CAAA;QACnC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,GAAG,MAAM,CAAA;QACvC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACzB,SAAS,EAAE,CAAC,CAAA;QACZ,YAAY,EAAE,KAAK,CAAA;QACnB,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACvB,YAAY,EAAE,WAAW,CAAA;QACzB,WAAW,EAAE,OAAO,CAAA;QACpB,YAAY,EAAE,MAAM,CAAA;QACpB,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;QAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;QACrC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAA;KACrC,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,EAAE,GAAG,IAAI,CAAA;CAC9C;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,aAAa,EAC5B,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,EACvB,IAAI,EAAE,cAAc,GACnB,aAAa,CAAC,CAAC,CAAC,CAkElB;AAED,eAAO,MAAM,QAAQ;;;;;;CAAkD,CAAA"}