@sprawlify/primitives 0.0.1

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

@@ -0,0 +1,523 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/pin-input/pin-input.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("pinInput").parts("root", "label", "input", "control");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/pin-input/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/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/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_utils.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_dom_query.visuallyHiddenStyle,
+				maxLength: computed("valueLength"),
+				defaultValue: computed("valueAsString")
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope)
+			});
+		},
+		getInputProps(props$1) {
+			const { index } = props$1;
+			const inputType = prop("type") === "numeric" ? "tel" : "text";
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				disabled,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-complete": require_dom_query.dataAttr(complete),
+				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),
+				type: prop("mask") ? "password" : inputType,
+				defaultValue: context.get("value")[index] || "",
+				readOnly,
+				autoCapitalize: "none",
+				autoComplete: prop("otp") ? "one-time-code" : "off",
+				placeholder: focusedIndex === index ? "" : prop("placeholder"),
+				onBeforeInput(event) {
+					try {
+						const value = require_dom_query.getBeforeInputValue(event);
+						if (!isValidValue(value, prop("type"), prop("pattern"))) {
+							send({
+								type: "VALUE.INVALID",
+								value
+							});
+							event.preventDefault();
+						}
+						if (value.length > 2) event.currentTarget.setSelectionRange(0, 1, "forward");
+					} catch {}
+				},
+				onChange(event) {
+					const evt = require_dom_query.getNativeEvent(event);
+					const { value } = event.currentTarget;
+					if (evt.inputType === "insertFromPaste" || 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;
+					}
+					send({
+						type: "INPUT.CHANGE",
+						value,
+						index
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (require_dom_query.isComposingEvent(event)) return;
+					if (require_dom_query.isModifierKey(event)) 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" });
+						}
+					}[require_dom_query.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/pin-input.machine.ts
+const { choose, createMachine } = require_core.setup();
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			placeholder: "○",
+			otp: false,
+			type: "numeric",
+			defaultValue: props$1.count ? fill([], props$1.count) : [],
+			...props$1,
+			translations: {
+				inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				value: prop("value"),
+				defaultValue: prop("defaultValue"),
+				isEqual: require_utils.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"]);
+		});
+	},
+	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",
+				"setNextFocusedIndex"
+			] },
+			"INPUT.PASTE": { actions: ["setPastedValue", "setLastValueFocusIndex"] },
+			"INPUT.FOCUS": { actions: ["setFocusedIndex"] },
+			"INPUT.BLUR": {
+				target: "idle",
+				actions: ["clearFocusedIndex"]
+			},
+			"INPUT.DELETE": {
+				guard: "hasValue",
+				actions: ["clearFocusedValue"]
+			},
+			"INPUT.ARROW_LEFT": { actions: ["setPrevFocusedIndex"] },
+			"INPUT.ARROW_RIGHT": { actions: ["setNextFocusedIndex"] },
+			"INPUT.BACKSPACE": [{
+				guard: "hasValue",
+				actions: ["clearFocusedValue"]
+			}, { actions: ["setPrevFocusedIndex", "clearFocusedValue"] }],
+			"INPUT.ENTER": {
+				guard: "isValueComplete",
+				actions: ["requestFormSubmit"]
+			},
+			"VALUE.INVALID": { actions: ["invokeOnInvalid"] }
+		} }
+	},
+	implementations: {
+		guards: {
+			autoFocus: ({ prop }) => !!prop("autoFocus"),
+			hasValue: ({ context }) => context.get("value")[context.get("focusedIndex")] !== "",
+			isValueComplete: ({ computed }) => computed("isValueComplete"),
+			hasIndex: ({ event }) => event.index !== void 0
+		},
+		actions: {
+			dispatchInputEvent({ computed, scope }) {
+				require_dom_query.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;
+				getInputElAtIndex(scope, focusedIndex)?.focus({ preventScroll: true });
+			},
+			selectInputIfNeeded({ context, prop, scope }) {
+				const focusedIndex = context.get("focusedIndex");
+				if (!prop("selectOnFocus") || focusedIndex === -1) return;
+				require_dom_query.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 }) {
+				context.set("focusedIndex", event.index);
+			},
+			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_dom_query.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;
+				context.set("value", require_utils.setValueAtIndex(computed("_value"), focusedIndex, ""));
+			},
+			setFocusIndexToFirst({ context }) {
+				context.set("focusedIndex", 0);
+			},
+			setNextFocusedIndex({ context, computed }) {
+				context.set("focusedIndex", Math.min(context.get("focusedIndex") + 1, computed("valueLength") - 1));
+			},
+			setPrevFocusedIndex({ context }) {
+				context.set("focusedIndex", Math.max(context.get("focusedIndex") - 1, 0));
+			},
+			setLastValueFocusIndex({ context, computed }) {
+				require_dom_query.raf(() => {
+					context.set("focusedIndex", Math.min(computed("filledValueLength"), computed("valueLength") - 1));
+				});
+			},
+			blurFocusedInputIfNeeded({ context, prop, scope }) {
+				if (!prop("blurOnComplete")) return;
+				require_dom_query.raf(() => {
+					getInputElAtIndex(scope, context.get("focusedIndex"))?.blur();
+				});
+			},
+			requestFormSubmit({ computed, prop, scope }) {
+				if (!prop("name") || !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) {
+	return Array.from({ length: count }).fill("").map((v, i) => value[i] || v);
+}
+
+//#endregion
+//#region src/machines/pin-input/pin-input.props.ts
+const props = require_create_props.createProps()([
+	"autoFocus",
+	"blurOnComplete",
+	"count",
+	"defaultValue",
+	"dir",
+	"disabled",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"mask",
+	"name",
+	"onValueChange",
+	"onValueComplete",
+	"onValueInvalid",
+	"otp",
+	"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,105 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/pin-input/pin-input.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "input" | "label" | "control">;
+//#endregion
+//#region src/machines/pin-input/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;
+  blurOnComplete?: boolean | undefined;
+  selectOnFocus?: boolean | 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/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/pin-input.machine.d.ts
+declare const machine: Machine<PinInputSchema>;
+//#endregion
+//#region src/machines/pin-input/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 };