@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/collapsible-T4jTNOOE.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const collapsible = require('@base-ui/react/collapsible');
+const React = require('react');
+const primitives_transitions = require('./primitives/transitions.cjs.js');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+const Collapsible = collapsible.Collapsible.Root;
+const CollapsibleTrigger = React.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Trigger,
+      {
+        ref,
+        "data-slot": "collapsible-trigger",
+        className: utils_cn.cn(
+          "-outline-offset-2",
+          primitives_transitions.transitions.colors,
+          primitives_transitions.focusRing.visible,
+          "hover:text-neutral5",
+          "[&>svg]:duration-normal [&>svg]:transition-transform [&>svg]:ease-out-custom",
+          "[&[data-panel-open]>svg]:rotate-90",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const panelClassNames = {
+  measured: "duration-normal h-[var(--collapsible-panel-height)] transition-[height] ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0",
+  fill: "duration-normal grid min-h-0 grid-rows-[1fr] transition-[grid-template-rows] ease-out-custom data-[ending-style]:grid-rows-[0fr] data-[starting-style]:grid-rows-[0fr]"
+};
+const CollapsibleContent = React.forwardRef(
+  ({ className, children, fill = false, ...props }, ref) => (
+    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
+    // Padding/margin/borders must live on an inner wrapper — if applied to the panel
+    // itself they keep it from collapsing to 0, which makes the animation jump.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      collapsible.Collapsible.Panel,
+      {
+        ref,
+        "data-slot": "collapsible-content",
+        className: utils_cn.cn("overflow-hidden", fill ? panelClassNames.fill : panelClassNames.measured),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn(fill && "min-h-0 overflow-hidden", className), children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+//# sourceMappingURL=collapsible-T4jTNOOE.cjs.map

package/dist/collapsible-T4jTNOOE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-T4jTNOOE.cjs","sources":["../src/ds/components/Collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\ntype CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n  /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n  asChild?: boolean;\n};\n\nconst CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, asChild, children, ...props }, ref) => {\n    const renderProps = asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {};\n\n    return (\n      <CollapsiblePrimitive.Trigger\n        ref={ref}\n        data-slot=\"collapsible-trigger\"\n        className={cn(\n          '-outline-offset-2',\n          transitions.colors,\n          focusRing.visible,\n          'hover:text-neutral5',\n          '[&>svg]:duration-normal [&>svg]:transition-transform [&>svg]:ease-out-custom',\n          '[&[data-panel-open]>svg]:rotate-90',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  },\n);\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\ntype CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {\n  className?: string;\n  /** Stretch the content to the space its parent leaves, so a scroll area inside can fill it. */\n  fill?: boolean;\n};\n\nconst panelClassNames = {\n  measured:\n    'duration-normal h-[var(--collapsible-panel-height)] transition-[height] ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0',\n  fill: 'duration-normal grid min-h-0 grid-rows-[1fr] transition-[grid-template-rows] ease-out-custom data-[ending-style]:grid-rows-[0fr] data-[starting-style]:grid-rows-[0fr]',\n};\n\nconst CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(\n  ({ className, children, fill = false, ...props }, ref) => (\n    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.\n    // Padding/margin/borders must live on an inner wrapper — if applied to the panel\n    // itself they keep it from collapsing to 0, which makes the animation jump.\n    <CollapsiblePrimitive.Panel\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      className={cn('overflow-hidden', fill ? panelClassNames.fill : panelClassNames.measured)}\n      {...props}\n    >\n      <div className={cn(fill && 'min-h-0 overflow-hidden', className)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  ),\n);\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["CollapsiblePrimitive","jsx","cn","transitions","focusRing"],"mappings":";;;;;;;;AAKA,MAAM,cAAcA,uBAAA,CAAqB;AAQzC,MAAM,qBAAqB,KAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACnD,IAAA,MAAM,WAAA,GAAc,OAAA,IAAW,KAAA,CAAM,cAAA,CAAe,QAAQ,IAAI,EAAE,MAAA,EAAQ,QAAA,EAA+B,GAAI,EAAC;AAE9G,IAAA,uBACEC,cAAA;AAAA,MAACD,uBAAA,CAAqB,OAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAWE,WAAA;AAAA,UACT,mBAAA;AAAA,UACAC,kCAAA,CAAY,MAAA;AAAA,UACZC,gCAAA,CAAU,OAAA;AAAA,UACV,qBAAA;AAAA,UACA,8EAAA;AAAA,UACA,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,WAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH,oBAAU,MAAA,GAAY;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAQjC,MAAM,eAAA,GAAkB;AAAA,EACtB,QAAA,EACE,2IAAA;AAAA,EACF,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,qBAAqB,KAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,OAAO,KAAA,EAAO,GAAG,OAAM,EAAG,GAAA;AAAA;AAAA;AAAA;AAAA,oBAIhDH,cAAA;AAAA,MAACD,uBAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,WAAWE,WAAA,CAAG,iBAAA,EAAmB,OAAO,eAAA,CAAgB,IAAA,GAAO,gBAAgB,QAAQ,CAAA;AAAA,QACtF,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA,CAAC,SAAI,SAAA,EAAWC,WAAA,CAAG,QAAQ,yBAAA,EAA2B,SAAS,GAAI,QAAA,EAAS;AAAA;AAAA;AAC9E;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;;;"}

package/dist/collapsible-cOfcD1BM.js

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
+import React__default from 'react';
+import { focusRing, transitions } from './primitives/transitions.es.js';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+const Collapsible = Collapsible$1.Root;
+const CollapsibleTrigger = React__default.forwardRef(
+  ({ className, asChild, children, ...props }, ref) => {
+    const renderProps = asChild && React__default.isValidElement(children) ? { render: children } : {};
+    return /* @__PURE__ */ jsx(
+      Collapsible$1.Trigger,
+      {
+        ref,
+        "data-slot": "collapsible-trigger",
+        className: cn(
+          "-outline-offset-2",
+          transitions.colors,
+          focusRing.visible,
+          "hover:text-neutral5",
+          "[&>svg]:duration-normal [&>svg]:transition-transform [&>svg]:ease-out-custom",
+          "[&[data-panel-open]>svg]:rotate-90",
+          className
+        ),
+        ...renderProps,
+        ...props,
+        children: asChild ? void 0 : children
+      }
+    );
+  }
+);
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const panelClassNames = {
+  measured: "duration-normal h-[var(--collapsible-panel-height)] transition-[height] ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0",
+  fill: "duration-normal grid min-h-0 grid-rows-[1fr] transition-[grid-template-rows] ease-out-custom data-[ending-style]:grid-rows-[0fr] data-[starting-style]:grid-rows-[0fr]"
+};
+const CollapsibleContent = React__default.forwardRef(
+  ({ className, children, fill = false, ...props }, ref) => (
+    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.
+    // Padding/margin/borders must live on an inner wrapper — if applied to the panel
+    // itself they keep it from collapsing to 0, which makes the animation jump.
+    /* @__PURE__ */ jsx(
+      Collapsible$1.Panel,
+      {
+        ref,
+        "data-slot": "collapsible-content",
+        className: cn("overflow-hidden", fill ? panelClassNames.fill : panelClassNames.measured),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: cn(fill && "min-h-0 overflow-hidden", className), children })
+      }
+    )
+  )
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+
+export { Collapsible as C, CollapsibleContent as a, CollapsibleTrigger as b };
+//# sourceMappingURL=collapsible-cOfcD1BM.js.map

package/dist/collapsible-cOfcD1BM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-cOfcD1BM.js","sources":["../src/ds/components/Collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport React from 'react';\nimport { transitions, focusRing } from '@/ds/primitives/transitions';\nimport { cn } from '@/lib/utils';\n\nconst Collapsible = CollapsiblePrimitive.Root;\n\ntype CollapsibleTriggerProps = Omit<CollapsiblePrimitive.Trigger.Props, 'className'> & {\n  className?: string;\n  /** @deprecated Use Base UI's native `render` prop instead for stronger composition typing. */\n  asChild?: boolean;\n};\n\nconst CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n  ({ className, asChild, children, ...props }, ref) => {\n    const renderProps = asChild && React.isValidElement(children) ? { render: children as React.ReactElement } : {};\n\n    return (\n      <CollapsiblePrimitive.Trigger\n        ref={ref}\n        data-slot=\"collapsible-trigger\"\n        className={cn(\n          '-outline-offset-2',\n          transitions.colors,\n          focusRing.visible,\n          'hover:text-neutral5',\n          '[&>svg]:duration-normal [&>svg]:transition-transform [&>svg]:ease-out-custom',\n          '[&[data-panel-open]>svg]:rotate-90',\n          className,\n        )}\n        {...renderProps}\n        {...props}\n      >\n        {asChild ? undefined : children}\n      </CollapsiblePrimitive.Trigger>\n    );\n  },\n);\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\ntype CollapsibleContentProps = Omit<CollapsiblePrimitive.Panel.Props, 'className'> & {\n  className?: string;\n  /** Stretch the content to the space its parent leaves, so a scroll area inside can fill it. */\n  fill?: boolean;\n};\n\nconst panelClassNames = {\n  measured:\n    'duration-normal h-[var(--collapsible-panel-height)] transition-[height] ease-out-custom data-[ending-style]:h-0 data-[starting-style]:h-0',\n  fill: 'duration-normal grid min-h-0 grid-rows-[1fr] transition-[grid-template-rows] ease-out-custom data-[ending-style]:grid-rows-[0fr] data-[starting-style]:grid-rows-[0fr]',\n};\n\nconst CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(\n  ({ className, children, fill = false, ...props }, ref) => (\n    // Base UI animates the panel's `height` between 0 and `--collapsible-panel-height`.\n    // Padding/margin/borders must live on an inner wrapper — if applied to the panel\n    // itself they keep it from collapsing to 0, which makes the animation jump.\n    <CollapsiblePrimitive.Panel\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      className={cn('overflow-hidden', fill ? panelClassNames.fill : panelClassNames.measured)}\n      {...props}\n    >\n      <div className={cn(fill && 'min-h-0 overflow-hidden', className)}>{children}</div>\n    </CollapsiblePrimitive.Panel>\n  ),\n);\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"],"names":["CollapsiblePrimitive","React"],"mappings":";;;;;;AAKA,MAAM,cAAcA,aAAA,CAAqB;AAQzC,MAAM,qBAAqBC,cAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AACnD,IAAA,MAAM,WAAA,GAAc,OAAA,IAAWA,cAAA,CAAM,cAAA,CAAe,QAAQ,IAAI,EAAE,MAAA,EAAQ,QAAA,EAA+B,GAAI,EAAC;AAE9G,IAAA,uBACE,GAAA;AAAA,MAACD,aAAA,CAAqB,OAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA;AAAA,UACA,WAAA,CAAY,MAAA;AAAA,UACZ,SAAA,CAAU,OAAA;AAAA,UACV,qBAAA;AAAA,UACA,8EAAA;AAAA,UACA,oCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,WAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH,oBAAU,MAAA,GAAY;AAAA;AAAA,KACzB;AAAA,EAEJ;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAQjC,MAAM,eAAA,GAAkB;AAAA,EACtB,QAAA,EACE,2IAAA;AAAA,EACF,IAAA,EAAM;AACR,CAAA;AAEA,MAAM,qBAAqBC,cAAA,CAAM,UAAA;AAAA,EAC/B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,OAAO,KAAA,EAAO,GAAG,OAAM,EAAG,GAAA;AAAA;AAAA;AAAA;AAAA,oBAIhD,GAAA;AAAA,MAACD,aAAA,CAAqB,KAAA;AAAA,MAArB;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,qBAAA;AAAA,QACV,WAAW,EAAA,CAAG,iBAAA,EAAmB,OAAO,eAAA,CAAgB,IAAA,GAAO,gBAAgB,QAAQ,CAAA;AAAA,QACtF,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,QAAQ,yBAAA,EAA2B,SAAS,GAAI,QAAA,EAAS;AAAA;AAAA;AAC9E;AAEJ;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;;;;"}

package/dist/combobox-0lN2FQ8-.js

@@ -0,0 +1,171 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
+import { ChevronsUpDown, Search, Check, X } from 'lucide-react';
+import * as React from 'react';
+import { c as comboboxStyles, a as comboboxTriggerClass, b as comboboxItemClass } from './combobox-styles-DOgXFKNk.js';
+import { i as isIconButtonSize, B as Button } from './Button-XSiL3zvL.js';
+import { FLOATING_POSITION_METHOD } from './primitives/floating.es.js';
+import { usePortalContainer } from './primitives/portal-container.es.js';
+import { c as cn } from './cn-Dxjsbr9n.js';
+
+const EMPTY_VALUES = [];
+const EMPTY_OPTIONS = [];
+function isMultipleCombobox(props) {
+  return props.multiple === true;
+}
+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 Combobox(props) {
+  const {
+    options,
+    placeholder = isMultipleCombobox(props) ? "Select options..." : "Select option...",
+    searchPlaceholder = "Search...",
+    emptyText = "No option found.",
+    className,
+    disabled = false,
+    variant = "default",
+    size = "md",
+    open,
+    onOpenChange,
+    container,
+    error,
+    "aria-label": ariaLabel,
+    align = "start",
+    allowCustomValue = false,
+    onInputValueChange
+  } = props;
+  const multiple = isMultipleCombobox(props);
+  const clearLabel = multiple ? props.clearLabel : void 0;
+  const [inputValue, setInputValue] = React.useState("");
+  const customValue = inputValue.trim();
+  const customOption = !multiple && allowCustomValue && customValue && !options.some((option) => option.value === customValue) ? { label: `Use “${customValue}”`, value: customValue } : void 0;
+  const displayedOptions = customOption ? [customOption, ...options] : options;
+  const selectedValues = multiple ? props.value ?? EMPTY_VALUES : EMPTY_VALUES;
+  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedOption = multiple ? null : options.find((option) => option.value === props.value) ?? null;
+  const selectedOptions = multiple ? options.filter((option) => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;
+  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+  const clearSelection = () => {
+    if (isMultipleCombobox(props)) props.onValueChange?.([]);
+  };
+  const resolvedContainer = usePortalContainer(container);
+  const iconOnly = isIconButtonSize(size);
+  const comboboxContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Combobox$1.Trigger,
+      {
+        "aria-label": ariaLabel,
+        className: comboboxTriggerClass({ variant, size, error: Boolean(error), className }),
+        children: [
+          iconOnly ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: multiple ? triggerText : /* @__PURE__ */ jsx(Combobox$1.Value, { placeholder }) }) : multiple ? /* @__PURE__ */ jsx("span", { className: cn("truncate", selectedOptions.length === 0 && comboboxStyles.placeholder), children: triggerText }) : (
+            // Keep truncation off the outer wrapper so start adornments are not clipped.
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              selectedOption?.start,
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: /* @__PURE__ */ jsx(Combobox$1.Value, { placeholder }) })
+            ] })
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(ChevronsUpDown, { className: cn(comboboxStyles.chevron, iconOnly && "ml-0") }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Combobox$1.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsx(
+      Combobox$1.Positioner,
+      {
+        align,
+        sideOffset: 4,
+        positionMethod: FLOATING_POSITION_METHOD,
+        className: comboboxStyles.positioner,
+        children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: comboboxStyles.popup, children: [
+          /* @__PURE__ */ jsxs("div", { className: comboboxStyles.searchContainer, children: [
+            /* @__PURE__ */ jsx(Search, { className: comboboxStyles.searchIcon }),
+            /* @__PURE__ */ jsx(Combobox$1.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
+          ] }),
+          /* @__PURE__ */ jsx(Combobox$1.Empty, { className: comboboxStyles.empty, children: emptyText }),
+          /* @__PURE__ */ jsx(Combobox$1.List, { className: comboboxStyles.list, children: (option) => {
+            const isSelected = selectedValueSet.has(option.value);
+            return /* @__PURE__ */ jsx(Combobox$1.Item, { value: option, className: comboboxItemClass({ multiple }), children: multiple ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              option.start,
+              /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+              /* @__PURE__ */ jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: isSelected ? /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) : null })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              option.start,
+              /* @__PURE__ */ jsx(ComboboxOptionText, { option }),
+              /* @__PURE__ */ jsxs("span", { className: comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsx("div", { className: comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__PURE__ */ jsx("span", { className: comboboxStyles.checkContainer, children: /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: comboboxStyles.checkIcon }) }) })
+              ] })
+            ] }) }, option.value);
+          } }),
+          selectedValues.length > 0 && clearLabel ? /* @__PURE__ */ jsx("div", { className: cn("border-t", "border-border1", "p-1"), children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive-ghost",
+              size: "sm",
+              className: "w-full justify-start",
+              onClick: clearSelection,
+              icon: /* @__PURE__ */ jsx(X, {}),
+              children: clearLabel
+            }
+          ) }) : null
+        ] })
+      }
+    ) })
+  ] });
+  if (multiple) {
+    return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+      /* @__PURE__ */ jsx(
+        Combobox$1.Root,
+        {
+          multiple: true,
+          autoHighlight: true,
+          items: displayedOptions,
+          value: selectedOptions,
+          onValueChange: (items) => props.onValueChange?.((items ?? []).map((item) => item.value)),
+          disabled,
+          open,
+          onOpenChange,
+          children: comboboxContent
+        }
+      ),
+      error && /* @__PURE__ */ jsx("span", { className: comboboxStyles.error, children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: comboboxStyles.root, children: [
+    /* @__PURE__ */ jsx(
+      Combobox$1.Root,
+      {
+        autoHighlight: true,
+        items: displayedOptions,
+        value: selectedOption,
+        inputValue,
+        onInputValueChange: (value) => {
+          setInputValue(value);
+          onInputValueChange?.(value);
+        },
+        onValueChange: (item) => {
+          if (item) {
+            props.onValueChange?.(item.value);
+            setInputValue("");
+            onInputValueChange?.("");
+          }
+        },
+        disabled,
+        open,
+        onOpenChange,
+        children: comboboxContent
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { className: comboboxStyles.error, children: error })
+  ] });
+}
+
+export { Combobox as C };
+//# sourceMappingURL=combobox-0lN2FQ8-.js.map

package/dist/combobox-0lN2FQ8-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-0lN2FQ8-.js","sources":["../src/ds/components/Combobox/combobox.tsx"],"sourcesContent":["import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search, X } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport { Button, isIconButtonSize } from '@/ds/components/Button/Button';\nimport type { ButtonSize } from '@/ds/components/Button/Button';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxVariant } from './combobox-styles';\n\nexport type ComboboxOption = {\n  label: string;\n  value: string;\n  description?: string;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n};\n\ntype ComboboxSharedProps = {\n  options: ComboboxOption[];\n  placeholder?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  /** Icon sizes (`icon-*`) render a chevron-only trigger; pass `aria-label` to name it. */\n  size?: ButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n  'aria-label'?: string;\n  /** Which edge of the trigger the popup lines up with. `end` opens it leftwards (e.g. an icon trigger at the end of a row). */\n  align?: 'start' | 'center' | 'end';\n  allowCustomValue?: boolean;\n  /** Called with the search input text as it changes (and with `''` after a single-mode selection resets it). */\n  onInputValueChange?: (value: string) => void;\n};\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n  multiple: true;\n  value?: readonly string[];\n  onValueChange?: (value: string[]) => void;\n  clearLabel?: string;\n};\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nconst EMPTY_VALUES: string[] = [];\nconst EMPTY_OPTIONS: ComboboxOption[] = [];\n\nfunction isMultipleCombobox(props: ComboboxProps): props is ComboboxMultipleProps {\n  return props.multiple === true;\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className={comboboxStyles.optionText}>\n      <span className={comboboxStyles.optionLabel}>{option.label}</span>\n      {option.description && <span className={comboboxStyles.optionDescription}>{option.description}</span>}\n    </span>\n  );\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    placeholder = isMultipleCombobox(props) ? 'Select options...' : 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No option found.',\n    className,\n    disabled = false,\n    variant = 'default',\n    size = 'md',\n    open,\n    onOpenChange,\n    container,\n    error,\n    'aria-label': ariaLabel,\n    align = 'start',\n    allowCustomValue = false,\n    onInputValueChange,\n  } = props;\n  const multiple = isMultipleCombobox(props);\n  const clearLabel = multiple ? props.clearLabel : undefined;\n  const [inputValue, setInputValue] = React.useState('');\n  const customValue = inputValue.trim();\n  const customOption =\n    !multiple && allowCustomValue && customValue && !options.some(option => option.value === customValue)\n      ? { label: `Use “${customValue}”`, value: customValue }\n      : undefined;\n  const displayedOptions = customOption ? [customOption, ...options] : options;\n  const selectedValues = multiple ? (props.value ?? EMPTY_VALUES) : EMPTY_VALUES;\n  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);\n  const selectedOption = multiple ? null : (options.find(option => option.value === props.value) ?? null);\n  const selectedOptions = multiple ? options.filter(option => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n  const clearSelection = () => {\n    if (isMultipleCombobox(props)) props.onValueChange?.([]);\n  };\n  // Default to the nearest SideDialog/Drawer popup so the list stays\n  // interactive inside a modal drawer; an explicit `container` still wins.\n  const resolvedContainer = usePortalContainer(container);\n  const iconOnly = isIconButtonSize(size);\n\n  const comboboxContent = (\n    <>\n      <BaseCombobox.Trigger\n        aria-label={ariaLabel}\n        className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}\n      >\n        {iconOnly ? (\n          <span className=\"sr-only\">{multiple ? triggerText : <BaseCombobox.Value placeholder={placeholder} />}</span>\n        ) : multiple ? (\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n        ) : (\n          // Keep truncation off the outer wrapper so start adornments are not clipped.\n          <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedOption?.start}\n            <span className=\"truncate\">\n              <BaseCombobox.Value placeholder={placeholder} />\n            </span>\n          </span>\n        )}\n        {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n            escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={cn(comboboxStyles.chevron, iconOnly && 'ml-0')} />\n        </span>\n      </BaseCombobox.Trigger>\n\n      <BaseCombobox.Portal container={resolvedContainer}>\n        <BaseCombobox.Positioner\n          align={align}\n          sideOffset={4}\n          positionMethod={FLOATING_POSITION_METHOD}\n          className={comboboxStyles.positioner}\n        >\n          <BaseCombobox.Popup className={comboboxStyles.popup}>\n            <div className={comboboxStyles.searchContainer}>\n              <Search className={comboboxStyles.searchIcon} />\n              <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n            </div>\n            <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n            <BaseCombobox.List className={comboboxStyles.list}>\n              {(option: ComboboxOption) => {\n                const isSelected = selectedValueSet.has(option.value);\n\n                return (\n                  <BaseCombobox.Item key={option.value} value={option} className={comboboxItemClass({ multiple })}>\n                    {multiple ? (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            {isSelected ? <Check className={comboboxStyles.checkIcon} /> : null}\n                          </span>\n                        </span>\n                      </>\n                    ) : (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            <BaseCombobox.ItemIndicator>\n                              <Check className={comboboxStyles.checkIcon} />\n                            </BaseCombobox.ItemIndicator>\n                          </span>\n                        </span>\n                      </>\n                    )}\n                  </BaseCombobox.Item>\n                );\n              }}\n            </BaseCombobox.List>\n            {selectedValues.length > 0 && clearLabel ? (\n              <div className={cn('border-t', 'border-border1', 'p-1')}>\n                <Button\n                  type=\"button\"\n                  variant=\"destructive-ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={clearSelection}\n                  icon={<X />}\n                >\n                  {clearLabel}\n                </Button>\n              </div>\n            ) : null}\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </>\n  );\n\n  if (multiple) {\n    return (\n      <div className={comboboxStyles.root}>\n        <BaseCombobox.Root\n          multiple\n          autoHighlight\n          items={displayedOptions}\n          value={selectedOptions}\n          onValueChange={items => props.onValueChange?.((items ?? []).map(item => item.value))}\n          disabled={disabled}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          {comboboxContent}\n        </BaseCombobox.Root>\n        {error && <span className={comboboxStyles.error}>{error}</span>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        autoHighlight\n        items={displayedOptions}\n        value={selectedOption}\n        inputValue={inputValue}\n        onInputValueChange={value => {\n          setInputValue(value);\n          onInputValueChange?.(value);\n        }}\n        onValueChange={item => {\n          if (item) {\n            props.onValueChange?.(item.value);\n            setInputValue('');\n            onInputValueChange?.('');\n          }\n        }}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        {comboboxContent}\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["BaseCombobox"],"mappings":"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"}

package/dist/combobox-D8Q-oa8_.cjs

@@ -0,0 +1,192 @@
+'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-BjTWZmnO.cjs');
+const Button = require('./Button-B1TWWXCy.cjs');
+const primitives_floating = require('./primitives/floating.cjs.js');
+const primitives_portalContainer = require('./primitives/portal-container.cjs.js');
+const utils_cn = require('./cn-DPfV6E6L.cjs');
+
+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 EMPTY_VALUES = [];
+const EMPTY_OPTIONS = [];
+function isMultipleCombobox(props) {
+  return props.multiple === true;
+}
+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 Combobox(props) {
+  const {
+    options,
+    placeholder = isMultipleCombobox(props) ? "Select options..." : "Select option...",
+    searchPlaceholder = "Search...",
+    emptyText = "No option found.",
+    className,
+    disabled = false,
+    variant = "default",
+    size = "md",
+    open,
+    onOpenChange,
+    container,
+    error,
+    "aria-label": ariaLabel,
+    align = "start",
+    allowCustomValue = false,
+    onInputValueChange
+  } = props;
+  const multiple = isMultipleCombobox(props);
+  const clearLabel = multiple ? props.clearLabel : void 0;
+  const [inputValue, setInputValue] = React__namespace.useState("");
+  const customValue = inputValue.trim();
+  const customOption = !multiple && allowCustomValue && customValue && !options.some((option) => option.value === customValue) ? { label: `Use “${customValue}”`, value: customValue } : void 0;
+  const displayedOptions = customOption ? [customOption, ...options] : options;
+  const selectedValues = multiple ? props.value ?? EMPTY_VALUES : EMPTY_VALUES;
+  const selectedValueSet = React__namespace.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedOption = multiple ? null : options.find((option) => option.value === props.value) ?? null;
+  const selectedOptions = multiple ? options.filter((option) => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;
+  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;
+  const clearSelection = () => {
+    if (isMultipleCombobox(props)) props.onValueChange?.([]);
+  };
+  const resolvedContainer = primitives_portalContainer.usePortalContainer(container);
+  const iconOnly = Button.isIconButtonSize(size);
+  const comboboxContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      combobox.Combobox.Trigger,
+      {
+        "aria-label": ariaLabel,
+        className: comboboxStyles.comboboxTriggerClass({ variant, size, error: Boolean(error), className }),
+        children: [
+          iconOnly ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: multiple ? triggerText : /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Value, { placeholder }) }) : multiple ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn("truncate", selectedOptions.length === 0 && comboboxStyles.comboboxStyles.placeholder), children: triggerText }) : (
+            // Keep truncation off the outer wrapper so start adornments are not clipped.
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+              selectedOption?.start,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Value, { placeholder }) })
+            ] })
+          ),
+          /* @__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") }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.Positioner,
+      {
+        align,
+        sideOffset: 4,
+        positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
+        className: comboboxStyles.comboboxStyles.positioner,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.comboboxStyles.popup, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.comboboxStyles.searchContainer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.comboboxStyles.searchIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Input, { className: comboboxStyles.comboboxStyles.searchInput, placeholder: searchPlaceholder })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Empty, { className: comboboxStyles.comboboxStyles.empty, children: emptyText }),
+          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.List, { className: comboboxStyles.comboboxStyles.list, children: (option) => {
+            const isSelected = selectedValueSet.has(option.value);
+            return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Item, { value: option, className: comboboxStyles.comboboxItemClass({ multiple }), children: multiple ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              option.start,
+              /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: comboboxStyles.comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.checkContainer, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: comboboxStyles.comboboxStyles.checkIcon }) : null })
+              ] })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              option.start,
+              /* @__PURE__ */ jsxRuntime.jsx(ComboboxOptionText, { option }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: comboboxStyles.comboboxStyles.itemRightSlot, children: [
+                option.end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: comboboxStyles.comboboxStyles.optionEnd, children: option.end }) : null,
+                /* @__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 }) }) })
+              ] })
+            ] }) }, option.value);
+          } }),
+          selectedValues.length > 0 && clearLabel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("border-t", "border-border1", "p-1"), children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              type: "button",
+              variant: "destructive-ghost",
+              size: "sm",
+              className: "w-full justify-start",
+              onClick: clearSelection,
+              icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+              children: clearLabel
+            }
+          ) }) : null
+        ] })
+      }
+    ) })
+  ] });
+  if (multiple) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.comboboxStyles.root, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        combobox.Combobox.Root,
+        {
+          multiple: true,
+          autoHighlight: true,
+          items: displayedOptions,
+          value: selectedOptions,
+          onValueChange: (items) => props.onValueChange?.((items ?? []).map((item) => item.value)),
+          disabled,
+          open,
+          onOpenChange,
+          children: comboboxContent
+        }
+      ),
+      error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.error, children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.comboboxStyles.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      combobox.Combobox.Root,
+      {
+        autoHighlight: true,
+        items: displayedOptions,
+        value: selectedOption,
+        inputValue,
+        onInputValueChange: (value) => {
+          setInputValue(value);
+          onInputValueChange?.(value);
+        },
+        onValueChange: (item) => {
+          if (item) {
+            props.onValueChange?.(item.value);
+            setInputValue("");
+            onInputValueChange?.("");
+          }
+        },
+        disabled,
+        open,
+        onOpenChange,
+        children: comboboxContent
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: comboboxStyles.comboboxStyles.error, children: error })
+  ] });
+}
+
+exports.Combobox = Combobox;
+//# sourceMappingURL=combobox-D8Q-oa8_.cjs.map

package/dist/combobox-D8Q-oa8_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-D8Q-oa8_.cjs","sources":["../src/ds/components/Combobox/combobox.tsx"],"sourcesContent":["import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { Check, ChevronsUpDown, Search, X } from 'lucide-react';\nimport * as React from 'react';\nimport { comboboxItemClass, comboboxStyles, comboboxTriggerClass } from './combobox-styles';\nimport type { ComboboxVariant } from './combobox-styles';\nimport { Button, isIconButtonSize } from '@/ds/components/Button/Button';\nimport type { ButtonSize } from '@/ds/components/Button/Button';\nimport { FLOATING_POSITION_METHOD } from '@/ds/primitives/floating';\nimport { usePortalContainer } from '@/ds/primitives/portal-container';\nimport { cn } from '@/lib/utils';\n\nexport type { ComboboxVariant } from './combobox-styles';\n\nexport type ComboboxOption = {\n  label: string;\n  value: string;\n  description?: string;\n  start?: React.ReactNode;\n  end?: React.ReactNode;\n};\n\ntype ComboboxSharedProps = {\n  options: ComboboxOption[];\n  placeholder?: React.ReactNode;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n  variant?: ComboboxVariant;\n  /** Icon sizes (`icon-*`) render a chevron-only trigger; pass `aria-label` to name it. */\n  size?: ButtonSize;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  container?: HTMLElement | ShadowRoot | null | React.RefObject<HTMLElement | ShadowRoot | null>;\n  error?: string;\n  'aria-label'?: string;\n  /** Which edge of the trigger the popup lines up with. `end` opens it leftwards (e.g. an icon trigger at the end of a row). */\n  align?: 'start' | 'center' | 'end';\n  allowCustomValue?: boolean;\n  /** Called with the search input text as it changes (and with `''` after a single-mode selection resets it). */\n  onInputValueChange?: (value: string) => void;\n};\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n  multiple?: false;\n  value?: string;\n  onValueChange?: (value: string) => void;\n};\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n  multiple: true;\n  value?: readonly string[];\n  onValueChange?: (value: string[]) => void;\n  clearLabel?: string;\n};\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nconst EMPTY_VALUES: string[] = [];\nconst EMPTY_OPTIONS: ComboboxOption[] = [];\n\nfunction isMultipleCombobox(props: ComboboxProps): props is ComboboxMultipleProps {\n  return props.multiple === true;\n}\n\nfunction ComboboxOptionText({ option }: { option: ComboboxOption }) {\n  return (\n    <span className={comboboxStyles.optionText}>\n      <span className={comboboxStyles.optionLabel}>{option.label}</span>\n      {option.description && <span className={comboboxStyles.optionDescription}>{option.description}</span>}\n    </span>\n  );\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    placeholder = isMultipleCombobox(props) ? 'Select options...' : 'Select option...',\n    searchPlaceholder = 'Search...',\n    emptyText = 'No option found.',\n    className,\n    disabled = false,\n    variant = 'default',\n    size = 'md',\n    open,\n    onOpenChange,\n    container,\n    error,\n    'aria-label': ariaLabel,\n    align = 'start',\n    allowCustomValue = false,\n    onInputValueChange,\n  } = props;\n  const multiple = isMultipleCombobox(props);\n  const clearLabel = multiple ? props.clearLabel : undefined;\n  const [inputValue, setInputValue] = React.useState('');\n  const customValue = inputValue.trim();\n  const customOption =\n    !multiple && allowCustomValue && customValue && !options.some(option => option.value === customValue)\n      ? { label: `Use “${customValue}”`, value: customValue }\n      : undefined;\n  const displayedOptions = customOption ? [customOption, ...options] : options;\n  const selectedValues = multiple ? (props.value ?? EMPTY_VALUES) : EMPTY_VALUES;\n  const selectedValueSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);\n  const selectedOption = multiple ? null : (options.find(option => option.value === props.value) ?? null);\n  const selectedOptions = multiple ? options.filter(option => selectedValueSet.has(option.value)) : EMPTY_OPTIONS;\n  const triggerText = selectedOptions.length === 0 ? placeholder : `${selectedOptions.length} selected`;\n  const clearSelection = () => {\n    if (isMultipleCombobox(props)) props.onValueChange?.([]);\n  };\n  // Default to the nearest SideDialog/Drawer popup so the list stays\n  // interactive inside a modal drawer; an explicit `container` still wins.\n  const resolvedContainer = usePortalContainer(container);\n  const iconOnly = isIconButtonSize(size);\n\n  const comboboxContent = (\n    <>\n      <BaseCombobox.Trigger\n        aria-label={ariaLabel}\n        className={comboboxTriggerClass({ variant, size, error: Boolean(error), className })}\n      >\n        {iconOnly ? (\n          <span className=\"sr-only\">{multiple ? triggerText : <BaseCombobox.Value placeholder={placeholder} />}</span>\n        ) : multiple ? (\n          <span className={cn('truncate', selectedOptions.length === 0 && comboboxStyles.placeholder)}>\n            {triggerText}\n          </span>\n        ) : (\n          // Keep truncation off the outer wrapper so start adornments are not clipped.\n          <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {selectedOption?.start}\n            <span className=\"truncate\">\n              <BaseCombobox.Value placeholder={placeholder} />\n            </span>\n          </span>\n        )}\n        {/* Wrap the chevron in a `<span>` so the svg is one level deep and\n            escapes Button's `[&>svg]` adornments — mirrors Select's chevron wrap. */}\n        <span className=\"flex shrink-0 items-center\">\n          <ChevronsUpDown className={cn(comboboxStyles.chevron, iconOnly && 'ml-0')} />\n        </span>\n      </BaseCombobox.Trigger>\n\n      <BaseCombobox.Portal container={resolvedContainer}>\n        <BaseCombobox.Positioner\n          align={align}\n          sideOffset={4}\n          positionMethod={FLOATING_POSITION_METHOD}\n          className={comboboxStyles.positioner}\n        >\n          <BaseCombobox.Popup className={comboboxStyles.popup}>\n            <div className={comboboxStyles.searchContainer}>\n              <Search className={comboboxStyles.searchIcon} />\n              <BaseCombobox.Input className={comboboxStyles.searchInput} placeholder={searchPlaceholder} />\n            </div>\n            <BaseCombobox.Empty className={comboboxStyles.empty}>{emptyText}</BaseCombobox.Empty>\n            <BaseCombobox.List className={comboboxStyles.list}>\n              {(option: ComboboxOption) => {\n                const isSelected = selectedValueSet.has(option.value);\n\n                return (\n                  <BaseCombobox.Item key={option.value} value={option} className={comboboxItemClass({ multiple })}>\n                    {multiple ? (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            {isSelected ? <Check className={comboboxStyles.checkIcon} /> : null}\n                          </span>\n                        </span>\n                      </>\n                    ) : (\n                      <>\n                        {option.start}\n                        <ComboboxOptionText option={option} />\n                        <span className={comboboxStyles.itemRightSlot}>\n                          {option.end ? <div className={comboboxStyles.optionEnd}>{option.end}</div> : null}\n                          <span className={comboboxStyles.checkContainer}>\n                            <BaseCombobox.ItemIndicator>\n                              <Check className={comboboxStyles.checkIcon} />\n                            </BaseCombobox.ItemIndicator>\n                          </span>\n                        </span>\n                      </>\n                    )}\n                  </BaseCombobox.Item>\n                );\n              }}\n            </BaseCombobox.List>\n            {selectedValues.length > 0 && clearLabel ? (\n              <div className={cn('border-t', 'border-border1', 'p-1')}>\n                <Button\n                  type=\"button\"\n                  variant=\"destructive-ghost\"\n                  size=\"sm\"\n                  className=\"w-full justify-start\"\n                  onClick={clearSelection}\n                  icon={<X />}\n                >\n                  {clearLabel}\n                </Button>\n              </div>\n            ) : null}\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </>\n  );\n\n  if (multiple) {\n    return (\n      <div className={comboboxStyles.root}>\n        <BaseCombobox.Root\n          multiple\n          autoHighlight\n          items={displayedOptions}\n          value={selectedOptions}\n          onValueChange={items => props.onValueChange?.((items ?? []).map(item => item.value))}\n          disabled={disabled}\n          open={open}\n          onOpenChange={onOpenChange}\n        >\n          {comboboxContent}\n        </BaseCombobox.Root>\n        {error && <span className={comboboxStyles.error}>{error}</span>}\n      </div>\n    );\n  }\n\n  return (\n    <div className={comboboxStyles.root}>\n      <BaseCombobox.Root\n        autoHighlight\n        items={displayedOptions}\n        value={selectedOption}\n        inputValue={inputValue}\n        onInputValueChange={value => {\n          setInputValue(value);\n          onInputValueChange?.(value);\n        }}\n        onValueChange={item => {\n          if (item) {\n            props.onValueChange?.(item.value);\n            setInputValue('');\n            onInputValueChange?.('');\n          }\n        }}\n        disabled={disabled}\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        {comboboxContent}\n      </BaseCombobox.Root>\n      {error && <span className={comboboxStyles.error}>{error}</span>}\n    </div>\n  );\n}\n"],"names":["jsxs","comboboxStyles","jsx","React","usePortalContainer","isIconButtonSize","Fragment","BaseCombobox","comboboxTriggerClass","cn","ChevronsUpDown","FLOATING_POSITION_METHOD","Search","comboboxItemClass","Check","Button","X"],"mappings":"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"}