@choice-ui/react 1.3.10

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

@@ -0,0 +1,338 @@
+import { Dot } from "@choiceform/icons-react";
+import { memo, forwardRef, useId, useMemo, createContext, useContext } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tcx, tcv } from "../../../shared/utils/tcx/tcx.js";
+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 == null ? void 0 : 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/dist/esm/components/radio/src/context.js

@@ -0,0 +1,23 @@
+import { useContext, createContext } from "react";
+const 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;
+}
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+  const context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error("RadioGroupItem must be used within a RadioGroup");
+  }
+  return context;
+}
+export {
+  RadioContext,
+  RadioGroupContext,
+  useRadioContext,
+  useRadioGroupContext
+};

package/dist/esm/components/radio/src/radio-group.js

@@ -0,0 +1,100 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef, useId, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { RadioGroupContext, useRadioGroupContext } from "./context.js";
+import { Radio } from "./radio.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const 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(
+      Radio,
+      {
+        name,
+        value: isChecked,
+        disabled,
+        readOnly: contextReadonly,
+        variant,
+        onChange: handleChange,
+        className,
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsx(Radio.Label, { children })
+      }
+    );
+  })
+);
+RadioGroupItem.displayName = "RadioGroup.Item";
+const RadioGroupBase = forwardRef(function RadioGroup2(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
+    }
+  ) });
+});
+const MemoizedRadioGroup = memo(RadioGroupBase);
+const RadioGroup = MemoizedRadioGroup;
+RadioGroup.Item = RadioGroupItem;
+RadioGroup.displayName = "RadioGroup";
+export {
+  RadioGroup
+};

package/dist/esm/components/radio/src/radio-label.js

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

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

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dot } from "@choiceform/icons-react";
+import { memo, forwardRef, useId } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { RadioContext } from "./context.js";
+import { RadioLabel } from "./radio-label.js";
+import { radioTv } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const RadioBase = forwardRef(function Radio2(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 == null ? void 0 : 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()
+  ] }) });
+});
+const MemoizedRadio = memo(RadioBase);
+const Radio = MemoizedRadio;
+Radio.Label = RadioLabel;
+Radio.displayName = "Radio";
+export {
+  Radio
+};

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

@@ -0,0 +1,130 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+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
+  }
+});
+export {
+  radioTv
+};