framepexls-ui-lib 0.1.14 → 0.1.16

package/dist/BadgeCluster.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(BadgeCluster_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
-var import_react2 = require("motion/react");
+var import_framer_motion = require("framer-motion");
 var import_Badge = __toESM(require("./Badge"));
 var import_Button = __toESM(require("./Button"));
 function BadgeCluster({
@@ -80,8 +80,8 @@ function BadgeCluster({
       window.removeEventListener("resize", onResize);
     };
   }, [open, align]);
-  const Popover = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react2.motion.div,
+  const Popover = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
     {
       initial: { opacity: 0, y: 6, scale: 0.98 },
       animate: { opacity: 1, y: 0, scale: 1 },

package/dist/BadgeCluster.mjs

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion } from "framer-motion";
 import Badge from "./Badge";
 import Button from "./Button";
 function BadgeCluster({

package/dist/CheckboxPillsGroup.js

@@ -51,27 +51,27 @@ const SIZE = {
   md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
 };
 const ACTIVE_SOFT = {
-  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-rose-50/80 text-rose-700 dark:border-rose-400/40 dark:bg-rose-500/10 dark:text-rose-200",
   sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-violet-50/80 text-violet-700 dark:border-violet-400/40 dark:bg-violet-500/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
   slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
 };
 const ACTIVE_OUTLINE = {
-  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  rose: "border-rose-400 text-rose-700 dark:text-rose-200",
   sky: "border-sky-400 text-sky-700 dark:text-sky-200",
-  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  violet: "border-violet-400 text-violet-700 dark:text-violet-200",
   emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
   indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
   amber: "border-amber-400 text-amber-700 dark:text-amber-200",
   slate: "border-slate-400 text-slate-700 dark:text-slate-200"
 };
 const ACTIVE_GLASS = {
-  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-gradient-to-br from-rose-50 to-rose-50/0 text-rose-700 dark:from-rose-400/10 dark:text-rose-200",
   sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-gradient-to-br from-violet-50 to-violet-50/0 text-violet-700 dark:from-violet-400/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
@@ -167,9 +167,9 @@ function CheckboxPillsGroup({
                   className: cx(
                     "grid place-items-center rounded-full",
                     {
-                      rose: "bg-blue-500/10 text-blue-600",
+                      rose: "bg-rose-500/10 text-rose-600",
                       sky: "bg-sky-500/10 text-sky-600",
-                      violet: "bg-blue-500/10 text-blue-600",
+                      violet: "bg-violet-500/10 text-violet-600",
                       emerald: "bg-emerald-500/10 text-emerald-600",
                       indigo: "bg-indigo-500/10 text-indigo-600",
                       amber: "bg-amber-500/10 text-amber-600",

package/dist/CheckboxPillsGroup.mjs

@@ -18,27 +18,27 @@ const SIZE = {
   md: { text: "text-sm", padX: "px-3.5", padY: "py-2", height: "h-9", icon: "h-4 w-4" }
 };
 const ACTIVE_SOFT = {
-  rose: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-rose-50/80 text-rose-700 dark:border-rose-400/40 dark:bg-rose-500/10 dark:text-rose-200",
   sky: "border-sky-300 bg-sky-50/80 text-sky-700 dark:border-sky-400/40 dark:bg-sky-500/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-blue-50/80 text-blue-700 dark:border-blue-400/40 dark:bg-blue-500/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-violet-50/80 text-violet-700 dark:border-violet-400/40 dark:bg-violet-500/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-emerald-50/80 text-emerald-700 dark:border-emerald-400/40 dark:bg-emerald-500/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-indigo-50/80 text-indigo-700 dark:border-indigo-400/40 dark:bg-indigo-500/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-amber-50/80 text-amber-700 dark:border-amber-400/40 dark:bg-amber-500/10 dark:text-amber-200",
   slate: "border-slate-300 bg-slate-50/80 text-slate-700 dark:border-slate-400/40 dark:bg-slate-500/10 dark:text-slate-200"
 };
 const ACTIVE_OUTLINE = {
-  rose: "border-blue-400 text-blue-700 dark:text-blue-200",
+  rose: "border-rose-400 text-rose-700 dark:text-rose-200",
   sky: "border-sky-400 text-sky-700 dark:text-sky-200",
-  violet: "border-blue-400 text-blue-700 dark:text-blue-200",
+  violet: "border-violet-400 text-violet-700 dark:text-violet-200",
   emerald: "border-emerald-400 text-emerald-700 dark:text-emerald-200",
   indigo: "border-indigo-400 text-indigo-700 dark:text-indigo-200",
   amber: "border-amber-400 text-amber-700 dark:text-amber-200",
   slate: "border-slate-400 text-slate-700 dark:text-slate-200"
 };
 const ACTIVE_GLASS = {
-  rose: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  rose: "border-rose-300 bg-gradient-to-br from-rose-50 to-rose-50/0 text-rose-700 dark:from-rose-400/10 dark:text-rose-200",
   sky: "border-sky-300 bg-gradient-to-br from-sky-50 to-sky-50/0 text-sky-700 dark:from-sky-400/10 dark:text-sky-200",
-  violet: "border-blue-300 bg-gradient-to-br from-blue-50 to-blue-50/0 text-blue-700 dark:from-blue-400/10 dark:text-blue-200",
+  violet: "border-violet-300 bg-gradient-to-br from-violet-50 to-violet-50/0 text-violet-700 dark:from-violet-400/10 dark:text-violet-200",
   emerald: "border-emerald-300 bg-gradient-to-br from-emerald-50 to-emerald-50/0 text-emerald-700 dark:from-emerald-400/10 dark:text-emerald-200",
   indigo: "border-indigo-300 bg-gradient-to-br from-indigo-50 to-indigo-50/0 text-indigo-700 dark:from-indigo-400/10 dark:text-indigo-200",
   amber: "border-amber-300 bg-gradient-to-br from-amber-50 to-amber-50/0 text-amber-700 dark:from-amber-400/10 dark:text-amber-200",
@@ -134,9 +134,9 @@ function CheckboxPillsGroup({
                   className: cx(
                     "grid place-items-center rounded-full",
                     {
-                      rose: "bg-blue-500/10 text-blue-600",
+                      rose: "bg-rose-500/10 text-rose-600",
                       sky: "bg-sky-500/10 text-sky-600",
-                      violet: "bg-blue-500/10 text-blue-600",
+                      violet: "bg-violet-500/10 text-violet-600",
                       emerald: "bg-emerald-500/10 text-emerald-600",
                       indigo: "bg-indigo-500/10 text-indigo-600",
                       amber: "bg-amber-500/10 text-amber-600",

package/dist/ColumnSelector.js

@@ -32,7 +32,7 @@ __export(ColumnSelector_exports, {
 });
 module.exports = __toCommonJS(ColumnSelector_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("motion/react");
+var import_framer_motion = require("framer-motion");
 var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 function ColumnSelector({
@@ -55,8 +55,8 @@ function ColumnSelector({
         children: "Columnas"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react.motion.div,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
       {
         initial: { opacity: 0, y: 6 },
         animate: { opacity: 1, y: 0 },

package/dist/ColumnSelector.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion } from "framer-motion";
 import Button from "./Button";
 import Input from "./Input";
 function ColumnSelector({

package/dist/Dialog.js

@@ -41,7 +41,7 @@ __export(Dialog_exports, {
 module.exports = __toCommonJS(Dialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_react2 = require("motion/react");
+var import_framer_motion = require("framer-motion");
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_Button = __toESM(require("./Button"));
 const sizeToMaxW = {
@@ -124,9 +124,9 @@ function DialogBase({
     if (!dismissibleBackdrop) return;
     if (e.target === e.currentTarget) onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react2.motion.div,
+      import_framer_motion.motion.div,
       {
         className: "fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm",
         initial: { opacity: 0 },
@@ -135,7 +135,7 @@ function DialogBase({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_react2.motion.div,
+      import_framer_motion.motion.div,
       {
         role: "dialog",
         "aria-modal": "true",

package/dist/Dialog.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import { motion, AnimatePresence } from "framer-motion";
 import ActionIconButton from "./ActionIconButton";
 import Button from "./Button";
 const sizeToMaxW = {

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_framer_motion = require("framer-motion");
+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_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.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 "framer-motion";
+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/MediaSelector.js

@@ -98,7 +98,7 @@ function MediaSelector({
         setOpenPicker(false);
         onClose == null ? void 0 : onClose();
       } }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartCard.default, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { onClick: () => {

package/dist/MediaSelector.mjs

@@ -65,7 +65,7 @@ function MediaSelector({
         setOpenPicker(false);
         onClose == null ? void 0 : onClose();
       } }),
-      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsx(ChartCard, { className: "lg:col-span-1", title: "Subir imagen", subtitle: /* @__PURE__ */ jsx("span", { children: "Arrastra una imagen o selecci\xF3nala" }), right: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Input, { unstyled: true, ref: inputRef, type: "file", accept, className: "hidden", onChange: (e) => onFiles(e.target.files) }),
           /* @__PURE__ */ jsx(Button, { onClick: () => {

package/dist/Sidebar.js

@@ -33,7 +33,7 @@ __export(Sidebar_exports, {
 module.exports = __toCommonJS(Sidebar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_react2 = require("motion/react");
+var import_framer_motion = require("framer-motion");
 var import_Button = __toESM(require("./Button"));
 var import_AvatarSquare = __toESM(require("./AvatarSquare"));
 var import_iconos = require("./iconos");
@@ -248,10 +248,10 @@ function Sidebar({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["hidden xl:block", "transition-[width] duration-200", collapsed ? "xl:w-20" : "xl:w-72"].join(" ") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: drawerOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_framer_motion.motion.div, { className: "fixed inset-0 z-40 xl:hidden", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/40" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_react2.motion.div,
+        import_framer_motion.motion.div,
         {
           role: "dialog",
           "aria-modal": "true",
@@ -455,8 +455,8 @@ function RenderItem({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_react2.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.div,
         {
           initial: { height: 0, opacity: 0, y: -4 },
           animate: { height: "auto", opacity: 1, y: 0 },

package/dist/Sidebar.mjs

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence, motion } from "framer-motion";
 import Button from "./Button";
 import AvatarSquare from "./AvatarSquare";
 import { CloseIcon, ChevronLeftRightIcon, MenuIcon } from "./iconos";

package/dist/StatCard.js

@@ -23,14 +23,14 @@ __export(StatCard_exports, {
 });
 module.exports = __toCommonJS(StatCard_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("motion/react");
-var import_react2 = require("react");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
 var import_recharts = require("recharts");
 function StatCard({ title, value, hint, spark }) {
   var _a;
-  const gid = (0, import_react2.useId)();
+  const gid = (0, import_react.useId)();
   const color = (_a = spark == null ? void 0 : spark.color) != null ? _a : "#10b981";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.25 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "h-full group relative overflow-hidden rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm ring-1 ring-black/5 backdrop-blur transition hover:shadow-md dark:border-white/10 dark:bg-white/5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative z-10", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs font-medium text-slate-500", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-2xl font-semibold tracking-tight", children: value }),

package/dist/StatCard.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "motion/react";
+import { motion } from "framer-motion";
 import { useId } from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
 function StatCard({ title, value, hint, spark }) {

package/dist/index.d.mts

@@ -2,6 +2,7 @@ export { default as Button } from './Button.mjs';
 export { default as ActionIconButton } from './ActionIconButton.mjs';
 export { default as Input, InputProps } from './Input.mjs';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.mjs';
+export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.mjs';
 export { default as Select } from './Select.mjs';
 export { ComboOption, ComboSection, default as ComboSelect, ComboSelectProps } from './ComboSelect.mjs';
 export { ColumnItem, default as ColumnSelector } from './ColumnSelector.mjs';

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { default as Button } from './Button.js';
 export { default as ActionIconButton } from './ActionIconButton.js';
 export { default as Input, InputProps } from './Input.js';
 export { default as CheckboxPillsGroup, CheckboxPillsGroupProps, PillsOption } from './CheckboxPillsGroup.js';
+export { FilterGroup, default as FiltersMultiSelect, FiltersMultiSelectProps } from './FiltersMultiSelect.js';
 export { default as Select } from './Select.js';
 export { ComboOption, ComboSection, default as ComboSelect, ComboSelectProps } from './ComboSelect.js';
 export { ColumnItem, default as ColumnSelector } from './ColumnSelector.js';

package/dist/index.js

@@ -48,6 +48,7 @@ __export(index_exports, {
   Drawer: () => import_Drawer.default,
   Dropdown: () => import_Dropdown.default,
   EmptyState: () => import_EmptyState.default,
+  FiltersMultiSelect: () => import_FiltersMultiSelect.default,
   InfoGrid: () => import_InfoGrid.default,
   Input: () => import_Input.default,
   Link: () => import_Link.default,
@@ -84,6 +85,7 @@ var import_Button = __toESM(require("./Button"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_Input = __toESM(require("./Input"));
 var import_CheckboxPillsGroup = __toESM(require("./CheckboxPillsGroup"));
+var import_FiltersMultiSelect = __toESM(require("./FiltersMultiSelect"));
 var import_Select = __toESM(require("./Select"));
 var import_ComboSelect = __toESM(require("./ComboSelect"));
 var import_ColumnSelector = __toESM(require("./ColumnSelector"));
@@ -149,6 +151,7 @@ __reExport(index_exports, require("./iconos"), module.exports);
   Drawer,
   Dropdown,
   EmptyState,
+  FiltersMultiSelect,
   InfoGrid,
   Input,
   Link,

package/dist/index.mjs

@@ -2,98 +2,100 @@ import { default as default2 } from "./Button";
 import { default as default3 } from "./ActionIconButton";
 import { default as default4 } from "./Input";
 import { default as default5 } from "./CheckboxPillsGroup";
-import { default as default6 } from "./Select";
-import { default as default7 } from "./ComboSelect";
-import { default as default8 } from "./ColumnSelector";
-import { default as default9 } from "./DateTimeField";
-import { default as default10 } from "./Dialog";
+import { default as default6 } from "./FiltersMultiSelect";
+import { default as default7 } from "./Select";
+import { default as default8 } from "./ComboSelect";
+import { default as default9 } from "./ColumnSelector";
+import { default as default10 } from "./DateTimeField";
+import { default as default11 } from "./Dialog";
 export * from "./Dialog";
-import { default as default11 } from "./Dropdown";
+import { default as default12 } from "./Dropdown";
 export * from "./Dropdown";
 import { Th, SortTh, Td } from "./Table";
-import { default as default12 } from "./Pagination";
-import { default as default13 } from "./InfoGrid";
-import { default as default14 } from "./ChartCard";
-import { default as default15 } from "./UploadCard";
-import { default as default16 } from "./MediaCard";
-import { default as default17 } from "./MediaSelector";
-import { default as default18 } from "./StatCard";
-import { default as default19 } from "./Badge";
-import { default as default20 } from "./BadgeCluster";
-import { default as default21 } from "./Breadcrumb";
-import { default as default22 } from "./EmptyState";
-import { default as default23 } from "./Money";
-import { default as default24 } from "./TimeAgo";
-import { default as default25 } from "./AvatarSquare";
-import { default as default26 } from "./AvatarGroup";
-import { default as default27 } from "./AppTopbar";
-import { default as default28 } from "./OrderButton";
-import { default as default29 } from "./SearchInput";
-import { default as default30 } from "./ReviewHistory";
+import { default as default13 } from "./Pagination";
+import { default as default14 } from "./InfoGrid";
+import { default as default15 } from "./ChartCard";
+import { default as default16 } from "./UploadCard";
+import { default as default17 } from "./MediaCard";
+import { default as default18 } from "./MediaSelector";
+import { default as default19 } from "./StatCard";
+import { default as default20 } from "./Badge";
+import { default as default21 } from "./BadgeCluster";
+import { default as default22 } from "./Breadcrumb";
+import { default as default23 } from "./EmptyState";
+import { default as default24 } from "./Money";
+import { default as default25 } from "./TimeAgo";
+import { default as default26 } from "./AvatarSquare";
+import { default as default27 } from "./AvatarGroup";
+import { default as default28 } from "./AppTopbar";
+import { default as default29 } from "./OrderButton";
+import { default as default30 } from "./SearchInput";
+import { default as default31 } from "./ReviewHistory";
 import { ReviewHistoryDialog } from "./ReviewHistory";
-import { default as default31 } from "./MultiComboSelect";
-import { default as default32 } from "./Sidebar";
-import { default as default33 } from "./Card";
-import { default as default34 } from "./Drawer";
-import { default as default35 } from "./Tooltip";
-import { default as default36 } from "./Link";
+import { default as default32 } from "./MultiComboSelect";
+import { default as default33 } from "./Sidebar";
+import { default as default34 } from "./Card";
+import { default as default35 } from "./Drawer";
+import { default as default36 } from "./Tooltip";
+import { default as default37 } from "./Link";
 import { ToastProvider, useToast } from "./Toast";
-import { default as default37 } from "./CalendarPanel";
-import { default as default38 } from "./TimePopover";
+import { default as default38 } from "./CalendarPanel";
+import { default as default39 } from "./TimePopover";
 import { WeekPopover, MonthPopover } from "./TimePopover";
-import { default as default39 } from "./TimePanel";
-import { default as default40 } from "./TimeRangeField";
-import { default as default41 } from "./Steps";
+import { default as default40 } from "./TimePanel";
+import { default as default41 } from "./TimeRangeField";
+import { default as default42 } from "./Steps";
 import { StepsNav } from "./Steps";
 export * from "./iconos";
 export {
   default3 as ActionIconButton,
-  default27 as AppTopbar,
-  default26 as AvatarGroup,
-  default25 as AvatarSquare,
-  default19 as Badge,
-  default20 as BadgeCluster,
-  default21 as Breadcrumb,
+  default28 as AppTopbar,
+  default27 as AvatarGroup,
+  default26 as AvatarSquare,
+  default20 as Badge,
+  default21 as BadgeCluster,
+  default22 as Breadcrumb,
   default2 as Button,
-  default37 as CalendarPanel,
-  default33 as Card,
-  default14 as ChartCard,
+  default38 as CalendarPanel,
+  default34 as Card,
+  default15 as ChartCard,
   default5 as CheckboxPillsGroup,
-  default8 as ColumnSelector,
-  default7 as ComboSelect,
-  default9 as DateTimeField,
-  default10 as Dialog,
-  default34 as Drawer,
-  default11 as Dropdown,
-  default22 as EmptyState,
-  default13 as InfoGrid,
+  default9 as ColumnSelector,
+  default8 as ComboSelect,
+  default10 as DateTimeField,
+  default11 as Dialog,
+  default35 as Drawer,
+  default12 as Dropdown,
+  default23 as EmptyState,
+  default6 as FiltersMultiSelect,
+  default14 as InfoGrid,
   default4 as Input,
-  default36 as Link,
-  default16 as MediaCard,
-  default17 as MediaSelector,
-  default23 as Money,
+  default37 as Link,
+  default17 as MediaCard,
+  default18 as MediaSelector,
+  default24 as Money,
   MonthPopover,
-  default31 as MultiComboSelect,
-  default28 as OrderButton,
-  default12 as Pagination,
-  default30 as ReviewHistory,
+  default32 as MultiComboSelect,
+  default29 as OrderButton,
+  default13 as Pagination,
+  default31 as ReviewHistory,
   ReviewHistoryDialog,
-  default29 as SearchInput,
-  default6 as Select,
-  default32 as Sidebar,
+  default30 as SearchInput,
+  default7 as Select,
+  default33 as Sidebar,
   SortTh,
-  default18 as StatCard,
-  default41 as Steps,
+  default19 as StatCard,
+  default42 as Steps,
   StepsNav,
   Td,
   Th,
-  default24 as TimeAgo,
-  default39 as TimePanel,
-  default38 as TimePopover,
-  default40 as TimeRangeField,
+  default25 as TimeAgo,
+  default40 as TimePanel,
+  default39 as TimePopover,
+  default41 as TimeRangeField,
   ToastProvider,
-  default35 as Tooltip,
-  default15 as UploadCard,
+  default36 as Tooltip,
+  default16 as UploadCard,
   WeekPopover,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",
@@ -27,11 +27,11 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "next": ">=13",
-    "motion": "^12.23.16",
-    "recharts": "^3.2.1"
+    "react": ">=18.2.0 || ^19",
+    "react-dom": ">=18.2.0 || ^19",
+    "next": "^15.0.0",
+    "framer-motion": "^12.23.0",
+    "recharts": ">=3.1.0 <4"
   },
   "devDependencies": {
     "typescript": "^5.6.3",
@@ -40,9 +40,12 @@
     "@types/react-dom": "^19",
     "tailwindcss": "^4.1.13",
     "@tailwindcss/postcss": "^4.1.13",
-    "motion": "^12.23.16",
+    "framer-motion": "^12.23.20",
     "recharts": "^3.2.1",
-    "next": "15.5.3"
+    "next": "15.4.3",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-is": "^19.0.0"
   },
   "scripts": {
     "build": "tsup",