sheer-ui 0.4.2 → 0.5.0

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

@@ -0,0 +1,120 @@
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import type { PinInputCell, PinInputRootProps as RootComponentProps } from './types.js';
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+interface PinInputRootStateOpts extends WithRefOpts, WritableBoxedValues<{
+    value: string;
+    inputRef: HTMLInputElement | null;
+}>, ReadableBoxedValues<{
+    inputId: string;
+    disabled: boolean;
+    onComplete: (...args: any[]) => void;
+    pasteTransformer?: (text: string) => string;
+    pattern: any;
+    maxLength: number;
+    pushPasswordManagerStrategy: 'increase-width' | 'none';
+    textAlign: RootComponentProps['textalign'];
+    autocomplete: RootComponentProps['autocomplete'];
+    inputmode: RootComponentProps['inputmode'];
+}> {
+}
+export declare class PinInputRootState {
+    #private;
+    static create(opts: PinInputRootStateOpts): PinInputRootState;
+    readonly opts: PinInputRootStateOpts;
+    readonly attachment: RefAttachment;
+    readonly inputAttachment: RefAttachment<HTMLInputElement>;
+    isFocused: boolean;
+    domContext: DOMContext;
+    constructor(opts: PinInputRootStateOpts);
+    onkeydown: (e: BitsKeyboardEvent) => void;
+    readonly rootProps: {
+        readonly id: string;
+        readonly style: {
+            position: string;
+            cursor: string;
+            userSelect: string;
+            WebkitUserSelect: string;
+            pointerEvents: string;
+        };
+    };
+    readonly inputWrapperProps: {
+        readonly style: {
+            readonly position: "absolute";
+            readonly inset: 0;
+            readonly pointerEvents: "none";
+        };
+    };
+    oninput: (e: BitsEvent<InputEvent, HTMLInputElement>) => void;
+    onfocus: (_: BitsFocusEvent<HTMLInputElement>) => void;
+    onpaste: (e: BitsEvent<ClipboardEvent>) => void;
+    onblur: (_: BitsFocusEvent) => void;
+    readonly inputProps: {
+        id: string;
+        style: {
+            position: string;
+            inset: number;
+            width: string;
+            clipPath: string | undefined;
+            height: string;
+            display: string;
+            textAlign: "left" | "right" | "center" | undefined;
+            opacity: string;
+            color: string;
+            pointerEvents: string;
+            background: string;
+            caretColor: string;
+            border: string;
+            outline: string;
+            boxShadow: string;
+            lineHeight: string;
+            letterSpacing: string;
+            fontSize: string;
+            fontFamily: string;
+            fontVariantNumeric: string;
+        };
+        autocomplete: "off" | "on" | "tel" | "url" | "email" | "name" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "home tel" | "home email" | "home tel-area-code" | "home tel-country-code" | "home tel-extension" | "home tel-local" | "home tel-local-prefix" | "home tel-local-suffix" | "home tel-national" | "mobile tel" | "mobile email" | "mobile tel-area-code" | "mobile tel-country-code" | "mobile tel-extension" | "mobile tel-local" | "mobile tel-local-prefix" | "mobile tel-local-suffix" | "mobile tel-national" | "work tel" | "work email" | "work tel-area-code" | "work tel-country-code" | "work tel-extension" | "work tel-local" | "work tel-local-prefix" | "work tel-local-suffix" | "work tel-national" | "name webauthn" | "additional-name webauthn" | "address-level1 webauthn" | "address-level2 webauthn" | "address-level3 webauthn" | "address-level4 webauthn" | "address-line1 webauthn" | "address-line2 webauthn" | "address-line3 webauthn" | "bday-day webauthn" | "bday-month webauthn" | "bday-year webauthn" | "cc-csc webauthn" | "cc-exp webauthn" | "cc-exp-month webauthn" | "cc-exp-year webauthn" | "cc-family-name webauthn" | "cc-given-name webauthn" | "cc-name webauthn" | "cc-number webauthn" | "cc-type webauthn" | "country webauthn" | "country-name webauthn" | "current-password webauthn" | "family-name webauthn" | "given-name webauthn" | "honorific-prefix webauthn" | "honorific-suffix webauthn" | "new-password webauthn" | "one-time-code webauthn" | "organization webauthn" | "postal-code webauthn" | "street-address webauthn" | "transaction-amount webauthn" | "transaction-currency webauthn" | "username webauthn" | "tel webauthn" | "email webauthn" | "tel-area-code webauthn" | "tel-country-code webauthn" | "tel-extension webauthn" | "tel-local webauthn" | "tel-local-prefix webauthn" | "tel-local-suffix webauthn" | "tel-national webauthn" | "home tel webauthn" | "home email webauthn" | "home tel-area-code webauthn" | "home tel-country-code webauthn" | "home tel-extension webauthn" | "home tel-local webauthn" | "home tel-local-prefix webauthn" | "home tel-local-suffix webauthn" | "home tel-national webauthn" | "mobile tel webauthn" | "mobile email webauthn" | "mobile tel-area-code webauthn" | "mobile tel-country-code webauthn" | "mobile tel-extension webauthn" | "mobile tel-local webauthn" | "mobile tel-local-prefix webauthn" | "mobile tel-local-suffix webauthn" | "mobile tel-national webauthn" | "work tel webauthn" | "work email webauthn" | "work tel-area-code webauthn" | "work tel-country-code webauthn" | "work tel-extension webauthn" | "work tel-local webauthn" | "work tel-local-prefix webauthn" | "work tel-local-suffix webauthn" | "work tel-national webauthn" | "billing name" | "billing name webauthn" | "billing additional-name" | "billing additional-name webauthn" | "billing address-level1" | "billing address-level1 webauthn" | "billing address-level2" | "billing address-level2 webauthn" | "billing address-level3" | "billing address-level3 webauthn" | "billing address-level4" | "billing address-level4 webauthn" | "billing address-line1" | "billing address-line1 webauthn" | "billing address-line2" | "billing address-line2 webauthn" | "billing address-line3" | "billing address-line3 webauthn" | "billing bday-day" | "billing bday-day webauthn" | "billing bday-month" | "billing bday-month webauthn" | "billing bday-year" | "billing bday-year webauthn" | "billing cc-csc" | "billing cc-csc webauthn" | "billing cc-exp" | "billing cc-exp webauthn" | "billing cc-exp-month" | "billing cc-exp-month webauthn" | "billing cc-exp-year" | "billing cc-exp-year webauthn" | "billing cc-family-name" | "billing cc-family-name webauthn" | "billing cc-given-name" | "billing cc-given-name webauthn" | "billing cc-name" | "billing cc-name webauthn" | "billing cc-number" | "billing cc-number webauthn" | "billing cc-type" | "billing cc-type webauthn" | "billing country" | "billing country webauthn" | "billing country-name" | "billing country-name webauthn" | "billing current-password" | "billing current-password webauthn" | "billing family-name" | "billing family-name webauthn" | "billing given-name" | "billing given-name webauthn" | "billing honorific-prefix" | "billing honorific-prefix webauthn" | "billing honorific-suffix" | "billing honorific-suffix webauthn" | "billing new-password" | "billing new-password webauthn" | "billing one-time-code" | "billing one-time-code webauthn" | "billing organization" | "billing organization webauthn" | "billing postal-code" | "billing postal-code webauthn" | "billing street-address" | "billing street-address webauthn" | "billing transaction-amount" | "billing transaction-amount webauthn" | "billing transaction-currency" | "billing transaction-currency webauthn" | "billing username" | "billing username webauthn" | "billing tel" | "billing tel webauthn" | "billing email" | "billing email webauthn" | "billing tel-area-code" | "billing tel-area-code webauthn" | "billing tel-country-code" | "billing tel-country-code webauthn" | "billing tel-extension" | "billing tel-extension webauthn" | "billing tel-local" | "billing tel-local webauthn" | "billing tel-local-prefix" | "billing tel-local-prefix webauthn" | "billing tel-local-suffix" | "billing tel-local-suffix webauthn" | "billing tel-national" | "billing tel-national webauthn" | "billing home tel" | "billing home tel webauthn" | "billing home email" | "billing home email webauthn" | "billing home tel-area-code" | "billing home tel-area-code webauthn" | "billing home tel-country-code" | "billing home tel-country-code webauthn" | "billing home tel-extension" | "billing home tel-extension webauthn" | "billing home tel-local" | "billing home tel-local webauthn" | "billing home tel-local-prefix" | "billing home tel-local-prefix webauthn" | "billing home tel-local-suffix" | "billing home tel-local-suffix webauthn" | "billing home tel-national" | "billing home tel-national webauthn" | "billing mobile tel" | "billing mobile tel webauthn" | "billing mobile email" | "billing mobile email webauthn" | "billing mobile tel-area-code" | "billing mobile tel-area-code webauthn" | "billing mobile tel-country-code" | "billing mobile tel-country-code webauthn" | "billing mobile tel-extension" | "billing mobile tel-extension webauthn" | "billing mobile tel-local" | "billing mobile tel-local webauthn" | "billing mobile tel-local-prefix" | "billing mobile tel-local-prefix webauthn" | "billing mobile tel-local-suffix" | "billing mobile tel-local-suffix webauthn" | "billing mobile tel-national" | "billing mobile tel-national webauthn" | "billing work tel" | "billing work tel webauthn" | "billing work email" | "billing work email webauthn" | "billing work tel-area-code" | "billing work tel-area-code webauthn" | "billing work tel-country-code" | "billing work tel-country-code webauthn" | "billing work tel-extension" | "billing work tel-extension webauthn" | "billing work tel-local" | "billing work tel-local webauthn" | "billing work tel-local-prefix" | "billing work tel-local-prefix webauthn" | "billing work tel-local-suffix" | "billing work tel-local-suffix webauthn" | "billing work tel-national" | "billing work tel-national webauthn" | "shipping name" | "shipping name webauthn" | "shipping additional-name" | "shipping additional-name webauthn" | "shipping address-level1" | "shipping address-level1 webauthn" | "shipping address-level2" | "shipping address-level2 webauthn" | "shipping address-level3" | "shipping address-level3 webauthn" | "shipping address-level4" | "shipping address-level4 webauthn" | "shipping address-line1" | "shipping address-line1 webauthn" | "shipping address-line2" | "shipping address-line2 webauthn" | "shipping address-line3" | "shipping address-line3 webauthn" | "shipping bday-day" | "shipping bday-day webauthn" | "shipping bday-month" | "shipping bday-month webauthn" | "shipping bday-year" | "shipping bday-year webauthn" | "shipping cc-csc" | "shipping cc-csc webauthn" | "shipping cc-exp" | "shipping cc-exp webauthn" | "shipping cc-exp-month" | "shipping cc-exp-month webauthn" | "shipping cc-exp-year" | "shipping cc-exp-year webauthn" | "shipping cc-family-name" | "shipping cc-family-name webauthn" | "shipping cc-given-name" | "shipping cc-given-name webauthn" | "shipping cc-name" | "shipping cc-name webauthn" | "shipping cc-number" | "shipping cc-number webauthn" | "shipping cc-type" | "shipping cc-type webauthn" | "shipping country" | "shipping country webauthn" | "shipping country-name" | "shipping country-name webauthn" | "shipping current-password" | "shipping current-password webauthn" | "shipping family-name" | "shipping family-name webauthn" | "shipping given-name" | "shipping given-name webauthn" | "shipping honorific-prefix" | "shipping honorific-prefix webauthn" | "shipping honorific-suffix" | "shipping honorific-suffix webauthn" | "shipping new-password" | "shipping new-password webauthn" | "shipping one-time-code" | "shipping one-time-code webauthn" | "shipping organization" | "shipping organization webauthn" | "shipping postal-code" | "shipping postal-code webauthn" | "shipping street-address" | "shipping street-address webauthn" | "shipping transaction-amount" | "shipping transaction-amount webauthn" | "shipping transaction-currency" | "shipping transaction-currency webauthn" | "shipping username" | "shipping username webauthn" | "shipping tel" | "shipping tel webauthn" | "shipping email" | "shipping email webauthn" | "shipping tel-area-code" | "shipping tel-area-code webauthn" | "shipping tel-country-code" | "shipping tel-country-code webauthn" | "shipping tel-extension" | "shipping tel-extension webauthn" | "shipping tel-local" | "shipping tel-local webauthn" | "shipping tel-local-prefix" | "shipping tel-local-prefix webauthn" | "shipping tel-local-suffix" | "shipping tel-local-suffix webauthn" | "shipping tel-national" | "shipping tel-national webauthn" | "shipping home tel" | "shipping home tel webauthn" | "shipping home email" | "shipping home email webauthn" | "shipping home tel-area-code" | "shipping home tel-area-code webauthn" | "shipping home tel-country-code" | "shipping home tel-country-code webauthn" | "shipping home tel-extension" | "shipping home tel-extension webauthn" | "shipping home tel-local" | "shipping home tel-local webauthn" | "shipping home tel-local-prefix" | "shipping home tel-local-prefix webauthn" | "shipping home tel-local-suffix" | "shipping home tel-local-suffix webauthn" | "shipping home tel-national" | "shipping home tel-national webauthn" | "shipping mobile tel" | "shipping mobile tel webauthn" | "shipping mobile email" | "shipping mobile email webauthn" | "shipping mobile tel-area-code" | "shipping mobile tel-area-code webauthn" | "shipping mobile tel-country-code" | "shipping mobile tel-country-code webauthn" | "shipping mobile tel-extension" | "shipping mobile tel-extension webauthn" | "shipping mobile tel-local" | "shipping mobile tel-local webauthn" | "shipping mobile tel-local-prefix" | "shipping mobile tel-local-prefix webauthn" | "shipping mobile tel-local-suffix" | "shipping mobile tel-local-suffix webauthn" | "shipping mobile tel-national" | "shipping mobile tel-national webauthn" | "shipping work tel" | "shipping work tel webauthn" | "shipping work email" | "shipping work email webauthn" | "shipping work tel-area-code" | "shipping work tel-area-code webauthn" | "shipping work tel-country-code" | "shipping work tel-country-code webauthn" | "shipping work tel-extension" | "shipping work tel-extension webauthn" | "shipping work tel-local" | "shipping work tel-local webauthn" | "shipping work tel-local-prefix" | "shipping work tel-local-prefix webauthn" | "shipping work tel-local-suffix" | "shipping work tel-local-suffix webauthn" | "shipping work tel-national" | "shipping work tel-national webauthn" | `section-${string} name` | `section-${string} name webauthn` | `section-${string} additional-name` | `section-${string} additional-name webauthn` | `section-${string} address-level1` | `section-${string} address-level1 webauthn` | `section-${string} address-level2` | `section-${string} address-level2 webauthn` | `section-${string} address-level3` | `section-${string} address-level3 webauthn` | `section-${string} address-level4` | `section-${string} address-level4 webauthn` | `section-${string} address-line1` | `section-${string} address-line1 webauthn` | `section-${string} address-line2` | `section-${string} address-line2 webauthn` | `section-${string} address-line3` | `section-${string} address-line3 webauthn` | `section-${string} bday-day` | `section-${string} bday-day webauthn` | `section-${string} bday-month` | `section-${string} bday-month webauthn` | `section-${string} bday-year` | `section-${string} bday-year webauthn` | `section-${string} cc-csc` | `section-${string} cc-csc webauthn` | `section-${string} cc-exp` | `section-${string} cc-exp webauthn` | `section-${string} cc-exp-month` | `section-${string} cc-exp-month webauthn` | `section-${string} cc-exp-year` | `section-${string} cc-exp-year webauthn` | `section-${string} cc-family-name` | `section-${string} cc-family-name webauthn` | `section-${string} cc-given-name` | `section-${string} cc-given-name webauthn` | `section-${string} cc-name` | `section-${string} cc-name webauthn` | `section-${string} cc-number` | `section-${string} cc-number webauthn` | `section-${string} cc-type` | `section-${string} cc-type webauthn` | `section-${string} country` | `section-${string} country webauthn` | `section-${string} country-name` | `section-${string} country-name webauthn` | `section-${string} current-password` | `section-${string} current-password webauthn` | `section-${string} family-name` | `section-${string} family-name webauthn` | `section-${string} given-name` | `section-${string} given-name webauthn` | `section-${string} honorific-prefix` | `section-${string} honorific-prefix webauthn` | `section-${string} honorific-suffix` | `section-${string} honorific-suffix webauthn` | `section-${string} new-password` | `section-${string} new-password webauthn` | `section-${string} one-time-code` | `section-${string} one-time-code webauthn` | `section-${string} organization` | `section-${string} organization webauthn` | `section-${string} postal-code` | `section-${string} postal-code webauthn` | `section-${string} street-address` | `section-${string} street-address webauthn` | `section-${string} transaction-amount` | `section-${string} transaction-amount webauthn` | `section-${string} transaction-currency` | `section-${string} transaction-currency webauthn` | `section-${string} username` | `section-${string} username webauthn` | `section-${string} tel` | `section-${string} tel webauthn` | `section-${string} email` | `section-${string} email webauthn` | `section-${string} tel-area-code` | `section-${string} tel-area-code webauthn` | `section-${string} tel-country-code` | `section-${string} tel-country-code webauthn` | `section-${string} tel-extension` | `section-${string} tel-extension webauthn` | `section-${string} tel-local` | `section-${string} tel-local webauthn` | `section-${string} tel-local-prefix` | `section-${string} tel-local-prefix webauthn` | `section-${string} tel-local-suffix` | `section-${string} tel-local-suffix webauthn` | `section-${string} tel-national` | `section-${string} tel-national webauthn` | "bday" | "cc-additional-name" | "billing cc-additional-name" | "shipping cc-additional-name" | "nickname" | "language" | "organization-title" | "photo" | "sex";
+        'data-pin-input-input': string;
+        'data-pin-input-input-mss': number | null;
+        'data-pin-input-input-mse': number | null;
+        inputmode: "numeric" | "none" | "search" | "text" | "tel" | "url" | "email" | "decimal" | null | undefined;
+        pattern: any;
+        maxlength: number;
+        value: string;
+        disabled: true | undefined;
+        onpaste: (e: BitsEvent<ClipboardEvent>) => void;
+        oninput: (e: BitsEvent<InputEvent, HTMLInputElement>) => void;
+        onkeydown: (e: BitsKeyboardEvent) => void;
+        onmouseover: () => true;
+        onmouseleave: () => false;
+        onfocus: (_: BitsFocusEvent<HTMLInputElement>) => void;
+        onblur: (_: BitsFocusEvent) => void;
+    };
+    readonly snippetProps: {
+        cells: {
+            char: string | null;
+            isActive: boolean;
+            hasFakeCaret: boolean;
+        }[];
+        isFocused: boolean;
+        isHovering: boolean;
+    };
+}
+interface PinInputCellStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    cell: PinInputCell;
+}> {
+}
+export declare class PinInputCellState {
+    static create(opts: PinInputCellStateOpts): PinInputCellState;
+    readonly opts: PinInputCellStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: PinInputCellStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly 'data-active': "" | undefined;
+        readonly 'data-inactive': "" | undefined;
+    };
+}
+export {};

package/dist/components/pin-input/pin-input.svelte.js

@@ -0,0 +1,417 @@
+import { onMount, untrack } from 'svelte';
+import { attachRef, DOMContext, } from '../../internal/tools/index.js';
+import { usePasswordManagerBadge } from './usePasswordManager.svelte.js';
+import { createBitsAttrs, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { on } from 'svelte/events';
+import { resizeAttachment } from '../../internal/svelte-resize-observer.svelte.js';
+export const REGEXP_ONLY_DIGITS = '^\\d+$';
+export const REGEXP_ONLY_CHARS = '^[a-zA-Z]+$';
+export const REGEXP_ONLY_DIGITS_AND_CHARS = '^[a-zA-Z0-9]+$';
+const pinInputAttrs = createBitsAttrs({
+    component: 'pin-input',
+    parts: ['root', 'cell'],
+});
+const KEYS_TO_IGNORE = [
+    'Backspace',
+    'Delete',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+    'Escape',
+    'Enter',
+    'Tab',
+    'Shift',
+    'Control',
+    'Meta',
+];
+export class PinInputRootState {
+    static create(opts) {
+        return new PinInputRootState(opts);
+    }
+    opts;
+    attachment;
+    inputAttachment;
+    #isHoveringInput = $state(false);
+    isFocused = $state(false);
+    #mirrorSelectionStart = $state(null);
+    #mirrorSelectionEnd = $state(null);
+    #previousValue = $state(undefined);
+    #regexPattern = $derived.by(() => typeof this.opts.pattern.current === 'string' ? new RegExp(this.opts.pattern.current) : this.opts.pattern.current);
+    // only read/written inside event handlers — needs no reactivity
+    #prevInputMetadata = {
+        prev: [null, null, 'none'],
+        willSyntheticBlur: false,
+    };
+    #pwmb;
+    #initialLoad;
+    domContext;
+    #updateRootHeight = () => {
+        const input = this.opts.inputRef.current;
+        const container = this.opts.ref.current;
+        if (!input || !container)
+            return;
+        container.style.setProperty('--bits-pin-input-root-height', `${input.clientHeight}px`);
+    };
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.inputAttachment = {
+            ...attachRef(this.opts.inputRef),
+            ...resizeAttachment(this.#updateRootHeight),
+        };
+        this.domContext = new DOMContext(opts.ref);
+        let lastValue = undefined;
+        $effect.pre(() => {
+            const current = this.opts.value.current ?? '';
+            this.#previousValue = lastValue;
+            lastValue = current;
+        });
+        this.#initialLoad = {
+            value: this.opts.value,
+            isIOS: typeof window !== 'undefined' && window?.CSS?.supports('-webkit-touch-callout', 'none'),
+        };
+        this.#pwmb = usePasswordManagerBadge({
+            containerRef: this.opts.ref,
+            inputRef: this.opts.inputRef,
+            isFocused: () => this.isFocused,
+            pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
+            domContext: this.domContext,
+        });
+        onMount(() => {
+            const input = this.opts.inputRef.current;
+            const container = this.opts.ref.current;
+            if (!input || !container)
+                return;
+            if (this.#initialLoad.value.current !== input.value) {
+                this.opts.value.current = input.value;
+            }
+            this.#prevInputMetadata.prev = [input.selectionStart, input.selectionEnd, input.selectionDirection ?? 'none'];
+            const unsub = on(this.domContext.getDocument(), 'selectionchange', this.#onDocumentSelectionChange, {
+                capture: true,
+            });
+            this.#onDocumentSelectionChange();
+            if (this.domContext.getActiveElement() === input) {
+                this.isFocused = true;
+            }
+            if (!this.domContext.getElementById('pin-input-style')) {
+                this.#applyStyles();
+            }
+            this.#updateRootHeight();
+            return () => {
+                unsub();
+            };
+        });
+        $effect(() => {
+            this.opts.value.current;
+            this.opts.inputRef.current;
+            return untrack(() => {
+                const timeoutIds = syncTimeouts(() => {
+                    const input = this.opts.inputRef.current;
+                    if (!input)
+                        return;
+                    // forcefully remove :autofill state
+                    input.dispatchEvent(new Event('input'));
+                    // update selection state
+                    const start = input.selectionStart;
+                    const end = input.selectionEnd;
+                    const dir = input.selectionDirection ?? 'none';
+                    if (start !== null && end !== null) {
+                        this.#mirrorSelectionStart = start;
+                        this.#mirrorSelectionEnd = end;
+                        this.#prevInputMetadata.prev = [start, end, dir];
+                    }
+                }, this.domContext);
+                return () => {
+                    for (const timeoutId of timeoutIds) {
+                        this.domContext.clearTimeout(timeoutId);
+                    }
+                };
+            });
+        });
+        $effect(() => {
+            // invoke `onComplete` when the input is completely filled.
+            const value = this.opts.value.current;
+            const prevValue = this.#previousValue;
+            const maxLength = this.opts.maxLength.current;
+            const onComplete = this.opts.onComplete.current;
+            if (prevValue === undefined)
+                return;
+            if (value !== prevValue && prevValue.length < maxLength && value.length === maxLength) {
+                onComplete(value);
+            }
+        });
+    }
+    onkeydown = (e) => {
+        // if ctrl or cmd is pressed, they are likely to be shortcuts and should not be tested
+        // against the regex
+        if (KEYS_TO_IGNORE.includes(e.key) || e.ctrlKey || e.metaKey)
+            return;
+        if (e.key && this.#regexPattern && !this.#regexPattern.test(e.key))
+            e.preventDefault();
+    };
+    #rootStyles = $derived.by(() => ({
+        position: 'relative',
+        cursor: this.opts.disabled.current ? 'default' : 'text',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        pointerEvents: 'none',
+    }));
+    rootProps = $derived.by(() => ({
+        id: this.opts.id.current,
+        [pinInputAttrs.root]: '',
+        style: this.#rootStyles,
+        ...this.attachment,
+    }));
+    inputWrapperProps = $derived.by(() => ({
+        style: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+        },
+    }));
+    #inputStyle = $derived.by(() => ({
+        position: 'absolute',
+        inset: 0,
+        width: this.#pwmb.willPushPwmBadge ? `calc(100% + ${this.#pwmb.PWM_BADGE_SPACE_WIDTH})` : '100%',
+        clipPath: this.#pwmb.willPushPwmBadge ? `inset(0 ${this.#pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)` : undefined,
+        height: '100%',
+        display: 'flex',
+        textAlign: this.opts.textAlign.current,
+        opacity: '1',
+        color: 'transparent',
+        pointerEvents: 'all',
+        background: 'transparent',
+        caretColor: 'transparent',
+        border: '0 solid transparent',
+        outline: '0 solid transparent',
+        boxShadow: 'none',
+        lineHeight: '1',
+        letterSpacing: '-.5em',
+        fontSize: 'var(--bits-pin-input-root-height)',
+        fontFamily: 'monospace',
+        fontVariantNumeric: 'tabular-nums',
+    }));
+    #applyStyles() {
+        const doc = this.domContext.getDocument();
+        const styleEl = doc.createElement('style');
+        styleEl.id = 'pin-input-style';
+        doc.head.appendChild(styleEl);
+        if (styleEl.sheet) {
+            const autoFillStyles = 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';
+            safeInsertRule(styleEl.sheet, '[data-pin-input-input]::selection { background: transparent !important; color: transparent !important; }');
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input]:autofill { ${autoFillStyles} }`);
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input]:-webkit-autofill { ${autoFillStyles} }`);
+            // iOS
+            safeInsertRule(styleEl.sheet, `@supports (-webkit-touch-callout: none) { [data-pin-input-input] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`);
+            // PWM badges
+            safeInsertRule(styleEl.sheet, `[data-pin-input-input] + * { pointer-events: all !important; }`);
+        }
+    }
+    #onDocumentSelectionChange = () => {
+        const input = this.opts.inputRef.current;
+        const container = this.opts.ref.current;
+        if (!input || !container)
+            return;
+        if (this.domContext.getActiveElement() !== input) {
+            this.#mirrorSelectionStart = null;
+            this.#mirrorSelectionEnd = null;
+            return;
+        }
+        const selStart = input.selectionStart;
+        const selEnd = input.selectionEnd;
+        const selDir = input.selectionDirection ?? 'none';
+        const maxLength = input.maxLength;
+        const val = input.value;
+        const prev = this.#prevInputMetadata.prev;
+        let start = -1;
+        let end = -1;
+        let direction;
+        if (val.length !== 0 && selStart !== null && selEnd !== null) {
+            const isSingleCaret = selStart === selEnd;
+            const isInsertMode = selStart === val.length && val.length < maxLength;
+            if (isSingleCaret && !isInsertMode) {
+                const c = selStart;
+                if (c === 0) {
+                    start = 0;
+                    end = 1;
+                    direction = 'forward';
+                }
+                else if (c === maxLength) {
+                    start = c - 1;
+                    end = c;
+                    direction = 'backward';
+                }
+                else if (maxLength > 1 && val.length > 1) {
+                    let offset = 0;
+                    if (prev[0] !== null && prev[1] !== null) {
+                        direction = c < prev[1] ? 'backward' : 'forward';
+                        const wasPreviouslyInserting = prev[0] === prev[1] && prev[0] < maxLength;
+                        if (direction === 'backward' && !wasPreviouslyInserting) {
+                            offset = -1;
+                        }
+                    }
+                    start = offset + c;
+                    end = offset + c + 1;
+                }
+            }
+            if (start !== -1 && end !== -1 && start !== end) {
+                this.opts.inputRef.current?.setSelectionRange(start, end, direction);
+            }
+        }
+        // finally update the state
+        const s = start !== -1 ? start : selStart;
+        const e = end !== -1 ? end : selEnd;
+        const dir = direction ?? selDir;
+        this.#mirrorSelectionStart = s;
+        this.#mirrorSelectionEnd = e;
+        this.#prevInputMetadata.prev = [s, e, dir];
+    };
+    oninput = (e) => {
+        const newValue = e.currentTarget.value.slice(0, this.opts.maxLength.current);
+        if (newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue)) {
+            e.preventDefault();
+            return;
+        }
+        const maybeHasDeleted = typeof this.#previousValue === 'string' && newValue.length < this.#previousValue.length;
+        if (maybeHasDeleted) {
+            // Since cutting/deleting text doesn't trigger
+            // selectionchange event, we'll have to dispatch it manually.
+            // NOTE: The following line also triggers when cmd+A then pasting
+            // a value with smaller length, which is not ideal for performance.
+            this.domContext.getDocument().dispatchEvent(new Event('selectionchange'));
+        }
+        this.opts.value.current = newValue;
+    };
+    onfocus = (_) => {
+        const input = this.opts.inputRef.current;
+        if (input) {
+            const start = Math.min(input.value.length, this.opts.maxLength.current - 1);
+            const end = input.value.length;
+            input.setSelectionRange(start, end);
+            this.#mirrorSelectionStart = start;
+            this.#mirrorSelectionEnd = end;
+        }
+        this.isFocused = true;
+    };
+    onpaste = (e) => {
+        const input = this.opts.inputRef.current;
+        if (!input)
+            return;
+        const getNewValue = (finalContent) => {
+            const start = input.selectionStart === null ? undefined : input.selectionStart;
+            const end = input.selectionEnd === null ? undefined : input.selectionEnd;
+            const isReplacing = start !== end;
+            const initNewVal = this.opts.value.current;
+            const newValueUncapped = isReplacing
+                ? initNewVal.slice(0, start) + finalContent + initNewVal.slice(end)
+                : initNewVal.slice(0, start) + finalContent + initNewVal.slice(start);
+            return newValueUncapped.slice(0, this.opts.maxLength.current);
+        };
+        const isValueInvalid = (newValue) => {
+            return newValue.length > 0 && this.#regexPattern && !this.#regexPattern.test(newValue);
+        };
+        if (!this.opts.pasteTransformer?.current && (!this.#initialLoad.isIOS || !e.clipboardData || !input)) {
+            const newValue = getNewValue(e.clipboardData?.getData('text/plain'));
+            if (isValueInvalid(newValue)) {
+                e.preventDefault();
+            }
+            return;
+        }
+        const _content = e.clipboardData?.getData('text/plain') ?? '';
+        const content = this.opts.pasteTransformer?.current ? this.opts.pasteTransformer.current(_content) : _content;
+        e.preventDefault();
+        const newValue = getNewValue(content);
+        if (isValueInvalid(newValue))
+            return;
+        input.value = newValue;
+        this.opts.value.current = newValue;
+        const selStart = Math.min(newValue.length, this.opts.maxLength.current - 1);
+        const selEnd = newValue.length;
+        input.setSelectionRange(selStart, selEnd);
+        this.#mirrorSelectionStart = selStart;
+        this.#mirrorSelectionEnd = selEnd;
+    };
+    onblur = (_) => {
+        if (this.#prevInputMetadata.willSyntheticBlur) {
+            this.#prevInputMetadata.willSyntheticBlur = false;
+            return;
+        }
+        this.isFocused = false;
+    };
+    inputProps = $derived.by(() => ({
+        id: this.opts.inputId.current,
+        style: this.#inputStyle,
+        autocomplete: this.opts.autocomplete.current || 'one-time-code',
+        'data-pin-input-input': '',
+        'data-pin-input-input-mss': this.#mirrorSelectionStart,
+        'data-pin-input-input-mse': this.#mirrorSelectionEnd,
+        inputmode: this.opts.inputmode.current,
+        pattern: this.#regexPattern?.source,
+        maxlength: this.opts.maxLength.current,
+        value: this.opts.value.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
+        //
+        onpaste: this.onpaste,
+        oninput: this.oninput,
+        onkeydown: this.onkeydown,
+        onmouseover: () => (this.#isHoveringInput = true),
+        onmouseleave: () => (this.#isHoveringInput = false),
+        onfocus: this.onfocus,
+        onblur: this.onblur,
+        ...this.inputAttachment,
+    }));
+    #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
+        const isActive = this.isFocused &&
+            this.#mirrorSelectionStart !== null &&
+            this.#mirrorSelectionEnd !== null &&
+            ((this.#mirrorSelectionStart === this.#mirrorSelectionEnd && idx === this.#mirrorSelectionStart) ||
+                (idx >= this.#mirrorSelectionStart && idx < this.#mirrorSelectionEnd));
+        const char = this.opts.value.current[idx] !== undefined ? this.opts.value.current[idx] : null;
+        return {
+            char,
+            isActive,
+            hasFakeCaret: isActive && char === null,
+        };
+    }));
+    snippetProps = $derived.by(() => ({
+        cells: this.#cells,
+        isFocused: this.isFocused,
+        isHovering: this.#isHoveringInput,
+    }));
+}
+export class PinInputCellState {
+    static create(opts) {
+        return new PinInputCellState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [pinInputAttrs.cell]: '',
+        'data-active': this.opts.cell.current.isActive ? '' : undefined,
+        'data-inactive': !this.opts.cell.current.isActive ? '' : undefined,
+        ...this.attachment,
+    }));
+}
+function syncTimeouts(cb, domContext) {
+    const t1 = domContext.setTimeout(cb, 0); // For faster machines
+    const t2 = domContext.setTimeout(cb, 1_0);
+    const t3 = domContext.setTimeout(cb, 5_0);
+    return [t1, t2, t3];
+}
+function safeInsertRule(sheet, rule) {
+    try {
+        sheet.insertRule(rule);
+    }
+    catch {
+        // oxlint-disable-next-line no-console
+        console.error('pin input could not insert CSS rule:', rule);
+    }
+}

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

@@ -0,0 +1,88 @@
+import type { Snippet } from "svelte";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes } from "../../internal/attribute-types.js";
+export type PinInputRootSnippetProps = {
+    cells: PinInputCell[];
+    isFocused: boolean;
+    isHovering: boolean;
+};
+export type PinInputRootPropsWithoutHTML = Omit<WithChild<{
+    /**
+     * The value of the input.
+     *
+     * @bindable
+     */
+    value?: string;
+    /**
+     * A callback function that is called when the value of the input changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * A callback function that is called when the user pastes text into the input.
+     * It receives the pasted text as an argument, and should return the sanitized text.
+     *
+     * Use this function to clean up the pasted text, like removing hyphens or other
+     * characters that should not make it into the input.
+     */
+    pasteTransformer?: (text: string) => string;
+    /**
+     * The max length of the input.
+     */
+    maxlength: number;
+    /**
+     * Customize the alignment of the text within in the input.
+     *
+     * @default "left"
+     */
+    textalign?: "left" | "center" | "right";
+    /**
+     * A callback function that is called when the input is completely filled.
+     *
+     */
+    onComplete?: (...args: any[]) => void;
+    /**
+     * How to handle the input when a password manager is detected.
+     */
+    pushPasswordManagerStrategy?: "increase-width" | "none";
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optionally provide an ID to apply to the hidden input element.
+     */
+    inputId?: string;
+    /**
+     * The underlying hidden `<input>` element. Bind to call `focus()`, read selection, etc.
+     *
+     * @bindable
+     */
+    inputRef?: HTMLInputElement | null;
+    /**
+     * The children snippet used to render the individual cells.
+     */
+    children: Snippet<[PinInputRootSnippetProps]>;
+}, PinInputRootSnippetProps>, "child">;
+export type PinInputRootProps = PinInputRootPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, PinInputRootPropsWithoutHTML>;
+export type PinInputCellPropsWithoutHTML = WithChild<{
+    /**
+     * This specific cell, which is provided by the `cells` snippet prop from
+     * the `PinInput.Root` component.
+     */
+    cell: PinInputCell;
+}>;
+export type PinInputCellProps = PinInputCellPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PinInputCellPropsWithoutHTML>;
+export type PinInputCell = {
+    /**
+     * The character displayed in the cell.
+     */
+    char: string | null | undefined;
+    /**
+     * Whether the cell is active.
+     */
+    isActive: boolean;
+    /**
+     * Whether the cell has a fake caret.
+     */
+    hasFakeCaret: boolean;
+};

package/dist/components/pin-input/types.js

@@ -0,0 +1 @@
+export {};