@choice-ui/react 2.0.1 → 2.0.2

package/dist/components/numeric-input/dist/index.js

@@ -1,5 +1,5 @@
 import { Tooltip } from "../../tooltip/dist/index.js";
-import { forwardRef, useRef, useState, useMemo, createContext, cloneElement, memo, useEffect, useCallback, Children, isValidElement, useContext } from "react";
+import { forwardRef, useRef, useState, useMemo, createContext, cloneElement, memo, useCallback, useEffect, Children, isValidElement, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { IconButton } from "../../icon-button/dist/index.js";
@@ -774,9 +774,6 @@ function compareNumberResults(result1, result2) {
   const isSameObject = compareNumericObjects(result1.object, result2.object);
   return isSameArray || isSameObject;
 }
-function isExpressionInput(displayValue, processedValue) {
-  return displayValue !== processedValue.string;
-}
 function useInputInteractions({
   inputRef,
   displayValue,
@@ -787,6 +784,7 @@ function useInputInteractions({
   min,
   max,
   decimal,
+  defaultValue,
   disabled,
   readOnly,
   innerValue,
@@ -794,11 +792,14 @@ function useInputInteractions({
   updateValue,
   getCurrentStep,
   onChange,
+  onRawInputEditingChange,
   onEmpty,
   value
 }) {
   const initialValueRef = useRef("");
+  const outputShapeSource = value ?? defaultValue;
   const handleInputChange = useEventCallback((e) => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(true);
     setDisplayValue(e.target.value);
   });
   const handleInputFocus = useEventCallback((e) => {
@@ -807,6 +808,7 @@ function useInputInteractions({
     e.target.select();
   });
   const handleInputBlur = useEventCallback(() => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(false);
     setIsFocused(false);
     if (disabled || readOnly) return;
     try {
@@ -817,7 +819,6 @@ function useInputInteractions({
         min,
         decimal
       });
-      const isExpressionInputValue = isExpressionInput(displayValue, valuePre);
       const isSameValue = compareNumberResults(innerValue, valuePre);
       if (isSameValue) {
         setDisplayValue(valuePre.string);
@@ -826,7 +827,7 @@ function useInputInteractions({
       }
       setValue(valuePre);
       onChange == null ? void 0 : onChange(
-        typeof value === "string" ? valuePre.string : typeof value === "number" ? valuePre.array[0] : Array.isArray(value) ? valuePre.array : valuePre.object,
+        typeof outputShapeSource === "string" ? valuePre.string : typeof outputShapeSource === "number" ? valuePre.array[0] : Array.isArray(outputShapeSource) ? valuePre.array : valuePre.object,
         valuePre
       );
       setDisplayValue(valuePre.string);
@@ -919,11 +920,16 @@ function useNumericInput(props) {
     step = 1,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart
   } = props;
   const innerRef = useRef(null);
+  const dragHasChangedRef = useRef(false);
+  const dragEndValueRef = useRef(void 0);
+  const dragEndDetailRef = useRef(void 0);
+  const hasPendingRawInputRef = useRef(false);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState("");
   const { shiftPressed, metaPressed } = useModifierKeys(disabled);
@@ -941,9 +947,16 @@ function useNumericInput(props) {
     defaultValue: defaultValuePre,
     allowEmpty: true
   });
+  const outputShapeSource = value ?? defaultValue;
+  const mapResultToOutputValue = useCallback(
+    (result) => typeof outputShapeSource === "string" ? result.string : typeof outputShapeSource === "number" ? result.array[0] : Array.isArray(outputShapeSource) ? result.array : result.object,
+    [outputShapeSource]
+  );
   useEffect(() => {
     if (!innerValue) {
-      setDisplayValue("");
+      if (!hasPendingRawInputRef.current) {
+        setDisplayValue("");
+      }
       return;
     }
     const valuePre2 = dealWithNumericInputValue({
@@ -956,11 +969,14 @@ function useNumericInput(props) {
     if (JSON.stringify(valuePre2.object) !== JSON.stringify(innerValue.object)) {
       setValue(valuePre2);
     }
-    setDisplayValue(valuePre2.string);
+    if (!hasPendingRawInputRef.current) {
+      setDisplayValue(valuePre2.string);
+    }
   }, [innerValue, expression, max, min, decimal, setValue]);
   const updateValue = useCallback(
-    (updateFn) => {
+    (updateFn, options) => {
       if (disabled || readOnly) return;
+      hasPendingRawInputRef.current = false;
       setValue((prev) => {
         if (!prev) {
           const initialValue = dealWithNumericInputValue({
@@ -971,10 +987,13 @@ function useNumericInput(props) {
             min,
             decimal
           });
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? initialValue.string : typeof value === "number" ? initialValue.array[0] : Array.isArray(value) ? initialValue.array : initialValue.object,
-            initialValue
-          );
+          const nextValue = mapResultToOutputValue(initialValue);
+          onChange == null ? void 0 : onChange(nextValue, initialValue);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = initialValue;
+          }
           return initialValue;
         }
         const valuePre2 = dealWithNumericInputValue({
@@ -998,15 +1017,18 @@ function useNumericInput(props) {
           return true;
         })();
         if (hasChanged) {
-          onChange == null ? void 0 : onChange(
-            typeof value === "string" ? valuePre2.string : typeof value === "number" ? valuePre2.array[0] : Array.isArray(value) ? valuePre2.array : valuePre2.object,
-            valuePre2
-          );
+          const nextValue = mapResultToOutputValue(valuePre2);
+          onChange == null ? void 0 : onChange(nextValue, valuePre2);
+          if ((options == null ? void 0 : options.source) === "drag") {
+            dragHasChangedRef.current = true;
+            dragEndValueRef.current = nextValue;
+            dragEndDetailRef.current = valuePre2;
+          }
         }
         return valuePre2;
       });
     },
-    [disabled, readOnly, setValue, max, min, decimal, onChange, value]
+    [disabled, readOnly, setValue, max, min, decimal, onChange, expressionRef, mapResultToOutputValue]
   );
   const { inputHandlers } = useInputInteractions({
     inputRef: innerRef,
@@ -1018,6 +1040,7 @@ function useNumericInput(props) {
     min,
     max,
     decimal,
+    defaultValue,
     disabled,
     readOnly,
     innerValue,
@@ -1025,12 +1048,18 @@ function useNumericInput(props) {
     updateValue,
     getCurrentStep,
     onChange,
+    onRawInputEditingChange: (editing) => {
+      hasPendingRawInputRef.current = editing;
+    },
     onEmpty,
     value
   });
   const { isPressed: handlerPressed, pressMoveProps } = usePressMove({
     disabled,
     onPressStart: (e) => {
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
       const wasFocused = isFocused;
       if (onPressStart && "nativeEvent" in e) {
         onPressStart(e.nativeEvent);
@@ -1056,12 +1085,18 @@ function useNumericInput(props) {
         onPressEnd(e.nativeEvent);
       }
       onPressEnd == null ? void 0 : onPressEnd(e);
+      if (dragHasChangedRef.current && dragEndValueRef.current !== void 0 && dragEndDetailRef.current !== void 0) {
+        onChangeEnd == null ? void 0 : onChangeEnd(dragEndValueRef.current, dragEndDetailRef.current);
+      }
+      dragHasChangedRef.current = false;
+      dragEndValueRef.current = void 0;
+      dragEndDetailRef.current = void 0;
     },
     onPressMoveLeft: (delta) => {
-      updateValue((value2) => value2 - delta * getCurrentStep());
+      updateValue((value2) => value2 - delta * getCurrentStep(), { source: "drag" });
     },
     onPressMoveRight: (delta) => {
-      updateValue((value2) => value2 + delta * getCurrentStep());
+      updateValue((value2) => value2 + delta * getCurrentStep(), { source: "drag" });
     }
   });
   const inputProps = {
@@ -1104,6 +1139,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     selected = false,
     tooltip,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -1127,6 +1163,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     step,
     value,
     onChange,
+    onChangeEnd,
     onEmpty,
     onPressEnd,
     onPressStart,
@@ -1134,6 +1171,7 @@ var NumericInputBase = forwardRef((props, ref) => {
   });
   const { disableScrollProps } = useDisableScroll({ ref: inputRef });
   const [isFocused, setIsFocused] = useState(false);
+  const mergedFocused = focused || isFocused;
   const handleFocus = useEventCallback((e) => {
     var _a;
     onIsEditingChange == null ? void 0 : onIsEditingChange(true);
@@ -1156,7 +1194,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      focused: mergedFocused,
       handlerPressed,
       // Configuration
       min,
@@ -1167,6 +1205,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       expression,
       // Event handling methods
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,
@@ -1182,7 +1221,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      mergedFocused,
       handlerPressed,
       min,
       max,
@@ -1191,6 +1230,7 @@ var NumericInputBase = forwardRef((props, ref) => {
       decimal,
       expression,
       onChange,
+      onChangeEnd,
       onEmpty,
       onPressStart,
       onPressEnd,
@@ -1234,7 +1274,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     variant,
     size,
     selected: selected || handlerPressed,
-    focused,
+    focused: mergedFocused,
     disabled,
     prefixElement: !!prefixNode,
     suffixElement: !!suffixNode,
@@ -1277,7 +1317,7 @@ var NumericInputBase = forwardRef((props, ref) => {
         variableNode && cloneElement(variableNode, { hasPrefixElement: !!prefixNode }),
         actionPromptNode && cloneElement(actionPromptNode),
         suffixNode && cloneElement(suffixNode, { position: "suffix" }),
-        tooltip && !isFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
+        tooltip && !mergedFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
           "span",
           {
             tabIndex: -1,

package/dist/components/numeric-input/src/hooks/use-input-interactions.d.ts

@@ -2,6 +2,7 @@ import { default as React, RefObject } from 'react';
 import { NumberResult, NumericInputValue } from '../types';
 interface UseInputInteractionsProps<T extends NumericInputValue> {
     decimal?: number;
+    defaultValue?: T;
     disabled?: boolean;
     displayValue: string;
     expression: string;
@@ -12,6 +13,7 @@ interface UseInputInteractionsProps<T extends NumericInputValue> {
     max?: number;
     min?: number;
     onChange?: (value: T, detail: NumberResult) => void;
+    onRawInputEditingChange?: (editing: boolean) => void;
     onEmpty?: () => void;
     readOnly?: boolean;
     setDisplayValue: (value: string) => void;
@@ -27,7 +29,7 @@ interface UseInputInteractionsProps<T extends NumericInputValue> {
  * @param props Input interaction configuration
  * @returns Input handlers and initial value reference
  */
-export declare function useInputInteractions<T extends NumericInputValue>({ inputRef, displayValue, setDisplayValue, isFocused, setIsFocused, expression, min, max, decimal, disabled, readOnly, innerValue, setValue, updateValue, getCurrentStep, onChange, onEmpty, value, }: UseInputInteractionsProps<T>): {
+export declare function useInputInteractions<T extends NumericInputValue>({ inputRef, displayValue, setDisplayValue, isFocused, setIsFocused, expression, min, max, decimal, defaultValue, disabled, readOnly, innerValue, setValue, updateValue, getCurrentStep, onChange, onRawInputEditingChange, onEmpty, value, }: UseInputInteractionsProps<T>): {
     inputHandlers: {
         onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
         onFocus: (e: React.FocusEvent<HTMLInputElement, Element>) => void;

package/dist/components/numeric-input/src/hooks/use-input-interactions.js

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { dealWithNumericInputValue } from "../utils/numeric-value-processor.js";
-import { isExpressionInput, compareNumberResults } from "../utils/value-comparator.js";
+import { compareNumberResults } from "../utils/value-comparator.js";
 function useInputInteractions({
   inputRef,
   displayValue,
@@ -12,6 +12,7 @@ function useInputInteractions({
   min,
   max,
   decimal,
+  defaultValue,
   disabled,
   readOnly,
   innerValue,
@@ -19,11 +20,14 @@ function useInputInteractions({
   updateValue,
   getCurrentStep,
   onChange,
+  onRawInputEditingChange,
   onEmpty,
   value
 }) {
   const initialValueRef = useRef("");
+  const outputShapeSource = value ?? defaultValue;
   const handleInputChange = useEventCallback((e) => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(true);
     setDisplayValue(e.target.value);
   });
   const handleInputFocus = useEventCallback((e) => {
@@ -32,6 +36,7 @@ function useInputInteractions({
     e.target.select();
   });
   const handleInputBlur = useEventCallback(() => {
+    onRawInputEditingChange == null ? void 0 : onRawInputEditingChange(false);
     setIsFocused(false);
     if (disabled || readOnly) return;
     try {
@@ -42,7 +47,6 @@ function useInputInteractions({
         min,
         decimal
       });
-      const isExpressionInputValue = isExpressionInput(displayValue, valuePre);
       const isSameValue = compareNumberResults(innerValue, valuePre);
       if (isSameValue) {
         setDisplayValue(valuePre.string);
@@ -51,7 +55,7 @@ function useInputInteractions({
       }
       setValue(valuePre);
       onChange == null ? void 0 : onChange(
-        typeof value === "string" ? valuePre.string : typeof value === "number" ? valuePre.array[0] : Array.isArray(value) ? valuePre.array : valuePre.object,
+        typeof outputShapeSource === "string" ? valuePre.string : typeof outputShapeSource === "number" ? valuePre.array[0] : Array.isArray(outputShapeSource) ? valuePre.array : valuePre.object,
         valuePre
       );
       setDisplayValue(valuePre.string);

package/dist/components/numeric-input/src/hooks/use-numeric-input.js

@@ -30,6 +30,7 @@ function useNumericInput(props) {
   const dragHasChangedRef = useRef(false);
   const dragEndValueRef = useRef(void 0);
   const dragEndDetailRef = useRef(void 0);
+  const hasPendingRawInputRef = useRef(false);
   const [isFocused, setIsFocused] = useState(false);
   const [displayValue, setDisplayValue] = useState("");
   const { shiftPressed, metaPressed } = useModifierKeys(disabled);
@@ -47,13 +48,16 @@ function useNumericInput(props) {
     defaultValue: defaultValuePre,
     allowEmpty: true
   });
+  const outputShapeSource = value ?? defaultValue;
   const mapResultToOutputValue = useCallback(
-    (result) => typeof value === "string" ? result.string : typeof value === "number" ? result.array[0] : Array.isArray(value) ? result.array : result.object,
-    [value]
+    (result) => typeof outputShapeSource === "string" ? result.string : typeof outputShapeSource === "number" ? result.array[0] : Array.isArray(outputShapeSource) ? result.array : result.object,
+    [outputShapeSource]
   );
   useEffect(() => {
     if (!innerValue) {
-      setDisplayValue("");
+      if (!hasPendingRawInputRef.current) {
+        setDisplayValue("");
+      }
       return;
     }
     const valuePre2 = dealWithNumericInputValue({
@@ -66,11 +70,14 @@ function useNumericInput(props) {
     if (JSON.stringify(valuePre2.object) !== JSON.stringify(innerValue.object)) {
       setValue(valuePre2);
     }
-    setDisplayValue(valuePre2.string);
+    if (!hasPendingRawInputRef.current) {
+      setDisplayValue(valuePre2.string);
+    }
   }, [innerValue, expression, max, min, decimal, setValue]);
   const updateValue = useCallback(
     (updateFn, options) => {
       if (disabled || readOnly) return;
+      hasPendingRawInputRef.current = false;
       setValue((prev) => {
         if (!prev) {
           const initialValue = dealWithNumericInputValue({
@@ -134,6 +141,7 @@ function useNumericInput(props) {
     min,
     max,
     decimal,
+    defaultValue,
     disabled,
     readOnly,
     innerValue,
@@ -141,6 +149,9 @@ function useNumericInput(props) {
     updateValue,
     getCurrentStep,
     onChange,
+    onRawInputEditingChange: (editing) => {
+      hasPendingRawInputRef.current = editing;
+    },
     onEmpty,
     value
   });

package/dist/components/numeric-input/src/numeric-input.js

@@ -67,6 +67,7 @@ const NumericInputBase = forwardRef((props, ref) => {
   });
   const { disableScrollProps } = useDisableScroll({ ref: inputRef });
   const [isFocused, setIsFocused] = useState(false);
+  const mergedFocused = focused || isFocused;
   const handleFocus = useEventCallback((e) => {
     var _a;
     onIsEditingChange == null ? void 0 : onIsEditingChange(true);
@@ -89,7 +90,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      focused: mergedFocused,
       handlerPressed,
       // Configuration
       min,
@@ -116,7 +117,7 @@ const NumericInputBase = forwardRef((props, ref) => {
       disabled,
       readOnly,
       selected,
-      focused,
+      mergedFocused,
       handlerPressed,
       min,
       max,
@@ -169,7 +170,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     variant,
     size,
     selected: selected || handlerPressed,
-    focused,
+    focused: mergedFocused,
     disabled,
     prefixElement: !!prefixNode,
     suffixElement: !!suffixNode,
@@ -212,7 +213,7 @@ const NumericInputBase = forwardRef((props, ref) => {
         variableNode && cloneElement(variableNode, { hasPrefixElement: !!prefixNode }),
         actionPromptNode && cloneElement(actionPromptNode),
         suffixNode && cloneElement(suffixNode, { position: "suffix" }),
-        tooltip && !isFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
+        tooltip && !mergedFocused && /* @__PURE__ */ jsx(Tooltip, { ...tooltip, children: /* @__PURE__ */ jsx(
           "span",
           {
             tabIndex: -1,

package/dist/components/numeric-input/src/utils/value-comparator.js

@@ -21,12 +21,8 @@ function compareNumberResults(result1, result2) {
   const isSameObject = compareNumericObjects(result1.object, result2.object);
   return isSameArray || isSameObject;
 }
-function isExpressionInput(displayValue, processedValue) {
-  return displayValue !== processedValue.string;
-}
 export {
   compareNumberResults,
   compareNumericArrays,
-  compareNumericObjects,
-  isExpressionInput
+  compareNumericObjects
 };

package/dist/components/radio/dist/index.d.ts

@@ -1,6 +1,13 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface RadioIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+    }) => ReactNode);
+}
+declare const RadioIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RadioIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface RadioLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -19,6 +26,7 @@ interface RadioType {
     (props: RadioProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof RadioIcon;
     Label: typeof RadioLabel;
     displayName?: string;
 }
@@ -50,4 +58,4 @@ interface RadioGroupType {
 }
 declare const RadioGroup: RadioGroupType;
 
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };
+export { Radio, RadioGroup, type RadioGroupProps, type RadioIconProps, type RadioLabelProps, type RadioProps };

package/dist/components/radio/dist/index.js

@@ -1,5 +1,5 @@
 import { Dot } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, useMemo, createContext, useContext } from "react";
+import { memo, forwardRef, useId, useMemo, createContext, useContext, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcx, tcv } from "../../../shared/utils/tcx/tcx.js";
@@ -145,6 +145,38 @@ var radioTv = tcv({
     focused: false
   }
 });
+var RadioIcon = memo(
+  forwardRef(function RadioIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, disabled, variant } = useRadioContext();
+    const tv = radioTv({
+      type: "radio",
+      variant,
+      disabled,
+      checked: value
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return value ? /* @__PURE__ */ jsx(Dot, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+RadioIcon.displayName = "Radio.Icon";
 var RadioLabel = memo(
   forwardRef(function RadioLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -201,13 +233,24 @@ var RadioBase = forwardRef(function Radio(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === RadioIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Radio.Icon");
+  };
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(RadioLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(RadioLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
-  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) });
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled, value, variant }, children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
     /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -229,13 +272,14 @@ var RadioBase = forwardRef(function Radio(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      iconChild ?? renderDefaultIcon()
     ] }),
     renderChildren()
   ] }) });
 });
 var MemoizedRadio = memo(RadioBase);
 var Radio2 = MemoizedRadio;
+Radio2.Icon = RadioIcon;
 Radio2.Label = RadioLabel;
 Radio2.displayName = "Radio";
 var RadioGroupItem = memo(