entasis 0.11.0 → 0.12.0

package/dist/components/Form/PinInput/pinInput.props.d.ts

@@ -1,22 +1,56 @@
 import type { InputProps } from '../Field/field.js';
 import type { PinInputThemeProps } from './pinInput.theme.js';
-import type { PinInputPattern } from './pinInput.state.svelte.js';
+import type { PinInputPattern, PinInputRejectDetail } from './pinInput.state.svelte.js';
 import type { HTMLInputAttributes } from 'svelte/elements';
 export type PinInputProps = Omit<InputProps<'pin'>, 'onValueChange'> & {
     /** Number of visible cells. */
     length?: number;
-    /** Partial-value pattern used to accept typed and pasted input. */
+    /**
+     * Partial-value pattern the code must match after normalization. Text that fails it is
+     * refused whole, and reported to `onRejectInput`.
+     */
     pattern?: PinInputPattern;
     /** Input mode forwarded to the real input for mobile keyboards. */
     inputMode?: HTMLInputAttributes['inputmode'];
     /** Autocomplete hint forwarded to the real input. */
     autocomplete?: HTMLInputAttributes['autocomplete'];
-    /** Transforms pasted text before it is inserted. */
+    /**
+     * Transforms pasted text before the shared normalization runs (a paste-only first step). A
+     * result at least `length` characters long replaces the whole code, wherever the caret is.
+     */
     pasteTransformer?: (text: string) => string;
+    /**
+     * Final step of the normalization every typed, pasted, autofilled, composed and controlled
+     * code goes through, after whitespace and separators are removed and digits of other numeral
+     * systems become ASCII. Use it to fold case: `(text) => text.toUpperCase()`. It should give
+     * the same result when run again on its own output.
+     */
+    normalizeValue?: (text: string) => string;
+    /**
+     * Called when the pattern refuses text, with the text as it arrived and where it came from.
+     */
+    onRejectInput?: (detail: PinInputRejectDetail) => void;
     /** Called when the value changes. */
     onValueChange?: (value: string) => void;
-    /** Called once when the input reaches the configured length. */
+    /**
+     * Called when the value becomes complete. A paste or autofill that leaves the code complete
+     * calls it again, even when the code was already complete or unchanged; typing over one cell
+     * of a complete code does not.
+     */
     onComplete?: (value: string) => void;
+    /**
+     * Submits the owning form when the user types, pastes or autofills a complete code: through
+     * the surrounding Form (which validates first and focuses an earlier invalid field), else the
+     * native form with `requestSubmit()`. A code set by the parent, and a read-only or disabled
+     * input, never submit.
+     * @default false
+     */
+    submitOnComplete?: boolean;
+    /**
+     * Splits the cells into groups with a separator between them: `[3, 3]` for a code written
+     * 123-456. The separator is decorative and hidden from assistive technology.
+     */
+    groups?: number[];
     /** Whether displayed characters should be visually masked. */
     mask?: boolean;
     /** Theme overrides for the pin input cells and field container. */

package/dist/components/Form/PinInput/pinInput.state.svelte.d.ts

@@ -1,6 +1,12 @@
 import type { Attachment } from 'svelte/attachments';
 export declare const PIN_INPUT_DIGITS_PATTERN = "^\\d+$";
 export declare const PIN_INPUT_CHARS_PATTERN = "^[a-zA-Z]+$";
+/**
+ * Extra characters the native input accepts beyond the code length. Autofilled or inserted text
+ * such as `123-456` reaches the pipeline whole, so it can strip separators before clamping to
+ * `length`, instead of the browser truncating it first.
+ */
+export declare const PIN_INPUT_TEXT_MARGIN = 32;
 export declare const PIN_INPUT_ALPHANUMERIC_PATTERN = "^[a-zA-Z0-9]+$";
 export type PinInputPattern = string | RegExp;
 export type PinInputCell = {
@@ -16,8 +22,19 @@ type PinInputStateOptions = {
     length: () => number;
     pattern: () => PinInputPattern | undefined;
     pasteTransformer: () => ((text: string) => string) | undefined;
+    normalizeValue: () => ((text: string) => string) | undefined;
+    onRejectInput: () => ((detail: PinInputRejectDetail) => void) | undefined;
     onComplete: () => ((value: string) => void) | undefined;
+    /** Submits the owning form; called when a typed, pasted or autofilled code completes. */
+    submit: () => (() => void) | undefined;
+    submitOnComplete: () => boolean | undefined;
     disabled: () => boolean | undefined;
+    readOnly: () => boolean | undefined;
+};
+/** Text the pattern turned away, and where it came from. */
+export type PinInputRejectDetail = {
+    text: string;
+    source: 'paste' | 'input';
 };
 export declare class PinInputState {
     #private;
@@ -26,20 +43,35 @@ export declare class PinInputState {
     isFocused: boolean;
     selectionStart: number | null;
     selectionEnd: number | null;
+    /** The input text while an IME composition is in progress; the cells display it. */
+    composingValue: string | null;
     inputAttachment: Attachment<HTMLInputElement>;
     constructor(options: PinInputStateOptions);
     get value(): string;
+    /** Whether an IME composition the cells display is in progress. */
+    get isComposing(): boolean;
     get length(): number;
+    /**
+     * The one pipeline typed, pasted, autofilled, composed and controlled text goes through:
+     * format controls and whitespace go, full-width and other numeral systems become ASCII,
+     * grouping separators go where the pattern does not accept them, then `normalizeValue` runs.
+     * The pattern and the length are applied by the caller.
+     */
+    normalizeText(text: string): string;
     get cells(): {
         index: number;
         char: string;
         isActive: boolean;
         hasFakeCaret: boolean;
     }[];
+    /** Whether the field refuses edits: disabled, or read-only. */
+    get isLocked(): boolean;
     focus: () => void;
     handlePointerDown: (event: PointerEvent) => void;
     handleKeydown: (event: KeyboardEvent) => void;
     handleInput: (event: Event) => void;
+    handleCompositionStart: () => void;
+    handleCompositionEnd: (event: CompositionEvent) => void;
     handlePaste: (event: ClipboardEvent) => void;
     handleFocus: () => void;
     handleBlur: () => void;
@@ -51,6 +83,15 @@ export declare class PinInputState {
     private selectCellFromPointer;
     private getPointerCellIndex;
     private syncInputValue;
+    private endComposition;
+    /**
+     * Reports a committed complete paste or autofill even when the code was already complete. A
+     * changed value is reported by the value effect after the update; an unchanged one right away.
+     */
+    private requestComplete;
+    private reject;
+    /** Reports a complete code, and submits the form after one the user typed, pasted or filled. */
+    private complete;
     private notifyComplete;
     private clampSelection;
     private isValueAllowed;

package/dist/components/Form/PinInput/pinInput.state.svelte.js

@@ -1,6 +1,13 @@
 import { untrack } from 'svelte';
+import { normalizeDigits, stripBidiMarks } from '../../../utils/number.js';
 export const PIN_INPUT_DIGITS_PATTERN = '^\\d+$';
 export const PIN_INPUT_CHARS_PATTERN = '^[a-zA-Z]+$';
+/**
+ * Extra characters the native input accepts beyond the code length. Autofilled or inserted text
+ * such as `123-456` reaches the pipeline whole, so it can strip separators before clamping to
+ * `length`, instead of the browser truncating it first.
+ */
+export const PIN_INPUT_TEXT_MARGIN = 32;
 export const PIN_INPUT_ALPHANUMERIC_PATTERN = '^[a-zA-Z0-9]+$';
 const KEYS_TO_IGNORE = new Set([
     'Backspace',
@@ -19,15 +26,34 @@ const KEYS_TO_IGNORE = new Set([
     'Meta',
     'Alt'
 ]);
+/** Folds the full-width ASCII forms that CJK input methods produce (`１２`) to ASCII (`12`). */
+const toHalfWidth = (text) => text.replace(/[\uFF01-\uFF5E]/g, (char) => String.fromCharCode(char.charCodeAt(0) - 0xfee0));
+/** Whitespace, which never belongs to a code. */
+const WHITESPACE_RE = /[\p{Z}\s]/u;
+/** Dashes, dots, slashes and the like that group a code for reading (`123-456`, `123.456`). */
+const SEPARATOR_RE = /[\p{Pd}\u2212._\u00b7\u2022/\\,:;|]/u;
+/** Where the root node of `node` is: the document, or the shadow root it lives in. */
+const rootOf = (node) => node.getRootNode();
+/** Some Android keyboards report all typing as one long composition, so they commit on input. */
+const isAlwaysComposingKeyboard = (node) => /android/i.test(node.ownerDocument.defaultView?.navigator.userAgent ?? '');
 export class PinInputState {
     options;
     input = $state(null);
     isFocused = $state(false);
     selectionStart = $state(null);
     selectionEnd = $state(null);
+    /** The input text while an IME composition is in progress; the cells display it. */
+    composingValue = $state(null);
     inputAttachment;
     #previousValue;
     #previousSelection = [null, null, 'none'];
+    #composition = null;
+    /** A complete pasted or autofilled value to report even when the previous code was complete. */
+    #pendingCompleteValue = null;
+    /** The value the last user edit asked for; completing with it may submit the form. */
+    #userCommit = null;
+    /** What the controlled-value normalization last wrote, so it never re-normalizes its own output. */
+    #normalizedValue = null;
     constructor(options) {
         this.options = options;
         this.#previousValue = this.value.slice(0, this.length);
@@ -35,24 +61,36 @@ export class PinInputState {
             this.input = node;
             this.syncInputValue(this.value.slice(0, this.length));
             this.normalizeSelection();
-            const document = node.ownerDocument;
-            document.addEventListener('selectionchange', this.normalizeSelection, { capture: true });
+            // `selectionchange` does not cross a shadow boundary, so the root node listens, and the
+            // document too for engines that report it there.
+            const root = rootOf(node);
+            const targets = root === node.ownerDocument ? [root] : [root, node.ownerDocument];
+            for (const target of targets) {
+                target.addEventListener('selectionchange', this.normalizeSelection, { capture: true });
+            }
             return () => {
-                document.removeEventListener('selectionchange', this.normalizeSelection, {
-                    capture: true
-                });
+                for (const target of targets) {
+                    target.removeEventListener('selectionchange', this.normalizeSelection, {
+                        capture: true
+                    });
+                }
                 if (this.input === node) {
                     this.input = null;
                     this.selectionStart = null;
                     this.selectionEnd = null;
                     this.#previousSelection = [null, null, 'none'];
+                    this.endComposition();
                 }
             };
         });
         $effect(() => {
             const value = this.value;
-            const clippedValue = value.slice(0, this.length);
+            // A controlled value goes through the same pipeline as typed text, once: what the
+            // pipeline wrote is accepted as it is, so an unstable `normalizeValue` cannot loop.
+            const normalizedValue = value === this.#normalizedValue ? value : this.normalizeText(value);
+            const clippedValue = normalizedValue.slice(0, this.length);
             if (value !== clippedValue) {
+                this.#normalizedValue = clippedValue;
                 this.options.setValue(clippedValue);
             }
             this.syncInputValue(clippedValue);
@@ -62,14 +100,32 @@ export class PinInputState {
     get value() {
         return this.options.value() ?? '';
     }
+    /** Whether an IME composition the cells display is in progress. */
+    get isComposing() {
+        return this.composingValue !== null;
+    }
     get length() {
         const length = this.options.length();
         if (!Number.isFinite(length))
             return 6;
         return Math.max(1, Math.floor(length));
     }
+    /**
+     * The one pipeline typed, pasted, autofilled, composed and controlled text goes through:
+     * format controls and whitespace go, full-width and other numeral systems become ASCII,
+     * grouping separators go where the pattern does not accept them, then `normalizeValue` runs.
+     * The pattern and the length are applied by the caller.
+     */
+    normalizeText(text) {
+        const folded = normalizeDigits(toHalfWidth(stripBidiMarks(text)));
+        const stripped = Array.from(folded)
+            .filter((char) => !WHITESPACE_RE.test(char) &&
+            !(SEPARATOR_RE.test(char) && this.options.pattern() && !this.isValueAllowed(char)))
+            .join('');
+        return this.options.normalizeValue()?.(stripped) ?? stripped;
+    }
     get cells() {
-        const value = this.value;
+        const value = this.composingValue ?? this.value;
         const selectionStart = this.selectionStart ?? Math.min(value.length, this.length - 1);
         const selectionEnd = this.selectionEnd ?? selectionStart;
         const lowerSelection = Math.min(selectionStart, selectionEnd);
@@ -88,6 +144,10 @@ export class PinInputState {
             };
         });
     }
+    /** Whether the field refuses edits: disabled, or read-only. */
+    get isLocked() {
+        return Boolean(this.options.disabled() || this.options.readOnly());
+    }
     focus = () => {
         if (this.options.disabled())
             return;
@@ -97,28 +157,95 @@ export class PinInputState {
         if (this.options.disabled())
             return;
         event.preventDefault();
+        // Moving the caret would end the composition; the input method keeps it until it commits.
+        if (this.#composition)
+            return;
         this.input?.focus({ preventScroll: true });
         this.selectCellFromPointer(event);
     };
     handleKeydown = (event) => {
-        if (event.isComposing || event.ctrlKey || event.metaKey || KEYS_TO_IGNORE.has(event.key)) {
+        if (this.#composition ||
+            event.isComposing ||
+            // 229 marks a keystroke the input method consumes; its text is checked on compositionend.
+            event.keyCode === 229 ||
+            event.ctrlKey ||
+            event.metaKey ||
+            KEYS_TO_IGNORE.has(event.key)) {
             return;
         }
-        if (event.key.length === 1 && !this.isValueAllowed(event.key)) {
-            event.preventDefault();
+        if (event.key.length === 1) {
+            // A key the pipeline drops (a separator, a space) never reaches the input.
+            const typed = this.normalizeText(event.key);
+            if (typed === '') {
+                event.preventDefault();
+            }
+            else if (!this.isValueAllowed(typed)) {
+                event.preventDefault();
+                // The browser never raises an input event for a key that is refused here.
+                if (!this.isLocked)
+                    this.reject(event.key, 'input');
+            }
         }
     };
     handleInput = (event) => {
         const input = event.currentTarget;
         if (!(input instanceof HTMLInputElement))
             return;
-        const nextValue = input.value.slice(0, this.length);
-        if (!this.isValueAllowed(nextValue)) {
+        // The input method owns the text until compositionend; intermediate text is only displayed.
+        if (this.#composition) {
+            this.composingValue = input.value;
+            this.normalizeSelection();
+            return;
+        }
+        const text = input.value;
+        const nextValue = this.normalizeText(text).slice(0, this.length);
+        if (this.isLocked || !this.isValueAllowed(nextValue)) {
+            if (!this.isLocked)
+                this.reject(text, 'input');
             input.value = this.value;
             this.normalizeSelection();
             return;
         }
-        this.commitValue(nextValue, input.selectionStart ?? nextValue.length);
+        this.commitValue(nextValue, Math.min(input.selectionStart ?? nextValue.length, nextValue.length));
+        if (isReplacementInput(event))
+            this.requestComplete(nextValue);
+        this.normalizeSelection();
+    };
+    handleCompositionStart = () => {
+        const input = this.input;
+        if (!input || this.options.disabled() || isAlwaysComposingKeyboard(input))
+            return;
+        const value = this.value;
+        const start = Math.min(input.selectionStart ?? value.length, value.length);
+        const end = Math.min(Math.max(input.selectionEnd ?? start, start), value.length);
+        this.#composition = { value, start, end };
+        this.composingValue = input.value;
+    };
+    handleCompositionEnd = (event) => {
+        const composition = this.#composition;
+        const input = this.input;
+        if (!composition || !input)
+            return;
+        this.endComposition();
+        const value = this.value;
+        const composedText = this.normalizeText(event.data || readComposedText(input.value, composition));
+        const caret = composition.start + composedText.length;
+        // Composed text overwrites the selected cell and the cells after it, as typing does.
+        const nextValue = (value.slice(0, composition.start) +
+            composedText +
+            value.slice(Math.max(composition.end, caret))).slice(0, this.length);
+        if (
+        // A field disabled or locked mid-composition refuses the commit, as any other edit.
+        this.isLocked ||
+            !composedText ||
+            // A paste, or a parent value whose effect has not run yet, replaced the composed text.
+            value !== composition.value ||
+            !this.isValueAllowed(nextValue)) {
+            input.value = value;
+            this.setSelectionRange(composition.start, composition.end);
+            return;
+        }
+        this.commitValue(nextValue, caret);
         this.normalizeSelection();
     };
     handlePaste = (event) => {
@@ -126,23 +253,37 @@ export class PinInputState {
         if (!input)
             return;
         event.preventDefault();
+        if (this.isLocked)
+            return;
         const rawText = event.clipboardData?.getData('text/plain') ?? '';
         const transformer = this.options.pasteTransformer();
-        const pastedText = transformer ? transformer(rawText) : rawText;
+        // The transformer is a paste-only first step; the shared pipeline follows it.
+        const pastedText = this.normalizeText(transformer ? transformer(rawText) : rawText);
+        if (pastedText === '') {
+            if (rawText !== '')
+                this.reject(rawText, 'paste');
+            return;
+        }
         const selectionStart = input.selectionStart ?? this.value.length;
         const selectionEnd = input.selectionEnd ?? selectionStart;
-        const nextValue = (this.value.slice(0, selectionStart) +
-            pastedText +
-            this.value.slice(selectionEnd)).slice(0, this.length);
-        if (!this.isValueAllowed(nextValue))
+        // A paste that fills every cell is a whole new code, wherever the caret was.
+        const nextValue = pastedText.length >= this.length
+            ? pastedText.slice(0, this.length)
+            : (this.value.slice(0, selectionStart) + pastedText + this.value.slice(selectionEnd)).slice(0, this.length);
+        if (!this.isValueAllowed(nextValue)) {
+            this.reject(rawText, 'paste');
             return;
+        }
         const selectionEndAfterPaste = nextValue.length;
         const selectionStartAfterPaste = nextValue.length === this.length
             ? Math.max(selectionEndAfterPaste - 1, 0)
             : selectionEndAfterPaste;
         this.commitValue(nextValue, selectionStartAfterPaste, selectionEndAfterPaste);
+        this.requestComplete(nextValue);
     };
     handleFocus = () => {
+        // A composition cannot outlive focus; drop one whose compositionend never arrived.
+        this.endComposition();
         this.isFocused = true;
         this.options.setFocused(true);
         const selectionEnd = this.value.length;
@@ -159,11 +300,18 @@ export class PinInputState {
         const input = this.input;
         if (!input)
             return;
-        if (input.ownerDocument.activeElement !== input) {
+        // Inside a shadow root the document's active element is the host, not the input.
+        if (rootOf(input).activeElement !== input) {
             this.selectionStart = null;
             this.selectionEnd = null;
             return;
         }
+        // Moving the native selection mid-composition would cancel it, so only mirror the caret.
+        if (this.#composition) {
+            this.selectionStart = this.clampSelection(input.selectionStart ?? 0);
+            this.selectionEnd = this.clampSelection(input.selectionEnd ?? this.selectionStart);
+            return;
+        }
         const nativeStart = this.clampSelection(input.selectionStart ?? this.value.length);
         const nativeEnd = this.clampSelection(input.selectionEnd ?? nativeStart);
         const nativeDirection = input.selectionDirection ?? 'none';
@@ -186,9 +334,14 @@ export class PinInputState {
         this.#previousSelection = [selectionStart, selectionEnd, selectionDirection];
     };
     commitValue(nextValue, selectionStart, selectionEnd = selectionStart) {
+        this.#userCommit = nextValue;
         this.options.setValue(nextValue);
-        if (this.input && this.input.value !== nextValue) {
-            this.input.value = nextValue;
+        // The field can refuse the change (while disabled); the input shows the value it holds.
+        const acceptedValue = this.value;
+        if (acceptedValue !== nextValue)
+            this.#userCommit = null;
+        if (this.input && this.input.value !== acceptedValue) {
+            this.input.value = acceptedValue;
         }
         this.setSelectionRange(selectionStart, selectionEnd);
     }
@@ -273,6 +426,9 @@ export class PinInputState {
         return closestIndex;
     }
     syncInputValue(value) {
+        // A value set from outside mid-composition replaces the text the input method was composing.
+        if (this.#composition && this.#composition.value !== value)
+            this.endComposition();
         if (!this.input || this.input.value === value)
             return;
         this.input.value = value;
@@ -280,12 +436,42 @@ export class PinInputState {
             queueMicrotask(this.normalizeSelection);
         }
     }
+    endComposition() {
+        this.#composition = null;
+        this.composingValue = null;
+    }
+    /**
+     * Reports a committed complete paste or autofill even when the code was already complete. A
+     * changed value is reported by the value effect after the update; an unchanged one right away.
+     */
+    requestComplete(value) {
+        if (value.length !== this.length || this.value !== value)
+            return;
+        if (value === this.#previousValue) {
+            this.complete(value, true);
+            return;
+        }
+        this.#pendingCompleteValue = value;
+    }
+    reject(text, source) {
+        this.options.onRejectInput()?.({ text, source });
+    }
+    /** Reports a complete code, and submits the form after one the user typed, pasted or filled. */
+    complete(value, byUser) {
+        this.options.onComplete()?.(value);
+        if (byUser && this.options.submitOnComplete() && !this.isLocked)
+            this.options.submit()?.();
+    }
     notifyComplete(value) {
         const previousValue = this.#previousValue;
+        const isRequested = this.#pendingCompleteValue === value;
+        const byUser = this.#userCommit === value;
+        this.#pendingCompleteValue = null;
+        this.#userCommit = null;
         if (previousValue !== value &&
-            previousValue.length < this.length &&
-            value.length === this.length) {
-            this.options.onComplete()?.(value);
+            value.length === this.length &&
+            (isRequested || previousValue.length < this.length)) {
+            this.complete(value, byUser);
         }
         this.#previousValue = value;
     }
@@ -303,3 +489,20 @@ export class PinInputState {
         return regex.test(value);
     }
 }
+/** Whether an input event replaced the whole text, as autofill does, rather than typed into it. */
+const isReplacementInput = (event) => {
+    const inputType = event.inputType;
+    // Some browsers autofill with a plain `input` Event that carries no input type.
+    return inputType === undefined || inputType === 'insertReplacementText';
+};
+/** Recovers the composed text from the input when compositionend carries no data. */
+const readComposedText = (inputValue, { value, start, end }) => {
+    const prefix = value.slice(0, start);
+    const suffix = value.slice(end);
+    if (inputValue.length < prefix.length + suffix.length ||
+        !inputValue.startsWith(prefix) ||
+        !inputValue.endsWith(suffix)) {
+        return '';
+    }
+    return inputValue.slice(prefix.length, inputValue.length - suffix.length);
+};

package/dist/components/Form/PinInput/pinInput.theme.d.ts

@@ -17,7 +17,12 @@ export declare const pinInputTheme: {
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    input: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        composing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -33,6 +38,13 @@ export declare const pinInputTheme: {
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     character: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caret: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
 };
@@ -56,7 +68,12 @@ export declare const setPinInputTheme: (theme: InferComponentTheme<{
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    input: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        composing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -72,6 +89,13 @@ export declare const setPinInputTheme: (theme: InferComponentTheme<{
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     character: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caret: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
@@ -93,7 +117,12 @@ export declare const usePinInputTheme: import("../../../utils/cva/theme.js").Use
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    input: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
+    input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        composing: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     cell: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -109,6 +138,13 @@ export declare const usePinInputTheme: import("../../../utils/cva/theme.js").Use
             false: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     character: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caret: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>;

package/dist/components/Form/PinInput/pinInput.theme.js

@@ -27,7 +27,19 @@ const defaultRoot = cva({
     }
 });
 const defaultInput = cva({
-    base: 'absolute inset-0 z-10 size-full appearance-none border-0 bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent selection:text-transparent [font-size:16px] disabled:cursor-not-allowed'
+    base: 'absolute inset-0 z-10 size-full appearance-none border-0 bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent selection:text-transparent [font-size:16px] disabled:cursor-not-allowed',
+    variants: {
+        // An input method paints its composition underline or clause highlight whatever the text
+        // color, so the input hides while composing and the cells show the text. It stays opaque
+        // otherwise: iOS offers long-press paste only on a visible input.
+        composing: {
+            true: 'opacity-0',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        composing: false
+    }
 });
 const defaultCell = cva({
     base: 'relative grid shrink-0 place-items-center overflow-hidden raised-1 bg-surface-raised font-mono font-medium tabular-nums text-neutral transition-[color,background-color,border-color,box-shadow]',
@@ -52,6 +64,19 @@ const defaultCell = cva({
         disabled: false
     }
 });
+const defaultSeparator = cva({
+    base: 'h-0.5 shrink-0 rounded-full bg-neutral-muted',
+    variants: {
+        size: {
+            small: 'w-1.5',
+            normal: 'w-2',
+            large: 'w-3'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
 const defaultCharacter = cva({
     base: 'select-none leading-none'
 });
@@ -63,6 +88,7 @@ export const pinInputTheme = {
     root: defaultRoot,
     input: defaultInput,
     cell: defaultCell,
+    separator: defaultSeparator,
     character: defaultCharacter,
     caret: defaultCaret
 };