@mastra/playground-ui 64.0.0-alpha.7 → 64.0.0-alpha.9

package/dist/combobox-BNlVCFgY.cjs

@@ -0,0 +1,718 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const combobox = require('@base-ui/react/combobox');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const comboboxStyles = require('./combobox-styles-BK2nGTNl.cjs');
+const Button = require('./Button-DH1aTzbs.cjs');
+const scrollArea = require('./scroll-area-CAY0DNQj.cjs');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_fluidMenu = require('./primitives/fluid-menu.cjs.js');
+const primitives_menuItem = require('./primitives/menu-item.cjs.js');
+const primitives_passwordManagerAutofill = require('./primitives/password-manager-autofill.cjs.js');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const utils_cn = require('./cn-DlOJCxrS.cjs');
+const fieldControlAria = require('./field-control-aria-WzMGs0A4.cjs');
+const fieldErrorId = require('./field-error-id-Dbe6IInA.cjs');
+const primitives_formElement = require('./primitives/form-element.cjs.js');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const FieldAnchorContext = React__namespace.createContext(void 0);
+function ComboboxRoot(props) {
+  const [field, setField] = React__namespace.useState(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(FieldAnchorContext.Provider, { value: { field: field ?? void 0, setField }, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Root, { ...props }) });
+}
+const fieldClass = (size = "md") => utils_cn.cn(
+  comboboxStyles.comboboxTriggerClass({ variant: "default", size }),
+  // The Button recipe brightens icons on hover; a field's chevron stays muted.
+  "cursor-text gap-2 focus-within:[--surface-rim:var(--field-rim-focus)] not-disabled:hover:[&_svg]:text-muted-foreground",
+  // Disabled like other form elements (muted text, not-allowed cursor). Keyed off the input because
+  // Base UI marks the input group, not the chips field, with `data-disabled`.
+  "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-field-disabled has-[input:disabled]:[&_*]:cursor-not-allowed has-[input:disabled]:[&_*]:text-muted-foreground",
+  // The input inside carries `aria-invalid`; the field shows it like other invalid fields.
+  "has-[[aria-invalid=true]]:[--field-rim-focus:var(--destructive-indicator)] has-[[aria-invalid=true]]:[--field-rim:var(--destructive-indicator)]"
+);
+const fieldPx = "0.9em";
+const fieldStyle = {
+  paddingInlineStart: fieldPx,
+  paddingInlineEnd: `calc(${fieldPx} - 6.33px)`
+};
+const chipsFieldStyle = {
+  // Longhands only: a `padding` shorthand here would also reset the chevron's end padding.
+  paddingBlock: "4px",
+  paddingInlineStart: "4px",
+  paddingInlineEnd: fieldStyle.paddingInlineEnd
+};
+const inputClass = "h-full w-0 min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground";
+function moveCaretToEnd(event) {
+  const input = event.currentTarget;
+  requestAnimationFrame(() => input.setSelectionRange(input.value.length, input.value.length));
+}
+function ComboboxValue(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxFieldTrigger() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Trigger,
+    {
+      "data-slot": "combobox-field-trigger",
+      "aria-label": "Show options",
+      className: "flex size-5.5 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground not-data-disabled:hover:bg-fill",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+    }
+  );
+}
+function ComboboxTrigger({
+  className,
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  showChevron = !(icon && Button.isIconButtonSize(size)),
+  ...props
+}) {
+  const iconOnly = Button.isIconButtonSize(size);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.Trigger,
+    {
+      "data-slot": "combobox-trigger",
+      "data-shape": iconOnly ? "icon" : void 0,
+      className: comboboxStyles.comboboxTriggerClass({ variant, size, className }),
+      ...props,
+      children: [
+        iconOnly ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children })
+        ] }),
+        showChevron ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: utils_cn.cn(comboboxStyles.comboboxStyles.chevron, iconOnly && "ml-0") }) }) : null
+      ]
+    }
+  );
+}
+function ComboboxClear({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Clear,
+    {
+      "data-slot": "combobox-clear",
+      "aria-label": "Clear",
+      className: utils_cn.cn(
+        "flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+    }
+  );
+}
+function ComboboxInput({
+  className,
+  children,
+  showTrigger = true,
+  showClear = false,
+  size,
+  start,
+  onFocus,
+  ...props
+}) {
+  const anchor = React__namespace.useContext(FieldAnchorContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.InputGroup,
+    {
+      ref: anchor?.setField,
+      "data-slot": "combobox-input",
+      className: utils_cn.cn(fieldClass(size), className),
+      style: fieldStyle,
+      children: [
+        start ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: start }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          combobox.Combobox.Input,
+          {
+            onFocus: (event) => {
+              moveCaretToEnd(event);
+              onFocus?.(event);
+            },
+            className: inputClass,
+            ...primitives_passwordManagerAutofill.passwordManagerOptOutProps,
+            ...props
+          }
+        ),
+        children ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center gap-2 text-muted-foreground", children }) : null,
+        showClear ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxClear, {}) : null,
+        showTrigger ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxFieldTrigger, {}) : null
+      ]
+    }
+  );
+}
+function ComboboxSearch({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "combobox-search", className: comboboxStyles.comboboxStyles.searchContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.comboboxStyles.searchIcon }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.Input,
+      {
+        className: utils_cn.cn(comboboxStyles.comboboxStyles.searchInput, className),
+        ...primitives_passwordManagerAutofill.passwordManagerOptOutProps,
+        ...props
+      }
+    )
+  ] });
+}
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  container,
+  ...props
+}) {
+  const field = React__namespace.useContext(FieldAnchorContext)?.field;
+  const resolvedContainer = primitives_portalContainer.usePortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      anchor: anchor ?? field,
+      positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
+      className: comboboxStyles.comboboxStyles.positioner,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        combobox.Combobox.Popup,
+        {
+          "data-slot": "combobox-content",
+          className: utils_cn.cn(
+            comboboxStyles.comboboxStyles.popup,
+            field ? "w-(--anchor-width)" : "w-[max(11rem,var(--anchor-width))]",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function ComboboxList({ className, ...props }) {
+  const menu = primitives_fluidMenu.useFluidMenu();
+  return /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { maxHeight: "var(--spacing-dropdown)", children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollAreaViewport, { className: "scroll-py-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: menu.containerClassName, ...menu.getContainerProps({}), children: /* @__PURE__ */ jsxRuntime.jsx(primitives_fluidMenu.FluidMenuItems, { menu, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { "data-slot": "combobox-list", className: utils_cn.cn(comboboxStyles.comboboxStyles.list, className), ...props }) }) }) }) });
+}
+function ComboboxItem({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.Item,
+    {
+      ref: primitives_fluidMenu.useFluidMenuItemRef(ref),
+      "data-slot": "combobox-item",
+      className: utils_cn.cn(comboboxStyles.comboboxItemClass({}), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.checkContainer, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: comboboxStyles.comboboxStyles.checkIcon }) }) })
+      ]
+    }
+  );
+}
+function ComboboxItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "combobox-item-content", className: utils_cn.cn("flex min-w-0 flex-col gap-0.5", className), ...props });
+}
+function ComboboxItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "combobox-item-title", className: utils_cn.cn("truncate", className), ...props });
+}
+function ComboboxItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "combobox-item-description",
+      className: utils_cn.cn("line-clamp-2 text-caption whitespace-normal text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxItemEnd({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "combobox-item-end",
+      className: utils_cn.cn("ml-auto shrink-0 text-caption text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxGroup(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Group, { "data-slot": "combobox-group", ...props });
+}
+function ComboboxLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.GroupLabel, { "data-slot": "combobox-label", className: utils_cn.cn(primitives_menuItem.menuLabelClass, className), ...props });
+}
+function ComboboxCollection(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { "data-slot": "combobox-empty", className: utils_cn.cn(comboboxStyles.comboboxStyles.empty, className), ...props });
+}
+function ComboboxSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Separator, { "data-slot": "combobox-separator", className: utils_cn.cn(primitives_menuItem.menuSeparatorClass, className), ...props });
+}
+function ComboboxChips({ className, children, ...props }) {
+  const anchor = React__namespace.useContext(FieldAnchorContext);
+  const field = anchor?.field;
+  const [multiline, setMultiline] = React__namespace.useState(false);
+  React__namespace.useLayoutEffect(() => {
+    if (!field || typeof ResizeObserver === "undefined") return;
+    const rowHeight = parseFloat(getComputedStyle(field).minHeight) || 0;
+    const observer = new ResizeObserver(() => setMultiline(field.offsetHeight > rowHeight + 1));
+    observer.observe(field);
+    return () => observer.disconnect();
+  }, [field]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.Chips,
+    {
+      ref: anchor?.setField,
+      "data-slot": "combobox-chips",
+      "data-multiline": multiline ? "" : void 0,
+      style: chipsFieldStyle,
+      className: utils_cn.cn(fieldClass(), "h-auto min-h-control-md items-start data-multiline:rounded-xl", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-wrap gap-[3px]", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5.5 shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxFieldTrigger, {}) })
+      ]
+    }
+  );
+}
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    combobox.Combobox.Chip,
+    {
+      "data-slot": "combobox-chip",
+      className: utils_cn.cn(
+        // 8px from the left edge to the text, 6px from the text to the ×'s ink, 8px from the ink to
+        // the right edge. Text in the controls' role (`text-label`), like the field value.
+        "flex h-5.5 items-center rounded-full bg-fill pl-2 text-label text-foreground",
+        !showRemove && "pr-2",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showRemove ? /* @__PURE__ */ jsxRuntime.jsx(
+          combobox.Combobox.ChipRemove,
+          {
+            "data-slot": "combobox-chip-remove",
+            "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove",
+            className: "flex h-full cursor-pointer items-center rounded-r-full pr-[5.5px] pl-[3.5px] text-muted-foreground not-data-disabled:hover:text-foreground",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3", style: { color: "inherit" } })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ComboboxChipsInput({ className, onFocus, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Input,
+    {
+      "data-slot": "combobox-chip-input",
+      onFocus: (event) => {
+        moveCaretToEnd(event);
+        onFocus?.(event);
+      },
+      className: utils_cn.cn(
+        inputClass,
+        // Text lines up with other fields' text when there are no chips; 4px after a chip otherwise.
+        // Not `first:`: Base UI inserts a hidden Dismiss element before the input while open.
+        "h-5.5 w-0 min-w-12 flex-1 pl-[calc(0.9em_-_4px)] [[data-slot=combobox-chip]~&]:pl-1",
+        className
+      ),
+      ...primitives_passwordManagerAutofill.passwordManagerOptOutProps,
+      ...props
+    }
+  );
+}
+
+const EMPTY_VALUES = [];
+function isMultipleCombobox(props) {
+  return props.multiple === true;
+}
+function optionText(option) {
+  return typeof option.displayLabel === "string" ? option.displayLabel : option.label;
+}
+function textPlaceholder(placeholder) {
+  return typeof placeholder === "string" ? placeholder : void 0;
+}
+function getComboboxShape({
+  inFieldContext,
+  multiple,
+  variant,
+  size,
+  iconOnlyValue,
+  showChevron,
+  placeholder
+}) {
+  if (!inFieldContext) return "trigger";
+  if (variant !== "default") return "trigger";
+  if (Button.isIconButtonSize(size)) return "trigger";
+  if (iconOnlyValue || !showChevron) return "trigger";
+  if (placeholder !== void 0 && textPlaceholder(placeholder) === void 0) return "trigger";
+  if (!multiple) return "field";
+  if (size !== "md") return "trigger";
+  return "chips";
+}
+function getCustomOption(options, inputValue) {
+  const value = inputValue.trim();
+  if (!value) return void 0;
+  if (options.some((option) => option.value === value || optionText(option) === value)) return void 0;
+  return { label: `Use “${value}”`, value };
+}
+function useOptionFilter() {
+  const { contains } = combobox.Combobox.useFilter();
+  return (option, query) => [option.label, optionText(option), ...option.keywords ?? []].some((text) => contains(text, query));
+}
+function getFallbackAriaLabel({ hasLabel, multiple }) {
+  if (hasLabel) return void 0;
+  return multiple ? "Select options" : "Select option";
+}
+function getControlProps({
+  id,
+  ariaLabel,
+  ariaDescribedBy,
+  hasLabel,
+  multiple,
+  error,
+  errorName
+}) {
+  const describedBy = [ariaDescribedBy, error ? fieldErrorId.fieldErrorId(errorName) : void 0].filter(Boolean).join(" ");
+  return {
+    id,
+    "aria-label": ariaLabel ?? getFallbackAriaLabel({ hasLabel, multiple }),
+    ...fieldControlAria.keepOwnAccessibleName({ "aria-label": ariaLabel }),
+    ...primitives_formElement.deprecatedErrorAria(Boolean(error)),
+    "aria-describedby": describedBy || void 0
+  };
+}
+function triggerClassName({ iconOnlyValue, className }) {
+  return utils_cn.cn(iconOnlyValue && "w-auto px-2.5", className);
+}
+function ComboboxOptionText({ option }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.comboboxStyles.optionText, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.optionLabel, children: option.label }),
+    option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.optionDescription, children: option.description })
+  ] });
+}
+function ComboboxClearFooter({ label, onClear }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      type: "button",
+      variant: "destructive-ghost",
+      size: "sm",
+      className: "w-full justify-start",
+      onClick: onClear,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+      children: label
+    }
+  ) });
+}
+function ComboboxOptionsContent({
+  showSearch,
+  searchPlaceholder,
+  emptyText,
+  align,
+  container,
+  footer
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ComboboxContent, { align, container, children: [
+    showSearch ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxSearch, { placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty, { children: emptyText }),
+    /* @__PURE__ */ jsxRuntime.jsx(ComboboxList, { children: (option) => /* @__PURE__ */ jsxRuntime.jsxs(ComboboxItem, { value: option, children: [
+      option.start,
+      /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option }),
+      option.end ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.optionEnd, children: option.end }) : null
+    ] }, option.value) }),
+    footer
+  ] });
+}
+function SingleComboboxControl({
+  shape,
+  controlProps,
+  placeholder,
+  selectedOption,
+  look
+}) {
+  if (shape === "field") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ComboboxInput,
+      {
+        ...controlProps,
+        size: Button.isIconButtonSize(look.size) ? void 0 : look.size,
+        placeholder: textPlaceholder(placeholder),
+        start: selectedOption?.start,
+        className: look.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComboboxTrigger,
+    {
+      ...controlProps,
+      variant: look.variant,
+      size: look.size,
+      showChevron: look.showChevron,
+      icon: Button.isIconButtonSize(look.size) ? void 0 : selectedOption?.start,
+      className: triggerClassName(look),
+      children: selectedOption?.displayLabel ?? /* @__PURE__ */ jsxRuntime.jsx(ComboboxValue, { placeholder })
+    }
+  );
+}
+function MultipleComboboxControl({
+  shape,
+  controlProps,
+  placeholder,
+  selectedCount,
+  look
+}) {
+  if (shape === "chips") {
+    return /* @__PURE__ */ jsxRuntime.jsx(ComboboxChips, { className: look.className, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxValue, { children: (items) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(ComboboxChip, { children: item.label }, item.value)),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ComboboxChipsInput,
+        {
+          ...controlProps,
+          placeholder: items.length === 0 ? textPlaceholder(placeholder) : void 0
+        }
+      )
+    ] }) }) });
+  }
+  const text = selectedCount === 0 ? placeholder : `${selectedCount} selected`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComboboxTrigger,
+    {
+      ...controlProps,
+      variant: look.variant,
+      size: look.size,
+      showChevron: look.showChevron,
+      className: triggerClassName(look),
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(selectedCount === 0 && comboboxStyles.comboboxStyles.placeholder), children: text })
+    }
+  );
+}
+function SingleCombobox({
+  shape,
+  controlProps,
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  emptyText = "No option found.",
+  className,
+  disabled = false,
+  variant = "default",
+  size = "md",
+  open,
+  onOpenChange,
+  container,
+  align = "start",
+  showChevron = true,
+  iconOnlyValue = false,
+  allowCustomValue = false,
+  onInputValueChange
+}) {
+  const [inputValue, setInputValue] = React__namespace.useState("");
+  const filter = useOptionFilter();
+  const inField = shape === "field";
+  const selectedOption = options.find((option) => option.value === value);
+  const customOption = allowCustomValue ? getCustomOption(options, inputValue) : void 0;
+  const items = customOption ? [customOption, ...options] : options;
+  function handleInputValueChange(next) {
+    setInputValue(next);
+    onInputValueChange?.(next);
+  }
+  function handleValueChange(item) {
+    if (!item) return;
+    onValueChange?.(item.value);
+    if (!inField) handleInputValueChange("");
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ComboboxRoot,
+    {
+      autoHighlight: true,
+      items,
+      filter,
+      itemToStringLabel: optionText,
+      value: selectedOption ?? null,
+      inputValue: inField ? void 0 : inputValue,
+      onInputValueChange: handleInputValueChange,
+      onValueChange: handleValueChange,
+      disabled,
+      open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SingleComboboxControl,
+          {
+            shape,
+            controlProps,
+            placeholder,
+            selectedOption,
+            look: { variant, size, showChevron, iconOnlyValue, className }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComboboxOptionsContent,
+          {
+            showSearch: !inField,
+            searchPlaceholder,
+            emptyText,
+            align,
+            container
+          }
+        )
+      ]
+    }
+  );
+}
+function MultipleCombobox({
+  shape,
+  controlProps,
+  options,
+  value = EMPTY_VALUES,
+  onValueChange,
+  clearLabel,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyText = "No option found.",
+  className,
+  disabled = false,
+  variant = "default",
+  size = "md",
+  open,
+  onOpenChange,
+  container,
+  align = "start",
+  showChevron = true,
+  iconOnlyValue = false
+}) {
+  const filter = useOptionFilter();
+  const selectedValues = new Set(value);
+  const selectedOptions = options.filter((option) => selectedValues.has(option.value));
+  const footer = clearLabel && selectedOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxClearFooter, { label: clearLabel, onClear: () => onValueChange?.([]) }) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ComboboxRoot,
+    {
+      multiple: true,
+      autoHighlight: true,
+      items: options,
+      filter,
+      value: selectedOptions,
+      onValueChange: (items) => onValueChange?.(items.map((item) => item.value)),
+      disabled,
+      open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MultipleComboboxControl,
+          {
+            shape,
+            controlProps,
+            placeholder,
+            selectedCount: selectedOptions.length,
+            look: { variant, size, showChevron, iconOnlyValue, className }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ComboboxOptionsContent,
+          {
+            showSearch: shape !== "chips",
+            searchPlaceholder,
+            emptyText,
+            align,
+            container,
+            footer
+          }
+        )
+      ]
+    }
+  );
+}
+function Combobox(props) {
+  const field = fieldControlAria.useFieldAriaIds();
+  const generatedName = React__namespace.useId();
+  const multiple = isMultipleCombobox(props);
+  const shape = getComboboxShape({
+    inFieldContext: Boolean(field),
+    multiple,
+    variant: props.variant ?? "default",
+    size: props.size ?? "md",
+    iconOnlyValue: props.iconOnlyValue ?? false,
+    showChevron: props.showChevron ?? true,
+    placeholder: props.placeholder
+  });
+  const errorName = props.name ?? generatedName;
+  const controlProps = getControlProps({
+    id: props.id,
+    ariaLabel: props["aria-label"],
+    ariaDescribedBy: props["aria-describedby"],
+    hasLabel: Boolean(props.id || field),
+    multiple,
+    error: props.error,
+    errorName
+  });
+  const root = isMultipleCombobox(props) ? /* @__PURE__ */ jsxRuntime.jsx(MultipleCombobox, { ...props, shape, controlProps }) : /* @__PURE__ */ jsxRuntime.jsx(SingleCombobox, { ...props, shape, controlProps });
+  if (!props.error) return root;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.comboboxStyles.root, children: [
+    root,
+    /* @__PURE__ */ jsxRuntime.jsx(fieldErrorId.FieldBlock.ErrorMsg, { name: errorName, children: props.error })
+  ] });
+}
+
+exports.Combobox = Combobox;
+exports.ComboboxChip = ComboboxChip;
+exports.ComboboxChips = ComboboxChips;
+exports.ComboboxChipsInput = ComboboxChipsInput;
+exports.ComboboxClear = ComboboxClear;
+exports.ComboboxCollection = ComboboxCollection;
+exports.ComboboxContent = ComboboxContent;
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxItemContent = ComboboxItemContent;
+exports.ComboboxItemDescription = ComboboxItemDescription;
+exports.ComboboxItemEnd = ComboboxItemEnd;
+exports.ComboboxItemTitle = ComboboxItemTitle;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxList = ComboboxList;
+exports.ComboboxRoot = ComboboxRoot;
+exports.ComboboxSearch = ComboboxSearch;
+exports.ComboboxSeparator = ComboboxSeparator;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxValue = ComboboxValue;
+//# sourceMappingURL=combobox-BNlVCFgY.cjs.map