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