@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/pin-input/index.cjs

@@ -0,0 +1,595 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_visually_hidden = require("../../visually-hidden-BgSCFLz_.cjs");
+const require_equal = require("../../equal-C927y7MN.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_warning = require("../../warning-HAmFXLHm.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/pin-input/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("pin-input").parts("root", "label", "input", "control");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/pin-input/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
+const getInputId = (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`;
+const getHiddenInputId = (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`;
+const getControlId = (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getInputEls = (ctx) => {
+	const selector = `input[data-ownedby=${CSS.escape(getRootId(ctx))}]`;
+	return require_dom_query.queryAll(getRootEl(ctx), selector);
+};
+const getInputElAtIndex = (ctx, index) => getInputEls(ctx)[index];
+const getFirstInputEl = (ctx) => getInputEls(ctx)[0];
+const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
+const setInputValue = (inputEl, value) => {
+	inputEl.value = value;
+	inputEl.setAttribute("value", value);
+};
+//#endregion
+//#region src/machines/pin-input/utils.ts
+const REGEX = {
+	numeric: /^[0-9]+$/,
+	alphabetic: /^[A-Za-z]+$/,
+	alphanumeric: /^[a-zA-Z0-9]+$/i
+};
+function isValidType(type, value) {
+	if (!type) return true;
+	return !!REGEX[type]?.test(value);
+}
+function isValidValue(value, type, pattern) {
+	if (!pattern) return isValidType(type, value);
+	return new RegExp(pattern, "g").test(value);
+}
+//#endregion
+//#region src/machines/pin-input/connect.ts
+function connect(service, normalize) {
+	const { send, context, computed, prop, scope } = service;
+	const complete = computed("isValueComplete");
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const invalid = !!prop("invalid");
+	const required = !!prop("required");
+	const translations = prop("translations");
+	const focusedIndex = context.get("focusedIndex");
+	function focus() {
+		getFirstInputEl(scope)?.focus();
+	}
+	return {
+		focus,
+		count: context.get("count"),
+		items: Array.from({ length: context.get("count") }).map((_, i) => i),
+		value: context.get("value"),
+		valueAsString: computed("valueAsString"),
+		complete,
+		setValue(value) {
+			if (!Array.isArray(value)) require_warning.invariant("[pin-input/setValue] value must be an array");
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "VALUE.CLEAR" });
+		},
+		setValueAtIndex(index, value) {
+			send({
+				type: "VALUE.SET",
+				value,
+				index
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				dir: prop("dir"),
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-complete": require_dom_query.dataAttr(complete),
+				"data-readonly": require_dom_query.dataAttr(readOnly)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				htmlFor: getHiddenInputId(scope),
+				id: getLabelId(scope),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-complete": require_dom_query.dataAttr(complete),
+				"data-required": require_dom_query.dataAttr(required),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				onClick(event) {
+					event.preventDefault();
+					focus();
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				"aria-hidden": true,
+				type: "text",
+				tabIndex: -1,
+				id: getHiddenInputId(scope),
+				readOnly,
+				disabled,
+				required,
+				name: prop("name"),
+				form: prop("form"),
+				style: require_visually_hidden.visuallyHiddenStyle,
+				maxLength: computed("valueLength"),
+				defaultValue: computed("valueAsString")
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope)
+			});
+		},
+		getInputProps(props) {
+			const { index } = props;
+			const inputType = prop("type") === "numeric" ? "tel" : "text";
+			const valueLength = computed("valueLength");
+			const tabbableIndex = focusedIndex !== -1 ? focusedIndex : Math.min(computed("filledValueLength"), valueLength - 1);
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				disabled,
+				tabIndex: index === tabbableIndex ? 0 : -1,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-complete": require_dom_query.dataAttr(complete),
+				"data-filled": require_dom_query.dataAttr(computed("_value")[index] !== ""),
+				id: getInputId(scope, index.toString()),
+				"data-index": index,
+				"data-ownedby": getRootId(scope),
+				"aria-label": translations?.inputLabel?.(index, computed("valueLength")),
+				inputMode: prop("otp") || prop("type") === "numeric" ? "numeric" : "text",
+				"aria-invalid": require_dom_query.ariaAttr(invalid),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				enterKeyHint: index === valueLength - 1 ? "done" : "next",
+				type: prop("mask") ? "password" : inputType,
+				defaultValue: computed("_value")[index] || "",
+				readOnly,
+				autoCapitalize: "none",
+				autoComplete: prop("otp") ? "one-time-code" : "off",
+				placeholder: focusedIndex === index ? "" : prop("placeholder"),
+				onPaste(event) {
+					let pastedValue = event.clipboardData?.getData("text/plain");
+					if (!pastedValue) return;
+					const transformer = prop("sanitizeValue");
+					if (transformer) pastedValue = transformer(pastedValue);
+					if (!isValidValue(pastedValue, prop("type"), prop("pattern"))) {
+						send({
+							type: "VALUE.INVALID",
+							value: pastedValue
+						});
+						event.preventDefault();
+						return;
+					}
+					event.preventDefault();
+					send({
+						type: "INPUT.PASTE",
+						value: pastedValue
+					});
+				},
+				onBeforeInput(event) {
+					try {
+						const value = require_event.getBeforeInputValue(event);
+						if (!isValidValue(value, prop("type"), prop("pattern"))) {
+							send({
+								type: "VALUE.INVALID",
+								value
+							});
+							event.preventDefault();
+						}
+						if (value.length > 1) event.currentTarget.setSelectionRange(0, 1, "forward");
+					} catch {}
+				},
+				onChange(event) {
+					const evt = require_event.getNativeEvent(event);
+					const { value } = event.currentTarget;
+					if (evt.inputType === "insertFromPaste") {
+						event.currentTarget.value = value[0] || "";
+						return;
+					}
+					if (value.length > 2) {
+						send({
+							type: "INPUT.PASTE",
+							value
+						});
+						event.currentTarget.value = value[0];
+						event.preventDefault();
+						return;
+					}
+					if (evt.inputType === "deleteContentBackward") {
+						send({ type: "INPUT.BACKSPACE" });
+						return;
+					}
+					if (evt.inputType === "deleteByCut") {
+						send({ type: "INPUT.DELETE" });
+						return;
+					}
+					if (value === computed("focusedValue")) return;
+					send({
+						type: "INPUT.CHANGE",
+						value,
+						index
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (require_event.isComposingEvent(event)) return;
+					if (require_event.isModifierKey(event)) return;
+					if (event.key.length === 1 && computed("focusedValue") === event.key) {
+						event.preventDefault();
+						send({ type: "INPUT.ADVANCE" });
+						return;
+					}
+					const exec = {
+						Backspace() {
+							send({ type: "INPUT.BACKSPACE" });
+						},
+						Delete() {
+							send({ type: "INPUT.DELETE" });
+						},
+						ArrowLeft() {
+							send({ type: "INPUT.ARROW_LEFT" });
+						},
+						ArrowRight() {
+							send({ type: "INPUT.ARROW_RIGHT" });
+						},
+						Enter() {
+							send({ type: "INPUT.ENTER" });
+						},
+						Home() {
+							send({ type: "INPUT.HOME" });
+						},
+						End() {
+							send({ type: "INPUT.END" });
+						}
+					}[require_event.getEventKey(event, {
+						dir: prop("dir"),
+						orientation: "horizontal"
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+					}
+				},
+				onFocus() {
+					send({
+						type: "INPUT.FOCUS",
+						index
+					});
+				},
+				onBlur(event) {
+					const target = event.relatedTarget;
+					if (require_dom_query.isHTMLElement(target) && target.dataset.ownedby === getRootId(scope)) return;
+					send({
+						type: "INPUT.BLUR",
+						index
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/pin-input/machine.ts
+const { choose, createMachine } = require_core.setup();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			placeholder: "○",
+			otp: false,
+			type: "numeric",
+			defaultValue: props.count ? fill([], props.count) : [],
+			...props,
+			translations: {
+				inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				value: prop("value") ? fill(prop("value"), prop("count")) : void 0,
+				defaultValue: fill(prop("defaultValue") ?? [], prop("count")),
+				isEqual: require_equal.isEqual,
+				onChange(value) {
+					prop("onValueChange")?.({
+						value,
+						valueAsString: value.join("")
+					});
+				}
+			})),
+			focusedIndex: bindable(() => ({
+				sync: true,
+				defaultValue: -1
+			})),
+			count: bindable(() => ({ defaultValue: prop("count") }))
+		};
+	},
+	computed: {
+		_value: ({ context }) => fill(context.get("value"), context.get("count")),
+		valueLength: ({ computed }) => computed("_value").length,
+		filledValueLength: ({ computed }) => computed("_value").filter((v) => v?.trim() !== "").length,
+		isValueComplete: ({ computed }) => computed("valueLength") === computed("filledValueLength"),
+		valueAsString: ({ computed }) => computed("_value").join(""),
+		focusedValue: ({ computed, context }) => computed("_value")[context.get("focusedIndex")] || ""
+	},
+	entry: choose([{
+		guard: "autoFocus",
+		actions: ["setInputCount", "setFocusIndexToFirst"]
+	}, { actions: ["setInputCount"] }]),
+	watch({ action, track, context, computed }) {
+		track([() => context.get("focusedIndex")], () => {
+			action(["focusInput", "selectInputIfNeeded"]);
+		});
+		track([() => context.get("value").join(",")], () => {
+			action(["syncInputElements", "dispatchInputEvent"]);
+		});
+		track([() => computed("isValueComplete")], () => {
+			action([
+				"invokeOnComplete",
+				"blurFocusedInputIfNeeded",
+				"autoSubmitIfNeeded"
+			]);
+		});
+	},
+	on: {
+		"VALUE.SET": [{
+			guard: "hasIndex",
+			actions: ["setValueAtIndex"]
+		}, { actions: ["setValue"] }],
+		"VALUE.CLEAR": { actions: ["clearValue", "setFocusIndexToFirst"] }
+	},
+	states: {
+		idle: { on: { "INPUT.FOCUS": {
+			target: "focused",
+			actions: ["setFocusedIndex"]
+		} } },
+		focused: { on: {
+			"INPUT.CHANGE": { actions: [
+				"setFocusedValue",
+				"syncInputValue",
+				"advanceFocusedIndex"
+			] },
+			"INPUT.ADVANCE": { actions: ["advanceFocusedIndex"] },
+			"INPUT.PASTE": { actions: ["setPastedValue", "setLastValueFocusIndex"] },
+			"INPUT.FOCUS": { actions: ["setFocusedIndex", "focusInput"] },
+			"INPUT.BLUR": {
+				target: "idle",
+				actions: ["clearFocusedIndex"]
+			},
+			"INPUT.DELETE": {
+				guard: "hasValue",
+				actions: ["clearFocusedValue"]
+			},
+			"INPUT.ARROW_LEFT": { actions: ["setPrevFocusedIndex"] },
+			"INPUT.ARROW_RIGHT": { actions: ["setNextFocusedIndex"] },
+			"INPUT.HOME": { actions: ["setFocusIndexToFirst"] },
+			"INPUT.END": { actions: ["setFocusIndexToLast"] },
+			"INPUT.BACKSPACE": [{
+				guard: "hasValue",
+				actions: ["clearFocusedValue", "setPrevFocusedIndex"]
+			}, { actions: ["setPrevFocusedIndex", "clearFocusedValue"] }],
+			"INPUT.ENTER": {
+				guard: "isValueComplete",
+				actions: ["requestFormSubmit"]
+			},
+			"VALUE.INVALID": { actions: ["invokeOnInvalid"] }
+		} }
+	},
+	implementations: {
+		guards: {
+			autoFocus: ({ prop }) => !!prop("autoFocus"),
+			hasValue: ({ context, computed }) => computed("_value")[context.get("focusedIndex")] !== "",
+			isValueComplete: ({ computed }) => computed("isValueComplete"),
+			hasIndex: ({ event }) => event.index !== void 0
+		},
+		actions: {
+			dispatchInputEvent({ computed, scope }) {
+				require_form.dispatchInputValueEvent(getHiddenInputEl(scope), { value: computed("valueAsString") });
+			},
+			setInputCount({ scope, context, prop }) {
+				if (prop("count")) return;
+				const inputEls = getInputEls(scope);
+				context.set("count", inputEls.length);
+			},
+			focusInput({ context, scope }) {
+				const focusedIndex = context.get("focusedIndex");
+				if (focusedIndex === -1) return;
+				queueMicrotask(() => {
+					getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+				});
+			},
+			selectInputIfNeeded({ context, prop, scope }) {
+				const focusedIndex = context.get("focusedIndex");
+				if (!prop("selectOnFocus") || focusedIndex === -1) return;
+				require_raf.raf(() => {
+					getInputElAtIndex(scope, focusedIndex)?.select();
+				});
+			},
+			invokeOnComplete({ computed, prop }) {
+				if (!computed("isValueComplete")) return;
+				prop("onValueComplete")?.({
+					value: computed("_value"),
+					valueAsString: computed("valueAsString")
+				});
+			},
+			invokeOnInvalid({ context, event, prop }) {
+				prop("onValueInvalid")?.({
+					value: event.value,
+					index: context.get("focusedIndex")
+				});
+			},
+			clearFocusedIndex({ context }) {
+				context.set("focusedIndex", -1);
+			},
+			setFocusedIndex({ context, event, computed }) {
+				const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+				context.set("focusedIndex", Math.min(event.index, maxIndex));
+			},
+			setValue({ context, event }) {
+				const value = fill(event.value, context.get("count"));
+				context.set("value", value);
+			},
+			setFocusedValue({ context, event, computed, flush }) {
+				const focusedValue = computed("focusedValue");
+				const focusedIndex = context.get("focusedIndex");
+				const value = getNextValue(focusedValue, event.value);
+				flush(() => {
+					context.set("value", require_utils.setValueAtIndex(computed("_value"), focusedIndex, value));
+				});
+			},
+			revertInputValue({ context, computed, scope }) {
+				const inputEl = getInputElAtIndex(scope, context.get("focusedIndex"));
+				setInputValue(inputEl, computed("focusedValue"));
+			},
+			syncInputValue({ context, event, scope }) {
+				const value = context.get("value");
+				const inputEl = getInputElAtIndex(scope, event.index);
+				setInputValue(inputEl, value[event.index]);
+			},
+			syncInputElements({ context, scope }) {
+				const inputEls = getInputEls(scope);
+				const value = context.get("value");
+				inputEls.forEach((inputEl, index) => {
+					setInputValue(inputEl, value[index]);
+				});
+			},
+			setPastedValue({ context, event, computed, flush }) {
+				require_raf.raf(() => {
+					const valueAsString = computed("valueAsString");
+					const focusedIndex = context.get("focusedIndex");
+					const valueLength = computed("valueLength");
+					const filledValueLength = computed("filledValueLength");
+					const startIndex = Math.min(focusedIndex, filledValueLength);
+					const value = fill(`${startIndex > 0 ? valueAsString.substring(0, focusedIndex) : ""}${event.value.substring(0, valueLength - startIndex)}`.split(""), valueLength);
+					flush(() => {
+						context.set("value", value);
+					});
+				});
+			},
+			setValueAtIndex({ context, event, computed }) {
+				const nextValue = getNextValue(computed("focusedValue"), event.value);
+				context.set("value", require_utils.setValueAtIndex(computed("_value"), event.index, nextValue));
+			},
+			clearValue({ context }) {
+				const nextValue = Array.from({ length: context.get("count") }).fill("");
+				queueMicrotask(() => {
+					context.set("value", nextValue);
+				});
+			},
+			clearFocusedValue({ context, computed }) {
+				const focusedIndex = context.get("focusedIndex");
+				if (focusedIndex === -1) return;
+				const value = [...computed("_value")];
+				value.splice(focusedIndex, 1);
+				value.push("");
+				context.set("value", value);
+			},
+			setFocusIndexToFirst({ context }) {
+				context.set("focusedIndex", 0);
+			},
+			setFocusIndexToLast({ context, computed }) {
+				context.set("focusedIndex", Math.max(computed("filledValueLength") - 1, 0));
+			},
+			advanceFocusedIndex({ context, computed }) {
+				context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
+			},
+			setNextFocusedIndex({ context, computed }) {
+				const nextIndex = context.get("focusedIndex") + 1;
+				const maxIndex = Math.min(computed("filledValueLength"), computed("valueLength") - 1);
+				context.set("focusedIndex", Math.min(nextIndex, maxIndex));
+			},
+			setPrevFocusedIndex({ context }) {
+				context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
+			},
+			setLastValueFocusIndex({ context, computed }) {
+				require_raf.raf(() => {
+					context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
+				});
+			},
+			blurFocusedInputIfNeeded({ context, computed, prop, scope }) {
+				if (!prop("blurOnComplete") || !computed("isValueComplete")) return;
+				require_raf.raf(() => {
+					getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
+				});
+			},
+			requestFormSubmit({ computed, prop, scope }) {
+				if (!prop("name") || !computed("isValueComplete")) return;
+				getHiddenInputEl(scope)?.form?.requestSubmit();
+			},
+			autoSubmitIfNeeded({ computed, prop, scope }) {
+				if (!prop("autoSubmit") || !computed("isValueComplete")) return;
+				getHiddenInputEl(scope)?.form?.requestSubmit();
+			}
+		}
+	}
+});
+function getNextValue(current, next) {
+	let nextValue = next;
+	if (current[0] === next[0]) nextValue = next[1];
+	else if (current[0] === next[1]) nextValue = next[0];
+	const chars = nextValue.split("");
+	nextValue = chars[chars.length - 1];
+	return nextValue ?? "";
+}
+function fill(value, count) {
+	const length = count || value.length;
+	return Array.from({ length }).fill("").map((v, i) => value[i] || v);
+}
+//#endregion
+//#region src/machines/pin-input/props.ts
+const props = require_create_props.createProps()([
+	"autoFocus",
+	"autoSubmit",
+	"blurOnComplete",
+	"count",
+	"defaultValue",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"mask",
+	"name",
+	"onValueChange",
+	"onValueComplete",
+	"onValueInvalid",
+	"otp",
+	"sanitizeValue",
+	"pattern",
+	"placeholder",
+	"readOnly",
+	"required",
+	"selectOnFocus",
+	"translations",
+	"type",
+	"value"
+]);
+const splitProps = require_utils.createSplitProps(props);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/pin-input/index.d.cts

@@ -0,0 +1,107 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/pin-input/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "input" | "label" | "control">;
+//#endregion
+//#region src/machines/pin-input/types.d.ts
+interface ValueChangeDetails {
+  value: string[];
+  valueAsString: string;
+}
+interface ValueInvalidDetails {
+  value: string;
+  index: number;
+}
+type IntlTranslations = {
+  inputLabel: (index: number, length: number) => string;
+};
+type ElementIds = Partial<{
+  root: string;
+  hiddenInput: string;
+  label: string;
+  control: string;
+  input: (id: string) => string;
+}>;
+interface PinInputProps extends DirectionProperty, CommonProperties {
+  name?: string | undefined;
+  form?: string | undefined;
+  pattern?: string | undefined;
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  placeholder?: string | undefined;
+  autoFocus?: boolean | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  otp?: boolean | undefined;
+  value?: string[] | undefined;
+  defaultValue?: string[] | undefined;
+  type?: "alphanumeric" | "numeric" | "alphabetic" | undefined;
+  onValueComplete?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueInvalid?: ((details: ValueInvalidDetails) => void) | undefined;
+  mask?: boolean | undefined;
+  autoSubmit?: boolean | undefined;
+  blurOnComplete?: boolean | undefined;
+  selectOnFocus?: boolean | undefined;
+  sanitizeValue?: ((value: string) => string) | undefined;
+  translations?: IntlTranslations | undefined;
+  count?: number | undefined;
+}
+type PropsWithDefault = "placeholder" | "otp" | "type" | "defaultValue";
+interface PinInputSchema {
+  state: "idle" | "focused";
+  props: RequiredBy<PinInputProps, PropsWithDefault>;
+  context: {
+    value: string[];
+    focusedIndex: number;
+    count: number;
+  };
+  computed: {
+    _value: string[];
+    valueLength: number;
+    filledValueLength: number;
+    isValueComplete: boolean;
+    valueAsString: string;
+    focusedValue: string;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type PinInputService = Service<PinInputSchema>;
+type PinInputMachine = Machine<PinInputSchema>;
+interface InputProps {
+  index: number;
+}
+interface PinInputApi<T extends PropTypes = PropTypes> {
+  value: string[];
+  valueAsString: string;
+  complete: boolean;
+  count: number;
+  items: number[];
+  setValue: (value: string[]) => void;
+  clearValue: VoidFunction;
+  setValueAtIndex: (index: number, value: string) => void;
+  focus: VoidFunction;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getHiddenInputProps: () => T["input"];
+  getControlProps: () => T["element"];
+  getInputProps: (props: InputProps) => T["input"];
+}
+//#endregion
+//#region src/machines/pin-input/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<PinInputSchema>, normalize: NormalizeProps<T>): PinInputApi<T>;
+//#endregion
+//#region src/machines/pin-input/machine.d.ts
+declare const machine: Machine<PinInputSchema>;
+//#endregion
+//#region src/machines/pin-input/props.d.ts
+declare const props: (keyof PinInputProps)[];
+declare const splitProps: <Props extends Partial<PinInputProps>>(props: Props) => [Partial<PinInputProps>, Omit<Props, keyof PinInputProps>];
+//#endregion
+export { type PinInputApi as Api, type ElementIds, type InputProps, type IntlTranslations, type PinInputMachine as Machine, type PinInputProps as Props, type PinInputService as Service, type ValueChangeDetails, type ValueInvalidDetails, anatomy, connect, machine, props, splitProps };