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

/**
 * @file CheckboxIndicator.tsx
 * @input Indicator state props
 * @output Exports CheckboxIndicator — the default checkbox selection visual
 * @position Decorative checkbox visual shared by CheckboxInput, CheckboxList,
 *           and decorative menu markers
 */

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 = {
  box: {
    kB7OPa: "x9f619",
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kjj79g: "xl56j7k",
    kmuXW: "x2lah0s",
    kMzoRj: "x1litavf",
    ksu8eU: "x1y0btm7",
    kaIpWk: "xx3sua9",
    k1ekBW: "xts7igz",
    kIyJzY: "xuedmi6 x12w9bfk",
    kAMwcw: "xlr8y92",
    $$css: true as const
  },
  unchecked: {
    kMwMTN: "xqwr325",
    kVAM5u: "xvy26l8 xilc7fp",
    kWkggS: "x10xzikg xeultfy",
    $$css: true as const
  },
  checked: {
    kMwMTN: "x17wrial",
    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
  },
  checkmark: {
    k1xSpc: "x1s85apg",
    kMwMTN: "x17wrial xs5hli",
    $$css: true as const
  },
  checkmarkVisible: {
    k1xSpc: "x1lliihq",
    $$css: true as const
  },
  indeterminateMark: {
    k1xSpc: "x1s85apg",
    kWkggS: "x1azo05 xwvh9j7",
    kaIpWk: "xjspbzw",
    $$css: true as const
  },
  indeterminateMarkVisible: {
    k1xSpc: "x1lliihq",
    $$css: true as const
  }
};
const boxSizeStyles = {
  sm: {
    kzqmXN: "xw4jnvo",
    kZKoxP: "x1qx5ct2",
    $$css: true as const
  },
  md: {
    kzqmXN: "xvy4d1p",
    kZKoxP: "xxk0z11",
    $$css: true as const
  }
};
const checkmarkSizeStyles = {
  sm: {
    kzqmXN: "xsmyaan",
    kZKoxP: "x1kpxq89",
    $$css: true as const
  },
  md: {
    kzqmXN: "x6jxa94",
    kZKoxP: "x1v9usgg",
    $$css: true as const
  }
};
const indeterminateSizeStyles = {
  sm: {
    kzqmXN: "x1fsd2vl",
    kZKoxP: "x36qwtl",
    $$css: true as const
  },
  md: {
    kzqmXN: "xsmyaan",
    kZKoxP: "x36qwtl",
    $$css: true as const
  }
};

/**
 * The default checkbox visual: a square box with a checkmark or an
 * indeterminate bar.
 *
 * Decorative and non-interactive — it renders `aria-hidden` and owns no input,
 * role, or focus behavior. The focus ring lives on the owner's control wrapper
 * (see CheckboxInput), so a theme that replaces this component keeps a visible
 * focus indicator for free. Themes replace it wholesale through
 * `defineTheme({indicators: {checkbox: MyCheckbox}})`, or restyle it through
 * the `checkbox` theme target like any other component.
 *
 * @example
 * ```
 * <CheckboxIndicator state="indeterminate" size="sm" />
 * ```
 */
export function CheckboxIndicator({
  state,
  size = 'md',
  isDisabled = false,
  children,
  ref,
  className,
  style,
  xstyle,
  ...rest
}: IndicatorProps<'multiSelection'>) {
  const isChecked = state === 'checked';
  const isIndeterminate = state === 'indeterminate';
  const isCheckedOrIndeterminate = isChecked || isIndeterminate;
  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('checkbox-indicator', {
    size,
    checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
    disabled: isDisabled ? 'disabled' : null
  },
  // `checkbox` was the target before indicators existed; keep it
  // emitted so existing themes continue to work.
  {
    legacyNames: ['checkbox']
  }), stylex.props(styles.box, boxSizeStyles[size], isCheckedOrIndeterminate ? styles.checked : styles.unchecked, isDisabled && styles.disabled, isDisabled && !isCheckedOrIndeterminate && styles.disabledUnchecked, xstyle), className, style)}>
      {isRenderable(children) ? children : <>
          <svg viewBox="0 0 10 10" {...mergeProps(themeProps('checkbox-indicator-check', {
        size
      }), stylex.props(styles.checkmark, checkmarkSizeStyles[size], isChecked && styles.checkmarkVisible))}>
            <path d="M8.5 2.5L4 7.5L1.5 5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span {...mergeProps(themeProps('checkbox-indicator-dash', {
        size
      }), stylex.props(styles.indeterminateMark, indeterminateSizeStyles[size], isIndeterminate && styles.indeterminateMarkVisible))} />
        </>}
    </span>;
}
CheckboxIndicator.displayName = 'CheckboxIndicator';