framepexls-ui-lib 0.1.9 → 0.1.11

package/dist/Button.d.mts

@@ -14,7 +14,8 @@ type ButtonProps = {
     iconOnly?: boolean;
     icon?: React__default.ReactNode;
     noPaddingX?: boolean;
+    unstyled?: boolean;
 } & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, unstyled, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 export { Button as default };

package/dist/Button.d.ts

@@ -14,7 +14,8 @@ type ButtonProps = {
     iconOnly?: boolean;
     icon?: React__default.ReactNode;
     noPaddingX?: boolean;
+    unstyled?: boolean;
 } & React__default.ButtonHTMLAttributes<HTMLButtonElement>;
-declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ children, variant, size, loading, disabled, leftIcon, rightIcon, block, className, type, active, inverted, iconOnly, icon, noPaddingX, unstyled, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 export { Button as default };

package/dist/Button.js

@@ -39,8 +39,22 @@ function Button({
   iconOnly = false,
   icon,
   noPaddingX = false,
+  unstyled = false,
   ...rest
 }) {
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type,
+        disabled: disabled || loading,
+        "aria-pressed": active ? true : void 0,
+        className,
+        ...rest,
+        children
+      }
+    );
+  }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
   const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
   const variantClass = (() => {

package/dist/Button.mjs

@@ -16,8 +16,22 @@ function Button({
   iconOnly = false,
   icon,
   noPaddingX = false,
+  unstyled = false,
   ...rest
 }) {
+  if (unstyled) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        disabled: disabled || loading,
+        "aria-pressed": active ? true : void 0,
+        className,
+        ...rest,
+        children
+      }
+    );
+  }
   const base = "inline-flex items-center justify-center rounded-xl font-medium transition focus:outline-none focus-visible:ring-2 disabled:opacity-60 disabled:cursor-not-allowed";
   const sizes = size === "sm" ? `h-9 ${noPaddingX ? "" : "px-3"} text-sm` : size === "lg" ? `h-11 ${noPaddingX ? "" : "px-5"} text-base` : `h-10 ${noPaddingX ? "" : "px-4"} text-sm`;
   const variantClass = (() => {

package/dist/ComboSelect.js

@@ -378,7 +378,6 @@ function ComboSelect({
               onFocus: () => setOpen(true),
               onKeyDown,
               placeholder,
-              readOnly: !searchable,
               disabled,
               autoComplete: "off",
               spellCheck: false,

package/dist/ComboSelect.mjs

@@ -345,7 +345,6 @@ function ComboSelect({
               onFocus: () => setOpen(true),
               onKeyDown,
               placeholder,
-              readOnly: !searchable,
               disabled,
               autoComplete: "off",
               spellCheck: false,

package/dist/DateTimeField.js

@@ -88,9 +88,18 @@ const withinBounds = (d, min, max) => {
   }
   return true;
 };
+const toAMPM = (hhmm) => {
+  const [hStr, mStr] = hhmm.split(":");
+  const H = parseInt(hStr != null ? hStr : "0", 10);
+  const M = parseInt(mStr != null ? mStr : "0", 10);
+  if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
+  const hr12 = H % 12 === 0 ? 12 : H % 12;
+  const mm = M < 10 ? `0${M}` : String(M);
+  return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
+};
 const formatDisplayValue = (value, mode) => {
   if (!value) return "";
-  if (mode === "time") return value;
+  if (mode === "time") return toAMPM(value);
   const parsed = parseValueByType(value, mode);
   if (!parsed) return value;
   if (mode === "date") {
@@ -106,7 +115,8 @@ const formatDisplayValue = (value, mode) => {
       month: "short",
       year: "numeric",
       hour: "2-digit",
-      minute: "2-digit"
+      minute: "2-digit",
+      hour12: true
     });
   } catch {
     return fmtISODateTimeLocal(parsed);
@@ -258,7 +268,7 @@ function DateTimeField({
         ),
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 ref: timeBtnRef,
@@ -268,11 +278,7 @@ function DateTimeField({
                 "aria-haspopup": "dialog",
                 "aria-expanded": showTimePop,
                 title: "Editar hora",
-                children: [
-                  pad2(hh),
-                  ":",
-                  pad2(mm)
-                ]
+                children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -361,11 +367,11 @@ function DateTimeField({
       ]
     }
   );
+  const isReadOnly = !htmlOnChange;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: anchorRef, className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Input.default,
       {
-        readOnly: true,
         leftSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarIcon, {}),
         rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
@@ -386,6 +392,7 @@ function DateTimeField({
         onClear: () => emit(null),
         "aria-haspopup": "dialog",
         "aria-expanded": open,
+        readOnly: isReadOnly,
         ...inputProps
       }
     ),

package/dist/DateTimeField.mjs

@@ -55,9 +55,18 @@ const withinBounds = (d, min, max) => {
   }
   return true;
 };
+const toAMPM = (hhmm) => {
+  const [hStr, mStr] = hhmm.split(":");
+  const H = parseInt(hStr != null ? hStr : "0", 10);
+  const M = parseInt(mStr != null ? mStr : "0", 10);
+  if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
+  const hr12 = H % 12 === 0 ? 12 : H % 12;
+  const mm = M < 10 ? `0${M}` : String(M);
+  return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
+};
 const formatDisplayValue = (value, mode) => {
   if (!value) return "";
-  if (mode === "time") return value;
+  if (mode === "time") return toAMPM(value);
   const parsed = parseValueByType(value, mode);
   if (!parsed) return value;
   if (mode === "date") {
@@ -73,7 +82,8 @@ const formatDisplayValue = (value, mode) => {
       month: "short",
       year: "numeric",
       hour: "2-digit",
-      minute: "2-digit"
+      minute: "2-digit",
+      hour12: true
     });
   } catch {
     return fmtISODateTimeLocal(parsed);
@@ -225,7 +235,7 @@ function DateTimeField({
         ),
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 ref: timeBtnRef,
@@ -235,11 +245,7 @@ function DateTimeField({
                 "aria-haspopup": "dialog",
                 "aria-expanded": showTimePop,
                 title: "Editar hora",
-                children: [
-                  pad2(hh),
-                  ":",
-                  pad2(mm)
-                ]
+                children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
               }
             ),
             /* @__PURE__ */ jsx(
@@ -328,11 +334,11 @@ function DateTimeField({
       ]
     }
   );
+  const isReadOnly = !htmlOnChange;
   return /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: "relative", children: [
     /* @__PURE__ */ jsx(
       Input,
       {
-        readOnly: true,
         leftSlot: /* @__PURE__ */ jsx(CalendarIcon, {}),
         rightSlot: /* @__PURE__ */ jsx(
           "button",
@@ -353,6 +359,7 @@ function DateTimeField({
         onClear: () => emit(null),
         "aria-haspopup": "dialog",
         "aria-expanded": open,
+        readOnly: isReadOnly,
         ...inputProps
       }
     ),

package/dist/Input.js

@@ -41,7 +41,8 @@ const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Input = import_react.default.forwardRef(
   ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
-    const showClear = clearable && !!value && !props.readOnly && !props.disabled;
+    const showClear = clearable && !!value && !props.disabled;
+    const readOnly = !onChange;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative content-center", children: [
       leftSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -50,6 +51,7 @@ const Input = import_react.default.forwardRef(
           ref,
           value,
           onChange,
+          readOnly,
           "aria-invalid": error ? true : void 0,
           className: cx(
             baseControl,

package/dist/Input.mjs

@@ -8,7 +8,8 @@ const baseControl = "w-full rounded-2xl border border-slate-200 bg-white px-3.5
 const errorControl = "border-blue-300 focus:border-blue-300 focus:ring-blue-500/15";
 const Input = React.forwardRef(
   ({ className, error, leftSlot, rightSlot, clearable, onClear, tone = "default", value, onChange, ...props }, ref) => {
-    const showClear = clearable && !!value && !props.readOnly && !props.disabled;
+    const showClear = clearable && !!value && !props.disabled;
+    const readOnly = !onChange;
     return /* @__PURE__ */ jsxs("div", { className: "relative content-center", children: [
       leftSlot && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400", children: leftSlot }),
       /* @__PURE__ */ jsx(
@@ -17,6 +18,7 @@ const Input = React.forwardRef(
           ref,
           value,
           onChange,
+          readOnly,
           "aria-invalid": error ? true : void 0,
           className: cx(
             baseControl,

package/dist/MultiComboSelect.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComboOption } from './ComboSelect.mjs';
+import 'react';
+
+type MultiComboOption = ComboOption & {
+    color?: string | null;
+};
+type MultiComboSelectProps = {
+    options: MultiComboOption[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+    noResultsText?: string;
+    maxVisibleTags?: number;
+    enableDialog?: boolean;
+    dialogTitle?: string;
+};
+declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type MultiComboOption, type MultiComboSelectProps, MultiComboSelect as default };

package/dist/MultiComboSelect.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComboOption } from './ComboSelect.js';
+import 'react';
+
+type MultiComboOption = ComboOption & {
+    color?: string | null;
+};
+type MultiComboSelectProps = {
+    options: MultiComboOption[];
+    value: string[];
+    onChange: (next: string[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+    noResultsText?: string;
+    maxVisibleTags?: number;
+    enableDialog?: boolean;
+    dialogTitle?: string;
+};
+declare function MultiComboSelect({ options, value, onChange, placeholder, disabled, loading, className, noResultsText, maxVisibleTags, enableDialog, dialogTitle, }: MultiComboSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type MultiComboOption, type MultiComboSelectProps, MultiComboSelect as default };

package/dist/MultiComboSelect.js

@@ -0,0 +1,152 @@
+"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 MultiComboSelect_exports = {};
+__export(MultiComboSelect_exports, {
+  default: () => MultiComboSelect
+});
+module.exports = __toCommonJS(MultiComboSelect_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ComboSelect = __toESM(require("./ComboSelect"));
+var import_Dialog = __toESM(require("./Dialog"));
+var import_Badge = __toESM(require("./Badge"));
+function MultiComboSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecciona\u2026",
+  disabled,
+  loading,
+  className,
+  noResultsText,
+  maxVisibleTags = 3,
+  enableDialog = true,
+  dialogTitle = "Seleccionadas"
+}) {
+  const selectedSet = import_react.default.useMemo(() => new Set(value), [value]);
+  const [dialogOpen, setDialogOpen] = import_react.default.useState(false);
+  const toggle = import_react.default.useCallback(
+    (val) => {
+      if (val == null) return;
+      const next = new Set(selectedSet);
+      if (next.has(val)) next.delete(val);
+      else next.add(val);
+      onChange(Array.from(next));
+    },
+    [selectedSet, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ComboSelect.default,
+      {
+        options,
+        value: null,
+        onChange: (v) => toggle(v),
+        placeholder: value.length === 0 ? placeholder : "",
+        disabled,
+        loading,
+        className,
+        noResultsText,
+        closeOnSelect: false,
+        keepFocusOnSelect: true,
+        clearQueryOnSelect: false,
+        renderTags: null,
+        renderOption: (opt) => {
+          var _a;
+          const isSel = selectedSet.has(opt.value);
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: opt.label })
+            ] }),
+            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" }) })
+          ] });
+        }
+      }
+    ),
+    value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
+        const opt = options.find((o) => o.value === v);
+        if (!opt) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.default, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
+      }),
+      enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/10 dark:text-slate-200",
+          onClick: () => setDialogOpen(true),
+          title: "Ver todas",
+          children: [
+            "+",
+            value.length - Math.max(0, maxVisibleTags)
+          ]
+        }
+      )
+    ] }),
+    enableDialog && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.default, { open: dialogOpen, onClose: () => setDialogOpen(false), size: "sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Header, { title: dialogTitle, onClose: () => setDialogOpen(false) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-2", children: [
+        value.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm text-muted", children: "Sin seleccionadas" }),
+        value.map((v) => {
+          var _a;
+          const opt = options.find((o) => o.value === v);
+          if (!opt) return null;
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: opt.label })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 items-center justify-center rounded-lg border border-slate-300/80 bg-white px-2 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+                onClick: () => toggle(v),
+                children: "Quitar"
+              }
+            )
+          ] }, v);
+        })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Footer, { align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+          onClick: () => setDialogOpen(false),
+          children: "Cerrar"
+        }
+      ) })
+    ] })
+  ] });
+}

package/dist/MultiComboSelect.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import ComboSelect from "./ComboSelect";
+import Dialog from "./Dialog";
+import Badge from "./Badge";
+function MultiComboSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Selecciona\u2026",
+  disabled,
+  loading,
+  className,
+  noResultsText,
+  maxVisibleTags = 3,
+  enableDialog = true,
+  dialogTitle = "Seleccionadas"
+}) {
+  const selectedSet = React.useMemo(() => new Set(value), [value]);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const toggle = React.useCallback(
+    (val) => {
+      if (val == null) return;
+      const next = new Set(selectedSet);
+      if (next.has(val)) next.delete(val);
+      else next.add(val);
+      onChange(Array.from(next));
+    },
+    [selectedSet, onChange]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ComboSelect,
+      {
+        options,
+        value: null,
+        onChange: (v) => toggle(v),
+        placeholder: value.length === 0 ? placeholder : "",
+        disabled,
+        loading,
+        className,
+        noResultsText,
+        closeOnSelect: false,
+        keepFocusOnSelect: true,
+        clearQueryOnSelect: false,
+        renderTags: null,
+        renderOption: (opt) => {
+          var _a;
+          const isSel = selectedSet.has(opt.value);
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+            ] }),
+            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" }) })
+          ] });
+        }
+      }
+    ),
+    value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap gap-1.5", children: [
+      value.slice(0, Math.max(0, maxVisibleTags)).map((v) => {
+        const opt = options.find((o) => o.value === v);
+        if (!opt) return null;
+        return /* @__PURE__ */ jsx(Badge, { tone: "slate", size: "sm", onClick: () => toggle(v), title: "Quitar", children: opt.label }, v);
+      }),
+      enableDialog && value.length > maxVisibleTags && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-white px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/10 dark:text-slate-200",
+          onClick: () => setDialogOpen(true),
+          title: "Ver todas",
+          children: [
+            "+",
+            value.length - Math.max(0, maxVisibleTags)
+          ]
+        }
+      )
+    ] }),
+    enableDialog && /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, onClose: () => setDialogOpen(false), size: "sm", children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { title: dialogTitle, onClose: () => setDialogOpen(false) }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        value.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted", children: "Sin seleccionadas" }),
+        value.map((v) => {
+          var _a;
+          const opt = options.find((o) => o.value === v);
+          if (!opt) return null;
+          const color = (_a = opt.color) != null ? _a : void 0;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-xl border border-border bg-surface px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block h-2.5 w-2.5 rounded-full", style: { background: color } }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: opt.label })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-8 items-center justify-center rounded-lg border border-slate-300/80 bg-white px-2 text-xs text-slate-700 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+                onClick: () => toggle(v),
+                children: "Quitar"
+              }
+            )
+          ] }, v);
+        })
+      ] }) }),
+      /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-10 items-center gap-2 rounded-xl border border-slate-300/80 bg-white px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+          onClick: () => setDialogOpen(false),
+          children: "Cerrar"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  MultiComboSelect as default
+};

package/dist/TimePopover.d.mts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 type Props = {
-    /** ancla (el botón/chip que abriste) */
     anchorEl: HTMLElement | null;
     hh: number;
     mm: number;

package/dist/TimePopover.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 type Props = {
-    /** ancla (el botón/chip que abriste) */
     anchorEl: HTMLElement | null;
     hh: number;
     mm: number;

package/dist/TimePopover.js

@@ -129,6 +129,14 @@ function TimePopover({
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
+          "Vista: ",
+          (() => {
+            const hr12 = H % 12 === 0 ? 12 : H % 12;
+            const mm2 = M < 10 ? `0${M}` : String(M);
+            return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
+          })()
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/TimePopover.mjs

@@ -94,6 +94,14 @@ function TimePopover({
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
+          "Vista: ",
+          (() => {
+            const hr12 = H % 12 === 0 ? 12 : H % 12;
+            const mm2 = M < 10 ? `0${M}` : String(M);
+            return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
+          })()
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ jsx(

package/dist/TimeRangeField.js

@@ -78,10 +78,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const el = portalId ? document.getElementById(portalId) : null;
     setPortalRoot(el != null ? el : document.body);
   }, [portal, portalId]);
+  const toAMPM = (hh, mm) => {
+    const hr12 = hh % 12 === 0 ? 12 : hh % 12;
+    const mm2 = mm < 10 ? `0${mm}` : String(mm);
+    return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
+  };
   const display = (0, import_react.useMemo)(() => {
     var _a2;
-    const a = from ? fmtHHmm(from.hh, from.mm) : null;
-    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    const a = from ? toAMPM(from.hh, from.mm) : null;
+    const b = to ? toAMPM(to.hh, to.mm) : null;
     if (!a && !b) return "";
     if (a && b) return `${a} \u2013 ${b}`;
     return (_a2 = a != null ? a : b) != null ? _a2 : "";
@@ -163,7 +168,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
             ref: fromBtnRef,
-            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+            children: from ? toAMPM(from.hh, from.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -189,7 +194,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
             ref: toBtnRef,
-            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+            children: to ? toAMPM(to.hh, to.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -213,7 +218,6 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Input.default,
       {
-        readOnly: true,
         value: display,
         placeholder,
         onClick: openPopover,

package/dist/TimeRangeField.mjs

@@ -45,10 +45,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const el = portalId ? document.getElementById(portalId) : null;
     setPortalRoot(el != null ? el : document.body);
   }, [portal, portalId]);
+  const toAMPM = (hh, mm) => {
+    const hr12 = hh % 12 === 0 ? 12 : hh % 12;
+    const mm2 = mm < 10 ? `0${mm}` : String(mm);
+    return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
+  };
   const display = useMemo(() => {
     var _a2;
-    const a = from ? fmtHHmm(from.hh, from.mm) : null;
-    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    const a = from ? toAMPM(from.hh, from.mm) : null;
+    const b = to ? toAMPM(to.hh, to.mm) : null;
     if (!a && !b) return "";
     if (a && b) return `${a} \u2013 ${b}`;
     return (_a2 = a != null ? a : b) != null ? _a2 : "";
@@ -130,7 +135,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
             ref: fromBtnRef,
-            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+            children: from ? toAMPM(from.hh, from.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -156,7 +161,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
             ref: toBtnRef,
-            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+            children: to ? toAMPM(to.hh, to.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -180,7 +185,6 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ jsx(
       Input,
       {
-        readOnly: true,
         value: display,
         placeholder,
         onClick: openPopover,

package/dist/index.d.mts

@@ -24,6 +24,7 @@ export { default as AppTopbar } from './AppTopbar.mjs';
 export { default as OrderButton } from './OrderButton.mjs';
 export { default as SearchInput } from './SearchInput.mjs';
 export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.mjs';
+export { MultiComboOption, default as MultiComboSelect, MultiComboSelectProps } from './MultiComboSelect.mjs';
 export { default as Sidebar } from './Sidebar.mjs';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.mjs';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.mjs';

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export { default as AppTopbar } from './AppTopbar.js';
 export { default as OrderButton } from './OrderButton.js';
 export { default as SearchInput } from './SearchInput.js';
 export { default as ReviewHistory, ReviewHistoryDialog } from './ReviewHistory.js';
+export { MultiComboOption, default as MultiComboSelect, MultiComboSelectProps } from './MultiComboSelect.js';
 export { default as Sidebar } from './Sidebar.js';
 export { default as CalendarPanel, CalendarPanelProps } from './CalendarPanel.js';
 export { MonthPopover, default as TimePopover, WeekPopover } from './TimePopover.js';

package/dist/index.js

@@ -49,6 +49,7 @@ __export(index_exports, {
   Input: () => import_Input.default,
   Money: () => import_Money.default,
   MonthPopover: () => import_TimePopover2.MonthPopover,
+  MultiComboSelect: () => import_MultiComboSelect.default,
   OrderButton: () => import_OrderButton.default,
   Pagination: () => import_Pagination.default,
   ReviewHistory: () => import_ReviewHistory.default,
@@ -98,6 +99,7 @@ var import_OrderButton = __toESM(require("./OrderButton"));
 var import_SearchInput = __toESM(require("./SearchInput"));
 var import_ReviewHistory = __toESM(require("./ReviewHistory"));
 var import_ReviewHistory2 = require("./ReviewHistory");
+var import_MultiComboSelect = __toESM(require("./MultiComboSelect"));
 var import_Sidebar = __toESM(require("./Sidebar"));
 var import_CalendarPanel = __toESM(require("./CalendarPanel"));
 var import_TimePopover = __toESM(require("./TimePopover"));
@@ -129,6 +131,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
   Input,
   Money,
   MonthPopover,
+  MultiComboSelect,
   OrderButton,
   Pagination,
   ReviewHistory,

package/dist/index.mjs

@@ -27,13 +27,14 @@ import { default as default24 } from "./OrderButton";
 import { default as default25 } from "./SearchInput";
 import { default as default26 } from "./ReviewHistory";
 import { ReviewHistoryDialog } from "./ReviewHistory";
-import { default as default27 } from "./Sidebar";
-import { default as default28 } from "./CalendarPanel";
-import { default as default29 } from "./TimePopover";
+import { default as default27 } from "./MultiComboSelect";
+import { default as default28 } from "./Sidebar";
+import { default as default29 } from "./CalendarPanel";
+import { default as default30 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default30 } from "./TimePanel";
-import { default as default31 } from "./TimeRangeField";
-import { default as default32 } from "./Steps";
+import { default as default31 } from "./TimePanel";
+import { default as default32 } from "./TimeRangeField";
+import { default as default33 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
 export {
@@ -44,7 +45,7 @@ export {
   default17 as BadgeCluster,
   default18 as Breadcrumb,
   default2 as Button,
-  default28 as CalendarPanel,
+  default29 as CalendarPanel,
   default14 as ChartCard,
   default5 as CheckboxPillsGroup,
   default8 as ColumnSelector,
@@ -57,22 +58,23 @@ export {
   default4 as Input,
   default20 as Money,
   MonthPopover,
+  default27 as MultiComboSelect,
   default24 as OrderButton,
   default12 as Pagination,
   default26 as ReviewHistory,
   ReviewHistoryDialog,
   default25 as SearchInput,
   default6 as Select,
-  default27 as Sidebar,
+  default28 as Sidebar,
   SortTh,
   default15 as StatCard,
-  default32 as Steps,
+  default33 as Steps,
   StepsNav,
   Td,
   Th,
   default21 as TimeAgo,
-  default30 as TimePanel,
-  default29 as TimePopover,
-  default31 as TimeRangeField,
+  default31 as TimePanel,
+  default30 as TimePopover,
+  default32 as TimeRangeField,
   WeekPopover
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",