framepexls-ui-lib 0.1.12 → 0.1.14

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;

package/dist/Steps.js

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Steps_exports = {};
 __export(Steps_exports, {
@@ -24,6 +34,7 @@ __export(Steps_exports, {
 });
 module.exports = __toCommonJS(Steps_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_Button = __toESM(require("./Button"));
 const cx = (...a) => a.filter(Boolean).join(" ");
 function Steps({
   steps,
@@ -45,8 +56,9 @@ function Steps({
         const state = i < current ? "done" : i === current ? "current" : "upcoming";
         const canClick = clickable && i <= current && !s.disabled && onChange;
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             disabled: !canClick,
             onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
@@ -90,28 +102,29 @@ function StepsNav({
   finishLabel = "Finalizar",
   disableNext,
   formId
-  // <- NUEVO
 }) {
   const last = current === total - 1;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_Button.default,
       {
         type: "button",
         disabled: current === 0,
         onClick: onPrev,
-        className: "inline-flex h-9 items-center rounded-xl border border-slate-200 bg-white px-3 text-sm hover:bg-slate-50 disabled:opacity-50 dark:border-white/10 dark:bg-white/5",
+        variant: "secondary",
+        size: "sm",
         children: "Atr\xE1s"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
+      import_Button.default,
       {
         type: "submit",
         form: formId,
         disabled: disableNext,
-        className: "inline-flex h-9 items-center rounded-xl bg-blue-600 px-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50",
         onClick: onNext,
+        variant: "danger",
+        size: "sm",
         children: last ? finishLabel : nextLabel
       }
     )

package/dist/Steps.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "./Button";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function Steps({
   steps,
@@ -21,8 +22,9 @@ function Steps({
         const state = i < current ? "done" : i === current ? "current" : "upcoming";
         const canClick = clickable && i <= current && !s.disabled && onChange;
         return /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             disabled: !canClick,
             onClick: () => canClick && (onChange == null ? void 0 : onChange(i)),
@@ -66,28 +68,29 @@ function StepsNav({
   finishLabel = "Finalizar",
   disableNext,
   formId
-  // <- NUEVO
 }) {
   const last = current === total - 1;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
     /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
         type: "button",
         disabled: current === 0,
         onClick: onPrev,
-        className: "inline-flex h-9 items-center rounded-xl border border-slate-200 bg-white px-3 text-sm hover:bg-slate-50 disabled:opacity-50 dark:border-white/10 dark:bg-white/5",
+        variant: "secondary",
+        size: "sm",
         children: "Atr\xE1s"
       }
     ),
     /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
         type: "submit",
         form: formId,
         disabled: disableNext,
-        className: "inline-flex h-9 items-center rounded-xl bg-blue-600 px-3 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50",
         onClick: onNext,
+        variant: "danger",
+        size: "sm",
         children: last ? finishLabel : nextLabel
       }
     )

package/dist/Table.js

@@ -36,6 +36,7 @@ __export(Table_exports, {
 module.exports = __toCommonJS(Table_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("./Button"));
 function useMounted() {
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
@@ -91,8 +92,9 @@ function SortTh({
       "data-asc": asc ? "1" : "0",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             onClick,
             className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/5",

package/dist/Table.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import Button from "./Button";
 function useMounted() {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
@@ -56,8 +57,9 @@ function SortTh({
       "data-asc": asc ? "1" : "0",
       children: [
         /* @__PURE__ */ jsxs(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             onClick,
             className: "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1 transition hover:bg-slate-100/60 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:hover:bg-white/5",

package/dist/TimePanel.js

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TimePanel_exports = {};
 __export(TimePanel_exports, {
@@ -24,6 +34,7 @@ __export(TimePanel_exports, {
 module.exports = __toCommonJS(TimePanel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_Button = __toESM(require("./Button"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function TimePopover({
   anchorRef,
@@ -89,21 +100,22 @@ function TimePopover({
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Hora" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: chip, onWheel: onWheelH, children: pad2(hh) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Minutos" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: chip, onWheel: onWheelM, children: pad2(mm) }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [0, 15, 30, 45].map((v) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 className: "rounded-xl px-2 py-1 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
                 onPointerDown: (e) => e.preventDefault(),
                 onClick: () => onChange(hh, v),
@@ -118,8 +130,9 @@ function TimePopover({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
               onPointerDown: (e) => e.preventDefault(),
               onClick: () => {
@@ -130,8 +143,9 @@ function TimePopover({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-95 dark:bg-white dark:text-slate-900",
               onPointerDown: (e) => e.preventDefault(),
               onClick: onClose,

package/dist/TimePanel.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
+import Button from "./Button";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function TimePopover({
   anchorRef,
@@ -66,21 +67,22 @@ function TimePopover({
           /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
             /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Hora" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
+              /* @__PURE__ */ jsx(Button, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incH, "aria-label": "Aumentar hora", children: "+" }),
               /* @__PURE__ */ jsx("div", { className: chip, onWheel: onWheelH, children: pad2(hh) }),
-              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
+              /* @__PURE__ */ jsx(Button, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decH, "aria-label": "Disminuir hora", children: "\u2212" })
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-slate-100 p-2 dark:border-white/10", children: [
             /* @__PURE__ */ jsx("div", { className: "mb-2 text-xs font-semibold text-slate-500 dark:text-slate-400", children: "Minutos" }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
+              /* @__PURE__ */ jsx(Button, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: incM, "aria-label": "Aumentar minutos", children: "+" }),
               /* @__PURE__ */ jsx("div", { className: chip, onWheel: onWheelM, children: pad2(mm) }),
-              /* @__PURE__ */ jsx("button", { className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
+              /* @__PURE__ */ jsx(Button, { unstyled: true, className: btn, onPointerDown: (e) => e.preventDefault(), onClick: decM, "aria-label": "Disminuir minutos", children: "\u2212" })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: [0, 15, 30, 45].map((v) => /* @__PURE__ */ jsxs(
-              "button",
+              Button,
               {
+                unstyled: true,
                 className: "rounded-xl px-2 py-1 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
                 onPointerDown: (e) => e.preventDefault(),
                 onClick: () => onChange(hh, v),
@@ -95,8 +97,9 @@ function TimePopover({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:bg-white/5",
               onPointerDown: (e) => e.preventDefault(),
               onClick: () => {
@@ -107,8 +110,9 @@ function TimePopover({
             }
           ),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-95 dark:bg-white dark:text-slate-900",
               onPointerDown: (e) => e.preventDefault(),
               onClick: onClose,