@choice-ui/radio 0.0.4 → 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,20 +58,4 @@ interface RadioGroupType {
 }
 declare const RadioGroup: RadioGroupType;
 
-interface RadioContextType {
-    descriptionId: string;
-    disabled?: boolean;
-    id: string;
-}
-declare function useRadioContext(): RadioContextType;
-interface RadioGroupContextType {
-    disabled?: boolean;
-    name: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    value: string;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useRadioGroupContext(): RadioGroupContextType;
-
-export { Radio, type RadioContextType, RadioGroup, type RadioGroupContextType, type RadioGroupProps, RadioLabel, type RadioLabelProps, type RadioProps, useRadioContext, useRadioGroupContext };
+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,18 +147,50 @@ 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;
     const { id, descriptionId, disabled } = useRadioContext();
-    const styles = radioTv({ disabled });
+    const tv = radioTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }
@@ -184,7 +216,7 @@ var RadioBase = forwardRef(function Radio(props, ref) {
   } = props;
   const id = useId();
   const descriptionId = useId();
-  const styles = radioTv({
+  const tv = radioTv({
     type: "radio",
     variant,
     disabled,
@@ -203,19 +235,27 @@ 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(styles.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",
         {
           ref,
-          className: styles.input(),
+          className: tv.input(),
           type: "radio",
           id,
           name,
@@ -231,13 +271,14 @@ var RadioBase = forwardRef(function Radio(props, ref) {
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: styles.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(
@@ -332,4 +373,4 @@ var RadioGroup2 = MemoizedRadioGroup;
 RadioGroup2.Item = RadioGroupItem;
 RadioGroup2.displayName = "RadioGroup";
 
-export { Radio2 as Radio, RadioGroup2 as RadioGroup, RadioLabel, useRadioContext, useRadioGroupContext };
+export { Radio2 as Radio, RadioGroup2 as RadioGroup };

package/package.json

@@ -1,21 +1,18 @@
 {
   "name": "@choice-ui/radio",
-  "version": "0.0.4",
-  "description": "Radio component for Choiceform Design System",
+  "version": "0.0.6",
+  "description": "A radio button component for single selection from a group of mutually exclusive options",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "publishConfig": {
@@ -23,8 +20,8 @@
   },
   "dependencies": {
     "usehooks-ts": "^3.1.0",
-    "@choiceform/icons-react": "^1.3.8",
-    "@choice-ui/shared": "0.0.1"
+    "@choice-ui/shared": "^0.0.1",
+    "@choiceform/icons-react": "^1.3.8"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",
@@ -39,6 +36,7 @@
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
+  "source": "./src/index.ts",
   "scripts": {
     "build": "tsup",
     "build:watch": "tsup --watch",

package/dist/index.cjs

@@ -1,341 +0,0 @@
-'use strict';
-
-var shared = require('@choice-ui/shared');
-var iconsReact = require('@choiceform/icons-react');
-var react = require('react');
-var usehooksTs = require('usehooks-ts');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/radio.tsx
-var RadioContext = react.createContext(null);
-function useRadioContext() {
-  const context = react.useContext(RadioContext);
-  if (!context) {
-    throw new Error("Radio.Label must be used within a Radio component");
-  }
-  return context;
-}
-var RadioGroupContext = react.createContext(null);
-function useRadioGroupContext() {
-  const context = react.useContext(RadioGroupContext);
-  if (!context) {
-    throw new Error("RadioGroupItem must be used within a RadioGroup");
-  }
-  return context;
-}
-var radioTv = shared.tcv({
-  slots: {
-    root: "flex items-center select-none",
-    box: ["relative flex size-4 items-center justify-center", "border border-solid"],
-    input: "peer pointer-events-auto absolute inset-0 appearance-none opacity-0",
-    label: "pl-2"
-  },
-  variants: {
-    type: {
-      checkbox: {
-        box: "rounded-md"
-      },
-      radio: {
-        box: "rounded-full"
-      }
-    },
-    variant: {
-      default: {},
-      accent: {},
-      outline: {}
-    },
-    checked: {
-      true: {},
-      false: {}
-    },
-    disabled: {
-      true: {},
-      false: {}
-    },
-    focused: {
-      true: {},
-      false: {}
-    }
-  },
-  compoundVariants: [
-    // 未选中状态
-    {
-      variant: ["default", "accent"],
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: "bg-secondary-background border-default-boundary"
-      }
-    },
-    {
-      variant: "outline",
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: ["border-default-foreground", "peer-focus-visible:border-selected-boundary"]
-      }
-    },
-    // 选中状态 - default
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-secondary-background border-default-boundary",
-          "peer-focus-visible:border-selected-strong-boundary"
-        ]
-      }
-    },
-    // 选中状态 - accent & outline
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-accent-background border-selected-strong-boundary text-on-accent-foreground",
-          "peer-focus-visible:border-selected-strong-boundary",
-          "peer-focus-visible:text-on-accent-foreground",
-          "peer-focus-visible:shadow-checked-focused"
-        ]
-      }
-    },
-    {
-      variant: ["default", "accent", "outline"],
-      checked: false,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-boundary"
-      }
-    },
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-strong-boundary"
-      }
-    },
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused"
-      }
-    },
-    {
-      variant: ["accent", "outline", "default"],
-      disabled: true,
-      class: {
-        root: "text-default-background",
-        box: "border-disabled-background bg-disabled-background",
-        label: "text-disabled-foreground"
-      }
-    }
-  ],
-  defaultVariants: {
-    variant: "default",
-    checked: false,
-    disabled: false,
-    focused: false
-  }
-});
-var RadioLabel = react.memo(
-  react.forwardRef(function RadioLabel2(props, ref) {
-    const { children, className, ...rest } = props;
-    const { id, descriptionId, disabled } = useRadioContext();
-    const styles = radioTv({ disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        ref,
-        id: descriptionId,
-        htmlFor: id,
-        className: shared.tcx(styles.label(), className),
-        ...rest,
-        children
-      }
-    );
-  })
-);
-RadioLabel.displayName = "Radio.Label";
-var RadioBase = react.forwardRef(function Radio(props, ref) {
-  const {
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    name,
-    variant = "default",
-    className,
-    focused,
-    children,
-    "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedby,
-    onKeyDown,
-    ...rest
-  } = props;
-  const id = react.useId();
-  const descriptionId = react.useId();
-  const styles = radioTv({
-    type: "radio",
-    variant,
-    disabled,
-    checked: value,
-    focused
-  });
-  const handleChange = usehooksTs.useEventCallback((e) => {
-    if (readOnly) return;
-    onChange(e.target.checked);
-  });
-  const handleKeyDown = usehooksTs.useEventCallback((e) => {
-    if (readOnly) return;
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      onChange(!value);
-    }
-    onKeyDown?.(e);
-  });
-  const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsxRuntime.jsx(RadioLabel, { children });
-    }
-    return children;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shared.tcx(styles.root(), className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref,
-          className: styles.input(),
-          type: "radio",
-          id,
-          name,
-          checked: value,
-          disabled: disabled || readOnly,
-          onChange: handleChange,
-          "aria-label": ariaLabel,
-          "aria-describedby": ariaDescribedby || descriptionId,
-          "aria-checked": value,
-          "aria-disabled": disabled || readOnly,
-          role: "radio",
-          onKeyDown: handleKeyDown,
-          ...rest
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.box(), children: value && /* @__PURE__ */ jsxRuntime.jsx(iconsReact.Dot, {}) })
-    ] }),
-    renderChildren()
-  ] }) });
-});
-var MemoizedRadio = react.memo(RadioBase);
-var Radio2 = MemoizedRadio;
-Radio2.Label = RadioLabel;
-Radio2.displayName = "Radio";
-var RadioGroupItem = react.memo(
-  react.forwardRef(function RadioGroupItem2(props, ref) {
-    const { value, children, className, disabled, ...rest } = props;
-    const {
-      name,
-      value: selectedValue,
-      onChange,
-      variant,
-      readOnly: contextReadonly
-    } = useRadioGroupContext();
-    const isChecked = selectedValue === value;
-    const handleChange = usehooksTs.useEventCallback(() => {
-      if (contextReadonly) return;
-      onChange(value);
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Radio2,
-      {
-        name,
-        value: isChecked,
-        disabled,
-        readOnly: contextReadonly,
-        variant,
-        onChange: handleChange,
-        className,
-        ...rest,
-        ref,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Radio2.Label, { children })
-      }
-    );
-  })
-);
-RadioGroupItem.displayName = "RadioGroup.Item";
-var RadioGroupBase = react.forwardRef(function RadioGroup(props, ref) {
-  const {
-    className,
-    options,
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    variant = "default",
-    children,
-    ...rest
-  } = props;
-  const id = react.useId();
-  const handleChange = usehooksTs.useEventCallback((newValue) => {
-    if (readOnly) return;
-    onChange(newValue);
-  });
-  const contextValue = react.useMemo(
-    () => ({
-      name: id,
-      value,
-      onChange: handleChange,
-      disabled,
-      readOnly,
-      variant
-    }),
-    [id, value, handleChange, disabled, readOnly, variant]
-  );
-  const renderOptionsRadios = react.useMemo(() => {
-    if (!options) return null;
-    return options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroupItem,
-      {
-        value: option.value,
-        disabled: option.disabled || disabled,
-        variant,
-        children: option.label
-      },
-      option.value
-    ));
-  }, [disabled, options, variant]);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: shared.tcx("flex flex-col gap-2", className),
-      ref,
-      role: "radiogroup",
-      "aria-labelledby": props["aria-labelledby"],
-      "aria-label": props["aria-label"],
-      ...rest,
-      children: options ? renderOptionsRadios : children
-    }
-  ) });
-});
-var MemoizedRadioGroup = react.memo(RadioGroupBase);
-var RadioGroup2 = MemoizedRadioGroup;
-RadioGroup2.Item = RadioGroupItem;
-RadioGroup2.displayName = "RadioGroup";
-
-exports.Radio = Radio2;
-exports.RadioGroup = RadioGroup2;
-exports.RadioLabel = RadioLabel;
-exports.useRadioContext = useRadioContext;
-exports.useRadioGroupContext = useRadioGroupContext;

package/dist/index.d.cts

@@ -1,69 +0,0 @@
-import * as react from 'react';
-import { HTMLProps, ReactNode } from 'react';
-
-interface RadioLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
-    children: ReactNode;
-}
-declare const RadioLabel: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RadioLabelProps, "ref"> & react.RefAttributes<HTMLLabelElement>>>;
-
-interface RadioProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
-    children?: ReactNode;
-    className?: string;
-    focused?: boolean;
-    onChange: (value: boolean) => void;
-    readOnly?: boolean;
-    value: boolean;
-    variant?: "default" | "accent" | "outline";
-}
-interface RadioType {
-    (props: RadioProps & {
-        ref?: React.Ref<HTMLInputElement>;
-    }): JSX.Element;
-    Label: typeof RadioLabel;
-    displayName?: string;
-}
-declare const Radio: RadioType;
-
-interface RadioGroupProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "onChange"> {
-    children?: ReactNode;
-    onChange: (value: string) => void;
-    options?: {
-        disabled?: boolean;
-        label: string;
-        value: string;
-    }[];
-    readOnly?: boolean;
-    value: string;
-    variant?: "default" | "accent" | "outline";
-}
-type RadioGroupItemProps = Omit<RadioProps, "value" | "onChange"> & {
-    children: ReactNode;
-    value: string;
-};
-declare const RadioGroupItem: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & react.RefAttributes<HTMLInputElement>>>;
-interface RadioGroupType {
-    (props: RadioGroupProps & {
-        ref?: React.Ref<HTMLDivElement>;
-    }): JSX.Element;
-    Item: typeof RadioGroupItem;
-    displayName?: string;
-}
-declare const RadioGroup: RadioGroupType;
-
-interface RadioContextType {
-    descriptionId: string;
-    disabled?: boolean;
-    id: string;
-}
-declare function useRadioContext(): RadioContextType;
-interface RadioGroupContextType {
-    disabled?: boolean;
-    name: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    value: string;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useRadioGroupContext(): RadioGroupContextType;
-
-export { Radio, type RadioContextType, RadioGroup, type RadioGroupContextType, type RadioGroupProps, RadioLabel, type RadioLabelProps, type RadioProps, useRadioContext, useRadioGroupContext };

package/src/context.ts

@@ -1,38 +0,0 @@
-import { createContext, useContext } from "react"
-
-// Radio 组件的 Context
-export interface RadioContextType {
-  descriptionId: string
-  disabled?: boolean
-  id: string
-}
-
-export const RadioContext = createContext<RadioContextType | null>(null)
-
-export function useRadioContext() {
-  const context = useContext(RadioContext)
-  if (!context) {
-    throw new Error("Radio.Label must be used within a Radio component")
-  }
-  return context
-}
-
-// RadioGroup 组件的 Context
-export interface RadioGroupContextType {
-  disabled?: boolean
-  name: string
-  onChange: (value: string) => void
-  readOnly?: boolean
-  value: string
-  variant?: "default" | "accent" | "outline"
-}
-
-export const RadioGroupContext = createContext<RadioGroupContextType | null>(null)
-
-export function useRadioGroupContext() {
-  const context = useContext(RadioGroupContext)
-  if (!context) {
-    throw new Error("RadioGroupItem must be used within a RadioGroup")
-  }
-  return context
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export { Radio } from "./radio"
-export { RadioGroup } from "./radio-group"
-export { RadioLabel } from "./radio-label"
-export { useRadioContext, useRadioGroupContext } from "./context"
-export type { RadioProps } from "./radio"
-export type { RadioGroupProps } from "./radio-group"
-export type { RadioLabelProps } from "./radio-label"
-export type { RadioContextType, RadioGroupContextType } from "./context"

package/src/radio-group.tsx

@@ -1,137 +0,0 @@
-import { tcx } from "@choice-ui/shared"
-import { forwardRef, HTMLProps, memo, ReactNode, useId, useMemo } from "react"
-import { useEventCallback } from "usehooks-ts"
-import { RadioGroupContext, useRadioGroupContext } from "./context"
-import { Radio, RadioProps } from "./radio"
-
-export interface RadioGroupProps extends Omit<HTMLProps<HTMLDivElement>, "value" | "onChange"> {
-  children?: ReactNode
-  onChange: (value: string) => void
-  options?: {
-    disabled?: boolean
-    label: string
-    value: string
-  }[]
-  readOnly?: boolean
-  value: string
-  variant?: "default" | "accent" | "outline"
-}
-
-type RadioGroupItemProps = Omit<RadioProps, "value" | "onChange"> & {
-  children: ReactNode
-  value: string
-}
-
-const RadioGroupItem = memo(
-  forwardRef<HTMLInputElement, RadioGroupItemProps>(function RadioGroupItem(props, ref) {
-    const { value, children, className, disabled, ...rest } = props
-    const {
-      name,
-      value: selectedValue,
-      onChange,
-      variant,
-      readOnly: contextReadonly,
-    } = useRadioGroupContext()
-    const isChecked = selectedValue === value
-
-    const handleChange = useEventCallback(() => {
-      if (contextReadonly) return
-      onChange(value)
-    })
-
-    return (
-      <Radio
-        name={name}
-        value={isChecked}
-        disabled={disabled}
-        readOnly={contextReadonly}
-        variant={variant}
-        onChange={handleChange}
-        className={className}
-        {...rest}
-        ref={ref}
-      >
-        <Radio.Label>{children}</Radio.Label>
-      </Radio>
-    )
-  }),
-)
-
-RadioGroupItem.displayName = "RadioGroup.Item"
-
-const RadioGroupBase = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(props, ref) {
-  const {
-    className,
-    options,
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    variant = "default",
-    children,
-    ...rest
-  } = props
-  const id = useId()
-
-  const handleChange = useEventCallback((newValue: string) => {
-    if (readOnly) return
-    onChange(newValue)
-  })
-
-  const contextValue = useMemo(
-    () => ({
-      name: id,
-      value,
-      onChange: handleChange,
-      disabled,
-      readOnly,
-      variant,
-    }),
-    [id, value, handleChange, disabled, readOnly, variant],
-  )
-
-  // 渲染基于选项的单选按钮
-  const renderOptionsRadios = useMemo(() => {
-    if (!options) return null
-
-    return options.map((option) => (
-      <RadioGroupItem
-        key={option.value}
-        value={option.value}
-        disabled={option.disabled || disabled}
-        variant={variant}
-      >
-        {option.label}
-      </RadioGroupItem>
-    ))
-  }, [disabled, options, variant])
-
-  return (
-    <RadioGroupContext.Provider value={contextValue}>
-      <div
-        className={tcx("flex flex-col gap-2", className)}
-        ref={ref}
-        role="radiogroup"
-        aria-labelledby={props["aria-labelledby"]}
-        aria-label={props["aria-label"]}
-        {...rest}
-      >
-        {options ? renderOptionsRadios : children}
-      </div>
-    </RadioGroupContext.Provider>
-  )
-})
-
-// 使用 memo 包装组件以避免不必要的重渲染
-const MemoizedRadioGroup = memo(RadioGroupBase) as unknown as RadioGroupType
-
-interface RadioGroupType {
-  (props: RadioGroupProps & { ref?: React.Ref<HTMLDivElement> }): JSX.Element
-  Item: typeof RadioGroupItem
-  displayName?: string
-}
-
-export const RadioGroup = MemoizedRadioGroup
-
-RadioGroup.Item = RadioGroupItem
-RadioGroup.displayName = "RadioGroup"

package/src/radio-label.tsx

@@ -1,33 +0,0 @@
-import { tcx } from "@choice-ui/shared"
-import { forwardRef, HTMLProps, memo, ReactNode } from "react"
-import { useRadioContext } from "./context"
-import { radioTv } from "./tv"
-
-export interface RadioLabelProps extends Omit<
-  HTMLProps<HTMLLabelElement>,
-  "htmlFor" | "id" | "disabled"
-> {
-  children: ReactNode
-}
-
-export const RadioLabel = memo(
-  forwardRef<HTMLLabelElement, RadioLabelProps>(function RadioLabel(props, ref) {
-    const { children, className, ...rest } = props
-    const { id, descriptionId, disabled } = useRadioContext()
-    const styles = radioTv({ disabled })
-
-    return (
-      <label
-        ref={ref}
-        id={descriptionId}
-        htmlFor={id}
-        className={tcx(styles.label(), className)}
-        {...rest}
-      >
-        {children}
-      </label>
-    )
-  }),
-)
-
-RadioLabel.displayName = "Radio.Label"

package/src/radio.tsx

@@ -1,109 +0,0 @@
-import { tcx } from "@choice-ui/shared"
-import { Dot } from "@choiceform/icons-react"
-import { forwardRef, HTMLProps, memo, ReactNode, useId } from "react"
-import { useEventCallback } from "usehooks-ts"
-import { RadioContext } from "./context"
-import { RadioLabel } from "./radio-label"
-import { radioTv } from "./tv"
-
-export interface RadioProps extends Omit<HTMLProps<HTMLInputElement>, "value" | "onChange"> {
-  children?: ReactNode
-  className?: string
-  focused?: boolean
-  onChange: (value: boolean) => void
-  readOnly?: boolean
-  value: boolean
-  variant?: "default" | "accent" | "outline"
-}
-
-const RadioBase = forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {
-  const {
-    value,
-    onChange,
-    disabled,
-    readOnly = false,
-    name,
-    variant = "default",
-    className,
-    focused,
-    children,
-    "aria-label": ariaLabel,
-    "aria-describedby": ariaDescribedby,
-    onKeyDown,
-    ...rest
-  } = props
-  const id = useId()
-  const descriptionId = useId()
-
-  const styles = radioTv({
-    type: "radio",
-    variant,
-    disabled,
-    checked: value,
-    focused,
-  })
-
-  const handleChange = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (readOnly) return
-    onChange(e.target.checked)
-  })
-
-  const handleKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (readOnly) return
-    if (e.key === " " || e.key === "Enter") {
-      e.preventDefault()
-      onChange(!value)
-    }
-    onKeyDown?.(e)
-  })
-
-  // 自动将字符串类型的 children 包装成 RadioLabel
-  const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return <RadioLabel>{children}</RadioLabel>
-    }
-    return children
-  }
-
-  return (
-    <RadioContext.Provider value={{ id, descriptionId, disabled }}>
-      <div className={tcx(styles.root(), className)}>
-        <div className="pointer-events-none relative">
-          <input
-            ref={ref}
-            className={styles.input()}
-            type="radio"
-            id={id}
-            name={name}
-            checked={value}
-            disabled={disabled || readOnly}
-            onChange={handleChange}
-            aria-label={ariaLabel}
-            aria-describedby={ariaDescribedby || descriptionId}
-            aria-checked={value}
-            aria-disabled={disabled || readOnly}
-            role="radio"
-            onKeyDown={handleKeyDown}
-            {...rest}
-          />
-          <div className={styles.box()}>{value && <Dot />}</div>
-        </div>
-
-        {renderChildren()}
-      </div>
-    </RadioContext.Provider>
-  )
-})
-
-const MemoizedRadio = memo(RadioBase) as unknown as RadioType
-
-interface RadioType {
-  (props: RadioProps & { ref?: React.Ref<HTMLInputElement> }): JSX.Element
-  Label: typeof RadioLabel
-  displayName?: string
-}
-
-export const Radio = MemoizedRadio as RadioType
-
-Radio.Label = RadioLabel
-Radio.displayName = "Radio"

package/src/tv.ts

@@ -1,128 +0,0 @@
-import { tcv } from "@choice-ui/shared"
-
-export const radioTv = tcv({
-  slots: {
-    root: "flex items-center select-none",
-    box: ["relative flex size-4 items-center justify-center", "border border-solid"],
-    input: "peer pointer-events-auto absolute inset-0 appearance-none opacity-0",
-    label: "pl-2",
-  },
-  variants: {
-    type: {
-      checkbox: {
-        box: "rounded-md",
-      },
-      radio: {
-        box: "rounded-full",
-      },
-    },
-    variant: {
-      default: {},
-      accent: {},
-      outline: {},
-    },
-    checked: {
-      true: {},
-      false: {},
-    },
-    disabled: {
-      true: {},
-      false: {},
-    },
-    focused: {
-      true: {},
-      false: {},
-    },
-  },
-  compoundVariants: [
-    // 未选中状态
-    {
-      variant: ["default", "accent"],
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: "bg-secondary-background border-default-boundary",
-      },
-    },
-    {
-      variant: "outline",
-      checked: false,
-      disabled: false,
-      focused: false,
-      class: {
-        box: ["border-default-foreground", "peer-focus-visible:border-selected-boundary"],
-      },
-    },
-    // 选中状态 - default
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-secondary-background border-default-boundary",
-          "peer-focus-visible:border-selected-strong-boundary",
-        ],
-      },
-    },
-    // 选中状态 - accent & outline
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: false,
-      class: {
-        box: [
-          "bg-accent-background border-selected-strong-boundary text-on-accent-foreground",
-          "peer-focus-visible:border-selected-strong-boundary",
-          "peer-focus-visible:text-on-accent-foreground",
-          "peer-focus-visible:shadow-checked-focused",
-        ],
-      },
-    },
-    {
-      variant: ["default", "accent", "outline"],
-      checked: false,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-boundary",
-      },
-    },
-    {
-      variant: "default",
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "border-selected-strong-boundary",
-      },
-    },
-    {
-      variant: ["accent", "outline"],
-      checked: true,
-      disabled: false,
-      focused: true,
-      class: {
-        box: "text-on-accent-foreground border-selected-strong-boundary shadow-checked-focused",
-      },
-    },
-    {
-      variant: ["accent", "outline", "default"],
-      disabled: true,
-      class: {
-        root: "text-default-background",
-        box: "border-disabled-background bg-disabled-background",
-        label: "text-disabled-foreground",
-      },
-    },
-  ],
-  defaultVariants: {
-    variant: "default",
-    checked: false,
-    disabled: false,
-    focused: false,
-  },
-})