@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/components/forms/InputOTP/InputOTP.js

@@ -1,195 +1,184 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
 import { cn } from '../../../utils/cn.js';
-import { Input } from '../Input/Input.js';
-import '../Input/Input.theme.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputOTPTheme } from './InputOTP.theme.js';
+import { formsBaseTheme } from '../forms.theme.js';
 
+/**
+ * Per-charset input configuration: one source drives the sanitizer, the
+ * native `pattern`, and the mobile keyboard (`inputMode`) so they can never
+ * disagree (an alphanumeric code must never summon a digits-only keypad).
+ */
+const CHARSET_CONFIG = {
+    numeric: { strip: /[^0-9]/g, pattern: '[0-9]*', inputMode: 'numeric' },
+    alphanumeric: {
+        strip: /[^a-zA-Z0-9]/g,
+        pattern: '[a-zA-Z0-9]*',
+        inputMode: 'text',
+    },
+};
+// Size-independent digit paint. The font-size/line-height come from the slot
+// WRAPPER (theme.charSizes) and are inherited, so the caret below can size in
+// `em` instead of needing its own token family.
+const charClass = 'font-semibold text-[var(--color-text-primary)]';
+const caretClass = 'w-[1.5px] h-[1.1em] bg-[var(--color-primary-600)] dark:bg-[var(--color-primary-500)] rounded-full absolute';
+/**
+ * One rendered code slot — the single source for the char pop + blinking
+ * caret markup, shared by every grouping branch.
+ */
+const OtpSlot = ({ char, showCaret, className, reducedMotion }) => (jsxs("div", { className: className, children: [reducedMotion ? (char && jsx("span", { className: charClass, children: char })) : (jsx(AnimatePresence, { mode: "popLayout", initial: false, children: char ? (jsx(motion.span, { initial: { opacity: 0, scale: 0.85 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.85 }, transition: springs.snappy, className: charClass, children: char }, "char")) : null })), showCaret && (jsx("div", { className: cn(caretClass, !reducedMotion && 'animate-[flik-caret-blink_1s_step-end_infinite]') }))] }));
 /**
  * InputOTP component for entering one-time passwords or verification codes.
- *
- * @component
- * @example
- * ```tsx
- * <InputOTP
- *   length={6}
- *   value={otpValue}
- *   onChange={setOtpValue}
- *   onComplete={handleOtpComplete}
- *   label="Enter verification code"
- * />
- * ```
+ * One invisible native input overlays the rendered slots: focus, typing,
+ * paste, and autofill all go through it, and the caret is pinned to the end
+ * of the value so the highlighted slot always matches where edits land.
  */
-const InputOTP = React__default.forwardRef(({ length = 6, value, defaultValue, onChange, onComplete, state = 'default', disabled = false, label, helperText, errorMessage, error, autoFocus = true, className, id: idProp, ...props }, ref) => {
-    const inputRefs = useRef([]);
+const InputOTP = React__default.forwardRef(({ length = 6, size = 'lg', value, defaultValue, onChange, onComplete, charset = 'alphanumeric', state = 'default', disabled = false, label, helperText, errorMessage, error, autoFocus = true, className, id: idProp, ...props }, ref) => {
+    var _a;
+    const inputRef = useRef(null);
     const theme = inputOTPTheme;
+    const shouldReduceMotion = (_a = useReducedMotion()) !== null && _a !== void 0 ? _a : false;
     const generatedId = React__default.useId();
-    const helperTextId = `${idProp !== null && idProp !== void 0 ? idProp : generatedId}-helper`;
+    const inputId = idProp !== null && idProp !== void 0 ? idProp : `otp-input-${generatedId}`;
+    const helperTextId = `${inputId}-helper`;
+    const labelId = `${inputId}-label`;
     // Derive unified state flags for backward compat
     const isDisabled = state === 'disabled' || disabled;
     const isInvalid = state === 'invalid' || !!error;
     // Internal state for uncontrolled usage — seeded with defaultValue
     const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '');
+    const [isFocused, setIsFocused] = useState(false);
     // Use controlled value if provided, otherwise use internal state
     const isControlled = value !== undefined;
     const currentValue = isControlled ? value : internalValue;
-    const setValue = useCallback((next) => {
+    // Dev warnings (§9): controlled/uncontrolled misuse
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (value !== undefined && defaultValue !== undefined) {
+                console.warn('[InputOTP]: Both `value` and `defaultValue` provided. InputOTP is controlled — `defaultValue` is ignored.');
+            }
+            if (value !== undefined && !onChange) {
+                console.warn('[InputOTP]: `value` provided without an `onChange` handler — the field will be read-only.');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const charsetConfig = CHARSET_CONFIG[charset];
+    const commitValue = useCallback((next) => {
         if (!isControlled)
             setInternalValue(next);
         onChange === null || onChange === void 0 ? void 0 : onChange(next);
-    }, [isControlled, onChange]);
-    // Convert value to array of characters
-    const valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
-    // Auto-focus first input on mount
+        if (next.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(next);
+        }
+    }, [isControlled, onChange, onComplete, length]);
+    const sanitize = useCallback((raw) => raw.replace(charsetConfig.strip, ''), [charsetConfig]);
+    const activeIndex = currentValue.length;
+    // Auto-focus hidden input on mount
     useEffect(() => {
-        if (autoFocus && inputRefs.current[0] && !isDisabled) {
-            inputRefs.current[0].focus();
+        if (autoFocus && inputRef.current && !isDisabled) {
+            inputRef.current.focus();
         }
     }, [autoFocus, isDisabled]);
-    // Handle input change
-    const handleChange = useCallback((index, newValue) => {
-        var _a;
+    const handleInputChange = (e) => {
         if (isDisabled)
             return;
-        // Only allow single character (take last character if multiple)
-        const char = newValue.slice(-1);
-        // Create new value array
-        const newValueArray = [...valueArray];
-        newValueArray[index] = char;
-        // Convert back to string and remove trailing spaces
-        const newValueString = newValueArray.join('').trimEnd();
-        setValue(newValueString);
-        // Auto-focus next input if character was entered
-        if (char && index < length - 1) {
-            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        // Check if OTP is complete
-        if (newValueString.length === length) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValueString);
-        }
-    }, [isDisabled, valueArray, length, setValue, onComplete]);
-    // Handle key down for navigation and deletion
-    const handleKeyDown = useCallback((index, event) => {
-        var _a, _b, _c, _d, _e;
+        commitValue(sanitize(e.target.value).slice(0, length));
+    };
+    // Paste must bypass the native maxLength: the browser truncates BEFORE we
+    // can strip separators ('123-456' → '123-45' → '12345', last digit lost).
+    // Read the clipboard directly, sanitize, then commit through the same path.
+    const handlePaste = (e) => {
         if (isDisabled)
             return;
-        switch (event.key) {
-            case 'Backspace':
-                if (!valueArray[index] && index > 0) {
-                    // If current field is empty, move to previous and clear it
-                    event.preventDefault();
-                    (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-                    handleChange(index - 1, '');
-                }
-                break;
-            case 'Delete':
-                // Clear current field
-                event.preventDefault();
-                handleChange(index, '');
-                break;
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (index > 0) {
-                    (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (index < length - 1) {
-                    (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
-                }
-                break;
-            case 'Home':
-                event.preventDefault();
-                (_d = inputRefs.current[0]) === null || _d === void 0 ? void 0 : _d.focus();
-                break;
-            case 'End':
-                event.preventDefault();
-                (_e = inputRefs.current[length - 1]) === null || _e === void 0 ? void 0 : _e.focus();
-                break;
-        }
-    }, [isDisabled, valueArray, length, handleChange]);
-    // Handle paste
-    const handlePaste = useCallback((event) => {
-        var _a;
-        if (isDisabled)
+        e.preventDefault();
+        const pasted = sanitize(e.clipboardData.getData('text'));
+        if (!pasted)
             return;
-        event.preventDefault();
-        const pastedData = event.clipboardData.getData('text').slice(0, length);
-        if (pastedData) {
-            setValue(pastedData);
-            // Focus the next empty field or last field
-            const nextIndex = Math.min(pastedData.length, length - 1);
-            (_a = inputRefs.current[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-            // Check if OTP is complete
-            if (pastedData.length === length) {
-                onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
-            }
+        // A full code replaces whatever is typed; a fragment appends at the end
+        // (the caret is always pinned to the end).
+        const next = pasted.length >= length
+            ? pasted.slice(0, length)
+            : (currentValue + pasted).slice(0, length);
+        commitValue(next);
+    };
+    // Pin the real caret to the end of the value. The visual "active slot"
+    // is derived from value length, so a caret moved by click/arrow keys
+    // would silently edit a different position than the one highlighted.
+    const pinCaretToEnd = () => {
+        const el = inputRef.current;
+        if (!el)
+            return;
+        const end = el.value.length;
+        if (el.selectionStart !== end || el.selectionEnd !== end) {
+            el.setSelectionRange(end, end);
         }
-    }, [isDisabled, length, setValue, onComplete]);
-    // Handle focus and blur (simplified since we removed focus state)
-    const handleFocus = useCallback((index) => {
-        // Focus logic can be added here if needed
-    }, []);
-    const handleBlur = useCallback(() => {
-        // Blur logic can be added here if needed
-    }, []);
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
     // State class for CSS selectors (matches Input component pattern)
     const stateClass = isInvalid
-        ? "state-invalid"
+        ? 'state-invalid'
         : isDisabled
-            ? "state-disabled"
-            : "state-default";
+            ? 'state-disabled'
+            : 'state-default';
     // Resolved label state for FormLabel
     const labelState = isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default';
-    // Per-slot accessible name. Slot 0 stays linked to the visible <FormLabel>
-    // via htmlFor (no aria-label — an aria-label would override that
-    // association). Slots 2+ previously had no accessible name of their own;
-    // give each an indexed name so every slot is announced distinctly.
-    const getSlotAriaLabel = (index) => index === 0 ? undefined : `Digit ${index + 1} of ${length}`;
     // Resolved message to display: errorMessage takes precedence while
     // invalid, then helperText, then the deprecated `error` string.
     const displayedHelperText = isInvalid && errorMessage ? errorMessage : (helperText !== null && helperText !== void 0 ? helperText : error);
     // Build classes with shadcn pattern - user className has highest priority
     const wrapperClasses = cn(theme.wrapperStyle, stateClass, className);
-    const containerClasses = cn(theme.containerStyle);
-    // Get input classes based on position within group
-    const getInputClasses = (index) => {
-        if (length === 6) {
-            // For 6-digit: two groups of 3
-            const isFirst = index === 0 || index === 3;
-            const isLast = index === 2 || index === 5;
-            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
-                'rounded-r-none -mr-px': !isLast,
-                'rounded-l-none': !isFirst,
-            });
-        }
-        else {
-            // For other lengths: one group
-            const isFirst = index === 0;
-            const isLast = index === length - 1;
-            return cn(theme.inputGroupStyle, 'relative focus-within:z-10', {
-                'rounded-r-none -mr-px': !isLast,
-                'rounded-l-none': !isFirst,
-            });
-        }
+    const containerClasses = cn(theme.containerStyle, 'relative');
+    // Slot grouping: 6-digit codes render as two groups of three; every other
+    // length is a single run. Slots only differ by group-edge rounding.
+    const groups = length === 6
+        ? [
+            [0, 3],
+            [3, 6],
+        ]
+        : [[0, length]];
+    // Slot paint comes from formsBaseTheme (inputGroupBaseStyle / states /
+    // focusStates) — the same inset-shadow border system as every other form
+    // control — plus this component's geometry from the theme file. The
+    // hidden input lives outside the slots, so the "focused" (active-slot)
+    // state is applied in JS via focusStates instead of :focus-within.
+    const getSlotClasses = (index, isActive) => {
+        const group = groups.find(([start, end]) => index >= start && index < end);
+        const isFirst = index === group[0];
+        const isLast = index === group[1] - 1;
+        return cn(formsBaseTheme.inputGroupBaseStyle, theme.inputGroupSizes[size], theme.charSizes[size], !isLast && 'rounded-r-none -mr-px', !isFirst && 'rounded-l-none', isDisabled && formsBaseTheme.states.disabled, !isDisabled && isInvalid && formsBaseTheme.states.invalid, !isDisabled &&
+            isActive &&
+            cn('z-10', isInvalid
+                ? formsBaseTheme.focusStates.invalid
+                : cn(formsBaseTheme.focusStates.default, theme.slotActiveHoverGuard)));
     };
-    return (jsxs("div", { ref: ref, className: wrapperClasses, ...props, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: "otp-input-0", state: labelState, children: label })) : (label)), jsx("div", { className: containerClasses, children: length === 6 ? (
-                // For 6-digit OTP, create two groups of 3
-                jsxs(Fragment, { children: [jsx("div", { className: "flex", children: Array.from({ length: 3 }, (_, i) => (jsx(Input, { ref: (el) => {
-                                    inputRefs.current[i] = el;
-                                }, id: `otp-input-${i}`, type: "text", value: valueArray[i] || '', onChange: (e) => handleChange(i, e.target.value), onKeyDown: (e) => handleKeyDown(i, e), onFocus: () => handleFocus(i), onBlur: handleBlur, onPaste: i === 0 ? handlePaste : undefined, disabled: isDisabled, state: isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default', "aria-label": getSlotAriaLabel(i), "aria-describedby": displayedHelperText ? helperTextId : undefined, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(i), wrapperClassName: "space-y-0 w-auto" }, i))) }), jsx("span", { className: theme.separatorStyle, children: "\u2014" }), jsx("div", { className: "flex", children: Array.from({ length: 3 }, (_, i) => {
-                                const index = i + 3;
-                                return (jsx(Input, { ref: (el) => {
-                                        inputRefs.current[index] = el;
-                                    }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, disabled: isDisabled, state: isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default', "aria-label": getSlotAriaLabel(index), "aria-describedby": displayedHelperText ? helperTextId : undefined, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index));
-                            }) })] })) : (
-                // For other lengths, create one group
-                jsx("div", { className: "flex", children: Array.from({ length }, (_, index) => (jsx(Input, { ref: (el) => {
-                            inputRefs.current[index] = el;
-                        }, id: `otp-input-${index}`, type: "text", value: valueArray[index] || '', onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), onFocus: () => handleFocus(index), onBlur: handleBlur, onPaste: index === 0 ? handlePaste : undefined, disabled: isDisabled, state: isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default', "aria-label": getSlotAriaLabel(index), "aria-describedby": displayedHelperText ? helperTextId : undefined, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index))) })) }), displayedHelperText && (jsx("div", { id: helperTextId, className: cn(theme.helperText), children: displayedHelperText }))] }));
+    const hasNodeLabel = Boolean(label) && typeof label !== 'string';
+    return (jsxs("div", { ref: ref, className: wrapperClasses, ...props, children: [label &&
+                (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: inputId, state: labelState, children: label })) : (
+                // ReactNode labels can't be linked via htmlFor (they may not be a
+                // <label>), so wrap with an id and point aria-labelledby at it —
+                // the input must always have an accessible name.
+                jsx("div", { id: labelId, children: label }))), jsxs("div", { className: containerClasses, onClick: handleContainerClick, children: [jsx("input", { ref: inputRef, id: inputId, type: "text", pattern: charsetConfig.pattern, inputMode: charsetConfig.inputMode, autoComplete: "one-time-code", maxLength: length, value: currentValue, onChange: handleInputChange, onPaste: handlePaste, onSelect: pinCaretToEnd, onFocus: () => {
+                            setIsFocused(true);
+                            pinCaretToEnd();
+                        }, onBlur: () => setIsFocused(false), disabled: isDisabled, "aria-invalid": isInvalid || undefined, "aria-labelledby": hasNodeLabel ? labelId : undefined, "aria-describedby": displayedHelperText ? helperTextId : undefined, className: "absolute inset-0 w-full h-full opacity-0 cursor-text select-none z-20 disabled:cursor-not-allowed" }), groups.map(([start, end], groupIndex) => (jsxs(React__default.Fragment, { children: [groupIndex > 0 && (jsx("span", { className: theme.separatorStyle, children: "\u2014" })), jsx("div", { className: "flex", children: Array.from({ length: end - start }, (_, i) => {
+                                    const index = start + i;
+                                    // While full, the last slot stays highlighted (Backspace
+                                    // edits it); otherwise the first empty slot is active.
+                                    const isActive = isFocused && index === Math.min(activeIndex, length - 1);
+                                    const char = currentValue[index];
+                                    return (jsx(OtpSlot, { char: char, showCaret: isActive && !char, className: getSlotClasses(index, isActive), reducedMotion: shouldReduceMotion }, index));
+                                }) })] }, start)))] }), displayedHelperText && (jsx("div", { id: helperTextId, className: cn(theme.helperText), children: displayedHelperText }))] }));
 });
 InputOTP.displayName = 'InputOTP';
 

package/dist/components/forms/InputOTP/InputOTP.theme.d.ts

@@ -1,6 +1,10 @@
 import { InputOTPTheme } from './InputOTP.types';
 /**
  * Default theme for InputOTP component - Clean & Organized
- * Uses flat structure with design tokens following library patterns
+ * Uses flat structure with design tokens following library patterns.
+ *
+ * Slot borders/rings (resting, hover, invalid, disabled, active) come straight
+ * from `formsBaseTheme` (inputGroupBaseStyle / states / focusStates) — this file
+ * only adds OTP-specific geometry and the active-slot hover guard.
  */
 export declare const inputOTPTheme: InputOTPTheme;

package/dist/components/forms/InputOTP/InputOTP.theme.js

@@ -2,17 +2,52 @@ import { formsBaseTheme } from '../forms.theme.js';
 
 /**
  * Default theme for InputOTP component - Clean & Organized
- * Uses flat structure with design tokens following library patterns
+ * Uses flat structure with design tokens following library patterns.
+ *
+ * Slot borders/rings (resting, hover, invalid, disabled, active) come straight
+ * from `formsBaseTheme` (inputGroupBaseStyle / states / focusStates) — this file
+ * only adds OTP-specific geometry and the active-slot hover guard.
  */
 const inputOTPTheme = {
     // Base container styles
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // OTP input container
     containerStyle: 'flex items-center gap-3',
-    // Individual input field styles with design tokens
-    inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full !p-0',
-    // Input group wrapper for grouped inputs (overrides default Input styling)
-    inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
+    // Slot geometry: square slots sized from --otp-slot-size-*, whose sm/md/lg
+    // alias the form heights so slots match an adjacent Input of the same size.
+    // Both w/h and min-w/min-h are set so a flex parent can never shrink a slot
+    // out of square. Written as full literal class strings — never interpolated
+    // — or Tailwind purges them.
+    inputGroupSizes: {
+        sm: 'items-center justify-center ' +
+            'w-[var(--otp-slot-size-sm)] min-w-[var(--otp-slot-size-sm)] ' +
+            'h-[var(--otp-slot-size-sm)] min-h-[var(--otp-slot-size-sm)]',
+        md: 'items-center justify-center ' +
+            'w-[var(--otp-slot-size-md)] min-w-[var(--otp-slot-size-md)] ' +
+            'h-[var(--otp-slot-size-md)] min-h-[var(--otp-slot-size-md)]',
+        lg: 'items-center justify-center ' +
+            'w-[var(--otp-slot-size-lg)] min-w-[var(--otp-slot-size-lg)] ' +
+            'h-[var(--otp-slot-size-lg)] min-h-[var(--otp-slot-size-lg)]',
+        xl: 'items-center justify-center ' +
+            'w-[var(--otp-slot-size-xl)] min-w-[var(--otp-slot-size-xl)] ' +
+            'h-[var(--otp-slot-size-xl)] min-h-[var(--otp-slot-size-xl)]',
+    },
+    // 🔴 `length:` hint is required — a bare text-[var(--x)] resolves to the
+    // COLOUR branch and silently no-ops. The paired /[var(--otp-line-height-*)]
+    // is equally required: text-[length:…] carries font-size only, so without it
+    // the digit's leading silently falls back to normal/1.5.
+    charSizes: {
+        sm: 'text-[length:var(--otp-text-size-sm)]/[var(--otp-line-height-sm)]',
+        md: 'text-[length:var(--otp-text-size-md)]/[var(--otp-line-height-md)]',
+        lg: 'text-[length:var(--otp-text-size-lg)]/[var(--otp-line-height-lg)]',
+        xl: 'text-[length:var(--otp-text-size-xl)]/[var(--otp-line-height-xl)]',
+    },
+    // Keep the primary border on hover for the JS-driven active slot (the hidden
+    // input sits outside the slot, so the base `not-focus-within:hover:` edge
+    // would otherwise win over the plain active border). Same not-focus-within
+    // re-assert technique as formsBaseTheme.states.invalid / Input.theme.ts.
+    slotActiveHoverGuard: 'not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-primary-600)] ' +
+        'dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-primary-500)]',
     // Separator between input groups
     separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
     // Helper text with state handling (reuses form base)

package/dist/components/forms/InputOTP/InputOTP.types.d.ts

@@ -2,12 +2,30 @@
  * State variants for the InputOTP component
  */
 export type InputOTPState = 'default' | 'disabled' | 'invalid';
+/**
+ * Character sets accepted by the InputOTP component
+ */
+export type InputOTPCharset = 'numeric' | 'alphanumeric';
+/**
+ * Slot size variants for the InputOTP component.
+ *
+ * `sm`/`md`/`lg` resolve to the same heights as the equivalent `Input` size,
+ * so an OTP lines up with adjacent controls. `xl` has no form-ramp
+ * counterpart — an OTP slot is a square display element and legitimately
+ * wants a size above the form ramp's top rung.
+ */
+export type InputOTPSize = 'sm' | 'md' | 'lg' | 'xl';
 export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /**
      * Number of OTP input fields
      * @default 6
      */
     length?: number;
+    /**
+     * Size of the OTP slots.
+     * @default 'lg'
+     */
+    size?: InputOTPSize;
     /**
      * Current OTP value (controlled)
      */
@@ -24,6 +42,14 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * Callback when OTP is complete (all fields filled)
      */
     onComplete?: (value: string) => void;
+    /**
+     * Which characters the code accepts. Drives the sanitizer (typed and pasted
+     * characters outside the set are stripped), the native `pattern` attribute,
+     * and the mobile keyboard via `inputMode` (`'numeric'` → numeric keypad,
+     * `'alphanumeric'` → standard text keyboard).
+     * @default 'alphanumeric'
+     */
+    charset?: InputOTPCharset;
     /**
      * Visual and functional state of the OTP input group.
      * Use 'disabled' instead of the deprecated `disabled` boolean prop.
@@ -65,8 +91,25 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 export interface InputOTPTheme {
     wrapperStyle: string;
     containerStyle: string;
-    inputStyle: string;
-    inputGroupStyle: string;
+    /**
+     * Slot geometry (square size + centering) per size, layered over
+     * `formsBaseTheme.inputGroupBaseStyle`.
+     */
+    inputGroupSizes: Record<InputOTPSize, string>;
+    /**
+     * Digit type per size, applied to the slot WRAPPER (not the digit span) so
+     * the digit inherits it and the caret can size in `em`. Runs one rung
+     * hotter than form body text — a display numeral, not label text.
+     */
+    charSizes: Record<InputOTPSize, string>;
+    /**
+     * Hover-edge guard for the JS-driven active slot. The hidden input lives
+     * outside the slot, so `:focus-within` never applies and the base theme's
+     * `not-focus-within:hover:` border change would otherwise override the
+     * active (primary) border on hover — this re-asserts primary under the same
+     * variant (mirrors `Input.theme.ts` states.invalid's hover re-assert).
+     */
+    slotActiveHoverGuard: string;
     separatorStyle: string;
     helperText: string;
 }

package/dist/components/forms/InputOTP/index.d.ts

@@ -1,3 +1,3 @@
 export { InputOTP } from './InputOTP';
-export type { InputOTPProps, InputOTPTheme } from './InputOTP.types';
+export type { InputOTPProps, InputOTPTheme, InputOTPSize } from './InputOTP.types';
 export { inputOTPTheme } from './InputOTP.theme';

package/dist/components/forms/InputTag/InputTag.js

@@ -3,11 +3,11 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { createPortal } from 'react-dom';
-import { TagIcon, PlusIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { Tag, Plus, Check } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Input } from '../Input/Input.js';
 import '../Input/Input.theme.js';
-import { Tag } from '../../core/Tag/Tag.js';
+import { Tag as Tag$1 } from '../../core/Tag/Tag.js';
 import { inputTagTheme } from './InputTag.theme.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
@@ -83,7 +83,7 @@ const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selecte
                                     if (!option.disabled) {
                                         onSelectOption(option, isCreateOption);
                                     }
-                                }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(PlusIcon, { className: "size-4 shrink-0", strokeWidth: 2 }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsxs("span", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "block truncate", children: option.label }), showSelectedIndicator && isSelected && (jsx(CheckIcon, { className: "size-4 shrink-0 text-[var(--color-primary)]", strokeWidth: 2 }))] })) }, option.id));
+                                }, children: isCreateOption ? (jsxs("span", { className: "flex items-center gap-1", children: [jsx(Plus, { className: "size-4 shrink-0", weight: "bold" }), jsx("span", { className: "block truncate", children: option.label })] })) : (jsxs("span", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: "block truncate", children: option.label }), showSelectedIndicator && isSelected && (jsx(Check, { className: "size-4 shrink-0 text-[var(--color-primary)]", weight: "bold" }))] })) }, option.id));
                         }), filteredOptions.length > 100 && (jsxs("div", { className: "px-3 py-2 text-xs text-[var(--color-text-muted)] text-center border-t border-[var(--color-border)]", children: ["Showing 100 of ", filteredOptions.length, " results \u2014 refine your search"] }))] })) }) })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
@@ -492,13 +492,13 @@ suggestions, creatable = true, openOnFocus = true, filterFn = defaultFilterFn, e
     }, [tags]);
     // Helper text to display (for dropdown mode, we render it separately)
     const displayHelperText = duplicateWarning || helperText;
-    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxs("div", { ref: wrapperRef, className: "relative", children: [jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, iconStart: jsx(TagIcon, { className: "size-4" }), placeholder: maxTags && tags.length >= maxTags
+    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxs("div", { ref: wrapperRef, className: "relative", children: [jsx(Input, { ref: inputRef, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: handleFocus, onBlur: handleBlur, iconStart: jsx(Tag, { className: "size-4" }), placeholder: maxTags && tags.length >= maxTags
                             ? `Maximum ${maxTags} tags reached`
                             : placeholder, size: size, state: state, label: label, 
                         // Only pass helperText to Input when NOT in dropdown mode
                         // Otherwise the dropdown positions below the helper text
                         helperText: hasDropdown ? undefined : displayHelperText, disabled: isInputDisabled, className: inputClassName, role: hasDropdown ? "combobox" : undefined, "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? "listbox" : undefined, "aria-autocomplete": hasDropdown ? "list" : undefined, "aria-controls": hasDropdown ? listboxId : undefined }), hasDropdown && (jsx(InputTagOptions, { isOpen: isOpen, onClose: handleCloseDropdown, triggerRef: wrapperRef, filteredOptions: filteredOptions, selectedTags: tags, highlightedIndex: highlightedIndex, setHighlightedIndex: setHighlightedIndex, onSelectOption: handleSelectOption, showSelectedIndicator: showSelectedIndicator, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName, theme: theme, elevation: elevation, lift: lift, listboxId: listboxId }))] }), hasDropdown && displayHelperText && (jsx("p", { className: "text-sm text-[var(--color-text-muted)] mt-1.5", children: displayHelperText })), jsx("div", { className: cn(theme.tagsContainerStyle, "empty:hidden", tagsContainerClassName), children: jsx(AnimatePresence, { mode: "popLayout", children: tags.map((tag, index) => {
-                        return (jsx(Tag, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
+                        return (jsx(Tag$1, { size: size, onRemove: () => removeTag(index), disabled: disabled, className: tagClassName, children: tag }, `${tag}-${occurrenceMap[index]}`));
                     }) }) })] }));
 });
 InputTag.displayName = "InputTag";

package/dist/components/forms/InputTag/InputTag.theme.js

@@ -4,8 +4,7 @@ const inputTagTheme = {
     // Tags container style
     tagsContainerStyle: "flex flex-wrap gap-2 mt-2",
     // Dropdown styles - reuse from formsBaseTheme for consistency
-    dropdownStyle: formsBaseTheme.dropdownStyles.container +
-        " py-1",
+    dropdownStyle: formsBaseTheme.dropdownStyles.container,
     optionStyle: formsBaseTheme.dropdownStyles.option,
     selectedOptionStyle: formsBaseTheme.dropdownStyles.optionSelected,
     highlightedOptionStyle: formsBaseTheme.dropdownStyles.optionHighlighted,

package/dist/components/forms/Mention/Mention.theme.js

@@ -24,11 +24,9 @@ const mentionTheme = {
         lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.textareaHeight}`,
     },
     // Inline mention Tag chip styles.
-    // Dropdown container - reuses the shared dropdown styles
-    // p-1 (not py-1) so MenuItem rows' rounded highlight insets evenly on all
-    // sides instead of running flush to the container's left/right edges.
-    dropdownStyle: formsBaseTheme.dropdownStyles.container +
-        " p-1",
+    // Dropdown container - reuses the shared dropdown styles (which now carry the p-1
+    // inset that MenuItem rows' rounded highlight needs).
+    dropdownStyle: formsBaseTheme.dropdownStyles.container,
     // Suggestion rows render via the shared MenuItem primitive (avatar →
     // startContent, label → children, description → subtitle). These two styles
     // are only used by the custom `renderSuggestion` escape hatch, which wraps

package/dist/components/forms/Radio/Radio.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useState, useEffect } from 'react';
-import { useReducedMotion, motion } from 'motion/react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { useRadioGroupContext } from './RadioContext.js';
 import { RadioGroup } from './RadioGroup.js';
 import { reducedMotionDotVariants, radioDotVariants } from './Radio.animations.js';
+import { CHECK_RIPPLE_MOTION } from '../../core/shared/interaction.animations.js';
 
 /**
  * Radio component for selecting one option from a group
@@ -54,7 +55,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", ...restProps, id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, radioTheme.dotSizes[size], isDisabled && "saturate-0 opacity-80"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, 
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", ...restProps, id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(AnimatePresence, { initial: false, children: isChecked && !shouldReduceMotion && (jsx(motion.div, { ...CHECK_RIPPLE_MOTION, className: "absolute inset-0 rounded-full bg-[var(--color-primary)]/40 pointer-events-none z-0" }, "ripple")) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, radioTheme.dotSizes[size], isDisabled && "saturate-0 opacity-80"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, 
                         // Message-led invalid: option labels stay neutral (only the
                         // group's asterisk + error message are red). Disabled still dims.
                         formLabelTheme.stateStyles[state === "disabled" ? "disabled" : "default"], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));

package/dist/components/forms/Radio/Radio.theme.js

@@ -23,8 +23,8 @@ const radioTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:disabled:bg-[var(--color-mono-700)] dark:disabled:border-[var(--color-mono-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-mono-700)] dark:data-[state=disabled]:border-[var(--color-mono-600)]",
     // Invalid is message-led: the control stays neutral. The group's required
     // asterisk + error message carry the error (see RadioGroup). `data-state=invalid`
     // is still emitted on the input as an unstyled consumer/test hook.