framepexls-ui-lib 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TimePopover.d.mts +2 -1
- package/dist/TimePopover.d.ts +2 -1
- package/dist/TimePopover.js +45 -7
- package/dist/TimePopover.mjs +45 -7
- package/package.json +1 -1
package/dist/TimePopover.d.mts
CHANGED
|
@@ -7,8 +7,9 @@ type Props = {
|
|
|
7
7
|
onChange: (hh: number, mm: number) => void;
|
|
8
8
|
onClose: () => void;
|
|
9
9
|
step?: number;
|
|
10
|
+
format?: "24h" | "ampm";
|
|
10
11
|
};
|
|
11
|
-
declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
|
|
12
|
+
declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step, format }: Props): React.ReactPortal;
|
|
12
13
|
declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
|
|
13
14
|
anchorEl: HTMLElement | null;
|
|
14
15
|
cursor: Date;
|
package/dist/TimePopover.d.ts
CHANGED
|
@@ -7,8 +7,9 @@ type Props = {
|
|
|
7
7
|
onChange: (hh: number, mm: number) => void;
|
|
8
8
|
onClose: () => void;
|
|
9
9
|
step?: number;
|
|
10
|
+
format?: "24h" | "ampm";
|
|
10
11
|
};
|
|
11
|
-
declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step }: Props): React.ReactPortal;
|
|
12
|
+
declare function TimePopover({ anchorEl, hh, mm, onChange, onClose, step, format }: Props): React.ReactPortal;
|
|
12
13
|
declare function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose }: {
|
|
13
14
|
anchorEl: HTMLElement | null;
|
|
14
15
|
cursor: Date;
|
package/dist/TimePopover.js
CHANGED
|
@@ -44,7 +44,8 @@ function TimePopover({
|
|
|
44
44
|
mm,
|
|
45
45
|
onChange,
|
|
46
46
|
onClose,
|
|
47
|
-
step = 5
|
|
47
|
+
step = 5,
|
|
48
|
+
format = "ampm"
|
|
48
49
|
}) {
|
|
49
50
|
const popRef = React.useRef(null);
|
|
50
51
|
const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
|
|
@@ -115,6 +116,13 @@ function TimePopover({
|
|
|
115
116
|
incM(-step);
|
|
116
117
|
} else if (e.key === "Enter") onClose();
|
|
117
118
|
};
|
|
119
|
+
const is12h = format === "ampm";
|
|
120
|
+
const meridiem = H < 12 ? "AM" : "PM";
|
|
121
|
+
const hour12 = H % 12 === 0 ? 12 : H % 12;
|
|
122
|
+
const to24h = (h12, md) => {
|
|
123
|
+
if (h12 === 12) return md === "AM" ? 0 : 12;
|
|
124
|
+
return md === "AM" ? h12 : h12 + 12;
|
|
125
|
+
};
|
|
118
126
|
const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
119
127
|
"div",
|
|
120
128
|
{
|
|
@@ -132,9 +140,9 @@ function TimePopover({
|
|
|
132
140
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
|
|
133
141
|
"Vista: ",
|
|
134
142
|
(() => {
|
|
135
|
-
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
136
143
|
const mm2 = M < 10 ? `0${M}` : String(M);
|
|
137
|
-
return `${
|
|
144
|
+
if (is12h) return `${hour12}:${mm2} ${meridiem}`;
|
|
145
|
+
return `${pad2(H)}:${mm2}`;
|
|
138
146
|
})()
|
|
139
147
|
] }),
|
|
140
148
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
@@ -154,14 +162,23 @@ function TimePopover({
|
|
|
154
162
|
{
|
|
155
163
|
inputMode: "numeric",
|
|
156
164
|
"aria-label": "Hora",
|
|
157
|
-
value: pad2(H),
|
|
165
|
+
value: pad2(is12h ? hour12 : H),
|
|
158
166
|
onChange: (e) => {
|
|
159
167
|
const v = e.target.value.replace(/\D/g, "").slice(-2);
|
|
160
|
-
if (
|
|
168
|
+
if (v.length === 0) return;
|
|
161
169
|
let n = parseInt(v, 10);
|
|
162
170
|
if (Number.isNaN(n)) return;
|
|
163
|
-
if (
|
|
164
|
-
|
|
171
|
+
if (is12h) {
|
|
172
|
+
if (n === 0) n = 12;
|
|
173
|
+
if (n > 12) n = 12;
|
|
174
|
+
if (n < 1) n = 1;
|
|
175
|
+
const h24 = to24h(n, meridiem);
|
|
176
|
+
commit(h24, M);
|
|
177
|
+
} else {
|
|
178
|
+
if (n > 23) n = 23;
|
|
179
|
+
if (n < 0) n = 0;
|
|
180
|
+
commit(n, M);
|
|
181
|
+
}
|
|
165
182
|
},
|
|
166
183
|
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"
|
|
167
184
|
}
|
|
@@ -217,6 +234,27 @@ function TimePopover({
|
|
|
217
234
|
)
|
|
218
235
|
] })
|
|
219
236
|
] }),
|
|
237
|
+
is12h && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3 flex items-center justify-center gap-2", children: ["AM", "PM"].map((md) => {
|
|
238
|
+
const active = meridiem === md;
|
|
239
|
+
const base = "min-w-[48px] rounded-xl px-2 py-1 text-sm ring-1 ";
|
|
240
|
+
const light = active ? "bg-slate-900 text-white ring-slate-900" : "ring-slate-200 hover:bg-slate-50";
|
|
241
|
+
const dark = active ? "dark:bg-white dark:text-slate-900 dark:ring-white" : "dark:ring-white/10 dark:hover:bg-white/10";
|
|
242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
243
|
+
"button",
|
|
244
|
+
{
|
|
245
|
+
type: "button",
|
|
246
|
+
className: `${base} ${light} ${dark}`,
|
|
247
|
+
"aria-pressed": active,
|
|
248
|
+
onClick: () => {
|
|
249
|
+
if (md === meridiem) return;
|
|
250
|
+
const h24 = to24h(hour12, md);
|
|
251
|
+
commit(h24, M);
|
|
252
|
+
},
|
|
253
|
+
children: md
|
|
254
|
+
},
|
|
255
|
+
md
|
|
256
|
+
);
|
|
257
|
+
}) }),
|
|
220
258
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-3 flex items-center justify-between", children: [
|
|
221
259
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
222
260
|
"button",
|
package/dist/TimePopover.mjs
CHANGED
|
@@ -9,7 +9,8 @@ function TimePopover({
|
|
|
9
9
|
mm,
|
|
10
10
|
onChange,
|
|
11
11
|
onClose,
|
|
12
|
-
step = 5
|
|
12
|
+
step = 5,
|
|
13
|
+
format = "ampm"
|
|
13
14
|
}) {
|
|
14
15
|
const popRef = React.useRef(null);
|
|
15
16
|
const [pos, setPos] = React.useState({ top: -9999, left: -9999 });
|
|
@@ -80,6 +81,13 @@ function TimePopover({
|
|
|
80
81
|
incM(-step);
|
|
81
82
|
} else if (e.key === "Enter") onClose();
|
|
82
83
|
};
|
|
84
|
+
const is12h = format === "ampm";
|
|
85
|
+
const meridiem = H < 12 ? "AM" : "PM";
|
|
86
|
+
const hour12 = H % 12 === 0 ? 12 : H % 12;
|
|
87
|
+
const to24h = (h12, md) => {
|
|
88
|
+
if (h12 === 12) return md === "AM" ? 0 : 12;
|
|
89
|
+
return md === "AM" ? h12 : h12 + 12;
|
|
90
|
+
};
|
|
83
91
|
const body = /* @__PURE__ */ jsxs(
|
|
84
92
|
"div",
|
|
85
93
|
{
|
|
@@ -97,9 +105,9 @@ function TimePopover({
|
|
|
97
105
|
/* @__PURE__ */ jsxs("div", { className: "mb-2 text-xs text-slate-500 dark:text-slate-300", children: [
|
|
98
106
|
"Vista: ",
|
|
99
107
|
(() => {
|
|
100
|
-
const hr12 = H % 12 === 0 ? 12 : H % 12;
|
|
101
108
|
const mm2 = M < 10 ? `0${M}` : String(M);
|
|
102
|
-
return `${
|
|
109
|
+
if (is12h) return `${hour12}:${mm2} ${meridiem}`;
|
|
110
|
+
return `${pad2(H)}:${mm2}`;
|
|
103
111
|
})()
|
|
104
112
|
] }),
|
|
105
113
|
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
|
|
@@ -119,14 +127,23 @@ function TimePopover({
|
|
|
119
127
|
{
|
|
120
128
|
inputMode: "numeric",
|
|
121
129
|
"aria-label": "Hora",
|
|
122
|
-
value: pad2(H),
|
|
130
|
+
value: pad2(is12h ? hour12 : H),
|
|
123
131
|
onChange: (e) => {
|
|
124
132
|
const v = e.target.value.replace(/\D/g, "").slice(-2);
|
|
125
|
-
if (
|
|
133
|
+
if (v.length === 0) return;
|
|
126
134
|
let n = parseInt(v, 10);
|
|
127
135
|
if (Number.isNaN(n)) return;
|
|
128
|
-
if (
|
|
129
|
-
|
|
136
|
+
if (is12h) {
|
|
137
|
+
if (n === 0) n = 12;
|
|
138
|
+
if (n > 12) n = 12;
|
|
139
|
+
if (n < 1) n = 1;
|
|
140
|
+
const h24 = to24h(n, meridiem);
|
|
141
|
+
commit(h24, M);
|
|
142
|
+
} else {
|
|
143
|
+
if (n > 23) n = 23;
|
|
144
|
+
if (n < 0) n = 0;
|
|
145
|
+
commit(n, M);
|
|
146
|
+
}
|
|
130
147
|
},
|
|
131
148
|
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"
|
|
132
149
|
}
|
|
@@ -182,6 +199,27 @@ function TimePopover({
|
|
|
182
199
|
)
|
|
183
200
|
] })
|
|
184
201
|
] }),
|
|
202
|
+
is12h && /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-2", children: ["AM", "PM"].map((md) => {
|
|
203
|
+
const active = meridiem === md;
|
|
204
|
+
const base = "min-w-[48px] rounded-xl px-2 py-1 text-sm ring-1 ";
|
|
205
|
+
const light = active ? "bg-slate-900 text-white ring-slate-900" : "ring-slate-200 hover:bg-slate-50";
|
|
206
|
+
const dark = active ? "dark:bg-white dark:text-slate-900 dark:ring-white" : "dark:ring-white/10 dark:hover:bg-white/10";
|
|
207
|
+
return /* @__PURE__ */ jsx(
|
|
208
|
+
"button",
|
|
209
|
+
{
|
|
210
|
+
type: "button",
|
|
211
|
+
className: `${base} ${light} ${dark}`,
|
|
212
|
+
"aria-pressed": active,
|
|
213
|
+
onClick: () => {
|
|
214
|
+
if (md === meridiem) return;
|
|
215
|
+
const h24 = to24h(hour12, md);
|
|
216
|
+
commit(h24, M);
|
|
217
|
+
},
|
|
218
|
+
children: md
|
|
219
|
+
},
|
|
220
|
+
md
|
|
221
|
+
);
|
|
222
|
+
}) }),
|
|
185
223
|
/* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between", children: [
|
|
186
224
|
/* @__PURE__ */ jsx(
|
|
187
225
|
"button",
|