import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { a11y, interaction, reset } from "./mixins";
import { controlColor } from "./theme.stylex";
import { font, fontSize, size } from "./tokens.stylex";

/**
 * @remarks Intentionally uses a native <select> element with options/optgroups under the hood.
 *          On mobile devices, it offers a better native select experience. And it's hard to get this right with a custom select component. We just style the top <select>.
 */

const styles = stylex.create({
  select: {
    // ask the browser to render it in its native dark mode. We hope that this sets the dropdown style to dark mode.
    colorScheme: "dark",
    background: {
      default: controlColor.inputBackground,
      ":focus": controlColor.inputActiveBackground,
      ":disabled": controlColor.inputDisabledBackground
    },
    borderWidth: "1px",
    borderStyle: "solid",
    borderColor: {
      default: controlColor.inputBorder,
      ":focus": controlColor.inputActiveBorder,
      // https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
      ":user-invalid": controlColor.inputInvalidBorder,
      ":disabled": controlColor.inputDisabledBorder
    },
    borderRadius: 0,
    color: {
      default: controlColor.inputColor,
      ":focus": controlColor.inputActiveColor,
      ":disabled": controlColor.inputDisabledColor
    },
    width: "100%",
    fontFamily: font.main,
    "::placeholder": {
      color: controlColor.inputPlaceholderColor
    },
    outline: {
      ":focus": "none"
    },
    cursor: {
      ":disabled": "not-allowed"
    }
  }
});
const sizeVariants = stylex.create({
  small: {
    padding: `${size.rem1} ${size.rem2}`,
    fontSize: fontSize.body
  },
  medium: {
    padding: `${size.px2} ${size.px3}`,
    fontSize: size.rem4,
    fontWeight: 400
  },
  large: {
    padding: `${size.rem1} ${size.rem2}`,
    fontSize: size.rem6 // TODO: ASK-UX:So we have small/large text fields?
  }
});
export const Select = memo(function Select(props) {
  const $ = _c(16);
  let t0;
  if ($[0] !== props.size) {
    t0 = stylex.props(reset.buttonStyle, interaction.disableTapHighlight, a11y.defaultOutline, styles.select, sizeVariants[props.size ?? "small"]);
    $[0] = props.size;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const t1 = "multiple" in props && props.multiple;
  const t2 = "value" in props ? props.value : undefined;
  let t3;
  if ($[2] !== props) {
    t3 = "onChange" in props ? e => props.onChange(e.currentTarget.value) : undefined;
    $[2] = props;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] !== props.autoComplete || $[5] !== props.autoFocus || $[6] !== props.children || $[7] !== props.defaultValue || $[8] !== props.disabled || $[9] !== props.name || $[10] !== props.required || $[11] !== t0 || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
    t4 = <select {...t0} name={props.name} defaultValue={props.defaultValue} required={props.required} disabled={props.disabled} autoComplete={props.autoComplete} autoFocus={props.autoFocus} multiple={t1} value={t2} onChange={t3}>{props.children}</select>;
    $[4] = props.autoComplete;
    $[5] = props.autoFocus;
    $[6] = props.children;
    $[7] = props.defaultValue;
    $[8] = props.disabled;
    $[9] = props.name;
    $[10] = props.required;
    $[11] = t0;
    $[12] = t1;
    $[13] = t2;
    $[14] = t3;
    $[15] = t4;
  } else {
    t4 = $[15];
  }
  return t4;
});
export const SelectOptionGroup = memo(function SelectOptionGroup(props) {
  const $ = _c(2);
  let t0;
  if ($[0] !== props) {
    t0 = <optgroup {...props} />;
    $[0] = props;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
});
export const SelectOption = memo(function SelectOption(props) {
  const $ = _c(2);
  let t0;
  if ($[0] !== props) {
    t0 = <option {...props} />;
    $[0] = props;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
});
//# sourceMappingURL=Select.jsx.map