framepexls-ui-lib 0.1.8 → 0.1.10

package/dist/Badge.d.mts

@@ -2,8 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
-declare function Badge({ tone, children, onClick, title, className, }: {
+type Size = "sm" | "md" | "lg";
+declare function Badge({ tone, size, children, onClick, title, className, }: {
     tone?: Tone;
+    size?: Size;
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent) => void;
     title?: string;

package/dist/Badge.d.ts

@@ -2,8 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 
 type Tone = "emerald" | "indigo" | "amber" | "slate" | "rose" | "sky" | "violet" | "cyan" | "teal" | "pink" | "orange" | "lime";
-declare function Badge({ tone, children, onClick, title, className, }: {
+type Size = "sm" | "md" | "lg";
+declare function Badge({ tone, size, children, onClick, title, className, }: {
     tone?: Tone;
+    size?: Size;
     children: React__default.ReactNode;
     onClick?: (e: React__default.MouseEvent) => void;
     title?: string;

package/dist/Badge.js

@@ -37,27 +37,37 @@ const tones = {
   orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
   lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
 };
+const sizeClasses = {
+  sm: { wrap: "px-2 py-0.5 text-[11px]", dot: "h-1.5 w-1.5", gap: "gap-1.5" },
+  md: { wrap: "px-2.5 py-1 text-xs", dot: "h-1.5 w-1.5", gap: "gap-2" },
+  lg: { wrap: "px-3 py-1.5 text-sm", dot: "h-2 w-2", gap: "gap-2" }
+};
 function Badge({
   tone = "slate",
+  size = "md",
   children,
   onClick,
   title,
   className = ""
 }) {
+  var _a;
   const clickable = typeof onClick === "function";
+  const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "span",
     {
       title,
       onClick,
       className: [
-        "inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold truncate",
+        "inline-flex items-center rounded-full font-semibold truncate",
         tones[tone],
+        sz.wrap,
+        sz.gap,
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
         className
       ].join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: ["inline-block rounded-full bg-current opacity-70", sz.dot].join(" ") }),
         children
       ]
     }

package/dist/Badge.mjs

@@ -14,27 +14,37 @@ const tones = {
   orange: "bg-orange-100 text-orange-700 ring-1 ring-orange-200",
   lime: "bg-lime-100 text-lime-700 ring-1 ring-lime-200"
 };
+const sizeClasses = {
+  sm: { wrap: "px-2 py-0.5 text-[11px]", dot: "h-1.5 w-1.5", gap: "gap-1.5" },
+  md: { wrap: "px-2.5 py-1 text-xs", dot: "h-1.5 w-1.5", gap: "gap-2" },
+  lg: { wrap: "px-3 py-1.5 text-sm", dot: "h-2 w-2", gap: "gap-2" }
+};
 function Badge({
   tone = "slate",
+  size = "md",
   children,
   onClick,
   title,
   className = ""
 }) {
+  var _a;
   const clickable = typeof onClick === "function";
+  const sz = (_a = sizeClasses[size]) != null ? _a : sizeClasses.md;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       title,
       onClick,
       className: [
-        "inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold truncate",
+        "inline-flex items-center rounded-full font-semibold truncate",
         tones[tone],
+        sz.wrap,
+        sz.gap,
         clickable ? "cursor-pointer hover:opacity-90 active:scale-[0.98]" : "",
         className
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" }),
+        /* @__PURE__ */ jsx("span", { className: ["inline-block rounded-full bg-current opacity-70", sz.dot].join(" ") }),
         children
       ]
     }

package/dist/Button.d.mts

@@ -11,7 +11,11 @@ type ButtonProps = {
     className?: string;
     active?: boolean;
     inverted?: boolean;
+    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, ...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

@@ -11,7 +11,11 @@ type ButtonProps = {
     className?: string;
     active?: boolean;
     inverted?: boolean;
+    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, ...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

@@ -36,10 +36,27 @@ function Button({
   type = "button",
   active = false,
   inverted = false,
+  iconOnly = false,
+  icon,
+  noPaddingX = false,
+  unstyled = false,
   ...rest
 }) {
-  const base = "inline-flex items-center justify-center gap-2 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 px-3 text-sm" : size === "lg" ? "h-11 px-5 text-base" : "h-10 px-4 text-sm";
+  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 = (() => {
     switch (variant) {
       case "primary":
@@ -55,6 +72,12 @@ function Button({
     }
   })();
   const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const showText = hasChildren && !iconOnly;
+  const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
+  const iconRight = !loading ? rightIcon : void 0;
+  const visibleParts = [iconLeft, showText ? true : null, iconRight].filter(Boolean).length;
+  const gapClass = visibleParts > 1 ? "gap-2" : "gap-0";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
@@ -66,6 +89,7 @@ function Button({
         sizes,
         variantClass,
         activeClass,
+        gapClass,
         block ? "w-full" : "",
         className
       ].join(" "),
@@ -75,9 +99,9 @@ function Button({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 0 0-9-9", className: "opacity-90" })
         ] }),
-        !loading && leftIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children }),
-        !loading && rightIcon
+        iconLeft,
+        showText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children }),
+        iconRight
       ]
     }
   );

package/dist/Button.mjs

@@ -13,10 +13,27 @@ function Button({
   type = "button",
   active = false,
   inverted = false,
+  iconOnly = false,
+  icon,
+  noPaddingX = false,
+  unstyled = false,
   ...rest
 }) {
-  const base = "inline-flex items-center justify-center gap-2 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 px-3 text-sm" : size === "lg" ? "h-11 px-5 text-base" : "h-10 px-4 text-sm";
+  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 = (() => {
     switch (variant) {
       case "primary":
@@ -32,6 +49,12 @@ function Button({
     }
   })();
   const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const showText = hasChildren && !iconOnly;
+  const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;
+  const iconRight = !loading ? rightIcon : void 0;
+  const visibleParts = [iconLeft, showText ? true : null, iconRight].filter(Boolean).length;
+  const gapClass = visibleParts > 1 ? "gap-2" : "gap-0";
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -43,6 +66,7 @@ function Button({
         sizes,
         variantClass,
         activeClass,
+        gapClass,
         block ? "w-full" : "",
         className
       ].join(" "),
@@ -52,9 +76,9 @@ function Button({
           /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", className: "opacity-25" }),
           /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", className: "opacity-90" })
         ] }),
-        !loading && leftIcon,
-        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
-        !loading && rightIcon
+        iconLeft,
+        showText && /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        iconRight
       ]
     }
   );

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

@@ -361,11 +361,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 +386,7 @@ function DateTimeField({
         onClear: () => emit(null),
         "aria-haspopup": "dialog",
         "aria-expanded": open,
+        readOnly: isReadOnly,
         ...inputProps
       }
     ),

package/dist/DateTimeField.mjs

@@ -328,11 +328,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 +353,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"
+        }
+      ) })
+    ] })
+  ] });
+}