@mastra/playground-ui 64.0.0-alpha.8 → 64.0.0

package/dist/combobox-Bw13EcK0.js

@@ -0,0 +1,676 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { X, ChevronsUpDown, Search, Check, ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { c as comboboxStyles, a as comboboxTriggerClass, b as comboboxItemClass } from './combobox-styles-Dr66ofEp.js';
+import { i as isIconButtonSize, B as Button } from './Button-EGoajBQY.js';
+import { S as ScrollArea, a as ScrollAreaViewport } from './scroll-area-MaMqo4l8.js';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { useFluidMenu, FluidMenuItems, useFluidMenuItemRef } from './primitives/fluid-menu.es.js';
+import { menuLabelClass, menuSeparatorClass } from './primitives/menu-item.es.js';
+import { passwordManagerOptOutProps } from './primitives/password-manager-autofill.es.js';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { c as cn } from './cn-CQUhN5Jx.js';
+import { a as useFieldAriaIds, k as keepOwnAccessibleName } from './field-control-aria-DB6y41tQ.js';
+import { F as FieldBlock, f as fieldErrorId } from './field-error-id-Sqhk00e4.js';
+import { deprecatedErrorAria } from './primitives/form-element.es.js';
+
+const FieldAnchorContext = React.createContext(void 0);
+function ComboboxRoot(props) {
+  const [field, setField] = React.useState(null);
+  return /* @__PURE__ */ jsx(FieldAnchorContext.Provider, { value: { field: field ?? void 0, setField }, children: /* @__PURE__ */ jsx(Combobox$1.Root, { ...props }) });
+}
+const fieldClass = (size = "md") => cn(
+  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__ */ jsx(Combobox$1.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxFieldTrigger() {
+  return /* @__PURE__ */ jsx(
+    Combobox$1.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__ */ jsx(ChevronDown, { className: "size-4" })
+    }
+  );
+}
+function ComboboxTrigger({
+  className,
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  showChevron = !(icon && isIconButtonSize(size)),
+  ...props
+}) {
+  const iconOnly = isIconButtonSize(size);
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Trigger,
+    {
+      "data-slot": "combobox-trigger",
+      "data-shape": iconOnly ? "icon" : void 0,
+      className: comboboxTriggerClass({ variant, size, className }),
+      ...props,
+      children: [
+        iconOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+        ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+          icon,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children })
+        ] }),
+        showChevron ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn(comboboxStyles.chevron, iconOnly && "ml-0") }) }) : null
+      ]
+    }
+  );
+}
+function ComboboxClear({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Combobox$1.Clear,
+    {
+      "data-slot": "combobox-clear",
+      "aria-label": "Clear",
+      className: cn(
+        "flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+    }
+  );
+}
+function ComboboxInput({
+  className,
+  children,
+  showTrigger = true,
+  showClear = false,
+  size,
+  start,
+  onFocus,
+  ...props
+}) {
+  const anchor = React.useContext(FieldAnchorContext);
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.InputGroup,
+    {
+      ref: anchor?.setField,
+      "data-slot": "combobox-input",
+      className: cn(fieldClass(size), className),
+      style: fieldStyle,
+      children: [
+        start ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: start }) : null,
+        /* @__PURE__ */ jsx(
+          Combobox$1.Input,
+          {
+            onFocus: (event) => {
+              moveCaretToEnd(event);
+              onFocus?.(event);
+            },
+            className: inputClass,
+            ...passwordManagerOptOutProps,
+            ...props
+          }
+        ),
+        children ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center gap-2 text-muted-foreground", children }) : null,
+        showClear ? /* @__PURE__ */ jsx(ComboboxClear, {}) : null,
+        showTrigger ? /* @__PURE__ */ jsx(ComboboxFieldTrigger, {}) : null
+      ]
+    }
+  );
+}
+function ComboboxSearch({ className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "combobox-search", className: comboboxStyles.searchContainer, children: [
+    /* @__PURE__ */ jsx(Search, { className: comboboxStyles.searchIcon }),
+    /* @__PURE__ */ jsx(
+      Combobox$1.Input,
+      {
+        className: cn(comboboxStyles.searchInput, className),
+        ...passwordManagerOptOutProps,
+        ...props
+      }
+    )
+  ] });
+}
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  container,
+  ...props
+}) {
+  const field = React.useContext(FieldAnchorContext)?.field;
+  const resolvedContainer = usePortalContainer(container);
+  return /* @__PURE__ */ jsx(Combobox$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(
+    Combobox$1.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      anchor: anchor ?? field,
+      positionMethod: FLOATING_POSITION_METHOD,
+      className: comboboxStyles.positioner,
+      children: /* @__PURE__ */ jsx(
+        Combobox$1.Popup,
+        {
+          "data-slot": "combobox-content",
+          className: cn(
+            comboboxStyles.popup,
+            field ? "w-(--anchor-width)" : "w-[max(11rem,var(--anchor-width))]",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function ComboboxList({ className, ...props }) {
+  const menu = useFluidMenu();
+  return /* @__PURE__ */ jsx(ScrollArea, { maxHeight: "var(--spacing-dropdown)", children: /* @__PURE__ */ jsx(ScrollAreaViewport, { className: "scroll-py-8", children: /* @__PURE__ */ jsx("div", { className: menu.containerClassName, ...menu.getContainerProps({}), children: /* @__PURE__ */ jsx(FluidMenuItems, { menu, children: /* @__PURE__ */ jsx(Combobox$1.List, { "data-slot": "combobox-list", className: cn(comboboxStyles.list, className), ...props }) }) }) }) });
+}
+function ComboboxItem({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Item,
+    {
+      ref: useFluidMenuItemRef(ref),
+      "data-slot": "combobox-item",
+      className: cn(comboboxItemClass({}), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2", children }),
+        /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) }) })
+      ]
+    }
+  );
+}
+function ComboboxItemContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "combobox-item-content", className: cn("flex min-w-0 flex-col gap-0.5", className), ...props });
+}
+function ComboboxItemTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "combobox-item-title", className: cn("truncate", className), ...props });
+}
+function ComboboxItemDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "combobox-item-description",
+      className: cn("line-clamp-2 text-caption whitespace-normal text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxItemEnd({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "combobox-item-end",
+      className: cn("ml-auto shrink-0 text-caption text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ComboboxGroup(props) {
+  return /* @__PURE__ */ jsx(Combobox$1.Group, { "data-slot": "combobox-group", ...props });
+}
+function ComboboxLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, { "data-slot": "combobox-label", className: cn(menuLabelClass, className), ...props });
+}
+function ComboboxCollection(props) {
+  return /* @__PURE__ */ jsx(Combobox$1.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Combobox$1.Empty, { "data-slot": "combobox-empty", className: cn(comboboxStyles.empty, className), ...props });
+}
+function ComboboxSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Combobox$1.Separator, { "data-slot": "combobox-separator", className: cn(menuSeparatorClass, className), ...props });
+}
+function ComboboxChips({ className, children, ...props }) {
+  const anchor = React.useContext(FieldAnchorContext);
+  const field = anchor?.field;
+  const [multiline, setMultiline] = React.useState(false);
+  React.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__ */ jsxs(
+    Combobox$1.Chips,
+    {
+      ref: anchor?.setField,
+      "data-slot": "combobox-chips",
+      "data-multiline": multiline ? "" : void 0,
+      style: chipsFieldStyle,
+      className: cn(fieldClass(), "h-auto min-h-control-md items-start data-multiline:rounded-xl", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap gap-[3px]", children }),
+        /* @__PURE__ */ jsx("span", { className: "flex h-5.5 shrink-0 items-center", children: /* @__PURE__ */ jsx(ComboboxFieldTrigger, {}) })
+      ]
+    }
+  );
+}
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Chip,
+    {
+      "data-slot": "combobox-chip",
+      className: 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__ */ jsx(
+          Combobox$1.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__ */ jsx(X, { className: "size-3", style: { color: "inherit" } })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ComboboxChipsInput({ className, onFocus, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Combobox$1.Input,
+    {
+      "data-slot": "combobox-chip-input",
+      onFocus: (event) => {
+        moveCaretToEnd(event);
+        onFocus?.(event);
+      },
+      className: 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
+      ),
+      ...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 (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$1.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(errorName) : void 0].filter(Boolean).join(" ");
+  return {
+    id,
+    "aria-label": ariaLabel ?? getFallbackAriaLabel({ hasLabel, multiple }),
+    ...keepOwnAccessibleName({ "aria-label": ariaLabel }),
+    ...deprecatedErrorAria(Boolean(error)),
+    "aria-describedby": describedBy || void 0
+  };
+}
+function triggerClassName({ iconOnlyValue, className }) {
+  return cn(iconOnlyValue && "w-auto px-2.5", className);
+}
+function ComboboxOptionText({ option }) {
+  return /* @__PURE__ */ jsxs("span", { className: comboboxStyles.optionText, children: [
+    /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionLabel, children: option.label }),
+    option.description && /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionDescription, children: option.description })
+  ] });
+}
+function ComboboxClearFooter({ label, onClear }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "destructive-ghost",
+      size: "sm",
+      className: "w-full justify-start",
+      onClick: onClear,
+      icon: /* @__PURE__ */ jsx(X, {}),
+      children: label
+    }
+  ) });
+}
+function ComboboxOptionsContent({
+  showSearch,
+  searchPlaceholder,
+  emptyText,
+  align,
+  container,
+  footer
+}) {
+  return /* @__PURE__ */ jsxs(ComboboxContent, { align, container, children: [
+    showSearch ? /* @__PURE__ */ jsx(ComboboxSearch, { placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyText }),
+    /* @__PURE__ */ jsx(ComboboxList, { children: (option) => /* @__PURE__ */ jsxs(ComboboxItem, { value: option, children: [
+      option.start,
+      /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+      option.end ? /* @__PURE__ */ jsx("span", { className: comboboxStyles.optionEnd, children: option.end }) : null
+    ] }, option.value) }),
+    footer
+  ] });
+}
+function SingleComboboxControl({
+  shape,
+  controlProps,
+  placeholder,
+  selectedOption,
+  look
+}) {
+  if (shape === "field") {
+    return /* @__PURE__ */ jsx(
+      ComboboxInput,
+      {
+        ...controlProps,
+        size: isIconButtonSize(look.size) ? void 0 : look.size,
+        placeholder: textPlaceholder(placeholder),
+        start: selectedOption?.start,
+        className: look.className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ComboboxTrigger,
+    {
+      ...controlProps,
+      variant: look.variant,
+      size: look.size,
+      showChevron: look.showChevron,
+      icon: isIconButtonSize(look.size) ? void 0 : selectedOption?.start,
+      className: triggerClassName(look),
+      children: selectedOption?.displayLabel ?? /* @__PURE__ */ jsx(ComboboxValue, { placeholder })
+    }
+  );
+}
+function MultipleComboboxControl({
+  shape,
+  controlProps,
+  placeholder,
+  selectedCount,
+  look
+}) {
+  if (shape === "chips") {
+    return /* @__PURE__ */ jsx(ComboboxChips, { className: look.className, children: /* @__PURE__ */ jsx(ComboboxValue, { children: (items) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      items.map((item) => /* @__PURE__ */ jsx(ComboboxChip, { children: item.label }, item.value)),
+      /* @__PURE__ */ jsx(
+        ComboboxChipsInput,
+        {
+          ...controlProps,
+          placeholder: items.length === 0 ? textPlaceholder(placeholder) : void 0
+        }
+      )
+    ] }) }) });
+  }
+  const text = selectedCount === 0 ? placeholder : `${selectedCount} selected`;
+  return /* @__PURE__ */ jsx(
+    ComboboxTrigger,
+    {
+      ...controlProps,
+      variant: look.variant,
+      size: look.size,
+      showChevron: look.showChevron,
+      className: triggerClassName(look),
+      children: /* @__PURE__ */ jsx("span", { className: cn(selectedCount === 0 && 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.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__ */ 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__ */ jsx(
+          SingleComboboxControl,
+          {
+            shape,
+            controlProps,
+            placeholder,
+            selectedOption,
+            look: { variant, size, showChevron, iconOnlyValue, className }
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(ComboboxClearFooter, { label: clearLabel, onClear: () => onValueChange?.([]) }) : void 0;
+  return /* @__PURE__ */ jsxs(
+    ComboboxRoot,
+    {
+      multiple: true,
+      autoHighlight: true,
+      items: options,
+      filter,
+      value: selectedOptions,
+      onValueChange: (items) => onValueChange?.(items.map((item) => item.value)),
+      disabled,
+      open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(
+          MultipleComboboxControl,
+          {
+            shape,
+            controlProps,
+            placeholder,
+            selectedCount: selectedOptions.length,
+            look: { variant, size, showChevron, iconOnlyValue, className }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ComboboxOptionsContent,
+          {
+            showSearch: shape !== "chips",
+            searchPlaceholder,
+            emptyText,
+            align,
+            container,
+            footer
+          }
+        )
+      ]
+    }
+  );
+}
+function Combobox(props) {
+  const field = useFieldAriaIds();
+  const generatedName = React.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__ */ jsx(MultipleCombobox, { ...props, shape, controlProps }) : /* @__PURE__ */ jsx(SingleCombobox, { ...props, shape, controlProps });
+  if (!props.error) return root;
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+    root,
+    /* @__PURE__ */ jsx(FieldBlock.ErrorMsg, { name: errorName, children: props.error })
+  ] });
+}
+
+export { Combobox as C, ComboboxChip as a, ComboboxChips as b, ComboboxChipsInput as c, ComboboxClear as d, ComboboxCollection as e, ComboboxContent as f, ComboboxEmpty as g, ComboboxGroup as h, ComboboxInput as i, ComboboxItem as j, ComboboxItemContent as k, ComboboxItemDescription as l, ComboboxItemEnd as m, ComboboxItemTitle as n, ComboboxLabel as o, ComboboxList as p, ComboboxRoot as q, ComboboxSearch as r, ComboboxSeparator as s, ComboboxTrigger as t, ComboboxValue as u };
+//# sourceMappingURL=combobox-Bw13EcK0.js.map