@spear-ai/spectral 1.6.17 → 1.8.0
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/.js +201 -200
- package/dist/Accordion.d.ts +13 -15
- package/dist/Accordion.js +184 -179
- package/dist/Alert/AlertBase.d.ts +7 -7
- package/dist/Alert/AlertBase.js +21 -21
- package/dist/Alert.d.ts +2 -2
- package/dist/Alert.js +31 -31
- package/dist/Avatar.d.ts +2 -2
- package/dist/Avatar.js +30 -22
- package/dist/Badge.d.ts +1 -1
- package/dist/Badge.js +3 -2
- package/dist/Button.d.ts +3 -3
- package/dist/Button.js +108 -46
- package/dist/ButtonGroup/ButtonGroupButton.d.ts +1 -1
- package/dist/ButtonGroup/ButtonGroupButton.js +5 -5
- package/dist/ButtonGroup.d.ts +5 -5
- package/dist/ButtonGroup.js +21 -21
- package/dist/ButtonIcon.d.ts +2 -2
- package/dist/ButtonIcon.js +30 -31
- package/dist/Checkbox/CheckboxBase.d.ts +2 -2
- package/dist/Checkbox/CheckboxBase.js +50 -57
- package/dist/Checkbox.js +15 -19
- package/dist/DataCard/Card.d.ts +1 -1
- package/dist/DataCard/Card.js +1 -1
- package/dist/DataCard.js +1 -1
- package/dist/DateTimePicker/Calendar.d.ts +4 -4
- package/dist/DateTimePicker/Calendar.js +3 -3
- package/dist/DateTimePicker/DateTimeDisplayInput.js +126 -136
- package/dist/DateTimePicker/DateTimeInput.js +4 -4
- package/dist/DateTimePicker/DateTimeUtils.d.ts +31 -31
- package/dist/DateTimePicker/DateTimeUtils.js +139 -197
- package/dist/DateTimePicker/TimePicker.d.ts +4 -4
- package/dist/DateTimePicker/TimePicker.js +3 -3
- package/dist/DateTimePicker.d.ts +5 -5
- package/dist/DateTimePicker.js +90 -70
- package/dist/Dialog.d.ts +13 -13
- package/dist/Dialog.js +57 -84
- package/dist/Drawer.d.ts +2 -2
- package/dist/Drawer.js +8 -8
- package/dist/HoverCard.d.ts +6 -5
- package/dist/HoverCard.js +64 -64
- package/dist/Icons/PolygonIcon.d.ts +5 -0
- package/dist/Icons/PolygonIcon.js +40 -0
- package/dist/Icons/index.d.ts +1 -1
- package/dist/Icons.js +34 -34
- package/dist/IconsAnimated/PanelLeftCloseIcon.js +2 -2
- package/dist/IconsAnimated/PanelLeftOpenIcon.js +2 -2
- package/dist/Input/InputUtils.d.ts +2 -2
- package/dist/Input/InputUtils.js +4 -4
- package/dist/Input.d.ts +1 -1
- package/dist/Input.js +19 -19
- package/dist/InputOTP.d.ts +10 -10
- package/dist/InputOTP.js +114 -114
- package/dist/Kbd.d.ts +8 -5
- package/dist/Kbd.js +85 -20
- package/dist/Label.d.ts +4 -2
- package/dist/Label.js +3 -3
- package/dist/MultiSelect/MultiSelectBase.d.ts +1 -1
- package/dist/MultiSelect/MultiSelectBase.js +278 -202
- package/dist/MultiSelect.d.ts +6 -6
- package/dist/MultiSelect.js +9 -9
- package/dist/Popover.js +22 -237
- package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts +11 -11
- package/dist/RadioButtonGroup/RadioButtonGroupBase.js +28 -28
- package/dist/RadioButtonGroup.d.ts +1 -1
- package/dist/RadioGroup.d.ts +15 -15
- package/dist/RadioGroup.js +253 -236
- package/dist/Select.d.ts +3 -1
- package/dist/Select.js +91 -88
- package/dist/Separator.js +4 -4
- package/dist/Skeleton.d.ts +1 -2
- package/dist/Skeleton.js +2 -4
- package/dist/Slider.d.ts +6 -6
- package/dist/Slider.js +78 -78
- package/dist/Switch/SwitchBase.d.ts +4 -4
- package/dist/Switch/SwitchBase.js +75 -111
- package/dist/Switch.d.ts +4 -4
- package/dist/Switch.js +122 -33
- package/dist/Tabs/TabsBase.js +39 -38
- package/dist/Tabs/tabsUtils.js +7 -7
- package/dist/Tabs.d.ts +0 -4
- package/dist/Tabs.js +62 -66
- package/dist/Textarea/TextareaUtils.d.ts +7 -7
- package/dist/Textarea/TextareaUtils.js +13 -13
- package/dist/Textarea.js +28 -18
- package/dist/Toast.d.ts +43 -0
- package/dist/Toast.js +883 -0
- package/dist/Toggle/ToggleBase.d.ts +4 -4
- package/dist/Toggle/ToggleBase.js +32 -33
- package/dist/Toggle.d.ts +1 -1
- package/dist/Toggle.js +7 -12
- package/dist/ToggleGroup/ToggleGroupBase.d.ts +5 -5
- package/dist/ToggleGroup/ToggleGroupBase.js +30 -30
- package/dist/ToggleGroup.d.ts +1 -1
- package/dist/ToggleGroup.js +27 -30
- package/dist/Tooltip.d.ts +1 -1
- package/dist/Tooltip.js +97 -97
- package/dist/Tray.d.ts +9 -9
- package/dist/Tray.js +71 -70
- package/dist/hooks/useAccordionAutoScroll.d.ts.map +1 -1
- package/dist/hooks/useAccordionAutoScroll.js +42 -39
- package/dist/hooks/useControllableState.d.ts +2 -2
- package/dist/hooks/useControllableState.d.ts.map +1 -1
- package/dist/hooks/useControllableState.js +2 -2
- package/dist/index-C12FUuIW.js +13 -0
- package/dist/{index-yU8jOTzS.js → index-CpovUAO-.js} +1 -1
- package/dist/{index-BdS7Ix8W.js → index-CqbPiOid.js} +1 -1
- package/dist/{index-B3UpsZ2x.js → index-CrjD9cAD.js} +1 -1
- package/dist/index-DEYs15GP.js +66 -0
- package/dist/index-DdFoGvON.js +146 -0
- package/dist/index-Q3N6lgwg.js +225 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/primitives/button.d.ts +1 -1
- package/dist/primitives/button.js +4 -4
- package/dist/primitives/input.d.ts.map +1 -1
- package/dist/primitives/input.js +8 -5
- package/dist/primitives/select.d.ts +12 -13
- package/dist/primitives/select.d.ts.map +1 -1
- package/dist/primitives/select.js +59 -88
- package/dist/primitives/slot.d.ts +5 -5
- package/dist/primitives/slot.d.ts.map +1 -1
- package/dist/primitives/slot.js +24 -33
- package/dist/primitives/textarea.d.ts.map +1 -1
- package/dist/primitives/textarea.js +4 -3
- package/dist/{proxy-Cukf-VVj.js → proxy-CgaCj1WQ.js} +7 -3
- package/dist/styles/base-colors.css +30 -30
- package/dist/styles/horizon/base-colors.css +30 -30
- package/dist/styles/horizon/colors.css +43 -13
- package/dist/styles/horizon/utilities.css +26 -3
- package/dist/styles/main.css +1 -1
- package/dist/styles/spectral.css +2 -2
- package/dist/styles/theme.css +99 -46
- package/dist/{use-animation-zNd5Nq85.js → use-animation-CR-SdV2l.js} +1 -1
- package/dist/utils/formFieldUtils.d.ts +2 -2
- package/dist/utils/formFieldUtils.d.ts.map +1 -1
- package/dist/utils/formFieldUtils.js +14 -11
- package/dist/utils/sharedUtils.d.ts +3 -3
- package/dist/utils/sharedUtils.d.ts.map +1 -1
- package/dist/utils/sharedUtils.js +1 -4
- package/dist/utils/twUtils.d.ts +1 -1
- package/dist/utils/twUtils.d.ts.map +1 -1
- package/dist/utils/twUtils.js +1 -4
- package/package.json +6 -1
- package/dist/Icons/LineToolIcon2.d.ts +0 -5
- package/dist/Icons/LineToolIcon2.js +0 -49
- package/dist/createLucideIcon-D4r5Phnh.js +0 -70
- package/dist/index-CeP1E2kK.js +0 -209
- package/dist/index-Dy-Hzr7y.js +0 -13
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../styles/main.css";
|
|
3
|
-
import { jsxs as
|
|
3
|
+
import { jsxs as O, jsx as b } from "react/jsx-runtime";
|
|
4
4
|
import { getResolvedLocale as ee, getLocalizedPeriodLabels as te, formatSelectPeriodLabel as re } from "./DateTimeUtils.js";
|
|
5
5
|
import { Label as ne } from "../Label.js";
|
|
6
6
|
import { useControllableState as ae } from "../hooks/useControllableState.js";
|
|
7
7
|
import { getInputClasses as ie } from "../utils/formFieldUtils.js";
|
|
8
|
-
import { cn as
|
|
9
|
-
import { forwardRef as se, useRef as
|
|
10
|
-
const
|
|
8
|
+
import { cn as U } from "../utils/twUtils.js";
|
|
9
|
+
import { forwardRef as se, useRef as E, useMemo as D, useCallback as w, useEffect as oe } from "react";
|
|
10
|
+
const v = {
|
|
11
11
|
month: { type: "month", min: 1, max: 12, length: 2 },
|
|
12
12
|
day: { type: "day", min: 1, max: 31, length: 2 },
|
|
13
13
|
year: { type: "year", min: 1900, max: 2100, length: 4 },
|
|
@@ -15,12 +15,8 @@ const h = {
|
|
|
15
15
|
hour24: { type: "hour", min: 0, max: 23, length: 2 },
|
|
16
16
|
minute: { type: "minute", min: 0, max: 59, length: 2 },
|
|
17
17
|
period: { type: "period", min: 0, max: 1, length: 2 }
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
return x === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(x) ? 30 : 31;
|
|
21
|
-
}
|
|
22
|
-
function ce({ ariaLabel: x, config: e, disabled: f, onLeftFocus: I, onRightFocus: v, onValueChange: c, periodLabels: w, value: s }) {
|
|
23
|
-
const o = B(null), a = B(""), u = B(!1), b = g(() => {
|
|
18
|
+
}, ue = (k, e) => k === 2 ? e % 4 === 0 && e % 100 !== 0 || e % 400 === 0 ? 29 : 28 : [4, 6, 9, 11].includes(k) ? 30 : 31, ce = ({ ariaLabel: k, config: e, disabled: y, onLeftFocus: N, onRightFocus: m, onValueChange: o, periodLabels: h, value: s }) => {
|
|
19
|
+
const u = E(null), a = E(""), c = E(!1), I = D(() => {
|
|
24
20
|
switch (e.type) {
|
|
25
21
|
case "month":
|
|
26
22
|
return "MM";
|
|
@@ -33,58 +29,58 @@ function ce({ ariaLabel: x, config: e, disabled: f, onLeftFocus: I, onRightFocus
|
|
|
33
29
|
case "minute":
|
|
34
30
|
return "mm";
|
|
35
31
|
case "period":
|
|
36
|
-
return (
|
|
32
|
+
return (h?.am ?? "am").toLowerCase();
|
|
37
33
|
default:
|
|
38
34
|
return "––";
|
|
39
35
|
}
|
|
40
|
-
}, [e.type, e.max,
|
|
36
|
+
}, [e.type, e.max, h]), d = D(() => s === void 0 ? I : e.type === "period" ? (s === 0 ? h?.am ?? "am" : h?.pm ?? "pm").toLowerCase() : s.toString().padStart(e.length, "0"), [s, e, h, I]);
|
|
41
37
|
oe(() => {
|
|
42
|
-
|
|
43
|
-
}, [
|
|
44
|
-
const
|
|
38
|
+
u.current && !c.current && (u.current.value = d);
|
|
39
|
+
}, [d]);
|
|
40
|
+
const x = w(() => {
|
|
45
41
|
const t = a.current;
|
|
46
42
|
if (t) {
|
|
47
43
|
let r = parseInt(t, 10);
|
|
48
|
-
isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)),
|
|
44
|
+
isNaN(r) || (r = Math.max(e.min, Math.min(e.max, r)), o(r));
|
|
49
45
|
}
|
|
50
|
-
a.current = "",
|
|
51
|
-
}, [e.min, e.max,
|
|
46
|
+
a.current = "", c.current = !1, u.current && (u.current.value = d);
|
|
47
|
+
}, [e.min, e.max, d, o]), R = w(
|
|
52
48
|
(t) => {
|
|
53
|
-
if (!
|
|
49
|
+
if (!y) {
|
|
54
50
|
if (t.key === "Tab") {
|
|
55
|
-
|
|
51
|
+
x();
|
|
56
52
|
return;
|
|
57
53
|
}
|
|
58
54
|
if (t.key === "ArrowRight") {
|
|
59
|
-
t.preventDefault(),
|
|
55
|
+
t.preventDefault(), x(), m?.();
|
|
60
56
|
return;
|
|
61
57
|
}
|
|
62
58
|
if (t.key === "ArrowLeft") {
|
|
63
|
-
t.preventDefault(),
|
|
59
|
+
t.preventDefault(), x(), N?.();
|
|
64
60
|
return;
|
|
65
61
|
}
|
|
66
62
|
if (e.type === "period") {
|
|
67
|
-
t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ?
|
|
63
|
+
t.preventDefault(), t.key === "ArrowUp" || t.key === "ArrowDown" ? o(s === 0 ? 1 : 0) : t.key.toLowerCase() === "a" ? o(0) : t.key.toLowerCase() === "p" && o(1);
|
|
68
64
|
return;
|
|
69
65
|
}
|
|
70
66
|
if (t.key === "ArrowUp") {
|
|
71
|
-
t.preventDefault(), a.current = "",
|
|
67
|
+
t.preventDefault(), a.current = "", c.current = !1;
|
|
72
68
|
const r = s === void 0 || s >= e.max ? e.min : s + 1;
|
|
73
|
-
|
|
69
|
+
o(r);
|
|
74
70
|
return;
|
|
75
71
|
}
|
|
76
72
|
if (t.key === "ArrowDown") {
|
|
77
|
-
t.preventDefault(), a.current = "",
|
|
73
|
+
t.preventDefault(), a.current = "", c.current = !1;
|
|
78
74
|
const r = s === void 0 || s <= e.min ? e.max : s - 1;
|
|
79
|
-
|
|
75
|
+
o(r);
|
|
80
76
|
return;
|
|
81
77
|
}
|
|
82
78
|
if (t.key === "Home") {
|
|
83
|
-
t.preventDefault(), a.current = "",
|
|
79
|
+
t.preventDefault(), a.current = "", c.current = !1, o(e.min);
|
|
84
80
|
return;
|
|
85
81
|
}
|
|
86
82
|
if (t.key === "End") {
|
|
87
|
-
t.preventDefault(), a.current = "",
|
|
83
|
+
t.preventDefault(), a.current = "", c.current = !1, o(e.max);
|
|
88
84
|
return;
|
|
89
85
|
}
|
|
90
86
|
if (t.key >= "0" && t.key <= "9") {
|
|
@@ -92,43 +88,40 @@ function ce({ ariaLabel: x, config: e, disabled: f, onLeftFocus: I, onRightFocus
|
|
|
92
88
|
const r = a.current + t.key, l = parseInt(r, 10);
|
|
93
89
|
if (e.length === 2)
|
|
94
90
|
if (r.length >= 2) {
|
|
95
|
-
const
|
|
96
|
-
a.current = "",
|
|
91
|
+
const L = Math.max(e.min, Math.min(e.max, l));
|
|
92
|
+
a.current = "", c.current = !1, o(L), m?.();
|
|
97
93
|
} else if (l * 10 > e.max) {
|
|
98
|
-
const
|
|
99
|
-
a.current = "",
|
|
94
|
+
const L = Math.max(e.min, Math.min(e.max, l));
|
|
95
|
+
a.current = "", c.current = !1, o(L), m?.();
|
|
100
96
|
} else
|
|
101
|
-
a.current = r,
|
|
97
|
+
a.current = r, c.current = !0, u.current && (u.current.value = r);
|
|
102
98
|
else if (e.length === 4)
|
|
103
99
|
if (r.length >= 4) {
|
|
104
|
-
const
|
|
105
|
-
a.current = "",
|
|
100
|
+
const L = Math.max(e.min, Math.min(e.max, l));
|
|
101
|
+
a.current = "", c.current = !1, o(L), m?.();
|
|
106
102
|
} else
|
|
107
|
-
a.current = r,
|
|
103
|
+
a.current = r, c.current = !0, u.current && (u.current.value = r);
|
|
108
104
|
return;
|
|
109
105
|
}
|
|
110
|
-
if (t.key === "Backspace") {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
a.current = r, u.current = r.length > 0, o.current && (o.current.value = r || m);
|
|
114
|
-
}
|
|
115
|
-
return;
|
|
106
|
+
if (t.key === "Backspace" && (t.preventDefault(), a.current)) {
|
|
107
|
+
const r = a.current.slice(0, -1);
|
|
108
|
+
a.current = r, c.current = r.length > 0, u.current && (u.current.value = r || d);
|
|
116
109
|
}
|
|
117
110
|
}
|
|
118
111
|
},
|
|
119
|
-
[
|
|
120
|
-
),
|
|
121
|
-
a.current &&
|
|
122
|
-
}, [
|
|
123
|
-
|
|
124
|
-
const t =
|
|
112
|
+
[y, e, s, d, o, N, m, x]
|
|
113
|
+
), T = w(() => {
|
|
114
|
+
a.current && x();
|
|
115
|
+
}, [x]), g = w(() => {
|
|
116
|
+
c.current || (a.current = "");
|
|
117
|
+
const t = u.current;
|
|
125
118
|
if (t) {
|
|
126
119
|
const r = t.value.length;
|
|
127
120
|
t.setSelectionRange(r, r);
|
|
128
121
|
}
|
|
129
|
-
}, []),
|
|
130
|
-
|
|
131
|
-
}, [
|
|
122
|
+
}, []), Y = w(() => {
|
|
123
|
+
u.current && (u.current.value = a.current || d);
|
|
124
|
+
}, [d]), H = w(() => {
|
|
132
125
|
switch (e.type) {
|
|
133
126
|
case "year":
|
|
134
127
|
return { width: 46, paddingLeft: 0 };
|
|
@@ -145,137 +138,134 @@ function ce({ ariaLabel: x, config: e, disabled: f, onLeftFocus: I, onRightFocus
|
|
|
145
138
|
default:
|
|
146
139
|
return { width: 24, paddingLeft: 0 };
|
|
147
140
|
}
|
|
148
|
-
})(), M = s === void 0;
|
|
149
|
-
return /* @__PURE__ */
|
|
141
|
+
}, [e.type]), p = D(() => H(), [H]), M = D(() => s === void 0, [s]);
|
|
142
|
+
return /* @__PURE__ */ b(
|
|
150
143
|
"input",
|
|
151
144
|
{
|
|
152
|
-
"aria-label":
|
|
145
|
+
"aria-label": k,
|
|
153
146
|
"aria-valuemax": e.max,
|
|
154
147
|
"aria-valuemin": e.min,
|
|
155
148
|
"aria-valuenow": s,
|
|
156
|
-
className:
|
|
149
|
+
className: U(
|
|
157
150
|
"inline-flex items-center justify-center rounded text-center tabular-nums",
|
|
158
151
|
"border-none bg-transparent outline-none",
|
|
159
152
|
"focus:bg-bg-tertiary focus:text-text-primary focus:ring-accent focus:ring-1",
|
|
160
153
|
"hover:bg-bg-secondary",
|
|
161
|
-
|
|
154
|
+
y && "cursor-not-allowed opacity-50",
|
|
162
155
|
M && "text-text-placeholder text-sm"
|
|
163
156
|
),
|
|
164
157
|
"data-segment": e.type,
|
|
165
|
-
defaultValue:
|
|
166
|
-
disabled:
|
|
158
|
+
defaultValue: d,
|
|
159
|
+
disabled: y,
|
|
167
160
|
inputMode: "numeric",
|
|
168
|
-
onBlur:
|
|
169
|
-
onChange:
|
|
170
|
-
onFocus:
|
|
171
|
-
onKeyDown:
|
|
172
|
-
ref:
|
|
161
|
+
onBlur: T,
|
|
162
|
+
onChange: Y,
|
|
163
|
+
onFocus: g,
|
|
164
|
+
onKeyDown: R,
|
|
165
|
+
ref: u,
|
|
173
166
|
role: "spinbutton",
|
|
174
|
-
style:
|
|
175
|
-
tabIndex:
|
|
167
|
+
style: p,
|
|
168
|
+
tabIndex: y ? -1 : 0
|
|
176
169
|
}
|
|
177
170
|
);
|
|
178
|
-
}
|
|
179
|
-
const le = se(
|
|
171
|
+
}, le = se(
|
|
180
172
|
({
|
|
181
|
-
className:
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
173
|
+
className: k,
|
|
174
|
+
defaultValue: e,
|
|
175
|
+
disabled: y,
|
|
176
|
+
endIcon: N,
|
|
177
|
+
hourFormat: m = "12",
|
|
178
|
+
id: o,
|
|
179
|
+
label: h,
|
|
180
|
+
locale: s,
|
|
181
|
+
onChange: u,
|
|
182
|
+
showTime: a = !0,
|
|
183
|
+
state: c = "default",
|
|
184
|
+
value: I,
|
|
187
185
|
// Legacy props (deprecated)
|
|
188
|
-
date:
|
|
189
|
-
onDateChange:
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}), t = g(() => ee(b), [b]), r = g(() => te(t), [t]), l = g(() => {
|
|
205
|
-
if (!y) return { month: void 0, day: void 0, year: void 0, hour: void 0, minute: void 0, period: void 0 };
|
|
206
|
-
const i = y.getHours();
|
|
207
|
-
let n, p;
|
|
208
|
-
return a === "24" ? (n = i, p = 0) : (p = i >= 12 ? 1 : 0, n = i % 12, n === 0 && (n = 12)), {
|
|
209
|
-
month: y.getMonth() + 1,
|
|
210
|
-
day: y.getDate(),
|
|
211
|
-
year: y.getFullYear(),
|
|
186
|
+
date: d,
|
|
187
|
+
onDateChange: x,
|
|
188
|
+
...R
|
|
189
|
+
}, T) => {
|
|
190
|
+
const g = E(null), Y = I ?? d, H = u ?? x, [p, M] = ae({
|
|
191
|
+
defaultValue: e,
|
|
192
|
+
onChange: H,
|
|
193
|
+
value: Y
|
|
194
|
+
}), t = D(() => ee(s), [s]), r = D(() => te(t), [t]), l = D(() => {
|
|
195
|
+
if (!p) return { month: void 0, day: void 0, year: void 0, hour: void 0, minute: void 0, period: void 0 };
|
|
196
|
+
const i = p.getHours();
|
|
197
|
+
let n, f;
|
|
198
|
+
return m === "24" ? (n = i, f = 0) : (f = i >= 12 ? 1 : 0, n = i % 12, n === 0 && (n = 12)), {
|
|
199
|
+
month: p.getMonth() + 1,
|
|
200
|
+
day: p.getDate(),
|
|
201
|
+
year: p.getFullYear(),
|
|
212
202
|
hour: n,
|
|
213
|
-
minute:
|
|
214
|
-
period:
|
|
203
|
+
minute: p.getMinutes(),
|
|
204
|
+
period: f
|
|
215
205
|
};
|
|
216
|
-
}, [
|
|
206
|
+
}, [p, m]), L = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, _ = w(
|
|
217
207
|
(i) => {
|
|
218
208
|
const n = { ...l, ...i };
|
|
219
209
|
if (n.month === void 0 && n.day === void 0 && n.year === void 0) {
|
|
220
210
|
M(void 0);
|
|
221
211
|
return;
|
|
222
212
|
}
|
|
223
|
-
const
|
|
224
|
-
let
|
|
225
|
-
if (
|
|
226
|
-
|
|
213
|
+
const f = /* @__PURE__ */ new Date(), A = (n.month ?? f.getMonth() + 1) - 1, P = n.day ?? f.getDate(), S = n.year ?? f.getFullYear(), j = ue(A + 1, S), G = Math.min(P, j), W = l.month !== void 0 && l.day !== void 0 && l.year !== void 0, X = n.month !== void 0 && n.day !== void 0 && n.year !== void 0, C = !W && X;
|
|
214
|
+
let B;
|
|
215
|
+
if (m === "24")
|
|
216
|
+
B = C ? 0 : n.hour ?? 0;
|
|
227
217
|
else {
|
|
228
|
-
const F =
|
|
229
|
-
|
|
218
|
+
const F = C ? 12 : n.hour ?? 12, V = C ? 1 : n.period ?? 0, K = F, J = V;
|
|
219
|
+
K === 12 ? B = J === 0 ? 0 : 12 : B = J === 0 ? K : K + 12;
|
|
230
220
|
}
|
|
231
|
-
const Z =
|
|
221
|
+
const Z = C ? 0 : n.minute ?? 0, $ = new Date(S, A, G, B, Z, 0, 0);
|
|
232
222
|
M($);
|
|
233
223
|
},
|
|
234
|
-
[l,
|
|
235
|
-
), q =
|
|
224
|
+
[l, m, M]
|
|
225
|
+
), q = D(() => {
|
|
236
226
|
const i = [
|
|
237
|
-
{ key: "month", config:
|
|
238
|
-
{ key: "day", config:
|
|
239
|
-
{ key: "year", config:
|
|
227
|
+
{ key: "month", config: v.month, ariaLabel: "Month" },
|
|
228
|
+
{ key: "day", config: v.day, ariaLabel: "Day" },
|
|
229
|
+
{ key: "year", config: v.year, ariaLabel: "Year" }
|
|
240
230
|
];
|
|
241
|
-
if (!
|
|
242
|
-
const n =
|
|
243
|
-
{ key: "hour", config:
|
|
244
|
-
{ key: "minute", config:
|
|
231
|
+
if (!a) return i;
|
|
232
|
+
const n = m === "24" ? [
|
|
233
|
+
{ key: "hour", config: v.hour24, ariaLabel: "Hours" },
|
|
234
|
+
{ key: "minute", config: v.minute, ariaLabel: "Minutes" }
|
|
245
235
|
] : [
|
|
246
|
-
{ key: "hour", config:
|
|
247
|
-
{ key: "minute", config:
|
|
248
|
-
{ key: "period", config:
|
|
236
|
+
{ key: "hour", config: v.hour12, ariaLabel: "Hours" },
|
|
237
|
+
{ key: "minute", config: v.minute, ariaLabel: "Minutes" },
|
|
238
|
+
{ key: "period", config: v.period, ariaLabel: re(r, "Select {am} or {pm}") }
|
|
249
239
|
];
|
|
250
240
|
return [...i, ...n];
|
|
251
|
-
}, [
|
|
252
|
-
|
|
253
|
-
}, []), Q =
|
|
254
|
-
return /* @__PURE__ */
|
|
255
|
-
|
|
256
|
-
/* @__PURE__ */
|
|
257
|
-
/* @__PURE__ */
|
|
258
|
-
const
|
|
259
|
-
return /* @__PURE__ */
|
|
260
|
-
|
|
261
|
-
/* @__PURE__ */
|
|
241
|
+
}, [a, m, r]), z = w((i) => {
|
|
242
|
+
g.current?.querySelectorAll("[role='spinbutton']")[i]?.focus();
|
|
243
|
+
}, []), Q = U(ie(c, k));
|
|
244
|
+
return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5", children: [
|
|
245
|
+
h && /* @__PURE__ */ b(ne, { className: "text-text-primary text-sm font-medium", htmlFor: o, children: h }),
|
|
246
|
+
/* @__PURE__ */ O("div", { className: U(Q, "relative", (y ?? c === "disabled") && "cursor-not-allowed", k), "data-slot": "datetime-display-input", id: o ?? "datetime-display-input", ref: T ?? g, ...R, children: [
|
|
247
|
+
/* @__PURE__ */ b("div", { className: "flex items-center", ref: g, children: q.map((i, n) => {
|
|
248
|
+
const f = ["month", "day", "year"].includes(i.key), A = ["hour", "minute", "period"].includes(i.key), P = i.key === "year", S = i.key === "hour", j = y ?? (A && !L);
|
|
249
|
+
return /* @__PURE__ */ O("span", { className: "flex items-center", children: [
|
|
250
|
+
S && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: ", " }),
|
|
251
|
+
/* @__PURE__ */ b(
|
|
262
252
|
ce,
|
|
263
253
|
{
|
|
264
254
|
ariaLabel: i.ariaLabel,
|
|
265
255
|
config: i.config,
|
|
266
|
-
disabled:
|
|
256
|
+
disabled: j,
|
|
267
257
|
onLeftFocus: () => n > 0 && z(n - 1),
|
|
268
258
|
onRightFocus: () => n < q.length - 1 && z(n + 1),
|
|
269
|
-
onValueChange: (
|
|
259
|
+
onValueChange: (G) => _({ [i.key]: G }),
|
|
270
260
|
periodLabels: r,
|
|
271
261
|
value: l[i.key]
|
|
272
262
|
}
|
|
273
263
|
),
|
|
274
|
-
|
|
275
|
-
|
|
264
|
+
f && !P && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-text-secondary select-none", children: "/" }),
|
|
265
|
+
S && /* @__PURE__ */ b("span", { "aria-hidden": "true", className: "text-inherit select-none", children: ":" })
|
|
276
266
|
] }, i.key);
|
|
277
267
|
}) }),
|
|
278
|
-
|
|
268
|
+
N
|
|
279
269
|
] })
|
|
280
270
|
] });
|
|
281
271
|
}
|
|
@@ -42,15 +42,15 @@ const q = 2e3, z = ({ className: V, date: f, disabled: b, id: S, locale: A, name
|
|
|
42
42
|
return;
|
|
43
43
|
}
|
|
44
44
|
if (t.key === "ArrowUp" || t.key === "ArrowDown") {
|
|
45
|
-
const o = t.key === "ArrowUp" ? 1 : -1, s = C(
|
|
45
|
+
const o = t.key === "ArrowUp" ? 1 : -1, s = C(o, e, r);
|
|
46
46
|
n && y(!1);
|
|
47
47
|
const u = new Date(a);
|
|
48
|
-
m(c(u,
|
|
48
|
+
m(c(u, e, s, l));
|
|
49
49
|
return;
|
|
50
50
|
}
|
|
51
51
|
if (t.key === "Home" || t.key === "End") {
|
|
52
52
|
const { min: o, max: s } = p(e), u = (t.key === "Home" ? o : s).toString().padStart(2, "0"), H = new Date(a);
|
|
53
|
-
m(c(H,
|
|
53
|
+
m(c(H, e, u, l));
|
|
54
54
|
return;
|
|
55
55
|
}
|
|
56
56
|
if (t.key >= "0" && t.key <= "9") {
|
|
@@ -58,7 +58,7 @@ const q = 2e3, z = ({ className: V, date: f, disabled: b, id: S, locale: A, name
|
|
|
58
58
|
const o = I(t.key);
|
|
59
59
|
n && w?.(), y((u) => !u);
|
|
60
60
|
const s = new Date(a);
|
|
61
|
-
m(c(s,
|
|
61
|
+
m(c(s, e, o, l));
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
},
|
|
@@ -67,7 +67,7 @@ export declare const DEFAULT_TRANSLATIONS: TimePickerTranslations;
|
|
|
67
67
|
* Interpolates localized period labels into a template string.
|
|
68
68
|
* Replaces {am} and {pm} placeholders with actual localized values.
|
|
69
69
|
*/
|
|
70
|
-
export declare
|
|
70
|
+
export declare const formatSelectPeriodLabel: (labels: PeriodLabels, template: string) => string;
|
|
71
71
|
export declare const PICKER_TYPES: {
|
|
72
72
|
readonly HOURS: "hours";
|
|
73
73
|
readonly HOURS_12: "12hours";
|
|
@@ -94,82 +94,82 @@ export declare const TIME_BOUNDS: {
|
|
|
94
94
|
* 3. navigator.language (browser only)
|
|
95
95
|
* 4. 'en-US' as final fallback
|
|
96
96
|
*/
|
|
97
|
-
export declare
|
|
97
|
+
export declare const getResolvedLocale: (locale?: string) => string;
|
|
98
98
|
/**
|
|
99
99
|
* Detects whether a locale uses 12-hour or 24-hour time format.
|
|
100
100
|
* Uses Intl.DateTimeFormat to check if the locale produces AM/PM markers.
|
|
101
101
|
*/
|
|
102
|
-
export declare
|
|
102
|
+
export declare const detectHourFormat: (locale: string) => HourFormat;
|
|
103
103
|
/**
|
|
104
104
|
* Gets localized AM/PM labels using Intl.DateTimeFormat.
|
|
105
105
|
* Returns the locale-specific strings for morning and afternoon periods.
|
|
106
106
|
*/
|
|
107
|
-
export declare
|
|
107
|
+
export declare const getLocalizedPeriodLabels: (locale: string) => PeriodLabels;
|
|
108
108
|
/**
|
|
109
109
|
* Gets the localized label for a period value ('AM' or 'PM').
|
|
110
110
|
*/
|
|
111
|
-
export declare
|
|
111
|
+
export declare const getLocalizedPeriodLabel: (period: Period, labels: PeriodLabels) => string;
|
|
112
112
|
/**
|
|
113
113
|
* Formats a number using Intl.NumberFormat for the given locale.
|
|
114
114
|
* Pads to 2 digits for time display.
|
|
115
115
|
*/
|
|
116
|
-
export declare
|
|
116
|
+
export declare const formatTimeNumber: (value: number, locale: string) => string;
|
|
117
117
|
/**
|
|
118
118
|
* Validates 24-hour format (00-23)
|
|
119
119
|
*/
|
|
120
|
-
export declare
|
|
120
|
+
export declare const isValidHour: (value: string) => boolean;
|
|
121
121
|
/**
|
|
122
122
|
* Validates 12-hour format (01-12)
|
|
123
123
|
*/
|
|
124
|
-
export declare
|
|
124
|
+
export declare const isValid12Hour: (value: string) => boolean;
|
|
125
125
|
/**
|
|
126
126
|
* Validates minute format (00-59)
|
|
127
127
|
*/
|
|
128
|
-
export declare
|
|
128
|
+
export declare const isValidMinute: (value: string) => boolean;
|
|
129
129
|
interface GetValidNumberConfig {
|
|
130
|
+
loop?: boolean;
|
|
130
131
|
max: number;
|
|
131
132
|
min?: number;
|
|
132
|
-
loop?: boolean;
|
|
133
133
|
}
|
|
134
|
-
export declare
|
|
135
|
-
export declare
|
|
136
|
-
export declare
|
|
137
|
-
export declare
|
|
134
|
+
export declare const getValidNumber: (value: string, { max, min, loop }: GetValidNumberConfig) => string;
|
|
135
|
+
export declare const getValidHour: (value: string) => string;
|
|
136
|
+
export declare const getValid12Hour: (value: string) => string;
|
|
137
|
+
export declare const getValidMinute: (value: string) => string;
|
|
138
138
|
interface GetValidArrowNumberConfig {
|
|
139
|
-
min: number;
|
|
140
139
|
max: number;
|
|
140
|
+
min: number;
|
|
141
141
|
step: number;
|
|
142
142
|
}
|
|
143
|
-
export declare
|
|
144
|
-
export declare
|
|
145
|
-
export declare
|
|
146
|
-
export declare
|
|
147
|
-
export declare
|
|
148
|
-
export declare
|
|
149
|
-
export declare
|
|
150
|
-
export declare
|
|
151
|
-
export declare
|
|
152
|
-
export declare
|
|
143
|
+
export declare const getValidArrowNumber: (value: string, { min, max, step }: GetValidArrowNumberConfig) => string;
|
|
144
|
+
export declare const getValidArrowHour: (value: string, step: number) => string;
|
|
145
|
+
export declare const getValidArrow12Hour: (value: string, step: number) => string;
|
|
146
|
+
export declare const getValidArrowMinute: (value: string, step: number) => string;
|
|
147
|
+
export declare const setMinutes: (date: Date, value: string) => Date;
|
|
148
|
+
export declare const setHours: (date: Date, value: string) => Date;
|
|
149
|
+
export declare const set12Hours: (date: Date, value: string, period: Period) => Date;
|
|
150
|
+
export declare const setDateByType: (date: Date, type: TimePickerType, value: string, period?: Period) => Date;
|
|
151
|
+
export declare const getDateByType: (date: Date, type: TimePickerType) => string;
|
|
152
|
+
export declare const getArrowByType: (step: number, type: TimePickerType, value: string) => string;
|
|
153
153
|
/**
|
|
154
154
|
* Converts 12-hour format to 24-hour format
|
|
155
155
|
* 12:00 PM → 12:00 (noon)
|
|
156
156
|
* 12:00 AM → 00:00 (midnight)
|
|
157
157
|
*/
|
|
158
|
-
export declare
|
|
158
|
+
export declare const convert12HourTo24Hour: (hour: number, period: Period) => number;
|
|
159
159
|
/**
|
|
160
160
|
* Converts 24-hour format to 12-hour display value
|
|
161
161
|
* Returns a zero-padded string (e.g., "01", "12")
|
|
162
162
|
*/
|
|
163
|
-
export declare
|
|
163
|
+
export declare const display12HourValue: (hours: number) => string;
|
|
164
164
|
/**
|
|
165
165
|
* Gets the period (AM/PM) from a 24-hour value
|
|
166
166
|
*/
|
|
167
|
-
export declare
|
|
168
|
-
export declare
|
|
169
|
-
export declare
|
|
167
|
+
export declare const getPeriodFromHours: (hours: number) => Period;
|
|
168
|
+
export declare const getAriaValueNow: (date: Date, type: TimePickerType) => number;
|
|
169
|
+
export declare const getAriaValueMinMax: (type: TimePickerType) => {
|
|
170
170
|
min: number;
|
|
171
171
|
max: number;
|
|
172
172
|
};
|
|
173
|
-
export declare
|
|
173
|
+
export declare const getAriaLabel: (type: TimePickerType, translations?: TimePickerTranslations) => string;
|
|
174
174
|
export {};
|
|
175
175
|
//# sourceMappingURL=DateTimeUtils.d.ts.map
|