@refraktor/dates 0.0.3 → 0.0.4

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.
Files changed (30) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/build/components/date-range-picker/date-range-picker.d.ts +4 -0
  3. package/build/components/date-range-picker/date-range-picker.d.ts.map +1 -0
  4. package/build/components/date-range-picker/date-range-picker.js +379 -0
  5. package/build/components/date-range-picker/date-range-picker.types.d.ts +100 -0
  6. package/build/components/date-range-picker/date-range-picker.types.d.ts.map +1 -0
  7. package/build/components/date-range-picker/date-range-picker.types.js +1 -0
  8. package/build/components/date-range-picker/index.d.ts +3 -0
  9. package/build/components/date-range-picker/index.d.ts.map +1 -0
  10. package/build/components/date-range-picker/index.js +1 -0
  11. package/build/components/time-input/index.d.ts +1 -1
  12. package/build/components/time-input/index.d.ts.map +1 -1
  13. package/build/components/time-input/time-input.d.ts.map +1 -1
  14. package/build/components/time-input/time-input.js +7 -196
  15. package/build/components/time-input/time-input.types.d.ts +5 -83
  16. package/build/components/time-input/time-input.types.d.ts.map +1 -1
  17. package/build/components/time-picker/index.d.ts +1 -1
  18. package/build/components/time-picker/index.d.ts.map +1 -1
  19. package/build/components/time-picker/time-picker.d.ts.map +1 -1
  20. package/build/components/time-picker/time-picker.js +498 -350
  21. package/build/components/time-picker/time-picker.types.d.ts +96 -61
  22. package/build/components/time-picker/time-picker.types.d.ts.map +1 -1
  23. package/build/style.css +1 -1
  24. package/package.json +3 -3
  25. package/src/components/time-input/index.ts +6 -23
  26. package/src/components/time-input/time-input.tsx +48 -453
  27. package/src/components/time-input/time-input.types.ts +30 -163
  28. package/src/components/time-picker/index.ts +10 -19
  29. package/src/components/time-picker/time-picker.tsx +1088 -737
  30. package/src/components/time-picker/time-picker.types.ts +166 -135
@@ -1,4 +1,4 @@
1
1
  $ tsc && tailwindcss -i src/style.css -o build/style.css --minify
2
2
  ≈ tailwindcss v4.1.18
3
3
 
4
- Done in 87ms
4
+ Done in 88ms
@@ -0,0 +1,4 @@
1
+ import { DateRangePickerFactoryPayload } from "./date-range-picker.types";
2
+ declare const DateRangePicker: import("@refraktor/core").RefraktorComponent<DateRangePickerFactoryPayload>;
3
+ export default DateRangePicker;
4
+ //# sourceMappingURL=date-range-picker.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGH,6BAA6B,EAIhC,MAAM,2BAA2B,CAAC;AAyLnC,QAAA,MAAM,eAAe,6EA6gBnB,CAAC;AAOH,eAAe,eAAe,CAAC"}
@@ -0,0 +1,379 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useId, useUncontrolled } from "@refraktor/utils";
3
+ import { useEffect, useMemo, useState } from "react";
4
+ import { createClassNamesConfig, createComponentConfig, factory, useTheme, useClassNames, useProps } from "@refraktor/core";
5
+ import { getGridColumns, getPickerSizeStyles, PickerHeader } from "../picker-shared";
6
+ import { useDates } from "../dates-provider";
7
+ import { MonthPicker } from "../month-picker";
8
+ const DAYS_IN_WEEK = 7;
9
+ const CONSISTENT_WEEK_COUNT = 6;
10
+ const DEFAULT_MONTH_PICKER_COLUMNS = 3;
11
+ const DEFAULT_YEAR_PICKER_YEARS_PER_PAGE = 9;
12
+ const DEFAULT_YEAR_PICKER_COLUMNS = 3;
13
+ const defaultProps = {
14
+ monthPickerColumns: DEFAULT_MONTH_PICKER_COLUMNS,
15
+ yearPickerYearsPerPage: DEFAULT_YEAR_PICKER_YEARS_PER_PAGE,
16
+ yearPickerColumns: DEFAULT_YEAR_PICKER_COLUMNS,
17
+ disabled: false,
18
+ size: "md",
19
+ radius: "default"
20
+ };
21
+ const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
22
+ const toSafeInteger = (value, fallback) => {
23
+ if (!Number.isFinite(value)) {
24
+ return fallback;
25
+ }
26
+ return Math.trunc(value);
27
+ };
28
+ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
29
+ const startOfDay = (value) => {
30
+ const next = new Date(value);
31
+ next.setHours(0, 0, 0, 0);
32
+ return next;
33
+ };
34
+ const startOfMonth = (value) => {
35
+ const next = startOfDay(value);
36
+ next.setDate(1);
37
+ return next;
38
+ };
39
+ const isSameDay = (first, second) => first.getFullYear() === second.getFullYear() &&
40
+ first.getMonth() === second.getMonth() &&
41
+ first.getDate() === second.getDate();
42
+ const isSameMonth = (first, second) => first.getFullYear() === second.getFullYear() &&
43
+ first.getMonth() === second.getMonth();
44
+ const addDays = (value, amount) => {
45
+ const next = startOfDay(value);
46
+ next.setDate(next.getDate() + amount);
47
+ return next;
48
+ };
49
+ const addMonthsPreservingDay = (value, amount) => {
50
+ const originalDay = value.getDate();
51
+ const next = startOfDay(value);
52
+ next.setDate(1);
53
+ next.setMonth(next.getMonth() + amount);
54
+ const lastDayInTargetMonth = new Date(next.getFullYear(), next.getMonth() + 1, 0).getDate();
55
+ next.setDate(Math.min(originalDay, lastDayInTargetMonth));
56
+ return next;
57
+ };
58
+ const getDateBounds = (minDate, maxDate) => {
59
+ const normalizedMin = isValidDate(minDate) ? startOfDay(minDate) : undefined;
60
+ const normalizedMax = isValidDate(maxDate) ? startOfDay(maxDate) : undefined;
61
+ if (normalizedMin && normalizedMax && normalizedMin > normalizedMax) {
62
+ return {
63
+ minDate: normalizedMax,
64
+ maxDate: normalizedMin,
65
+ minTimestamp: normalizedMax.getTime(),
66
+ maxTimestamp: normalizedMin.getTime(),
67
+ hasMin: true,
68
+ hasMax: true
69
+ };
70
+ }
71
+ return {
72
+ minDate: normalizedMin,
73
+ maxDate: normalizedMax,
74
+ minTimestamp: normalizedMin?.getTime() ?? Number.NEGATIVE_INFINITY,
75
+ maxTimestamp: normalizedMax?.getTime() ?? Number.POSITIVE_INFINITY,
76
+ hasMin: normalizedMin !== undefined,
77
+ hasMax: normalizedMax !== undefined
78
+ };
79
+ };
80
+ const clampDate = (value, bounds) => {
81
+ const normalizedValue = startOfDay(value);
82
+ const timestamp = normalizedValue.getTime();
83
+ if (timestamp < bounds.minTimestamp && bounds.minDate) {
84
+ return bounds.minDate;
85
+ }
86
+ if (timestamp > bounds.maxTimestamp && bounds.maxDate) {
87
+ return bounds.maxDate;
88
+ }
89
+ return normalizedValue;
90
+ };
91
+ const isDateDisabled = (value, disabled, bounds) => disabled ||
92
+ value.getTime() < bounds.minTimestamp ||
93
+ value.getTime() > bounds.maxTimestamp;
94
+ const toMonthIndex = (value) => value.getFullYear() * 12 + value.getMonth();
95
+ const resolveMonthStart = (value, bounds) => startOfMonth(clampDate(value, bounds));
96
+ const getVisibleDays = (displayedMonth, firstDayOfWeek, consistentWeeks) => {
97
+ const monthStart = startOfMonth(displayedMonth);
98
+ const leadingDays = (monthStart.getDay() - firstDayOfWeek + DAYS_IN_WEEK) % DAYS_IN_WEEK;
99
+ const daysInMonth = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0).getDate();
100
+ const visibleWithoutTrailing = leadingDays + daysInMonth;
101
+ const trailingDays = consistentWeeks
102
+ ? DAYS_IN_WEEK * CONSISTENT_WEEK_COUNT - visibleWithoutTrailing
103
+ : (DAYS_IN_WEEK - (visibleWithoutTrailing % DAYS_IN_WEEK)) % DAYS_IN_WEEK;
104
+ const totalDays = visibleWithoutTrailing + trailingDays;
105
+ const firstVisibleDate = addDays(monthStart, -leadingDays);
106
+ return Array.from({ length: totalDays }, (_, index) => addDays(firstVisibleDate, index));
107
+ };
108
+ const normalizeRangeValue = (value) => {
109
+ const startDate = isValidDate(value?.startDate)
110
+ ? startOfDay(value.startDate)
111
+ : undefined;
112
+ const endDate = isValidDate(value?.endDate)
113
+ ? startOfDay(value.endDate)
114
+ : undefined;
115
+ if (startDate && endDate && startDate.getTime() > endDate.getTime()) {
116
+ return {
117
+ startDate: endDate,
118
+ endDate: startDate
119
+ };
120
+ }
121
+ return {
122
+ startDate,
123
+ endDate
124
+ };
125
+ };
126
+ const DateRangePicker = factory((_props, ref) => {
127
+ const { cx, getRadius } = useTheme();
128
+ const { createDate, firstDayOfWeek, consistentWeeks, weekdays } = useDates();
129
+ const { id, value, defaultValue, onChange, minDate, maxDate, monthPickerColumns, yearPickerYearsPerPage, yearPickerColumns, disabled, size, radius, getWeekdayLabel, getDayLabel, getDayAriaLabel, getHeaderLabel, getNavigationAriaLabel, getMonthLabel, getMonthAriaLabel, getMonthHeaderLabel, getMonthNavigationAriaLabel, className, classNames, ...props } = useProps("DateRangePicker", defaultProps, _props);
130
+ const classes = useClassNames("DateRangePicker", classNames);
131
+ const _id = useId(id);
132
+ const today = useMemo(() => startOfDay(new Date()), []);
133
+ const bounds = useMemo(() => getDateBounds(minDate, maxDate), [minDate, maxDate]);
134
+ const safeMonthPickerColumns = clamp(toSafeInteger(monthPickerColumns, DEFAULT_MONTH_PICKER_COLUMNS), 1, 6);
135
+ const safeYearPickerYearsPerPage = Math.max(1, toSafeInteger(yearPickerYearsPerPage, DEFAULT_YEAR_PICKER_YEARS_PER_PAGE));
136
+ const safeYearPickerColumns = clamp(toSafeInteger(yearPickerColumns, DEFAULT_YEAR_PICKER_COLUMNS), 1, Math.min(6, safeYearPickerYearsPerPage));
137
+ const [selectedRangeState, setSelectedRange] = useUncontrolled({
138
+ value,
139
+ defaultValue,
140
+ finalValue: {
141
+ startDate: undefined,
142
+ endDate: undefined
143
+ },
144
+ onChange
145
+ });
146
+ const selectedRange = normalizeRangeValue(selectedRangeState);
147
+ const { startDate, endDate } = selectedRange;
148
+ const [displayedMonth, setDisplayedMonth] = useState(() => resolveMonthStart(endDate ?? startDate ?? today, bounds));
149
+ const [view, setView] = useState("day");
150
+ useEffect(() => {
151
+ setDisplayedMonth((previousMonth) => resolveMonthStart(previousMonth, bounds));
152
+ }, [bounds]);
153
+ const rangeAnchorTimestamp = endDate?.getTime() ?? startDate?.getTime();
154
+ useEffect(() => {
155
+ if (rangeAnchorTimestamp === undefined) {
156
+ return;
157
+ }
158
+ const anchorDate = endDate ?? startDate;
159
+ if (!anchorDate) {
160
+ return;
161
+ }
162
+ const normalizedMonth = resolveMonthStart(anchorDate, bounds);
163
+ setDisplayedMonth((previousMonth) => {
164
+ if (isSameMonth(previousMonth, normalizedMonth)) {
165
+ return previousMonth;
166
+ }
167
+ return normalizedMonth;
168
+ });
169
+ }, [bounds, endDate, rangeAnchorTimestamp, startDate]);
170
+ const visibleDays = useMemo(() => getVisibleDays(displayedMonth, firstDayOfWeek, consistentWeeks), [consistentWeeks, displayedMonth, firstDayOfWeek]);
171
+ const firstAvailableDay = useMemo(() => visibleDays.find((day) => !isDateDisabled(day, disabled ?? false, bounds)), [bounds, disabled, visibleDays]);
172
+ const preferredFocusDay = useMemo(() => {
173
+ const isVisibleAndFocusable = (value) => {
174
+ if (!value) {
175
+ return false;
176
+ }
177
+ return visibleDays.some((day) => isSameDay(day, value) &&
178
+ !isDateDisabled(day, disabled ?? false, bounds));
179
+ };
180
+ if (isVisibleAndFocusable(endDate)) {
181
+ return endDate;
182
+ }
183
+ if (isVisibleAndFocusable(startDate)) {
184
+ return startDate;
185
+ }
186
+ return firstAvailableDay;
187
+ }, [bounds, disabled, endDate, firstAvailableDay, startDate, visibleDays]);
188
+ const canGoPrevious = !disabled &&
189
+ (!bounds.hasMin ||
190
+ (bounds.minDate !== undefined &&
191
+ toMonthIndex(displayedMonth) > toMonthIndex(bounds.minDate)));
192
+ const canGoNext = !disabled &&
193
+ (!bounds.hasMax ||
194
+ (bounds.maxDate !== undefined &&
195
+ toMonthIndex(displayedMonth) < toMonthIndex(bounds.maxDate)));
196
+ const sizeStyles = getPickerSizeStyles(size);
197
+ const resolveNavigationLabel = (direction) => {
198
+ if (getNavigationAriaLabel) {
199
+ return getNavigationAriaLabel(direction, displayedMonth);
200
+ }
201
+ const nextVisibleMonth = addMonthsPreservingDay(displayedMonth, direction === "previous" ? -1 : 1);
202
+ return direction === "previous"
203
+ ? `Show previous month (${createDate(nextVisibleMonth).format("MMMM YYYY")})`
204
+ : `Show next month (${createDate(nextVisibleMonth).format("MMMM YYYY")})`;
205
+ };
206
+ const resolveDayAriaLabel = (day, state) => {
207
+ if (getDayAriaLabel) {
208
+ return getDayAriaLabel(day, state);
209
+ }
210
+ const dayLabel = createDate(day).format("dddd, MMMM D, YYYY");
211
+ if (state.rangeStart && state.rangeEnd) {
212
+ return `${dayLabel}, range start and end`;
213
+ }
214
+ if (state.rangeStart) {
215
+ return `${dayLabel}, range start`;
216
+ }
217
+ if (state.rangeEnd) {
218
+ return `${dayLabel}, range end`;
219
+ }
220
+ if (state.inRange) {
221
+ return `${dayLabel}, in selected range`;
222
+ }
223
+ const suffix = [
224
+ state.outside ? "outside current month" : undefined,
225
+ state.disabled ? "unavailable" : undefined
226
+ ]
227
+ .filter(Boolean)
228
+ .join(", ");
229
+ return suffix ? `Choose ${dayLabel}, ${suffix}` : `Choose ${dayLabel}`;
230
+ };
231
+ const setDay = (day) => {
232
+ const normalizedDay = startOfDay(day);
233
+ if (isDateDisabled(normalizedDay, disabled ?? false, bounds)) {
234
+ return;
235
+ }
236
+ if (startDate === undefined || (startDate !== undefined && endDate !== undefined)) {
237
+ setDisplayedMonth(startOfMonth(normalizedDay));
238
+ setSelectedRange({
239
+ startDate: normalizedDay,
240
+ endDate: undefined
241
+ });
242
+ return;
243
+ }
244
+ const startTimestamp = startDate.getTime();
245
+ const dayTimestamp = normalizedDay.getTime();
246
+ if (dayTimestamp < startTimestamp) {
247
+ setSelectedRange({
248
+ startDate: normalizedDay,
249
+ endDate: startDate
250
+ });
251
+ }
252
+ else {
253
+ setSelectedRange({
254
+ startDate,
255
+ endDate: normalizedDay
256
+ });
257
+ }
258
+ setDisplayedMonth(startOfMonth(normalizedDay));
259
+ };
260
+ const shiftDisplayedMonth = (direction) => {
261
+ setDisplayedMonth((previousMonth) => resolveMonthStart(addMonthsPreservingDay(previousMonth, direction), bounds));
262
+ };
263
+ const handlePrevious = () => {
264
+ if (!canGoPrevious) {
265
+ return;
266
+ }
267
+ shiftDisplayedMonth(-1);
268
+ };
269
+ const handleNext = () => {
270
+ if (!canGoNext) {
271
+ return;
272
+ }
273
+ shiftDisplayedMonth(1);
274
+ };
275
+ const handleGridKeyDown = (event) => {
276
+ if (disabled) {
277
+ return;
278
+ }
279
+ const keyboardBaseDay = preferredFocusDay ?? clampDate(displayedMonth, bounds);
280
+ const keyboardSteps = {
281
+ ArrowLeft: -1,
282
+ ArrowRight: 1,
283
+ ArrowUp: -DAYS_IN_WEEK,
284
+ ArrowDown: DAYS_IN_WEEK
285
+ };
286
+ const step = keyboardSteps[event.key];
287
+ if (step !== undefined) {
288
+ event.preventDefault();
289
+ setDay(addDays(keyboardBaseDay, step));
290
+ return;
291
+ }
292
+ if (event.key === "Home") {
293
+ event.preventDefault();
294
+ setDay(startOfMonth(displayedMonth));
295
+ return;
296
+ }
297
+ if (event.key === "End") {
298
+ event.preventDefault();
299
+ setDay(new Date(displayedMonth.getFullYear(), displayedMonth.getMonth() + 1, 0));
300
+ return;
301
+ }
302
+ if (event.key === "PageUp") {
303
+ event.preventDefault();
304
+ setDay(addMonthsPreservingDay(keyboardBaseDay, -1));
305
+ return;
306
+ }
307
+ if (event.key === "PageDown") {
308
+ event.preventDefault();
309
+ setDay(addMonthsPreservingDay(keyboardBaseDay, 1));
310
+ }
311
+ };
312
+ const handleHeaderLabelClick = () => {
313
+ if (disabled) {
314
+ return;
315
+ }
316
+ setView("month");
317
+ };
318
+ const handleMonthChange = (nextMonth) => {
319
+ if (disabled) {
320
+ return;
321
+ }
322
+ setDisplayedMonth(resolveMonthStart(nextMonth, bounds));
323
+ setView("day");
324
+ };
325
+ const monthViewMinYear = bounds.minDate?.getFullYear();
326
+ const monthViewMaxYear = bounds.maxDate?.getFullYear();
327
+ return (_jsx("div", { ref: ref, id: _id, className: cx("inline-flex w-full flex-col gap-2 bg-[var(--refraktor-bg)] p-2", getRadius(radius), classes.root, className), ...props, children: view === "month" ? (_jsx(MonthPicker, { value: displayedMonth, onChange: handleMonthChange, minYear: monthViewMinYear, maxYear: monthViewMaxYear, columns: safeMonthPickerColumns, yearPickerYearsPerPage: safeYearPickerYearsPerPage, yearPickerColumns: safeYearPickerColumns, disabled: disabled, size: size, radius: radius, getMonthLabel: getMonthLabel, getMonthAriaLabel: getMonthAriaLabel, getHeaderLabel: getMonthHeaderLabel, getNavigationAriaLabel: getMonthNavigationAriaLabel, className: cx("bg-transparent p-0", classes.monthPicker) })) : (_jsxs(_Fragment, { children: [_jsx(PickerHeader, { label: getHeaderLabel
328
+ ? getHeaderLabel(displayedMonth.getMonth(), displayedMonth.getFullYear(), displayedMonth)
329
+ : createDate(displayedMonth).format("MMMM YYYY"), onPrevious: handlePrevious, onNext: handleNext, onLabelClick: disabled ? undefined : handleHeaderLabelClick, previousDisabled: !canGoPrevious, nextDisabled: !canGoNext, previousLabel: resolveNavigationLabel("previous"), nextLabel: resolveNavigationLabel("next"), size: size, radius: radius, classNames: {
330
+ root: classes.header,
331
+ controls: classes.headerControls,
332
+ control: classes.headerControl,
333
+ previousControl: classes.headerPreviousControl,
334
+ nextControl: classes.headerNextControl,
335
+ label: classes.headerLabel
336
+ } }), _jsx("div", { role: "row", className: cx("grid grid-cols-7 text-center text-[var(--refraktor-text-secondary)]", sizeStyles.label, sizeStyles.gridGap, classes.weekdays), children: weekdays.map((weekday, index) => {
337
+ const dayOfWeek = (firstDayOfWeek + index) % DAYS_IN_WEEK;
338
+ return (_jsx("span", { className: cx("truncate", classes.weekday), children: getWeekdayLabel
339
+ ? getWeekdayLabel(dayOfWeek, weekday)
340
+ : weekday }, `${weekday}-${index}`));
341
+ }) }), _jsx("div", { role: "grid", "aria-label": `Date range picker, ${createDate(displayedMonth).format("MMMM YYYY")}`, className: cx("grid", getGridColumns(DAYS_IN_WEEK), sizeStyles.gridGap, classes.grid), onKeyDown: handleGridKeyDown, children: visibleDays.map((day) => {
342
+ const isOutside = !isSameMonth(day, displayedMonth);
343
+ const isToday = isSameDay(day, today);
344
+ const isDayDisabled = isDateDisabled(day, disabled ?? false, bounds);
345
+ const isRangeStart = startDate !== undefined && isSameDay(day, startDate);
346
+ const isRangeEnd = endDate !== undefined && isSameDay(day, endDate);
347
+ const isInRange = startDate !== undefined &&
348
+ endDate !== undefined &&
349
+ day.getTime() > startDate.getTime() &&
350
+ day.getTime() < endDate.getTime();
351
+ const isSelected = isRangeStart || isRangeEnd;
352
+ const dayState = {
353
+ selected: isSelected,
354
+ rangeStart: isRangeStart,
355
+ rangeEnd: isRangeEnd,
356
+ inRange: isInRange,
357
+ outside: isOutside,
358
+ disabled: isDayDisabled
359
+ };
360
+ const tabIndex = preferredFocusDay !== undefined &&
361
+ isSameDay(day, preferredFocusDay)
362
+ ? 0
363
+ : -1;
364
+ return (_jsx("button", { type: "button", role: "gridcell", "aria-selected": isSelected || isInRange, "aria-current": isToday ? "date" : undefined, "aria-label": resolveDayAriaLabel(day, dayState), tabIndex: tabIndex, "data-active": isSelected, "data-outside": isOutside, "data-today": isToday, "data-disabled": isDayDisabled, "data-range-start": isRangeStart, "data-range-end": isRangeEnd, "data-in-range": isInRange, disabled: isDayDisabled, className: cx("inline-flex items-center justify-center font-medium text-[var(--refraktor-text)] transition-colors", "hover:bg-[var(--refraktor-bg-hover)]", isOutside &&
365
+ "text-[var(--refraktor-text-secondary)]", isInRange &&
366
+ "bg-[var(--refraktor-bg-subtle)] hover:bg-[var(--refraktor-bg-subtle)]", isSelected &&
367
+ "bg-[var(--refraktor-primary)] text-[var(--refraktor-primary-text)] hover:bg-[var(--refraktor-primary)]", isToday &&
368
+ !isSelected &&
369
+ "ring-1 ring-[var(--refraktor-primary)]", isDayDisabled &&
370
+ "pointer-events-none cursor-not-allowed opacity-50", sizeStyles.cell, getRadius(radius), classes.day, isOutside && classes.dayOutside, isToday && classes.dayToday, isSelected && classes.daySelected, isRangeStart && classes.dayRangeStart, isRangeEnd && classes.dayRangeEnd, isInRange && classes.dayInRange, isDayDisabled && classes.dayDisabled), onClick: () => setDay(day), children: getDayLabel
371
+ ? getDayLabel(day, dayState)
372
+ : day.getDate() }, day.toISOString()));
373
+ }) })] })) }));
374
+ });
375
+ DateRangePicker.displayName = "@refraktor/dates/DateRangePicker";
376
+ DateRangePicker.configure = createComponentConfig();
377
+ DateRangePicker.classNames =
378
+ createClassNamesConfig();
379
+ export default DateRangePicker;
@@ -0,0 +1,100 @@
1
+ import { ComponentPropsWithoutRef, ReactNode } from "react";
2
+ import { RefraktorRadius, RefraktorSize, createClassNamesConfig, createComponentConfig, FactoryPayload } from "@refraktor/core";
3
+ import type { MonthPickerGetHeaderLabel, MonthPickerGetMonthAriaLabel, MonthPickerGetMonthLabel, MonthPickerGetNavigationAriaLabel } from "../month-picker";
4
+ export type DateRangePickerValue = {
5
+ startDate?: Date;
6
+ endDate?: Date;
7
+ };
8
+ export type DateRangePickerSize = RefraktorSize;
9
+ export type DateRangePickerRadius = RefraktorRadius;
10
+ export type DateRangePickerNavigationDirection = "previous" | "next";
11
+ export type DateRangePickerDayState = {
12
+ selected: boolean;
13
+ rangeStart: boolean;
14
+ rangeEnd: boolean;
15
+ inRange: boolean;
16
+ outside: boolean;
17
+ disabled: boolean;
18
+ };
19
+ export type DateRangePickerOnChange = (value: DateRangePickerValue) => void;
20
+ export type DateRangePickerGetDayLabel = (value: Date, state: DateRangePickerDayState) => ReactNode;
21
+ export type DateRangePickerGetDayAriaLabel = (value: Date, state: DateRangePickerDayState) => string;
22
+ export type DateRangePickerGetWeekdayLabel = (dayOfWeek: number, label: string) => ReactNode;
23
+ export type DateRangePickerGetHeaderLabel = (month: number, year: number, value: Date) => ReactNode;
24
+ export type DateRangePickerGetNavigationAriaLabel = (direction: DateRangePickerNavigationDirection, value: Date) => string;
25
+ export type DateRangePickerClassNames = {
26
+ root?: string;
27
+ header?: string;
28
+ headerControls?: string;
29
+ headerControl?: string;
30
+ headerPreviousControl?: string;
31
+ headerNextControl?: string;
32
+ headerLabel?: string;
33
+ weekdays?: string;
34
+ weekday?: string;
35
+ grid?: string;
36
+ day?: string;
37
+ dayOutside?: string;
38
+ dayToday?: string;
39
+ daySelected?: string;
40
+ dayRangeStart?: string;
41
+ dayRangeEnd?: string;
42
+ dayInRange?: string;
43
+ dayDisabled?: string;
44
+ monthPicker?: string;
45
+ };
46
+ export interface DateRangePickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> {
47
+ /** Active range (controlled). */
48
+ value?: DateRangePickerValue;
49
+ /** Initial active range (uncontrolled). */
50
+ defaultValue?: DateRangePickerValue;
51
+ /** Callback called when active range changes. */
52
+ onChange?: DateRangePickerOnChange;
53
+ /** Minimum selectable date. */
54
+ minDate?: Date;
55
+ /** Maximum selectable date. */
56
+ maxDate?: Date;
57
+ /** Month picker columns @default `3` */
58
+ monthPickerColumns?: number;
59
+ /** Year picker years rendered in one page @default `9` */
60
+ yearPickerYearsPerPage?: number;
61
+ /** Year picker columns @default `3` */
62
+ yearPickerColumns?: number;
63
+ /** Whether all controls are disabled @default `false` */
64
+ disabled?: boolean;
65
+ /** Component size @default `md` */
66
+ size?: DateRangePickerSize;
67
+ /** Border radius @default `default` */
68
+ radius?: DateRangePickerRadius;
69
+ /** Custom weekday label renderer. */
70
+ getWeekdayLabel?: DateRangePickerGetWeekdayLabel;
71
+ /** Custom day label renderer. */
72
+ getDayLabel?: DateRangePickerGetDayLabel;
73
+ /** Custom aria-label generator for day buttons. */
74
+ getDayAriaLabel?: DateRangePickerGetDayAriaLabel;
75
+ /** Custom header label renderer for visible month. */
76
+ getHeaderLabel?: DateRangePickerGetHeaderLabel;
77
+ /** Custom aria-label generator for previous/next controls. */
78
+ getNavigationAriaLabel?: DateRangePickerGetNavigationAriaLabel;
79
+ /** Custom month label renderer in month view. */
80
+ getMonthLabel?: MonthPickerGetMonthLabel;
81
+ /** Custom aria-label generator for month buttons in month view. */
82
+ getMonthAriaLabel?: MonthPickerGetMonthAriaLabel;
83
+ /** Custom header label renderer in month view. */
84
+ getMonthHeaderLabel?: MonthPickerGetHeaderLabel;
85
+ /** Custom aria-label generator for month view navigation controls. */
86
+ getMonthNavigationAriaLabel?: MonthPickerGetNavigationAriaLabel;
87
+ /** Used for editing root class name. */
88
+ className?: string;
89
+ /** Used for styling different parts of the component. */
90
+ classNames?: DateRangePickerClassNames;
91
+ }
92
+ export interface DateRangePickerFactoryPayload extends FactoryPayload {
93
+ props: DateRangePickerProps;
94
+ ref: HTMLDivElement;
95
+ compound: {
96
+ configure: ReturnType<typeof createComponentConfig<DateRangePickerProps>>;
97
+ classNames: ReturnType<typeof createClassNamesConfig<DateRangePickerClassNames>>;
98
+ };
99
+ }
100
+ //# sourceMappingURL=date-range-picker.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-range-picker.types.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/date-range-picker.types.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export { default as DateRangePicker } from "./date-range-picker";
2
+ export type { DateRangePickerClassNames, DateRangePickerDayState, DateRangePickerGetDayAriaLabel, DateRangePickerGetDayLabel, DateRangePickerGetHeaderLabel, DateRangePickerGetNavigationAriaLabel, DateRangePickerGetWeekdayLabel, DateRangePickerNavigationDirection, DateRangePickerOnChange, DateRangePickerProps, DateRangePickerRadius, DateRangePickerSize, DateRangePickerValue } from "./date-range-picker.types";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/date-range-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,YAAY,EACR,yBAAyB,EACzB,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,6BAA6B,EAC7B,qCAAqC,EACrC,8BAA8B,EAC9B,kCAAkC,EAClC,uBAAuB,EACvB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACvB,MAAM,2BAA2B,CAAC"}
@@ -0,0 +1 @@
1
+ export { default as DateRangePicker } from "./date-range-picker";
@@ -1,3 +1,3 @@
1
1
  export { default as TimeInput } from "./time-input";
2
- export type { TimeInputClassNames, TimeInputFactoryPayload, TimeInputGetHourAriaLabel, TimeInputGetHourLabel, TimeInputGetMinuteAriaLabel, TimeInputGetMinuteLabel, TimeInputGetPeriodAriaLabel, TimeInputGetPeriodLabel, TimeInputGetSecondAriaLabel, TimeInputGetSecondLabel, TimeInputMiddlewares, TimeInputMode, TimeInputOnChange, TimeInputPeriod, TimeInputPositioning, TimeInputProps, TimeInputRadius, TimeInputSize, TimeInputValue, TimeInputValueFormat } from "./time-input.types";
2
+ export type { TimeInputClassNames, TimeInputFactoryPayload, TimeInputProps } from "./time-input.types";
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,2BAA2B,EAC3B,uBAAuB,EACvB,2BAA2B,EAC3B,uBAAuB,EACvB,oBAAoB,EACpB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACpB,cAAc,EACd,eAAe,EACf,aAAa,EACb,cAAc,EACd,oBAAoB,EACvB,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACjB,MAAM,oBAAoB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/time-input.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,uBAAuB,EAI1B,MAAM,oBAAoB,CAAC;AA2G5B,QAAA,MAAM,SAAS,uEAgTb,CAAC;AAMH,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/components/time-input/time-input.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,uBAAuB,EAE1B,MAAM,oBAAoB,CAAC;AAS5B,QAAA,MAAM,SAAS,uEAmBb,CAAC;AAMH,eAAe,SAAS,CAAC"}