framepexls-ui-lib 0.1.11 → 0.1.13

package/dist/AppTopbar.d.mts

@@ -1,17 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type TopbarAction = {
+    label: string;
+    onClick?: () => void;
+};
 type Props = {
     title: string;
     subtitle?: string;
-    primary?: {
-        label: string;
-        onClick?: () => void;
-    };
-    secondary?: {
-        label: string;
-        onClick?: () => void;
-    };
+    primary?: TopbarAction;
+    secondary?: TopbarAction;
+    actions?: TopbarAction[];
 };
-declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.d.ts

@@ -1,17 +1,16 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+type TopbarAction = {
+    label: string;
+    onClick?: () => void;
+};
 type Props = {
     title: string;
     subtitle?: string;
-    primary?: {
-        label: string;
-        onClick?: () => void;
-    };
-    secondary?: {
-        label: string;
-        onClick?: () => void;
-    };
+    primary?: TopbarAction;
+    secondary?: TopbarAction;
+    actions?: TopbarAction[];
 };
-declare function AppTopbar({ title, subtitle, secondary, primary }: Props): react_jsx_runtime.JSX.Element;
+declare function AppTopbar({ title, subtitle, secondary, primary, actions }: Props): react_jsx_runtime.JSX.Element;
 
 export { AppTopbar as default };

package/dist/AppTopbar.js

@@ -23,13 +23,22 @@ __export(AppTopbar_exports, {
 });
 module.exports = __toCommonJS(AppTopbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-function AppTopbar({ title, subtitle, secondary, primary }) {
+function AppTopbar({ title, subtitle, secondary, primary, actions }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-slate-500", children: subtitle })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+      Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          onClick: a.onClick,
+          className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+          children: a.label
+        },
+        `action-${idx}-${a.label}`
+      )),
       secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "button",
         {

package/dist/AppTopbar.mjs

@@ -1,12 +1,21 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AppTopbar({ title, subtitle, secondary, primary }) {
+function AppTopbar({ title, subtitle, secondary, primary, actions }) {
   return /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-30 border-b border-black/5 bg-white backdrop-blur-xl dark:bg-[#0b0a0a]/60", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 xl:px-8 xl:pl-20", children: /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center justify-between", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight", children: title }),
       subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: subtitle })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      Array.isArray(actions) && actions.map((a, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: a.onClick,
+          className: "rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium shadow-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/5",
+          children: a.label
+        },
+        `action-${idx}-${a.label}`
+      )),
       secondary && /* @__PURE__ */ jsx(
         "button",
         {

package/dist/Button.js

@@ -71,7 +71,7 @@ function Button({
         return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
     }
   })();
-  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
   const hasChildren = children !== void 0 && children !== null && children !== false;
   const showText = hasChildren && !iconOnly;
   const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;

package/dist/Button.mjs

@@ -48,7 +48,7 @@ function Button({
         return "bg-blue-600 text-white hover:opacity-90 active:scale-[.98] dark:bg-blue-500";
     }
   })();
-  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100" : "" : "";
+  const activeClass = active ? variant === "primary" ? "ring-2 ring-slate-300/60 dark:ring-white/20" : variant === "ghost" ? inverted ? "bg-white/15 text-white shadow-sm" : "bg-slate-100 text-slate-900 ring-1 ring-slate-300 dark:ring-white/15 shadow-sm" : variant === "outline" ? inverted ? "bg-white/10 text-white" : "bg-slate-50 ring-1 ring-slate-300 dark:ring-white/15" : variant === "secondary" ? inverted ? "bg-white/15 text-white" : "bg-slate-100 ring-1 ring-slate-300/80 dark:ring-white/15" : "" : "";
   const hasChildren = children !== void 0 && children !== null && children !== false;
   const showText = hasChildren && !iconOnly;
   const iconLeft = !loading ? leftIcon != null ? leftIcon : iconOnly ? icon != null ? icon : children : void 0 : void 0;

package/dist/TimePopover.d.mts

@@ -7,8 +7,9 @@ type Props = {
     onChange: (hh: number, mm: number) => void;
     onClose: () => void;
     step?: number;
+    format?: "24h" | "ampm";
 };
-declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
+declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step, format }: Props): React.ReactPortal;
 declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
     anchorEl: HTMLElement | null;
     cursor: Date;

package/dist/TimePopover.d.ts

@@ -7,8 +7,9 @@ type Props = {
     onChange: (hh: number, mm: number) => void;
     onClose: () => void;
     step?: number;
+    format?: "24h" | "ampm";
 };
-declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
+declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step, format }: Props): React.ReactPortal;
 declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
     anchorEl: HTMLElement | null;
     cursor: Date;

package/dist/TimePopover.js

@@ -44,7 +44,8 @@ function TimePopover({
   mm,
   onChange,
   onClose,
-  step = 5
+  step = 5,
+  format = "ampm"
 }) {
   const popRef = React.useRef(null);
   const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
@@ -115,6 +116,13 @@ function TimePopover({
       incM(-step);
     } else if (e.key === "Enter") onClose();
   };
+  const is12h = format === "ampm";
+  const meridiem = H < 12 ? "AM" : "PM";
+  const hour12 = H % 12 === 0 ? 12 : H % 12;
+  const to24h = (h12, md) => {
+    if (h12 === 12) return md === "AM" ? 0 : 12;
+    return md === "AM" ? h12 : h12 + 12;
+  };
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -132,9 +140,9 @@ function TimePopover({
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
           "Vista: ",
           (() => {
-            const hr12 = H % 12 === 0 ? 12 : H % 12;
             const mm2 = M < 10 ? `0${M}` : String(M);
-            return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
+            if (is12h) return `${hour12}:${mm2} ${meridiem}`;
+            return `${pad2(H)}:${mm2}`;
           })()
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -154,14 +162,23 @@ function TimePopover({
               {
                 inputMode: "numeric",
                 "aria-label": "Hora",
-                value: pad2(H),
+                value: pad2(is12h ? hour12 : H),
                 onChange: (e) => {
                   const v = e.target.value.replace(/\D/g, "").slice(-2);
-                  if (!v) return;
+                  if (v.length === 0) return;
                   let n = parseInt(v, 10);
                   if (Number.isNaN(n)) return;
-                  if (n > 23) n = 23;
-                  commit(n, M);
+                  if (is12h) {
+                    if (n === 0) n = 12;
+                    if (n > 12) n = 12;
+                    if (n < 1) n = 1;
+                    const h24 = to24h(n, meridiem);
+                    commit(h24, M);
+                  } else {
+                    if (n > 23) n = 23;
+                    if (n < 0) n = 0;
+                    commit(n, M);
+                  }
                 },
                 className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
               }
@@ -217,6 +234,27 @@ function TimePopover({
             )
           ] })
         ] }),
+        is12h && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: ["AM", "PM"].map((md) => {
+          const active = meridiem === md;
+          const base = "min-w-[48px] rounded-xl px-2 py-1 text-sm ring-1 ";
+          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",
+            {
+              type: "button",
+              className: `${base} ${light} ${dark}`,
+              "aria-pressed": active,
+              onClick: () => {
+                if (md === meridiem) return;
+                const h24 = to24h(hour12, md);
+                commit(h24, M);
+              },
+              children: md
+            },
+            md
+          );
+        }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",

package/dist/TimePopover.mjs

@@ -9,7 +9,8 @@ function TimePopover({
   mm,
   onChange,
   onClose,
-  step = 5
+  step = 5,
+  format = "ampm"
 }) {
   const popRef = React.useRef(null);
   const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
@@ -80,6 +81,13 @@ function TimePopover({
       incM(-step);
     } else if (e.key === "Enter") onClose();
   };
+  const is12h = format === "ampm";
+  const meridiem = H < 12 ? "AM" : "PM";
+  const hour12 = H % 12 === 0 ? 12 : H % 12;
+  const to24h = (h12, md) => {
+    if (h12 === 12) return md === "AM" ? 0 : 12;
+    return md === "AM" ? h12 : h12 + 12;
+  };
   const body = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -97,9 +105,9 @@ function TimePopover({
         /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
           "Vista: ",
           (() => {
-            const hr12 = H % 12 === 0 ? 12 : H % 12;
             const mm2 = M < 10 ? `0${M}` : String(M);
-            return `${hr12}:${mm2} ${H < 12 ? "AM" : "PM"}`;
+            if (is12h) return `${hour12}:${mm2} ${meridiem}`;
+            return `${pad2(H)}:${mm2}`;
           })()
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
@@ -119,14 +127,23 @@ function TimePopover({
               {
                 inputMode: "numeric",
                 "aria-label": "Hora",
-                value: pad2(H),
+                value: pad2(is12h ? hour12 : H),
                 onChange: (e) => {
                   const v = e.target.value.replace(/\D/g, "").slice(-2);
-                  if (!v) return;
+                  if (v.length === 0) return;
                   let n = parseInt(v, 10);
                   if (Number.isNaN(n)) return;
-                  if (n > 23) n = 23;
-                  commit(n, M);
+                  if (is12h) {
+                    if (n === 0) n = 12;
+                    if (n > 12) n = 12;
+                    if (n < 1) n = 1;
+                    const h24 = to24h(n, meridiem);
+                    commit(h24, M);
+                  } else {
+                    if (n > 23) n = 23;
+                    if (n < 0) n = 0;
+                    commit(n, M);
+                  }
                 },
                 className: "h-10 rounded-lg text-center text-lg ring-1 ring-slate-200 outline-none focus:ring-2 focus:ring-slate-300 dark:ring-white/10 dark:bg-white/5"
               }
@@ -182,6 +199,27 @@ function TimePopover({
             )
           ] })
         ] }),
+        is12h && /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: ["AM", "PM"].map((md) => {
+          const active = meridiem === md;
+          const base = "min-w-[48px] rounded-xl px-2 py-1 text-sm ring-1 ";
+          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",
+            {
+              type: "button",
+              className: `${base} ${light} ${dark}`,
+              "aria-pressed": active,
+              onClick: () => {
+                if (md === meridiem) return;
+                const h24 = to24h(hour12, md);
+                commit(h24, M);
+              },
+              children: md
+            },
+            md
+          );
+        }) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(
             "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",