@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/InputNumeric.js

@@ -1,16 +1,18 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { useUncontrolledState as t } from "./hooks/useUncontrolledState.js";
-import { Input as n } from "./Input.js";
-import { useCallback as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { useUncontrolledState } from "./hooks/useUncontrolledState.js";
+import { Input } from "./Input.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/InputNumeric/InputNumeric.tsx
-var a = /^\d$/, o = new Set([
+const DIGIT_REGEX = /^\d$/;
+const DISALLOWED_SPECIAL_KEYS = new Set([
 	"e",
 	"E",
 	"+"
-]), s = new Set([
+]);
+const ALLOWED_CONTROL_KEYS = new Set([
 	"Backspace",
 	"Delete",
 	"ArrowLeft",
@@ -22,110 +24,152 @@ var a = /^\d$/, o = new Set([
 	"Tab",
 	"Enter",
 	"Escape"
-]), c = (e) => {
+]);
+const getDecimalSeparator = (locale) => {
 	try {
-		return new Intl.NumberFormat(e).formatToParts(1.1).find((e) => e.type === "decimal")?.value ?? ".";
+		return new Intl.NumberFormat(locale).formatToParts(1.1).find((part) => part.type === "decimal")?.value ?? ".";
 	} catch {
 		return ".";
 	}
-}, l = (e, t) => t === "." ? e : e.replaceAll(t, "."), u = (e, t, n, r) => {
-	if (!e) return "";
-	let i = l(e, r).replace(/[^\d.-]/g, "");
-	if (n ? (i = i.replace(/(?!^)-/g, ""), i.startsWith("--") && (i = `-${i.replace(/-/g, "")}`)) : i = i.replace(/-/g, ""), !t) i = i.replace(/\./g, "");
+};
+const normalizeDecimalSeparator = (value, decimalSeparator) => {
+	if (decimalSeparator === ".") return value;
+	return value.replaceAll(decimalSeparator, ".");
+};
+const sanitizeNumericValue = (value, allowDecimal, allowNegative, decimalSeparator) => {
+	if (!value) return "";
+	let sanitized = normalizeDecimalSeparator(value, decimalSeparator).replace(/[^\d.-]/g, "");
+	if (!allowNegative) sanitized = sanitized.replace(/-/g, "");
+	else {
+		sanitized = sanitized.replace(/(?!^)-/g, "");
+		if (sanitized.startsWith("--")) sanitized = `-${sanitized.replace(/-/g, "")}`;
+	}
+	if (!allowDecimal) sanitized = sanitized.replace(/\./g, "");
 	else {
-		let e = i.indexOf(".");
-		e >= 0 && (i = `${i.slice(0, e + 1)}${i.slice(e + 1).replace(/\./g, "")}`);
+		const firstDecimalIndex = sanitized.indexOf(".");
+		if (firstDecimalIndex >= 0) sanitized = `${sanitized.slice(0, firstDecimalIndex + 1)}${sanitized.slice(firstDecimalIndex + 1).replace(/\./g, "")}`;
 	}
-	return i;
-}, d = (e) => {
-	if (e.selectionStart === null || e.selectionEnd === null) return !e.value.includes(".");
-	let t = e.value.slice(e.selectionStart, e.selectionEnd);
-	return !e.value.includes(".") || t.includes(".");
-}, f = (e) => {
-	if (e.selectionStart === null || e.selectionEnd === null) return e.value.length === 0;
-	let t = e.selectionStart === 0, n = e.value.slice(e.selectionStart, e.selectionEnd);
-	return t && (!e.value.includes("-") || n.includes("-"));
-}, p = (e) => {
-	if (e == null || e === "") return;
-	let t = typeof e == "number" ? e : Number.parseFloat(e);
-	return Number.isFinite(t) ? t : void 0;
-}, m = (e) => {
-	let t = e.toString();
-	return t.includes(".") ? t.split(".")[1]?.length ?? 0 : 0;
-}, h = (e, t) => {
-	if (t <= 0) return e;
-	let n = 10 ** t;
-	return Math.round(e * n) / n;
-}, g = ({ allowDecimal: g = !0, allowNegative: _ = !1, className: v, defaultValue: y = "", locale: b, max: x, min: S, onChange: C, onKeyDown: w, onPaste: T, step: E, value: D, ...O }) => {
-	let [k, A] = t({
-		value: D,
-		defaultValue: typeof y == "string" ? y : y == null ? "" : String(y),
-		onChange: C
-	}), j = c(b), M = p(S), N = p(x), P = p(E), F = P && P > 0 ? P : 1, I = M ?? (_ ? void 0 : 0), L = r((e) => {
-		if (w?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && !(e.metaKey || e.ctrlKey || e.altKey)) {
-			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-				e.preventDefault();
-				let t = e.key === "ArrowUp" ? 1 : -1, n = l(k, j), r = Number.parseFloat(n), i = (Number.isFinite(r) ? r : I ?? 0) + t * F;
-				I !== void 0 && (i = Math.max(I, i)), N !== void 0 && (i = Math.min(N, i)), g || (i = Math.trunc(i));
-				let a = g ? m(F) : 0, o = h(i, a), s = Object.is(o, -0) ? 0 : o;
-				A(u(a > 0 ? s.toFixed(a).replace(/\.?0+$/, "") : s.toString(), g, _, j));
-				return;
-			}
-			if (!s.has(e.key) && !a.test(e.key)) {
-				if (o.has(e.key)) {
-					e.preventDefault();
-					return;
-				}
-				if (e.key === "." || e.key === j) {
-					(!g || !d(e.currentTarget)) && e.preventDefault();
-					return;
-				}
-				if (e.key === "-") {
-					(!_ || !f(e.currentTarget)) && e.preventDefault();
-					return;
-				}
-				e.preventDefault();
-			}
+	return sanitized;
+};
+const shouldAllowDecimalInput = (target) => {
+	if (target.selectionStart === null || target.selectionEnd === null) return !target.value.includes(".");
+	const selectedText = target.value.slice(target.selectionStart, target.selectionEnd);
+	return !target.value.includes(".") || selectedText.includes(".");
+};
+const shouldAllowNegativeInput = (target) => {
+	if (target.selectionStart === null || target.selectionEnd === null) return target.value.length === 0;
+	const isAtStart = target.selectionStart === 0;
+	const selectedText = target.value.slice(target.selectionStart, target.selectionEnd);
+	return isAtStart && (!target.value.includes("-") || selectedText.includes("-"));
+};
+const parseNumericProp = (value) => {
+	if (value === void 0 || value === null || value === "") return void 0;
+	const parsed = typeof value === "number" ? value : Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : void 0;
+};
+const getDecimalPlaces = (value) => {
+	const valueString = value.toString();
+	if (!valueString.includes(".")) return 0;
+	return valueString.split(".")[1]?.length ?? 0;
+};
+const roundToPrecision = (value, precision) => {
+	if (precision <= 0) return value;
+	const factor = 10 ** precision;
+	return Math.round(value * factor) / factor;
+};
+const InputNumeric = ({ allowDecimal = true, allowNegative = false, className, defaultValue = "", locale, max, min, onChange, onKeyDown, onPaste, step, value: valueProp, ...props }) => {
+	const [value, setValue] = useUncontrolledState({
+		value: valueProp,
+		defaultValue: typeof defaultValue === "string" ? defaultValue : defaultValue !== void 0 && defaultValue !== null ? String(defaultValue) : "",
+		onChange
+	});
+	const decimalSeparator = getDecimalSeparator(locale);
+	const parsedMin = parseNumericProp(min);
+	const parsedMax = parseNumericProp(max);
+	const parsedStep = parseNumericProp(step);
+	const stepValue = parsedStep && parsedStep > 0 ? parsedStep : 1;
+	const effectiveMin = parsedMin ?? (!allowNegative ? 0 : void 0);
+	const handleKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+		if (event.metaKey || event.ctrlKey || event.altKey) return;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			event.preventDefault();
+			const direction = event.key === "ArrowUp" ? 1 : -1;
+			const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator);
+			const currentValue = Number.parseFloat(normalizedValue);
+			let nextValue = (Number.isFinite(currentValue) ? currentValue : effectiveMin ?? 0) + direction * stepValue;
+			if (effectiveMin !== void 0) nextValue = Math.max(effectiveMin, nextValue);
+			if (parsedMax !== void 0) nextValue = Math.min(parsedMax, nextValue);
+			if (!allowDecimal) nextValue = Math.trunc(nextValue);
+			const precision = allowDecimal ? getDecimalPlaces(stepValue) : 0;
+			const roundedValue = roundToPrecision(nextValue, precision);
+			const safeValue = Object.is(roundedValue, -0) ? 0 : roundedValue;
+			setValue(sanitizeNumericValue(precision > 0 ? safeValue.toFixed(precision).replace(/\.?0+$/, "") : safeValue.toString(), allowDecimal, allowNegative, decimalSeparator));
+			return;
+		}
+		if (ALLOWED_CONTROL_KEYS.has(event.key)) return;
+		if (DIGIT_REGEX.test(event.key)) return;
+		if (DISALLOWED_SPECIAL_KEYS.has(event.key)) {
+			event.preventDefault();
+			return;
+		}
+		if (event.key === "." || event.key === decimalSeparator) {
+			if (!allowDecimal || !shouldAllowDecimalInput(event.currentTarget)) event.preventDefault();
+			return;
+		}
+		if (event.key === "-") {
+			if (!allowNegative || !shouldAllowNegativeInput(event.currentTarget)) event.preventDefault();
+			return;
 		}
+		event.preventDefault();
 	}, [
-		g,
-		_,
-		j,
-		I,
-		w,
-		N,
-		A,
-		F,
-		k
-	]), R = r((e) => {
-		T?.(e);
-	}, [T]), z = r((e) => {
-		A(u(e, g, _, j));
+		allowDecimal,
+		allowNegative,
+		decimalSeparator,
+		effectiveMin,
+		onKeyDown,
+		parsedMax,
+		setValue,
+		stepValue,
+		value
+	]);
+	const handlePaste = useCallback((event) => {
+		onPaste?.(event);
+	}, [onPaste]);
+	const handleChange = useCallback((newValue) => {
+		setValue(sanitizeNumericValue(newValue, allowDecimal, allowNegative, decimalSeparator));
 	}, [
-		g,
-		_,
-		j,
-		A
-	]), B = g ? "decimal" : "numeric", V = g ? "[0-9]*[.]?[0-9]*" : "[0-9]*", H = l(k, j), U = H === "" || H === "-" || H === "." ? void 0 : Number.parseFloat(H);
-	return /* @__PURE__ */ i(n, {
-		...O,
-		"aria-valuemax": N,
-		"aria-valuemin": I,
-		"aria-valuenow": Number.isFinite(U) ? U : void 0,
-		className: e("tabular-nums", v),
-		inputMode: B,
-		max: x,
-		min: S,
-		onChange: z,
-		onKeyDown: L,
-		onPaste: R,
-		pattern: V,
+		allowDecimal,
+		allowNegative,
+		decimalSeparator,
+		setValue
+	]);
+	const inputMode = allowDecimal ? "decimal" : "numeric";
+	const pattern = allowDecimal ? "[0-9]*[.]?[0-9]*" : "[0-9]*";
+	const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator);
+	const ariaValueNow = normalizedValue === "" || normalizedValue === "-" || normalizedValue === "." ? void 0 : Number.parseFloat(normalizedValue);
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		"aria-valuemax": parsedMax,
+		"aria-valuemin": effectiveMin,
+		"aria-valuenow": Number.isFinite(ariaValueNow) ? ariaValueNow : void 0,
+		className: cn("tabular-nums", className),
+		inputMode,
+		max,
+		min,
+		onChange: handleChange,
+		onKeyDown: handleKeyDown,
+		onPaste: handlePaste,
+		pattern,
 		role: "spinbutton",
-		step: E,
+		step,
 		type: "text",
-		value: k
+		value
 	});
 };
-g.displayName = "InputNumeric";
+InputNumeric.displayName = "InputNumeric";
+
 //#endregion
-export { g as InputNumeric };
+export { InputNumeric };
+//# sourceMappingURL=InputNumeric.js.map

package/dist/InputNumeric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumeric.js","names":[],"sources":["../src/components/InputNumeric/InputNumeric.tsx"],"sourcesContent":["import { Input, type InputProps } from '@components/Input/Input'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, type ClipboardEvent, type KeyboardEvent, type ReactElement } from 'react'\n\ntype NumericKeyDownEvent = KeyboardEvent<HTMLInputElement>\ntype NumericPasteEvent = ClipboardEvent<HTMLInputElement>\n\nconst DIGIT_REGEX = /^\\d$/\nconst DISALLOWED_SPECIAL_KEYS = new Set(['e', 'E', '+'])\nconst ALLOWED_CONTROL_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Tab', 'Enter', 'Escape'])\n\nconst getDecimalSeparator = (locale?: string): string => {\n  try {\n    const formattedNumber = new Intl.NumberFormat(locale).formatToParts(1.1)\n    return formattedNumber.find((part) => part.type === 'decimal')?.value ?? '.'\n  } catch {\n    return '.'\n  }\n}\n\nconst normalizeDecimalSeparator = (value: string, decimalSeparator: string): string => {\n  if (decimalSeparator === '.') return value\n  return value.replaceAll(decimalSeparator, '.')\n}\n\nconst sanitizeNumericValue = (value: string, allowDecimal: boolean, allowNegative: boolean, decimalSeparator: string): string => {\n  if (!value) return ''\n\n  let sanitized = normalizeDecimalSeparator(value, decimalSeparator).replace(/[^\\d.-]/g, '')\n\n  if (!allowNegative) {\n    sanitized = sanitized.replace(/-/g, '')\n  } else {\n    sanitized = sanitized.replace(/(?!^)-/g, '')\n    if (sanitized.startsWith('--')) {\n      sanitized = `-${sanitized.replace(/-/g, '')}`\n    }\n  }\n\n  if (!allowDecimal) {\n    sanitized = sanitized.replace(/\\./g, '')\n  } else {\n    const firstDecimalIndex = sanitized.indexOf('.')\n    if (firstDecimalIndex >= 0) {\n      const integerPart = sanitized.slice(0, firstDecimalIndex + 1)\n      const fractionalPart = sanitized.slice(firstDecimalIndex + 1).replace(/\\./g, '')\n      sanitized = `${integerPart}${fractionalPart}`\n    }\n  }\n\n  return sanitized\n}\n\nconst shouldAllowDecimalInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return !target.value.includes('.')\n  }\n\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return !target.value.includes('.') || selectedText.includes('.')\n}\n\nconst shouldAllowNegativeInput = (target: HTMLInputElement): boolean => {\n  if (target.selectionStart === null || target.selectionEnd === null) {\n    return target.value.length === 0\n  }\n\n  const isAtStart = target.selectionStart === 0\n  const selectedText = target.value.slice(target.selectionStart, target.selectionEnd)\n  return isAtStart && (!target.value.includes('-') || selectedText.includes('-'))\n}\n\nconst parseNumericProp = (value: number | string | undefined): number | undefined => {\n  if (value === undefined || value === null || value === '') return undefined\n  const parsed = typeof value === 'number' ? value : Number.parseFloat(value)\n  return Number.isFinite(parsed) ? parsed : undefined\n}\n\nconst getDecimalPlaces = (value: number): number => {\n  const valueString = value.toString()\n  if (!valueString.includes('.')) return 0\n  return valueString.split('.')[1]?.length ?? 0\n}\n\nconst roundToPrecision = (value: number, precision: number): number => {\n  if (precision <= 0) return value\n  const factor = 10 ** precision\n  return Math.round(value * factor) / factor\n}\n\nexport type InputNumericProps = Omit<InputProps, 'inputMode' | 'onChange' | 'pattern' | 'type'> & {\n  allowDecimal?: boolean\n  allowNegative?: boolean\n  locale?: string\n  /** Number of message lines to reserve (default: 1 via Input). */\n  messageReserveLines?: number\n  /** Whether to keep message space reserved when hidden (default: true via Input). */\n  messageReserveSpace?: boolean\n  onChange?: (value: string) => void\n  value?: string\n}\n\nexport const InputNumeric = ({ allowDecimal = true, allowNegative = false, className, defaultValue = '', locale, max, min, onChange, onKeyDown, onPaste, step, value: valueProp, ...props }: InputNumericProps): ReactElement => {\n  const normalizedDefaultValue = typeof defaultValue === 'string' ? defaultValue : defaultValue !== undefined && defaultValue !== null ? String(defaultValue) : ''\n  const [value, setValue] = useUncontrolledState<string>({\n    value: valueProp,\n    defaultValue: normalizedDefaultValue,\n    onChange,\n  })\n  const decimalSeparator = getDecimalSeparator(locale)\n  const parsedMin = parseNumericProp(min)\n  const parsedMax = parseNumericProp(max)\n  const parsedStep = parseNumericProp(step)\n  const stepValue = parsedStep && parsedStep > 0 ? parsedStep : 1\n  const effectiveMin = parsedMin ?? (!allowNegative ? 0 : undefined)\n\n  const handleKeyDown = useCallback(\n    (event: NumericKeyDownEvent): void => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented || event.nativeEvent.isComposing) return\n\n      if (event.metaKey || event.ctrlKey || event.altKey) return\n      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n        event.preventDefault()\n\n        const direction = event.key === 'ArrowUp' ? 1 : -1\n        const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator)\n        const currentValue = Number.parseFloat(normalizedValue)\n        const hasCurrentValue = Number.isFinite(currentValue)\n        const baseValue = hasCurrentValue ? currentValue : (effectiveMin ?? 0)\n\n        let nextValue = baseValue + direction * stepValue\n        if (effectiveMin !== undefined) {\n          nextValue = Math.max(effectiveMin, nextValue)\n        }\n        if (parsedMax !== undefined) {\n          nextValue = Math.min(parsedMax, nextValue)\n        }\n\n        if (!allowDecimal) {\n          nextValue = Math.trunc(nextValue)\n        }\n\n        const precision = allowDecimal ? getDecimalPlaces(stepValue) : 0\n        const roundedValue = roundToPrecision(nextValue, precision)\n        const safeValue = Object.is(roundedValue, -0) ? 0 : roundedValue\n        const nextString = precision > 0 ? safeValue.toFixed(precision).replace(/\\.?0+$/, '') : safeValue.toString()\n        setValue(sanitizeNumericValue(nextString, allowDecimal, allowNegative, decimalSeparator))\n        return\n      }\n\n      if (ALLOWED_CONTROL_KEYS.has(event.key)) return\n      if (DIGIT_REGEX.test(event.key)) return\n\n      if (DISALLOWED_SPECIAL_KEYS.has(event.key)) {\n        event.preventDefault()\n        return\n      }\n\n      const isDecimalKey = event.key === '.' || event.key === decimalSeparator\n\n      if (isDecimalKey) {\n        if (!allowDecimal || !shouldAllowDecimalInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      if (event.key === '-') {\n        if (!allowNegative || !shouldAllowNegativeInput(event.currentTarget)) {\n          event.preventDefault()\n        }\n        return\n      }\n\n      event.preventDefault()\n    },\n    [allowDecimal, allowNegative, decimalSeparator, effectiveMin, onKeyDown, parsedMax, setValue, stepValue, value],\n  )\n\n  const handlePaste = useCallback(\n    (event: NumericPasteEvent): void => {\n      onPaste?.(event)\n    },\n    [onPaste],\n  )\n\n  const handleChange = useCallback(\n    (newValue: string): void => {\n      setValue(sanitizeNumericValue(newValue, allowDecimal, allowNegative, decimalSeparator))\n    },\n    [allowDecimal, allowNegative, decimalSeparator, setValue],\n  )\n\n  const inputMode = allowDecimal ? 'decimal' : 'numeric'\n  const pattern = allowDecimal ? '[0-9]*[.]?[0-9]*' : '[0-9]*'\n  const normalizedValue = normalizeDecimalSeparator(value, decimalSeparator)\n  const ariaValueNow = normalizedValue === '' || normalizedValue === '-' || normalizedValue === '.' ? undefined : Number.parseFloat(normalizedValue)\n\n  return (\n    <Input\n      {...props}\n      aria-valuemax={parsedMax}\n      aria-valuemin={effectiveMin}\n      aria-valuenow={Number.isFinite(ariaValueNow) ? ariaValueNow : undefined}\n      className={cn('tabular-nums', className)}\n      inputMode={inputMode}\n      max={max}\n      min={min}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      onPaste={handlePaste}\n      pattern={pattern}\n      role='spinbutton'\n      step={step}\n      type='text'\n      value={value}\n    />\n  )\n}\n\nInputNumeric.displayName = 'InputNumeric'\n"],"mappings":"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"}

package/dist/InputOTP.d.ts

@@ -1,62 +1,103 @@
-import { FormFieldState } from './utils/formFieldUtils';
-import { OTPInput, OTPInputProps } from 'input-otp';
-import { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';
-export interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {
-    onComplete?: (...args: unknown[]) => void;
-    className?: string;
-    errorMessage?: string | undefined;
-    inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
-    /**
-     * Regex pattern string to restrict allowed characters.
-     * When `inputMode="numeric"`, defaults to digits-only pattern.
-     * Set to `undefined` to allow any characters.
-     */
-    pattern?: string | undefined;
-    separator?: boolean;
-    state?: FormFieldState;
-    variant?: 'outlined' | 'filled';
+'use client';
+import { FormFieldState } from "./utils/formFieldUtils.js";
+import { ComponentPropsWithoutRef, ComponentRef, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { OTPInput, OTPInputProps } from "input-otp";
+
+//#region src/components/InputOTP/InputOTP.d.ts
+interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {
+  onComplete?: (...args: unknown[]) => void;
+  className?: string;
+  errorMessage?: string | undefined;
+  inputMode?: 'numeric' | 'text' | 'decimal' | 'tel' | 'search' | 'email' | 'url';
+  messageReserveLines?: number;
+  messageReserveSpace?: boolean;
+  /**
+   * Regex pattern string to restrict allowed characters.
+   * When `inputMode="numeric"`, defaults to digits-only pattern.
+   * Set to `undefined` to allow any characters.
+   */
+  pattern?: string | undefined;
+  separator?: boolean;
+  state?: FormFieldState;
+  variant?: 'outlined' | 'filled';
 }
-export type InputOTPProps = InputOTPBaseProps & ({
-    value: number | string;
-    onChange: (newValue: number | string) => void;
+type InputOTPProps = InputOTPBaseProps & ({
+  value: number | string;
+  onChange: (newValue: number | string) => void;
 } | {
-    value?: never;
-    onChange?: never;
+  value?: never;
+  onChange?: never;
 });
 interface SlotsProps {
-    className?: string;
-    count?: number;
-    start?: number;
+  className?: string;
+  count?: number;
+  start?: number;
 }
-export declare const InputOTP: {
-    ({ autoFocus, children, className, errorMessage, id, inputMode, maxLength, name, onChange, onComplete, pattern, ref, state, value, variant, ...props }: InputOTPProps & {
-        ref?: Ref<ComponentRef<typeof OTPInput>>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+declare const InputOTP: {
+  ({
+    autoFocus,
+    children,
+    className,
+    errorMessage,
+    id,
+    inputMode,
+    messageReserveLines,
+    messageReserveSpace,
+    maxLength,
+    name,
+    onChange,
+    onComplete,
+    pattern,
+    ref,
+    state,
+    value,
+    variant,
+    ...props
+  }: InputOTPProps & {
+    ref?: Ref<ComponentRef<typeof OTPInput>>;
+  }): _$react_jsx_runtime0.JSX.Element;
+  displayName: string;
 } & {
-    Group: {
-        ({ ref, ...props }: ComponentPropsWithoutRef<"div"> & {
-            ref?: Ref<ComponentRef<"div">>;
-        }): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Slot: {
-        ({ className, index, ref, ...props }: ComponentPropsWithoutRef<"div"> & {
-            index: number;
-            ref?: Ref<ComponentRef<"div">>;
-        }): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Slots: {
-        ({ start, count, className }: SlotsProps): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
-    Separator: {
-        ({ ref, ...props }: ComponentPropsWithoutRef<"div"> & {
-            ref?: Ref<ComponentRef<"div">>;
-        }): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+  Group: {
+    ({
+      ref,
+      ...props
+    }: ComponentPropsWithoutRef<'div'> & {
+      ref?: Ref<ComponentRef<'div'>>;
+    }): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  Slot: {
+    ({
+      className,
+      index,
+      ref,
+      ...props
+    }: ComponentPropsWithoutRef<'div'> & {
+      index: number;
+      ref?: Ref<ComponentRef<'div'>>;
+    }): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  Slots: {
+    ({
+      start,
+      count,
+      className
+    }: SlotsProps): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  Separator: {
+    ({
+      ref,
+      ...props
+    }: ComponentPropsWithoutRef<'div'> & {
+      ref?: Ref<ComponentRef<'div'>>;
+    }): _$react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
 };
-export {};
+//#endregion
+export { InputOTP, InputOTPBaseProps, InputOTPProps };
 //# sourceMappingURL=InputOTP.d.ts.map

package/dist/InputOTP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.d.ts","names":[],"sources":["../src/components/InputOTP/InputOTP.tsx"],"mappings":";;;;;;;UAMiB,iBAAA,SAA0B,IAAA,CAAK,aAAA;EAC9C,UAAA,OAAiB,IAAA;EACjB,SAAA;EACA,YAAA;EACA,SAAA;EACA,mBAAA;EACA,mBAAA;EAQQ;;;;;EAFR,OAAA;EACA,SAAA;EACA,KAAA,GAAQ,cAAA;EACR,OAAA;AAAA;AAAA,KAGU,aAAA,GAAgB,iBAAA;EAAuB,KAAA;EAAwB,QAAA,GAAW,QAAA;AAAA;EAAyC,KAAA;EAAe,QAAA;AAAA;AAAA,UA0JpI,UAAA;EACR,SAAA;EACA,KAAA;EACA,KAAA;AAAA;AAAA,cA0DW,QAAA;EAAA;;;;;;;;;;;;;;;;;;;KAlLV,aAAA;IACD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,QAAA;EAAA,IAC/B,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAqEE,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;OAQE,wBAAA;MACD,KAAA;MACA,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;OA+D+C,UAAA,GAAU,oBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAkBvD,wBAAA;MACD,GAAA,GAAM,GAAA,CAAI,YAAA;IAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/InputOTP.js

@@ -1,3 +1,161 @@
-'use client'
-import { t as e } from "./InputOTP-DLn7ja7J.js";
-export { e as InputOTP };
+'use client';
+import { MinusIcon } from "./Icons/MinusIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { ErrorMessage } from "./FormFieldMessage.js";
+import { getErrorMessageId, useFormFieldId, useFormFieldState } from "./utils/formFieldUtils.js";
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
+
+//#region src/components/InputOTP/InputOTP.tsx
+const InputOTPStateContext = createContext({});
+const OTPInputContext = createContext(null);
+const useRoot = () => {
+	const context = useContext(OTPInputContext);
+	if (!context) throw new Error("useRoot must be used within an InputOTP");
+	return context;
+};
+const Root = ({ autoFocus = false, children, className, errorMessage, id, inputMode = "numeric", messageReserveLines = 1, messageReserveSpace = true, maxLength, name, onChange, onComplete, pattern, ref, state = "default", value, variant = "outlined", ...props }) => {
+	const inputId = useFormFieldId(id, name);
+	const errorMessageId = getErrorMessageId(inputId);
+	const { isInvalid } = useFormFieldState(false, state);
+	const effectivePattern = pattern ?? (inputMode === "numeric" ? REGEXP_ONLY_DIGITS : void 0);
+	const handlePaste = (e) => {
+		let pasteData = e.clipboardData.getData("text/plain").trim().replaceAll("-", "");
+		if (inputMode === "numeric") pasteData = pasteData.replace(/\D/g, "");
+		if (pasteData.length === maxLength && typeof onChange === "function") onChange(pasteData);
+	};
+	return /* @__PURE__ */ jsx(InputOTPStateContext.Provider, {
+		value: { isInvalid },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "gap-y-1 flex w-max flex-col",
+			children: [/* @__PURE__ */ jsx(OTPInput, {
+				autoFocus,
+				containerClassName: cn("gap-2 flex items-center disabled:cursor-not-allowed has-[disabled]:opacity-50", className),
+				"data-1p-ignore": "true",
+				"data-dashlane-disabled-on-field": "true",
+				"data-lpignore": "true",
+				"data-protonpass-ignore": "true",
+				"data-testid": "spectral-input-otp",
+				id: inputId,
+				inputMode,
+				maxLength,
+				onChange,
+				onComplete,
+				onPaste: handlePaste,
+				pasteTransformer: (pasted) => pasted.replaceAll("-", ""),
+				pattern: effectivePattern,
+				pushPasswordManagerStrategy: "none",
+				ref,
+				"aria-describedby": isInvalid && errorMessage ? errorMessageId : void 0,
+				"aria-invalid": isInvalid,
+				role: "textbox",
+				textAlign: "center",
+				value,
+				...props,
+				render: ({ slots }) => /* @__PURE__ */ jsx(OTPInputContext.Provider, {
+					value: {
+						slots,
+						variant,
+						maxLength
+					},
+					children: children ?? /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Slots, {}) })
+				})
+			}), /* @__PURE__ */ jsx(ErrorMessage, {
+				dataTestId: "spectral-input-otp-error-message",
+				id: errorMessageId,
+				message: isInvalid ? errorMessage : null,
+				messageReserveLines,
+				messageReserveSpace
+			})]
+		})
+	});
+};
+Root.displayName = "InputOTP";
+const Group = ({ ref, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: "gap-x-2 flex items-center justify-center",
+	"data-testid": "spectral-input-otp-group",
+	ref,
+	...props
+});
+Group.displayName = "InputOTP.Group";
+const Slot = ({ className, index, ref, ...props }) => {
+	const { variant = "outlined", slots = [] } = useRoot();
+	const { isInvalid } = useContext(InputOTPStateContext);
+	const slot = slots[index] || {
+		char: "",
+		hasFakeCaret: true,
+		isActive: false
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("h-12 w-10 relative z-10 flex items-center justify-center rounded-[8px] border tabular-nums transition duration-200 focus:outline-none", variant === "filled" ? "border-level-one bg-level-one" : "border-input-otp-border bg-transparent", !isInvalid && "border", isInvalid && "border-2 border-danger-400", slot.isActive && !isInvalid && "z-10 border-input-otp-border--focus", slot.isActive && isInvalid && "z-10 border-danger-400 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-danger-400", className),
+		"data-index": index,
+		"data-testid": "spectral-input-otp-slot",
+		"data-variant": variant,
+		ref,
+		...props,
+		children: [slot.char, slot.hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "inset-0 pointer-events-none absolute flex items-center justify-center motion-safe:animate-caret-blink",
+			children: /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-input-otp-caret" })
+		})]
+	});
+};
+Slot.displayName = "InputOTP.Slot";
+/**
+* Helper component that automatically renders multiple InputOTP.Slot components.
+* Uses the maxLength from the parent InputOTP to determine how many slots to render.
+*
+* @example
+* // Render all 6 slots
+* <InputOTP maxLength={6}>
+*   <InputOTP.Group>
+*     <InputOTP.Slots />
+*   </InputOTP.Group>
+* </InputOTP>
+*
+* @example
+* // Render slots in groups with a separator (3-3 split)
+* <InputOTP maxLength={6}>
+*   <InputOTP.Group>
+*     <InputOTP.Slots count={3} />
+*   </InputOTP.Group>
+*   <InputOTP.Separator />
+*   <InputOTP.Group>
+*     <InputOTP.Slots start={3} />
+*   </InputOTP.Group>
+* </InputOTP>
+*/
+const Slots = ({ start = 0, count, className }) => {
+	const { maxLength = 0 } = useRoot();
+	const end = count !== void 0 ? start + count : maxLength;
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: end - start }, (_, i) => start + i).map((index) => /* @__PURE__ */ jsx(Slot, {
+		index,
+		className
+	}, index)) });
+};
+Slots.displayName = "InputOTP.Slots";
+const Separator = ({ ref, ...props }) => {
+	const { variant = "outlined" } = useRoot();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "separator",
+		...props,
+		"data-testid": "spectral-input-otp-separator",
+		"data-variant": variant,
+		children: /* @__PURE__ */ jsx(MinusIcon, {
+			size: 24,
+			color: variant === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)"
+		})
+	});
+};
+Separator.displayName = "InputOTP.Separator";
+const InputOTP = Object.assign(Root, {
+	Group,
+	Slot,
+	Slots,
+	Separator
+});
+
+//#endregion
+export { InputOTP };
+//# sourceMappingURL=InputOTP.js.map