@choice-ui/radio 0.0.4

package/dist/index.js

@@ -0,0 +1,335 @@
+import { tcv, tcx } from '@choice-ui/shared';
+import { Dot } from '@choiceform/icons-react';
+import { createContext, memo, forwardRef, useId, useMemo, useContext } from 'react';
+import { useEventCallback } from 'usehooks-ts';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/radio.tsx
+var RadioContext = createContext(null);
+function useRadioContext() {
+  const context = useContext(RadioContext);
+  if (!context) {
+    throw new Error("Radio.Label must be used within a Radio component");
+  }
+  return context;
+}
+var RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroupItem must be used within a RadioGroup");
+  }
+  return context;
+}
+var 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
+  }
+});
+var RadioLabel = memo(
+  forwardRef(function RadioLabel2(props, ref) {
+    const { children, className, ...rest } = props;
+    const { id, descriptionId, disabled } = useRadioContext();
+    const styles = radioTv({ disabled });
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        id: descriptionId,
+        htmlFor: id,
+        className: tcx(styles.label(), className),
+        ...rest,
+        children
+      }
+    );
+  })
+);
+RadioLabel.displayName = "Radio.Label";
+var RadioBase = 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 = useId();
+  const descriptionId = useId();
+  const styles = radioTv({
+    type: "radio",
+    variant,
+    disabled,
+    checked: value,
+    focused
+  });
+  const handleChange = useEventCallback((e) => {
+    if (readOnly) return;
+    onChange(e.target.checked);
+  });
+  const handleKeyDown = 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__ */ jsx(RadioLabel, { children });
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: { id, descriptionId, disabled }, children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
+      /* @__PURE__ */ 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__ */ jsx("div", { className: styles.box(), children: value && /* @__PURE__ */ jsx(Dot, {}) })
+    ] }),
+    renderChildren()
+  ] }) });
+});
+var MemoizedRadio = memo(RadioBase);
+var Radio2 = MemoizedRadio;
+Radio2.Label = RadioLabel;
+Radio2.displayName = "Radio";
+var RadioGroupItem = memo(
+  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 = useEventCallback(() => {
+      if (contextReadonly) return;
+      onChange(value);
+    });
+    return /* @__PURE__ */ jsx(
+      Radio2,
+      {
+        name,
+        value: isChecked,
+        disabled,
+        readOnly: contextReadonly,
+        variant,
+        onChange: handleChange,
+        className,
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsx(Radio2.Label, { children })
+      }
+    );
+  })
+);
+RadioGroupItem.displayName = "RadioGroup.Item";
+var RadioGroupBase = forwardRef(function RadioGroup(props, ref) {
+  const {
+    className,
+    options,
+    value,
+    onChange,
+    disabled,
+    readOnly = false,
+    variant = "default",
+    children,
+    ...rest
+  } = props;
+  const id = useId();
+  const handleChange = useEventCallback((newValue) => {
+    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) => /* @__PURE__ */ jsx(
+      RadioGroupItem,
+      {
+        value: option.value,
+        disabled: option.disabled || disabled,
+        variant,
+        children: option.label
+      },
+      option.value
+    ));
+  }, [disabled, options, variant]);
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: 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 = memo(RadioGroupBase);
+var RadioGroup2 = MemoizedRadioGroup;
+RadioGroup2.Item = RadioGroupItem;
+RadioGroup2.displayName = "RadioGroup";
+
+export { Radio2 as Radio, RadioGroup2 as RadioGroup, RadioLabel, useRadioContext, useRadioGroupContext };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@choice-ui/radio",
+  "version": "0.0.4",
+  "description": "Radio component for Choiceform Design System",
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "usehooks-ts": "^3.1.0",
+    "@choiceform/icons-react": "^1.3.8",
+    "@choice-ui/shared": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rimraf dist"
+  }
+}

package/src/context.ts

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,137 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,109 @@
+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"