framepexls-ui-lib 0.1.13 → 0.1.14

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

package/dist/TimeRangeField.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_Input = __toESM(require("./Input"));
+var import_Button = __toESM(require("./Button"));
 var import_TimePopover = __toESM(require("./TimePopover"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function parseHHmm(v) {
@@ -149,8 +150,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__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-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
           onClick: () => setOpen(false),
@@ -162,8 +164,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
@@ -172,8 +175,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -188,8 +192,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
@@ -198,8 +203,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -229,8 +235,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
         },
         disabled,
         rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
             onClick: (e) => {

package/dist/TimeRangeField.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Input from "./Input";
+import Button from "./Button";
 import TimePopover from "./TimePopover";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function parseHHmm(v) {
@@ -116,8 +117,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           type: "button",
           className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
           onClick: () => setOpen(false),
@@ -129,8 +131,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
@@ -139,8 +142,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -155,8 +159,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
@@ -165,8 +170,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -196,8 +202,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
         },
         disabled,
         rightSlot: /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
             onClick: (e) => {

package/dist/Toast.d.mts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ToastType = "default" | "success" | "error" | "warning" | "info";
+type ToastPlacement = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastAction = {
+    label: string;
+    onClick?: () => void;
+};
+type ToastInput = {
+    id?: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type?: ToastType;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+};
+type ToastItem = {
+    id: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type: ToastType;
+    duration: number;
+    dismissible: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+    createdAt: number;
+};
+type ToastContextValue = {
+    add: (t: ToastInput) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    update: (id: string, patch: Partial<ToastInput>) => void;
+    success: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    error: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    warning: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    info: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+};
+declare function useToast(): ToastContextValue;
+type ProviderProps = {
+    placement?: ToastPlacement;
+    max?: number;
+    duration?: number;
+    children?: React__default.ReactNode;
+};
+declare function ToastProvider({ placement, max, duration, children }: ProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default: {
+    Provider: typeof ToastProvider;
+};
+
+export { type ToastAction, type ToastInput, type ToastItem, type ToastPlacement, ToastProvider, type ToastType, _default as default, useToast };

package/dist/Toast.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ToastType = "default" | "success" | "error" | "warning" | "info";
+type ToastPlacement = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastAction = {
+    label: string;
+    onClick?: () => void;
+};
+type ToastInput = {
+    id?: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type?: ToastType;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+};
+type ToastItem = {
+    id: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type: ToastType;
+    duration: number;
+    dismissible: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+    createdAt: number;
+};
+type ToastContextValue = {
+    add: (t: ToastInput) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    update: (id: string, patch: Partial<ToastInput>) => void;
+    success: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    error: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    warning: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    info: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+};
+declare function useToast(): ToastContextValue;
+type ProviderProps = {
+    placement?: ToastPlacement;
+    max?: number;
+    duration?: number;
+    children?: React__default.ReactNode;
+};
+declare function ToastProvider({ placement, max, duration, children }: ProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default: {
+    Provider: typeof ToastProvider;
+};
+
+export { type ToastAction, type ToastInput, type ToastItem, type ToastPlacement, ToastProvider, type ToastType, _default as default, useToast };