@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/{chunk-MPOWJVV4.js → chunk-YZT62IMX.js}

@@ -1,15 +1,13 @@
 import { inputVariants } from './chunk-PVUDXJAI.js';
-import { useClickOutside } from './chunk-OKBR6PX4.js';
 import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { useClickOutside } from './chunk-62ZOA6PX.js';
+import { useAnchoredPosition } from './chunk-QA6ZDHFP.js';
 import { cn } from './chunk-F3SOEIN2.js';
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var placementStyles = {
-  "bottom-start": "top-full left-0 mt-2",
-  "bottom-end": "top-full right-0 mt-2",
-  bottom: "top-full left-1/2 -translate-x-1/2 mt-2"
-};
+var placementOffset = 8;
 var DropdownContext = React.createContext(null);
 function getNodeText(node) {
   if (typeof node === "string" || typeof node === "number") {
@@ -234,8 +232,18 @@ function Dropdown({
     }),
     [multiSelect, selectedValues, toggleSelectedValue]
   );
-  useClickOutside(containerRef, handleClose, isOpen);
   useEscapeKey(handleClose, isOpen);
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({
+    open: isOpen,
+    placement,
+    offset: placementOffset,
+    matchMinWidth: width === "trigger"
+  });
+  const outsideRefs = React.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, handleClose, isOpen);
   React.useEffect(() => {
     if (!isOpen) {
       setSearchQuery("");
@@ -252,7 +260,7 @@ function Dropdown({
     "aria-controls": isOpen ? menuId : void 0,
     disabled: disabled || trigger.props.disabled
   });
-  const widthStyle = typeof width === "number" ? { width: `${width}px` } : width === "trigger" ? { minWidth: "100%" } : {};
+  const widthStyle = typeof width === "number" ? { width: `${width}px` } : {};
   const filteredChildren = React.useMemo(
     () => filterDropdownChildren(children, searchQuery),
     [children, searchQuery]
@@ -284,74 +292,87 @@ function Dropdown({
     setSelectedValues,
     visibleSelectableValues
   ]);
-  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: dropdownContext, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
-    triggerElement,
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: widthStyle,
-        "data-slot": "dropdown-menu",
-        className: cn(
-          "absolute z-50 min-w-[12rem]",
-          "rounded-xl border border-neutral-200 bg-white shadow-lg",
-          "dark:border-neutral-700 dark:bg-neutral-800",
-          "animate-in fade-in zoom-in-95 duration-100",
-          placementStyles[placement],
-          className
-        ),
-        children: [
-          searchable && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: dropdownContext, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
+      className: "relative inline-flex",
+      children: [
+        triggerElement,
+        isOpen && createPortal(
+          /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "border-b border-neutral-200 p-2 dark:border-neutral-700",
-              "data-slot": "dropdown-search",
-              children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: searchInputRef,
-                  type: "search",
-                  value: searchQuery,
-                  onChange: (event) => setSearchQuery(event.target.value),
-                  placeholder: searchPlaceholder,
-                  "aria-label": searchAriaLabel,
-                  "aria-controls": menuId,
-                  "aria-autocomplete": "list",
-                  "data-slot": "dropdown-search-input",
-                  className: cn(
-                    inputVariants({ size: "sm" }),
-                    "text-sm",
-                    "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
-                  )
-                }
-              )
+              ref: floatingRef,
+              style: { ...style, ...widthStyle },
+              "data-slot": "dropdown-menu",
+              className: cn(
+                "flex min-w-[12rem] flex-col overflow-hidden",
+                "rounded-xl border border-neutral-200 bg-white shadow-lg",
+                "dark:border-neutral-700 dark:bg-neutral-800",
+                "animate-in fade-in zoom-in-95 duration-100",
+                className
+              ),
+              children: [
+                searchable && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "shrink-0 border-b border-neutral-200 p-2 dark:border-neutral-700",
+                    "data-slot": "dropdown-search",
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: searchInputRef,
+                        type: "search",
+                        value: searchQuery,
+                        onChange: (event) => setSearchQuery(event.target.value),
+                        placeholder: searchPlaceholder,
+                        "aria-label": searchAriaLabel,
+                        "aria-controls": menuId,
+                        "aria-autocomplete": "list",
+                        "data-slot": "dropdown-search-input",
+                        className: cn(
+                          inputVariants({ size: "sm" }),
+                          "text-sm",
+                          "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { id: menuId, role: "menu", className: "min-h-0 overflow-y-auto", children: [
+                  multiSelect && showSelectAll && visibleSelectableValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", { className: "p-2", "data-slot": "dropdown-select-all", children: /* @__PURE__ */ jsx(
+                      DropdownItem,
+                      {
+                        checked: allVisibleSelected,
+                        indeterminate: !allVisibleSelected && someVisibleSelected,
+                        onClick: handleSelectAll,
+                        children: selectAllLabel
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(DropdownSeparator, {})
+                  ] }),
+                  searchable ? hasSearchResults ? filteredChildren : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "text-muted-foreground px-3 py-4 text-center text-sm",
+                      "data-slot": "dropdown-empty",
+                      children: searchEmptyState
+                    }
+                  ) : children
+                ] })
+              ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { id: menuId, role: "menu", children: [
-            multiSelect && showSelectAll && visibleSelectableValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "p-2", "data-slot": "dropdown-select-all", children: /* @__PURE__ */ jsx(
-                DropdownItem,
-                {
-                  checked: allVisibleSelected,
-                  indeterminate: !allVisibleSelected && someVisibleSelected,
-                  onClick: handleSelectAll,
-                  children: selectAllLabel
-                }
-              ) }),
-              /* @__PURE__ */ jsx(DropdownSeparator, {})
-            ] }),
-            searchable ? hasSearchResults ? filteredChildren : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "text-muted-foreground px-3 py-4 text-center text-sm",
-                "data-slot": "dropdown-empty",
-                children: searchEmptyState
-              }
-            ) : children
-          ] })
-        ]
-      }
-    )
-  ] }) });
+          document.body
+        )
+      ]
+    }
+  ) });
 }
 Dropdown.displayName = "Dropdown";
 var DropdownHeader = React.forwardRef(
@@ -586,5 +607,5 @@ function DropdownLabel({
 DropdownLabel.displayName = "DropdownLabel";
 
 export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator };
-//# sourceMappingURL=chunk-MPOWJVV4.js.map
-//# sourceMappingURL=chunk-MPOWJVV4.js.map
+//# sourceMappingURL=chunk-YZT62IMX.js.map
+//# sourceMappingURL=chunk-YZT62IMX.js.map

package/dist/chunk-YZT62IMX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"names":["Fragment"],"mappings":";;;;;;;;;AA0DA,IAAM,eAAA,GAAkB,CAAA;AAQxB,IAAM,eAAA,GAAwB,oBAA2C,IAAI,CAAA;AAE7E,SAAS,YAAY,IAAA,EAA+B;AAClD,EAAA,IAAI,OAAO,IAAA,KAAS,QAAA,IAAY,OAAO,SAAS,QAAA,EAAU;AACxD,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA,EACpB;AAEA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAA,EAAG;AACvB,IAAA,OAAO,IAAA,CAAK,GAAA,CAAI,WAAW,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,EACvC;AAEA,EAAA,IAAU,KAAA,CAAA,cAAA,CAA+C,IAAI,CAAA,EAAG;AAC9D,IAAA,OAAO,WAAA,CAAY,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA;AAAA,EACxC;AAEA,EAAA,OAAO,EAAA;AACT;AAEA,SAAS,iBAAA,CACP,MACA,SAAA,EAC+B;AAC/B,EAAA,OAAa,KAAA,CAAA,cAAA,CAAe,IAAI,CAAA,IAAK,IAAA,CAAK,IAAA,KAAS,SAAA;AACrD;AAEA,SAAS,0BAA0B,IAAA,EAAgC;AACjE,EAAA,IAAI,IAAA,IAAQ,IAAA,IAAQ,OAAO,IAAA,KAAS,SAAA,EAAW;AAC7C,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,IAAI,CAAA,EAAG;AACvB,IAAA,OAAO,IAAA,CAAK,KAAK,yBAAyB,CAAA;AAAA,EAC5C;AAEA,EAAA,IAAI,CAAO,KAAA,CAAA,cAAA,CAA+C,IAAI,CAAA,EAAG;AAC/D,IAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,MAAA,OAAO,IAAA,CAAK,IAAA,EAAK,CAAE,MAAA,GAAS,CAAA;AAAA,IAC9B;AAEA,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI,IAAA,CAAK,SAAe,KAAA,CAAA,QAAA,EAAU;AAChC,IAAA,OAAa,KAAA,CAAA,QAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,CAAE,IAAA;AAAA,MACjD;AAAA,KACF;AAAA,EACF;AAEA,EAAA,IACE,IAAA,CAAK,SAAS,iBAAA,IACd,IAAA,CAAK,SAAS,aAAA,IACd,IAAA,CAAK,SAAS,cAAA,EACd;AACA,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,IAAA,CAAK,SAAS,eAAA,EAAiB;AACjC,IAAA,OAAa,KAAA,CAAA,QAAA,CAAS,OAAA,CAAQ,IAAA,CAAK,KAAA,CAAM,QAAQ,CAAA,CAAE,IAAA;AAAA,MACjD;AAAA,KACF;AAAA,EACF;AAEA,EAAA,OAAO,IAAA;AACT;AAEA,SAAS,0BACP,QAAA,EACmB;AACnB,EAAA,MAAM,gBAAA,GAAmB,CAAC,KAAA,KAAkB;AAC1C,IAAA,KAAA,IAAS,UAAU,KAAA,GAAQ,CAAA,EAAG,OAAA,IAAW,CAAA,EAAG,WAAW,CAAA,EAAG;AACxD,MAAA,MAAM,KAAA,GAAQ,SAAS,OAAO,CAAA;AAE9B,MAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,iBAAiB,CAAA,EAAG;AAC/C,QAAA,OAAO,KAAA;AAAA,MACT;AAEA,MAAA,IAAI,yBAAA,CAA0B,KAAK,CAAA,EAAG;AACpC,QAAA,OAAO,IAAA;AAAA,MACT;AAAA,IACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAkB;AACzC,IAAA,KAAA,IAAS,UAAU,KAAA,GAAQ,CAAA,EAAG,UAAU,QAAA,CAAS,MAAA,EAAQ,WAAW,CAAA,EAAG;AACrE,MAAA,MAAM,KAAA,GAAQ,SAAS,OAAO,CAAA;AAE9B,MAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,iBAAiB,CAAA,EAAG;AAC/C,QAAA,OAAO,KAAA;AAAA,MACT;AAEA,MAAA,IAAI,yBAAA,CAA0B,KAAK,CAAA,EAAG;AACpC,QAAA,OAAO,IAAA;AAAA,MACT;AAAA,IACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAEA,EAAA,OAAO,QAAA,CAAS,MAAA,CAAO,CAAC,KAAA,EAAO,KAAA,KAAU;AACvC,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,iBAAiB,CAAA,EAAG;AAC/C,MAAA,OAAO,gBAAA,CAAiB,KAAK,CAAA,IAAK,eAAA,CAAgB,KAAK,CAAA;AAAA,IACzD;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,aAAa,CAAA,EAAG;AAC3C,MAAA,OAAO,gBAAgB,KAAK,CAAA;AAAA,IAC9B;AAEA,IAAA,OAAO,IAAA;AAAA,EACT,CAAC,CAAA;AACH;AAEA,SAAS,sBAAA,CACP,UACA,KAAA,EACmB;AACnB,EAAA,MAAM,eAAA,GAAkB,KAAA,CAAM,IAAA,EAAK,CAAE,WAAA,EAAY;AAEjD,EAAA,IAAI,CAAC,eAAA,EAAiB;AACpB,IAAA,OAAa,KAAA,CAAA,QAAA,CAAS,QAAQ,QAAQ,CAAA;AAAA,EACxC;AAEA,EAAA,MAAM,mBAAyB,KAAA,CAAA,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CACrD,GAAA,CAAI,CAAC,KAAA,KAAU;AACd,IAAA,IAAI,CAAO,KAAA,CAAA,cAAA,CAA+C,KAAK,CAAA,EAAG;AAChE,MAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,UAAU,QAAA,EAAU;AAC1D,QAAA,OAAO,MAAA,CAAO,KAAK,CAAA,CAAE,WAAA,GAAc,QAAA,CAAS,eAAe,IACvD,KAAA,GACA,IAAA;AAAA,MACN;AAEA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,CAAM,SAAe,KAAA,CAAA,QAAA,EAAU;AACjC,MAAA,MAAM,gBAAA,GAAmB,sBAAA;AAAA,QACvB,MAAM,KAAA,CAAM,QAAA;AAAA,QACZ;AAAA,OACF;AAEA,MAAA,OAAO,iBAAiB,MAAA,GAAS,CAAA,GACvB,mBAAa,KAAA,EAAO,MAAA,EAAW,gBAAgB,CAAA,GACrD,IAAA;AAAA,IACN;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,cAAc,CAAA,EAAG;AAC5C,MAAA,OAAO,KAAA;AAAA,IACT;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,YAAY,CAAA,EAAG;AAC1C,MAAA,MAAM,UAAA,GAAa;AAAA,QACjB,WAAA,CAAY,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,QAChC,MAAM,KAAA,CAAM;AAAA,QAEX,MAAA,CAAO,OAAO,EACd,IAAA,CAAK,GAAG,EACR,WAAA,EAAY;AAEf,MAAA,OAAO,UAAA,CAAW,QAAA,CAAS,eAAe,CAAA,GAAI,KAAA,GAAQ,IAAA;AAAA,IACxD;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,eAAe,CAAA,EAAG;AAC7C,MAAA,MAAM,eAAA,GAAkB,sBAAA;AAAA,QACtB,MAAM,KAAA,CAAM,QAAA;AAAA,QACZ;AAAA,OACF;AAEA,MAAA,OAAO,0BAA0B,eAAe,CAAA,GACtC,mBAAa,KAAA,EAAO,MAAA,EAAW,eAAe,CAAA,GACpD,IAAA;AAAA,IACN;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,iBAAiB,CAAA,EAAG;AAC/C,MAAA,OAAO,KAAA;AAAA,IACT;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,aAAa,CAAA,EAAG;AAC3C,MAAA,OAAO,KAAA;AAAA,IACT;AAEA,IAAA,MAAM,cAAA,GAAiB,MAAM,KAAA,CAAM,QAAA;AAEnC,IAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,MAAA,OAAO,KAAA;AAAA,IACT;AAEA,IAAA,MAAM,sBAAA,GAAyB,sBAAA;AAAA,MAC7B,cAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,OAAO,uBAAuB,MAAA,GAAS,CAAA,GAC7B,mBAAa,KAAA,EAAO,MAAA,EAAW,sBAAsB,CAAA,GAC3D,IAAA;AAAA,EACN,CAAC,CAAA,CACA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAU,IAAI,CAAA;AAEnC,EAAA,OAAO,0BAA0B,gBAAgB,CAAA;AACnD;AAEA,SAAS,oBAAoB,QAAA,EAAqC;AAChE,EAAA,OAAa,eAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAA,CAAQ,CAAC,KAAA,KAAU;AACzD,IAAA,IACE,CAAO,KAAA,CAAA,cAAA;AAAA,MACL;AAAA,KACF,EACA;AACA,MAAA,OAAO,EAAC;AAAA,IACV;AAEA,IAAA,IAAI,KAAA,CAAM,IAAA,KAAe,KAAA,CAAA,QAAA,IAAY,KAAA,CAAM,SAAS,eAAA,EAAiB;AACnE,MAAA,OAAO,mBAAA,CAAoB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA;AAAA,IACjD;AAEA,IAAA,IAAI,iBAAA,CAAkB,KAAA,EAAO,YAAY,CAAA,EAAG;AAC1C,MAAA,OAAO,OAAO,KAAA,CAAM,KAAA,CAAM,KAAA,KAAU,QAAA,GAAW,CAAC,KAAA,CAAM,KAAA,CAAM,KAAK,CAAA,GAAI,EAAC;AAAA,IACxE;AAEA,IAAA,OAAO,KAAA,CAAM,MAAM,QAAA,KAAa,MAAA,GAC5B,oBAAoB,KAAA,CAAM,KAAA,CAAM,QAAQ,CAAA,GACxC,EAAC;AAAA,EACP,CAAC,CAAA;AACH;AAeA,SAAS,QAAA,CAAS;AAAA,EAChB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,EAAM,cAAA;AAAA,EACN,YAAA;AAAA,EACA,SAAA,GAAY,cAAA;AAAA,EACZ,SAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,UAAA,GAAa,KAAA;AAAA,EACb,iBAAA,GAAoB,WAAA;AAAA,EACpB,eAAA,GAAkB,uBAAA;AAAA,EAClB,gBAAA,GAAmB,kBAAA;AAAA,EACnB,WAAA,GAAc,KAAA;AAAA,EACd,cAAA,EAAgB,wBAAA;AAAA,EAChB,wBAAwB,EAAC;AAAA,EACzB,sBAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,cAAA,GAAiB;AACnB,CAAA,EAAkB;AAChB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAU,eAAS,KAAK,CAAA;AACpE,EAAA,MAAM,CAAC,0BAAA,EAA4B,6BAA6B,CAAA,GACxD,eAAS,qBAAqB,CAAA;AACtC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAU,eAAS,EAAE,CAAA;AACvD,EAAA,MAAM,YAAA,GAAqB,aAAuB,IAAI,CAAA;AACtD,EAAA,MAAM,cAAA,GAAuB,aAAyB,IAAI,CAAA;AAC1D,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAE3B,EAAA,MAAM,eAAe,cAAA,KAAmB,MAAA;AACxC,EAAA,MAAM,6BAA6B,wBAAA,KAA6B,MAAA;AAChE,EAAA,MAAM,MAAA,GAAS,eAAe,cAAA,GAAiB,gBAAA;AAC/C,EAAA,MAAM,cAAA,GAAiB,6BACnB,wBAAA,GACA,0BAAA;AAEJ,EAAA,MAAM,OAAA,GAAgB,KAAA,CAAA,WAAA;AAAA,IACpB,CAAC,KAAA,KAAmB;AAClB,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B;AACA,MAAA,YAAA,GAAe,KAAK,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,GAC7B;AAEA,EAAA,MAAM,YAAA,GAAqB,kBAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,OAAA,CAAQ,CAAC,MAAM,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,MAAA,EAAQ,OAAO,CAAC,CAAA;AAE9B,EAAA,MAAM,WAAA,GAAoB,kBAAY,MAAM;AAC1C,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,iBAAA,GAA0B,KAAA,CAAA,WAAA;AAAA,IAC9B,CAAC,MAAA,KAAqB;AACpB,MAAA,IAAI,CAAC,0BAAA,EAA4B;AAC/B,QAAA,6BAAA,CAA8B,MAAM,CAAA;AAAA,MACtC;AACA,MAAA,sBAAA,GAAyB,MAAM,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,4BAA4B,sBAAsB;AAAA,GACrD;AAEA,EAAA,MAAM,mBAAA,GAA4B,KAAA,CAAA,WAAA;AAAA,IAChC,CAAC,KAAA,KAAkB;AACjB,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA;AAAA,MACF;AAEA,MAAA,iBAAA;AAAA,QACE,cAAA,CAAe,QAAA,CAAS,KAAK,CAAA,GACzB,eAAe,MAAA,CAAO,CAAC,aAAA,KAAkB,aAAA,KAAkB,KAAK,CAAA,GAChE,CAAC,GAAG,gBAAgB,KAAK;AAAA,OAC/B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,cAAA,EAAgB,iBAAiB;AAAA,GACjD;AAEA,EAAA,MAAM,eAAA,GAAwB,KAAA,CAAA,OAAA;AAAA,IAC5B,OAAO;AAAA,MACL,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,WAAA,EAAa,cAAA,EAAgB,mBAAmB;AAAA,GACnD;AAEA,EAAA,YAAA,CAAa,aAAa,MAAM,CAAA;AAGhC,EAAA,MAAM,EAAE,SAAA,EAAW,WAAA,EAAa,KAAA,KAAU,mBAAA,CAGxC;AAAA,IACA,IAAA,EAAM,MAAA;AAAA,IACN,SAAA;AAAA,IACA,MAAA,EAAQ,eAAA;AAAA,IACR,eAAe,KAAA,KAAU;AAAA,GAC1B,CAAA;AAED,EAAA,MAAM,WAAA,GAAoB,KAAA,CAAA,OAAA;AAAA,IACxB,MAAM,CAAC,YAAA,EAAc,WAAW,CAAA;AAAA,IAChC,CAAC,WAAW;AAAA,GACd;AACA,EAAA,eAAA,CAAgB,WAAA,EAAa,aAAa,MAAM,CAAA;AAEhD,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA,cAAA,CAAe,EAAE,CAAA;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,qBAAA,CAAsB,MAAM,cAAA,CAAe,OAAA,EAAS,KAAA,EAAO,CAAA;AAAA,IAC7D;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,UAAU,CAAC,CAAA;AAGvB,EAAA,MAAM,cAAA,GAAuB,mBAAa,OAAA,EAAS;AAAA,IACjD,OAAA,EAAS,YAAA;AAAA,IACT,eAAA,EAAiB,MAAA;AAAA,IACjB,eAAA,EAAiB,MAAA;AAAA,IACjB,eAAA,EAAiB,SAAS,MAAA,GAAS,MAAA;AAAA,IACnC,QAAA,EAAU,QAAA,IAAY,OAAA,CAAQ,KAAA,CAAM;AAAA,GACrC,CAAA;AAED,EAAA,MAAM,UAAA,GAAa,OAAO,KAAA,KAAU,QAAA,GAAW,EAAE,OAAO,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,EAAK,GAAI,EAAC;AAE1E,EAAA,MAAM,gBAAA,GAAyB,KAAA,CAAA,OAAA;AAAA,IAC7B,MAAM,sBAAA,CAAuB,QAAA,EAAU,WAAW,CAAA;AAAA,IAClD,CAAC,UAAU,WAAW;AAAA,GACxB;AACA,EAAA,MAAM,uBAAA,GAAgC,KAAA,CAAA,OAAA;AAAA,IACpC,MAAM,mBAAA,CAAoB,UAAA,GAAa,gBAAA,GAAmB,QAAQ,CAAA;AAAA,IAClE,CAAC,QAAA,EAAU,gBAAA,EAAkB,UAAU;AAAA,GACzC;AACA,EAAA,MAAM,gBAAA,GAAyB,KAAA,CAAA,OAAA;AAAA,IAC7B,MAAM,0BAA0B,gBAAgB,CAAA;AAAA,IAChD,CAAC,gBAAgB;AAAA,GACnB;AACA,EAAA,MAAM,kBAAA,GACJ,uBAAA,CAAwB,MAAA,GAAS,CAAA,IACjC,uBAAA,CAAwB,KAAA,CAAM,CAAC,KAAA,KAAU,cAAA,CAAe,QAAA,CAAS,KAAK,CAAC,CAAA;AACzE,EAAA,MAAM,sBAAsB,uBAAA,CAAwB,IAAA;AAAA,IAAK,CAAC,KAAA,KACxD,cAAA,CAAe,QAAA,CAAS,KAAK;AAAA,GAC/B;AAEA,EAAA,MAAM,eAAA,GAAwB,kBAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,WAAA,IAAe,uBAAA,CAAwB,MAAA,KAAW,CAAA,EAAG;AACxD,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAI,uBAAuB,CAAA;AAEvD,IAAA,iBAAA;AAAA,MACE,kBAAA,GACI,eAAe,MAAA,CAAO,CAAC,UAAU,CAAC,eAAA,CAAgB,IAAI,KAAK,CAAC,IAC5D,KAAA,CAAM,IAAA,qBAAS,GAAA,CAAI,CAAC,GAAG,cAAA,EAAgB,GAAG,uBAAuB,CAAC,CAAC;AAAA,KACzE;AAAA,EACF,CAAA,EAAG;AAAA,IACD,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA,CAAC,eAAA,CAAgB,QAAA,EAAhB,EAAyB,OAAO,eAAA,EAC/B,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAA,YAAA,CAAa,OAAA,GAAU,IAAA;AACvB,QAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,MACtB,CAAA;AAAA,MACA,SAAA,EAAU,sBAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,cAAA;AAAA,QACA,MAAA,IACC,YAAA;AAAA,0BACE,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,WAAA;AAAA,cACL,KAAA,EAAO,EAAE,GAAG,KAAA,EAAO,GAAG,UAAA,EAAW;AAAA,cACjC,WAAA,EAAU,eAAA;AAAA,cACV,SAAA,EAAW,EAAA;AAAA,gBACT,6CAAA;AAAA,gBACA,yDAAA;AAAA,gBACA,6CAAA;AAAA,gBACA,4CAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,UAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,kEAAA;AAAA,oBACV,WAAA,EAAU,iBAAA;AAAA,oBAEV,QAAA,kBAAA,GAAA;AAAA,sBAAC,OAAA;AAAA,sBAAA;AAAA,wBACC,GAAA,EAAK,cAAA;AAAA,wBACL,IAAA,EAAK,QAAA;AAAA,wBACL,KAAA,EAAO,WAAA;AAAA,wBACP,UAAU,CAAC,KAAA,KAAU,cAAA,CAAe,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,wBACtD,WAAA,EAAa,iBAAA;AAAA,wBACb,YAAA,EAAY,eAAA;AAAA,wBACZ,eAAA,EAAe,MAAA;AAAA,wBACf,mBAAA,EAAkB,MAAA;AAAA,wBAClB,WAAA,EAAU,uBAAA;AAAA,wBACV,SAAA,EAAW,EAAA;AAAA,0BACT,aAAA,CAAc,EAAE,IAAA,EAAM,IAAA,EAAM,CAAA;AAAA,0BAC5B,SAAA;AAAA,0BACA;AAAA;AACF;AAAA;AACF;AAAA,iBACF;AAAA,qCAED,KAAA,EAAA,EAAI,EAAA,EAAI,QAAQ,IAAA,EAAK,MAAA,EAAO,WAAU,yBAAA,EACpC,QAAA,EAAA;AAAA,kBAAA,WAAA,IACC,iBACA,uBAAA,CAAwB,MAAA,GAAS,CAAA,oBAC/B,IAAA,CAAAA,UAAA,EACE,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,KAAA,EAAM,WAAA,EAAU,qBAAA,EAC7B,QAAA,kBAAA,GAAA;AAAA,sBAAC,YAAA;AAAA,sBAAA;AAAA,wBACC,OAAA,EAAS,kBAAA;AAAA,wBACT,aAAA,EACE,CAAC,kBAAA,IAAsB,mBAAA;AAAA,wBAEzB,OAAA,EAAS,eAAA;AAAA,wBAER,QAAA,EAAA;AAAA;AAAA,qBACH,EACF,CAAA;AAAA,wCACC,iBAAA,EAAA,EAAkB;AAAA,mBAAA,EACrB,CAAA;AAAA,kBAEH,UAAA,GACC,mBACE,gBAAA,mBAEA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,qDAAA;AAAA,sBACV,WAAA,EAAU,gBAAA;AAAA,sBAET,QAAA,EAAA;AAAA;AAAA,mBACH,GAGF;AAAA,iBAAA,EAEJ;AAAA;AAAA;AAAA,WACF;AAAA,UACA,QAAA,CAAS;AAAA;AACX;AAAA;AAAA,GACJ,EACF,CAAA;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AA8BvB,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,UAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnE,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,yDAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yBAAA;AAAA,cACV,WAAA,EAAU,qBAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,MAAA;AAAA,gCACD,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,GAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,iEAAA;AAAA,sBACV,WAAA,EAAU,uBAAA;AAAA,sBAET,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kBACC,QAAA,oBACC,GAAA;AAAA,oBAAC,GAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,wCAAA;AAAA,sBACV,WAAA,EAAU,0BAAA;AAAA,sBAET,QAAA,EAAA;AAAA;AAAA;AACH,iBAAA,EAEJ;AAAA;AAAA;AAAA,WACF;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;AAW7B,IAAM,eAAA,GAAwB,KAAA,CAAA,UAAA;AAAA,EAC5B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAChC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAA,EAAU,kBAAA;AAAA,QACV,SAAA,EAAW,EAAA,CAAG,KAAA,EAAO,SAAS,CAAA;AAAA,QAC7B,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAqB9B,SAAS,oBAAA,CAAqB;AAAA,EAC5B,OAAA;AAAA,EACA,aAAA,GAAgB;AAClB,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,mGAAA;AAAA,QACA,OAAA,IAAW,gBACP,8CAAA,GACA;AAAA,OACN;AAAA,MAEC,QAAA,EAAA,aAAA,mBACC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,SAAA,EAAU,SAAA;AAAA,UACV,KAAA,EAAM,4BAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UAEL,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAE,QAAA;AAAA,cACF,MAAA,EAAO,cAAA;AAAA,cACP,WAAA,EAAY,GAAA;AAAA,cACZ,aAAA,EAAc;AAAA;AAAA;AAChB;AAAA,OACF,mBAEA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,SAAA,EAAU,SAAA;AAAA,UACV,KAAA,EAAM,4BAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UAEL,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAE,4BAAA;AAAA,cACF,MAAA,EAAO,cAAA;AAAA,cACP,WAAA,EAAY,GAAA;AAAA,cACZ,aAAA,EAAc,OAAA;AAAA,cACd,cAAA,EAAe;AAAA;AAAA;AACjB;AAAA;AACF;AAAA,GAEJ;AAEJ;AAKA,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EACzB,CACE;AAAA,IACE,SAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,QAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA,GAAgB,KAAA;AAAA,IAChB,eAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAA,GAAwB,iBAAW,eAAe,CAAA;AACxD,IAAA,MAAM,SAAA,GAAY,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,GAAQ,MAAA;AACtD,IAAA,MAAM,qBAAA,GAAwB,eAAA,EAAiB,cAAA,IAAkB,EAAC;AAClE,IAAA,MAAM,oBACH,eAAA,EAAiB,WAAA,KAAgB,QAAQ,SAAA,KAAc,MAAA,IACxD,YAAY,MAAA,IACZ,aAAA;AACF,IAAA,MAAM,SAAA,GACJ,YACC,iBAAA,GACG,SAAA,KAAc,UAAa,qBAAA,CAAsB,QAAA,CAAS,SAAS,CAAA,GACnE,KAAA,CAAA;AAEN,IAAA,MAAM,WAAA,GAAoB,KAAA,CAAA,WAAA;AAAA,MACxB,CAAC,KAAA,KAA+C;AAC9C,QAAA,IACE,eAAA,IACA,iBAAA,IACA,SAAA,KAAc,MAAA,IACd,CAAC,QAAA,EACD;AACA,UAAA,eAAA,CAAgB,oBAAoB,SAAS,CAAA;AAC7C,UAAA,eAAA,GAAkB,CAAC,SAAS,CAAA;AAAA,QAC9B;AAEA,QAAA,OAAA,GAAU,KAAK,CAAA;AAAA,MACjB,CAAA;AAAA,MACA;AAAA,QACE,QAAA;AAAA,QACA,eAAA;AAAA,QACA,SAAA;AAAA,QACA,iBAAA;AAAA,QACA,SAAA;AAAA,QACA,eAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,oBAAoB,kBAAA,GAAqB,UAAA;AAAA,QAC/C,cAAA,EACE,iBAAA,GAAqB,aAAA,GAAgB,OAAA,GAAU,SAAA,GAAa,MAAA;AAAA,QAE9D,QAAA;AAAA,QACA,WAAA,EAAU,eAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,uEAAA;AAAA,UACA,gCAAA;AAAA,UACA,oBAAA;AAAA,UACA,YAAY,SAAA,IAAa;AAAA,YACvB,wCAAA;AAAA,YACA,gDAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,YAAY,QAAA,IAAY;AAAA,YACtB,gCAAA;AAAA,YACA,0CAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,UAAA;AAAA,QAClB,OAAA,EAAS,WAAA;AAAA,QACT,KAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,iBAAA,oBACC,GAAA;AAAA,YAAC,oBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,SAAA;AAAA,cACT;AAAA;AAAA,WACF;AAAA,UAED,wBACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,kBAAA,EAAmB,WAAA,EAAU,sBAC1C,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,8BAED,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAc,WAAA,EAAU,uBACrC,QAAA,EACH;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AAS3B,SAAS,iBAAA,CAAkB,EAAE,SAAA,EAAU,EAA2B;AAChE,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,qDAAA;AAAA,QACA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;AAShC,SAAS,aAAA,CAAc;AAAA,EACrB,SAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,gBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,4DAAA;AAAA,QACA,uBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA","file":"chunk-YZT62IMX.js","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport {\n  useAnchoredPosition,\n  type AnchoredPlacement,\n} from '../../hooks/useAnchoredPosition';\nimport { inputVariants } from '../Input';\n\nexport type DropdownPlacement = AnchoredPlacement;\n\nexport interface DropdownProps {\n  /** The trigger element (usually a button) */\n  trigger: React.ReactElement<{\n    onClick?: () => void;\n    disabled?: boolean;\n    'aria-haspopup'?: string;\n    'aria-expanded'?: boolean;\n    'aria-controls'?: string;\n  }>;\n  /** Dropdown content */\n  children: React.ReactNode;\n  /** Controlled open state */\n  open?: boolean;\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Placement of the dropdown */\n  placement?: DropdownPlacement;\n  /** Additional class name for the dropdown menu */\n  className?: string;\n  /** Width of the dropdown menu */\n  width?: 'auto' | 'trigger' | number;\n  /** Whether the dropdown is disabled */\n  disabled?: boolean;\n  /** Whether to render a search field at the top of the dropdown */\n  searchable?: boolean;\n  /** Placeholder text for the search input */\n  searchPlaceholder?: string;\n  /** Accessible label for the search input */\n  searchAriaLabel?: string;\n  /** Content to render when no items match the search query */\n  searchEmptyState?: React.ReactNode;\n  /** Whether dropdown items support multi-select checkboxes */\n  multiSelect?: boolean;\n  /** Selected item values for controlled multi-select dropdowns */\n  selectedValues?: string[];\n  /** Initial selected item values for uncontrolled multi-select dropdowns */\n  defaultSelectedValues?: string[];\n  /** Callback fired when selected values change in multi-select mode */\n  onSelectedValuesChange?: (values: string[]) => void;\n  /** Whether to render a select-all control for multi-select dropdowns */\n  showSelectAll?: boolean;\n  /** Label for the select-all control */\n  selectAllLabel?: React.ReactNode;\n}\n\nconst placementOffset = 8; // matches the previous mt-2/mb-2 gap\n\ninterface DropdownContextValue {\n  multiSelect: boolean;\n  selectedValues: string[];\n  toggleSelectedValue: (value: string) => void;\n}\n\nconst DropdownContext = React.createContext<DropdownContextValue | null>(null);\n\nfunction getNodeText(node: React.ReactNode): string {\n  if (typeof node === 'string' || typeof node === 'number') {\n    return String(node);\n  }\n\n  if (Array.isArray(node)) {\n    return node.map(getNodeText).join(' ');\n  }\n\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return getNodeText(node.props.children);\n  }\n\n  return '';\n}\n\nfunction isDropdownElement<P>(\n  node: React.ReactNode,\n  component: React.JSXElementConstructor<P>\n): node is React.ReactElement<P> {\n  return React.isValidElement(node) && node.type === component;\n}\n\nfunction hasVisibleDropdownContent(node: React.ReactNode): boolean {\n  if (node == null || typeof node === 'boolean') {\n    return false;\n  }\n\n  if (Array.isArray(node)) {\n    return node.some(hasVisibleDropdownContent);\n  }\n\n  if (!React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    if (typeof node === 'string') {\n      return node.trim().length > 0;\n    }\n\n    return true;\n  }\n\n  if (node.type === React.Fragment) {\n    return React.Children.toArray(node.props.children).some(\n      hasVisibleDropdownContent\n    );\n  }\n\n  if (\n    node.type === DropdownSeparator ||\n    node.type === DropdownLabel ||\n    node.type === DropdownHeader\n  ) {\n    return false;\n  }\n\n  if (node.type === DropdownContent) {\n    return React.Children.toArray(node.props.children).some(\n      hasVisibleDropdownContent\n    );\n  }\n\n  return true;\n}\n\nfunction normalizeDropdownSiblings(\n  children: React.ReactNode[]\n): React.ReactNode[] {\n  const hasContentBefore = (index: number) => {\n    for (let current = index - 1; current >= 0; current -= 1) {\n      const child = children[current];\n\n      if (isDropdownElement(child, DropdownSeparator)) {\n        return false;\n      }\n\n      if (hasVisibleDropdownContent(child)) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n\n  const hasContentAfter = (index: number) => {\n    for (let current = index + 1; current < children.length; current += 1) {\n      const child = children[current];\n\n      if (isDropdownElement(child, DropdownSeparator)) {\n        return false;\n      }\n\n      if (hasVisibleDropdownContent(child)) {\n        return true;\n      }\n    }\n\n    return false;\n  };\n\n  return children.filter((child, index) => {\n    if (isDropdownElement(child, DropdownSeparator)) {\n      return hasContentBefore(index) && hasContentAfter(index);\n    }\n\n    if (isDropdownElement(child, DropdownLabel)) {\n      return hasContentAfter(index);\n    }\n\n    return true;\n  });\n}\n\nfunction filterDropdownChildren(\n  children: React.ReactNode,\n  query: string\n): React.ReactNode[] {\n  const normalizedQuery = query.trim().toLowerCase();\n\n  if (!normalizedQuery) {\n    return React.Children.toArray(children);\n  }\n\n  const filteredChildren = React.Children.toArray(children)\n    .map((child) => {\n      if (!React.isValidElement<{ children?: React.ReactNode }>(child)) {\n        if (typeof child === 'string' || typeof child === 'number') {\n          return String(child).toLowerCase().includes(normalizedQuery)\n            ? child\n            : null;\n        }\n\n        return null;\n      }\n\n      if (child.type === React.Fragment) {\n        const fragmentChildren = filterDropdownChildren(\n          child.props.children,\n          normalizedQuery\n        );\n\n        return fragmentChildren.length > 0\n          ? React.cloneElement(child, undefined, fragmentChildren)\n          : null;\n      }\n\n      if (isDropdownElement(child, DropdownHeader)) {\n        return child;\n      }\n\n      if (isDropdownElement(child, DropdownItem)) {\n        const searchText = [\n          getNodeText(child.props.children),\n          child.props.searchText,\n        ]\n          .filter(Boolean)\n          .join(' ')\n          .toLowerCase();\n\n        return searchText.includes(normalizedQuery) ? child : null;\n      }\n\n      if (isDropdownElement(child, DropdownContent)) {\n        const contentChildren = filterDropdownChildren(\n          child.props.children,\n          normalizedQuery\n        );\n\n        return hasVisibleDropdownContent(contentChildren)\n          ? React.cloneElement(child, undefined, contentChildren)\n          : null;\n      }\n\n      if (isDropdownElement(child, DropdownSeparator)) {\n        return child;\n      }\n\n      if (isDropdownElement(child, DropdownLabel)) {\n        return child;\n      }\n\n      const nestedChildren = child.props.children;\n\n      if (nestedChildren === undefined) {\n        return child;\n      }\n\n      const filteredNestedChildren = filterDropdownChildren(\n        nestedChildren,\n        normalizedQuery\n      );\n\n      return filteredNestedChildren.length > 0\n        ? React.cloneElement(child, undefined, filteredNestedChildren)\n        : null;\n    })\n    .filter((child) => child !== null);\n\n  return normalizeDropdownSiblings(filteredChildren);\n}\n\nfunction getSelectableValues(children: React.ReactNode): string[] {\n  return React.Children.toArray(children).flatMap((child) => {\n    if (\n      !React.isValidElement<{ children?: React.ReactNode; value?: unknown }>(\n        child\n      )\n    ) {\n      return [];\n    }\n\n    if (child.type === React.Fragment || child.type === DropdownContent) {\n      return getSelectableValues(child.props.children);\n    }\n\n    if (isDropdownElement(child, DropdownItem)) {\n      return typeof child.props.value === 'string' ? [child.props.value] : [];\n    }\n\n    return child.props.children !== undefined\n      ? getSelectableValues(child.props.children)\n      : [];\n  });\n}\n\n/**\n * An accessible dropdown menu component.\n *\n * @example\n * ```tsx\n * <Dropdown\n *   trigger={<Button>Options</Button>}\n * >\n *   <DropdownItem onClick={() => console.log('Edit')}>Edit</DropdownItem>\n *   <DropdownItem onClick={() => console.log('Delete')} variant=\"danger\">Delete</DropdownItem>\n * </Dropdown>\n * ```\n */\nfunction Dropdown({\n  trigger,\n  children,\n  open: controlledOpen,\n  onOpenChange,\n  placement = 'bottom-start',\n  className,\n  width = 'auto',\n  disabled = false,\n  searchable = false,\n  searchPlaceholder = 'Search...',\n  searchAriaLabel = 'Search dropdown items',\n  searchEmptyState = 'No results found',\n  multiSelect = false,\n  selectedValues: controlledSelectedValues,\n  defaultSelectedValues = [],\n  onSelectedValuesChange,\n  showSelectAll = false,\n  selectAllLabel = 'Select all',\n}: DropdownProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n  const [uncontrolledSelectedValues, setUncontrolledSelectedValues] =\n    React.useState(defaultSelectedValues);\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const searchInputRef = React.useRef<HTMLInputElement>(null);\n  const menuId = React.useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isSelectedValuesControlled = controlledSelectedValues !== undefined;\n  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n  const selectedValues = isSelectedValuesControlled\n    ? controlledSelectedValues\n    : uncontrolledSelectedValues;\n\n  const setOpen = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(value);\n      }\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const handleToggle = React.useCallback(() => {\n    if (!disabled) {\n      setOpen(!isOpen);\n    }\n  }, [disabled, isOpen, setOpen]);\n\n  const handleClose = React.useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  const setSelectedValues = React.useCallback(\n    (values: string[]) => {\n      if (!isSelectedValuesControlled) {\n        setUncontrolledSelectedValues(values);\n      }\n      onSelectedValuesChange?.(values);\n    },\n    [isSelectedValuesControlled, onSelectedValuesChange]\n  );\n\n  const toggleSelectedValue = React.useCallback(\n    (value: string) => {\n      if (!multiSelect) {\n        return;\n      }\n\n      setSelectedValues(\n        selectedValues.includes(value)\n          ? selectedValues.filter((selectedValue) => selectedValue !== value)\n          : [...selectedValues, value]\n      );\n    },\n    [multiSelect, selectedValues, setSelectedValues]\n  );\n\n  const dropdownContext = React.useMemo<DropdownContextValue>(\n    () => ({\n      multiSelect,\n      selectedValues,\n      toggleSelectedValue,\n    }),\n    [multiSelect, selectedValues, toggleSelectedValue]\n  );\n\n  useEscapeKey(handleClose, isOpen);\n\n  // Portal + fixed positioning so the menu escapes overflow-hidden ancestors.\n  const { anchorRef, floatingRef, style } = useAnchoredPosition<\n    HTMLDivElement,\n    HTMLDivElement\n  >({\n    open: isOpen,\n    placement,\n    offset: placementOffset,\n    matchMinWidth: width === 'trigger',\n  });\n\n  const outsideRefs = React.useMemo(\n    () => [containerRef, floatingRef],\n    [floatingRef]\n  );\n  useClickOutside(outsideRefs, handleClose, isOpen);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setSearchQuery('');\n      return;\n    }\n\n    if (searchable) {\n      requestAnimationFrame(() => searchInputRef.current?.focus());\n    }\n  }, [isOpen, searchable]);\n\n  // Clone trigger to add event handlers\n  const triggerElement = React.cloneElement(trigger, {\n    onClick: handleToggle,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n    'aria-controls': isOpen ? menuId : undefined,\n    disabled: disabled || trigger.props.disabled,\n  });\n\n  const widthStyle = typeof width === 'number' ? { width: `${width}px` } : {};\n\n  const filteredChildren = React.useMemo(\n    () => filterDropdownChildren(children, searchQuery),\n    [children, searchQuery]\n  );\n  const visibleSelectableValues = React.useMemo(\n    () => getSelectableValues(searchable ? filteredChildren : children),\n    [children, filteredChildren, searchable]\n  );\n  const hasSearchResults = React.useMemo(\n    () => hasVisibleDropdownContent(filteredChildren),\n    [filteredChildren]\n  );\n  const allVisibleSelected =\n    visibleSelectableValues.length > 0 &&\n    visibleSelectableValues.every((value) => selectedValues.includes(value));\n  const someVisibleSelected = visibleSelectableValues.some((value) =>\n    selectedValues.includes(value)\n  );\n\n  const handleSelectAll = React.useCallback(() => {\n    if (!multiSelect || visibleSelectableValues.length === 0) {\n      return;\n    }\n\n    const visibleValueSet = new Set(visibleSelectableValues);\n\n    setSelectedValues(\n      allVisibleSelected\n        ? selectedValues.filter((value) => !visibleValueSet.has(value))\n        : Array.from(new Set([...selectedValues, ...visibleSelectableValues]))\n    );\n  }, [\n    allVisibleSelected,\n    multiSelect,\n    selectedValues,\n    setSelectedValues,\n    visibleSelectableValues,\n  ]);\n\n  return (\n    <DropdownContext.Provider value={dropdownContext}>\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          anchorRef.current = node;\n        }}\n        className=\"relative inline-flex\"\n      >\n        {triggerElement}\n        {isOpen &&\n          createPortal(\n            <div\n              ref={floatingRef}\n              style={{ ...style, ...widthStyle }}\n              data-slot=\"dropdown-menu\"\n              className={cn(\n                'flex min-w-[12rem] flex-col overflow-hidden',\n                'rounded-xl border border-neutral-200 bg-white shadow-lg',\n                'dark:border-neutral-700 dark:bg-neutral-800',\n                'animate-in fade-in zoom-in-95 duration-100',\n                className\n              )}\n            >\n              {searchable && (\n                <div\n                  className=\"shrink-0 border-b border-neutral-200 p-2 dark:border-neutral-700\"\n                  data-slot=\"dropdown-search\"\n                >\n                  <input\n                    ref={searchInputRef}\n                    type=\"search\"\n                    value={searchQuery}\n                    onChange={(event) => setSearchQuery(event.target.value)}\n                    placeholder={searchPlaceholder}\n                    aria-label={searchAriaLabel}\n                    aria-controls={menuId}\n                    aria-autocomplete=\"list\"\n                    data-slot=\"dropdown-search-input\"\n                    className={cn(\n                      inputVariants({ size: 'sm' }),\n                      'text-sm',\n                      'dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100'\n                    )}\n                  />\n                </div>\n              )}\n              <div id={menuId} role=\"menu\" className=\"min-h-0 overflow-y-auto\">\n                {multiSelect &&\n                  showSelectAll &&\n                  visibleSelectableValues.length > 0 && (\n                    <>\n                      <div className=\"p-2\" data-slot=\"dropdown-select-all\">\n                        <DropdownItem\n                          checked={allVisibleSelected}\n                          indeterminate={\n                            !allVisibleSelected && someVisibleSelected\n                          }\n                          onClick={handleSelectAll}\n                        >\n                          {selectAllLabel}\n                        </DropdownItem>\n                      </div>\n                      <DropdownSeparator />\n                    </>\n                  )}\n                {searchable ? (\n                  hasSearchResults ? (\n                    filteredChildren\n                  ) : (\n                    <div\n                      className=\"text-muted-foreground px-3 py-4 text-center text-sm\"\n                      data-slot=\"dropdown-empty\"\n                    >\n                      {searchEmptyState}\n                    </div>\n                  )\n                ) : (\n                  children\n                )}\n              </div>\n            </div>,\n            document.body\n          )}\n      </div>\n    </DropdownContext.Provider>\n  );\n}\n\nDropdown.displayName = 'Dropdown';\n\n// ============================================================================\n// Dropdown Header Component\n// ============================================================================\n\nexport interface DropdownHeaderProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title'\n> {\n  /** Avatar element or image */\n  avatar?: React.ReactNode;\n  /** Primary text (e.g., user name) */\n  title: React.ReactNode;\n  /** Secondary text (e.g., email) */\n  subtitle?: React.ReactNode;\n}\n\n/**\n * A header section for dropdown menus, typically used for user info.\n *\n * @example\n * ```tsx\n * <DropdownHeader\n *   avatar={<Avatar name=\"John Doe\" />}\n *   title=\"John Doe\"\n *   subtitle=\"john@example.com\"\n * />\n * ```\n */\nconst DropdownHeader = React.forwardRef<HTMLDivElement, DropdownHeaderProps>(\n  ({ className, avatar, title, subtitle, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dropdown-header\"\n        className={cn(\n          'border-b border-neutral-200 p-4 dark:border-neutral-700',\n          className\n        )}\n        {...props}\n      >\n        <div\n          className=\"flex items-center gap-3\"\n          data-slot=\"dropdown-header-row\"\n        >\n          {avatar}\n          <div className=\"min-w-0 flex-1\">\n            <p\n              className=\"truncate text-sm font-semibold text-neutral-900 dark:text-white\"\n              data-slot=\"dropdown-header-title\"\n            >\n              {title}\n            </p>\n            {subtitle && (\n              <p\n                className=\"text-muted-foreground truncate text-xs\"\n                data-slot=\"dropdown-header-subtitle\"\n              >\n                {subtitle}\n              </p>\n            )}\n          </div>\n        </div>\n        {children}\n      </div>\n    );\n  }\n);\n\nDropdownHeader.displayName = 'DropdownHeader';\n\n// ============================================================================\n// Dropdown Content Component\n// ============================================================================\n\nexport type DropdownContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A container for dropdown menu items with proper padding.\n */\nconst DropdownContent = React.forwardRef<HTMLDivElement, DropdownContentProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dropdown-content\"\n        className={cn('p-2', className)}\n        {...props}\n      />\n    );\n  }\n);\n\nDropdownContent.displayName = 'DropdownContent';\n\n// ============================================================================\n// Dropdown Item Component\n// ============================================================================\n\nexport interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n  /** Danger variant for destructive actions */\n  variant?: 'default' | 'danger';\n  /** Optional text used when filtering searchable dropdown items */\n  searchText?: string;\n  /** Checked state for multi-select items */\n  checked?: boolean;\n  /** Indeterminate state for multi-select items */\n  indeterminate?: boolean;\n  /** Callback fired when a multi-select item changes */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nfunction DropdownItemCheckbox({\n  checked,\n  indeterminate = false,\n}: {\n  checked: boolean;\n  indeterminate?: boolean;\n}) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"dropdown-checkbox\"\n      className={cn(\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded border-2 transition-colors duration-150',\n        checked || indeterminate\n          ? 'border-primary-500 bg-primary-800 text-white'\n          : 'border-input bg-background text-transparent'\n      )}\n    >\n      {indeterminate ? (\n        <svg\n          aria-hidden=\"true\"\n          className=\"h-3 w-3\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M4 8h8\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      ) : (\n        <svg\n          aria-hidden=\"true\"\n          className=\"h-3 w-3\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n        >\n          <path\n            d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </span>\n  );\n}\n\n/**\n * An item within a Dropdown menu.\n */\nconst DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(\n  (\n    {\n      className,\n      icon,\n      variant = 'default',\n      children,\n      searchText,\n      checked,\n      indeterminate = false,\n      onCheckedChange,\n      onClick,\n      value,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const dropdownContext = React.useContext(DropdownContext);\n    const itemValue = typeof value === 'string' ? value : undefined;\n    const contextSelectedValues = dropdownContext?.selectedValues ?? [];\n    const isMultiSelectItem =\n      (dropdownContext?.multiSelect === true && itemValue !== undefined) ||\n      checked !== undefined ||\n      indeterminate;\n    const isChecked =\n      checked ??\n      (isMultiSelectItem\n        ? itemValue !== undefined && contextSelectedValues.includes(itemValue)\n        : false);\n\n    const handleClick = React.useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (\n          dropdownContext &&\n          isMultiSelectItem &&\n          itemValue !== undefined &&\n          !disabled\n        ) {\n          dropdownContext.toggleSelectedValue(itemValue);\n          onCheckedChange?.(!isChecked);\n        }\n\n        onClick?.(event);\n      },\n      [\n        disabled,\n        dropdownContext,\n        isChecked,\n        isMultiSelectItem,\n        itemValue,\n        onCheckedChange,\n        onClick,\n      ]\n    );\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role={isMultiSelectItem ? 'menuitemcheckbox' : 'menuitem'}\n        aria-checked={\n          isMultiSelectItem ? (indeterminate ? 'mixed' : isChecked) : undefined\n        }\n        disabled={disabled}\n        data-slot=\"dropdown-item\"\n        className={cn(\n          'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm',\n          'transition-colors duration-150',\n          'focus:outline-none',\n          variant === 'default' && [\n            'text-neutral-700 dark:text-neutral-300',\n            'hover:bg-neutral-100 dark:hover:bg-neutral-700',\n            'focus:bg-neutral-100 dark:focus:bg-neutral-700',\n          ],\n          variant === 'danger' && [\n            'text-red-600 dark:text-red-400',\n            'hover:bg-red-50 dark:hover:bg-red-900/20',\n            'focus:bg-red-50 dark:focus:bg-red-900/20',\n          ],\n          className\n        )}\n        data-search-text={searchText}\n        onClick={handleClick}\n        value={value}\n        {...props}\n      >\n        {isMultiSelectItem && (\n          <DropdownItemCheckbox\n            checked={isChecked}\n            indeterminate={indeterminate}\n          />\n        )}\n        {icon && (\n          <span className=\"h-4 w-4 shrink-0\" data-slot=\"dropdown-item-icon\">\n            {icon}\n          </span>\n        )}\n        <span className=\"font-medium\" data-slot=\"dropdown-item-label\">\n          {children}\n        </span>\n      </button>\n    );\n  }\n);\n\nDropdownItem.displayName = 'DropdownItem';\n\n// ============================================================================\n// Dropdown Separator Component\n// ============================================================================\n\n/**\n * A separator between dropdown items.\n */\nfunction DropdownSeparator({ className }: { className?: string }) {\n  return (\n    <hr\n      data-slot=\"dropdown-separator\"\n      className={cn(\n        'border-t border-neutral-200 dark:border-neutral-700',\n        className\n      )}\n    />\n  );\n}\n\nDropdownSeparator.displayName = 'DropdownSeparator';\n\n// ============================================================================\n// Dropdown Label Component\n// ============================================================================\n\n/**\n * A label/header for a group of dropdown items.\n */\nfunction DropdownLabel({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"dropdown-label\"\n      className={cn(\n        'px-3 py-1.5 text-xs font-semibold tracking-wider uppercase',\n        'text-muted-foreground',\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDropdownLabel.displayName = 'DropdownLabel';\n\nexport {\n  Dropdown,\n  DropdownHeader,\n  DropdownContent,\n  DropdownItem,\n  DropdownSeparator,\n  DropdownLabel,\n};\n"]}

package/dist/chunk-ZAIEQWRA.js

@@ -0,0 +1,207 @@
+import { inputVariants } from './chunk-PVUDXJAI.js';
+import { useClickOutside } from './chunk-62ZOA6PX.js';
+import { useAnchoredPosition } from './chunk-QA6ZDHFP.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Autocomplete({
+  items,
+  onSelect,
+  getItemKey,
+  renderItem,
+  filter,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder,
+  emptyMessage,
+  createLabel,
+  onCreate,
+  minQueryLength = 1,
+  clearOnSelect = true,
+  disabled,
+  size,
+  className,
+  inputClassName,
+  inputRef,
+  inputProps,
+  "aria-label": ariaLabel
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const query = isControlled ? controlledValue : uncontrolledValue;
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const containerRef = React.useRef(null);
+  const listId = React.useId();
+  const meetsMinLength = query.length >= minQueryLength;
+  const filteredItems = React.useMemo(() => {
+    if (!filter) return items;
+    return items.filter((item) => filter(item, query));
+  }, [items, filter, query]);
+  const showCreate = Boolean(onCreate && createLabel && query.length > 0);
+  const rows = React.useMemo(() => {
+    const itemRows = filteredItems.map((item) => ({
+      kind: "item",
+      item,
+      key: getItemKey(item)
+    }));
+    if (showCreate) {
+      itemRows.push({ kind: "create", key: "__create__" });
+    }
+    return itemRows;
+  }, [filteredItems, showCreate, getItemKey]);
+  const hasContent = rows.length > 0 || meetsMinLength && emptyMessage != null;
+  const isOpen = open && meetsMinLength && hasContent;
+  const { anchorRef, floatingRef, style } = useAnchoredPosition({ open: isOpen, matchWidth: true, maxHeight: 300 });
+  const outsideRefs = React.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  useClickOutside(outsideRefs, () => setOpen(false), open);
+  const setQuery = React.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  React.useEffect(() => {
+    if (!isOpen) setActiveIndex(-1);
+  }, [isOpen]);
+  const commitRow = (row) => {
+    if (row.kind === "item") {
+      onSelect(row.item);
+    } else {
+      onCreate?.(query);
+    }
+    setOpen(false);
+    setActiveIndex(-1);
+    if (clearOnSelect) setQuery("");
+  };
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+    setOpen(true);
+    setActiveIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((i) => rows.length === 0 ? -1 : (i + 1) % rows.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) return;
+      setActiveIndex(
+        (i) => rows.length === 0 ? -1 : (i - 1 + rows.length) % rows.length
+      );
+    } else if (e.key === "Enter") {
+      if (isOpen && activeIndex >= 0 && activeIndex < rows.length) {
+        e.preventDefault();
+        commitRow(rows[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setActiveIndex(-1);
+    }
+  };
+  const activeId = isOpen && activeIndex >= 0 && activeIndex < rows.length ? `${listId}-opt-${rows[activeIndex].key}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
+      "data-slot": "autocomplete",
+      className: cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": activeId,
+            "aria-label": ariaLabel,
+            autoComplete: "off",
+            "data-slot": "autocomplete-input",
+            value: query,
+            placeholder,
+            disabled,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onFocus: () => {
+              if (meetsMinLength) setOpen(true);
+            },
+            className: cn(inputVariants({ size }), inputClassName),
+            ...inputProps
+          }
+        ),
+        isOpen && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              id: listId,
+              role: "listbox",
+              "data-slot": "autocomplete-list",
+              className: cn(
+                "border-border overflow-auto rounded-md border",
+                "bg-card text-card-foreground shadow-lg"
+              ),
+              children: rows.length === 0 ? emptyMessage != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "autocomplete-empty",
+                  className: "text-muted-foreground px-4 py-3 text-sm",
+                  children: emptyMessage
+                }
+              ) : rows.map((row, index) => {
+                const isActive = index === activeIndex;
+                const optionId = `${listId}-opt-${row.key}`;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    id: optionId,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isActive,
+                    "data-slot": row.kind === "create" ? "autocomplete-create" : "autocomplete-option",
+                    onMouseEnter: () => setActiveIndex(index),
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => commitRow(row),
+                    className: cn(
+                      "w-full px-4 py-3 text-left text-sm transition-colors",
+                      "border-border border-b last:border-b-0",
+                      "focus:outline-none",
+                      isActive ? "bg-muted text-foreground" : "hover:bg-muted",
+                      row.kind === "create" && "text-primary-800 flex items-center gap-2 font-medium"
+                    ),
+                    children: row.kind === "create" ? createLabel(query) : renderItem(row.item)
+                  },
+                  row.key
+                );
+              })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+Autocomplete.displayName = "Autocomplete";
+
+export { Autocomplete };
+//# sourceMappingURL=chunk-ZAIEQWRA.js.map
+//# sourceMappingURL=chunk-ZAIEQWRA.js.map

package/dist/chunk-ZAIEQWRA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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","file":"chunk-ZAIEQWRA.js","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useAnchoredPosition } from '../../hooks/useAnchoredPosition';\nimport { inputVariants } from '../Input';\n\nexport interface AutocompleteProps<T> extends Pick<\n  VariantProps<typeof inputVariants>,\n  'size'\n> {\n  /** Candidate items to search through. */\n  items: T[];\n  /** Called when the user picks an item. */\n  onSelect: (item: T) => void;\n  /** Returns a stable key for an item (used for React keys & option ids). */\n  getItemKey: (item: T) => string;\n  /** Renders the visible content of a result row. */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * Predicate used to filter `items` by the current query. When omitted, all\n   * `items` are shown as-is (the caller is responsible for filtering).\n   */\n  filter?: (item: T, query: string) => boolean;\n  /** Controlled query value. */\n  value?: string;\n  /** Default query value (uncontrolled). */\n  defaultValue?: string;\n  /** Called whenever the query changes. */\n  onValueChange?: (query: string) => void;\n  /** Placeholder text for the search input. */\n  placeholder?: string;\n  /** Content shown when there are no matching items. */\n  emptyMessage?: React.ReactNode;\n  /**\n   * Renders the label of a \"create new\" action appended to the results. When\n   * provided together with `onCreate`, the action row is shown.\n   */\n  createLabel?: (query: string) => React.ReactNode;\n  /** Called when the \"create new\" action is chosen. Receives the query. */\n  onCreate?: (query: string) => void;\n  /** Minimum query length before results open. Defaults to 1. */\n  minQueryLength?: number;\n  /** Clear the query after a selection. Defaults to true. */\n  clearOnSelect?: boolean;\n  /** Disable the input. */\n  disabled?: boolean;\n  /** Accessible label for the combobox input. */\n  'aria-label'?: string;\n  /** Class applied to the outer wrapper. */\n  className?: string;\n  /** Class applied to the input element. */\n  inputClassName?: string;\n  /** Forwarded ref to the underlying input. */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /** Additional props forwarded to the input element. */\n  inputProps?: Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'size'\n    | 'placeholder'\n    | 'disabled'\n    | 'aria-label'\n  >;\n}\n\ntype Row<T> =\n  | { kind: 'item'; item: T; key: string }\n  | { kind: 'create'; key: string };\n\n/**\n * A data-agnostic, presentational combobox. It renders a search input with a\n * filterable results popover and an optional \"create new\" action. All data and\n * side effects are supplied via props/callbacks so it can be wired to any store.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   items={employees}\n *   getItemKey={(e) => e.id}\n *   filter={(e, q) => e.name.toLowerCase().includes(q.toLowerCase())}\n *   renderItem={(e) => <span>{e.name}</span>}\n *   onSelect={handleSelect}\n *   placeholder=\"Search employees…\"\n * />\n * ```\n */\nfunction Autocomplete<T>({\n  items,\n  onSelect,\n  getItemKey,\n  renderItem,\n  filter,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  placeholder,\n  emptyMessage,\n  createLabel,\n  onCreate,\n  minQueryLength = 1,\n  clearOnSelect = true,\n  disabled,\n  size,\n  className,\n  inputClassName,\n  inputRef,\n  inputProps,\n  'aria-label': ariaLabel,\n}: AutocompleteProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] =\n    React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const query = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const listId = React.useId();\n\n  const meetsMinLength = query.length >= minQueryLength;\n\n  const filteredItems = React.useMemo(() => {\n    if (!filter) return items;\n    return items.filter((item) => filter(item, query));\n  }, [items, filter, query]);\n\n  const showCreate = Boolean(onCreate && createLabel && query.length > 0);\n\n  const rows = React.useMemo<Row<T>[]>(() => {\n    const itemRows: Row<T>[] = filteredItems.map((item) => ({\n      kind: 'item',\n      item,\n      key: getItemKey(item),\n    }));\n    if (showCreate) {\n      itemRows.push({ kind: 'create', key: '__create__' });\n    }\n    return itemRows;\n  }, [filteredItems, showCreate, getItemKey]);\n\n  const hasContent =\n    rows.length > 0 || (meetsMinLength && emptyMessage != null);\n  const isOpen = open && meetsMinLength && hasContent;\n\n  // Portal + fixed positioning so the listbox escapes overflow-hidden\n  // ancestors (cards, dialogs, scroll containers, …).\n  const { anchorRef, floatingRef, style } = useAnchoredPosition<\n    HTMLDivElement,\n    HTMLDivElement\n  >({ open: isOpen, matchWidth: true, maxHeight: 300 });\n\n  const outsideRefs = React.useMemo(\n    () => [containerRef, floatingRef],\n    [floatingRef]\n  );\n  useClickOutside(outsideRefs, () => setOpen(false), open);\n\n  const setQuery = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) setActiveIndex(-1);\n  }, [isOpen]);\n\n  const commitRow = (row: Row<T>) => {\n    if (row.kind === 'item') {\n      onSelect(row.item);\n    } else {\n      onCreate?.(query);\n    }\n    setOpen(false);\n    setActiveIndex(-1);\n    if (clearOnSelect) setQuery('');\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(e.target.value);\n    setOpen(true);\n    setActiveIndex(-1);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (!isOpen) {\n        setOpen(true);\n        return;\n      }\n      setActiveIndex((i) => (rows.length === 0 ? -1 : (i + 1) % rows.length));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (!isOpen) return;\n      setActiveIndex((i) =>\n        rows.length === 0 ? -1 : (i - 1 + rows.length) % rows.length\n      );\n    } else if (e.key === 'Enter') {\n      if (isOpen && activeIndex >= 0 && activeIndex < rows.length) {\n        e.preventDefault();\n        commitRow(rows[activeIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      setOpen(false);\n      setActiveIndex(-1);\n    }\n  };\n\n  const activeId =\n    isOpen && activeIndex >= 0 && activeIndex < rows.length\n      ? `${listId}-opt-${rows[activeIndex].key}`\n      : undefined;\n\n  return (\n    <div\n      ref={(node) => {\n        containerRef.current = node;\n        anchorRef.current = node;\n      }}\n      data-slot=\"autocomplete\"\n      className={cn('relative', className)}\n    >\n      <input\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded={isOpen}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeId}\n        aria-label={ariaLabel}\n        autoComplete=\"off\"\n        data-slot=\"autocomplete-input\"\n        value={query}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onFocus={() => {\n          if (meetsMinLength) setOpen(true);\n        }}\n        className={cn(inputVariants({ size }), inputClassName)}\n        {...inputProps}\n      />\n\n      {isOpen &&\n        createPortal(\n          <div\n            ref={floatingRef}\n            style={style}\n            id={listId}\n            role=\"listbox\"\n            data-slot=\"autocomplete-list\"\n            className={cn(\n              'border-border overflow-auto rounded-md border',\n              'bg-card text-card-foreground shadow-lg'\n            )}\n          >\n            {rows.length === 0\n              ? emptyMessage != null && (\n                  <div\n                    data-slot=\"autocomplete-empty\"\n                    className=\"text-muted-foreground px-4 py-3 text-sm\"\n                  >\n                    {emptyMessage}\n                  </div>\n                )\n              : rows.map((row, index) => {\n                  const isActive = index === activeIndex;\n                  const optionId = `${listId}-opt-${row.key}`;\n                  return (\n                    <button\n                      key={row.key}\n                      id={optionId}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-slot={\n                        row.kind === 'create'\n                          ? 'autocomplete-create'\n                          : 'autocomplete-option'\n                      }\n                      onMouseEnter={() => setActiveIndex(index)}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onClick={() => commitRow(row)}\n                      className={cn(\n                        'w-full px-4 py-3 text-left text-sm transition-colors',\n                        'border-border border-b last:border-b-0',\n                        'focus:outline-none',\n                        isActive\n                          ? 'bg-muted text-foreground'\n                          : 'hover:bg-muted',\n                        row.kind === 'create' &&\n                          'text-primary-800 flex items-center gap-2 font-medium'\n                      )}\n                    >\n                      {row.kind === 'create'\n                        ? createLabel!(query)\n                        : renderItem(row.item)}\n                    </button>\n                  );\n                })}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nAutocomplete.displayName = 'Autocomplete';\n\nexport { Autocomplete };\n"]}