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

The Cerberus Design React component library.

import { jsxs, jsx } from 'react/jsx-runtime';
import { useCerberusContext } from '../../context/cerberus.js';
import { splitProps } from '../../utils/index.js';
import { Portal } from '../portal/portal.js';
import { Show } from '../show/show.js';
import { ComboboxParts } from './parts.js';
import { ComboboxStartIcon } from './primitives.js';

function Combobox(props) {
  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [
    "label",
    "children",
    "startIcon",
    "container"
  ]);
  const { icons } = useCerberusContext();
  const { selectArrow: SelectArrow, close: CloseIcon } = icons;
  const hasStartIcon = Boolean(startIcon);
  return /* @__PURE__ */ jsxs(ComboboxParts.Root, { ...rootProps, children: [
    /* @__PURE__ */ jsx(Show, { when: label, children: /* @__PURE__ */ jsx(ComboboxParts.Label, { children: label }) }),
    /* @__PURE__ */ jsxs(ComboboxParts.Control, { children: [
      /* @__PURE__ */ jsx(Show, { when: hasStartIcon, children: /* @__PURE__ */ jsx(ComboboxStartIcon, { children: startIcon }) }),
      /* @__PURE__ */ jsx(
        ComboboxParts.Input,
        {
          ...hasStartIcon && { "data-has": "start-indicator" }
        }
      ),
      /* @__PURE__ */ jsx(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
      /* @__PURE__ */ jsx(ComboboxParts.Trigger, { children: /* @__PURE__ */ jsx(SelectArrow, {}) })
    ] }),
    /* @__PURE__ */ jsx(Portal, { container: elProps.container, children: /* @__PURE__ */ jsx(ComboboxParts.Positioner, { children: /* @__PURE__ */ jsx(ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) }) })
  ] });
}

export { Combobox };