framepexls-ui-lib 0.1.4

package/dist/ComboSelect.mjs

@@ -0,0 +1,412 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import AvatarSquare from "./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] = React.useState("");
+  const [open, setOpen] = React.useState(false);
+  const [activeIdx, setActiveIdx] = React.useState(0);
+  const setQ = React.useCallback(
+    (q) => {
+      _setQuery(q);
+      onQueryChange == null ? void 0 : onQueryChange(q);
+    },
+    [onQueryChange]
+  );
+  const rootRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const dropRef = React.useRef(null);
+  const listId = React.useId();
+  const selected = React.useMemo(() => {
+    const flat = sections ? sections.flatMap((s) => s.options) : options;
+    return flat.find((o) => o.value === value) || null;
+  }, [options, value, sections]);
+  React.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 = React.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);
+  }, []);
+  React.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 = React.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 = React.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]);
+  React.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] = React.useState(null);
+  const portalEl = typeof window !== "undefined" ? portalTarget != null ? portalTarget : document.body : null;
+  const updatePosition = React.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
+    });
+  }, []);
+  React.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__ */ 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__ */ jsxs("div", { className: "min-w-0 flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              AvatarSquare,
+              {
+                size: 40,
+                src: (_a2 = opt.image) != null ? _a2 : void 0,
+                alt: opt.label,
+                className: "ring-1 ring-black/5",
+                radiusClass: "rounded-lg"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: opt.label }),
+              opt.sublabel ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500", children: opt.sublabel }) : opt.hint ? /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-slate-500", children: opt.hint }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+            opt.right != null ? /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-600", children: opt.right }) : null,
+            isSel && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "m5 12 4 4L19 6" }) })
+          ] })
+        ]
+      }
+    );
+  };
+  const DefaultSectionHeader = (sec, sticky) => /* @__PURE__ */ 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__ */ jsx("span", { className: "truncate", children: sec.title }),
+        sec.rightHint ? /* @__PURE__ */ jsx("span", { className: "ml-2 shrink-0 text-[10px] text-slate-600", children: sec.rightHint }) : null
+      ]
+    }
+  );
+  const dropdown = open && dropStyle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0",
+        style: { zIndex: 1199 },
+        onMouseDown: () => {
+          setOpen(false);
+          setQ("");
+        },
+        onContextMenu: () => {
+          setOpen(false);
+          setQ("");
+        }
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "px-3 py-2 text-sm text-slate-500", children: noResultsText }) : /* @__PURE__ */ 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__ */ 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__ */ jsx("li", { ...commonProps, children: renderOption ? renderOption(opt, isActive, isSel) : DefaultRow(opt, isActive, isSel) }, `${row.secKey}-${opt.value}`);
+        }) })
+      }
+    )
+  ] }) : null;
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: cx(controlShell, "pr-20 pl-3 py-2 min-h-[44px] flex flex-wrap items-center gap-2"), children: [
+          renderTags,
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "pointer-events-none text-xs text-slate-400", children: "cargando\u2026" }),
+          allowClear && value != null && !disabled && /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            }
+          ),
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+            }
+          )
+        ] }),
+        portalEl ? createPortal(dropdown, portalEl) : dropdown
+      ]
+    }
+  );
+}
+export {
+  ComboSelect as default
+};

package/dist/DateTimeField.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type PickerMode = "date" | "datetime-local" | "time";
+type DateTimeFieldProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+    type?: PickerMode;
+    /** ISO para date/datetime-local, HH:mm para time; o null */
+    value?: string | null;
+    min?: string;
+    max?: string;
+    /** Cambio por valor (recomendado) */
+    onValueChange?: (next: string | null) => void;
+    /** Si true, usa portal (document.body o portalId) */
+    portal?: boolean;
+    /** id del contenedor de portal (opcional) */
+    portalId?: string;
+    /** muestra botón de limpiar en el Input */
+    clearable?: boolean;
+};
+declare function DateTimeField({ type, value, min, max, onValueChange, portal, portalId, clearable, ...inputProps }: DateTimeFieldProps): react_jsx_runtime.JSX.Element;
+
+export { type DateTimeFieldProps, DateTimeField as default };

package/dist/DateTimeField.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type PickerMode = "date" | "datetime-local" | "time";
+type DateTimeFieldProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> & {
+    type?: PickerMode;
+    /** ISO para date/datetime-local, HH:mm para time; o null */
+    value?: string | null;
+    min?: string;
+    max?: string;
+    /** Cambio por valor (recomendado) */
+    onValueChange?: (next: string | null) => void;
+    /** Si true, usa portal (document.body o portalId) */
+    portal?: boolean;
+    /** id del contenedor de portal (opcional) */
+    portalId?: string;
+    /** muestra botón de limpiar en el Input */
+    clearable?: boolean;
+};
+declare function DateTimeField({ type, value, min, max, onValueChange, portal, portalId, clearable, ...inputProps }: DateTimeFieldProps): react_jsx_runtime.JSX.Element;
+
+export { type DateTimeFieldProps, DateTimeField as default };