framepexls-ui-lib 0.1.13 → 0.1.15

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,

package/dist/TimePopover.js

@@ -37,6 +37,8 @@ module.exports = __toCommonJS(TimePopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_Button = __toESM(require("./Button"));
+var import_Input = __toESM(require("./Input"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function TimePopover({
   anchorEl,
@@ -148,8 +150,9 @@ function TimePopover({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incH(1),
@@ -158,8 +161,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
+              import_Input.default,
               {
+                unstyled: true,
                 inputMode: "numeric",
                 "aria-label": "Hora",
                 value: pad2(is12h ? hour12 : H),
@@ -184,8 +188,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incH(-1),
@@ -196,8 +201,9 @@ function TimePopover({
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incM(+step),
@@ -206,8 +212,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "input",
+              import_Input.default,
               {
+                unstyled: true,
                 inputMode: "numeric",
                 "aria-label": "Minutos",
                 value: pad2(M),
@@ -223,8 +230,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "button",
+              import_Button.default,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incM(-step),
@@ -240,8 +248,9 @@ function TimePopover({
           const light = active ? "bg-slate-900 text-white ring-slate-900" : "ring-slate-200 hover:bg-slate-50";
           const dark = active ? "dark:bg-white dark:text-slate-900 dark:ring-white" : "dark:ring-white/10 dark:hover:bg-white/10";
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               type: "button",
               className: `${base} ${light} ${dark}`,
               "aria-pressed": active,
@@ -257,8 +266,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,
               type: "button",
               className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
               onClick: () => {
@@ -270,8 +280,9 @@ function TimePopover({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            import_Button.default,
             {
+              unstyled: true,
               type: "button",
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
               onClick: onClose,
@@ -342,8 +353,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year, month - 1, 1)),
           children: "\u25C0"
@@ -351,8 +363,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year, month + 1, 1)),
           children: "\u25B6"
@@ -362,8 +375,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
       const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
           onClick: () => onPick(w.from, w.to),
           children: [
@@ -445,8 +459,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
           children: "\u25C0"
@@ -454,8 +469,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
           children: "\u25B6"
@@ -468,8 +484,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
       const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           className: `${base} ${light} ${dark}`,
           onClick: () => onPick(new Date(year, idx, 1)),
           children: m

package/dist/TimePopover.mjs

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import Button from "./Button";
+import Input from "./Input";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function TimePopover({
   anchorEl,
@@ -113,8 +115,9 @@ function TimePopover({
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incH(1),
@@ -123,8 +126,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
+                unstyled: true,
                 inputMode: "numeric",
                 "aria-label": "Hora",
                 value: pad2(is12h ? hour12 : H),
@@ -149,8 +153,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incH(-1),
@@ -161,8 +166,9 @@ function TimePopover({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incM(+step),
@@ -171,8 +177,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ jsx(
-              "input",
+              Input,
               {
+                unstyled: true,
                 inputMode: "numeric",
                 "aria-label": "Minutos",
                 value: pad2(M),
@@ -188,8 +195,9 @@ function TimePopover({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
+                unstyled: true,
                 type: "button",
                 className: "h-8 rounded-lg ring-1 ring-slate-200 hover:bg-slate-50 active:scale-95 dark:ring-white/10 dark:hover:bg-white/10",
                 onClick: () => incM(-step),
@@ -205,8 +213,9 @@ function TimePopover({
           const light = active ? "bg-slate-900 text-white ring-slate-900" : "ring-slate-200 hover:bg-slate-50";
           const dark = active ? "dark:bg-white dark:text-slate-900 dark:ring-white" : "dark:ring-white/10 dark:hover:bg-white/10";
           return /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               className: `${base} ${light} ${dark}`,
               "aria-pressed": active,
@@ -222,8 +231,9 @@ function TimePopover({
         }) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               className: "rounded-xl px-2.5 py-1.5 text-sm ring-1 ring-slate-200 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
               onClick: () => {
@@ -235,8 +245,9 @@ function TimePopover({
             }
           ),
           /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              unstyled: true,
               type: "button",
               className: "rounded-xl bg-slate-900 px-3 py-1.5 text-sm text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
               onClick: onClose,
@@ -307,8 +318,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year, month - 1, 1)),
           children: "\u25C0"
@@ -316,8 +328,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       ),
       /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year, month + 1, 1)),
           children: "\u25B6"
@@ -327,8 +340,9 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
       const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
       return /* @__PURE__ */ jsxs(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
           onClick: () => onPick(w.from, w.to),
           children: [
@@ -410,8 +424,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
           children: "\u25C0"
@@ -419,8 +434,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       ),
       /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: year }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
           onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
           children: "\u25B6"
@@ -433,8 +449,9 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
       const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
       return /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           className: `${base} ${light} ${dark}`,
           onClick: () => onPick(new Date(year, idx, 1)),
           children: m