framepexls-ui-lib 0.1.4

package/dist/SearchInput.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+    minWidthClasses?: string;
+    fit?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+};
+declare function SearchInput({ value, onChange, placeholder, className, minWidthClasses, fit, clearable, disabled, id, label, }: Props): react_jsx_runtime.JSX.Element;
+
+export { SearchInput as default };

package/dist/SearchInput.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    className?: string;
+    minWidthClasses?: string;
+    fit?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    id?: string;
+    label?: string;
+};
+declare function SearchInput({ value, onChange, placeholder, className, minWidthClasses, fit, clearable, disabled, id, label, }: Props): react_jsx_runtime.JSX.Element;
+
+export { SearchInput as default };

package/dist/SearchInput.js

@@ -0,0 +1,116 @@
+"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 SearchInput_exports = {};
+__export(SearchInput_exports, {
+  default: () => SearchInput
+});
+module.exports = __toCommonJS(SearchInput_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  className,
+  minWidthClasses = "min-w-[12rem] sm:min-w-[16rem] md:min-w-[20rem]",
+  fit = false,
+  clearable = true,
+  disabled = false,
+  id,
+  label
+}) {
+  const autoId = import_react.default.useId();
+  const inputId = id != null ? id : autoId;
+  const widthClasses = fit ? "w-auto min-w-0 max-w-full" : `w-full ${minWidthClasses}`;
+  const clear = () => onChange("");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: inputId, className: `relative ${widthClasses} ${className != null ? className : ""}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        id: inputId,
+        type: "search",
+        role: "searchbox",
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: placeholder != null ? placeholder : "Buscar...",
+        className: [
+          "w-full rounded-2xl border bg-white px-4 py-2.5 text-sm outline-none ring-0",
+          "pr-10",
+          // espacio para el icono
+          "placeholder:text-slate-400",
+          "border-slate-200 focus:border-blue-300 focus:ring-2 focus:ring-blue-200",
+          "dark:border-white/10 dark:bg-[#0e0d0e] dark:focus:border-blue-500 dark:focus:ring-blue-900/40",
+          disabled ? "opacity-60 cursor-not-allowed" : ""
+        ].join(" "),
+        onKeyDown: (e) => {
+          if (clearable && !disabled && value && e.key === "Escape") {
+            e.preventDefault();
+            clear();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-50",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" })
+        ]
+      }
+    ),
+    clearable && !disabled && value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: clear,
+        className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
+        "aria-label": "Limpiar b\xFAsqueda",
+        title: "Limpiar",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
+            clipRule: "evenodd"
+          }
+        ) })
+      }
+    )
+  ] });
+}

package/dist/SearchInput.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  className,
+  minWidthClasses = "min-w-[12rem] sm:min-w-[16rem] md:min-w-[20rem]",
+  fit = false,
+  clearable = true,
+  disabled = false,
+  id,
+  label
+}) {
+  const autoId = React.useId();
+  const inputId = id != null ? id : autoId;
+  const widthClasses = fit ? "w-auto min-w-0 max-w-full" : `w-full ${minWidthClasses}`;
+  const clear = () => onChange("");
+  return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: `relative ${widthClasses} ${className != null ? className : ""}`, children: [
+    label && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "search",
+        role: "searchbox",
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        placeholder: placeholder != null ? placeholder : "Buscar...",
+        className: [
+          "w-full rounded-2xl border bg-white px-4 py-2.5 text-sm outline-none ring-0",
+          "pr-10",
+          // espacio para el icono
+          "placeholder:text-slate-400",
+          "border-slate-200 focus:border-blue-300 focus:ring-2 focus:ring-blue-200",
+          "dark:border-white/10 dark:bg-[#0e0d0e] dark:focus:border-blue-500 dark:focus:ring-blue-900/40",
+          disabled ? "opacity-60 cursor-not-allowed" : ""
+        ].join(" "),
+        onKeyDown: (e) => {
+          if (clearable && !disabled && value && e.key === "Escape") {
+            e.preventDefault();
+            clear();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 opacity-50",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" }),
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" })
+        ]
+      }
+    ),
+    clearable && !disabled && value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: clear,
+        className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
+        "aria-label": "Limpiar b\xFAsqueda",
+        title: "Limpiar",
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
+            clipRule: "evenodd"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+export {
+  SearchInput as default
+};

package/dist/Select.d.mts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BaseValue = string | number;
+type Option<T extends BaseValue> = {
+    label: string;
+    value: T;
+    disabled?: boolean;
+};
+type Size = "sm" | "md" | "lg";
+type Props<T extends BaseValue> = {
+    value: T | "";
+    onChange: (v: T | "") => void;
+    options: Option<T>[];
+    id?: string;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    title?: string;
+    className?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    clearable?: boolean;
+    closeOnSelect?: boolean;
+    minWidthClasses?: string;
+    fit?: boolean;
+};
+declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): react_jsx_runtime.JSX.Element;
+
+export { type Option, ModernSelect as default };

package/dist/Select.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BaseValue = string | number;
+type Option<T extends BaseValue> = {
+    label: string;
+    value: T;
+    disabled?: boolean;
+};
+type Size = "sm" | "md" | "lg";
+type Props<T extends BaseValue> = {
+    value: T | "";
+    onChange: (v: T | "") => void;
+    options: Option<T>[];
+    id?: string;
+    label?: string;
+    hint?: string;
+    placeholder?: string;
+    title?: string;
+    className?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    clearable?: boolean;
+    closeOnSelect?: boolean;
+    minWidthClasses?: string;
+    fit?: boolean;
+};
+declare function ModernSelect<T extends BaseValue>({ value, onChange, options, id, label, hint, placeholder, title, className, fullWidth, disabled, error, size, clearable, closeOnSelect, minWidthClasses, fit, }: Props<T>): react_jsx_runtime.JSX.Element;
+
+export { type Option, ModernSelect as default };

package/dist/Select.js

@@ -0,0 +1,293 @@
+"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 Select_exports = {};
+__export(Select_exports, {
+  default: () => ModernSelect
+});
+module.exports = __toCommonJS(Select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+const S = {
+  sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
+  md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
+  lg: { h: "h-11", text: "text-base", radius: "rounded-2xl", padX: "px-4", itemPad: "px-4 py-2.5" }
+};
+function ModernSelect({
+  value,
+  onChange,
+  options,
+  id,
+  label,
+  hint,
+  placeholder = "Selecciona una opci\xF3n\u2026",
+  title,
+  className,
+  fullWidth = true,
+  disabled = false,
+  error = false,
+  size = "md",
+  clearable = false,
+  closeOnSelect = false,
+  minWidthClasses,
+  fit = true
+}) {
+  var _a, _b;
+  const s = S[size];
+  const hasError = Boolean(error);
+  const autoId = import_react.default.useId();
+  const selectId = id != null ? id : autoId;
+  const hintId = hint ? `${selectId}-hint` : void 0;
+  const errorId = hasError ? `${selectId}-err` : void 0;
+  const [open, setOpen] = import_react.default.useState(false);
+  const [active, setActive] = import_react.default.useState(() => {
+    const idx = options.findIndex((o) => String(o.value) === String(value));
+    return Math.max(0, idx);
+  });
+  const btnRef = import_react.default.useRef(null);
+  const listRef = import_react.default.useRef(null);
+  const rootRef = import_react.default.useRef(null);
+  const [menuPos, setMenuPos] = import_react.default.useState({ top: 0, left: 0, width: 0 });
+  const updateMenuPosition = import_react.default.useCallback(() => {
+    const el = btnRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setMenuPos({
+      top: Math.round(r.bottom + window.scrollY + 6),
+      left: Math.round(r.left + window.scrollX),
+      width: Math.round(r.width)
+    });
+  }, []);
+  import_react.default.useEffect(() => {
+    const onDoc = (e) => {
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, []);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    updateMenuPosition();
+    const onScroll = () => updateMenuPosition();
+    const onResize = () => updateMenuPosition();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, updateMenuPosition]);
+  import_react.default.useEffect(() => {
+    var _a2;
+    if (!open) return;
+    const el = (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(`[data-idx="${active}"]`);
+    el == null ? void 0 : el.focus();
+  }, [open, active]);
+  const selected = (_a = options.find((o) => String(o.value) === String(value))) != null ? _a : null;
+  const setSelected = (o) => {
+    if (o.disabled) return;
+    onChange(o.value);
+    setActive(options.findIndex((x) => String(x.value) === String(o.value)));
+    if (closeOnSelect) setOpen(false);
+  };
+  const clear = () => {
+    var _a2;
+    onChange("");
+    setActive(0);
+    (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+  };
+  const onKeyBtn = (e) => {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  const onKeyList = (e) => {
+    var _a2;
+    if (!open) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((i) => Math.min(i + 1, options.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(options.length - 1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const o = options[active];
+      if (o) setSelected(o);
+    }
+  };
+  const widthBtn = fit ? "w-full min-w-[12rem] md:min-w-[16rem]" : `w-full ${minWidthClasses != null ? minWidthClasses : "min-w-full sm:min-w-[12rem] lg:min-w-[16rem]"}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: fullWidth ? "block w-full" : "inline-block", ref: rootRef, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          ref: btnRef,
+          id: selectId,
+          type: "button",
+          title: (_b = selected == null ? void 0 : selected.label) != null ? _b : title,
+          disabled,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-controls": `${selectId}-listbox`,
+          "aria-describedby": hintId != null ? hintId : hasError ? errorId : void 0,
+          onClick: () => !disabled && setOpen((o) => !o),
+          onKeyDown: onKeyBtn,
+          className: [
+            "text-left bg-white dark:bg-[#0e0d0e] border transition shadow-sm",
+            s.radius,
+            s.h,
+            s.text,
+            s.padX,
+            "pr-12",
+            widthBtn,
+            hasError ? "border-blue-500 focus:ring-2 ring-blue-300" : "border-slate-200 dark:border-white/10 focus:ring-2 ring-blue-300",
+            disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+            "whitespace-nowrap overflow-hidden text-ellipsis",
+            className != null ? className : ""
+          ].join(" "),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: selected ? "text-slate-900 dark:text-slate-100" : "text-slate-400", children: selected ? selected.label : placeholder })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          className: `pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 transition ${open ? "rotate-180 opacity-70" : "opacity-70"}`,
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.23 7.21a.75.75 0 011.06.02L10 10.2l3.71-2.97a.75.75 0 111.04 1.08l-4.24 3.4a.75.75 0 01-.94 0L5.21 8.31a.75.75 0 01.02-1.1z" })
+        }
+      ),
+      clearable && value !== "" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: clear,
+          className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",
+          "aria-label": "Limpiar selecci\xF3n",
+          title: "Limpiar",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M10 8.586l3.536-3.536a1 1 0 111.414 1.414L11.414 10l3.536 3.536a1 1 0 01-1.414 1.414L10 11.414l-3.536 3.536a1 1 0 01-1.414-1.414L8.586 10 5.05 6.464A1 1 0 116.464 5.05L10 8.586z",
+              clipRule: "evenodd"
+            }
+          ) })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "ul",
+      {
+        id: `${selectId}-listbox`,
+        role: "listbox",
+        ref: listRef,
+        tabIndex: -1,
+        onKeyDown: onKeyList,
+        "aria-labelledby": selectId,
+        className: [
+          "fixed z-[1000] max-h-72 overflow-auto",
+          "rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur-md shadow-2xl ring-1 ring-black/5",
+          "dark:border-white/10 dark:bg-[#0f0d0e]/90 dark:ring-white/10"
+        ].join(" "),
+        style: {
+          top: menuPos.top,
+          left: menuPos.left,
+          width: menuPos.width,
+          maxWidth: "calc(100vw - 24px)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "li",
+            {
+              role: "presentation",
+              className: `${S[size].itemPad} sticky top-0 bg-white/90 dark:bg-[#0f0d0e]/90 backdrop-blur-md text-slate-400 select-none`,
+              children: placeholder
+            }
+          ),
+          options.map((o, idx) => {
+            const isSelected = String(value) === String(o.value);
+            const isDisabled = Boolean(o.disabled);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "li",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled,
+                tabIndex: -1,
+                "data-idx": idx,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => !isDisabled && setSelected(o),
+                className: [
+                  S[size].itemPad,
+                  "flex items-start justify-between gap-3",
+                  "cursor-pointer focus:outline-none",
+                  "hover:bg-slate-50 dark:hover:bg-white/5",
+                  isSelected ? "bg-slate-50/70 dark:bg-white/10" : "",
+                  isDisabled ? "opacity-50 cursor-not-allowed" : ""
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 leading-snug whitespace-normal break-words line-clamp-2", children: o.label }),
+                  isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "ml-3 h-4 w-4 shrink-0 opacity-80", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M16.707 5.293a1 1 0 010 1.414l-7.25 7.25a1 1 0 01-1.414 0l-3.25-3.25a1 1 0 111.414-1.414l2.543 2.543 6.543-6.543a1 1 0 011.414 0z",
+                      clipRule: "evenodd"
+                    }
+                  ) })
+                ]
+              },
+              String(o.value)
+            );
+          })
+        ]
+      }
+    ),
+    hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, className: "mt-1 text-[12px] text-blue-600", children: typeof error === "string" ? error : "Corrige este campo" }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: hintId, className: "mt-1 text-[12px] text-slate-500", children: hint }) : null
+  ] });
+}