framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/Dropdown.d.mts

@@ -32,11 +32,8 @@ declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUn
     kbd?: string;
     danger?: boolean;
     disabled?: boolean;
-    /** Permiso(s) requerido(s) para ver/ejecutar este item */
     require?: string | string[];
-    /** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
     hideIfUnauthorized?: boolean;
-    /** Si no tiene permisos, deshabilitar (default true si no se oculta) */
     disableIfUnauthorized?: boolean;
     onSelect?: () => void;
 } & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;

package/dist/Dropdown.d.ts

@@ -32,11 +32,8 @@ declare function Item({ children, icon, kbd, danger, disabled, require, hideIfUn
     kbd?: string;
     danger?: boolean;
     disabled?: boolean;
-    /** Permiso(s) requerido(s) para ver/ejecutar este item */
     require?: string | string[];
-    /** Si no tiene permisos, ocultar por completo (default true, o el del Dropdown) */
     hideIfUnauthorized?: boolean;
-    /** Si no tiene permisos, deshabilitar (default true si no se oculta) */
     disableIfUnauthorized?: boolean;
     onSelect?: () => void;
 } & HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element | null;

package/dist/Dropdown.js

@@ -1,8 +1,10 @@
 "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)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 Dropdown_exports = {};
 __export(Dropdown_exports, {
@@ -32,6 +42,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_iconos = require("./iconos/index");
+var import_Button = __toESM(require("./Button"));
 const DropdownCtx = (0, import_react.createContext)(null);
 const useDropdown = () => {
   const ctx = (0, import_react.useContext)(DropdownCtx);
@@ -125,25 +136,29 @@ function Trigger({
       setOpen(true);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "button",
-    {
-      ref: triggerRef,
-      "aria-haspopup": "menu",
-      "aria-controls": menuId,
-      "aria-expanded": open,
-      onClick,
-      onKeyDown,
-      className: [
-        "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
-        "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
-        "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-        className
-      ].join(" "),
-      ...btnProps,
-      children
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = btnProps;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        unstyled: true,
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-controls": menuId,
+        "aria-expanded": open,
+        onClick,
+        onKeyDown,
+        className: [
+          "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
+          "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
+          "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+          className
+        ].join(" "),
+        ...safe,
+        children
+      }
+    );
+  })();
 }
 function Content({
   children,
@@ -289,29 +304,33 @@ function Item({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
-    {
-      role: "menuitem",
-      "data-disabled": disabled || shouldDisable ? "true" : "false",
-      disabled: disabled || shouldDisable,
-      onClick,
-      onKeyDown,
-      className: [
-        "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
-        disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
-        className
-      ].join(" "),
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate leading-none", children })
-        ] }),
-        kbd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
-      ]
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = rest;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Button.default,
+      {
+        unstyled: true,
+        role: "menuitem",
+        "data-disabled": disabled || shouldDisable ? "true" : "false",
+        disabled: disabled || shouldDisable,
+        onClick,
+        onKeyDown,
+        className: [
+          "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
+          disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
+          className
+        ].join(" "),
+        ...safe,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 items-center gap-2", children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate leading-none", children })
+          ] }),
+          kbd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
+        ]
+      }
+    );
+  })();
 }
 const DropdownExport = Object.assign(Dropdown, {
   Trigger,

package/dist/Dropdown.mjs

@@ -12,6 +12,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { MenuPuntosVerticalIcon } from "./iconos/index";
+import Button from "./Button";
 const DropdownCtx = createContext(null);
 const useDropdown = () => {
   const ctx = useContext(DropdownCtx);
@@ -105,25 +106,29 @@ function Trigger({
       setOpen(true);
     }
   };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref: triggerRef,
-      "aria-haspopup": "menu",
-      "aria-controls": menuId,
-      "aria-expanded": open,
-      onClick,
-      onKeyDown,
-      className: [
-        "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
-        "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
-        "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
-        className
-      ].join(" "),
-      ...btnProps,
-      children
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = btnProps;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        unstyled: true,
+        ref: triggerRef,
+        "aria-haspopup": "menu",
+        "aria-controls": menuId,
+        "aria-expanded": open,
+        onClick,
+        onKeyDown,
+        className: [
+          "inline-flex items-center gap-2 rounded-xl border border-slate-300/70 bg-white px-3 py-2",
+          "text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 active:scale-[0.98]",
+          "dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10",
+          className
+        ].join(" "),
+        ...safe,
+        children
+      }
+    );
+  })();
 }
 function Content({
   children,
@@ -269,29 +274,33 @@ function Item({
       setOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      role: "menuitem",
-      "data-disabled": disabled || shouldDisable ? "true" : "false",
-      disabled: disabled || shouldDisable,
-      onClick,
-      onKeyDown,
-      className: [
-        "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
-        disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
-        className
-      ].join(" "),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
-          /* @__PURE__ */ jsx("span", { className: "truncate leading-none", children })
-        ] }),
-        kbd && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
-      ]
-    }
-  );
+  return (() => {
+    const { color: _c, ...safe } = rest;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        unstyled: true,
+        role: "menuitem",
+        "data-disabled": disabled || shouldDisable ? "true" : "false",
+        disabled: disabled || shouldDisable,
+        onClick,
+        onKeyDown,
+        className: [
+          "group flex w-full items-center justify-between gap-3 rounded-xl px-2.5 py-2 text-left text-sm",
+          disabled || shouldDisable ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : danger ? "text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10",
+          className
+        ].join(" "),
+        ...safe,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+            icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center h-4 w-4 text-slate-500 dark:text-slate-400", children: icon }),
+            /* @__PURE__ */ jsx("span", { className: "truncate leading-none", children })
+          ] }),
+          kbd && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-md border border-slate-200/80 bg-white px-1.5 py-0.5 text-[11px] text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-400", children: kbd })
+        ]
+      }
+    );
+  })();
 }
 const DropdownExport = Object.assign(Dropdown, {
   Trigger,

package/dist/FiltersMultiSelect.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { PillsOption, CheckboxPillsGroupProps } from './CheckboxPillsGroup.mjs';
+
+type FilterGroup = {
+    key: string;
+    label?: React__default.ReactNode;
+    options: PillsOption[];
+    value: string[];
+    multiple?: boolean;
+    pillsProps?: Omit<CheckboxPillsGroupProps, "options" | "value" | "onChange" | "multiple" | "label">;
+    onChange?: (next: string[]) => void;
+};
+type FiltersMultiSelectProps = {
+    groups: FilterGroup[];
+    onChange?: (nextByKey: Record<string, string[]>, changedKey: string) => void;
+    className?: string;
+    gap?: number | string;
+    color?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
+    open?: boolean;
+    onToggleOpen?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    triggerLabel?: React__default.ReactNode;
+    showActiveCount?: boolean;
+    align?: "start" | "end";
+};
+declare function FiltersMultiSelect({ groups, onChange, className, gap, color, open: controlledOpen, onToggleOpen, triggerLabel, showActiveCount, align, }: FiltersMultiSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type FilterGroup, type FiltersMultiSelectProps, FiltersMultiSelect as default };

package/dist/FiltersMultiSelect.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { PillsOption, CheckboxPillsGroupProps } from './CheckboxPillsGroup.js';
+
+type FilterGroup = {
+    key: string;
+    label?: React__default.ReactNode;
+    options: PillsOption[];
+    value: string[];
+    multiple?: boolean;
+    pillsProps?: Omit<CheckboxPillsGroupProps, "options" | "value" | "onChange" | "multiple" | "label">;
+    onChange?: (next: string[]) => void;
+};
+type FiltersMultiSelectProps = {
+    groups: FilterGroup[];
+    onChange?: (nextByKey: Record<string, string[]>, changedKey: string) => void;
+    className?: string;
+    gap?: number | string;
+    color?: "rose" | "sky" | "violet" | "emerald" | "indigo" | "amber" | "slate";
+    open?: boolean;
+    onToggleOpen?: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    triggerLabel?: React__default.ReactNode;
+    showActiveCount?: boolean;
+    align?: "start" | "end";
+};
+declare function FiltersMultiSelect({ groups, onChange, className, gap, color, open: controlledOpen, onToggleOpen, triggerLabel, showActiveCount, align, }: FiltersMultiSelectProps): react_jsx_runtime.JSX.Element;
+
+export { type FilterGroup, type FiltersMultiSelectProps, FiltersMultiSelect as default };

package/dist/FiltersMultiSelect.js

@@ -0,0 +1,136 @@
+"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 FiltersMultiSelect_exports = {};
+__export(FiltersMultiSelect_exports, {
+  default: () => FiltersMultiSelect
+});
+module.exports = __toCommonJS(FiltersMultiSelect_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("motion/react");
+var import_CheckboxPillsGroup = __toESM(require("./CheckboxPillsGroup"));
+var import_Button = __toESM(require("./Button"));
+const clsx = (...a) => a.filter(Boolean).join(" ");
+function FiltersMultiSelect({
+  groups,
+  onChange,
+  className,
+  gap = 12,
+  color,
+  open: controlledOpen,
+  onToggleOpen,
+  triggerLabel = "Filtros",
+  showActiveCount = true,
+  align = "start"
+}) {
+  const currentMap = import_react.default.useMemo(() => {
+    const m = {};
+    for (const g of groups) m[g.key] = Array.isArray(g.value) ? g.value : [];
+    return m;
+  }, [groups]);
+  const [uncontrolledOpen, setUncontrolledOpen] = import_react.default.useState(false);
+  const isControlled = typeof controlledOpen === "boolean" && typeof onToggleOpen === "function";
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = isControlled ? onToggleOpen : setUncontrolledOpen;
+  const rootRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    const onDocClick = (e) => {
+      if (!open) return;
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("click", onDocClick);
+    return () => window.removeEventListener("click", onDocClick);
+  }, [open, setOpen]);
+  const onGroupChange = (key, next, cb) => {
+    cb == null ? void 0 : cb(next);
+    if (onChange) {
+      const m = { ...currentMap, [key]: next };
+      onChange(m, key);
+    }
+  };
+  const activeCount = import_react.default.useMemo(
+    () => Object.values(currentMap).reduce((acc, arr) => acc + (Array.isArray(arr) ? arr.length : 0), 0),
+    [currentMap]
+  );
+  const panelStyle = typeof gap === "number" ? { gap } : { gap: void 0 };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, className: clsx("relative inline-block", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Button.default,
+      {
+        unstyled: true,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        className: clsx(
+          "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
+          "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
+          "dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:focus:ring-white/10"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: triggerLabel }),
+          showActiveCount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-white/10 dark:text-slate-200", children: activeCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: clsx("h-4 w-4 transition", open && "rotate-180"), fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react2.motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -6 },
+        className: clsx(
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+          align === "end" ? "right-0" : "left-0"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_CheckboxPillsGroup.default,
+            {
+              size: "sm",
+              options: g.options,
+              value: g.value,
+              onChange: (next) => onGroupChange(g.key, next, g.onChange),
+              multiple: (_a = g.multiple) != null ? _a : true,
+              label: g.label,
+              ...{
+                ...g.pillsProps,
+                color: (_c = (_b = g.pillsProps) == null ? void 0 : _b.color) != null ? _c : color
+              }
+            }
+          ) }, g.key);
+        }) })
+      }
+    ) })
+  ] });
+}

package/dist/FiltersMultiSelect.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AnimatePresence, motion } from "motion/react";
+import CheckboxPillsGroup from "./CheckboxPillsGroup";
+import Button from "./Button";
+const clsx = (...a) => a.filter(Boolean).join(" ");
+function FiltersMultiSelect({
+  groups,
+  onChange,
+  className,
+  gap = 12,
+  color,
+  open: controlledOpen,
+  onToggleOpen,
+  triggerLabel = "Filtros",
+  showActiveCount = true,
+  align = "start"
+}) {
+  const currentMap = React.useMemo(() => {
+    const m = {};
+    for (const g of groups) m[g.key] = Array.isArray(g.value) ? g.value : [];
+    return m;
+  }, [groups]);
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const isControlled = typeof controlledOpen === "boolean" && typeof onToggleOpen === "function";
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = isControlled ? onToggleOpen : setUncontrolledOpen;
+  const rootRef = React.useRef(null);
+  React.useEffect(() => {
+    const onDocClick = (e) => {
+      if (!open) return;
+      if (!rootRef.current) return;
+      if (!rootRef.current.contains(e.target)) setOpen(false);
+    };
+    window.addEventListener("click", onDocClick);
+    return () => window.removeEventListener("click", onDocClick);
+  }, [open, setOpen]);
+  const onGroupChange = (key, next, cb) => {
+    cb == null ? void 0 : cb(next);
+    if (onChange) {
+      const m = { ...currentMap, [key]: next };
+      onChange(m, key);
+    }
+  };
+  const activeCount = React.useMemo(
+    () => Object.values(currentMap).reduce((acc, arr) => acc + (Array.isArray(arr) ? arr.length : 0), 0),
+    [currentMap]
+  );
+  const panelStyle = typeof gap === "number" ? { gap } : { gap: void 0 };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: clsx("relative inline-block", className), children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        unstyled: true,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        className: clsx(
+          "relative inline-flex items-center gap-2 min-h-[44px] rounded-2xl border border-slate-200 bg-white px-3 pr-9 text-sm text-slate-900 shadow-sm outline-none transition",
+          "hover:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-300",
+          "dark:border-white/10 dark:bg-white/10 dark:text-slate-100 dark:focus:ring-white/10"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: triggerLabel }),
+          showActiveCount && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-white/10 dark:text-slate-200", children: activeCount }),
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 dark:border-white/10 dark:bg-white/5", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: clsx("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" }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -6 },
+        className: clsx(
+          "absolute z-20 mt-2 w-[min(96vw,720px)] overflow-hidden rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
+          align === "end" ? "right-0" : "left-0"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap", style: panelStyle, children: groups.map((g) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+            CheckboxPillsGroup,
+            {
+              size: "sm",
+              options: g.options,
+              value: g.value,
+              onChange: (next) => onGroupChange(g.key, next, g.onChange),
+              multiple: (_a = g.multiple) != null ? _a : true,
+              label: g.label,
+              ...{
+                ...g.pillsProps,
+                color: (_c = (_b = g.pillsProps) == null ? void 0 : _b.color) != null ? _c : color
+              }
+            }
+          ) }, g.key);
+        }) })
+      }
+    ) })
+  ] });
+}
+export {
+  FiltersMultiSelect as default
+};

package/dist/Input.d.mts

@@ -7,6 +7,7 @@ type InputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "si
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     error?: boolean;
@@ -15,6 +16,7 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<React__defaul
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { type InputProps, Input as default };

package/dist/Input.d.ts

@@ -7,6 +7,7 @@ type InputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "si
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 };
 declare const Input: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     error?: boolean;
@@ -15,6 +16,7 @@ declare const Input: React__default.ForwardRefExoticComponent<Omit<React__defaul
     clearable?: boolean;
     onClear?: () => void;
     tone?: "default" | "danger";
+    unstyled?: boolean;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 export { type InputProps, Input as default };