solid-baseui 0.1.0-alpha.0

package/dist/lib/server/otp-field/index.js

@@ -0,0 +1,811 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { _ as inputPaste, b as keyboard, g as inputClear, h as inputChange } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { n as useDirection } from "../DirectionContext-YORWLF08.js";
+import { fieldValidityMapping } from "../internals/field-constants.js";
+import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { n as useFormContext } from "../FormContext-pvESt85v.js";
+import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { t as Separator } from "../Separator-vhhYxWGr.js";
+import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
+//#region src/otp-field/utils/otp.ts
+var OTP_VALIDATION_CONFIG = {
+	numeric: {
+		slotPattern: "\\d{1}",
+		getRootPattern: (length) => `\\d{${length}}`,
+		regexp: /[^\d]/g,
+		inputMode: "numeric"
+	},
+	alpha: {
+		slotPattern: "[a-zA-Z]{1}",
+		getRootPattern: (length) => `[a-zA-Z]{${length}}`,
+		regexp: /[^a-zA-Z]/g,
+		inputMode: "text"
+	},
+	alphanumeric: {
+		slotPattern: "[a-zA-Z0-9]{1}",
+		getRootPattern: (length) => `[a-zA-Z0-9]{${length}}`,
+		regexp: /[^a-zA-Z0-9]/g,
+		inputMode: "text"
+	}
+};
+function getOTPValidationConfig(validationType) {
+	return validationType === "none" ? null : OTP_VALIDATION_CONFIG[validationType];
+}
+function stripOTPWhitespace(value) {
+	return (value ?? "").replace(/\s/g, "");
+}
+function applyOTPValidation(value, validation) {
+	return validation ? value.replace(validation.regexp, "") : value;
+}
+function normalizeOTPValueWithDetails(value, length, validationType, normalizeValue) {
+	const strippedValue = stripOTPWhitespace(value);
+	const validation = getOTPValidationConfig(validationType);
+	let normalizedValue = applyOTPValidation(strippedValue, validation);
+	let didRejectCharacters = strippedValue.length > normalizedValue.length;
+	if (normalizeValue) {
+		const customNormalizedValue = normalizeValue(normalizedValue);
+		didRejectCharacters ||= normalizedValue.length > customNormalizedValue.length;
+		normalizedValue = applyOTPValidation(customNormalizedValue, validation);
+		didRejectCharacters ||= customNormalizedValue.length > normalizedValue.length;
+	}
+	const maxLength = length < 0 ? 0 : length;
+	const normalizedCharacters = Array.from(normalizedValue);
+	return [normalizedCharacters.slice(0, maxLength).join(""), didRejectCharacters || normalizedCharacters.length > maxLength];
+}
+function normalizeOTPValue(value, length, validationType, normalizeValue) {
+	return normalizeOTPValueWithDetails(value, length, validationType, normalizeValue)[0];
+}
+function replaceOTPValue(currentValue, index, nextValue, length, validationType, normalizeValue) {
+	const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue);
+	return normalizeOTPValue(`${currentValue.slice(0, index)}${normalizedValue}${currentValue.slice(index + normalizedValue.length)}`, length, validationType, normalizeValue);
+}
+function removeOTPCharacter(currentValue, index) {
+	if (index < 0 || index >= currentValue.length) return currentValue;
+	return `${currentValue.slice(0, index)}${currentValue.slice(index + 1)}`;
+}
+//#endregion
+//#region src/otp-field/utils/stateAttributesMapping.ts
+var rootStateAttributesMapping = {
+	value: () => null,
+	length: () => null,
+	...fieldValidityMapping
+};
+var inputStateAttributesMapping = {
+	value: () => null,
+	index: () => null,
+	...fieldValidityMapping
+};
+//#endregion
+//#region src/otp-field/root/OTPFieldRootContext.ts
+var MISSING_CONTEXT = Symbol("OTPFieldRootContext");
+var OTPFieldRootContext = createContext(MISSING_CONTEXT);
+function useOTPFieldRootContext() {
+	const context = useContext(OTPFieldRootContext);
+	if (context !== MISSING_CONTEXT) return context;
+	throw new Error("Base UI: OTPFieldRootContext is missing. OTPField parts must be placed within <OTPField.Root>.");
+}
+function getOTPFieldInputState(state, value, index) {
+	return {
+		...state,
+		value,
+		index,
+		filled: value !== ""
+	};
+}
+//#endregion
+//#region src/otp-field/root/OTPFieldRoot.tsx
+var _tmpl$ = [
+	"<input",
+	" type=\"text\"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	" aria-hidden=\"true\"",
+	"",
+	" tabindex=\"-1\" style=\"",
+	"\">"
+];
+var HIDDEN_INPUT_STYLE = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: "0",
+	padding: "0",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: "0",
+	left: "0"
+};
+var HIDDEN_NAMED_INPUT_STYLE = {
+	...HIDDEN_INPUT_STYLE,
+	position: "absolute"
+};
+/** Groups OTP inputs and coordinates editing, validation, and form submission. */
+function OTPFieldRoot(props) {
+	const field = useFieldRootContext(true);
+	const formContext = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const source = Symbol("OTPField");
+	const labelSource = Symbol("OTPFieldLabel");
+	const generatedId = `base-ui-${createUniqueId()}`;
+	const generatedLabelId = `base-ui-${createUniqueId()}`;
+	const inheritedControlId = untrack(labelable.controlId);
+	const fallbackId = typeof inheritedControlId === "string" ? inheritedControlId : generatedId;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const initialUnwrappedValue = untrack(() => controlled ? internalProps.value : internalProps.defaultValue);
+	const initialValue = normalizeOTPValue(initialUnwrappedValue, untrack(() => internalProps.length), untrack(() => internalProps.validationType ?? "numeric"), untrack(() => internalProps.normalizeValue));
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(initialUnwrappedValue);
+	const [rootElement, setRootElement] = createSignal();
+	const [hiddenInput, setHiddenInput] = createSignal();
+	const [focusedIndex, setFocusedIndex] = createSignal(Math.min(initialValue.length, untrack(() => internalProps.length) - 1));
+	const [focused, setFocusedState] = createSignal(false);
+	const [slotVersion, setSlotVersion] = createSignal(0);
+	const [fallbackAriaLabelledBy, setFallbackAriaLabelledBy] = createSignal();
+	const slots = /* @__PURE__ */ new Map();
+	let nextSlotOrder = 0;
+	let pendingFocus;
+	let pendingComplete;
+	let submissionValue;
+	let disposed = false;
+	let slotChangeQueued = false;
+	let valueEffectVersion = 0;
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "autoComplete", "autoSubmit", "class", "defaultValue", "disabled", "form", "id", "inputMode", "length", "mask", "name", "normalizeValue", "onChange", "onValueChange", "onValueComplete", "onValueInvalid", "readOnly", "ref", "required", "style", "validationType", "value");
+	const length = createMemo(() => internalProps.length);
+	const validationType = createMemo(() => internalProps.validationType ?? "numeric");
+	const normalizeValue = () => internalProps.normalizeValue;
+	const value = createMemo(() => normalizeOTPValue(controlled ? internalProps.value : uncontrolledValue(), length(), validationType(), normalizeValue()));
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const readOnly = createMemo(() => internalProps.readOnly ?? false);
+	const required = createMemo(() => internalProps.required ?? false);
+	const name = createMemo(() => field.name() ?? internalProps.name);
+	const id = createMemo(() => internalProps.id ?? fallbackId);
+	const autoComplete = () => internalProps.autoComplete ?? "one-time-code";
+	const form = () => internalProps.form;
+	const mask = () => internalProps.mask ?? false;
+	const validationConfig = createMemo(() => getOTPValidationConfig(validationType()));
+	const pattern = createMemo(() => validationConfig()?.slotPattern);
+	const hiddenInputPattern = createMemo(() => validationConfig()?.getRootPattern(length()));
+	const inputMode = createMemo(() => internalProps.inputMode ?? validationConfig()?.inputMode);
+	const hasValidLength = createMemo(() => Number.isInteger(length()) && length() > 0);
+	const firstInput = createMemo(() => {
+		slotVersion();
+		return getOrderedSlots()[0]?.element;
+	});
+	const activeIndex = createMemo(() => focused() ? Math.min(focusedIndex(), Math.max(length() - 1, 0)) : Math.min(value().length, length() - 1));
+	const state = createMemo(() => ({
+		...field.state(),
+		complete: value().length === length(),
+		disabled: disabled(),
+		filled: value() !== "",
+		focused: focused(),
+		length: length(),
+		readOnly: readOnly(),
+		required: required(),
+		value: value()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), rootStateAttributesMapping));
+	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
+	const inputAriaLabelledBy = createMemo(() => internalProps["aria-labelledby"] == null ? ariaLabelledBy() : void 0);
+	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const hiddenAriaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(void 0));
+	let previousValue = untrack(value);
+	const registration = {
+		id: untrack(id),
+		name: internalProps.name,
+		value: () => submissionValue ?? value(),
+		getControl: () => firstInput() ?? null
+	};
+	function registerInput() {
+		const token = Symbol("OTPFieldInput");
+		const [index, setIndex] = createSignal(slots.size);
+		const slot = {
+			element: void 0,
+			index,
+			setIndex,
+			order: nextSlotOrder
+		};
+		nextSlotOrder += 1;
+		slots.set(token, slot);
+		notifySlotChange();
+		return {
+			index,
+			setElement(element) {
+				slot.element = element;
+				reindexSlots();
+			},
+			unregister() {
+				slots.delete(token);
+				reindexSlots();
+			}
+		};
+	}
+	function getOrderedSlots() {
+		return Array.from(slots.values()).sort(compareSlots);
+	}
+	function reindexSlots() {
+		const orderedSlots = getOrderedSlots();
+		for (let index = 0; index < orderedSlots.length; index += 1) orderedSlots[index]?.setIndex(index);
+		notifySlotChange();
+	}
+	function notifySlotChange() {
+		if (slotChangeQueued) return;
+		slotChangeQueued = true;
+		queueMicrotask(() => {
+			slotChangeQueued = false;
+			if (!disposed) setSlotVersion((version) => version + 1);
+		});
+	}
+	function focusInput(index) {
+		const orderedSlots = getOrderedSlots();
+		const target = orderedSlots[Math.min(Math.max(index, 0), Math.max(orderedSlots.length - 1, 0))]?.element;
+		target?.focus();
+		target?.select();
+	}
+	function queueFocusInput(index, nextValue) {
+		pendingFocus = {
+			index,
+			value: nextValue
+		};
+	}
+	function getInputId(index) {
+		const currentId = id();
+		if (!currentId) return;
+		return index === 0 ? currentId : `${currentId}-${index + 1}`;
+	}
+	function handleInputFocus(index, event) {
+		if (index > value().length) {
+			focusInput(Math.min(value().length, length() - 1));
+			return;
+		}
+		setFocusedIndex(index);
+		setFocusedState(true);
+		field.setFocused(true);
+		event.currentTarget.select();
+	}
+	function handleInputBlur(event) {
+		untrack(() => {
+			const relatedTarget = event.relatedTarget;
+			const root = rootElement();
+			if (root && relatedTarget instanceof Element && contains(root, relatedTarget)) return;
+			field.setTouched(true);
+			setFocusedState(false);
+			field.setFocused(false);
+			if (field.validationMode() === "onBlur") field.validation.commit(value());
+		});
+	}
+	function reportValueInvalid(invalidValue, details) {
+		internalProps.onValueInvalid?.(invalidValue, details);
+	}
+	function syncFallbackLabel(explicitLabel, fieldLabel, input, inputId, group) {
+		if (explicitLabel || fieldLabel || !input) {
+			setFallbackAriaLabelledBy(void 0);
+			return;
+		}
+		const rootNode = input.getRootNode();
+		const queryRoot = "querySelectorAll" in rootNode ? rootNode : void 0;
+		const explicitNativeLabel = inputId && queryRoot ? Array.from(queryRoot.querySelectorAll("label")).find((candidate) => candidate.htmlFor === inputId) : void 0;
+		const label = input.closest("label") ?? input.labels?.[0] ?? explicitNativeLabel;
+		if (!label || !group || label.getRootNode() !== group.getRootNode()) {
+			setFallbackAriaLabelledBy(void 0);
+			return;
+		}
+		if (!label.id) label.id = generatedLabelId;
+		setFallbackAriaLabelledBy(label.id || void 0);
+	}
+	function setValue(nextValue, details) {
+		const normalizedValue = normalizeOTPValue(nextValue, length(), validationType(), normalizeValue());
+		const completeDetails = (details.reason === "input-change" || details.reason === "input-paste") && normalizedValue.length === length() && (value().length !== length() || details.reason === "input-paste") ? createGenericEventDetails(details.reason, details.event) : null;
+		if (normalizedValue === value()) {
+			if (completeDetails) completeValue(normalizedValue, completeDetails);
+			return null;
+		}
+		internalProps.onValueChange?.(normalizedValue, details);
+		if (details.isCanceled) return null;
+		if (!controlled) setUncontrolledValue(normalizedValue);
+		if (completeDetails) pendingComplete = {
+			value: normalizedValue,
+			details: completeDetails
+		};
+		else if (normalizedValue.length !== length()) pendingComplete = void 0;
+		return normalizedValue;
+	}
+	function completeValue(completedValue, details) {
+		const shouldAutoSubmit = internalProps.autoSubmit ?? false;
+		const explicitForm = form();
+		const previousSubmissionValue = submissionValue;
+		submissionValue = completedValue;
+		try {
+			internalProps.onValueComplete?.(completedValue, details);
+			if (shouldAutoSubmit) requestSubmit(explicitForm, completedValue);
+		} finally {
+			submissionValue = previousSubmissionValue;
+		}
+	}
+	function requestSubmit(explicitForm, completedValue) {
+		const validationInput = hiddenInput();
+		const orderedInputs = getOrderedSlots().flatMap((slot) => slot.element ?? []);
+		let formElement = validationInput?.form ?? orderedInputs[0]?.form ?? null;
+		if (explicitForm) {
+			const associatedElement = rootElement()?.ownerDocument.getElementById(explicitForm);
+			if (associatedElement?.tagName === "FORM") formElement = associatedElement;
+		}
+		if (!formElement?.requestSubmit) return;
+		const previousSlotValues = orderedInputs.map((input) => input.value);
+		const previousValidationValue = validationInput?.value;
+		for (let index = 0; index < orderedInputs.length; index += 1) {
+			const input = orderedInputs[index];
+			if (input) input.value = completedValue[index] ?? "";
+		}
+		if (validationInput) validationInput.value = completedValue;
+		try {
+			formElement.requestSubmit();
+		} finally {
+			for (let index = 0; index < orderedInputs.length; index += 1) {
+				const input = orderedInputs[index];
+				if (input) input.value = previousSlotValues[index] ?? "";
+			}
+			if (validationInput) validationInput.value = previousValidationValue ?? "";
+		}
+	}
+	const context = {
+		activeIndex,
+		autoComplete,
+		disabled,
+		form,
+		focusInput,
+		queueFocusInput,
+		getInputId,
+		handleInputBlur,
+		handleInputFocus,
+		inputMode,
+		inputAriaLabelledBy,
+		invalid: () => field.invalid(),
+		length,
+		mask,
+		normalizeValue,
+		pattern,
+		readOnly,
+		registerInput,
+		reportValueInvalid,
+		required,
+		setValue,
+		state,
+		validationType,
+		value
+	};
+	createEffect(() => ({
+		disabled: disabled(),
+		firstInput: firstInput(),
+		id: id(),
+		name: internalProps.name
+	}), (current) => untrack(() => {
+		registration.id = current.id;
+		registration.name = current.name;
+		field.registerFieldControl(source, current.disabled || !current.firstInput ? void 0 : registration);
+		labelable.registerControlId(labelSource, current.firstInput ? current.id : void 0);
+	}));
+	createEffect(() => ({
+		disabled: disabled(),
+		input: hiddenInput()
+	}), (current) => untrack(() => {
+		if (!current.input || current.disabled) return;
+		return field.validation.registerInput(source, current.input, () => untrack(() => firstInput() ?? null));
+	}));
+	createEffect(() => ({
+		explicit: internalProps["aria-labelledby"],
+		fieldLabel: labelable.labelId(),
+		input: firstInput(),
+		inputId: id(),
+		group: rootElement()
+	}), (current) => {
+		syncFallbackLabel(current.explicit, current.fieldLabel, current.input, current.inputId, current.group);
+	});
+	createEffect(() => ({
+		initialValue: field.validityData().initialValue,
+		name: name(),
+		value: value()
+	}), (current) => {
+		if (current.value === previousValue) return;
+		previousValue = current.value;
+		untrack(() => {
+			formContext.clearError(current.name);
+			field.setDirty(current.value !== current.initialValue);
+			field.setFilled(current.value !== "");
+			field.validation.change(current.value);
+		});
+		const version = ++valueEffectVersion;
+		queueMicrotask(() => {
+			if (disposed || version !== valueEffectVersion) return;
+			const acceptedValue = untrack(value);
+			const focus = pendingFocus;
+			pendingFocus = void 0;
+			if (focus?.value === acceptedValue) focusInput(focus.index);
+			const complete = pendingComplete;
+			pendingComplete = void 0;
+			if (complete?.value === acceptedValue) completeValue(acceptedValue, complete.details);
+		});
+	});
+	createEffect(() => {
+		slotVersion();
+		return {
+			count: slots.size,
+			length: length()
+		};
+	}, (current) => {
+		if (isDevelopment$1() && Number.isInteger(current.length) && current.length > 0 && current.count !== 0 && current.count !== current.length) console.warn(`<OTPField.Root> \`length\` must match the number of rendered <OTPField.Input /> parts. Received \`length={${current.length}}\` but rendered ${current.count} input${current.count === 1 ? "" : "s"}.`);
+	});
+	createEffect(() => length(), (currentLength) => {
+		if (isDevelopment$1() && (!Number.isInteger(currentLength) || currentLength <= 0)) console.warn(`<OTPField.Root> \`length\` must be a positive integer. Received \`length={${String(currentLength)}}\`.`);
+	});
+	createEffect(() => {
+		slotVersion();
+		const observationRoots = /* @__PURE__ */ new Set();
+		const root = rootElement();
+		if (root) observationRoots.add(root.getRootNode());
+		for (const slot of slots.values()) if (slot.element) observationRoots.add(slot.element.getRootNode());
+		return Array.from(observationRoots);
+	}, (observationRoots) => {
+		if (typeof MutationObserver === "undefined") return;
+		function mutationAffectsSlotsOrLabels(record) {
+			if (record.type === "attributes") return record.target instanceof HTMLLabelElement || Array.from(slots.values()).some((slot) => slot.element === record.target);
+			return [...record.addedNodes, ...record.removedNodes].some((node) => {
+				if (node instanceof HTMLLabelElement) return true;
+				if (!(node instanceof Element)) return false;
+				if (node.querySelector("label")) return true;
+				return Array.from(slots.values()).some((slot) => slot.element === node || (slot.element ? node.contains(slot.element) : false));
+			});
+		}
+		const observer = new MutationObserver((records) => {
+			if (!records.some(mutationAffectsSlotsOrLabels)) return;
+			reindexSlots();
+			untrack(() => {
+				syncFallbackLabel(internalProps["aria-labelledby"], labelable.labelId(), getOrderedSlots()[0]?.element, id(), rootElement());
+			});
+		});
+		for (const observationRoot of observationRoots) observer.observe(observationRoot, {
+			attributeFilter: ["for", "id"],
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	onSettled(() => untrack(() => {
+		field.setFilled(value() !== "");
+		const currentFirstInput = getOrderedSlots()[0]?.element;
+		registration.id = id();
+		registration.name = internalProps.name;
+		field.registerFieldControl(source, disabled() || !currentFirstInput ? void 0 : registration);
+		labelable.registerControlId(labelSource, currentFirstInput ? id() : void 0);
+		syncFallbackLabel(internalProps["aria-labelledby"], labelable.labelId(), currentFirstInput, id(), rootElement());
+	}));
+	onCleanup(() => {
+		disposed = true;
+		field.registerFieldControl(source, void 0);
+		labelable.registerControlId(labelSource, void 0);
+	});
+	return OTPFieldRootContext({
+		value: context,
+		get children() {
+			return [Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [((element) => setRootElement(element)), internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				role: "group",
+				get ["aria-describedby"]() {
+					return ariaDescribedBy();
+				},
+				get ["aria-labelledby"]() {
+					return ariaLabelledBy();
+				}
+			}, stateAttributes, others)), memo(() => {
+				var _v$, _g$2, _g$, _v$5;
+				return escape(memo(() => {
+					return !!hasValidLength();
+				})() ? (_v$ = ssrHydrationKey(), _g$2 = ssrGroup(() => {
+					return [
+						ssrAttribute("id", id() && name() == null ? `${escape(id(), true)}-hidden-input` : escape(void 0, true)),
+						ssrAttribute("form", escape(form(), true)),
+						ssrAttribute("name", escape(name(), true))
+					];
+				}, 3), _g$ = ssrGroup(() => {
+					return [
+						ssrAttribute("autocomplete", escape(autoComplete(), true)),
+						ssrAttribute("inputmode", escape(inputMode(), true)),
+						ssrAttribute("minlength", escape(length(), true)),
+						ssrAttribute("maxlength", escape(length(), true)),
+						ssrAttribute("pattern", escape(hiddenInputPattern(), true)),
+						ssrAttribute("disabled", escape(disabled(), true)),
+						ssrAttribute("readonly", escape(readOnly(), true)),
+						ssrAttribute("required", escape(required(), true)),
+						ssrAttribute("aria-describedby", escape(hiddenAriaDescribedBy(), true)),
+						ssrAttribute("aria-invalid", state().valid === false && !disabled() ? "true" : escape(void 0, true)),
+						ssrStyle(name() ? HIDDEN_NAMED_INPUT_STYLE : HIDDEN_INPUT_STYLE)
+					];
+				}, 11), _v$5 = () => {
+					return ssrAttribute("value", escape(value(), true));
+				}, ssr(_tmpl$, _v$, _g$2, _g$2, _g$2, _v$5, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$, _g$)) : hasValidLength());
+			})];
+		}
+	});
+}
+function compareSlots(first, second) {
+	if (!first.element || !second.element || first.element === second.element) return first.order - second.order;
+	const position = first.element.compareDocumentPosition(second.element);
+	if (position & Node.DOCUMENT_POSITION_DISCONNECTED) return first.order - second.order;
+	if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+	if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+	return first.order - second.order;
+}
+function contains(parent, child) {
+	if (parent.contains(child)) return true;
+	let current = child;
+	while (current) {
+		if (current === parent) return true;
+		current = current.parentNode ?? (current instanceof ShadowRoot ? current.host : null);
+	}
+	return false;
+}
+function isDevelopment$1() {
+	return Boolean(false);
+}
+//#endregion
+//#region src/otp-field/input/OTPFieldInput.tsx
+/** An individual character input within an OTP Field. */
+function OTPFieldInput(props) {
+	const root = useOTPFieldRootContext();
+	const direction = useDirection();
+	const registration = root.registerInput();
+	const internalProps = props;
+	const others = omit(props, "aria-label", "aria-labelledby", "as", "class", "defaultChecked", "defaultValue", "index", "onBlur", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPaste", "ref", "style");
+	const index = registration.index;
+	const slotValue = createMemo(() => root.value()[index()] ?? "");
+	const state = createMemo(() => getOTPFieldInputState(root.state(), slotValue(), index()));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), inputStateAttributesMapping));
+	const ariaLabel = createMemo(() => index() === 0 ? void 0 : internalProps["aria-label"]);
+	const inheritedLabel = createMemo(() => internalProps["aria-labelledby"] ?? root.inputAriaLabelledBy());
+	const [inputElement, setInputElement] = createSignal();
+	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => handleMouseDown);
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
+	const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onPaste = composeEventHandlers(() => internalProps.onPaste, () => handlePaste);
+	function handleMouseDown(event) {
+		if (event.defaultPrevented || root.disabled()) return;
+		event.preventDefault();
+		root.focusInput(index());
+	}
+	function handleFocus(event) {
+		if (event.defaultPrevented || root.disabled()) return;
+		root.handleInputFocus(index(), event);
+	}
+	function handleBlur(event) {
+		if (!event.defaultPrevented) root.handleInputBlur(event);
+	}
+	function handleInput(event) {
+		if (event.defaultPrevented || root.disabled() || root.readOnly()) {
+			event.currentTarget.value = slotValue();
+			return;
+		}
+		const rawValue = event.currentTarget.value;
+		const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, root.length(), root.validationType(), root.normalizeValue());
+		if (didRejectCharacters) root.reportValueInvalid(rawValue, createGenericEventDetails(inputChange, event));
+		if (nextDigits === "") {
+			if (rawValue === "") {
+				root.setValue(removeOTPCharacter(root.value(), index()), createChangeEventDetails(inputClear, event));
+				event.currentTarget.value = slotValue();
+			} else {
+				event.currentTarget.value = slotValue();
+				if (slotValue() !== "") event.currentTarget.select();
+			}
+			return;
+		}
+		const nextValue = replaceOTPValue(root.value(), index(), nextDigits, root.length(), root.validationType(), root.normalizeValue());
+		const committedValue = root.setValue(nextValue, createChangeEventDetails(inputChange, event));
+		if (event.currentTarget.value !== slotValue()) event.currentTarget.value = slotValue();
+		if (committedValue != null) root.queueFocusInput(Math.min(index() + nextDigits.length, root.length() - 1), committedValue);
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented || root.disabled()) return;
+		const firstIndex = 0;
+		const lastIndex = Math.max(root.length() - 1, firstIndex);
+		const endTargetIndex = Math.min(root.value().length, lastIndex);
+		const hasBoundaryModifier = (event.ctrlKey || event.metaKey) && !event.altKey;
+		const previousKey = direction() === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const nextKey = direction() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		if (event.key === previousKey) {
+			stopEvent(event);
+			root.focusInput(hasBoundaryModifier ? firstIndex : Math.max(firstIndex, index() - 1));
+			return;
+		}
+		if (event.key === nextKey) {
+			stopEvent(event);
+			root.focusInput(hasBoundaryModifier ? endTargetIndex : Math.min(lastIndex, index() + 1));
+			return;
+		}
+		if (event.key === "Home" || event.key === "ArrowUp") {
+			stopEvent(event);
+			root.focusInput(firstIndex);
+			return;
+		}
+		if (event.key === "End" || event.key === "ArrowDown") {
+			stopEvent(event);
+			root.focusInput(endTargetIndex);
+			return;
+		}
+		if (root.readOnly()) return;
+		const setKeyboardValue = (nextValue, targetIndex) => {
+			const committedValue = root.setValue(nextValue, createChangeEventDetails(keyboard, event));
+			if (committedValue != null) root.queueFocusInput(targetIndex, committedValue);
+		};
+		if (event.key === "Backspace" && hasBoundaryModifier) {
+			stopEvent(event);
+			setKeyboardValue("", firstIndex);
+			return;
+		}
+		if (event.key === "Delete") {
+			stopEvent(event);
+			setKeyboardValue(removeOTPCharacter(root.value(), index()), index());
+			return;
+		}
+		const inputValue = event.currentTarget.value;
+		const fullSelection = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputValue.length;
+		if (event.key.length === 1 && fullSelection && slotValue() === event.key) {
+			stopEvent(event);
+			if (index() < root.length() - 1) root.focusInput(index() + 1);
+			return;
+		}
+		if (event.key === "Backspace") {
+			stopEvent(event);
+			const targetIndex = Math.max(firstIndex, index() - 1);
+			const deleteIndex = slotValue() === "" ? targetIndex : index();
+			setKeyboardValue(removeOTPCharacter(root.value(), deleteIndex), targetIndex);
+		}
+	}
+	function handlePaste(event) {
+		if (event.defaultPrevented || root.disabled() || root.readOnly()) return;
+		let rawValue = "";
+		try {
+			rawValue = event.clipboardData?.getData("text/plain") ?? "";
+		} catch {
+			if (isDevelopment()) console.warn("<OTPField.Input> could not read clipboard text during paste handling.");
+			return;
+		}
+		event.preventDefault();
+		const [nextDigits, didRejectCharacters] = normalizeOTPValueWithDetails(rawValue, root.length(), root.validationType(), root.normalizeValue());
+		if (didRejectCharacters) root.reportValueInvalid(rawValue, createGenericEventDetails(inputPaste, event));
+		if (nextDigits === "") return;
+		const committedValue = root.setValue(replaceOTPValue(root.value(), index(), nextDigits, root.length(), root.validationType(), root.normalizeValue()), createChangeEventDetails(inputPaste, event));
+		if (committedValue != null) root.queueFocusInput(Math.min(index() + nextDigits.length, root.length() - 1), committedValue);
+	}
+	createEffect(() => ({
+		element: inputElement(),
+		index: index(),
+		label: internalProps["aria-label"]
+	}), (current) => {
+		if (isDevelopment() && current.element && current.index === 0 && current.label != null && !current.element.labels?.length) console.warn("<OTPField.Input> ignores `aria-label` on the first input. Use a `<label>` or `<Field.Label>` to label the OTP field.");
+	});
+	onCleanup(registration.unregister);
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "input";
+		},
+		ref: [((element) => {
+			setInputElement(element);
+			registration.setElement(element);
+		}), internalProps.ref],
+		get id() {
+			return root.getInputId(index());
+		},
+		get value() {
+			return slotValue();
+		},
+		get type() {
+			return root.mask() ? "password" : "text";
+		},
+		get inputmode() {
+			return root.inputMode();
+		},
+		get autocomplete() {
+			return memo(() => {
+				return index() === 0;
+			})() ? root.autoComplete() : "off";
+		},
+		autocorrect: "off",
+		spellcheck: false,
+		get enterkeyhint() {
+			return index() === root.length() - 1 ? "done" : "next";
+		},
+		get maxlength() {
+			return memo(() => {
+				return index() === 0;
+			})() ? root.length() : void 0;
+		},
+		get tabindex() {
+			return root.activeIndex() === index() ? 0 : -1;
+		},
+		get disabled() {
+			return root.disabled();
+		},
+		get form() {
+			return root.form();
+		},
+		get pattern() {
+			return root.pattern();
+		},
+		get readonly() {
+			return root.readOnly();
+		},
+		get required() {
+			return root.required();
+		},
+		get ["aria-labelledby"]() {
+			return memo(() => {
+				return ariaLabel() == null;
+			})() ? inheritedLabel() : void 0;
+		},
+		get ["aria-invalid"]() {
+			return !root.disabled() && root.invalid() ? "true" : void 0;
+		},
+		get ["aria-label"]() {
+			return ariaLabel();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		onMouseDown,
+		onFocus,
+		onBlur,
+		onInput,
+		onKeyDown,
+		onPaste
+	}, stateAttributes, others));
+}
+function stopEvent(event) {
+	event.preventDefault();
+	event.stopPropagation();
+}
+function isDevelopment() {
+	return Boolean(false);
+}
+//#endregion
+//#region src/otp-field/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Input: () => OTPFieldInput,
+	Root: () => OTPFieldRoot,
+	Separator: () => Separator
+});
+//#endregion
+export { index_parts_exports as OTPField };