@choice-ui/radio 0.0.5 → 0.0.6

package/dist/index.d.ts

@@ -1,6 +1,13 @@
 import * as react from 'react';
 import { HTMLProps, ReactNode } 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/index.js

@@ -1,6 +1,6 @@
 import { tcv, tcx } from '@choice-ui/shared';
 import { Dot } from '@choiceform/icons-react';
-import { createContext, memo, forwardRef, useId, useMemo, useContext } from 'react';
+import { createContext, memo, forwardRef, useId, Children, isValidElement, useMemo, useContext } from 'react';
 import { useEventCallback } from 'usehooks-ts';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -147,6 +147,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;
@@ -203,13 +235,21 @@ var RadioBase = forwardRef(function Radio(props, ref) {
     }
     onKeyDown?.(e);
   });
+  const isIconElement = (child) => isValidElement(child) && (child.type === RadioIcon || child.type?.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",
@@ -231,13 +271,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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/radio",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A radio button component for single selection from a group of mutually exclusive options",
   "sideEffects": false,
   "type": "module",