import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { createContext, useContext, forwardRef, useState, useId, useMemo } from 'react';
import { c as cx } from './index-SvGbrGuT.js';
import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
import { F as FieldLabel } from './FieldLabel-DL0D6fvc.js';
import { F as FieldMessage } from './FieldMessage-OeP_xSUE.js';
import { w as warnDeprecatedErrorUsage } from './utils-pudAMGnO.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
import { I as Icon } from './Icon-Bcil6aBo.js';
import { H as Helper } from './Helper-B2UrgJvr.js';

import './Radio.css';const radio = "_radio_1r8vp_2";
const wrapper = "_wrapper_1r8vp_30";
const legend = "_legend_1r8vp_86";
const children = "_children_1r8vp_98";
const error = "_error_1r8vp_109";
const styles = {
	radio: radio,
	"radio-group": "_radio-group_1r8vp_15",
	wrapper: wrapper,
	"focus-label": "_focus-label_1r8vp_44",
	"icon-wrapper": "_icon-wrapper_1r8vp_50",
	legend: legend,
	children: children,
	"helper-wrapper": "_helper-wrapper_1r8vp_104",
	error: error,
	"icon-unchecked": "_icon-unchecked_1r8vp_152",
	"icon-checked": "_icon-checked_1r8vp_153",
	"sr-only": "_sr-only_1r8vp_200"
};

const RadioGroupContext = createContext(void 0);
const useRadioGroupContext = () => {
  return useContext(RadioGroupContext);
};

const RadioGroup = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const {
      className,
      children,
      description,
      error,
      errorAriaLive: _errorAriaLive,
      hint,
      warning,
      legend,
      moreInfo,
      onBlur,
      onFocus,
      required,
      style,
      ...rest
    } = componentProps;
    const RadioGroupClassNames = cx(styles["radio-group"], className);
    const [openInfo, setOpenInfo] = useState(false);
    const helperUid = useId();
    const styleCombined = {
      ...style,
      ...layoutStyles,
      alignItems: layoutStyles?.alignItems ?? (layoutStyles?.flexDirection === "row" ? "center" : void 0)
    };
    const focusHandler = (e) => {
      onFocus?.(e);
      setOpenInfo(true);
    };
    const blurHandler = (e) => {
      onBlur?.(e);
      setOpenInfo(false);
    };
    warnDeprecatedErrorUsage("RadioGroup", error);
    const errorMessages = typeof error === "boolean" || error === void 0 ? void 0 : error;
    const hasHelperText = hint || errorMessages || warning || description;
    const contextValue = useMemo(
      () => ({
        hasError: !!error
      }),
      [error]
    );
    return /* @__PURE__ */ jsxs(
      "fieldset",
      {
        role: "radiogroup",
        "data-anv": "radio-group",
        className: RadioGroupClassNames,
        "aria-required": required,
        style: styleCombined,
        ref,
        onFocus: focusHandler,
        onBlur: blurHandler,
        ...rest,
        "aria-describedby": hasHelperText ? helperUid : void 0,
        children: [
          /* @__PURE__ */ jsxs("legend", { className: styles["legend"], children: [
            legend,
            required && ", required",
            moreInfo && /* @__PURE__ */ jsx(SrOnly, { children: moreInfo })
          ] }),
          /* @__PURE__ */ jsx(
            FieldLabel,
            {
              "aria-hidden": true,
              moreInfo,
              required,
              moreInfoOpen: openInfo,
              children: legend
            }
          ),
          /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
            "div",
            {
              className: styles["children"],
              style: {
                flexDirection: layoutStyles?.flexDirection,
                gap: layoutStyles?.gap
              },
              children
            }
          ) }),
          hasHelperText ? /* @__PURE__ */ jsx(
            FieldMessage,
            {
              id: helperUid,
              hint,
              error: errorMessages,
              warning,
              description
            }
          ) : null
        ]
      }
    );
  }
);
RadioGroup.displayName = "RadioGroup";

const SvgRadioButtonUnchecked = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }));

const SvgRadioButtonChecked = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 5 }));

const RadioElement = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const {
    className,
    checked,
    defaultChecked,
    value,
    icons,
    error,
    label,
    onChange,
    style,
    description,
    hideRadio = false,
    ...rest
  } = componentProps;
  const groupContext = useRadioGroupContext();
  const {
    checked: checkedIcon = SvgRadioButtonChecked,
    unchecked: uncheckedIcon = SvgRadioButtonUnchecked
  } = { ...icons };
  const onChangeHandler = (e) => {
    onChange?.(e, { value, checked: e.target.checked });
  };
  const helperUid = useId();
  const hasError = error || groupContext?.hasError;
  const wrapperClassNames = cx(
    styles["wrapper"],
    { [styles["focus"]]: hideRadio },
    className
  );
  const radioClassNames = cx(styles["radio"], {
    [styles["error"]]: hasError
  });
  const styleCombined = {
    ...style,
    ...layoutStyles
  };
  return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, style: styleCombined, "data-anv": "radio", children: [
    /* @__PURE__ */ jsxs("label", { className: radioClassNames, children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "radio",
          "aria-checked": checked ?? defaultChecked,
          checked,
          defaultChecked,
          value,
          onChange: onChangeHandler,
          "aria-describedby": description ? helperUid : void 0,
          ref,
          ...rest
        }
      ),
      /* @__PURE__ */ jsxs(
        "span",
        {
          className: cx(styles["icon-wrapper"], {
            [styles["sr-only"]]: hideRadio
          }),
          children: [
            /* @__PURE__ */ jsx(
              Icon,
              {
                size: "large",
                svg: uncheckedIcon,
                className: cx([styles["icon-unchecked"]])
              }
            ),
            /* @__PURE__ */ jsx(
              Icon,
              {
                size: "large",
                svg: checkedIcon,
                className: cx([styles["icon-checked"]])
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ jsx("span", { className: cx({ [styles["focus-label"]]: hideRadio }), children: label })
    ] }),
    description ? /* @__PURE__ */ jsx("div", { className: styles["helper-wrapper"], children: /* @__PURE__ */ jsx(Helper, { id: helperUid, description }) }) : null
  ] });
});
RadioElement.displayName = "RadioElement";
const Radio = RadioElement;

export { RadioGroup as R, SvgRadioButtonUnchecked as S, Radio as a, SvgRadioButtonChecked as b };
//# sourceMappingURL=Radio-DtYoRq3m.js.map
