@choice-ui/radio 0.0.4

package/dist/index.cjs

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

@@ -0,0 +1,69 @@
+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/dist/index.d.ts

@@ -0,0 +1,69 @@
+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 };