@stratakit/bricks/dist/DEV/Select.js

Small, modular components for StrataKit

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Role } from "@ariakit/react/role";
import { forwardRef, isBrowser } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { CaretsUpDown } from "./~utils.icons.js";
import { useInit } from "./~utils.useInit.js";
import { useFieldControlType } from "./Field.internal.js";
const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
const HtmlSelectContext = React.createContext(() => {
});
const SelectRoot = forwardRef((props, forwardedRef) => {
  useInit();
  useFieldControlType("textlike");
  const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
  return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
    Role.div,
    {
      ...props,
      className: cx("\u{1F95D}SelectRoot", props.className),
      "data-_sk-has-select": !supportsHas && isHtmlSelect ? "true" : void 0,
      ref: forwardedRef
    }
  ) });
});
const HtmlSelect = forwardRef(
  (props, forwardedRef) => {
    const { variant = "solid", ...rest } = props;
    const setIsHtmlSelect = React.useContext(HtmlSelectContext);
    React.useEffect(
      function updateContext() {
        setIsHtmlSelect(true);
      },
      [setIsHtmlSelect]
    );
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        Role.select,
        {
          ...rest,
          className: cx("\u{1F95D}Select", props.className),
          "data-_sk-tone": "neutral",
          "data-_sk-variant": variant,
          ref: forwardedRef
        }
      ),
      /* @__PURE__ */ jsx(CaretsUpDown, { className: "\u{1F95D}SelectArrow" })
    ] });
  }
);
export {
  HtmlSelect,
  SelectRoot as Root
};