framepexls-ui-lib 0.1.4

package/dist/ColumnSelector.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ColumnSelector_exports = {};
+__export(ColumnSelector_exports, {
+  default: () => ColumnSelector
+});
+module.exports = __toCommonJS(ColumnSelector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+function ColumnSelector({
+  open,
+  onToggleOpen,
+  items,
+  visible,
+  setVisible
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggleOpen((v) => !v);
+        },
+        className: "rounded-2xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+        children: "Columnas"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -6 },
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+        children: items.map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "label",
+          {
+            className: "flex cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm hover:bg-slate-50 dark:hover:bg-white/5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-slate-800 dark:text-slate-100", children: label }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: visible[key],
+                  onChange: (e) => setVisible(key, e.target.checked),
+                  className: "h-4 w-4 rounded border-slate-300"
+                }
+              )
+            ]
+          },
+          key
+        ))
+      }
+    ) })
+  ] });
+}

package/dist/ColumnSelector.mjs

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+function ColumnSelector({
+  open,
+  onToggleOpen,
+  items,
+  visible,
+  setVisible
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggleOpen((v) => !v);
+        },
+        className: "rounded-2xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+        children: "Columnas"
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -6 },
+        className: "absolute right-0 z-20 mt-2 w-64 overflow-hidden rounded-2xl border border-slate-200 bg-white p-1 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+        children: items.map(({ key, label }) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "flex cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 text-sm hover:bg-slate-50 dark:hover:bg-white/5",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-800 dark:text-slate-100", children: label }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: visible[key],
+                  onChange: (e) => setVisible(key, e.target.checked),
+                  className: "h-4 w-4 rounded border-slate-300"
+                }
+              )
+            ]
+          },
+          key
+        ))
+      }
+    ) })
+  ] });
+}
+export {
+  ColumnSelector as default
+};

package/dist/ComboSelect.d.mts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ComboOption = {
+    value: string;
+    label: string;
+    hint?: string;
+    sublabel?: string;
+    image?: string | null;
+    right?: React__default.ReactNode;
+    disabled?: boolean;
+};
+type ComboSection = {
+    key: string;
+    title: string;
+    options: ComboOption[];
+    rightHint?: React__default.ReactNode;
+};
+type ComboSelectProps = {
+    options?: ComboOption[];
+    sections?: ComboSection[];
+    value?: string | null;
+    onChange: (value: string | null, option?: ComboOption) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    allowClear?: boolean;
+    searchable?: boolean;
+    maxItems?: number;
+    className?: string;
+    noResultsText?: string;
+    renderOption?: (opt: ComboOption, active: boolean, selected: boolean) => React__default.ReactNode;
+    renderSectionHeader?: (sec: ComboSection, sticky: boolean) => React__default.ReactNode;
+    portalTarget?: HTMLElement | null;
+    closeOnSelect?: boolean;
+    keepFocusOnSelect?: boolean;
+    clearQueryOnSelect?: boolean;
+    renderTags?: React__default.ReactNode;
+    /** Si true, las filas pueden tener inputs/botones y el click de fondo dispara onChange */
+    interactiveOptions?: boolean;
+    /** 🔹 Nuevo: notifica cambios en el texto de búsqueda */
+    onQueryChange?: (q: string) => void;
+};
+declare function ComboSelect({ options, sections, value, onChange, placeholder, disabled, loading, allowClear, searchable, maxItems, className, noResultsText, renderOption, renderSectionHeader, portalTarget, closeOnSelect, keepFocusOnSelect, clearQueryOnSelect, renderTags, interactiveOptions, onQueryChange, }: ComboSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type ComboOption, type ComboSection, type ComboSelectProps, ComboSelect as default };

package/dist/ComboSelect.d.ts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ComboOption = {
+    value: string;
+    label: string;
+    hint?: string;
+    sublabel?: string;
+    image?: string | null;
+    right?: React__default.ReactNode;
+    disabled?: boolean;
+};
+type ComboSection = {
+    key: string;
+    title: string;
+    options: ComboOption[];
+    rightHint?: React__default.ReactNode;
+};
+type ComboSelectProps = {
+    options?: ComboOption[];
+    sections?: ComboSection[];
+    value?: string | null;
+    onChange: (value: string | null, option?: ComboOption) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    allowClear?: boolean;
+    searchable?: boolean;
+    maxItems?: number;
+    className?: string;
+    noResultsText?: string;
+    renderOption?: (opt: ComboOption, active: boolean, selected: boolean) => React__default.ReactNode;
+    renderSectionHeader?: (sec: ComboSection, sticky: boolean) => React__default.ReactNode;
+    portalTarget?: HTMLElement | null;
+    closeOnSelect?: boolean;
+    keepFocusOnSelect?: boolean;
+    clearQueryOnSelect?: boolean;
+    renderTags?: React__default.ReactNode;
+    /** Si true, las filas pueden tener inputs/botones y el click de fondo dispara onChange */
+    interactiveOptions?: boolean;
+    /** 🔹 Nuevo: notifica cambios en el texto de búsqueda */
+    onQueryChange?: (q: string) => void;
+};
+declare function ComboSelect({ options, sections, value, onChange, placeholder, disabled, loading, allowClear, searchable, maxItems, className, noResultsText, renderOption, renderSectionHeader, portalTarget, closeOnSelect, keepFocusOnSelect, clearQueryOnSelect, renderTags, interactiveOptions, onQueryChange, }: ComboSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type ComboOption, type ComboSection, type ComboSelectProps, ComboSelect as default };

package/dist/ComboSelect.js

@@ -0,0 +1,442 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ComboSelect_exports = {};
+__export(ComboSelect_exports, {
+  default: () => ComboSelect
+});
+module.exports = __toCommonJS(ComboSelect_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_AvatarSquare = __toESM(require("./AvatarSquare"));
+const cx = (...a) => a.filter(Boolean).join(" ");
+const controlShell = "relative w-full rounded-2xl border border-slate-200 bg-white text-sm text-slate-900 placeholder:text-slate-400 shadow-sm outline-none transition focus-within:ring-4 focus-within:ring-slate-900/5 focus-within:border-slate-300 disabled:opacity-60 disabled:cursor-not-allowed dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:placeholder:text-slate-400 dark:focus-within:ring-white/10";
+const isFocusableOrInteractive = (el) => {
+  if (!el) return false;
+  return !!el.closest(
+    'button, input, select, textarea, a[href], [role="button"], [contenteditable], [tabindex]:not([tabindex="-1"])'
+  );
+};
+function ComboSelect({
+  options = [],
+  sections,
+  value = null,
+  onChange,
+  placeholder = "Selecciona\u2026",
+  disabled,
+  loading,
+  allowClear = true,
+  searchable = true,
+  maxItems = 300,
+  className,
+  noResultsText = "Sin resultados",
+  renderOption,
+  renderSectionHeader,
+  portalTarget,
+  closeOnSelect = true,
+  keepFocusOnSelect = false,
+  clearQueryOnSelect = true,
+  renderTags,
+  interactiveOptions = false,
+  onQueryChange
+  // 🔹 nuevo
+}) {
+  var _a;
+  const [query, _setQuery] = import_react.default.useState("");
+  const [open, setOpen] = import_react.default.useState(false);
+  const [activeIdx, setActiveIdx] = import_react.default.useState(0);
+  const setQ = import_react.default.useCallback(
+    (q) => {
+      _setQuery(q);
+      onQueryChange == null ? void 0 : onQueryChange(q);
+    },
+    [onQueryChange]
+  );
+  const rootRef = import_react.default.useRef(null);
+  const inputRef = import_react.default.useRef(null);
+  const dropRef = import_react.default.useRef(null);
+  const listId = import_react.default.useId();
+  const selected = import_react.default.useMemo(() => {
+    const flat = sections ? sections.flatMap((s) => s.options) : options;
+    return flat.find((o) => o.value === value) || null;
+  }, [options, value, sections]);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    const onFocusIn = (e) => {
+      var _a2, _b;
+      const t = e.target;
+      const insideRoot = !!((_a2 = rootRef.current) == null ? void 0 : _a2.contains(t));
+      const insideDrop = !!((_b = dropRef.current) == null ? void 0 : _b.contains(t));
+      if (!insideRoot && !insideDrop) setOpen(false);
+    };
+    document.addEventListener("focusin", onFocusIn);
+    return () => document.removeEventListener("focusin", onFocusIn);
+  }, [open]);
+  const isOutside = import_react.default.useCallback((e) => {
+    var _a2;
+    const path = (_a2 = e.composedPath) == null ? void 0 : _a2.call(e);
+    const t = e.target;
+    const inRoot = !!rootRef.current && (rootRef.current.contains(t) || (path == null ? void 0 : path.includes(rootRef.current)));
+    const inDrop = !!dropRef.current && (dropRef.current.contains(t) || (path == null ? void 0 : path.includes(dropRef.current)));
+    return !(inRoot || inDrop);
+  }, []);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    const onPointerDownCapture = (e) => {
+      if (isOutside(e)) setOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDownCapture, true);
+    return () => window.removeEventListener("pointerdown", onPointerDownCapture, true);
+  }, [open, isOutside]);
+  const flatAll = import_react.default.useMemo(() => {
+    if (!sections)
+      return options.map((opt) => ({ kind: "option", secKey: "__", opt }));
+    const rows = [];
+    for (const s of sections) {
+      rows.push({ kind: "section", sec: s });
+      for (const o of s.options) rows.push({ kind: "option", secKey: s.key, opt: o });
+    }
+    return rows;
+  }, [options, sections]);
+  const filteredRows = import_react.default.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return flatAll.slice(0, 2e3);
+    const match = (o) => {
+      var _a2, _b, _c, _d;
+      return o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q) || ((_b = (_a2 = o.hint) == null ? void 0 : _a2.toLowerCase().includes(q)) != null ? _b : false) || ((_d = (_c = o.sublabel) == null ? void 0 : _c.toLowerCase().includes(q)) != null ? _d : false);
+    };
+    if (!sections || sections.length === 0) {
+      const opts = flatAll.filter((r) => r.kind === "option" && match(r.opt));
+      return opts.slice(0, maxItems);
+    }
+    const out = [];
+    let taken = 0;
+    for (const sec of sections) {
+      if (taken >= maxItems) break;
+      const matches = sec.options.filter(match);
+      if (matches.length === 0) continue;
+      out.push({ kind: "section", sec });
+      for (const opt of matches) {
+        if (taken >= maxItems) break;
+        out.push({ kind: "option", secKey: sec.key, opt });
+        taken++;
+      }
+    }
+    return out.length ? out : [];
+  }, [query, flatAll, maxItems, sections]);
+  import_react.default.useEffect(() => {
+    if (!open) setActiveIdx(0);
+  }, [open]);
+  const afterSelect = () => {
+    if (clearQueryOnSelect) setQ("");
+    if (closeOnSelect) {
+      setOpen(false);
+      requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+      });
+    } else {
+      setOpen(true);
+      if (keepFocusOnSelect) requestAnimationFrame(() => {
+        var _a2;
+        return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      });
+      setActiveIdx(0);
+    }
+  };
+  const selectRowAt = (idx) => {
+    const row = filteredRows[idx];
+    if (!row || row.kind !== "option") return;
+    const opt = row.opt;
+    if (!opt || opt.disabled) return;
+    onChange(opt.value, opt);
+    afterSelect();
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    if (!open && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.min(i + 1, Math.max(filteredRows.length - 1, 0)));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIdx((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      selectRowAt(activeIdx);
+    } else if (e.key === "Escape") setOpen(false);
+  };
+  const [dropStyle, setDropStyle] = import_react.default.useState(null);
+  const portalEl = typeof window !== "undefined" ? portalTarget != null ? portalTarget : document.body : null;
+  const updatePosition = import_react.default.useCallback(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - r.bottom - 8;
+    const maxH = Math.max(200, Math.min(360, spaceBelow));
+    setDropStyle({
+      position: "fixed",
+      top: r.bottom + 6,
+      left: r.left,
+      width: r.width,
+      maxHeight: maxH,
+      zIndex: 1200
+    });
+  }, []);
+  import_react.default.useLayoutEffect(() => {
+    if (!open) return;
+    updatePosition();
+    const onScroll = () => updatePosition();
+    const onResize = () => updatePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, updatePosition]);
+  const DefaultRow = (opt, isActive, isSel) => {
+    var _a2;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: cx(
+          "flex items-center justify-between gap-3",
+          isActive ? "bg-slate-50 dark:bg-white/10" : "hover:bg-slate-50 dark:hover:bg-white/5"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_AvatarSquare.default,
+              {
+                size: 40,
+                src: (_a2 = opt.image) != null ? _a2 : void 0,
+                alt: opt.label,
+                className: "ring-1 ring-black/5",
+                radiusClass: "rounded-lg"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate font-medium", children: opt.label }),
+              opt.sublabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-xs text-slate-500", children: opt.hint }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex shrink-0 items-center gap-3", children: [
+            opt.right != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-600", children: opt.right }) : null,
+            isSel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m5 12 4 4L19 6" }) })
+          ] })
+        ]
+      }
+    );
+  };
+  const DefaultSectionHeader = (sec, sticky) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cx(
+        "px-3 py-1.5 text-[11px] font-semibold text-slate-700 flex items-center justify-between",
+        sticky ? "bg-white/80 backdrop-blur supports-[backdrop-filter]:backdrop-blur sticky top-0 z-10 border-b border-slate-100" : "bg-slate-50 dark:bg-white/5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: sec.title }),
+        sec.rightHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 shrink-0 text-[10px] text-slate-600", children: sec.rightHint }) : null
+      ]
+    }
+  );
+  const dropdown = open && dropStyle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "fixed inset-0",
+        style: { zIndex: 1199 },
+        onMouseDown: () => {
+          setOpen(false);
+          setQ("");
+        },
+        onContextMenu: () => {
+          setOpen(false);
+          setQ("");
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: dropRef,
+        role: "listbox",
+        id: listId,
+        style: dropStyle,
+        className: "overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-white/10 dark:bg-[#0f0d0e]",
+        children: filteredRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 py-2 text-sm text-slate-500", children: noResultsText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-[inherit] overflow-auto py-1 text-sm", children: filteredRows.map((row, i) => {
+          if (row.kind === "section") {
+            const Header = renderSectionHeader != null ? renderSectionHeader : DefaultSectionHeader;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "aria-hidden": true, className: "sticky top-0 z-10", children: Header(row.sec, true) }, `sec-${row.sec.key}`);
+          }
+          const opt = row.opt;
+          const isSel = opt.value === value;
+          const isActive = i === activeIdx;
+          const handleRowClick = (e) => {
+            if (opt.disabled) return;
+            if (isFocusableOrInteractive(e.target)) return;
+            if (interactiveOptions) {
+              onChange(opt.value, opt);
+              if (clearQueryOnSelect) setQ("");
+              if (closeOnSelect) {
+                setOpen(false);
+                requestAnimationFrame(() => {
+                  var _a2;
+                  return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+                });
+              }
+              setActiveIdx(0);
+            } else {
+              selectRowAt(i);
+            }
+          };
+          const commonProps = {
+            id: `${listId}-opt-${i}`,
+            role: "option",
+            "aria-selected": isSel,
+            onMouseDown: (e) => {
+              if (!isFocusableOrInteractive(e.target)) e.preventDefault();
+            },
+            onMouseEnter: () => setActiveIdx(i),
+            className: cx(
+              "px-3 py-2",
+              !interactiveOptions && "cursor-pointer",
+              isActive ? "bg-slate-50 dark:bg-white/10" : "hover:bg-slate-50 dark:hover:bg-white/5",
+              opt.disabled && "opacity-50 cursor-not-allowed"
+            ),
+            onClick: handleRowClick
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...commonProps, children: renderOption ? renderOption(opt, isActive, isSel) : DefaultRow(opt, isActive, isSel) }, `${row.secKey}-${opt.value}`);
+        }) })
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: cx("relative", className),
+      ref: rootRef,
+      onMouseDown: () => {
+        if (!disabled) requestAnimationFrame(() => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx(controlShell, "pr-20 pl-3 py-2 min-h-[44px] flex flex-wrap items-center gap-2"), children: [
+          renderTags,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-controls": listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": open ? `${listId}-opt-${activeIdx}` : void 0,
+              value: open ? query : (_a = selected == null ? void 0 : selected.label) != null ? _a : "",
+              onChange: (e) => {
+                if (!searchable) return;
+                setQ(e.target.value);
+                if (!open) setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown,
+              placeholder,
+              readOnly: !searchable,
+              disabled,
+              autoComplete: "off",
+              spellCheck: false,
+              className: cx("flex-1 min-w-[160px] bg-transparent outline-none border-0 p-0 py-1 text-sm", open && "ring-0")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-1.5 pointer-events-none", children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
+          allowClear && value != null && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              title: "Limpiar",
+              className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onChange(null, void 0);
+                setQ("");
+                setActiveIdx(0);
+                setOpen(false);
+                requestAnimationFrame(() => {
+                  var _a2;
+                  return (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              title: open ? "Cerrar" : "Abrir",
+              className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: () => {
+                setOpen((o) => !o);
+                if (!open) requestAnimationFrame(() => {
+                  var _a2;
+                  return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+                });
+              },
+              tabIndex: -1,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: cx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) })
+            }
+          )
+        ] }),
+        portalEl ? (0, import_react_dom.createPortal)(dropdown, portalEl) : dropdown
+      ]
+    }
+  );
+}