@yamada-ui/radio/dist/chunk-RA4K44ZS.mjs

Yamada UI radio component

"use client"
import {
  useRadio
} from "./chunk-QJKELJFS.mjs";
import {
  useRadioGroupContext
} from "./chunk-ZLJHOIFP.mjs";

// src/radio.tsx
import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
import { useFormControl } from "@yamada-ui/form-control";
import { cx, funcAll } from "@yamada-ui/utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Radio = forwardRef(
  (props, ref) => {
    var _a, _b, _c, _d, _e;
    const group = useRadioGroupContext();
    const { value: groupValue, ...groupProps } = { ...group };
    const control = useFormControl(props);
    const [styles, mergedProps] = useComponentMultiStyle("Radio", {
      ...groupProps,
      ...props
    });
    const {
      className,
      children,
      disabled = (_a = groupProps.disabled) != null ? _a : control.disabled,
      gap = "0.5rem",
      invalid = (_b = groupProps.invalid) != null ? _b : control.invalid,
      label,
      readOnly = (_c = groupProps.readOnly) != null ? _c : control.readOnly,
      required = (_d = groupProps.required) != null ? _d : control.required,
      iconProps,
      inputProps,
      labelProps,
      ...computedProps
    } = omitThemeProps(mergedProps);
    (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
    const checkedProp = groupValue && computedProps.value ? groupValue === computedProps.value : computedProps.checked;
    const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
    const {
      checked,
      props: rest,
      getContainerProps,
      getIconProps,
      getInputProps,
      getLabelProps
    } = useRadio({
      ...computedProps,
      checked: checkedProp,
      disabled,
      invalid,
      readOnly,
      required,
      onChange
    });
    const tabIndex = !groupValue ? 0 : checked ? 0 : -1;
    return /* @__PURE__ */ jsxs(
      ui.label,
      {
        className: cx("ui-radio", className),
        ...getContainerProps(rest),
        __css: {
          alignItems: "center",
          cursor: "pointer",
          display: "inline-flex",
          gap,
          position: "relative",
          verticalAlign: "top",
          ...styles.container
        },
        children: [
          /* @__PURE__ */ jsx(
            ui.input,
            {
              className: "ui-radio__input",
              ...getInputProps(
                {
                  ...inputProps,
                  tabIndex
                },
                ref
              )
            }
          ),
          /* @__PURE__ */ jsx(
            ui.div,
            {
              className: "ui-radio__icon",
              ...getIconProps(iconProps),
              __css: {
                display: "inline-block",
                position: "relative",
                userSelect: "none",
                ...styles.icon
              }
            }
          ),
          /* @__PURE__ */ jsx(
            ui.span,
            {
              className: "ui-radio__label",
              ...getLabelProps(labelProps),
              __css: { ...styles.label },
              children: children != null ? children : label
            }
          )
        ]
      }
    );
  }
);
Radio.displayName = "Radio";
Radio.__ui__ = "Radio";

export {
  Radio
};
//# sourceMappingURL=chunk-RA4K44ZS.mjs.map