framepexls-ui-lib 0.1.12 → 0.1.14

package/dist/ReviewHistory.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Dialog from "./Dialog";
+import Button from "./Button";
 import Badge from "./Badge";
 function ReviewHistory({
   items,
@@ -25,7 +26,7 @@ function ReviewHistory({
         /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-muted", children: r.by_name || r.by_email ? `${(_a = r.by_name) != null ? _a : ""} ${r.by_email ? `\xB7 ${r.by_email}` : ""}` : r.user_id ? "Usuario interno" : "Invitado" })
       ] }, r.id);
     }) }),
-    items.length > 3 && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx("button", { className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
+    items.length > 3 && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(Button, { unstyled: true, className: "text-sm text-blue-600 hover:underline dark:text-blue-400", onClick: onViewAll, children: "Ver todos" }) })
   ] });
 }
 function ReviewHistoryDialog({
@@ -49,14 +50,7 @@ function ReviewHistoryDialog({
         ] }, r.id);
       })
     ] }) }),
-    /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(
-      "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: onClose,
-        children: "Cerrar"
-      }
-    ) })
+    /* @__PURE__ */ jsx(Dialog.Footer, { align: "end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", className: "shadow-sm", onClick: onClose, children: "Cerrar" }) })
   ] });
 }
 function formatDateTime(value) {

package/dist/SearchInput.js

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

package/dist/SearchInput.mjs

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

package/dist/Select.js

@@ -34,6 +34,7 @@ __export(Select_exports, {
 module.exports = __toCommonJS(Select_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
@@ -162,8 +163,9 @@ function ModernSelect({
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           ref: btnRef,
           id: selectId,
           type: "button",
@@ -202,8 +204,9 @@ function ModernSelect({
         }
       ),
       clearable && value !== "" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           onClick: clear,
           className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",

package/dist/Select.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 const S = {
   sm: { h: "h-8", text: "text-[13px]", radius: "rounded-xl", padX: "px-3", itemPad: "px-3 py-1.5" },
   md: { h: "h-10", text: "text-sm", radius: "rounded-2xl", padX: "px-3.5", itemPad: "px-3.5 py-2" },
@@ -129,8 +130,9 @@ function ModernSelect({
     label && /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[13px] font-semibold", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           ref: btnRef,
           id: selectId,
           type: "button",
@@ -169,8 +171,9 @@ function ModernSelect({
         }
       ),
       clearable && value !== "" && !disabled && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           type: "button",
           onClick: clear,
           className: "absolute right-9 top-1/2 -translate-y-1/2 grid h-6 w-6 place-items-center rounded-md text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:bg-white/10",

package/dist/Sidebar.d.mts

@@ -23,13 +23,12 @@ type SidebarProps = {
     user?: SidebarUser;
     userMenuSlot?: React__default.ReactNode;
     onBrandClick?: () => void;
-    /** LocalStorage key para persistir colapsado */
     collapsedKey?: string;
-    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
     brandInitials?: string;
     brandTitle?: string;
     brandSubtitle?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, color, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };

package/dist/Sidebar.d.ts

@@ -23,13 +23,12 @@ type SidebarProps = {
     user?: SidebarUser;
     userMenuSlot?: React__default.ReactNode;
     onBrandClick?: () => void;
-    /** LocalStorage key para persistir colapsado */
     collapsedKey?: string;
-    /** Rotulación de marca, valores por defecto mantienen estilos existentes */
     brandInitials?: string;
     brandTitle?: string;
     brandSubtitle?: string;
+    color?: "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ items, activeKey, onNavigate, user, userMenuSlot, onBrandClick, collapsedKey, brandInitials, brandTitle, brandSubtitle, color, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 export { type SidebarItem, type SidebarProps, type SidebarUser, Sidebar as default };

package/dist/Sidebar.js

@@ -60,6 +60,102 @@ function ChevronDown({ open }) {
     }
   ) });
 }
+const WRAP_ACTIVE = {
+  slate: "bg-slate-600/20 ring-1 ring-slate-300 dark:bg-slate-600/25",
+  gray: "bg-gray-600/20 ring-1 ring-gray-300 dark:bg-gray-600/25",
+  zinc: "bg-zinc-600/20 ring-1 ring-zinc-300 dark:bg-zinc-600/25",
+  neutral: "bg-neutral-600/20 ring-1 ring-neutral-300 dark:bg-neutral-600/25",
+  stone: "bg-stone-600/20 ring-1 ring-stone-300 dark:bg-stone-600/25",
+  red: "bg-red-600/20 ring-1 ring-red-300 dark:bg-red-600/25",
+  orange: "bg-orange-600/20 ring-1 ring-orange-300 dark:bg-orange-600/25",
+  amber: "bg-amber-600/20 ring-1 ring-amber-300 dark:bg-amber-600/25",
+  yellow: "bg-yellow-500/20 ring-1 ring-yellow-300 dark:bg-yellow-500/25",
+  lime: "bg-lime-600/20 ring-1 ring-lime-300 dark:bg-lime-600/25",
+  green: "bg-green-600/20 ring-1 ring-green-300 dark:bg-green-600/25",
+  emerald: "bg-emerald-600/20 ring-1 ring-emerald-300 dark:bg-emerald-600/25",
+  teal: "bg-teal-600/20 ring-1 ring-teal-300 dark:bg-teal-600/25",
+  cyan: "bg-cyan-600/20 ring-1 ring-cyan-300 dark:bg-cyan-600/25",
+  sky: "bg-sky-600/20 ring-1 ring-sky-300 dark:bg-sky-600/25",
+  blue: "bg-blue-600/20 ring-1 ring-blue-300 dark:bg-blue-600/25",
+  indigo: "bg-indigo-600/20 ring-1 ring-indigo-300 dark:bg-indigo-600/25",
+  violet: "bg-violet-600/20 ring-1 ring-violet-300 dark:bg-violet-600/25",
+  purple: "bg-purple-600/20 ring-1 ring-purple-300 dark:bg-purple-600/25",
+  fuchsia: "bg-fuchsia-600/20 ring-1 ring-fuchsia-300 dark:bg-fuchsia-600/25",
+  pink: "bg-pink-600/20 ring-1 ring-pink-300 dark:bg-pink-600/25",
+  rose: "bg-rose-600/20 ring-1 ring-rose-300 dark:bg-rose-600/25"
+};
+const ICON_BORDER_ACTIVE = {
+  slate: "border-slate-300/60 dark:border-slate-700/40",
+  gray: "border-gray-300/60 dark:border-gray-700/40",
+  zinc: "border-zinc-300/60 dark:border-zinc-700/40",
+  neutral: "border-neutral-300/60 dark:border-neutral-700/40",
+  stone: "border-stone-300/60 dark:border-stone-700/40",
+  red: "border-red-300/60 dark:border-red-700/40",
+  orange: "border-orange-300/60 dark:border-orange-700/40",
+  amber: "border-amber-300/60 dark:border-amber-700/40",
+  yellow: "border-yellow-300/60 dark:border-yellow-700/40",
+  lime: "border-lime-300/60 dark:border-lime-700/40",
+  green: "border-green-300/60 dark:border-green-700/40",
+  emerald: "border-emerald-300/60 dark:border-emerald-700/40",
+  teal: "border-teal-300/60 dark:border-teal-700/40",
+  cyan: "border-cyan-300/60 dark:border-cyan-700/40",
+  sky: "border-sky-300/60 dark:border-sky-700/40",
+  blue: "border-blue-300/60 dark:border-blue-700/40",
+  indigo: "border-indigo-300/60 dark:border-indigo-700/40",
+  violet: "border-violet-300/60 dark:border-violet-700/40",
+  purple: "border-purple-300/60 dark:border-purple-700/40",
+  fuchsia: "border-fuchsia-300/60 dark:border-fuchsia-700/40",
+  pink: "border-pink-300/60 dark:border-pink-700/40",
+  rose: "border-rose-300/60 dark:border-rose-700/40"
+};
+const TOGGLE_BORDER_ACTIVE = {
+  slate: "border-slate-200 dark:border-slate-700/40",
+  gray: "border-gray-200 dark:border-gray-700/40",
+  zinc: "border-zinc-200 dark:border-zinc-700/40",
+  neutral: "border-neutral-200 dark:border-neutral-700/40",
+  stone: "border-stone-200 dark:border-stone-700/40",
+  red: "border-red-200 dark:border-red-700/40",
+  orange: "border-orange-200 dark:border-orange-700/40",
+  amber: "border-amber-200 dark:border-amber-700/40",
+  yellow: "border-yellow-200 dark:border-yellow-700/40",
+  lime: "border-lime-200 dark:border-lime-700/40",
+  green: "border-green-200 dark:border-green-700/40",
+  emerald: "border-emerald-200 dark:border-emerald-700/40",
+  teal: "border-teal-200 dark:border-teal-700/40",
+  cyan: "border-cyan-200 dark:border-cyan-700/40",
+  sky: "border-sky-200 dark:border-sky-700/40",
+  blue: "border-blue-200 dark:border-blue-700/40",
+  indigo: "border-indigo-200 dark:border-indigo-700/40",
+  violet: "border-violet-200 dark:border-violet-700/40",
+  purple: "border-purple-200 dark:border-purple-700/40",
+  fuchsia: "border-fuchsia-200 dark:border-fuchsia-700/40",
+  pink: "border-pink-200 dark:border-pink-700/40",
+  rose: "border-rose-200 dark:border-rose-700/40"
+};
+const SUBITEM_ACTIVE = {
+  slate: "bg-slate-50 text-slate-700 ring-1 ring-slate-200 dark:bg-slate-900/20 dark:text-slate-200 dark:ring-slate-700/40 rounded-xl",
+  gray: "bg-gray-50 text-gray-700 ring-1 ring-gray-200 dark:bg-gray-900/20 dark:text-gray-200 dark:ring-gray-700/40 rounded-xl",
+  zinc: "bg-zinc-50 text-zinc-700 ring-1 ring-zinc-200 dark:bg-zinc-900/20 dark:text-zinc-200 dark:ring-zinc-700/40 rounded-xl",
+  neutral: "bg-neutral-50 text-neutral-700 ring-1 ring-neutral-200 dark:bg-neutral-900/20 dark:text-neutral-200 dark:ring-neutral-700/40 rounded-xl",
+  stone: "bg-stone-50 text-stone-700 ring-1 ring-stone-200 dark:bg-stone-900/20 dark:text-stone-200 dark:ring-stone-700/40 rounded-xl",
+  red: "bg-red-50 text-red-700 ring-1 ring-red-200 dark:bg-red-900/20 dark:text-red-200 dark:ring-red-700/40 rounded-xl",
+  orange: "bg-orange-50 text-orange-700 ring-1 ring-orange-200 dark:bg-orange-900/20 dark:text-orange-200 dark:ring-orange-700/40 rounded-xl",
+  amber: "bg-amber-50 text-amber-700 ring-1 ring-amber-200 dark:bg-amber-900/20 dark:text-amber-200 dark:ring-amber-700/40 rounded-xl",
+  yellow: "bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-200 dark:ring-yellow-700/40 rounded-xl",
+  lime: "bg-lime-50 text-lime-700 ring-1 ring-lime-200 dark:bg-lime-900/20 dark:text-lime-200 dark:ring-lime-700/40 rounded-xl",
+  green: "bg-green-50 text-green-700 ring-1 ring-green-200 dark:bg-green-900/20 dark:text-green-200 dark:ring-green-700/40 rounded-xl",
+  emerald: "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-200 dark:ring-emerald-700/40 rounded-xl",
+  teal: "bg-teal-50 text-teal-700 ring-1 ring-teal-200 dark:bg-teal-900/20 dark:text-teal-200 dark:ring-teal-700/40 rounded-xl",
+  cyan: "bg-cyan-50 text-cyan-700 ring-1 ring-cyan-200 dark:bg-cyan-900/20 dark:text-cyan-200 dark:ring-cyan-700/40 rounded-xl",
+  sky: "bg-sky-50 text-sky-700 ring-1 ring-sky-200 dark:bg-sky-900/20 dark:text-sky-200 dark:ring-sky-700/40 rounded-xl",
+  blue: "bg-blue-50 text-blue-700 ring-1 ring-blue-200 dark:bg-blue-900/20 dark:text-blue-200 dark:ring-blue-700/40 rounded-xl",
+  indigo: "bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200 dark:bg-indigo-900/20 dark:text-indigo-200 dark:ring-indigo-700/40 rounded-xl",
+  violet: "bg-violet-50 text-violet-700 ring-1 ring-violet-200 dark:bg-violet-900/20 dark:text-violet-200 dark:ring-violet-700/40 rounded-xl",
+  purple: "bg-purple-50 text-purple-700 ring-1 ring-purple-200 dark:bg-purple-900/20 dark:text-purple-200 dark:ring-purple-700/40 rounded-xl",
+  fuchsia: "bg-fuchsia-50 text-fuchsia-700 ring-1 ring-fuchsia-200 dark:bg-fuchsia-900/20 dark:text-fuchsia-200 dark:ring-fuchsia-700/40 rounded-xl",
+  pink: "bg-pink-50 text-pink-700 ring-1 ring-pink-200 dark:bg-pink-900/20 dark:text-pink-200 dark:ring-pink-700/40 rounded-xl",
+  rose: "bg-rose-50 text-rose-700 ring-1 ring-rose-200 dark:bg-rose-900/20 dark:text-rose-200 dark:ring-rose-700/40 rounded-xl"
+};
 function Sidebar({
   items,
   activeKey,
@@ -68,9 +164,10 @@ function Sidebar({
   userMenuSlot,
   onBrandClick,
   collapsedKey = "ga:sidebar-collapsed",
-  brandInitials = "C",
-  brandTitle = "Campaign",
-  brandSubtitle = "Tablero"
+  brandInitials = "BM",
+  brandTitle = "Bellamia",
+  brandSubtitle = "Tablero",
+  color = "blue"
 }) {
   const [drawerOpen, setDrawerOpen] = (0, import_react.useState)(false);
   const [collapsed, setCollapsed] = (0, import_react.useState)(false);
@@ -116,7 +213,7 @@ function Sidebar({
           className: "h-9 w-9 p-0 !gap-0 rounded-xl border border-slate-200 bg-white text-slate-700 shadow-sm hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5 dark:text-slate-200 dark:hover:bg-white/10"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { onClick: onBrandClick, className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: onBrandClick, className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black leading-none tracking-tight", children: brandInitials }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold leading-4", children: brandTitle }),
@@ -144,7 +241,8 @@ function Sidebar({
             userMenuSlot,
             brandInitials,
             brandTitle,
-            brandSubtitle
+            brandSubtitle,
+            color
           }
         )
       }
@@ -188,7 +286,8 @@ function Sidebar({
                 userMenuSlot,
                 brandInitials,
                 brandTitle,
-                brandSubtitle
+                brandSubtitle,
+                color
               }
             )
           ]
@@ -208,12 +307,13 @@ function SidebarInner({
   userMenuSlot,
   brandInitials,
   brandTitle,
-  brandSubtitle
+  brandSubtitle,
+  color = "blue"
 }) {
   var _a, _b, _c, _d;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { className: "flex items-center gap-3", title: "Ir al inicio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
         !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "leading-tight", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
@@ -234,9 +334,9 @@ function SidebarInner({
         }
       )
     ] }),
-    collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl" }) }),
+    collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl", color }) }),
     !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white p-2 pr-3 shadow-sm dark:border-white/10 dark:bg:white/5 dark:bg-white/5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AvatarSquare.default, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl", color }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500", children: (_d = user == null ? void 0 : user.rol_principal) != null ? _d : "\u2014" })
@@ -251,7 +351,7 @@ function SidebarInner({
       if (visibles.length === 0) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupHeader, { title: groupName }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderItem, { item, collapsed: collapsed != null ? collapsed : false, activeKey, go }, item.key)) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderItem, { item, collapsed: collapsed != null ? collapsed : false, activeKey, go, color }, item.key)) })
       ] }, groupName);
     }) })
   ] });
@@ -260,7 +360,8 @@ function RenderItem({
   item,
   collapsed,
   activeKey,
-  go
+  go,
+  color = "blue"
 }) {
   var _a, _b, _c;
   const Icon = (_a = item.icon) != null ? _a : (() => null);
@@ -285,20 +386,22 @@ function RenderItem({
   }, [hasChildren, open, item.key]);
   if (hasChildren && collapsed) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_Button.default,
       {
+        unstyled: true,
+        type: "button",
         onClick: () => go(item.key),
         title: item.label,
         className: [
           "group flex w-full items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition justify-center",
-          isActive ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+          isActive ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
         ].join(" "),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border transition",
-              isActive ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+              isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
             ].join(" "),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
           }
@@ -313,16 +416,16 @@ function RenderItem({
         {
           className: [
             "flex w-full min-w-0 items-center rounded-2xl px-3 py-2 text-[15px] transition gap-2",
-            isActive ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
+            isActive ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5"
           ].join(" "),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.default, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
                 {
                   className: [
                     "grid h-9 w-9 place-items-center rounded-xl border transition",
-                    isActive ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+                    isActive ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
                   ].join(" "),
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
                 }
@@ -332,6 +435,8 @@ function RenderItem({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Button.default,
               {
+                iconOnly: true,
+                noPaddingX: true,
                 type: "button",
                 "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
                 onClick: (e) => {
@@ -343,7 +448,7 @@ function RenderItem({
                 leftIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { open }),
                 className: [
                   "h-8 w-8 shrink-0 rounded-lg p-0 !gap-0 border",
-                  isActive ? "border-blue-200 bg-white/80 dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
+                  isActive ? `${TOGGLE_BORDER_ACTIVE[color]} bg-white/80 dark:bg-white/10` : "border-slate-200 bg-white dark:border-white/10 dark:bg-white/5"
                 ].join(" ")
               }
             )
@@ -361,12 +466,13 @@ function RenderItem({
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-xl border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5", children: children.map((ch) => {
             const active2 = ch.key === activeKey;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 onClick: () => go(ch.key),
                 className: [
                   "block w-full text-left px-3 py-2 text-[14px] transition",
-                  active2 ? "bg-blue-50 text-blue-700 ring-1 ring-blue-200 dark:bg-blue-900/20 dark:text-blue-200 dark:ring-blue-700/40 rounded-xl" : "text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-white/10"
+                  active2 ? SUBITEM_ACTIVE[color] : "text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-white/10"
                 ].join(" "),
                 children: ch.label
               },
@@ -380,13 +486,15 @@ function RenderItem({
   }
   const active = item.key === activeKey;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    import_Button.default,
     {
+      unstyled: true,
+      type: "button",
       onClick: () => go(item.key),
       title: collapsed ? item.label : void 0,
       className: [
         "group flex w-full min-w-0 items-center gap-3 rounded-2xl px-3 py-2 text-left text-[15px] transition",
-        active ? "bg-blue-600/20 text-slate-900 ring-1 ring-blue-300 dark:bg-blue-600/25 dark:text-white" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5",
+        active ? `${WRAP_ACTIVE[color]} text-slate-900 dark:text-white` : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/5",
         collapsed ? "justify-center" : ""
       ].join(" "),
       children: [
@@ -395,7 +503,7 @@ function RenderItem({
           {
             className: [
               "grid h-9 w-9 place-items-center rounded-xl border text-slate-700 transition group-hover:scale-105 dark:text-slate-200",
-              active ? "border-blue-300/60 bg-white shadow-sm dark:border-blue-700/40 dark:bg-white/10" : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
+              active ? `${ICON_BORDER_ACTIVE[color]} bg-white shadow-sm dark:bg-white/10` : "border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/5"
             ].join(" "),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-5 w-5" })
           }