@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.24

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

@@ -21,11 +21,16 @@ import { inputOTPTheme } from './InputOTP.theme.js';
  * />
  * ```
  */
-const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange, onComplete, disabled = false, label, helperText, error, autoFocus = true, className, ...props }, ref) => {
+const InputOTP = React__default.forwardRef(({ length = 6, value, defaultValue, onChange, onComplete, state = 'default', disabled = false, label, helperText, error, autoFocus = true, className, id: idProp, ...props }, ref) => {
     const inputRefs = useRef([]);
     const theme = inputOTPTheme;
-    // Internal state for uncontrolled usage
-    const [internalValue, setInternalValue] = useState('');
+    const generatedId = React__default.useId();
+    const helperTextId = `${idProp !== null && idProp !== void 0 ? idProp : generatedId}-helper`;
+    // 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 : '');
     // Use controlled value if provided, otherwise use internal state
     const currentValue = value !== undefined ? value : internalValue;
     const setValue = onChange || setInternalValue;
@@ -33,14 +38,14 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
     const valueArray = currentValue.padEnd(length, '').split('').slice(0, length);
     // Auto-focus first input on mount
     useEffect(() => {
-        if (autoFocus && inputRefs.current[0] && !disabled) {
+        if (autoFocus && inputRefs.current[0] && !isDisabled) {
             inputRefs.current[0].focus();
         }
-    }, [autoFocus, disabled]);
+    }, [autoFocus, isDisabled]);
     // Handle input change
     const handleChange = useCallback((index, newValue) => {
         var _a;
-        if (disabled)
+        if (isDisabled)
             return;
         // Only allow single character (take last character if multiple)
         const char = newValue.slice(-1);
@@ -58,11 +63,11 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
         if (newValueString.length === length) {
             onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValueString);
         }
-    }, [disabled, valueArray, length, setValue, onComplete]);
+    }, [isDisabled, valueArray, length, setValue, onComplete]);
     // Handle key down for navigation and deletion
     const handleKeyDown = useCallback((index, event) => {
         var _a, _b, _c, _d, _e;
-        if (disabled)
+        if (isDisabled)
             return;
         switch (event.key) {
             case 'Backspace':
@@ -99,11 +104,11 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
                 (_e = inputRefs.current[length - 1]) === null || _e === void 0 ? void 0 : _e.focus();
                 break;
         }
-    }, [disabled, valueArray, length, handleChange]);
+    }, [isDisabled, valueArray, length, handleChange]);
     // Handle paste
     const handlePaste = useCallback((event) => {
         var _a;
-        if (disabled)
+        if (isDisabled)
             return;
         event.preventDefault();
         const pastedData = event.clipboardData.getData('text').slice(0, length);
@@ -117,7 +122,7 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
                 onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
             }
         }
-    }, [disabled, length, setValue, onComplete]);
+    }, [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
@@ -126,11 +131,15 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
         // Blur logic can be added here if needed
     }, []);
     // State class for CSS selectors (matches Input component pattern)
-    const stateClass = error
+    const stateClass = isInvalid
         ? "state-invalid"
-        : disabled
+        : isDisabled
             ? "state-disabled"
             : "state-default";
+    // Resolved label state for FormLabel
+    const labelState = isInvalid ? 'invalid' : isDisabled ? 'disabled' : 'default';
+    // Resolved helper text to display — prefer helperText, fall back to error
+    const displayedHelperText = 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);
@@ -155,20 +164,20 @@ const InputOTP = React__default.forwardRef(({ length = 6, value = '', onChange,
             });
         }
     };
-    return (jsxs("div", { ref: ref, className: wrapperClasses, ...props, children: [label && (jsx(FormLabel, { htmlFor: `otp-input-0`, state: error ? "invalid" : disabled ? "disabled" : "default", children: label })), jsx("div", { className: containerClasses, children: length === 6 ? (
+    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: disabled, 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) => {
+                                }, 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-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: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index));
+                                    }, 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-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: disabled, maxLength: 1, className: theme.inputStyle, inputGroupClassName: getInputClasses(index), wrapperClassName: "space-y-0 w-auto" }, index))) })) }), (error || helperText) && (jsx("div", { className: cn(theme.helperText), children: error || helperText }))] }));
+                        }, 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-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 }))] }));
 });
 InputOTP.displayName = 'InputOTP';
 

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

@@ -1,13 +1,21 @@
-export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+/**
+ * State variants for the InputOTP component
+ */
+export type InputOTPState = 'default' | 'disabled' | 'invalid';
+export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
     /**
      * Number of OTP input fields
      * @default 6
      */
     length?: number;
     /**
-     * Current OTP value
+     * Current OTP value (controlled)
      */
     value?: string;
+    /**
+     * Default OTP value (uncontrolled)
+     */
+    defaultValue?: string;
     /**
      * Callback when OTP value changes
      */
@@ -16,21 +24,30 @@ export interface InputOTPProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * Callback when OTP is complete (all fields filled)
      */
     onComplete?: (value: string) => void;
+    /**
+     * Visual and functional state of the OTP input group.
+     * Use 'disabled' instead of the deprecated `disabled` boolean prop.
+     * Use 'invalid' instead of the deprecated `error` string prop.
+     * @default 'default'
+     */
+    state?: InputOTPState;
     /**
      * Whether the input is disabled
+     * @deprecated Use `state='disabled'` instead.
      * @default false
      */
     disabled?: boolean;
     /**
      * Label for the OTP input group
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Helper text below the inputs
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /**
      * Error message
+     * @deprecated Use `state='invalid'` with `helperText` instead.
      */
     error?: string;
     /**

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+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';
@@ -11,35 +11,8 @@ import { inputTagTheme } from './InputTag.theme.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { createDropdownAnimations } from '../Select/Select.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
 
-/**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
 /**
  * Default filter function for suggestions
  */
@@ -97,16 +70,16 @@ const InputTagOptions = ({ isOpen, onClose, triggerRef, filteredOptions, selecte
                         width: `${position.width}px`,
                     }
                     : {}),
-            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: filteredOptions.length === 0 ? (jsx("div", { className: theme.emptyMessageStyle, children: emptyMessage })) : (filteredOptions.map((option, index) => {
-                const isSelected = selectedTags.includes(option.value);
-                const isHighlighted = index === highlightedIndex;
-                const isCreateOption = option.id === "__create__";
-                return (jsx("div", { role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(theme.optionStyle, isHighlighted && theme.highlightedOptionStyle, option.disabled && theme.disabledOptionStyle, isCreateOption && theme.createOptionStyle), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
-                        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));
-            })) })) }));
+            }, tabIndex: -1, variants: animations, initial: "initial", animate: "visible", exit: "exit", children: filteredOptions.length === 0 ? (jsx("div", { className: theme.emptyMessageStyle, children: emptyMessage })) : (jsxs(Fragment, { children: [(filteredOptions.length > 100 ? filteredOptions.slice(0, 100) : filteredOptions).map((option, index) => {
+                        const isSelected = selectedTags.includes(option.value);
+                        const isHighlighted = index === highlightedIndex;
+                        const isCreateOption = option.id === "__create__";
+                        return (jsx("div", { role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled, "data-option-index": index, className: cn(theme.optionStyle, isHighlighted && theme.highlightedOptionStyle, option.disabled && theme.disabledOptionStyle, isCreateOption && theme.createOptionStyle), onMouseEnter: () => !option.disabled && setHighlightedIndex(index), onClick: () => {
+                                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));
+                    }), 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", { className: isDarkMode ? "dark" : undefined, children: optionsContent }), document.body);
     }

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

@@ -33,9 +33,9 @@ export interface InputTagProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** The state of the input */
     state?: InputTagState;
     /** Label for the input */
-    label?: string;
+    label?: React.ReactNode;
     /** Helper text displayed below the tags */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Placeholder text for the input */
     placeholder?: string;
     /** Whether the input is disabled */

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

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import React__default, { useMemo, useId, useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
 import { mentionTheme } from './Mention.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { Avatar } from '../../core/Avatar/Avatar.js';
 import { Tag } from '../../core/Tag/Tag.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
 import { normalizeSegments, setCaretAtOffset, getPlainTextOffset, parseDOMToSegments, serializeSegments, serializeSegmentsMasked, insertMentionIntoSegments, MENTION_ATTR } from './Mention.utils.js';
 
@@ -73,8 +74,11 @@ const dropdownVariants = {
 // ---------------------------------------------------------------------------
 // Mention component
 // ---------------------------------------------------------------------------
-const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, disabled = false, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, rows = 3, ...props }, ref) => {
+const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions: suggestionsProp, onSearch: onSearchProp, value: controlledValue, defaultValue = "", onChange, onMentionSelect, onMentionsChange, placeholder, size = "md", maxSuggestions = 8, className, wrapperClassName, dropdownClassName, theme: themeOverrides, state = "default", disabled = false, helperText, required, label, renderSuggestion, emptyMessage = "No results found", loading = false, mentionTagSize = "sm", mentionTagClassName, rows = 3, ...props }, ref) => {
     const theme = useMemo(() => ({ ...mentionTheme, ...(themeOverrides || {}) }), [themeOverrides]);
+    const generatedId = useId();
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
     const triggers = useMemo(() => {
         if (triggersProp && triggersProp.length > 0)
             return triggersProp;
@@ -150,7 +154,7 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
         if (!activeMention || !(activeTriggerConfig === null || activeTriggerConfig === void 0 ? void 0 : activeTriggerConfig.onSearch))
             return;
         activeTriggerConfig.onSearch(activeMention.query);
-    }, [activeMention === null || activeMention === void 0 ? void 0 : activeMention.query, activeMention === null || activeMention === void 0 ? void 0 : activeMention.trigger]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [activeMention === null || activeMention === void 0 ? void 0 : activeMention.query, activeMention === null || activeMention === void 0 ? void 0 : activeMention.trigger, activeTriggerConfig]);
     // Reset highlighted index when suggestions change
     useEffect(() => {
         setHighlightedIndex(filteredSuggestions.length > 0 ? 0 : -1);
@@ -596,11 +600,14 @@ const Mention = React__default.forwardRef(({ triggers: triggersProp, suggestions
     // -----------------------------------------------------------------------
     // Render
     // -----------------------------------------------------------------------
-    return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [jsx("div", { ref: wrapperRef, className: cn(theme.inputGroupStyle, isFocused && theme.inputGroupFocusStyle), children: jsx("div", { ref: setEditableRef, contentEditable: !disabled, suppressContentEditableWarning: true, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onSelect: handleSelect, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, role: "textbox", "aria-multiline": "true", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-placeholder": placeholder, "data-placeholder": placeholder, "aria-disabled": disabled || undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
-                        "before:content-[attr(data-placeholder)] before:text-[var(--color-text-placeholder)] before:pointer-events-none before:absolute dark:before:text-[var(--color-neutral-500)]", disabled && "cursor-not-allowed opacity-60", className), style: {
+    const helperId = `${generatedId}-helper`;
+    return (jsxs("div", { className: cn(theme.wrapperStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: generatedId, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", required: required, className: "mb-1.5", children: label })), jsx("div", { ref: wrapperRef, className: cn(theme.inputGroupStyle, isFocused && theme.inputGroupFocusStyle, isInvalid && "border-[var(--color-danger)] ring-1 ring-[var(--color-danger)]"), children: jsx("div", { ref: setEditableRef, id: generatedId, contentEditable: !isDisabled, suppressContentEditableWarning: true, onInput: handleInput, onKeyDown: handleKeyDown, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onSelect: handleSelect, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, role: "textbox", "aria-multiline": "true", "aria-autocomplete": "list", "aria-expanded": isDropdownOpen, "aria-haspopup": "listbox", "aria-placeholder": placeholder, "aria-required": required || undefined, "data-placeholder": placeholder, "aria-disabled": isDisabled || undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": helperText ? helperId : undefined, className: cn(theme.editableStyle, theme.sizes[size], isContentEmpty &&
+                        "before:content-[attr(data-placeholder)] before:text-[var(--color-text-placeholder)] before:pointer-events-none before:absolute dark:before:text-[var(--color-neutral-500)]", isDisabled && "cursor-not-allowed opacity-60", className), style: {
                         minHeight: rows ? `${rows * 1.5}em` : undefined,
                         position: "relative",
-                    }, ...props, children: renderedSegments }) }), isClient && createPortal(dropdownContent, document.body)] }));
+                    }, ...props, children: renderedSegments }) }), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
+                    ? "text-[var(--color-danger)]"
+                    : "text-[var(--color-text-muted)]"), children: helperText })), isClient && createPortal(dropdownContent, document.body)] }));
 });
 Mention.displayName = "Mention";
 

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

@@ -100,6 +100,7 @@ export interface MentionTheme {
  * Partial theme overrides for the Mention component.
  */
 export type MentionThemeOverrides = Partial<MentionTheme>;
+export type MentionState = "default" | "disabled" | "invalid";
 /**
  * Props for the Mention component.
  */
@@ -134,8 +135,14 @@ export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     dropdownClassName?: string;
     /** Theme overrides */
     theme?: MentionThemeOverrides;
+    /** Validation/interaction state */
+    state?: MentionState;
     /** Whether the mention input is disabled */
     disabled?: boolean;
+    /** Helper text rendered below the mention input */
+    helperText?: React.ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
     /** Custom renderer for suggestion items */
     renderSuggestion?: (suggestion: MentionSuggestion, isHighlighted: boolean, trigger: string) => React.ReactNode;
     /** Message shown when no suggestions match */
@@ -148,4 +155,6 @@ export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     mentionTagClassName?: string;
     /** Number of visible text rows (controls min-height) */
     rows?: number;
+    /** Label rendered above the mention input */
+    label?: string;
 }

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId, useState } from 'react';
+import React__default, { useId, useState, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
@@ -22,6 +22,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
     const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
     const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
     // Determine checked state
     const isInGroup = groupContext !== undefined;
     const checked = isInGroup ? groupContext.value === value : checkedProp;
@@ -43,7 +44,16 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "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, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
+    // Dev-only warning when no accessible name is provided
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+                console.warn('[Radio]: No accessible name provided. Add a `label` prop, `aria-label`, or `aria-labelledby`.');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": isInvalid || 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, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

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

@@ -23,16 +23,20 @@ const radioTheme = {
         "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:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)] " +
+        // Invalid state
+        "data-[state=invalid]:border-[var(--color-danger)] data-[state=invalid]:focus-visible:outline-[var(--color-danger)]",
     dotStyle: "absolute top-1/2 left-1/2 pointer-events-none rounded-full bg-[var(--color-primary)]",
     dotSizes: {
         sm: "size-2.5 mt-0.25",
         md: "size-3",
+        lg: "size-3.5",
     },
     descriptionStyle: "text-sm text-[var(--color-text-secondary)]/80 mt-0",
     sizes: {
         sm: "size-5 mt-0.5",
         md: "size-6",
+        lg: "size-7",
     },
     // Group styles
     groupStyle: "flex flex-col gap-1.5",

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

@@ -2,11 +2,11 @@ import React from 'react';
 /**
  * State variants for the radio component
  */
-export type RadioState = 'default' | 'disabled';
+export type RadioState = 'default' | 'disabled' | 'invalid';
 /**
  * Size variants for the radio component
  */
-export type RadioSize = 'sm' | 'md';
+export type RadioSize = 'sm' | 'md' | 'lg';
 /**
  * Orientation for Radio.Group layout
  */
@@ -14,11 +14,9 @@ export type RadioGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Radio component props
  */
-export interface RadioProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
     id?: string;
-    name?: string;
     value: string | number;
-    checked?: boolean;
     onChange?: (checked: boolean, value: string | number) => void;
     label?: React.ReactNode;
     description?: React.ReactNode;
@@ -39,7 +37,11 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetE
     orientation?: RadioGroupOrientation;
     label?: React.ReactNode;
     description?: React.ReactNode;
+    /**
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
+     */
     error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
     required?: boolean;
     className?: string;
 }

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

@@ -5,7 +5,12 @@ import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { RadioGroupContext } from './RadioContext.js';
 
-const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state: stateProp = "default", orientation = "vertical", label, description, error, errorMessage, required, className, children, ...props }, ref) => {
+    // Prefer errorMessage; fall back to deprecated error prop
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
+    // If error (deprecated) is provided and state not explicitly set to something else,
+    // implicitly treat the group as invalid
+    const state = resolvedError && stateProp === "default" ? "invalid" : stateProp;
     const autoId = useId();
     const groupName = name !== null && name !== void 0 ? name : `radio-group-${autoId}`;
     const labelId = `${autoId}-label`;
@@ -28,8 +33,8 @@ const RadioGroup = React__default.forwardRef(({ value: controlledValue, defaultV
         size,
         state,
     }), [groupName, currentValue, size, state]);
-    const labelState = error ? "invalid" : state === "disabled" ? "disabled" : "default";
-    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": error ? true : undefined, "aria-errormessage": error ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : label), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: error })) : error)] }) }));
+    const labelState = state === "invalid" ? "invalid" : state === "disabled" ? "disabled" : "default";
+    return (jsx(RadioGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "radiogroup", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": resolvedError ? true : undefined, "aria-errormessage": resolvedError ? errorId : undefined, className: cn("border-0 p-0 m-0", radioTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : label), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: radioTheme.groupDescriptionStyle, children: description })) : description), jsx("div", { className: cn(radioTheme.groupItemsStyle, orientation === "horizontal" && radioTheme.groupHorizontalStyle), children: children }), resolvedError && (typeof resolvedError === 'string' ? (jsx("p", { id: errorId, role: "alert", className: radioTheme.groupErrorStyle, children: resolvedError })) : resolvedError)] }) }));
 });
 RadioGroup.displayName = "Radio.Group";