@choice-ui/react 1.8.8 → 1.8.9

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

@@ -1,6 +1,14 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -20,9 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };

package/dist/components/checkbox/dist/index.js

@@ -1,5 +1,5 @@
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, createContext, useContext } from "react";
+import { memo, forwardRef, useId, Children, isValidElement, createContext, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -137,6 +137,38 @@ var checkboxTv = tcv({
     focused: false
   }
 });
+var CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
 var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -195,12 +227,23 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.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(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -234,7 +277,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -243,6 +286,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 export {

package/dist/components/checkbox/src/checkbox-icon.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+export declare const CheckboxIcon: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/checkbox/src/checkbox-icon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Indeterminate, Check } from "@choiceform/icons-react";
+import { memo, forwardRef } from "react";
+import { useCheckboxContext } from "./context.js";
+import { checkboxTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
+export {
+  CheckboxIcon
+};

package/dist/components/checkbox/src/checkbox.d.ts

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { CheckboxIcon } from './checkbox-icon';
 import { CheckboxLabel } from './checkbox-label';
 export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
     children?: ReactNode;
@@ -14,6 +15,7 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }

package/dist/components/checkbox/src/checkbox.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId } from "react";
+import { memo, forwardRef, useId, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
+import { CheckboxIcon } from "./checkbox-icon.js";
 import { CheckboxLabel } from "./checkbox-label.js";
 import { CheckboxContext } from "./context.js";
 import { checkboxTv } from "./tv.js";
@@ -45,12 +46,23 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.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(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -84,7 +96,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -93,6 +105,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
 });
 const MemoizedCheckbox = memo(CheckboxBase);
 const Checkbox = MemoizedCheckbox;
+Checkbox.Icon = CheckboxIcon;
 Checkbox.Label = CheckboxLabel;
 Checkbox.displayName = "Checkbox";
 export {

package/dist/components/checkbox/src/index.d.ts

@@ -1,2 +1,4 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export type { CheckboxIconProps } from './checkbox-icon';
+export type { CheckboxLabelProps } from './checkbox-label';

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(

package/dist/components/radio/src/context.d.ts

@@ -2,6 +2,8 @@ export interface RadioContextType {
     descriptionId: string;
     disabled?: boolean;
     id: string;
+    value?: boolean;
+    variant?: "default" | "accent" | "outline";
 }
 export declare const RadioContext: import('react').Context<RadioContextType | null>;
 export declare function useRadioContext(): RadioContextType;

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

@@ -2,3 +2,5 @@ export { Radio } from './radio';
 export { RadioGroup } from './radio-group';
 export type { RadioProps } from './radio';
 export type { RadioGroupProps } from './radio-group';
+export type { RadioIconProps } from './radio-icon';
+export type { RadioLabelProps } from './radio-label';

package/dist/components/radio/src/radio-icon.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, ReactNode } from 'react';
+export interface RadioIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+    }) => ReactNode);
+}
+export declare const RadioIcon: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<RadioIconProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/radio/src/radio-icon.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { Dot } from "@choiceform/icons-react";
+import { memo, forwardRef } from "react";
+import { useRadioContext } from "./context.js";
+import { radioTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const 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";
+export {
+  RadioIcon
+};

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

@@ -1,4 +1,5 @@
 import { HTMLProps, ReactNode } from 'react';
+import { RadioIcon } from './radio-icon';
 import { RadioLabel } from './radio-label';
 export interface RadioProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
     children?: ReactNode;
@@ -13,6 +14,7 @@ interface RadioType {
     (props: RadioProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof RadioIcon;
     Label: typeof RadioLabel;
     displayName?: string;
 }

package/dist/components/radio/src/radio.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dot } from "@choiceform/icons-react";
-import { memo, forwardRef, useId } from "react";
+import { memo, forwardRef, useId, Children, isValidElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { RadioContext } from "./context.js";
+import { RadioIcon } from "./radio-icon.js";
 import { RadioLabel } from "./radio-label.js";
 import { radioTv } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -43,13 +44,24 @@ const RadioBase = forwardRef(function Radio2(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",
@@ -71,13 +83,14 @@ const RadioBase = forwardRef(function Radio2(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: tv.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+      iconChild ?? renderDefaultIcon()
     ] }),
     renderChildren()
   ] }) });
 });
 const MemoizedRadio = memo(RadioBase);
 const Radio = MemoizedRadio;
+Radio.Icon = RadioIcon;
 Radio.Label = RadioLabel;
 Radio.displayName = "Radio";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",