framepexls-ui-lib 0.1.10 → 0.1.12

package/dist/DateTimeField.js

@@ -88,9 +88,18 @@ const withinBounds = (d, min, max) => {
   }
   return true;
 };
+const toAMPM = (hhmm) => {
+  const [hStr, mStr] = hhmm.split(":");
+  const H = parseInt(hStr != null ? hStr : "0", 10);
+  const M = parseInt(mStr != null ? mStr : "0", 10);
+  if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
+  const hr12 = H % 12 === 0 ? 12 : H % 12;
+  const mm = M < 10 ? `0${M}` : String(M);
+  return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
+};
 const formatDisplayValue = (value, mode) => {
   if (!value) return "";
-  if (mode === "time") return value;
+  if (mode === "time") return toAMPM(value);
   const parsed = parseValueByType(value, mode);
   if (!parsed) return value;
   if (mode === "date") {
@@ -106,7 +115,8 @@ const formatDisplayValue = (value, mode) => {
       month: "short",
       year: "numeric",
       hour: "2-digit",
-      minute: "2-digit"
+      minute: "2-digit",
+      hour12: true
     });
   } catch {
     return fmtISODateTimeLocal(parsed);
@@ -258,7 +268,7 @@ function DateTimeField({
         ),
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "button",
               {
                 ref: timeBtnRef,
@@ -268,11 +278,7 @@ function DateTimeField({
                 "aria-haspopup": "dialog",
                 "aria-expanded": showTimePop,
                 title: "Editar hora",
-                children: [
-                  pad2(hh),
-                  ":",
-                  pad2(mm)
-                ]
+                children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/DateTimeField.mjs

@@ -55,9 +55,18 @@ const withinBounds = (d, min, max) => {
   }
   return true;
 };
+const toAMPM = (hhmm) => {
+  const [hStr, mStr] = hhmm.split(":");
+  const H = parseInt(hStr != null ? hStr : "0", 10);
+  const M = parseInt(mStr != null ? mStr : "0", 10);
+  if (Number.isNaN(H) || Number.isNaN(M)) return hhmm;
+  const hr12 = H % 12 === 0 ? 12 : H % 12;
+  const mm = M < 10 ? `0${M}` : String(M);
+  return `${hr12}:${mm} ${H < 12 ? "AM" : "PM"}`;
+};
 const formatDisplayValue = (value, mode) => {
   if (!value) return "";
-  if (mode === "time") return value;
+  if (mode === "time") return toAMPM(value);
   const parsed = parseValueByType(value, mode);
   if (!parsed) return value;
   if (mode === "date") {
@@ -73,7 +82,8 @@ const formatDisplayValue = (value, mode) => {
       month: "short",
       year: "numeric",
       hour: "2-digit",
-      minute: "2-digit"
+      minute: "2-digit",
+      hour12: true
     });
   } catch {
     return fmtISODateTimeLocal(parsed);
@@ -225,7 +235,7 @@ function DateTimeField({
         ),
         (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-slate-100 px-3 py-2 text-sm dark:border-white/10", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "button",
               {
                 ref: timeBtnRef,
@@ -235,11 +245,7 @@ function DateTimeField({
                 "aria-haspopup": "dialog",
                 "aria-expanded": showTimePop,
                 title: "Editar hora",
-                children: [
-                  pad2(hh),
-                  ":",
-                  pad2(mm)
-                ]
+                children: toAMPM(`${pad2(hh)}:${pad2(mm)}`)
               }
             ),
             /* @__PURE__ */ jsx(

package/dist/TimePopover.d.mts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 
 type Props = {
-    /** ancla (el botón/chip que abriste) */
     anchorEl: HTMLElement | null;
     hh: number;
     mm: number;
     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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 
 type Props = {
-    /** ancla (el botón/chip que abriste) */
     anchorEl: HTMLElement | null;
     hh: number;
     mm: number;
     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",
     {
@@ -129,6 +137,14 @@ function TimePopover({
       className: "w-64 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.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
+          "Vista: ",
+          (() => {
+            const mm2 = M < 10 ? `0${M}` : String(M);
+            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: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -146,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"
               }
@@ -209,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",
     {
@@ -94,6 +102,14 @@ function TimePopover({
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[#0e0d0e]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
+          "Vista: ",
+          (() => {
+            const mm2 = M < 10 ? `0${M}` : String(M);
+            if (is12h) return `${hour12}:${mm2} ${meridiem}`;
+            return `${pad2(H)}:${mm2}`;
+          })()
+        ] }),
         /* @__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(
@@ -111,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"
               }
@@ -174,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/dist/TimeRangeField.js

@@ -78,10 +78,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const el = portalId ? document.getElementById(portalId) : null;
     setPortalRoot(el != null ? el : document.body);
   }, [portal, portalId]);
+  const toAMPM = (hh, mm) => {
+    const hr12 = hh % 12 === 0 ? 12 : hh % 12;
+    const mm2 = mm < 10 ? `0${mm}` : String(mm);
+    return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
+  };
   const display = (0, import_react.useMemo)(() => {
     var _a2;
-    const a = from ? fmtHHmm(from.hh, from.mm) : null;
-    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    const a = from ? toAMPM(from.hh, from.mm) : null;
+    const b = to ? toAMPM(to.hh, to.mm) : null;
     if (!a && !b) return "";
     if (a && b) return `${a} \u2013 ${b}`;
     return (_a2 = a != null ? a : b) != null ? _a2 : "";
@@ -163,7 +168,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             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),
             ref: fromBtnRef,
-            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+            children: from ? toAMPM(from.hh, from.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -189,7 +194,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             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),
             ref: toBtnRef,
-            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+            children: to ? toAMPM(to.hh, to.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/TimeRangeField.mjs

@@ -45,10 +45,15 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const el = portalId ? document.getElementById(portalId) : null;
     setPortalRoot(el != null ? el : document.body);
   }, [portal, portalId]);
+  const toAMPM = (hh, mm) => {
+    const hr12 = hh % 12 === 0 ? 12 : hh % 12;
+    const mm2 = mm < 10 ? `0${mm}` : String(mm);
+    return `${hr12}:${mm2} ${hh < 12 ? "AM" : "PM"}`;
+  };
   const display = useMemo(() => {
     var _a2;
-    const a = from ? fmtHHmm(from.hh, from.mm) : null;
-    const b = to ? fmtHHmm(to.hh, to.mm) : null;
+    const a = from ? toAMPM(from.hh, from.mm) : null;
+    const b = to ? toAMPM(to.hh, to.mm) : null;
     if (!a && !b) return "";
     if (a && b) return `${a} \u2013 ${b}`;
     return (_a2 = a != null ? a : b) != null ? _a2 : "";
@@ -130,7 +135,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             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),
             ref: fromBtnRef,
-            children: from ? fmtHHmm(from.hh, from.mm) : "--:--"
+            children: from ? toAMPM(from.hh, from.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -156,7 +161,7 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
             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),
             ref: toBtnRef,
-            children: to ? fmtHHmm(to.hh, to.mm) : "--:--"
+            children: to ? toAMPM(to.hh, to.mm) : "--:--"
           }
         ),
         /* @__PURE__ */ jsx(

package/package.json

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