@johly/bits-ui 2.18.1

package/dist/bits/pagination/pagination.svelte.js

@@ -0,0 +1,264 @@
+import { attachRef } from "svelte-toolbelt";
+import { Context } from "runed";
+import { createBitsAttrs } from "../../internal/attrs.js";
+import { getElemDirection } from "../../internal/locale.js";
+import { kbd } from "../../internal/kbd.js";
+import { getDirectionalKeys } from "../../internal/get-directional-keys.js";
+import { useId } from "../../shared/index.js";
+const paginationAttrs = createBitsAttrs({
+    component: "pagination",
+    parts: ["root", "page", "prev", "next"],
+});
+const PaginationRootContext = new Context("Pagination.Root");
+export class PaginationRootState {
+    static create(opts) {
+        return PaginationRootContext.set(new PaginationRootState(opts));
+    }
+    opts;
+    attachment;
+    totalPages = $derived.by(() => {
+        if (this.opts.count.current === 0)
+            return 1;
+        return Math.ceil(this.opts.count.current / this.opts.perPage.current);
+    });
+    range = $derived.by(() => {
+        const start = (this.opts.page.current - 1) * this.opts.perPage.current;
+        const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);
+        return { start: start + 1, end };
+    });
+    pages = $derived.by(() => getPageItems({
+        page: this.opts.page.current,
+        totalPages: this.totalPages,
+        siblingCount: this.opts.siblingCount.current,
+    }));
+    hasPrevPage = $derived.by(() => this.opts.page.current > 1);
+    hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    setPage(page) {
+        this.opts.page.current = page;
+    }
+    getPageTriggerNodes() {
+        const node = this.opts.ref.current;
+        if (!node)
+            return [];
+        return Array.from(node.querySelectorAll("[data-pagination-page]"));
+    }
+    getButtonNode(type) {
+        const node = this.opts.ref.current;
+        if (!node)
+            return;
+        return node.querySelector(paginationAttrs.selector(type));
+    }
+    prevPage() {
+        this.opts.page.current = Math.max(this.opts.page.current - 1, 1);
+    }
+    nextPage() {
+        this.opts.page.current = Math.min(this.opts.page.current + 1, this.totalPages);
+    }
+    snippetProps = $derived.by(() => ({
+        pages: this.pages,
+        range: this.range,
+        currentPage: this.opts.page.current,
+    }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-orientation": this.opts.orientation.current,
+        [paginationAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+export class PaginationPageState {
+    static create(opts) {
+        return new PaginationPageState(opts, PaginationRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
+        this.root.setPage(this.opts.page.current.value);
+    }
+    onkeydown(e) {
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.root.setPage(this.opts.page.current.value);
+        }
+        else {
+            handleTriggerKeydown(e, this.opts.ref.current, this.root);
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "aria-label": `Page ${this.opts.page.current.value}`,
+        "data-value": `${this.opts.page.current.value}`,
+        "data-selected": this.#isSelected ? "" : undefined,
+        [paginationAttrs.page]: "",
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class PaginationButtonState {
+    static create(opts) {
+        return new PaginationButtonState(opts, PaginationRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #action() {
+        this.opts.type === "prev" ? this.root.prevPage() : this.root.nextPage();
+    }
+    #isDisabled = $derived.by(() => {
+        if (this.opts.disabled.current)
+            return true;
+        if (this.opts.type === "prev")
+            return !this.root.hasPrevPage;
+        if (this.opts.type === "next")
+            return !this.root.hasNextPage;
+        return false;
+    });
+    onclick(e) {
+        if (this.opts.disabled.current)
+            return;
+        if (e.button !== 0)
+            return;
+        this.#action();
+    }
+    onkeydown(e) {
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#action();
+        }
+        else {
+            handleTriggerKeydown(e, this.opts.ref.current, this.root);
+        }
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [paginationAttrs[this.opts.type]]: "",
+        disabled: this.#isDisabled,
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+//
+// HELPERS
+//
+/**
+ * Shared logic for handling keyboard navigation on
+ * pagination page triggers and prev/next buttons.
+ *
+ *
+ * @param e - KeyboardEvent
+ * @param node - The HTMLElement that triggered the event.
+ * @param root - The root pagination state instance
+ */
+function handleTriggerKeydown(e, node, root) {
+    if (!node || !root.opts.ref.current)
+        return;
+    const items = root.getPageTriggerNodes();
+    const nextButton = root.getButtonNode("next");
+    const prevButton = root.getButtonNode("prev");
+    if (prevButton) {
+        items.unshift(prevButton);
+    }
+    if (nextButton) {
+        items.push(nextButton);
+    }
+    const currentIndex = items.indexOf(node);
+    const dir = getElemDirection(root.opts.ref.current);
+    const { nextKey, prevKey } = getDirectionalKeys(dir, root.opts.orientation.current);
+    const loop = root.opts.loop.current;
+    const keyToIndex = {
+        [nextKey]: currentIndex + 1,
+        [prevKey]: currentIndex - 1,
+        [kbd.HOME]: 0,
+        [kbd.END]: items.length - 1,
+    };
+    let itemIndex = keyToIndex[e.key];
+    if (itemIndex === undefined)
+        return;
+    e.preventDefault();
+    if (itemIndex < 0 && loop) {
+        itemIndex = items.length - 1;
+    }
+    else if (itemIndex === items.length && loop) {
+        itemIndex = 0;
+    }
+    const itemToFocus = items[itemIndex];
+    if (!itemToFocus)
+        return;
+    itemToFocus.focus();
+}
+/**
+ * Returns an array of page items used to render out the
+ * pagination page triggers.
+ *
+ * Credit: https://github.com/melt-ui/melt-ui
+ */
+function getPageItems({ page = 1, totalPages, siblingCount = 1 }) {
+    const pageItems = [];
+    const pagesToShow = new Set([1, totalPages]);
+    const firstItemWithSiblings = 3 + siblingCount;
+    const lastItemWithSiblings = totalPages - 2 - siblingCount;
+    if (firstItemWithSiblings > lastItemWithSiblings) {
+        for (let i = 2; i <= totalPages - 1; i++) {
+            pagesToShow.add(i);
+        }
+    }
+    else if (page < firstItemWithSiblings) {
+        for (let i = 2; i <= Math.min(firstItemWithSiblings, totalPages); i++) {
+            pagesToShow.add(i);
+        }
+    }
+    else if (page > lastItemWithSiblings) {
+        for (let i = totalPages - 1; i >= Math.max(lastItemWithSiblings, 2); i--) {
+            pagesToShow.add(i);
+        }
+    }
+    else {
+        for (let i = Math.max(page - siblingCount, 2); i <= Math.min(page + siblingCount, totalPages); i++) {
+            pagesToShow.add(i);
+        }
+    }
+    function addPage(value) {
+        pageItems.push({ type: "page", value, key: `page-${value}` });
+    }
+    function addEllipsis() {
+        const id = useId();
+        pageItems.push({ type: "ellipsis", key: `ellipsis-${id}` });
+    }
+    let lastNumber = 0;
+    for (const p of Array.from(pagesToShow).sort((a, b) => a - b)) {
+        if (p - lastNumber > 1) {
+            addEllipsis();
+        }
+        addPage(p);
+        lastNumber = p;
+    }
+    return pageItems;
+}

package/dist/bits/pagination/types.d.ts

@@ -0,0 +1,76 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+type PaginationSnippetProps = {
+    pages: PageItem[];
+    range: {
+        start: number;
+        end: number;
+    };
+    currentPage: number;
+};
+export type PaginationRootPropsWithoutHTML = WithChild<{
+    /**
+     * The total number of items to be paginated.
+     */
+    count: number;
+    /**
+     * The number of items per page.
+     *
+     * @defaultValue 1
+     */
+    perPage?: number;
+    /**
+     * The number of visible items before and after the current page.
+     *
+     * @defaultValue 1
+     */
+    siblingCount?: number;
+    /**
+     * The current page number.
+     *
+     * @defaultValue 1
+     */
+    page?: number;
+    /**
+     * A callback function called when the page changes.
+     */
+    onPageChange?: OnChangeFn<number>;
+    /**
+     * Whether keyboard navigation should loop back to the
+     * first or last page trigger when reaching either end.
+     *
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the pagination component. Used to
+     * determine how keyboard navigation should work between
+     * pages.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+}, PaginationSnippetProps>;
+export type PaginationRootProps = PaginationRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PaginationRootPropsWithoutHTML>;
+export type PaginationPagePropsWithoutHTML = WithChild<{
+    page: Page;
+}>;
+export type PaginationPageProps = PaginationPagePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationPagePropsWithoutHTML>;
+export type PaginationPrevButtonPropsWithoutHTML = WithChild;
+export type PaginationPrevButtonProps = PaginationPrevButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationPrevButtonPropsWithoutHTML>;
+export type PaginationNextButtonPropsWithoutHTML = WithChild;
+export type PaginationNextButtonProps = PaginationNextButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PaginationNextButtonPropsWithoutHTML>;
+export type Page = {
+    type: "page";
+    value: number;
+};
+export type Ellipsis = {
+    type: "ellipsis";
+};
+export type PageItem = (Page | Ellipsis) & {
+    /**
+     * A unique key to be used as the key in a svelte `#each` block.
+     */
+    key: string;
+};
+export {};

package/dist/bits/pagination/types.js

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

package/dist/bits/pin-input/components/pin-input-cell.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PinInputCellProps } from "../types.js";
+	import { PinInputCellState } from "../pin-input.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		cell,
+		child,
+		children,
+		...restProps
+	}: PinInputCellProps = $props();
+
+	const cellState = PinInputCellState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		cell: boxWith(() => cell),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, cellState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,4 @@
+import type { PinInputCellProps } from "../types.js";
+declare const PinInputCell: import("svelte").Component<PinInputCellProps, {}, "ref">;
+type PinInputCell = ReturnType<typeof PinInputCell>;
+export default PinInputCell;

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { PinInputRootProps } from "../types.js";
+	import { PinInputRootState } from "../pin-input.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		inputId = `${createId(uid)}-input`,
+		ref = $bindable(null),
+		inputRef = $bindable(null),
+		maxlength = 6,
+		textalign = "left",
+		pattern,
+		inputmode = "numeric",
+		onComplete = noop,
+		pushPasswordManagerStrategy = "increase-width",
+		class: containerClass = "",
+		children,
+		autocomplete = "one-time-code",
+		disabled = false,
+		value = $bindable(""),
+		onValueChange = noop,
+		pasteTransformer,
+		...restProps
+	}: PinInputRootProps = $props();
+
+	const rootState = PinInputRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		inputRef: boxWith(
+			() => inputRef,
+			(v) => (inputRef = v)
+		),
+		inputId: boxWith(() => inputId),
+		autocomplete: boxWith(() => autocomplete),
+		maxLength: boxWith(() => maxlength),
+		textAlign: boxWith(() => textalign),
+		disabled: boxWith(() => disabled),
+		inputmode: boxWith(() => inputmode),
+		pattern: boxWith(() => pattern),
+		onComplete: boxWith(() => onComplete),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		pushPasswordManagerStrategy: boxWith(() => pushPasswordManagerStrategy),
+		pasteTransformer: boxWith(() => pasteTransformer),
+	});
+
+	const mergedInputProps = $derived(mergeProps(restProps, rootState.inputProps));
+	const mergedRootProps = $derived(mergeProps(rootState.rootProps, { class: containerClass }));
+	const mergedInputWrapperProps = $derived(mergeProps(rootState.inputWrapperProps, {}));
+</script>
+
+<div {...mergedRootProps}>
+	{@render children?.(rootState.snippetProps)}
+
+	<div {...mergedInputWrapperProps}>
+		<input {...mergedInputProps} />
+	</div>
+</div>

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

@@ -0,0 +1,4 @@
+import type { PinInputRootProps } from "../types.js";
+declare const PinInput: import("svelte").Component<PinInputRootProps, {}, "value" | "inputRef" | "ref">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/bits/pin-input/exports.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Cell } from "./components/pin-input-cell.svelte";
+export type { PinInputRootProps as RootProps, PinInputCellProps as CellProps } from "./types.js";

package/dist/bits/pin-input/exports.js

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/pin-input.svelte";
+export { default as Cell } from "./components/pin-input-cell.svelte";

package/dist/bits/pin-input/index.d.ts

@@ -0,0 +1 @@
+export * as PinInput from "./exports.js";

package/dist/bits/pin-input/index.js

@@ -0,0 +1 @@
+export * as PinInput from "./exports.js";

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

@@ -0,0 +1,122 @@
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { PinInputCell, PinInputRootProps as RootComponentProps } from "./types.js";
+import type { BitsEvent, BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, 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>;
+    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;
+    onmouseover: (_: BitsMouseEvent) => void;
+    onmouseleave: (_: BitsMouseEvent) => void;
+    onblur: (_: BitsFocusEvent) => void;
+    readonly inputProps: {
+        id: string;
+        style: {
+            position: string;
+            inset: number;
+            width: string;
+            clipPath: string | undefined;
+            height: string;
+            display: string;
+            textAlign: "center" | "left" | "right" | 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: "name" | "off" | "on" | "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" | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national" | "home email" | "home tel" | "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 email" | "mobile tel" | "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 email" | "work tel" | "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" | "email webauthn" | "tel 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 email webauthn" | "home tel 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 email webauthn" | "mobile tel 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 email webauthn" | "work tel 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 email" | "billing email webauthn" | "billing tel" | "billing tel 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 email" | "billing home email webauthn" | "billing home tel" | "billing home tel 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 email" | "billing mobile email webauthn" | "billing mobile tel" | "billing mobile tel 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 email" | "billing work email webauthn" | "billing work tel" | "billing work tel 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 email" | "shipping email webauthn" | "shipping tel" | "shipping tel 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 email" | "shipping home email webauthn" | "shipping home tel" | "shipping home tel 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 email" | "shipping mobile email webauthn" | "shipping mobile tel" | "shipping mobile tel 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 email" | "shipping work email webauthn" | "shipping work tel" | "shipping work tel 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} email` | `section-${string} email webauthn` | `section-${string} tel` | `section-${string} tel 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" | "url";
+        "data-pin-input-input": string;
+        "data-pin-input-input-mss": number | null;
+        "data-pin-input-input-mse": number | null;
+        inputmode: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "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: (_: BitsMouseEvent) => void;
+        onmouseleave: (_: BitsMouseEvent) => void;
+        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 declare function syncTimeouts(cb: (...args: any[]) => unknown, domContext: DOMContext): number[];
+export {};