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

The Cerberus Design React component library.

'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const jsx = require('styled-system/jsx');
const cerberus = require('../../context/cerberus.cjs');
const portal = require('../portal/portal.cjs');
const show = require('../show/show.cjs');
const parts = require('./parts.cjs');

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

exports.Select = Select;