framepexls-ui-lib 0.1.13 → 0.1.15

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" })
           }

package/dist/Sidebar.mjs

@@ -27,6 +27,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,
@@ -35,9 +131,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] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
@@ -83,7 +180,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__ */ jsxs("button", { onClick: onBrandClick, className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: onBrandClick, className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-black leading-none tracking-tight", children: brandInitials }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-4", children: brandTitle }),
@@ -111,7 +208,8 @@ function Sidebar({
             userMenuSlot,
             brandInitials,
             brandTitle,
-            brandSubtitle
+            brandSubtitle,
+            color
           }
         )
       }
@@ -155,7 +253,8 @@ function Sidebar({
                 userMenuSlot,
                 brandInitials,
                 brandTitle,
-                brandSubtitle
+                brandSubtitle,
+                color
               }
             )
           ]
@@ -175,12 +274,13 @@ function SidebarInner({
   userMenuSlot,
   brandInitials,
   brandTitle,
-  brandSubtitle
+  brandSubtitle,
+  color = "blue"
 }) {
   var _a, _b, _c, _d;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-1", children: [
-      /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-3", title: "Ir al inicio", children: [
+      /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", className: "flex items-center gap-3", title: "Ir al inicio", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-black tracking-tight", children: brandInitials }),
         !collapsed && /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
           /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold tracking-tight", children: brandTitle }),
@@ -201,9 +301,9 @@ function SidebarInner({
         }
       )
     ] }),
-    collapsed && /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl" }) }),
+    collapsed && /* @__PURE__ */ jsx("div", { className: "mt-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_a = user == null ? void 0 : user.avatarUrl) != null ? _a : void 0, radiusClass: "rounded-2xl", color }) }),
     !collapsed && /* @__PURE__ */ 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__ */ jsx(AvatarSquare, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl" }),
+      /* @__PURE__ */ jsx(AvatarSquare, { size: 48, src: (_b = user == null ? void 0 : user.avatarUrl) != null ? _b : void 0, radiusClass: "rounded-2xl", color }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold", children: (_c = user == null ? void 0 : user.name) != null ? _c : "Usuario" }),
         /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500", children: (_d = user == null ? void 0 : user.rol_principal) != null ? _d : "\u2014" })
@@ -218,7 +318,7 @@ function SidebarInner({
       if (visibles.length === 0) return null;
       return /* @__PURE__ */ jsxs("div", { children: [
         !collapsed && /* @__PURE__ */ jsx(GroupHeader, { title: groupName }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ jsx(RenderItem, { item, collapsed: collapsed != null ? collapsed : false, activeKey, go }, item.key)) })
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: visibles.map((item) => /* @__PURE__ */ jsx(RenderItem, { item, collapsed: collapsed != null ? collapsed : false, activeKey, go, color }, item.key)) })
       ] }, groupName);
     }) })
   ] });
@@ -227,7 +327,8 @@ function RenderItem({
   item,
   collapsed,
   activeKey,
-  go
+  go,
+  color = "blue"
 }) {
   var _a, _b, _c;
   const Icon = (_a = item.icon) != null ? _a : (() => null);
@@ -252,20 +353,22 @@ function RenderItem({
   }, [hasChildren, open, item.key]);
   if (hasChildren && collapsed) {
     return /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        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__ */ 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__ */ jsx(Icon, { className: "h-5 w-5" })
           }
@@ -280,16 +383,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__ */ jsxs("button", { type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(Button, { unstyled: true, type: "button", onClick: () => go(item.key), className: "flex min-w-0 flex-1 items-center gap-3", children: [
               /* @__PURE__ */ 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__ */ jsx(Icon, { className: "h-5 w-5" })
                 }
@@ -299,6 +402,8 @@ function RenderItem({
             /* @__PURE__ */ jsx(
               Button,
               {
+                iconOnly: true,
+                noPaddingX: true,
                 type: "button",
                 "aria-label": open ? "Contraer submen\xFA" : "Expandir submen\xFA",
                 onClick: (e) => {
@@ -310,7 +415,7 @@ function RenderItem({
                 leftIcon: /* @__PURE__ */ 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(" ")
               }
             )
@@ -328,12 +433,13 @@ function RenderItem({
           children: /* @__PURE__ */ 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__ */ jsx(
-              "button",
+              Button,
               {
+                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
               },
@@ -347,13 +453,15 @@ function RenderItem({
   }
   const active = item.key === activeKey;
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
+      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: [
@@ -362,7 +470,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__ */ jsx(Icon, { className: "h-5 w-5" })
           }

package/dist/Steps.d.mts

@@ -4,7 +4,6 @@ type StepDef = {
     key: string;
     label: string;
     description?: string;
-    /** Si quieres bloquear saltos hacia adelante */
     disabled?: boolean;
 };
 type StepsProps = {
@@ -16,7 +15,6 @@ type StepsProps = {
     compact?: boolean;
 };
 declare function Steps({ steps, current, onChange, className, clickable, compact, }: StepsProps): react_jsx_runtime.JSX.Element;
-/** Footer de navegación opcional (siguiente/anterior) */
 declare function StepsNav({ current, total, onPrev, onNext, nextLabel, finishLabel, disableNext, formId, }: {
     current: number;
     total: number;

package/dist/Steps.d.ts

@@ -4,7 +4,6 @@ type StepDef = {
     key: string;
     label: string;
     description?: string;
-    /** Si quieres bloquear saltos hacia adelante */
     disabled?: boolean;
 };
 type StepsProps = {
@@ -16,7 +15,6 @@ type StepsProps = {
     compact?: boolean;
 };
 declare function Steps({ steps, current, onChange, className, clickable, compact, }: StepsProps): react_jsx_runtime.JSX.Element;
-/** Footer de navegación opcional (siguiente/anterior) */
 declare function StepsNav({ current, total, onPrev, onNext, nextLabel, finishLabel, disableNext, formId, }: {
     current: number;
     total: number;