@cerberus-design/react/dist/components/select/select.js

The Cerberus Design React component library.

import { jsxs, jsx } from 'react/jsx-runtime';
import { HStack } from 'styled-system/jsx';
import { useCerberusContext } from '../../context/cerberus.js';
import { Portal } from '../portal/portal.js';
import { Show } from '../show/show.js';
import { SelectParts } from './parts.js';

function Select(props) {
  const { collection, container, placeholder, ...rootProps } = props;
  const { icons } = useCerberusContext();
  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons;
  return /* @__PURE__ */ jsxs(SelectParts.Root, { collection, ...rootProps, children: [
    /* @__PURE__ */ jsx(SelectParts.Control, { children: /* @__PURE__ */ jsxs(SelectParts.Trigger, { children: [
      /* @__PURE__ */ jsx(SelectParts.ValueText, { placeholder }),
      /* @__PURE__ */ jsxs(HStack, { children: [
        /* @__PURE__ */ jsx(Show, { when: props.invalid, children: /* @__PURE__ */ jsx(InvalidIcon, { "data-part": "invalid-icon" }) }),
        /* @__PURE__ */ jsx(SelectParts.Indicator, { children: /* @__PURE__ */ jsx(SelectArrow, {}) })
      ] })
    ] }) }),
    /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(SelectParts.Positioner, { children: /* @__PURE__ */ jsx(SelectParts.Content, { size: rootProps.size, children: props.children }) }) }),
    /* @__PURE__ */ jsx(SelectParts.HiddenSelect, {})
  ] });
}

export { Select };