// Copyright (c) Meta Platforms, Inc. and affiliates.

/**
 * @file RadioIndicator.tsx
 * @input Indicator state props
 * @output Exports RadioIndicator — the default radio selection visual
 * @position Decorative radio visual shared by RadioList, decorative menu
 *           markers, and any selection slot themed to use a radio
 */

import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { borderVars, colorVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
import "./indicator.markers.stylex.js";
import { indicatorScope } from "./indicator.markers.stylex.js";
import type { IndicatorProps } from "./types.js";
const styles = {
  circle: {
    kB7OPa: "x9f619",
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kmuXW: "x2lah0s",
    kMzoRj: "x1litavf",
    ksu8eU: "x1y0btm7",
    kaIpWk: "xjspbzw",
    k1ekBW: "xts7igz",
    kIyJzY: "xuedmi6 x12w9bfk",
    kAMwcw: "xlr8y92",
    $$css: true as const
  },
  unchecked: {
    kVAM5u: "xvy26l8 xilc7fp",
    kWkggS: "x10xzikg xeultfy",
    $$css: true as const
  },
  checked: {
    kVAM5u: "xad5do x1ozl1p1",
    kWkggS: "x1ewilqj x17srpfb",
    $$css: true as const
  },
  disabled: {
    kSiTet: "xbyyjgo",
    kVAM5u: "x14i3s5s x61roa7",
    $$css: true as const
  },
  disabledUnchecked: {
    kWkggS: "xwmxj5m xqxnq6d",
    $$css: true as const
  },
  dot: {
    kaIpWk: "xjspbzw",
    kWkggS: "x1azo05 xwvh9j7",
    $$css: true as const
  }
};
const circleSizeStyles = {
  sm: {
    kzqmXN: "xw4jnvo",
    kZKoxP: "x1qx5ct2",
    $$css: true as const
  },
  md: {
    kzqmXN: "xvy4d1p",
    kZKoxP: "xxk0z11",
    $$css: true as const
  }
};
const dotSizeStyles = {
  sm: {
    kzqmXN: "x1xc55vz",
    kZKoxP: "xdk7pt",
    $$css: true as const
  },
  md: {
    kzqmXN: "x1fsd2vl",
    kZKoxP: "x170jfvy",
    $$css: true as const
  }
};

/**
 * The default radio visual: a circle with a filled inner dot when selected.
 *
 * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
 * role, or focus behavior. Themes replace it wholesale through
 * `defineTheme({indicators: {radio: MyRadio}})`, or restyle it through the
 * `radio` / `radio-dot` theme targets like any other component.
 *
 * Unlike an icon, a radio draws in *both* states — an empty circle when
 * unchecked. That is what makes it usable as a selection indicator in
 * components whose default is "a checkmark when selected, nothing otherwise".
 *
 * @example
 * ```
 * <RadioIndicator state="checked" size="md" />
 * ```
 */
export function RadioIndicator({
  state,
  size = 'md',
  isDisabled = false,
  children,
  ref,
  className,
  style,
  xstyle,
  ...rest
}: IndicatorProps<'singleSelection'>) {
  // A radio has no partial state; anything other than unchecked reads as
  // selected.
  const isChecked = state !== 'unchecked';
  return <span
  // `{...rest}` first, own contract after. TypeScript cannot reject a
  // hyphenated JSX attribute (see IndicatorProps), so attribute order is
  // what actually keeps a caller from un-hiding a decorative element —
  // rubric P3, "owned aria-* set after {...rest}".
  {...rest} ref={ref} aria-hidden="true" {...mergeProps(themeProps('radio-indicator', {
    size,
    checked: isChecked ? 'checked' : null,
    disabled: isDisabled ? 'disabled' : null
  },
  // `radio` was the target before indicators existed; keep it emitted
  // so existing themes continue to work.
  {
    legacyNames: ['radio']
  }), stylex.props(styles.circle, circleSizeStyles[size], isChecked ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isChecked && styles.disabledUnchecked, xstyle), className, style)}>
      {isRenderable(children) ? children : isChecked && <span {...mergeProps(themeProps('radio-indicator-dot', {
      size
    }, {
      legacyNames: ['radio-dot']
    }), stylex.props(styles.dot, dotSizeStyles[size]))} />}
    </span>;
}
RadioIndicator.displayName = 'RadioIndicator';