@kopexa/date-picker 1.0.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/LICENSE +201 -0
- package/dist/chunk-2C5V7ODF.mjs +501 -0
- package/dist/chunk-C7GZJJIK.mjs +10 -0
- package/dist/chunk-HPM5Y2V6.mjs +35 -0
- package/dist/chunk-UD6PYKLX.mjs +96 -0
- package/dist/date-picker-BAPrYssW.d.mts +10 -0
- package/dist/date-picker-BAPrYssW.d.ts +10 -0
- package/dist/date-picker-field.d.mts +41 -0
- package/dist/date-picker-field.d.ts +41 -0
- package/dist/date-picker-field.js +531 -0
- package/dist/date-picker-field.mjs +10 -0
- package/dist/date-picker-messages.d.mts +29 -0
- package/dist/date-picker-messages.d.ts +29 -0
- package/dist/date-picker-messages.js +58 -0
- package/dist/date-picker-messages.mjs +8 -0
- package/dist/date-picker.d.mts +1 -0
- package/dist/date-picker.d.ts +1 -0
- package/dist/date-picker.js +84 -0
- package/dist/date-picker.mjs +61 -0
- package/dist/index.d.mts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +580 -0
- package/dist/index.mjs +30 -0
- package/package.json +53 -0
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
datePickerMessages
|
|
4
|
+
} from "./chunk-HPM5Y2V6.mjs";
|
|
5
|
+
|
|
6
|
+
// src/date-picker-field.tsx
|
|
7
|
+
import {
|
|
8
|
+
DatePickerClearTrigger,
|
|
9
|
+
DatePickerContent,
|
|
10
|
+
DatePickerContext,
|
|
11
|
+
DatePickerControl,
|
|
12
|
+
DatePickerInput,
|
|
13
|
+
DatePickerLabel,
|
|
14
|
+
DatePickerNextTrigger,
|
|
15
|
+
DatePickerPositioner,
|
|
16
|
+
DatePickerPrevTrigger,
|
|
17
|
+
DatePickerRangeText,
|
|
18
|
+
DatePickerRoot,
|
|
19
|
+
DatePickerTable,
|
|
20
|
+
DatePickerTableBody,
|
|
21
|
+
DatePickerTableCell,
|
|
22
|
+
DatePickerTableCellTrigger,
|
|
23
|
+
DatePickerTableHead,
|
|
24
|
+
DatePickerTableHeader,
|
|
25
|
+
DatePickerTableRow,
|
|
26
|
+
DatePickerTrigger,
|
|
27
|
+
DatePickerView,
|
|
28
|
+
DatePickerViewControl,
|
|
29
|
+
DatePickerViewTrigger
|
|
30
|
+
} from "@ark-ui/react/date-picker";
|
|
31
|
+
import { Portal } from "@ark-ui/react/portal";
|
|
32
|
+
import { CalendarDateTime } from "@internationalized/date";
|
|
33
|
+
import { useSafeIntl } from "@kopexa/i18n";
|
|
34
|
+
import { useCallback, useMemo, useState } from "react";
|
|
35
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
36
|
+
function CalendarIcon({ className }) {
|
|
37
|
+
return /* @__PURE__ */ jsxs(
|
|
38
|
+
"svg",
|
|
39
|
+
{
|
|
40
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
41
|
+
viewBox: "0 0 24 24",
|
|
42
|
+
fill: "none",
|
|
43
|
+
stroke: "currentColor",
|
|
44
|
+
strokeWidth: "2",
|
|
45
|
+
strokeLinecap: "round",
|
|
46
|
+
strokeLinejoin: "round",
|
|
47
|
+
className,
|
|
48
|
+
"aria-hidden": "true",
|
|
49
|
+
children: [
|
|
50
|
+
/* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
|
|
51
|
+
/* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
|
|
52
|
+
/* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
|
|
53
|
+
/* @__PURE__ */ jsx("path", { d: "M3 10h18" })
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
function ChevronLeftIcon({ className }) {
|
|
59
|
+
return /* @__PURE__ */ jsx(
|
|
60
|
+
"svg",
|
|
61
|
+
{
|
|
62
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
63
|
+
viewBox: "0 0 24 24",
|
|
64
|
+
fill: "none",
|
|
65
|
+
stroke: "currentColor",
|
|
66
|
+
strokeWidth: "2",
|
|
67
|
+
strokeLinecap: "round",
|
|
68
|
+
strokeLinejoin: "round",
|
|
69
|
+
className,
|
|
70
|
+
"aria-hidden": "true",
|
|
71
|
+
children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
function ChevronRightIcon({ className }) {
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
"svg",
|
|
78
|
+
{
|
|
79
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
80
|
+
viewBox: "0 0 24 24",
|
|
81
|
+
fill: "none",
|
|
82
|
+
stroke: "currentColor",
|
|
83
|
+
strokeWidth: "2",
|
|
84
|
+
strokeLinecap: "round",
|
|
85
|
+
strokeLinejoin: "round",
|
|
86
|
+
className,
|
|
87
|
+
"aria-hidden": "true",
|
|
88
|
+
children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
|
|
89
|
+
}
|
|
90
|
+
);
|
|
91
|
+
}
|
|
92
|
+
function XIcon({ className }) {
|
|
93
|
+
return /* @__PURE__ */ jsxs(
|
|
94
|
+
"svg",
|
|
95
|
+
{
|
|
96
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
97
|
+
viewBox: "0 0 24 24",
|
|
98
|
+
fill: "none",
|
|
99
|
+
stroke: "currentColor",
|
|
100
|
+
strokeWidth: "2",
|
|
101
|
+
strokeLinecap: "round",
|
|
102
|
+
strokeLinejoin: "round",
|
|
103
|
+
className,
|
|
104
|
+
"aria-hidden": "true",
|
|
105
|
+
children: [
|
|
106
|
+
/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
|
|
107
|
+
/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
var styles = {
|
|
113
|
+
control: "relative flex items-center",
|
|
114
|
+
input: "w-full h-9 rounded-md border bg-transparent pl-3 pr-9 text-sm outline-none focus:ring-2 focus:ring-ring",
|
|
115
|
+
inputWithClear: "w-full h-9 rounded-md border bg-transparent pl-3 pr-16 text-sm outline-none focus:ring-2 focus:ring-ring",
|
|
116
|
+
trigger: "absolute right-0 inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
|
|
117
|
+
triggerWithClear: "inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
|
|
118
|
+
clearTrigger: "inline-flex items-center justify-center size-9 text-muted-foreground hover:text-foreground transition-colors",
|
|
119
|
+
iconButtons: "absolute right-0 flex items-center",
|
|
120
|
+
content: "z-50 bg-popover text-popover-foreground rounded-lg border shadow-md p-3 outline-none",
|
|
121
|
+
viewControl: "flex items-center justify-between mb-2",
|
|
122
|
+
navButton: "inline-flex items-center justify-center size-8 rounded-md hover:bg-muted transition-colors",
|
|
123
|
+
viewTrigger: "text-sm font-medium hover:bg-muted px-2 py-1 rounded-md transition-colors",
|
|
124
|
+
table: "w-full border-collapse",
|
|
125
|
+
tableRow: "flex",
|
|
126
|
+
tableHeader: "flex-1 text-center text-xs text-muted-foreground font-medium py-1.5",
|
|
127
|
+
tableCell: "flex-1 text-center p-0",
|
|
128
|
+
tableCellTrigger: "inline-flex items-center justify-center size-9 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[today]:font-bold data-[outside-range]:text-muted-foreground/40 data-[disabled]:text-muted-foreground/30 data-[disabled]:line-through data-[disabled]:pointer-events-none",
|
|
129
|
+
monthCell: "flex-1 text-center p-0.5",
|
|
130
|
+
monthCellTrigger: "inline-flex items-center justify-center w-full py-2.5 px-3 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:text-muted-foreground/30 data-[disabled]:pointer-events-none",
|
|
131
|
+
yearCell: "flex-1 text-center p-0.5",
|
|
132
|
+
yearCellTrigger: "inline-flex items-center justify-center w-full py-2 text-sm rounded-md transition-colors hover:bg-muted data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[disabled]:text-muted-foreground/30 data-[disabled]:pointer-events-none",
|
|
133
|
+
footer: "flex items-center gap-1 pt-2 mt-2 border-t",
|
|
134
|
+
footerButton: "text-sm px-2 py-1 rounded-md hover:bg-muted transition-colors",
|
|
135
|
+
timeInput: "h-9 rounded-md border bg-transparent px-3 text-sm outline-none focus:ring-2 focus:ring-ring",
|
|
136
|
+
label: "text-sm font-medium",
|
|
137
|
+
timeTrigger: "flex-1 h-9 rounded-md border bg-transparent px-3 text-sm text-left hover:bg-muted transition-colors flex items-center justify-between"
|
|
138
|
+
};
|
|
139
|
+
function DayView() {
|
|
140
|
+
return /* @__PURE__ */ jsx(DatePickerView, { view: "day", children: /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
141
|
+
/* @__PURE__ */ jsxs(DatePickerViewControl, { className: styles.viewControl, children: [
|
|
142
|
+
/* @__PURE__ */ jsx(DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }) }),
|
|
143
|
+
/* @__PURE__ */ jsx(DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ jsx(DatePickerRangeText, {}) }),
|
|
144
|
+
/* @__PURE__ */ jsx(DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" }) })
|
|
145
|
+
] }),
|
|
146
|
+
/* @__PURE__ */ jsxs(DatePickerTable, { className: styles.table, children: [
|
|
147
|
+
/* @__PURE__ */ jsx(DatePickerTableHead, { children: /* @__PURE__ */ jsx(DatePickerTableRow, { className: styles.tableRow, children: api.weekDays.map((weekDay, i) => /* @__PURE__ */ jsx(
|
|
148
|
+
DatePickerTableHeader,
|
|
149
|
+
{
|
|
150
|
+
className: styles.tableHeader,
|
|
151
|
+
children: weekDay.short
|
|
152
|
+
},
|
|
153
|
+
i
|
|
154
|
+
)) }) }),
|
|
155
|
+
/* @__PURE__ */ jsx(DatePickerTableBody, { children: api.weeks.map((week, i) => /* @__PURE__ */ jsx(
|
|
156
|
+
DatePickerTableRow,
|
|
157
|
+
{
|
|
158
|
+
className: styles.tableRow,
|
|
159
|
+
children: week.map((day, j) => /* @__PURE__ */ jsx(
|
|
160
|
+
DatePickerTableCell,
|
|
161
|
+
{
|
|
162
|
+
value: day,
|
|
163
|
+
className: styles.tableCell,
|
|
164
|
+
children: /* @__PURE__ */ jsx(
|
|
165
|
+
DatePickerTableCellTrigger,
|
|
166
|
+
{
|
|
167
|
+
className: styles.tableCellTrigger,
|
|
168
|
+
children: day.day
|
|
169
|
+
}
|
|
170
|
+
)
|
|
171
|
+
},
|
|
172
|
+
j
|
|
173
|
+
))
|
|
174
|
+
},
|
|
175
|
+
i
|
|
176
|
+
)) })
|
|
177
|
+
] })
|
|
178
|
+
] }) }) });
|
|
179
|
+
}
|
|
180
|
+
function MonthView() {
|
|
181
|
+
return /* @__PURE__ */ jsx(DatePickerView, { view: "month", children: /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
182
|
+
/* @__PURE__ */ jsxs(DatePickerViewControl, { className: styles.viewControl, children: [
|
|
183
|
+
/* @__PURE__ */ jsx(DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }) }),
|
|
184
|
+
/* @__PURE__ */ jsx(DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ jsx(DatePickerRangeText, {}) }),
|
|
185
|
+
/* @__PURE__ */ jsx(DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" }) })
|
|
186
|
+
] }),
|
|
187
|
+
/* @__PURE__ */ jsx(DatePickerTable, { className: styles.table, children: /* @__PURE__ */ jsx(DatePickerTableBody, { children: api.getMonthsGrid({ columns: 3, format: "short" }).map((months, i) => /* @__PURE__ */ jsx(
|
|
188
|
+
DatePickerTableRow,
|
|
189
|
+
{
|
|
190
|
+
className: styles.tableRow,
|
|
191
|
+
children: months.map((month, j) => /* @__PURE__ */ jsx(
|
|
192
|
+
DatePickerTableCell,
|
|
193
|
+
{
|
|
194
|
+
value: month.value,
|
|
195
|
+
className: styles.monthCell,
|
|
196
|
+
children: /* @__PURE__ */ jsx(
|
|
197
|
+
DatePickerTableCellTrigger,
|
|
198
|
+
{
|
|
199
|
+
className: styles.monthCellTrigger,
|
|
200
|
+
children: month.label
|
|
201
|
+
}
|
|
202
|
+
)
|
|
203
|
+
},
|
|
204
|
+
j
|
|
205
|
+
))
|
|
206
|
+
},
|
|
207
|
+
i
|
|
208
|
+
)) }) })
|
|
209
|
+
] }) }) });
|
|
210
|
+
}
|
|
211
|
+
function YearView() {
|
|
212
|
+
return /* @__PURE__ */ jsx(DatePickerView, { view: "year", children: /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
213
|
+
/* @__PURE__ */ jsxs(DatePickerViewControl, { className: styles.viewControl, children: [
|
|
214
|
+
/* @__PURE__ */ jsx(DatePickerPrevTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }) }),
|
|
215
|
+
/* @__PURE__ */ jsx(DatePickerViewTrigger, { className: styles.viewTrigger, children: /* @__PURE__ */ jsx(DatePickerRangeText, {}) }),
|
|
216
|
+
/* @__PURE__ */ jsx(DatePickerNextTrigger, { className: styles.navButton, children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" }) })
|
|
217
|
+
] }),
|
|
218
|
+
/* @__PURE__ */ jsx(DatePickerTable, { className: styles.table, children: /* @__PURE__ */ jsx(DatePickerTableBody, { children: api.getYearsGrid({ columns: 4 }).map((years, i) => /* @__PURE__ */ jsx(
|
|
219
|
+
DatePickerTableRow,
|
|
220
|
+
{
|
|
221
|
+
className: styles.tableRow,
|
|
222
|
+
children: years.map((year, j) => /* @__PURE__ */ jsx(
|
|
223
|
+
DatePickerTableCell,
|
|
224
|
+
{
|
|
225
|
+
value: year.value,
|
|
226
|
+
className: styles.yearCell,
|
|
227
|
+
children: /* @__PURE__ */ jsx(
|
|
228
|
+
DatePickerTableCellTrigger,
|
|
229
|
+
{
|
|
230
|
+
className: styles.yearCellTrigger,
|
|
231
|
+
children: year.label
|
|
232
|
+
}
|
|
233
|
+
)
|
|
234
|
+
},
|
|
235
|
+
j
|
|
236
|
+
))
|
|
237
|
+
},
|
|
238
|
+
i
|
|
239
|
+
)) }) })
|
|
240
|
+
] }) }) });
|
|
241
|
+
}
|
|
242
|
+
function CalendarFooter({
|
|
243
|
+
todayLabel,
|
|
244
|
+
clearLabel
|
|
245
|
+
}) {
|
|
246
|
+
return /* @__PURE__ */ jsx(DatePickerContext, { children: (api) => /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
|
|
247
|
+
/* @__PURE__ */ jsx(
|
|
248
|
+
"button",
|
|
249
|
+
{
|
|
250
|
+
type: "button",
|
|
251
|
+
onClick: () => api.selectToday(),
|
|
252
|
+
className: `${styles.footerButton} text-foreground`,
|
|
253
|
+
children: todayLabel
|
|
254
|
+
}
|
|
255
|
+
),
|
|
256
|
+
/* @__PURE__ */ jsx(
|
|
257
|
+
"button",
|
|
258
|
+
{
|
|
259
|
+
type: "button",
|
|
260
|
+
onClick: () => api.clearValue(),
|
|
261
|
+
className: `${styles.footerButton} text-destructive`,
|
|
262
|
+
children: clearLabel
|
|
263
|
+
}
|
|
264
|
+
)
|
|
265
|
+
] }) });
|
|
266
|
+
}
|
|
267
|
+
function DatePickerField({
|
|
268
|
+
label,
|
|
269
|
+
value,
|
|
270
|
+
defaultValue,
|
|
271
|
+
onValueChange,
|
|
272
|
+
showTime = false,
|
|
273
|
+
clearable = true,
|
|
274
|
+
locale: localeProp,
|
|
275
|
+
min,
|
|
276
|
+
max,
|
|
277
|
+
disabled,
|
|
278
|
+
readOnly,
|
|
279
|
+
placeholder: placeholderProp,
|
|
280
|
+
todayLabel: todayLabelProp,
|
|
281
|
+
clearLabel: clearLabelProp,
|
|
282
|
+
className,
|
|
283
|
+
rootProps
|
|
284
|
+
}) {
|
|
285
|
+
var _a;
|
|
286
|
+
const intl = useSafeIntl();
|
|
287
|
+
const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
|
|
288
|
+
const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
|
|
289
|
+
const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
|
|
290
|
+
const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(
|
|
291
|
+
showTime ? datePickerMessages.select_date_and_time : datePickerMessages.select_date
|
|
292
|
+
);
|
|
293
|
+
if (showTime) {
|
|
294
|
+
return /* @__PURE__ */ jsx(
|
|
295
|
+
DateTimePickerField,
|
|
296
|
+
{
|
|
297
|
+
label,
|
|
298
|
+
value,
|
|
299
|
+
defaultValue,
|
|
300
|
+
onValueChange,
|
|
301
|
+
clearable,
|
|
302
|
+
locale,
|
|
303
|
+
min,
|
|
304
|
+
max,
|
|
305
|
+
disabled,
|
|
306
|
+
readOnly,
|
|
307
|
+
placeholder,
|
|
308
|
+
todayLabel,
|
|
309
|
+
clearLabel,
|
|
310
|
+
className,
|
|
311
|
+
rootProps
|
|
312
|
+
}
|
|
313
|
+
);
|
|
314
|
+
}
|
|
315
|
+
return /* @__PURE__ */ jsxs(
|
|
316
|
+
DatePickerRoot,
|
|
317
|
+
{
|
|
318
|
+
value,
|
|
319
|
+
defaultValue,
|
|
320
|
+
onValueChange,
|
|
321
|
+
locale,
|
|
322
|
+
min,
|
|
323
|
+
max,
|
|
324
|
+
disabled,
|
|
325
|
+
readOnly,
|
|
326
|
+
selectionMode: "single",
|
|
327
|
+
closeOnSelect: true,
|
|
328
|
+
className,
|
|
329
|
+
...rootProps,
|
|
330
|
+
children: [
|
|
331
|
+
label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
|
|
332
|
+
/* @__PURE__ */ jsxs(DatePickerControl, { className: styles.control, children: [
|
|
333
|
+
/* @__PURE__ */ jsx(
|
|
334
|
+
DatePickerInput,
|
|
335
|
+
{
|
|
336
|
+
className: clearable ? styles.inputWithClear : styles.input,
|
|
337
|
+
placeholder
|
|
338
|
+
}
|
|
339
|
+
),
|
|
340
|
+
clearable && !disabled && !readOnly ? /* @__PURE__ */ jsxs("div", { className: styles.iconButtons, children: [
|
|
341
|
+
/* @__PURE__ */ jsx(DatePickerClearTrigger, { className: styles.clearTrigger, children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" }) }),
|
|
342
|
+
/* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.triggerWithClear, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
|
|
343
|
+
] }) : /* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
|
|
344
|
+
] }),
|
|
345
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DatePickerPositioner, { children: /* @__PURE__ */ jsxs(DatePickerContent, { className: styles.content, children: [
|
|
346
|
+
/* @__PURE__ */ jsx(DayView, {}),
|
|
347
|
+
/* @__PURE__ */ jsx(MonthView, {}),
|
|
348
|
+
/* @__PURE__ */ jsx(YearView, {}),
|
|
349
|
+
/* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
|
|
350
|
+
] }) }) })
|
|
351
|
+
]
|
|
352
|
+
}
|
|
353
|
+
);
|
|
354
|
+
}
|
|
355
|
+
function DateTimePickerField({
|
|
356
|
+
label,
|
|
357
|
+
value: valueProp,
|
|
358
|
+
defaultValue,
|
|
359
|
+
onValueChange,
|
|
360
|
+
clearable = true,
|
|
361
|
+
locale: localeProp,
|
|
362
|
+
min,
|
|
363
|
+
max,
|
|
364
|
+
disabled,
|
|
365
|
+
readOnly,
|
|
366
|
+
placeholder: placeholderProp,
|
|
367
|
+
todayLabel: todayLabelProp,
|
|
368
|
+
clearLabel: clearLabelProp,
|
|
369
|
+
className,
|
|
370
|
+
rootProps
|
|
371
|
+
}) {
|
|
372
|
+
var _a;
|
|
373
|
+
const intl = useSafeIntl();
|
|
374
|
+
const locale = (_a = localeProp != null ? localeProp : intl.locale) != null ? _a : "en-US";
|
|
375
|
+
const todayLabel = todayLabelProp != null ? todayLabelProp : intl.formatMessage(datePickerMessages.today);
|
|
376
|
+
const clearLabel = clearLabelProp != null ? clearLabelProp : intl.formatMessage(datePickerMessages.clear);
|
|
377
|
+
const placeholder = placeholderProp != null ? placeholderProp : intl.formatMessage(datePickerMessages.select_date_and_time);
|
|
378
|
+
const [internalValue, setInternalValue] = useState(() => {
|
|
379
|
+
const initial = valueProp != null ? valueProp : defaultValue;
|
|
380
|
+
if (!initial || initial.length === 0) return [];
|
|
381
|
+
const v = initial[0];
|
|
382
|
+
if ("hour" in v) return [v];
|
|
383
|
+
return [new CalendarDateTime(v.year, v.month, v.day, 0, 0, 0)];
|
|
384
|
+
});
|
|
385
|
+
const currentValue = useMemo(() => {
|
|
386
|
+
if (valueProp === void 0) return internalValue;
|
|
387
|
+
if (!valueProp || valueProp.length === 0) return [];
|
|
388
|
+
const v = valueProp[0];
|
|
389
|
+
if ("hour" in v) return [v];
|
|
390
|
+
return [new CalendarDateTime(v.year, v.month, v.day, 0, 0, 0)];
|
|
391
|
+
}, [valueProp, internalValue]);
|
|
392
|
+
const handleDateChange = useCallback(
|
|
393
|
+
(details) => {
|
|
394
|
+
var _a2;
|
|
395
|
+
const newDate = details.value[0];
|
|
396
|
+
if (!newDate) {
|
|
397
|
+
setInternalValue([]);
|
|
398
|
+
onValueChange == null ? void 0 : onValueChange(details);
|
|
399
|
+
return;
|
|
400
|
+
}
|
|
401
|
+
const prevTime = (_a2 = currentValue[0]) != null ? _a2 : { hour: 0, minute: 0, second: 0 };
|
|
402
|
+
const merged = new CalendarDateTime(
|
|
403
|
+
newDate.year,
|
|
404
|
+
newDate.month,
|
|
405
|
+
newDate.day,
|
|
406
|
+
"hour" in prevTime ? prevTime.hour : 0,
|
|
407
|
+
"minute" in prevTime ? prevTime.minute : 0,
|
|
408
|
+
"second" in prevTime ? prevTime.second : 0
|
|
409
|
+
);
|
|
410
|
+
setInternalValue([merged]);
|
|
411
|
+
onValueChange == null ? void 0 : onValueChange({ ...details, value: [merged] });
|
|
412
|
+
},
|
|
413
|
+
[currentValue, onValueChange]
|
|
414
|
+
);
|
|
415
|
+
const timeValue = currentValue[0] ? `${String(currentValue[0].hour).padStart(2, "0")}:${String(currentValue[0].minute).padStart(2, "0")}` : "";
|
|
416
|
+
const handleTimeChange = useCallback(
|
|
417
|
+
(e) => {
|
|
418
|
+
var _a2;
|
|
419
|
+
const [hours, minutes] = e.currentTarget.value.split(":").map(Number);
|
|
420
|
+
const now = /* @__PURE__ */ new Date();
|
|
421
|
+
const fallback = new CalendarDateTime(
|
|
422
|
+
now.getFullYear(),
|
|
423
|
+
now.getMonth() + 1,
|
|
424
|
+
now.getDate(),
|
|
425
|
+
0,
|
|
426
|
+
0
|
|
427
|
+
);
|
|
428
|
+
const current = (_a2 = currentValue[0]) != null ? _a2 : fallback;
|
|
429
|
+
const updated = current.set({ hour: hours, minute: minutes });
|
|
430
|
+
setInternalValue([updated]);
|
|
431
|
+
onValueChange == null ? void 0 : onValueChange({
|
|
432
|
+
value: [updated],
|
|
433
|
+
valueAsString: [updated.toString()],
|
|
434
|
+
view: "day"
|
|
435
|
+
});
|
|
436
|
+
},
|
|
437
|
+
[currentValue, onValueChange]
|
|
438
|
+
);
|
|
439
|
+
const handleClear = useCallback(() => {
|
|
440
|
+
setInternalValue([]);
|
|
441
|
+
onValueChange == null ? void 0 : onValueChange({
|
|
442
|
+
value: [],
|
|
443
|
+
valueAsString: [],
|
|
444
|
+
view: "day"
|
|
445
|
+
});
|
|
446
|
+
}, [onValueChange]);
|
|
447
|
+
return /* @__PURE__ */ jsxs(
|
|
448
|
+
DatePickerRoot,
|
|
449
|
+
{
|
|
450
|
+
value: currentValue,
|
|
451
|
+
onValueChange: handleDateChange,
|
|
452
|
+
locale,
|
|
453
|
+
min,
|
|
454
|
+
max,
|
|
455
|
+
disabled,
|
|
456
|
+
readOnly,
|
|
457
|
+
selectionMode: "single",
|
|
458
|
+
closeOnSelect: false,
|
|
459
|
+
className,
|
|
460
|
+
...rootProps,
|
|
461
|
+
children: [
|
|
462
|
+
label && /* @__PURE__ */ jsx(DatePickerLabel, { className: styles.label, children: label }),
|
|
463
|
+
/* @__PURE__ */ jsxs(DatePickerControl, { className: "flex items-center gap-1", children: [
|
|
464
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center", children: [
|
|
465
|
+
/* @__PURE__ */ jsx(DatePickerInput, { className: styles.input, placeholder }),
|
|
466
|
+
/* @__PURE__ */ jsx(DatePickerTrigger, { className: styles.trigger, children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }) })
|
|
467
|
+
] }),
|
|
468
|
+
/* @__PURE__ */ jsx(
|
|
469
|
+
"input",
|
|
470
|
+
{
|
|
471
|
+
type: "time",
|
|
472
|
+
value: timeValue,
|
|
473
|
+
onChange: handleTimeChange,
|
|
474
|
+
disabled,
|
|
475
|
+
readOnly,
|
|
476
|
+
className: styles.timeInput
|
|
477
|
+
}
|
|
478
|
+
),
|
|
479
|
+
clearable && !disabled && !readOnly && /* @__PURE__ */ jsx(
|
|
480
|
+
DatePickerClearTrigger,
|
|
481
|
+
{
|
|
482
|
+
className: "inline-flex items-center justify-center size-9 rounded-md border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
|
|
483
|
+
onClick: handleClear,
|
|
484
|
+
children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
|
|
485
|
+
}
|
|
486
|
+
)
|
|
487
|
+
] }),
|
|
488
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DatePickerPositioner, { children: /* @__PURE__ */ jsxs(DatePickerContent, { className: styles.content, children: [
|
|
489
|
+
/* @__PURE__ */ jsx(DayView, {}),
|
|
490
|
+
/* @__PURE__ */ jsx(MonthView, {}),
|
|
491
|
+
/* @__PURE__ */ jsx(YearView, {}),
|
|
492
|
+
/* @__PURE__ */ jsx(CalendarFooter, { todayLabel, clearLabel })
|
|
493
|
+
] }) }) })
|
|
494
|
+
]
|
|
495
|
+
}
|
|
496
|
+
);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
export {
|
|
500
|
+
DatePickerField
|
|
501
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/date-picker-messages.ts
|
|
4
|
+
import { defineMessages } from "@kopexa/i18n";
|
|
5
|
+
var datePickerMessages = defineMessages({
|
|
6
|
+
today: {
|
|
7
|
+
id: "date-picker.today",
|
|
8
|
+
defaultMessage: "Today",
|
|
9
|
+
description: "Button to select today's date"
|
|
10
|
+
},
|
|
11
|
+
clear: {
|
|
12
|
+
id: "date-picker.clear",
|
|
13
|
+
defaultMessage: "Clear",
|
|
14
|
+
description: "Button to clear the date"
|
|
15
|
+
},
|
|
16
|
+
open_calendar: {
|
|
17
|
+
id: "date-picker.open_calendar",
|
|
18
|
+
defaultMessage: "Open calendar",
|
|
19
|
+
description: "Aria label for calendar trigger button"
|
|
20
|
+
},
|
|
21
|
+
select_date: {
|
|
22
|
+
id: "date-picker.select_date",
|
|
23
|
+
defaultMessage: "Select date",
|
|
24
|
+
description: "Placeholder for date input"
|
|
25
|
+
},
|
|
26
|
+
select_date_and_time: {
|
|
27
|
+
id: "date-picker.select_date_and_time",
|
|
28
|
+
defaultMessage: "Select date and time",
|
|
29
|
+
description: "Placeholder for date+time input"
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
export {
|
|
34
|
+
datePickerMessages
|
|
35
|
+
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
__export
|
|
4
|
+
} from "./chunk-C7GZJJIK.mjs";
|
|
5
|
+
|
|
6
|
+
// src/date-picker.tsx
|
|
7
|
+
var date_picker_exports = {};
|
|
8
|
+
__export(date_picker_exports, {
|
|
9
|
+
ClearTrigger: () => DatePickerClearTrigger,
|
|
10
|
+
Content: () => DatePickerContent,
|
|
11
|
+
Context: () => DatePickerContext,
|
|
12
|
+
Control: () => DatePickerControl,
|
|
13
|
+
Input: () => DatePickerInput,
|
|
14
|
+
Label: () => DatePickerLabel,
|
|
15
|
+
MonthSelect: () => DatePickerMonthSelect,
|
|
16
|
+
NextTrigger: () => DatePickerNextTrigger,
|
|
17
|
+
Positioner: () => DatePickerPositioner,
|
|
18
|
+
PresetTrigger: () => DatePickerPresetTrigger,
|
|
19
|
+
PrevTrigger: () => DatePickerPrevTrigger,
|
|
20
|
+
RangeText: () => DatePickerRangeText,
|
|
21
|
+
Root: () => DatePickerRoot,
|
|
22
|
+
Table: () => DatePickerTable,
|
|
23
|
+
TableBody: () => DatePickerTableBody,
|
|
24
|
+
TableCell: () => DatePickerTableCell,
|
|
25
|
+
TableCellTrigger: () => DatePickerTableCellTrigger,
|
|
26
|
+
TableHead: () => DatePickerTableHead,
|
|
27
|
+
TableHeader: () => DatePickerTableHeader,
|
|
28
|
+
TableRow: () => DatePickerTableRow,
|
|
29
|
+
Trigger: () => DatePickerTrigger,
|
|
30
|
+
ValueText: () => DatePickerValueText,
|
|
31
|
+
View: () => DatePickerView,
|
|
32
|
+
ViewControl: () => DatePickerViewControl,
|
|
33
|
+
ViewTrigger: () => DatePickerViewTrigger,
|
|
34
|
+
YearSelect: () => DatePickerYearSelect,
|
|
35
|
+
parseDate: () => parseDate
|
|
36
|
+
});
|
|
37
|
+
import {
|
|
38
|
+
DatePickerClearTrigger,
|
|
39
|
+
DatePickerContent,
|
|
40
|
+
DatePickerContext,
|
|
41
|
+
DatePickerControl,
|
|
42
|
+
DatePickerInput,
|
|
43
|
+
DatePickerLabel,
|
|
44
|
+
DatePickerMonthSelect,
|
|
45
|
+
DatePickerNextTrigger,
|
|
46
|
+
DatePickerPositioner,
|
|
47
|
+
DatePickerPresetTrigger,
|
|
48
|
+
DatePickerPrevTrigger,
|
|
49
|
+
DatePickerRangeText,
|
|
50
|
+
DatePickerRoot,
|
|
51
|
+
DatePickerTable,
|
|
52
|
+
DatePickerTableBody,
|
|
53
|
+
DatePickerTableCell,
|
|
54
|
+
DatePickerTableCellTrigger,
|
|
55
|
+
DatePickerTableHead,
|
|
56
|
+
DatePickerTableHeader,
|
|
57
|
+
DatePickerTableRow,
|
|
58
|
+
DatePickerTrigger,
|
|
59
|
+
DatePickerValueText,
|
|
60
|
+
DatePickerView,
|
|
61
|
+
DatePickerViewControl,
|
|
62
|
+
DatePickerViewTrigger,
|
|
63
|
+
DatePickerYearSelect,
|
|
64
|
+
parseDate
|
|
65
|
+
} from "@ark-ui/react/date-picker";
|
|
66
|
+
|
|
67
|
+
export {
|
|
68
|
+
date_picker_exports,
|
|
69
|
+
DatePickerClearTrigger,
|
|
70
|
+
DatePickerContent,
|
|
71
|
+
DatePickerContext,
|
|
72
|
+
DatePickerControl,
|
|
73
|
+
DatePickerInput,
|
|
74
|
+
DatePickerLabel,
|
|
75
|
+
DatePickerMonthSelect,
|
|
76
|
+
DatePickerNextTrigger,
|
|
77
|
+
DatePickerPositioner,
|
|
78
|
+
DatePickerPresetTrigger,
|
|
79
|
+
DatePickerPrevTrigger,
|
|
80
|
+
DatePickerRangeText,
|
|
81
|
+
DatePickerRoot,
|
|
82
|
+
DatePickerTable,
|
|
83
|
+
DatePickerTableBody,
|
|
84
|
+
DatePickerTableCell,
|
|
85
|
+
DatePickerTableCellTrigger,
|
|
86
|
+
DatePickerTableHead,
|
|
87
|
+
DatePickerTableHeader,
|
|
88
|
+
DatePickerTableRow,
|
|
89
|
+
DatePickerTrigger,
|
|
90
|
+
DatePickerValueText,
|
|
91
|
+
DatePickerView,
|
|
92
|
+
DatePickerViewControl,
|
|
93
|
+
DatePickerViewTrigger,
|
|
94
|
+
DatePickerYearSelect,
|
|
95
|
+
parseDate
|
|
96
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DatePickerClearTrigger, DatePickerClearTriggerProps, DatePickerContent, DatePickerContentProps, DatePickerContext, DatePickerControl, DatePickerControlProps, DatePickerValueChangeDetails, DateValue, DatePickerInput, DatePickerInputProps, DatePickerLabel, DatePickerLabelProps, DatePickerMonthSelect, DatePickerMonthSelectProps, DatePickerNextTrigger, DatePickerNextTriggerProps, DatePickerPositioner, DatePickerPositionerProps, DatePickerPresetTrigger, DatePickerPresetTriggerProps, DatePickerPrevTrigger, DatePickerPrevTriggerProps, DatePickerRangeText, DatePickerRangeTextProps, DatePickerRoot, DatePickerRootProps, DatePickerTable, DatePickerTableBody, DatePickerTableBodyProps, DatePickerTableCell, DatePickerTableCellProps, DatePickerTableCellTrigger, DatePickerTableCellTriggerProps, DatePickerTableHead, DatePickerTableHeadProps, DatePickerTableHeader, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRow, DatePickerTableRowProps, DatePickerTrigger, DatePickerTriggerProps, DatePickerValueText, DatePickerView, DatePickerViewControl, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTrigger, DatePickerViewTriggerProps, DatePickerYearSelect, DatePickerYearSelectProps, parseDate } from '@ark-ui/react/date-picker';
|
|
2
|
+
|
|
3
|
+
declare const datePicker_DatePickerValueChangeDetails: typeof DatePickerValueChangeDetails;
|
|
4
|
+
declare const datePicker_DateValue: typeof DateValue;
|
|
5
|
+
declare const datePicker_parseDate: typeof parseDate;
|
|
6
|
+
declare namespace datePicker {
|
|
7
|
+
export { DatePickerClearTrigger as ClearTrigger, DatePickerClearTriggerProps as ClearTriggerProps, DatePickerContent as Content, DatePickerContentProps as ContentProps, DatePickerContext as Context, DatePickerControl as Control, DatePickerControlProps as ControlProps, datePicker_DatePickerValueChangeDetails as DatePickerValueChangeDetails, datePicker_DateValue as DateValue, DatePickerInput as Input, DatePickerInputProps as InputProps, DatePickerLabel as Label, DatePickerLabelProps as LabelProps, DatePickerMonthSelect as MonthSelect, DatePickerMonthSelectProps as MonthSelectProps, DatePickerNextTrigger as NextTrigger, DatePickerNextTriggerProps as NextTriggerProps, DatePickerPositioner as Positioner, DatePickerPositionerProps as PositionerProps, DatePickerPresetTrigger as PresetTrigger, DatePickerPresetTriggerProps as PresetTriggerProps, DatePickerPrevTrigger as PrevTrigger, DatePickerPrevTriggerProps as PrevTriggerProps, DatePickerRangeText as RangeText, DatePickerRangeTextProps as RangeTextProps, DatePickerRoot as Root, DatePickerRootProps as RootProps, DatePickerTable as Table, DatePickerTableBody as TableBody, DatePickerTableBodyProps as TableBodyProps, DatePickerTableCell as TableCell, DatePickerTableCellProps as TableCellProps, DatePickerTableCellTrigger as TableCellTrigger, DatePickerTableCellTriggerProps as TableCellTriggerProps, DatePickerTableHead as TableHead, DatePickerTableHeadProps as TableHeadProps, DatePickerTableHeader as TableHeader, DatePickerTableHeaderProps as TableHeaderProps, DatePickerTableProps as TableProps, DatePickerTableRow as TableRow, DatePickerTableRowProps as TableRowProps, DatePickerTrigger as Trigger, DatePickerTriggerProps as TriggerProps, DatePickerValueChangeDetails as ValueChangeDetails, DatePickerValueText as ValueText, DatePickerView as View, DatePickerViewControl as ViewControl, DatePickerViewControlProps as ViewControlProps, DatePickerViewProps as ViewProps, DatePickerViewTrigger as ViewTrigger, DatePickerViewTriggerProps as ViewTriggerProps, DatePickerYearSelect as YearSelect, DatePickerYearSelectProps as YearSelectProps, datePicker_parseDate as parseDate };
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { datePicker as d };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { DatePickerClearTrigger, DatePickerClearTriggerProps, DatePickerContent, DatePickerContentProps, DatePickerContext, DatePickerControl, DatePickerControlProps, DatePickerValueChangeDetails, DateValue, DatePickerInput, DatePickerInputProps, DatePickerLabel, DatePickerLabelProps, DatePickerMonthSelect, DatePickerMonthSelectProps, DatePickerNextTrigger, DatePickerNextTriggerProps, DatePickerPositioner, DatePickerPositionerProps, DatePickerPresetTrigger, DatePickerPresetTriggerProps, DatePickerPrevTrigger, DatePickerPrevTriggerProps, DatePickerRangeText, DatePickerRangeTextProps, DatePickerRoot, DatePickerRootProps, DatePickerTable, DatePickerTableBody, DatePickerTableBodyProps, DatePickerTableCell, DatePickerTableCellProps, DatePickerTableCellTrigger, DatePickerTableCellTriggerProps, DatePickerTableHead, DatePickerTableHeadProps, DatePickerTableHeader, DatePickerTableHeaderProps, DatePickerTableProps, DatePickerTableRow, DatePickerTableRowProps, DatePickerTrigger, DatePickerTriggerProps, DatePickerValueText, DatePickerView, DatePickerViewControl, DatePickerViewControlProps, DatePickerViewProps, DatePickerViewTrigger, DatePickerViewTriggerProps, DatePickerYearSelect, DatePickerYearSelectProps, parseDate } from '@ark-ui/react/date-picker';
|
|
2
|
+
|
|
3
|
+
declare const datePicker_DatePickerValueChangeDetails: typeof DatePickerValueChangeDetails;
|
|
4
|
+
declare const datePicker_DateValue: typeof DateValue;
|
|
5
|
+
declare const datePicker_parseDate: typeof parseDate;
|
|
6
|
+
declare namespace datePicker {
|
|
7
|
+
export { DatePickerClearTrigger as ClearTrigger, DatePickerClearTriggerProps as ClearTriggerProps, DatePickerContent as Content, DatePickerContentProps as ContentProps, DatePickerContext as Context, DatePickerControl as Control, DatePickerControlProps as ControlProps, datePicker_DatePickerValueChangeDetails as DatePickerValueChangeDetails, datePicker_DateValue as DateValue, DatePickerInput as Input, DatePickerInputProps as InputProps, DatePickerLabel as Label, DatePickerLabelProps as LabelProps, DatePickerMonthSelect as MonthSelect, DatePickerMonthSelectProps as MonthSelectProps, DatePickerNextTrigger as NextTrigger, DatePickerNextTriggerProps as NextTriggerProps, DatePickerPositioner as Positioner, DatePickerPositionerProps as PositionerProps, DatePickerPresetTrigger as PresetTrigger, DatePickerPresetTriggerProps as PresetTriggerProps, DatePickerPrevTrigger as PrevTrigger, DatePickerPrevTriggerProps as PrevTriggerProps, DatePickerRangeText as RangeText, DatePickerRangeTextProps as RangeTextProps, DatePickerRoot as Root, DatePickerRootProps as RootProps, DatePickerTable as Table, DatePickerTableBody as TableBody, DatePickerTableBodyProps as TableBodyProps, DatePickerTableCell as TableCell, DatePickerTableCellProps as TableCellProps, DatePickerTableCellTrigger as TableCellTrigger, DatePickerTableCellTriggerProps as TableCellTriggerProps, DatePickerTableHead as TableHead, DatePickerTableHeadProps as TableHeadProps, DatePickerTableHeader as TableHeader, DatePickerTableHeaderProps as TableHeaderProps, DatePickerTableProps as TableProps, DatePickerTableRow as TableRow, DatePickerTableRowProps as TableRowProps, DatePickerTrigger as Trigger, DatePickerTriggerProps as TriggerProps, DatePickerValueChangeDetails as ValueChangeDetails, DatePickerValueText as ValueText, DatePickerView as View, DatePickerViewControl as ViewControl, DatePickerViewControlProps as ViewControlProps, DatePickerViewProps as ViewProps, DatePickerViewTrigger as ViewTrigger, DatePickerViewTriggerProps as ViewTriggerProps, DatePickerYearSelect as YearSelect, DatePickerYearSelectProps as YearSelectProps, datePicker_parseDate as parseDate };
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { datePicker as d };
|