@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/core/Select.js

@@ -0,0 +1,857 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, typeof as _typeof, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useRef, useImperativeHandle, useId, useMemo, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { ChevronDown, X, Check, Search, Plus } from 'lucide-react';
+
+var _excluded = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
+/**
+ * Enhanced Select component (debounce removed)
+ * - Supports single and multi select
+ * - Searchable with immediate onSearch calls (no debounce)
+ * - Creatable (add option) when no match
+ * - Select All / Deselect All for multiSelect
+ * - Clear button
+ * - Grouped options with optional collapsing
+ * - ARIA & keyboard accessibility
+ * - Custom render per option via onMenuItemRender
+ * - Max tag count with overflow indicator
+ * - Auto-flip dropdown if not enough space below; use above instead
+ * - Adjusts dropdown max-height to available space
+ */
+var isPlainObject = function isPlainObject(v) {
+  return v !== null && _typeof(v) === "object";
+};
+/**
+ * Normalize the `options` prop for `grouped` mode into
+ * `[{ label, options: [...] }]`. Accepts, in any mix:
+ *  - group objects: `{ label, options: [{ value, label }] }`
+ *  - flat options carrying a `group` key: `{ value, label, group }` — bucketed
+ *    by `group` in first-seen order (no `group` → an unlabelled bucket)
+ * Malformed entries (null, primitives, `{ label, options: <not an array> }`
+ * without a `value`) are skipped instead of throwing; `malformed` reports
+ * whether anything was dropped so the caller can warn once.
+ */
+var normalizeGroups = function normalizeGroups(options) {
+  var groups = [];
+  var malformed = !Array.isArray(options);
+  if (malformed) return {
+    groups: groups,
+    malformed: malformed
+  };
+  var buckets = new Map();
+  var bucketFor = function bucketFor(key) {
+    if (!buckets.has(key)) {
+      var g = {
+        label: key !== null && key !== void 0 ? key : undefined,
+        options: [],
+        _ungrouped: key == null
+      };
+      buckets.set(key, g);
+      groups.push(g);
+    }
+    return buckets.get(key);
+  };
+  options.forEach(function (item) {
+    if (!isPlainObject(item)) {
+      malformed = true;
+      return;
+    }
+    if (Array.isArray(item.options)) {
+      var valid = item.options.filter(isPlainObject);
+      if (valid.length !== item.options.length) malformed = true;
+      groups.push(_objectSpread2(_objectSpread2({}, item), {}, {
+        options: valid
+      }));
+      return;
+    }
+    if ("value" in item) {
+      var _item$group;
+      bucketFor((_item$group = item.group) !== null && _item$group !== void 0 ? _item$group : null).options.push(item);
+      return;
+    }
+    malformed = true;
+  });
+  return {
+    groups: groups,
+    malformed: malformed
+  };
+};
+var flattenGroups = function flattenGroups() {
+  var groups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  // groups: [{ label, options: [{value,label,disabled}] }] (already normalized)
+  return groups.reduce(function (acc, g) {
+    var groupLabel = g.label;
+    g.options.forEach(function (opt) {
+      return acc.push(_objectSpread2(_objectSpread2({}, opt), {}, {
+        _group: groupLabel
+      }));
+    });
+    return acc;
+  }, []);
+};
+var highlight = function highlight() {
+  var label = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var term = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  if (!term) return label;
+  var idx = label.toLowerCase().indexOf(term.toLowerCase());
+  if (idx === -1) return label;
+  return jsxs(Fragment, {
+    children: [label.slice(0, idx), jsx("mark", {
+      className: "bg-yellow-100 font-medium",
+      children: label.slice(idx, idx + term.length)
+    }), label.slice(idx + term.length)]
+  });
+};
+var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "Select an option..." : _ref$placeholder,
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    _ref$multiSelect = _ref.multiSelect,
+    multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+    _ref$grouped = _ref.grouped,
+    grouped = _ref$grouped === void 0 ? false : _ref$grouped,
+    onMenuItemRender = _ref.onMenuItemRender,
+    className = _ref.className,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$creatable = _ref.creatable,
+    creatable = _ref$creatable === void 0 ? false : _ref$creatable,
+    onCreateOption = _ref.onCreateOption,
+    onSearch = _ref.onSearch,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$selectAllOption = _ref.selectAllOption,
+    selectAllOption = _ref$selectAllOption === void 0 ? true : _ref$selectAllOption,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
+    _ref$maxTagCount = _ref.maxTagCount,
+    maxTagCount = _ref$maxTagCount === void 0 ? 3 : _ref$maxTagCount,
+    renderGroupLabel = _ref.renderGroupLabel,
+    name = _ref.name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchTerm = _useState4[0],
+    setSearchTerm = _useState4[1];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusedIndex = _useState6[0],
+    setFocusedIndex = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    collapsedGroups = _useState8[0],
+    setCollapsedGroups = _useState8[1];
+  var selectRef = useRef(null);
+  var triggerRef = useRef(null);
+  var searchRef = useRef(null);
+  var menuRef = useRef(null);
+  var listboxRef = useRef(null);
+  // New: dropdown placement & max height
+  var _useState9 = useState("bottom"),
+    _useState0 = _slicedToArray(_useState9, 2),
+    placement = _useState0[0],
+    setPlacement = _useState0[1]; // "bottom" | "top"
+  var _useState1 = useState(null),
+    _useState10 = _slicedToArray(_useState1, 2),
+    menuMaxHeight = _useState10[0],
+    setMenuMaxHeight = _useState10[1]; // px or null
+  // Fixed-position coordinates for the portaled menu (anchored to the trigger).
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuCoords = _useState12[0],
+    setMenuCoords = _useState12[1]; // { left, top, width } in viewport px
+  useImperativeHandle(forwardedRef, function () {
+    return selectRef.current;
+  }, []);
+  // Stable ids wiring label / helper / error / listbox to the trigger.
+  // A consumer `id` (spread onto the trigger via ...props) wins.
+  var reactId = useId();
+  var baseId = props.id || "select-".concat(reactId);
+  var labelId = "".concat(baseId, "-label");
+  var valueId = "".concat(baseId, "-value");
+  var listboxId = "".concat(baseId, "-listbox");
+  var errorId = "".concat(baseId, "-error");
+  var helperId = "".concat(baseId, "-helper");
+  var describedBy = error ? errorId : helperText ? helperId : undefined;
+  // grouped mode: tolerate flat options with a `group` key and malformed
+  // input rather than crashing the page.
+  var _useMemo = useMemo(function () {
+      return grouped ? normalizeGroups(options) : {
+        groups: [],
+        malformed: false
+      };
+    }, [options, grouped]),
+    groupedOptions = _useMemo.groups,
+    groupedMalformed = _useMemo.malformed;
+  useEffect(function () {
+    if (groupedMalformed) {
+      console.warn("[Select] `grouped` expects `[{ label, options: [...] }]` or flat options with a `group` key; malformed entries were ignored.");
+    }
+  }, [groupedMalformed]);
+  // normalize options to flat list for keyboard nav, but keep groups for UI
+  var flatOptions = useMemo(function () {
+    if (grouped) return flattenGroups(groupedOptions);
+    return (Array.isArray(options) ? options : []).filter(isPlainObject).map(function (opt) {
+      return _objectSpread2({}, opt);
+    });
+  }, [options, grouped, groupedOptions]);
+  var selectedValues = useMemo(function () {
+    return multiSelect ? Array.isArray(value) ? value : [] : value;
+  }, [multiSelect, value]);
+  var selectedOptions = useMemo(function () {
+    if (multiSelect) return flatOptions.filter(function (o) {
+      return selectedValues.includes(o.value);
+    });
+    return flatOptions.find(function (o) {
+      return o.value === selectedValues;
+    }) ? [flatOptions.find(function (o) {
+      return o.value === selectedValues;
+    })] : [];
+  }, [flatOptions, selectedValues, multiSelect]);
+  // Call onSearch immediately on every change (debounce removed)
+  var onSearchRef = useLatestRef(onSearch);
+  useEffect(function () {
+    var _onSearchRef$current;
+    (_onSearchRef$current = onSearchRef.current) === null || _onSearchRef$current === void 0 || _onSearchRef$current.call(onSearchRef, searchTerm);
+  }, [searchTerm, onSearchRef]);
+  // compute filtered structure for grouped or flat
+  var filtered = useMemo(function () {
+    if (!searchable || !searchTerm) {
+      return grouped ? groupedOptions : flatOptions;
+    }
+    var term = searchTerm.toLowerCase();
+    var matches = function matches(o) {
+      var _o$label;
+      return String((_o$label = o.label) !== null && _o$label !== void 0 ? _o$label : "").toLowerCase().includes(term);
+    };
+    if (grouped) {
+      return groupedOptions.map(function (g) {
+        return _objectSpread2(_objectSpread2({}, g), {}, {
+          options: g.options.filter(matches)
+        });
+      }).filter(function (g) {
+        return g.options.length > 0;
+      });
+    }
+    return flatOptions.filter(matches);
+  }, [searchable, searchTerm, grouped, groupedOptions, flatOptions]);
+  // The options the keyboard walks: exactly the rows on screen (search
+  // filter applied, collapsed groups skipped), in render order. Index `i`
+  // here is option row `optionId(i)` in the DOM.
+  var navOptions = useMemo(function () {
+    if (!grouped) return filtered;
+    return filtered.reduce(function (acc, g) {
+      if (!collapsedGroups[g.label]) acc.push.apply(acc, _toConsumableArray(g.options));
+      return acc;
+    }, []);
+  }, [grouped, filtered, collapsedGroups]);
+  var optionId = function optionId(index) {
+    return "".concat(baseId, "-option-").concat(index);
+  };
+  var activeDescendant = isOpen && focusedIndex >= 0 && focusedIndex < navOptions.length ? optionId(focusedIndex) : undefined;
+  // A new search term or a collapsed group changes what the rows are, so
+  // the active row no longer means the same option: start over.
+  useEffect(function () {
+    setFocusedIndex(-1);
+  }, [searchTerm, collapsedGroups]);
+  // Keep the active option visible while arrowing through a long list.
+  useEffect(function () {
+    var _el$scrollIntoView;
+    if (!activeDescendant || typeof document === "undefined") return;
+    var el = document.getElementById(activeDescendant);
+    el === null || el === void 0 || (_el$scrollIntoView = el.scrollIntoView) === null || _el$scrollIntoView === void 0 || _el$scrollIntoView.call(el, {
+      block: "nearest"
+    });
+  }, [activeDescendant]);
+  // ===== Placement/space calculation =====
+  var calculatePlacement = function calculatePlacement() {
+    var MARGIN = 8; // px margin from viewport edges
+    var DEFAULT_MENU_MAX = 240; // fallback max (approx 15rem)
+    if (!selectRef.current) return;
+    var rect = selectRef.current.getBoundingClientRect();
+    var viewportH = window.innerHeight;
+    var spaceBelow = viewportH - rect.bottom - MARGIN;
+    var spaceAbove = rect.top - MARGIN;
+    // desired approximate menu height (we can try to measure menu if already rendered)
+    var desiredMenuHeight = DEFAULT_MENU_MAX;
+    if (menuRef.current) {
+      // when menu exists, use its scrollHeight as desired
+      desiredMenuHeight = Math.min(menuRef.current.scrollHeight, DEFAULT_MENU_MAX);
+    }
+    // decide placement: prefer bottom unless not enough space and top has more space
+    var nextPlacement;
+    var nextMaxHeight;
+    if (spaceBelow >= desiredMenuHeight || spaceBelow >= spaceAbove) {
+      nextPlacement = "bottom";
+      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceBelow));
+    } else {
+      nextPlacement = "top";
+      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceAbove));
+    }
+    setPlacement(nextPlacement);
+    setMenuMaxHeight(nextMaxHeight);
+    // The menu is portaled to document.body with position:fixed, so it floats
+    // above any ancestor with overflow:hidden|auto|scroll. Anchor it to the
+    // trigger via the viewport-relative rect (no scroll offset for fixed).
+    // maxHeight here mirrors the inline style applied to the menu (+10 fudge).
+    var renderedMaxHeight = nextMaxHeight + 10;
+    var next = {
+      left: rect.left,
+      width: rect.width
+    };
+    if (nextPlacement === "bottom") {
+      next.top = rect.bottom + 4; // ~mt-1
+    } else {
+      // place above the trigger; bottom of menu sits just above the trigger top
+      next.top = Math.max(MARGIN, rect.top - 4 - renderedMaxHeight);
+    }
+    setMenuCoords(next);
+  };
+  // Anchor the portaled menu BEFORE the browser paints, so it never flashes
+  // at (0,0). The menu is already in the DOM (createPortal runs during render),
+  // we just need its fixed coords set synchronously.
+  useLayoutEffect(function () {
+    if (isOpen) calculatePlacement();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, filtered.length]);
+  useEffect(function () {
+    if (!isOpen) {
+      // drop stale coords so the next open re-anchors from scratch
+      setMenuCoords(null);
+      return;
+    }
+    // initial calc on open; wait a tick to allow DOM to render
+    var raf = requestAnimationFrame(function () {
+      var _searchRef$current, _listboxRef$current;
+      calculatePlacement();
+      // Move focus into the popup (WAI-ARIA collapsible listbox): the search
+      // box when searchable, otherwise the listbox itself. Both carry
+      // aria-activedescendant and the same key handling as the trigger.
+      var inMenu = menuRef.current && menuRef.current.contains(document.activeElement);
+      if (searchable) (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();else if (!inMenu) (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 || _listboxRef$current.focus();
+    });
+    // Reposition on resize/scroll while open (throttled by rAF). Use
+    // capture-phase scroll so we also catch any scrolling ancestor — the
+    // menu is portaled with position:fixed, so its coords must track the
+    // trigger as the page (or a scroll container) moves.
+    var rafId = null;
+    var onWindowChange = function onWindowChange() {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(function () {
+        return calculatePlacement();
+      });
+    };
+    window.addEventListener("resize", onWindowChange, {
+      passive: true
+    });
+    window.addEventListener("scroll", onWindowChange, {
+      passive: true,
+      capture: true
+    });
+    return function () {
+      cancelAnimationFrame(raf);
+      if (rafId) cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onWindowChange);
+      window.removeEventListener("scroll", onWindowChange, {
+        capture: true
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, searchable, filtered.length]);
+  // ===== handlers =====
+  // Close the popup. When focus is inside it (the portaled menu unmounts),
+  // hand focus back to the trigger so keyboard users are not dropped on
+  // <body>.
+  var closeMenu = function closeMenu() {
+    var _triggerRef$current;
+    var focusInMenu = typeof document !== "undefined" && menuRef.current && menuRef.current.contains(document.activeElement);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    if (focusInMenu) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
+  };
+  var handleSelect = function handleSelect(option) {
+    if (option.disabled) return;
+    if (multiSelect) {
+      var exists = selectedValues.includes(option.value);
+      var newValues = exists ? selectedValues.filter(function (v) {
+        return v !== option.value;
+      }) : [].concat(_toConsumableArray(selectedValues), [option.value]);
+      onChange === null || onChange === void 0 || onChange(newValues);
+      if (closeOnSelect) closeMenu();
+    } else {
+      onChange === null || onChange === void 0 || onChange(option.value);
+      closeMenu();
+    }
+  };
+  var handleClear = function handleClear(e) {
+    var _triggerRef$current2;
+    e.stopPropagation();
+    if (multiSelect) onChange === null || onChange === void 0 || onChange([]);else onChange === null || onChange === void 0 || onChange(null);
+    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+  };
+  var handleCreate = function handleCreate() {
+    if (!onCreateOption) return;
+    onCreateOption({
+      value: searchTerm,
+      setIsOpen: setIsOpen
+    });
+    setSearchTerm("");
+  };
+  var handleSelectAll = function handleSelectAll() {
+    if (!multiSelect) return;
+    var allVals = flatOptions.filter(function (o) {
+      return !o.disabled;
+    }).map(function (o) {
+      return o.value;
+    });
+    var allSelected = allVals.every(function (v) {
+      return selectedValues.includes(v);
+    });
+    onChange === null || onChange === void 0 || onChange(allSelected ? [] : allVals);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var _e$target;
+    if (!isOpen) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setIsOpen(true);
+        setTimeout(function () {
+          var _searchRef$current2;
+          return searchable ? (_searchRef$current2 = searchRef.current) === null || _searchRef$current2 === void 0 ? void 0 : _searchRef$current2.focus() : null;
+        }, 0);
+      }
+      return;
+    }
+    // Keyboard navigation walks the rows actually shown (search-filtered,
+    // collapsed groups skipped), so the active row is always visible.
+    var currentList = navOptions;
+    var last = currentList.length - 1;
+    var inTextBox = e.target === searchRef.current;
+    // A real button inside the listbox (group toggle) keeps its own
+    // Enter / Space activation.
+    if ((e.key === "Enter" || e.key === " ") && e.target !== e.currentTarget && ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === "BUTTON") {
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (last < 0) break;
+        setFocusedIndex(function (prev) {
+          return prev < last ? prev + 1 : 0;
+        });
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (last < 0) break;
+        setFocusedIndex(function (prev) {
+          return prev > 0 ? prev - 1 : last;
+        });
+        break;
+      case "Home":
+        // In the search box Home/End keep moving the caret.
+        if (inTextBox || last < 0) break;
+        e.preventDefault();
+        setFocusedIndex(0);
+        break;
+      case "End":
+        if (inTextBox || last < 0) break;
+        e.preventDefault();
+        setFocusedIndex(last);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (focusedIndex >= 0 && currentList[focusedIndex]) {
+          handleSelect(currentList[focusedIndex]);
+        } else if (inTextBox && creatable && searchTerm && onCreateOption) {
+          handleCreate();
+        }
+        break;
+      case " ":
+        // Space toggles the active option from the listbox (multi-select
+        // pattern); in the search box it types a space; on the trigger it
+        // keeps its native button behaviour.
+        if (e.target !== listboxRef.current) break;
+        e.preventDefault();
+        if (focusedIndex >= 0 && currentList[focusedIndex]) {
+          handleSelect(currentList[focusedIndex]);
+        }
+        break;
+      case "Escape":
+        closeMenu();
+        break;
+      case "Tab":
+        // Leaving the (portaled) popup: close it and continue the tab order
+        // from the trigger rather than from the end of <body>.
+        closeMenu();
+        break;
+    }
+  };
+  var handleClickOutside = function handleClickOutside(e) {
+    // The menu is portaled to document.body, so it lives OUTSIDE selectRef's
+    // DOM subtree. Treat clicks inside the portaled menu as "inside" too —
+    // otherwise selecting an option would close the menu before the option's
+    // own click handler runs.
+    var inTrigger = selectRef.current && selectRef.current.contains(e.target);
+    var inMenu = menuRef.current && menuRef.current.contains(e.target);
+    if (!inTrigger && !inMenu) {
+      setIsOpen(false);
+      setFocusedIndex(-1);
+    }
+  };
+  useEffect(function () {
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      return document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  var showClearButton = allowClear && !disabled && selectedOptions.length > 0;
+  var displayValue = function displayValue() {
+    var _selectedOptions$;
+    if (multiSelect) {
+      if (selectedOptions.length === 0) return placeholder;
+      if (selectedOptions.length <= maxTagCount) return jsx("div", {
+        className: "flex flex-wrap gap-1",
+        children: selectedOptions.map(function (opt) {
+          return jsxs("div", {
+            className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+            children: [jsx("span", {
+              className: "truncate max-w-[8rem]",
+              children: opt.label
+            }), jsx("div", {
+              "aria-label": "Remove ".concat(opt.label),
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                handleSelect(opt);
+              },
+              children: jsx(X, {
+                className: "h-3 w-3"
+              })
+            })]
+          }, opt.value);
+        })
+      });
+      // overflow indicator
+      var rest = selectedOptions.length - maxTagCount;
+      return jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [jsx("div", {
+          className: "flex flex-wrap gap-1",
+          children: selectedOptions.slice(0, maxTagCount).map(function (opt) {
+            return jsx("div", {
+              className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+              children: jsx("span", {
+                className: "truncate max-w-[6rem]",
+                children: opt.label
+              })
+            }, opt.value);
+          })
+        }), jsxs("div", {
+          className: "text-xs text-primary-500",
+          children: ["+", rest]
+        })]
+      });
+    }
+    return ((_selectedOptions$ = selectedOptions[0]) === null || _selectedOptions$ === void 0 ? void 0 : _selectedOptions$.label) || placeholder;
+  };
+  var renderGroupedOptions = function renderGroupedOptions() {
+    // Running index into `navOptions` (render order, collapsed skipped).
+    var navIndex = -1;
+    return jsx("div", {
+      className: "divide-y",
+      children: filtered.map(function (group, gi) {
+        var collapsed = !!collapsedGroups[group.label];
+        var groupOptionsId = "".concat(baseId, "-group-").concat(gi);
+        var groupName = typeof group.label === "string" ? group.label : "group ".concat(gi + 1);
+        return jsxs("div", {
+          role: group._ungrouped ? undefined : "group",
+          "aria-label": group._ungrouped ? undefined : groupName,
+          children: [!group._ungrouped && jsxs("div", {
+            className: "flex items-center justify-between px-3 py-2 text-sm font-medium",
+            children: [jsx("div", {
+              "aria-hidden": "true",
+              children: renderGroupLabel ? renderGroupLabel(group.label) : group.label
+            }), jsx("button", {
+              type: "button",
+              "aria-expanded": !collapsed,
+              "aria-controls": collapsed ? undefined : groupOptionsId,
+              "aria-label": "".concat(collapsed ? "Expand" : "Collapse", " ").concat(groupName),
+              className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+              onClick: function onClick() {
+                return setCollapsedGroups(function (prev) {
+                  return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, group.label, !prev[group.label]));
+                });
+              },
+              children: jsx(ChevronDown, {
+                "aria-hidden": "true",
+                className: cn("h-4 w-4 text-primary-400 transition-transform", {
+                  "rotate-180": collapsed
+                })
+              })
+            })]
+          }), !collapsed && jsx("div", {
+            className: "pl-2",
+            id: groupOptionsId,
+            children: group.options.map(function (option) {
+              navIndex += 1;
+              var index = navIndex;
+              return jsxs("div", {
+                id: optionId(index),
+                role: "option",
+                "aria-selected": multiSelect ? selectedValues.includes(option.value) : selectedValues === option.value,
+                "aria-disabled": option.disabled ? true : undefined,
+                onClick: function onClick() {
+                  return handleSelect(option);
+                },
+                className: cn("flex items-center px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer", {
+                  "opacity-50 cursor-not-allowed": option.disabled,
+                  "bg-primary-50 text-primary-600": focusedIndex === index
+                }),
+                children: [multiSelect && jsx("div", {
+                  className: "mr-2",
+                  children: selectedValues.includes(option.value) ? jsx(Check, {
+                    className: "h-4 w-4 text-primary-600"
+                  }) : jsx("div", {
+                    className: "h-4 w-4 rounded border border-gray-300"
+                  })
+                }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
+                  className: "ml-auto h-4 w-4 text-primary-600"
+                })]
+              }, option.value);
+            })
+          })]
+        }, group.label || gi);
+      })
+    });
+  };
+  var renderFlatOptions = function renderFlatOptions() {
+    return jsxs("div", {
+      children: [loading ? jsx("div", {
+        className: "px-3 py-2 text-sm",
+        children: "Loading..."
+      }) : Array.isArray(filtered) && filtered.length === 0 ? jsx("div", {
+        className: "px-3 py-2 text-sm text-primary-500",
+        children: "No options found"
+      }) : (grouped ? flattenGroups(filtered) : filtered).map(function (option, index) {
+        return jsxs("div", {
+          id: optionId(index),
+          role: "option",
+          "aria-selected": multiSelect ? selectedValues.includes(option.value) : selectedValues === option.value,
+          "aria-disabled": option.disabled ? true : undefined,
+          onClick: function onClick() {
+            return handleSelect(option);
+          },
+          className: cn("flex items-center px-3 py-2 text-sm hover:bg-gray-100 cursor-pointer", {
+            "opacity-50 cursor-not-allowed": option.disabled,
+            "bg-primary-50 text-primary-600": focusedIndex === index,
+            "bg-primary-100": multiSelect && selectedValues.includes(option.value)
+          }),
+          children: [multiSelect && jsx("div", {
+            className: "mr-2",
+            children: selectedValues.includes(option.value) ? jsx(Check, {
+              className: "h-4 w-4 text-primary-600"
+            }) : jsx("div", {
+              className: "h-4 w-4 rounded border border-gray-300"
+            })
+          }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
+            className: "ml-auto h-4 w-4 text-primary-600"
+          })]
+        }, option.value);
+      }), creatable && searchTerm && !loading && jsx("div", {
+        className: "border-t text-sm",
+        role: "presentation",
+        children: jsxs("button", {
+          type: "button",
+          onClick: handleCreate,
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100",
+          children: [jsx(Plus, {
+            className: "h-4 w-4",
+            "aria-hidden": "true"
+          }), "Add \"", searchTerm, "\""]
+        })
+      })]
+    });
+  };
+  return jsxs("div", {
+    className: "w-full",
+    children: [label && jsxs("label", {
+      id: labelId,
+      htmlFor: baseId,
+      className: "block text-sm font-medium mb-1",
+      children: [label, required && jsx("span", {
+        className: "text-error-500 ml-1",
+        children: "*"
+      })]
+    }), jsxs("div", {
+      ref: selectRef,
+      className: "relative",
+      children: [jsxs("button", _objectSpread2(_objectSpread2({
+        ref: triggerRef,
+        type: "button",
+        id: baseId,
+        "aria-haspopup": "listbox",
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? listboxId : undefined,
+        "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error ? true : undefined,
+        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
+          "border-error-500 focus:ring-error-500": error,
+          "text-primary-500": !selectedOptions.length,
+          "pr-14": showClearButton
+        }, className),
+        onClick: function onClick() {
+          if (!disabled) {
+            setIsOpen(function (prev) {
+              return !prev;
+            });
+            setTimeout(function () {
+              var _searchRef$current3;
+              return searchable ? (_searchRef$current3 = searchRef.current) === null || _searchRef$current3 === void 0 ? void 0 : _searchRef$current3.focus() : null;
+            }, 0);
+          }
+        },
+        onKeyDown: handleKeyDown,
+        disabled: disabled
+      }, props), {}, {
+        children: [jsx("span", {
+          className: "truncate flex-1 text-left",
+          id: valueId,
+          children: displayValue()
+        }), jsx(ChevronDown, {
+          "aria-hidden": "true",
+          className: cn("ml-2 h-4 w-4 shrink-0 text-primary-400 transition-transform", {
+            "rotate-180": isOpen
+          })
+        })]
+      })), showClearButton && jsx("button", {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": "Clear selection",
+        className: "absolute right-8 top-1/2 -translate-y-1/2 rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+        children: jsx(X, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), name && (multiSelect ?
+      // For multi-select, create a hidden input for each selected value
+      selectedValues.length > 0 ? selectedValues.map(function (val, idx) {
+        return jsx("input", {
+          type: "hidden",
+          name: name,
+          value: val !== null && val !== void 0 ? val : ""
+        }, "".concat(name, "-").concat(idx));
+      }) : jsx("input", {
+        type: "hidden",
+        name: name,
+        value: ""
+      }) : jsx("input", {
+        type: "hidden",
+        name: name,
+        value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
+      })), isOpen && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
+        ref: menuRef,
+        className: cn("fixed z-50 rounded-md border border-gray-300 bg-white shadow-lg"),
+        role: "dialog",
+        "data-placement": placement,
+        // Portaled to document.body with position:fixed so the menu
+        // escapes any ancestor overflow:hidden|auto|scroll. Coordinates
+        // are anchored to the trigger's viewport rect; width matches the
+        // trigger; maxHeight is driven by available space.
+        style: _objectSpread2({
+          left: menuCoords ? "".concat(menuCoords.left, "px") : undefined,
+          top: menuCoords ? "".concat(menuCoords.top, "px") : undefined,
+          width: menuCoords ? "".concat(menuCoords.width, "px") : undefined
+        }, menuMaxHeight ? {
+          maxHeight: "".concat(menuMaxHeight + 10, "px"),
+          overflow: "auto"
+        } : {}),
+        children: [searchable && jsx("div", {
+          className: "border-b border-gray-200 p-2",
+          children: jsxs("div", {
+            className: "relative",
+            children: [selectAllOption && multiSelect && jsx("div", {
+              className: " text-sm flex items-center gap-2 border-b absolute left-1 top-1/2 h-4 w-4 -translate-y-1/2",
+              children: function () {
+                var allSelected = selectedValues.length === flatOptions.filter(function (o) {
+                  return !o.disabled;
+                }).length;
+                return jsx("button", {
+                  type: "button",
+                  onClick: handleSelectAll,
+                  "aria-label": allSelected ? "Deselect all" : "Select all",
+                  "aria-pressed": allSelected,
+                  className: "text-sm rounded focus:outline-none focus:ring-2 focus:ring-primary-500",
+                  children: allSelected ? jsx(Check, {
+                    className: "h-4 w-4 text-primary-600",
+                    "aria-hidden": "true"
+                  }) : jsx("div", {
+                    className: "h-4 w-4 rounded border border-gray-300"
+                  })
+                });
+              }()
+            }), jsx("input", {
+              ref: searchRef,
+              type: "text",
+              className: cn("w-full rounded-md border-0 bg-transparent pl-8 pr-3 py-1 text-sm focus:outline-none focus:ring-0", {
+                "pl-2": !(selectAllOption && multiSelect)
+              }),
+              placeholder: "Search...",
+              value: searchTerm,
+              onChange: function onChange(e) {
+                return setSearchTerm(e.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              "aria-label": "Search options",
+              "aria-controls": listboxId,
+              "aria-activedescendant": activeDescendant,
+              "aria-autocomplete": "list"
+            }), jsx(Search, {
+              className: "absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-primary-400"
+            })]
+          })
+        }), jsx("div", {
+          ref: listboxRef,
+          className: "overflow-auto focus:outline-none",
+          role: "listbox",
+          id: listboxId,
+          tabIndex: -1,
+          "aria-labelledby": label ? labelId : undefined,
+          "aria-label": label ? undefined : "Options",
+          "aria-multiselectable": multiSelect,
+          "aria-activedescendant": activeDescendant,
+          onKeyDown: handleKeyDown,
+          children: grouped ? renderGroupedOptions() : renderFlatOptions()
+        })]
+      }), document.body)]
+    }), error ? jsx("p", {
+      id: errorId,
+      className: "mt-1 text-sm text-error-500",
+      children: error
+    }) : helperText ? jsx("p", {
+      id: helperId,
+      className: "mt-1 text-sm text-muted",
+      children: helperText
+    }) : null]
+  });
+});
+Select.displayName = "Select";
+
+export { Select as default };