@puzzle-ui/ui 0.4.0 → 0.5.0

package/dist/components/forms/time-picker/time-picker.utils.cjs

@@ -0,0 +1,25 @@
+// src/components/forms/time-picker/time-picker.utils.ts
+const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/;
+const parseTime = (value) => {
+	if (!value) return null;
+	const match = TIME_PATTERN.exec(value);
+	if (!match) return null;
+	const hours = Number(match[1]);
+	const minutes = Number(match[2]);
+	const seconds = Number(match[3] ?? 0);
+	return hours * 3600 + minutes * 60 + seconds;
+};
+const normalizeTime = (value, showSeconds = false) => {
+	if (!value) return null;
+	const parsed = parseTime(value);
+	if (parsed === null) return null;
+	const hours = Math.floor(parsed / 3600);
+	const minutes = Math.floor(parsed % 3600 / 60);
+	const seconds = parsed % 60;
+	const base = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+	return showSeconds ? `${base}:${String(seconds).padStart(2, "0")}` : base;
+};
+exports.normalizeTime = normalizeTime;
+exports.parseTime = parseTime;
+
+//# sourceMappingURL=time-picker.utils.cjs.map

package/dist/components/forms/time-picker/time-picker.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.utils.cjs","names":[],"sources":["../../../../src/components/forms/time-picker/time-picker.utils.ts"],"sourcesContent":["const TIME_PATTERN = /^([01]\\d|2[0-3]):([0-5]\\d)(?::([0-5]\\d))?$/;\n\nconst parseTime = (value?: string | null): number | null => {\n  if (!value) {\n    return null;\n  }\n\n  const match = TIME_PATTERN.exec(value);\n\n  if (!match) {\n    return null;\n  }\n\n  const hours = Number(match[1]);\n  const minutes = Number(match[2]);\n  const seconds = Number(match[3] ?? 0);\n\n  return hours * 3600 + minutes * 60 + seconds;\n};\n\nconst isValidTime = (value?: string | null): boolean =>\n  value == null || value === \"\" || parseTime(value) !== null;\n\nconst isTimeWithinBounds = (\n  value: string,\n  minTime?: string,\n  maxTime?: string,\n): boolean => {\n  const time = parseTime(value);\n  const min = parseTime(minTime);\n  const max = parseTime(maxTime);\n\n  if (time === null) {\n    return false;\n  }\n\n  if (min !== null && max !== null && min > max) {\n    return false;\n  }\n\n  return (min === null || time >= min) && (max === null || time <= max);\n};\n\nconst normalizeTime = (\n  value?: string | null,\n  showSeconds = false,\n): string | null => {\n  if (!value) {\n    return null;\n  }\n\n  const parsed = parseTime(value);\n\n  if (parsed === null) {\n    return null;\n  }\n\n  const hours = Math.floor(parsed / 3600);\n  const minutes = Math.floor((parsed % 3600) / 60);\n  const seconds = parsed % 60;\n\n  const base = `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n\n  return showSeconds ? `${base}:${String(seconds).padStart(2, \"0\")}` : base;\n};\n\nexport { isTimeWithinBounds, isValidTime, normalizeTime, parseTime };\n"],"mappings":";AAAA,MAAM,eAAe;AAErB,MAAM,aAAa,UAAyC;CAC1D,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,QAAQ,aAAa,KAAK,KAAK;CAErC,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,QAAQ,OAAO,MAAM,EAAE;CAC7B,MAAM,UAAU,OAAO,MAAM,EAAE;CAC/B,MAAM,UAAU,OAAO,MAAM,MAAM,CAAC;CAEpC,OAAO,QAAQ,OAAO,UAAU,KAAK;AACvC;AAyBA,MAAM,iBACJ,OACA,cAAc,UACI;CAClB,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,SAAS,UAAU,KAAK;CAE9B,IAAI,WAAW,MACb,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,SAAS,IAAI;CACtC,MAAM,UAAU,KAAK,MAAO,SAAS,OAAQ,EAAE;CAC/C,MAAM,UAAU,SAAS;CAEzB,MAAM,OAAO,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG;CAEjF,OAAO,cAAc,GAAG,KAAK,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG,MAAM;AACvE"}

package/dist/components/forms/time-picker/time-picker.utils.js

@@ -0,0 +1,24 @@
+// src/components/forms/time-picker/time-picker.utils.ts
+const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/;
+const parseTime = (value) => {
+	if (!value) return null;
+	const match = TIME_PATTERN.exec(value);
+	if (!match) return null;
+	const hours = Number(match[1]);
+	const minutes = Number(match[2]);
+	const seconds = Number(match[3] ?? 0);
+	return hours * 3600 + minutes * 60 + seconds;
+};
+const normalizeTime = (value, showSeconds = false) => {
+	if (!value) return null;
+	const parsed = parseTime(value);
+	if (parsed === null) return null;
+	const hours = Math.floor(parsed / 3600);
+	const minutes = Math.floor(parsed % 3600 / 60);
+	const seconds = parsed % 60;
+	const base = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;
+	return showSeconds ? `${base}:${String(seconds).padStart(2, "0")}` : base;
+};
+export { normalizeTime, parseTime };
+
+//# sourceMappingURL=time-picker.utils.js.map

package/dist/components/forms/time-picker/time-picker.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.utils.js","names":[],"sources":["../../../../src/components/forms/time-picker/time-picker.utils.ts"],"sourcesContent":["const TIME_PATTERN = /^([01]\\d|2[0-3]):([0-5]\\d)(?::([0-5]\\d))?$/;\n\nconst parseTime = (value?: string | null): number | null => {\n  if (!value) {\n    return null;\n  }\n\n  const match = TIME_PATTERN.exec(value);\n\n  if (!match) {\n    return null;\n  }\n\n  const hours = Number(match[1]);\n  const minutes = Number(match[2]);\n  const seconds = Number(match[3] ?? 0);\n\n  return hours * 3600 + minutes * 60 + seconds;\n};\n\nconst isValidTime = (value?: string | null): boolean =>\n  value == null || value === \"\" || parseTime(value) !== null;\n\nconst isTimeWithinBounds = (\n  value: string,\n  minTime?: string,\n  maxTime?: string,\n): boolean => {\n  const time = parseTime(value);\n  const min = parseTime(minTime);\n  const max = parseTime(maxTime);\n\n  if (time === null) {\n    return false;\n  }\n\n  if (min !== null && max !== null && min > max) {\n    return false;\n  }\n\n  return (min === null || time >= min) && (max === null || time <= max);\n};\n\nconst normalizeTime = (\n  value?: string | null,\n  showSeconds = false,\n): string | null => {\n  if (!value) {\n    return null;\n  }\n\n  const parsed = parseTime(value);\n\n  if (parsed === null) {\n    return null;\n  }\n\n  const hours = Math.floor(parsed / 3600);\n  const minutes = Math.floor((parsed % 3600) / 60);\n  const seconds = parsed % 60;\n\n  const base = `${String(hours).padStart(2, \"0\")}:${String(minutes).padStart(2, \"0\")}`;\n\n  return showSeconds ? `${base}:${String(seconds).padStart(2, \"0\")}` : base;\n};\n\nexport { isTimeWithinBounds, isValidTime, normalizeTime, parseTime };\n"],"mappings":";AAAA,MAAM,eAAe;AAErB,MAAM,aAAa,UAAyC;CAC1D,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,QAAQ,aAAa,KAAK,KAAK;CAErC,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,QAAQ,OAAO,MAAM,EAAE;CAC7B,MAAM,UAAU,OAAO,MAAM,EAAE;CAC/B,MAAM,UAAU,OAAO,MAAM,MAAM,CAAC;CAEpC,OAAO,QAAQ,OAAO,UAAU,KAAK;AACvC;AAyBA,MAAM,iBACJ,OACA,cAAc,UACI;CAClB,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,SAAS,UAAU,KAAK;CAE9B,IAAI,WAAW,MACb,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,SAAS,IAAI;CACtC,MAAM,UAAU,KAAK,MAAO,SAAS,OAAQ,EAAE;CAC/C,MAAM,UAAU,SAAS;CAEzB,MAAM,OAAO,GAAG,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG;CAEjF,OAAO,cAAc,GAAG,KAAK,GAAG,OAAO,OAAO,CAAC,CAAC,SAAS,GAAG,GAAG,MAAM;AACvE"}

package/dist/components/forms/token-input/index.cjs

@@ -0,0 +1,189 @@
+"use client";
+const require_token_input_utils = require("./token-input.utils.cjs");
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/token-input/index.tsx
+const TokenInput = ({ length = 6, value, defaultValue = "", onValueChange, onComplete, mode = "numeric", mask = false, disabled = false, readOnly = false, required = false, size = "md", label, id, name, form, inputMode, autoComplete = "one-time-code", className, style, ref, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }) => {
+	if (!Number.isInteger(length) || length < 1 || length > 32) throw new Error("TokenInput length must be an integer between 1 and 32.");
+	const generatedId = (0, react.useId)();
+	const inputId = id ?? `${generatedId}-input`;
+	const labelId = `${inputId}-label`;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(() => require_token_input_utils.sanitizeToken(defaultValue, length, mode));
+	const currentValue = require_token_input_utils.sanitizeToken(isControlled ? value : internalValue, length, mode);
+	const [activeIndex, setActiveIndex] = (0, react.useState)(() => require_token_input_utils.getNextActiveIndex(currentValue, length));
+	const inputRefs = (0, react.useRef)([]);
+	const completedValueRef = (0, react.useRef)(null);
+	const resolvedActiveIndex = Math.min(activeIndex, length - 1);
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+	const setFirstInputRef = (0, react.useCallback)((node) => {
+		inputRefs.current[0] = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const focusInput = (0, react.useCallback)((index) => {
+		const nextIndex = Math.max(0, Math.min(index, length - 1));
+		setActiveIndex(nextIndex);
+		const input = inputRefs.current[nextIndex];
+		input?.focus();
+		input?.select();
+	}, [length]);
+	const commitValue = (0, react.useCallback)((nextValue) => {
+		const normalized = require_token_input_utils.sanitizeToken(nextValue, length, mode);
+		if (normalized === currentValue) return;
+		const wasComplete = require_token_input_utils.isTokenComplete(currentValue, length);
+		const isComplete = require_token_input_utils.isTokenComplete(normalized, length);
+		if (!isControlled) setInternalValue(normalized);
+		onValueChange?.(normalized);
+		if (!wasComplete && isComplete) {
+			if (completedValueRef.current !== normalized) onComplete?.(normalized);
+			completedValueRef.current = normalized;
+		} else if (!isComplete) completedValueRef.current = null;
+	}, [
+		currentValue,
+		isControlled,
+		length,
+		mode,
+		onComplete,
+		onValueChange
+	]);
+	const handleChange = (index, event) => {
+		if (disabled || readOnly) return;
+		const enteredValue = require_token_input_utils.sanitizeToken(event.currentTarget.value, length, mode);
+		const nextValue = enteredValue.length > 1 ? require_token_input_utils.insertTokenCharacters(currentValue, index, enteredValue, length, mode) : require_token_input_utils.replaceTokenCharacter(currentValue, index, enteredValue, length, mode);
+		commitValue(nextValue);
+		if (enteredValue.length > 0) focusInput(Math.min(index + enteredValue.length, length - 1));
+		else focusInput(index);
+	};
+	const handlePaste = (index, event) => {
+		if (disabled || readOnly) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		const pastedValue = require_token_input_utils.sanitizeToken(event.clipboardData.getData("text"), length, mode);
+		if (!pastedValue) return;
+		const nextValue = require_token_input_utils.insertTokenCharacters(currentValue, index, pastedValue, length, mode);
+		commitValue(nextValue);
+		focusInput(Math.min(index + pastedValue.length, length - 1));
+	};
+	const handleKeyDown = (index, event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		switch (event.key) {
+			case "ArrowLeft":
+				event.preventDefault();
+				focusInput(index - 1);
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				focusInput(index + 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusInput(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusInput(length - 1);
+				break;
+			case "Backspace":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) {
+					commitValue(require_token_input_utils.removeTokenCharacter(currentValue, index));
+					focusInput(index);
+				} else if (index > 0) {
+					const previousIndex = require_token_input_utils.getPreviousActiveIndex(index);
+					commitValue(require_token_input_utils.removeTokenCharacter(currentValue, previousIndex));
+					focusInput(previousIndex);
+				}
+				break;
+			case "Delete":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) commitValue(require_token_input_utils.removeTokenCharacter(currentValue, index));
+				focusInput(index);
+		}
+	};
+	const handleFocus = (event) => {
+		const index = Number(event.currentTarget.dataset.tokenIndex);
+		setActiveIndex(index);
+		event.currentTarget.select();
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+	};
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rootProps,
+		className: (0, _puzzle_ui_core.cn)("puzzle-token-input", className),
+		style,
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": resolvedLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-required": required || void 0,
+		"aria-disabled": disabled || void 0,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		"data-invalid": isInvalid || void 0,
+		children: [
+			label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				id: labelId,
+				htmlFor: inputId,
+				className: "puzzle-token-input__label",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "puzzle-token-input__slots",
+				children: Array.from({ length }, (_, index) => {
+					const character = currentValue[index] ?? "";
+					const slotLabel = ariaLabel ? `${ariaLabel}, character ${index + 1} of ${length}` : index === 0 && (id != null || label != null) ? void 0 : `Character ${index + 1} of ${length}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: index === 0 ? setFirstInputRef : (node) => {
+							inputRefs.current[index] = node;
+						},
+						id: index === 0 ? inputId : void 0,
+						"data-token-index": index,
+						className: "puzzle-token-input__slot",
+						type: mask ? "password" : "text",
+						inputMode: inputMode ?? (mode === "numeric" ? "numeric" : "text"),
+						autoComplete: index === 0 ? autoComplete : "off",
+						autoCapitalize: "off",
+						spellCheck: false,
+						maxLength: length,
+						value: character,
+						disabled,
+						readOnly,
+						required,
+						tabIndex: index === resolvedActiveIndex ? 0 : -1,
+						"aria-label": slotLabel,
+						"aria-describedby": ariaDescribedBy,
+						"aria-invalid": ariaInvalid,
+						onChange: (event) => handleChange(index, event),
+						onPaste: (event) => handlePaste(index, event),
+						onKeyDown: (event) => handleKeyDown(index, event),
+						onFocus: handleFocus,
+						onBlur: handleBlur
+					}, index);
+				})
+			}),
+			name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				form,
+				value: currentValue,
+				disabled
+			})
+		]
+	});
+};
+exports.TokenInput = TokenInput;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/token-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","useState","sanitizeToken","getNextActiveIndex","useRef","useCallback","isTokenComplete","insertTokenCharacters","replaceTokenCharacter","removeTokenCharacter","getPreviousActiveIndex","cn"],"sources":["../../../../src/components/forms/token-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  insertTokenCharacters,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  sanitizeToken,\n} from \"./token-input.utils\";\n\nimport type { TokenInputProps } from \"./token-input.types\";\n\nimport \"./token-input.css\";\n\nconst TokenInput = ({\n  length = 6,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onComplete,\n  mode = \"numeric\",\n  mask = false,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  size = \"md\",\n  label,\n  id,\n  name,\n  form,\n  inputMode,\n  autoComplete = \"one-time-code\",\n  className,\n  style,\n  ref,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...rootProps\n}: TokenInputProps) => {\n  if (!Number.isInteger(length) || length < 1 || length > 32) {\n    throw new Error(\"TokenInput length must be an integer between 1 and 32.\");\n  }\n\n  const generatedId = useId();\n\n  // The ID belongs to the first native input.\n  // This allows FormField's associated label to work.\n  const inputId = id ?? `${generatedId}-input`;\n  const labelId = `${inputId}-label`;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    sanitizeToken(defaultValue, length, mode),\n  );\n\n  const currentValue = sanitizeToken(\n    isControlled ? value : internalValue,\n    length,\n    mode,\n  );\n\n  const [activeIndex, setActiveIndex] = useState(() =>\n    getNextActiveIndex(currentValue, length),\n  );\n\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const completedValueRef = useRef<string | null>(null);\n\n  const resolvedActiveIndex = Math.min(activeIndex, length - 1);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const setFirstInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRefs.current[0] = node;\n\n      if (typeof ref === \"function\") {\n        return ref(node);\n      }\n\n      if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  const focusInput = useCallback(\n    (index: number) => {\n      const nextIndex = Math.max(0, Math.min(index, length - 1));\n\n      setActiveIndex(nextIndex);\n\n      const input = inputRefs.current[nextIndex];\n\n      input?.focus();\n      input?.select();\n    },\n    [length],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: string) => {\n      const normalized = sanitizeToken(nextValue, length, mode);\n\n      if (normalized === currentValue) {\n        return;\n      }\n\n      const wasComplete = isTokenComplete(currentValue, length);\n\n      const isComplete = isTokenComplete(normalized, length);\n\n      if (!isControlled) {\n        setInternalValue(normalized);\n      }\n\n      onValueChange?.(normalized);\n\n      if (!wasComplete && isComplete) {\n        if (completedValueRef.current !== normalized) {\n          onComplete?.(normalized);\n        }\n\n        completedValueRef.current = normalized;\n      } else if (!isComplete) {\n        completedValueRef.current = null;\n      }\n    },\n    [currentValue, isControlled, length, mode, onComplete, onValueChange],\n  );\n\n  const handleChange = (\n    index: number,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const enteredValue = sanitizeToken(event.currentTarget.value, length, mode);\n\n    const nextValue =\n      enteredValue.length > 1\n        ? insertTokenCharacters(currentValue, index, enteredValue, length, mode)\n        : replaceTokenCharacter(\n            currentValue,\n            index,\n            enteredValue,\n            length,\n            mode,\n          );\n\n    commitValue(nextValue);\n\n    if (enteredValue.length > 0) {\n      focusInput(Math.min(index + enteredValue.length, length - 1));\n    } else {\n      focusInput(index);\n    }\n  };\n\n  const handlePaste = (\n    index: number,\n    event: ClipboardEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    event.preventDefault();\n\n    const pastedValue = sanitizeToken(\n      event.clipboardData.getData(\"text\"),\n      length,\n      mode,\n    );\n\n    if (!pastedValue) {\n      return;\n    }\n\n    const nextValue = insertTokenCharacters(\n      currentValue,\n      index,\n      pastedValue,\n      length,\n      mode,\n    );\n\n    commitValue(nextValue);\n\n    focusInput(Math.min(index + pastedValue.length, length - 1));\n  };\n\n  const handleKeyDown = (\n    index: number,\n    event: KeyboardEvent<HTMLInputElement>,\n  ) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        event.preventDefault();\n        focusInput(index - 1);\n        break;\n      }\n\n      case \"ArrowRight\": {\n        event.preventDefault();\n        focusInput(index + 1);\n        break;\n      }\n\n      case \"Home\": {\n        event.preventDefault();\n        focusInput(0);\n        break;\n      }\n\n      case \"End\": {\n        event.preventDefault();\n        focusInput(length - 1);\n        break;\n      }\n\n      case \"Backspace\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n\n          focusInput(index);\n        } else if (index > 0) {\n          const previousIndex = getPreviousActiveIndex(index);\n\n          commitValue(removeTokenCharacter(currentValue, previousIndex));\n\n          focusInput(previousIndex);\n        }\n\n        break;\n      }\n\n      case \"Delete\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n        }\n\n        focusInput(index);\n        break;\n      }\n\n      default:\n        break;\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    const index = Number(event.currentTarget.dataset.tokenIndex);\n\n    setActiveIndex(index);\n\n    // Selecting the current character makes replacement intuitive.\n    event.currentTarget.select();\n\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n  };\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-token-input\", className)}\n      style={style}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={resolvedLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      aria-required={required || undefined}\n      aria-disabled={disabled || undefined}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className=\"puzzle-token-input__label\"\n        >\n          {label}\n        </label>\n      )}\n\n      <div className=\"puzzle-token-input__slots\">\n        {Array.from({ length }, (_, index) => {\n          const character = currentValue[index] ?? \"\";\n\n          const slotLabel = ariaLabel\n            ? `${ariaLabel}, character ${index + 1} of ${length}`\n            : index === 0 && (id != null || label != null)\n              ? undefined\n              : `Character ${index + 1} of ${length}`;\n\n          return (\n            <input\n              key={index}\n              ref={\n                index === 0\n                  ? setFirstInputRef\n                  : (node) => {\n                      inputRefs.current[index] = node;\n                    }\n              }\n              id={index === 0 ? inputId : undefined}\n              data-token-index={index}\n              className=\"puzzle-token-input__slot\"\n              type={mask ? \"password\" : \"text\"}\n              inputMode={inputMode ?? (mode === \"numeric\" ? \"numeric\" : \"text\")}\n              autoComplete={index === 0 ? autoComplete : \"off\"}\n              autoCapitalize=\"off\"\n              spellCheck={false}\n              maxLength={length}\n              value={character}\n              disabled={disabled}\n              readOnly={readOnly}\n              required={required}\n              tabIndex={index === resolvedActiveIndex ? 0 : -1}\n              aria-label={slotLabel}\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={ariaInvalid}\n              onChange={(event) => handleChange(index, event)}\n              onPaste={(event) => handlePaste(index, event)}\n              onKeyDown={(event) => handleKeyDown(index, event)}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n            />\n          );\n        })}\n      </div>\n\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          form={form}\n          value={currentValue}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nexport { TokenInput };\n\nexport type {\n  TokenInputProps,\n  TokenInputMode,\n  TokenInputSize,\n} from \"./token-input.types\";\n"],"mappings":"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"}

package/dist/components/forms/token-input/index.d.cts

@@ -0,0 +1,3 @@
+import { TokenInputMode, TokenInputProps, TokenInputSize } from "./token-input.types.cjs";
+declare const TokenInput: ({ length, value, defaultValue, onValueChange, onComplete, mode, mask, disabled, readOnly, required, size, label, id, name, form, inputMode, autoComplete, className, style, ref, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }: TokenInputProps) => import("react").JSX.Element;
+export { TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize };

package/dist/components/forms/token-input/index.d.ts

@@ -0,0 +1,3 @@
+import { TokenInputMode, TokenInputProps, TokenInputSize } from "./token-input.types.js";
+declare const TokenInput: ({ length, value, defaultValue, onValueChange, onComplete, mode, mask, disabled, readOnly, required, size, label, id, name, form, inputMode, autoComplete, className, style, ref, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }: TokenInputProps) => import("react").JSX.Element;
+export { TokenInput, type TokenInputMode, type TokenInputProps, type TokenInputSize };

package/dist/components/forms/token-input/index.js

@@ -0,0 +1,189 @@
+"use client";
+import { getNextActiveIndex, getPreviousActiveIndex, insertTokenCharacters, isTokenComplete, removeTokenCharacter, replaceTokenCharacter, sanitizeToken } from "./token-input.utils.js";
+import "./token-input.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/token-input/index.tsx
+const TokenInput = ({ length = 6, value, defaultValue = "", onValueChange, onComplete, mode = "numeric", mask = false, disabled = false, readOnly = false, required = false, size = "md", label, id, name, form, inputMode, autoComplete = "one-time-code", className, style, ref, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }) => {
+	if (!Number.isInteger(length) || length < 1 || length > 32) throw new Error("TokenInput length must be an integer between 1 and 32.");
+	const generatedId = useId();
+	const inputId = id ?? `${generatedId}-input`;
+	const labelId = `${inputId}-label`;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(() => sanitizeToken(defaultValue, length, mode));
+	const currentValue = sanitizeToken(isControlled ? value : internalValue, length, mode);
+	const [activeIndex, setActiveIndex] = useState(() => getNextActiveIndex(currentValue, length));
+	const inputRefs = useRef([]);
+	const completedValueRef = useRef(null);
+	const resolvedActiveIndex = Math.min(activeIndex, length - 1);
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+	const setFirstInputRef = useCallback((node) => {
+		inputRefs.current[0] = node;
+		if (typeof ref === "function") return ref(node);
+		if (ref) ref.current = node;
+	}, [ref]);
+	const focusInput = useCallback((index) => {
+		const nextIndex = Math.max(0, Math.min(index, length - 1));
+		setActiveIndex(nextIndex);
+		const input = inputRefs.current[nextIndex];
+		input?.focus();
+		input?.select();
+	}, [length]);
+	const commitValue = useCallback((nextValue) => {
+		const normalized = sanitizeToken(nextValue, length, mode);
+		if (normalized === currentValue) return;
+		const wasComplete = isTokenComplete(currentValue, length);
+		const isComplete = isTokenComplete(normalized, length);
+		if (!isControlled) setInternalValue(normalized);
+		onValueChange?.(normalized);
+		if (!wasComplete && isComplete) {
+			if (completedValueRef.current !== normalized) onComplete?.(normalized);
+			completedValueRef.current = normalized;
+		} else if (!isComplete) completedValueRef.current = null;
+	}, [
+		currentValue,
+		isControlled,
+		length,
+		mode,
+		onComplete,
+		onValueChange
+	]);
+	const handleChange = (index, event) => {
+		if (disabled || readOnly) return;
+		const enteredValue = sanitizeToken(event.currentTarget.value, length, mode);
+		const nextValue = enteredValue.length > 1 ? insertTokenCharacters(currentValue, index, enteredValue, length, mode) : replaceTokenCharacter(currentValue, index, enteredValue, length, mode);
+		commitValue(nextValue);
+		if (enteredValue.length > 0) focusInput(Math.min(index + enteredValue.length, length - 1));
+		else focusInput(index);
+	};
+	const handlePaste = (index, event) => {
+		if (disabled || readOnly) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		const pastedValue = sanitizeToken(event.clipboardData.getData("text"), length, mode);
+		if (!pastedValue) return;
+		const nextValue = insertTokenCharacters(currentValue, index, pastedValue, length, mode);
+		commitValue(nextValue);
+		focusInput(Math.min(index + pastedValue.length, length - 1));
+	};
+	const handleKeyDown = (index, event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		switch (event.key) {
+			case "ArrowLeft":
+				event.preventDefault();
+				focusInput(index - 1);
+				break;
+			case "ArrowRight":
+				event.preventDefault();
+				focusInput(index + 1);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusInput(0);
+				break;
+			case "End":
+				event.preventDefault();
+				focusInput(length - 1);
+				break;
+			case "Backspace":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) {
+					commitValue(removeTokenCharacter(currentValue, index));
+					focusInput(index);
+				} else if (index > 0) {
+					const previousIndex = getPreviousActiveIndex(index);
+					commitValue(removeTokenCharacter(currentValue, previousIndex));
+					focusInput(previousIndex);
+				}
+				break;
+			case "Delete":
+				if (readOnly) return;
+				event.preventDefault();
+				if (currentValue[index]) commitValue(removeTokenCharacter(currentValue, index));
+				focusInput(index);
+		}
+	};
+	const handleFocus = (event) => {
+		const index = Number(event.currentTarget.dataset.tokenIndex);
+		setActiveIndex(index);
+		event.currentTarget.select();
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+	};
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: cn("puzzle-token-input", className),
+		style,
+		role: "group",
+		"aria-label": ariaLabel,
+		"aria-labelledby": resolvedLabelledBy,
+		"aria-describedby": ariaDescribedBy,
+		"aria-invalid": ariaInvalid,
+		"aria-required": required || void 0,
+		"aria-disabled": disabled || void 0,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-readonly": readOnly || void 0,
+		"data-invalid": isInvalid || void 0,
+		children: [
+			label != null && /* @__PURE__ */ jsx("label", {
+				id: labelId,
+				htmlFor: inputId,
+				className: "puzzle-token-input__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "puzzle-token-input__slots",
+				children: Array.from({ length }, (_, index) => {
+					const character = currentValue[index] ?? "";
+					const slotLabel = ariaLabel ? `${ariaLabel}, character ${index + 1} of ${length}` : index === 0 && (id != null || label != null) ? void 0 : `Character ${index + 1} of ${length}`;
+					return /* @__PURE__ */ jsx("input", {
+						ref: index === 0 ? setFirstInputRef : (node) => {
+							inputRefs.current[index] = node;
+						},
+						id: index === 0 ? inputId : void 0,
+						"data-token-index": index,
+						className: "puzzle-token-input__slot",
+						type: mask ? "password" : "text",
+						inputMode: inputMode ?? (mode === "numeric" ? "numeric" : "text"),
+						autoComplete: index === 0 ? autoComplete : "off",
+						autoCapitalize: "off",
+						spellCheck: false,
+						maxLength: length,
+						value: character,
+						disabled,
+						readOnly,
+						required,
+						tabIndex: index === resolvedActiveIndex ? 0 : -1,
+						"aria-label": slotLabel,
+						"aria-describedby": ariaDescribedBy,
+						"aria-invalid": ariaInvalid,
+						onChange: (event) => handleChange(index, event),
+						onPaste: (event) => handlePaste(index, event),
+						onKeyDown: (event) => handleKeyDown(index, event),
+						onFocus: handleFocus,
+						onBlur: handleBlur
+					}, index);
+				})
+			}),
+			name && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				form,
+				value: currentValue,
+				disabled
+			})
+		]
+	});
+};
+export { TokenInput };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/token-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/token-input/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport {\n  getNextActiveIndex,\n  getPreviousActiveIndex,\n  insertTokenCharacters,\n  isTokenComplete,\n  removeTokenCharacter,\n  replaceTokenCharacter,\n  sanitizeToken,\n} from \"./token-input.utils\";\n\nimport type { TokenInputProps } from \"./token-input.types\";\n\nimport \"./token-input.css\";\n\nconst TokenInput = ({\n  length = 6,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onComplete,\n  mode = \"numeric\",\n  mask = false,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  size = \"md\",\n  label,\n  id,\n  name,\n  form,\n  inputMode,\n  autoComplete = \"one-time-code\",\n  className,\n  style,\n  ref,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...rootProps\n}: TokenInputProps) => {\n  if (!Number.isInteger(length) || length < 1 || length > 32) {\n    throw new Error(\"TokenInput length must be an integer between 1 and 32.\");\n  }\n\n  const generatedId = useId();\n\n  // The ID belongs to the first native input.\n  // This allows FormField's associated label to work.\n  const inputId = id ?? `${generatedId}-input`;\n  const labelId = `${inputId}-label`;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    sanitizeToken(defaultValue, length, mode),\n  );\n\n  const currentValue = sanitizeToken(\n    isControlled ? value : internalValue,\n    length,\n    mode,\n  );\n\n  const [activeIndex, setActiveIndex] = useState(() =>\n    getNextActiveIndex(currentValue, length),\n  );\n\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const completedValueRef = useRef<string | null>(null);\n\n  const resolvedActiveIndex = Math.min(activeIndex, length - 1);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const setFirstInputRef = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRefs.current[0] = node;\n\n      if (typeof ref === \"function\") {\n        return ref(node);\n      }\n\n      if (ref) {\n        ref.current = node;\n      }\n    },\n    [ref],\n  );\n\n  const focusInput = useCallback(\n    (index: number) => {\n      const nextIndex = Math.max(0, Math.min(index, length - 1));\n\n      setActiveIndex(nextIndex);\n\n      const input = inputRefs.current[nextIndex];\n\n      input?.focus();\n      input?.select();\n    },\n    [length],\n  );\n\n  const commitValue = useCallback(\n    (nextValue: string) => {\n      const normalized = sanitizeToken(nextValue, length, mode);\n\n      if (normalized === currentValue) {\n        return;\n      }\n\n      const wasComplete = isTokenComplete(currentValue, length);\n\n      const isComplete = isTokenComplete(normalized, length);\n\n      if (!isControlled) {\n        setInternalValue(normalized);\n      }\n\n      onValueChange?.(normalized);\n\n      if (!wasComplete && isComplete) {\n        if (completedValueRef.current !== normalized) {\n          onComplete?.(normalized);\n        }\n\n        completedValueRef.current = normalized;\n      } else if (!isComplete) {\n        completedValueRef.current = null;\n      }\n    },\n    [currentValue, isControlled, length, mode, onComplete, onValueChange],\n  );\n\n  const handleChange = (\n    index: number,\n    event: ChangeEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const enteredValue = sanitizeToken(event.currentTarget.value, length, mode);\n\n    const nextValue =\n      enteredValue.length > 1\n        ? insertTokenCharacters(currentValue, index, enteredValue, length, mode)\n        : replaceTokenCharacter(\n            currentValue,\n            index,\n            enteredValue,\n            length,\n            mode,\n          );\n\n    commitValue(nextValue);\n\n    if (enteredValue.length > 0) {\n      focusInput(Math.min(index + enteredValue.length, length - 1));\n    } else {\n      focusInput(index);\n    }\n  };\n\n  const handlePaste = (\n    index: number,\n    event: ClipboardEvent<HTMLInputElement>,\n  ) => {\n    if (disabled || readOnly) {\n      event.preventDefault();\n      return;\n    }\n\n    event.preventDefault();\n\n    const pastedValue = sanitizeToken(\n      event.clipboardData.getData(\"text\"),\n      length,\n      mode,\n    );\n\n    if (!pastedValue) {\n      return;\n    }\n\n    const nextValue = insertTokenCharacters(\n      currentValue,\n      index,\n      pastedValue,\n      length,\n      mode,\n    );\n\n    commitValue(nextValue);\n\n    focusInput(Math.min(index + pastedValue.length, length - 1));\n  };\n\n  const handleKeyDown = (\n    index: number,\n    event: KeyboardEvent<HTMLInputElement>,\n  ) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        event.preventDefault();\n        focusInput(index - 1);\n        break;\n      }\n\n      case \"ArrowRight\": {\n        event.preventDefault();\n        focusInput(index + 1);\n        break;\n      }\n\n      case \"Home\": {\n        event.preventDefault();\n        focusInput(0);\n        break;\n      }\n\n      case \"End\": {\n        event.preventDefault();\n        focusInput(length - 1);\n        break;\n      }\n\n      case \"Backspace\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n\n          focusInput(index);\n        } else if (index > 0) {\n          const previousIndex = getPreviousActiveIndex(index);\n\n          commitValue(removeTokenCharacter(currentValue, previousIndex));\n\n          focusInput(previousIndex);\n        }\n\n        break;\n      }\n\n      case \"Delete\": {\n        if (readOnly) {\n          return;\n        }\n\n        event.preventDefault();\n\n        if (currentValue[index]) {\n          commitValue(removeTokenCharacter(currentValue, index));\n        }\n\n        focusInput(index);\n        break;\n      }\n\n      default:\n        break;\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    const index = Number(event.currentTarget.dataset.tokenIndex);\n\n    setActiveIndex(index);\n\n    // Selecting the current character makes replacement intuitive.\n    event.currentTarget.select();\n\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n  };\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-token-input\", className)}\n      style={style}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={resolvedLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-invalid={ariaInvalid}\n      aria-required={required || undefined}\n      aria-disabled={disabled || undefined}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          htmlFor={inputId}\n          className=\"puzzle-token-input__label\"\n        >\n          {label}\n        </label>\n      )}\n\n      <div className=\"puzzle-token-input__slots\">\n        {Array.from({ length }, (_, index) => {\n          const character = currentValue[index] ?? \"\";\n\n          const slotLabel = ariaLabel\n            ? `${ariaLabel}, character ${index + 1} of ${length}`\n            : index === 0 && (id != null || label != null)\n              ? undefined\n              : `Character ${index + 1} of ${length}`;\n\n          return (\n            <input\n              key={index}\n              ref={\n                index === 0\n                  ? setFirstInputRef\n                  : (node) => {\n                      inputRefs.current[index] = node;\n                    }\n              }\n              id={index === 0 ? inputId : undefined}\n              data-token-index={index}\n              className=\"puzzle-token-input__slot\"\n              type={mask ? \"password\" : \"text\"}\n              inputMode={inputMode ?? (mode === \"numeric\" ? \"numeric\" : \"text\")}\n              autoComplete={index === 0 ? autoComplete : \"off\"}\n              autoCapitalize=\"off\"\n              spellCheck={false}\n              maxLength={length}\n              value={character}\n              disabled={disabled}\n              readOnly={readOnly}\n              required={required}\n              tabIndex={index === resolvedActiveIndex ? 0 : -1}\n              aria-label={slotLabel}\n              aria-describedby={ariaDescribedBy}\n              aria-invalid={ariaInvalid}\n              onChange={(event) => handleChange(index, event)}\n              onPaste={(event) => handlePaste(index, event)}\n              onKeyDown={(event) => handleKeyDown(index, event)}\n              onFocus={handleFocus}\n              onBlur={handleBlur}\n            />\n          );\n        })}\n      </div>\n\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          form={form}\n          value={currentValue}\n          disabled={disabled}\n        />\n      )}\n    </div>\n  );\n};\n\nexport { TokenInput };\n\nexport type {\n  TokenInputProps,\n  TokenInputMode,\n  TokenInputSize,\n} from \"./token-input.types\";\n"],"mappings":"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"}