import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { createContext, memo, use } from "react";
import { controlColor } from "./theme.stylex";
import { color, fontSize, size, transition } from "./tokens.stylex";
import { a11y, interaction } from "./mixins";
import useRippleEffect from "./useRippleEffect";
const styles = stylex.create({
  fieldset: {
    display: "flex",
    gap: size.px0_5,
    borderStyle: "none",
    margin: 0,
    padding: 0
  },
  legend: {
    fontSize: fontSize.body,
    marginBottom: size.px0_5
  },
  option: {
    flex: "1",
    userSelect: "none",
    cursor: "pointer",
    padding: `${size.px2} ${size.px3}`,
    transition: `${transition.a11yOutline}, ${transition.themeBackground}, ${transition.themeColor}`,
    backgroundColor: {
      default: color.gray500,
      ":has(input:checked)": controlColor.checkboxCheckedBackground
    },
    fontSize: fontSize.sub,
    textAlign: "center",
    textTransform: "lowercase"
  }
});
const InlineRadioButtonGroupContext = createContext(
// biome-ignore lint/style/noNonNullAssertion: Context always set in group component
undefined);
InlineRadioButtonGroupContext.displayName = "InlineRadioButtonGroupContext";
export const InlineRadioButtonGroup = memo(function InlineRadioButtonGroup(props) {
  const $ = _c(15);
  const t0 = !!props.required;
  const t1 = !!props.disabled;
  let t2;
  if ($[0] !== props.name || $[1] !== props.onChange || $[2] !== props.value || $[3] !== t0 || $[4] !== t1) {
    t2 = {
      value: props.value,
      onChange: props.onChange,
      name: props.name,
      required: t0,
      disabled: t1
    };
    $[0] = props.name;
    $[1] = props.onChange;
    $[2] = props.value;
    $[3] = t0;
    $[4] = t1;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  const ctx = t2;
  let t3;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = stylex.props(styles.fieldset);
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  let t4;
  if ($[7] !== props.label) {
    t4 = props.label && <legend {...stylex.props(styles.legend)}>{props.label}</legend>;
    $[7] = props.label;
    $[8] = t4;
  } else {
    t4 = $[8];
  }
  let t5;
  if ($[9] !== ctx || $[10] !== props.children) {
    t5 = <InlineRadioButtonGroupContext.Provider value={ctx}>{props.children}</InlineRadioButtonGroupContext.Provider>;
    $[9] = ctx;
    $[10] = props.children;
    $[11] = t5;
  } else {
    t5 = $[11];
  }
  let t6;
  if ($[12] !== t4 || $[13] !== t5) {
    t6 = <fieldset {...t3}>{t4}{t5}</fieldset>;
    $[12] = t4;
    $[13] = t5;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  return t6;
});
export const InlineRadioButton = memo(function InlineRadioButton(props) {
  const $ = _c(19);
  const ctx = use(InlineRadioButtonGroupContext);
  const disabled = props.disabled || ctx.disabled;
  const ref = useRippleEffect(disabled);
  const checked = ctx.value !== undefined ? ctx.value === props.value : undefined;
  let t0;
  if ($[0] !== ctx) {
    t0 = ctx.onChange ? e => ctx.onChange?.(e.currentTarget.value) : undefined;
    $[0] = ctx;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const onChange = t0;
  let t1;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(interaction.disableTapHighlight, a11y.defaultOutline, styles.option);
    $[2] = t1;
  } else {
    t1 = $[2];
  }
  let t2;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = stylex.props(interaction.hideInput);
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  let t3;
  if ($[4] !== checked || $[5] !== ctx.name || $[6] !== ctx.required || $[7] !== disabled || $[8] !== onChange || $[9] !== props.defaultChecked || $[10] !== props.label || $[11] !== props.value) {
    t3 = <input type="radio" {...t2} disabled={disabled} required={ctx.required} title={props.label} name={ctx.name} value={props.value} onChange={onChange} checked={checked} defaultChecked={props.defaultChecked} />;
    $[4] = checked;
    $[5] = ctx.name;
    $[6] = ctx.required;
    $[7] = disabled;
    $[8] = onChange;
    $[9] = props.defaultChecked;
    $[10] = props.label;
    $[11] = props.value;
    $[12] = t3;
  } else {
    t3 = $[12];
  }
  let t4;
  if ($[13] !== props.label) {
    t4 = <span>{props.label}</span>;
    $[13] = props.label;
    $[14] = t4;
  } else {
    t4 = $[14];
  }
  let t5;
  if ($[15] !== ref || $[16] !== t3 || $[17] !== t4) {
    t5 = <label {...t1} ref={ref}>{t3}{t4}</label>;
    $[15] = ref;
    $[16] = t3;
    $[17] = t4;
    $[18] = t5;
  } else {
    t5 = $[18];
  }
  return t5;
});
//# sourceMappingURL=InlineRadioButton.jsx.map