snack-datepicker 0.0.1 → 0.0.3
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/README.md +9 -7
- package/dist/index.d.cts +23 -1
- package/dist/index.d.ts +23 -1
- package/dist/index.js +192 -25
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +173 -26
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +37 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,11 +57,13 @@ npm install react react-dom
|
|
|
57
57
|
### Basic
|
|
58
58
|
|
|
59
59
|
```tsx
|
|
60
|
-
import {
|
|
60
|
+
import { DatePickerInput } from "snack-datepicker";
|
|
61
61
|
import "snack-datepicker/dist/style.css";
|
|
62
62
|
|
|
63
63
|
function App() {
|
|
64
|
-
return
|
|
64
|
+
return (
|
|
65
|
+
<DatePickerInput mode="single" onChange={(date) => console.log(date)} />
|
|
66
|
+
);
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
export default App;
|
|
@@ -70,7 +72,7 @@ export default App;
|
|
|
70
72
|
### Date Range Example
|
|
71
73
|
|
|
72
74
|
```tsx
|
|
73
|
-
import {
|
|
75
|
+
import { DatePickerInput } from "snack-datepicker";
|
|
74
76
|
import { useState } from "react";
|
|
75
77
|
|
|
76
78
|
function App() {
|
|
@@ -80,7 +82,7 @@ function App() {
|
|
|
80
82
|
});
|
|
81
83
|
|
|
82
84
|
return (
|
|
83
|
-
<
|
|
85
|
+
<DatePickerInput
|
|
84
86
|
mode="range"
|
|
85
87
|
value={range}
|
|
86
88
|
onChange={(value) => setRange(value)}
|
|
@@ -93,7 +95,7 @@ function App() {
|
|
|
93
95
|
### Preset Range Example
|
|
94
96
|
|
|
95
97
|
```tsx
|
|
96
|
-
import {
|
|
98
|
+
import { DatePickerInput } from "snack-datepicker";
|
|
97
99
|
|
|
98
100
|
const presets = [
|
|
99
101
|
{
|
|
@@ -117,7 +119,7 @@ const presets = [
|
|
|
117
119
|
];
|
|
118
120
|
|
|
119
121
|
function App() {
|
|
120
|
-
return <
|
|
122
|
+
return <DatePickerInput mode="range" presets={presets} />;
|
|
121
123
|
}
|
|
122
124
|
```
|
|
123
125
|
|
|
@@ -155,7 +157,7 @@ export interface PresetRange {
|
|
|
155
157
|
getValue: () => DateRange;
|
|
156
158
|
}
|
|
157
159
|
|
|
158
|
-
export interface
|
|
160
|
+
export interface DatePickerInputProps {
|
|
159
161
|
mode?: DatePickerMode;
|
|
160
162
|
value?: Date | DateRange;
|
|
161
163
|
onChange?: (value: Date | DateRange) => void;
|
package/dist/index.d.cts
CHANGED
|
@@ -28,4 +28,26 @@ interface DatePickerProps {
|
|
|
28
28
|
|
|
29
29
|
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
interface DatePickerInputProps extends Omit<DatePickerProps, "showFooter" | "className"> {
|
|
32
|
+
/** Placeholder text when no date is selected */
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
/** Date display format string (date-fns format) */
|
|
35
|
+
displayFormat?: string;
|
|
36
|
+
/** Width class for the input trigger */
|
|
37
|
+
triggerClassName?: string;
|
|
38
|
+
/** Class for the popover content */
|
|
39
|
+
popoverClassName?: string;
|
|
40
|
+
/** Class for the calendar inside the popover */
|
|
41
|
+
calendarClassName?: string;
|
|
42
|
+
/** Whether the input is disabled */
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
/** Whether to show a clear button */
|
|
45
|
+
clearable?: boolean;
|
|
46
|
+
/** Popover alignment */
|
|
47
|
+
align?: "start" | "center" | "end";
|
|
48
|
+
/** Label text above the input */
|
|
49
|
+
label?: string;
|
|
50
|
+
}
|
|
51
|
+
declare const DatePickerInput: React.FC<DatePickerInputProps>;
|
|
52
|
+
|
|
53
|
+
export { DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerMode, type DatePickerProps, type DateRange, type PresetRange, DatePicker as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -28,4 +28,26 @@ interface DatePickerProps {
|
|
|
28
28
|
|
|
29
29
|
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
interface DatePickerInputProps extends Omit<DatePickerProps, "showFooter" | "className"> {
|
|
32
|
+
/** Placeholder text when no date is selected */
|
|
33
|
+
placeholder?: string;
|
|
34
|
+
/** Date display format string (date-fns format) */
|
|
35
|
+
displayFormat?: string;
|
|
36
|
+
/** Width class for the input trigger */
|
|
37
|
+
triggerClassName?: string;
|
|
38
|
+
/** Class for the popover content */
|
|
39
|
+
popoverClassName?: string;
|
|
40
|
+
/** Class for the calendar inside the popover */
|
|
41
|
+
calendarClassName?: string;
|
|
42
|
+
/** Whether the input is disabled */
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
/** Whether to show a clear button */
|
|
45
|
+
clearable?: boolean;
|
|
46
|
+
/** Popover alignment */
|
|
47
|
+
align?: "start" | "center" | "end";
|
|
48
|
+
/** Label text above the input */
|
|
49
|
+
label?: string;
|
|
50
|
+
}
|
|
51
|
+
declare const DatePickerInput: React.FC<DatePickerInputProps>;
|
|
52
|
+
|
|
53
|
+
export { DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerMode, type DatePickerProps, type DateRange, type PresetRange, DatePicker as default };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var dateFns = require('date-fns');
|
|
5
7
|
var lucideReact = require('lucide-react');
|
|
@@ -7,10 +9,28 @@ var framerMotion = require('framer-motion');
|
|
|
7
9
|
var clsx = require('clsx');
|
|
8
10
|
var tailwindMerge = require('tailwind-merge');
|
|
9
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
|
+
var PopoverPrimitive = require('@radix-ui/react-popover');
|
|
10
13
|
|
|
11
|
-
function
|
|
14
|
+
function _interopNamespace(e) {
|
|
15
|
+
if (e && e.__esModule) return e;
|
|
16
|
+
var n = Object.create(null);
|
|
17
|
+
if (e) {
|
|
18
|
+
Object.keys(e).forEach(function (k) {
|
|
19
|
+
if (k !== 'default') {
|
|
20
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
21
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () { return e[k]; }
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
n.default = e;
|
|
29
|
+
return Object.freeze(n);
|
|
30
|
+
}
|
|
12
31
|
|
|
13
|
-
var
|
|
32
|
+
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
|
+
var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
|
|
14
34
|
|
|
15
35
|
// src/components/date-picker/DatePicker.tsx
|
|
16
36
|
function cn(...inputs) {
|
|
@@ -50,11 +70,11 @@ var MonthGrid = ({
|
|
|
50
70
|
return disabledDates.some((d) => dateFns.isSameDay(d, date));
|
|
51
71
|
};
|
|
52
72
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-[252px]", children: [
|
|
53
|
-
showLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-
|
|
73
|
+
showLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: dateFns.format(month, "MMMM yyyy") }) }),
|
|
54
74
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1.5", children: weekDays.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
55
75
|
"span",
|
|
56
76
|
{
|
|
57
|
-
className: "text-[11px] font-semibold text-
|
|
77
|
+
className: "text-[11px] font-semibold text-gray-400 text-center uppercase tracking-wider py-1",
|
|
58
78
|
children: d
|
|
59
79
|
},
|
|
60
80
|
d
|
|
@@ -94,12 +114,12 @@ var MonthGrid = ({
|
|
|
94
114
|
"aria-selected": !!isSelected,
|
|
95
115
|
className: cn(
|
|
96
116
|
"relative h-9 w-9 text-sm flex items-center justify-center transition-all tabular-nums",
|
|
97
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
117
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
|
|
98
118
|
"active:scale-[0.96]",
|
|
99
119
|
// Default
|
|
100
|
-
!isSelected && !inRange && "text-
|
|
120
|
+
!isSelected && !inRange && "text-gray-900 hover:bg-gray-100 rounded-lg",
|
|
101
121
|
// Selected (start/end/single)
|
|
102
|
-
isSelected && "bg-
|
|
122
|
+
isSelected && "bg-primary text-primary-foreground z-10 shadow-sm font-semibold",
|
|
103
123
|
// Single mode selected
|
|
104
124
|
mode === "single" && isSelected && "rounded-lg",
|
|
105
125
|
// Range endpoints
|
|
@@ -107,9 +127,9 @@ var MonthGrid = ({
|
|
|
107
127
|
isEnd && !isStart && "rounded-r-lg rounded-l-none",
|
|
108
128
|
isStart && isEnd && "rounded-lg",
|
|
109
129
|
// In range but not selected
|
|
110
|
-
inRange && !isSelected && "bg-
|
|
130
|
+
inRange && !isSelected && "bg-primary/10 text-primary rounded-none",
|
|
111
131
|
// Disabled
|
|
112
|
-
disabled && "text-
|
|
132
|
+
disabled && "text-primary/40 cursor-not-allowed hover:bg-transparent"
|
|
113
133
|
),
|
|
114
134
|
children: renderDay ? renderDay(day) : dateFns.format(day, "d")
|
|
115
135
|
},
|
|
@@ -119,7 +139,7 @@ var MonthGrid = ({
|
|
|
119
139
|
] })
|
|
120
140
|
] });
|
|
121
141
|
};
|
|
122
|
-
var MonthGrid_default =
|
|
142
|
+
var MonthGrid_default = React__namespace.default.memo(MonthGrid);
|
|
123
143
|
var MonthSelector = ({
|
|
124
144
|
currentMonth,
|
|
125
145
|
onSelect
|
|
@@ -140,7 +160,7 @@ var MonthSelector = ({
|
|
|
140
160
|
onClick: () => onSelect(i),
|
|
141
161
|
className: cn(
|
|
142
162
|
"py-3 text-sm font-medium rounded-lg transition-all active:scale-[0.97]",
|
|
143
|
-
current === i ? "bg-
|
|
163
|
+
current === i ? "bg-primary text-primary-foreground shadow-sm" : "hover:bg-gray-100 text-gray-900"
|
|
144
164
|
),
|
|
145
165
|
children: dateFns.format(new Date(2024, i, 1), "MMM")
|
|
146
166
|
},
|
|
@@ -176,7 +196,7 @@ var YearSelector = ({
|
|
|
176
196
|
onClick: () => !disabled && onSelect(y),
|
|
177
197
|
className: cn(
|
|
178
198
|
"py-3 text-sm font-medium rounded-lg transition-all active:scale-[0.97]",
|
|
179
|
-
currentYear === y ? "bg-
|
|
199
|
+
currentYear === y ? "bg-primary text-primary-foreground shadow-sm" : "hover:bg-gray-100 text-gray-900",
|
|
180
200
|
disabled && "opacity-30 cursor-not-allowed"
|
|
181
201
|
),
|
|
182
202
|
children: y
|
|
@@ -189,7 +209,7 @@ var YearSelector = ({
|
|
|
189
209
|
);
|
|
190
210
|
};
|
|
191
211
|
var YearSelector_default = YearSelector;
|
|
192
|
-
var DatePicker =
|
|
212
|
+
var DatePicker = React__namespace.default.forwardRef(
|
|
193
213
|
({
|
|
194
214
|
mode = "single",
|
|
195
215
|
value,
|
|
@@ -254,21 +274,21 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
254
274
|
{
|
|
255
275
|
ref,
|
|
256
276
|
className: cn(
|
|
257
|
-
"inline-flex flex-col rounded-xl border border-
|
|
258
|
-
"shadow-
|
|
277
|
+
"inline-flex flex-col rounded-xl border border-gray-200 bg-white select-none antialiased",
|
|
278
|
+
"shadow-md",
|
|
259
279
|
className
|
|
260
280
|
),
|
|
261
281
|
onKeyDown: handleKeyDown,
|
|
262
282
|
role: "application",
|
|
263
283
|
"aria-label": "Date picker",
|
|
264
284
|
children: [
|
|
265
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-
|
|
285
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200", children: [
|
|
266
286
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
267
287
|
"button",
|
|
268
288
|
{
|
|
269
289
|
type: "button",
|
|
270
290
|
onClick: () => setViewDate(dateFns.subMonths(viewDate, 1)),
|
|
271
|
-
className: "p-1.5 rounded-md hover:bg-
|
|
291
|
+
className: "p-1.5 rounded-md hover:bg-gray-100 text-gray-400 hover:text-gray-900 transition-colors",
|
|
272
292
|
"aria-label": "Previous month",
|
|
273
293
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 })
|
|
274
294
|
}
|
|
@@ -281,7 +301,7 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
281
301
|
onClick: () => setViewMode(viewMode === "month" ? "calendar" : "month"),
|
|
282
302
|
className: cn(
|
|
283
303
|
"text-sm font-semibold px-2 py-1 rounded-md transition-colors",
|
|
284
|
-
viewMode === "month" ? "bg-
|
|
304
|
+
viewMode === "month" ? "bg-gray-100 text-gray-900" : "hover:bg-gray-100 text-gray-900"
|
|
285
305
|
),
|
|
286
306
|
children: dateFns.format(viewDate, "MMMM")
|
|
287
307
|
}
|
|
@@ -293,7 +313,7 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
293
313
|
onClick: () => setViewMode(viewMode === "year" ? "calendar" : "year"),
|
|
294
314
|
className: cn(
|
|
295
315
|
"text-sm font-semibold px-2 py-1 rounded-md transition-colors",
|
|
296
|
-
viewMode === "year" ? "bg-
|
|
316
|
+
viewMode === "year" ? "bg-gray-100 text-gray-900" : "hover:bg-gray-100 text-gray-900"
|
|
297
317
|
),
|
|
298
318
|
children: dateFns.format(viewDate, "yyyy")
|
|
299
319
|
}
|
|
@@ -304,19 +324,19 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
304
324
|
{
|
|
305
325
|
type: "button",
|
|
306
326
|
onClick: () => setViewDate(dateFns.addMonths(viewDate, 1)),
|
|
307
|
-
className: "p-1.5 rounded-md hover:bg-
|
|
327
|
+
className: "p-1.5 rounded-md hover:bg-gray-100 text-gray-400 hover:text-gray-900 transition-colors",
|
|
308
328
|
"aria-label": "Next month",
|
|
309
329
|
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 })
|
|
310
330
|
}
|
|
311
331
|
)
|
|
312
332
|
] }),
|
|
313
333
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
|
|
314
|
-
presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r border-
|
|
334
|
+
presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-r border-gray-200 p-3 min-w-[140px] flex flex-col gap-0.5", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
315
335
|
"button",
|
|
316
336
|
{
|
|
317
337
|
type: "button",
|
|
318
338
|
onClick: () => handlePresetClick(preset),
|
|
319
|
-
className: "text-left text-xs font-medium px-2.5 py-1.5 rounded-md text-
|
|
339
|
+
className: "text-left text-xs font-medium px-2.5 py-1.5 rounded-md text-gray-400 hover:text-gray-900 hover:bg-gray-100 transition-colors",
|
|
320
340
|
children: preset.label
|
|
321
341
|
},
|
|
322
342
|
preset.label
|
|
@@ -376,13 +396,13 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
376
396
|
)
|
|
377
397
|
] }) })
|
|
378
398
|
] }),
|
|
379
|
-
showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-
|
|
399
|
+
showFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200 rounded-b-xl", children: [
|
|
380
400
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
381
401
|
"button",
|
|
382
402
|
{
|
|
383
403
|
type: "button",
|
|
384
404
|
onClick: onReset,
|
|
385
|
-
className: "flex items-center gap-1.5 text-xs font-medium text-
|
|
405
|
+
className: "flex items-center gap-1.5 text-xs font-medium text-gray-400 hover:text-gray-900 transition-colors",
|
|
386
406
|
children: [
|
|
387
407
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 13 }),
|
|
388
408
|
"Reset"
|
|
@@ -394,7 +414,7 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
394
414
|
{
|
|
395
415
|
type: "button",
|
|
396
416
|
onClick: () => onApply == null ? void 0 : onApply(value),
|
|
397
|
-
className: "px-5 py-1.5 bg-primary text-primary-foreground text-xs font-semibold rounded
|
|
417
|
+
className: "px-5 py-1.5 bg-primary text-primary-foreground text-xs font-semibold rounded hover:opacity-90 shadow-sm transition-all active:scale-[0.98]",
|
|
398
418
|
children: "Apply"
|
|
399
419
|
}
|
|
400
420
|
)
|
|
@@ -405,7 +425,154 @@ var DatePicker = React__default.default.forwardRef(
|
|
|
405
425
|
}
|
|
406
426
|
);
|
|
407
427
|
DatePicker.displayName = "DatePicker";
|
|
428
|
+
var DatePicker_default = DatePicker;
|
|
429
|
+
var Popover = PopoverPrimitive__namespace.Root;
|
|
430
|
+
var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
|
|
431
|
+
var PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
432
|
+
PopoverPrimitive__namespace.Content,
|
|
433
|
+
{
|
|
434
|
+
ref,
|
|
435
|
+
align,
|
|
436
|
+
sideOffset,
|
|
437
|
+
className: cn(
|
|
438
|
+
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
439
|
+
className
|
|
440
|
+
),
|
|
441
|
+
...props
|
|
442
|
+
}
|
|
443
|
+
) }));
|
|
444
|
+
PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
|
|
445
|
+
var DatePickerInput = ({
|
|
446
|
+
mode = "single",
|
|
447
|
+
value,
|
|
448
|
+
onChange,
|
|
449
|
+
onApply,
|
|
450
|
+
onReset,
|
|
451
|
+
placeholder,
|
|
452
|
+
displayFormat = "MMM d, yyyy",
|
|
453
|
+
triggerClassName,
|
|
454
|
+
popoverClassName,
|
|
455
|
+
calendarClassName,
|
|
456
|
+
disabled = false,
|
|
457
|
+
clearable = true,
|
|
458
|
+
align = "start",
|
|
459
|
+
label,
|
|
460
|
+
numberOfMonths,
|
|
461
|
+
presets,
|
|
462
|
+
minDate,
|
|
463
|
+
maxDate,
|
|
464
|
+
disabledDates,
|
|
465
|
+
weekStart,
|
|
466
|
+
renderDay
|
|
467
|
+
}) => {
|
|
468
|
+
const [open, setOpen] = React.useState(false);
|
|
469
|
+
const defaultPlaceholder = mode === "range" ? "Select date range..." : "Select a date...";
|
|
470
|
+
const displayValue = (() => {
|
|
471
|
+
if (mode === "single" && value instanceof Date) {
|
|
472
|
+
return dateFns.format(value, displayFormat);
|
|
473
|
+
}
|
|
474
|
+
if (mode === "range" && value && "start" in value) {
|
|
475
|
+
const range = value;
|
|
476
|
+
if (range.start && range.end) {
|
|
477
|
+
return `${dateFns.format(range.start, displayFormat)} \u2013 ${dateFns.format(range.end, displayFormat)}`;
|
|
478
|
+
}
|
|
479
|
+
if (range.start) {
|
|
480
|
+
return `${dateFns.format(range.start, displayFormat)} \u2013 ...`;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
return "";
|
|
484
|
+
})();
|
|
485
|
+
const handleApply = React.useCallback(
|
|
486
|
+
(val) => {
|
|
487
|
+
onApply == null ? void 0 : onApply(val);
|
|
488
|
+
setOpen(false);
|
|
489
|
+
},
|
|
490
|
+
[onApply]
|
|
491
|
+
);
|
|
492
|
+
const handleClear = React.useCallback(
|
|
493
|
+
(e) => {
|
|
494
|
+
e.stopPropagation();
|
|
495
|
+
onReset == null ? void 0 : onReset();
|
|
496
|
+
},
|
|
497
|
+
[onReset]
|
|
498
|
+
);
|
|
499
|
+
const handleChange = React.useCallback(
|
|
500
|
+
(val) => {
|
|
501
|
+
onChange == null ? void 0 : onChange(val);
|
|
502
|
+
if (mode === "single") {
|
|
503
|
+
setOpen(false);
|
|
504
|
+
}
|
|
505
|
+
},
|
|
506
|
+
[onChange, mode]
|
|
507
|
+
);
|
|
508
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
509
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-foreground", children: label }),
|
|
510
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
511
|
+
/* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
512
|
+
"button",
|
|
513
|
+
{
|
|
514
|
+
type: "button",
|
|
515
|
+
disabled,
|
|
516
|
+
className: cn(
|
|
517
|
+
"inline-flex items-center gap-2 h-10 px-3 rounded-lg border border-input bg-background text-sm",
|
|
518
|
+
"ring-offset-background transition-colors",
|
|
519
|
+
"hover:bg-accent/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
520
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
521
|
+
!displayValue && "text-muted-foreground",
|
|
522
|
+
displayValue && "text-foreground",
|
|
523
|
+
triggerClassName
|
|
524
|
+
),
|
|
525
|
+
children: [
|
|
526
|
+
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
|
|
527
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left truncate", children: displayValue || placeholder || defaultPlaceholder }),
|
|
528
|
+
clearable && displayValue && /* @__PURE__ */ jsxRuntime.jsx(
|
|
529
|
+
"span",
|
|
530
|
+
{
|
|
531
|
+
role: "button",
|
|
532
|
+
tabIndex: 0,
|
|
533
|
+
onClick: handleClear,
|
|
534
|
+
onKeyDown: (e) => e.key === "Enter" && handleClear(e),
|
|
535
|
+
className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
|
|
536
|
+
"aria-label": "Clear selection",
|
|
537
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3.5 w-3.5 text-muted-foreground" })
|
|
538
|
+
}
|
|
539
|
+
)
|
|
540
|
+
]
|
|
541
|
+
}
|
|
542
|
+
) }),
|
|
543
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
544
|
+
PopoverContent,
|
|
545
|
+
{
|
|
546
|
+
className: cn("w-auto p-0 pointer-events-auto", popoverClassName),
|
|
547
|
+
align,
|
|
548
|
+
sideOffset: 8,
|
|
549
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
550
|
+
DatePicker,
|
|
551
|
+
{
|
|
552
|
+
mode,
|
|
553
|
+
value,
|
|
554
|
+
onChange: handleChange,
|
|
555
|
+
onApply: mode === "range" ? handleApply : void 0,
|
|
556
|
+
onReset,
|
|
557
|
+
numberOfMonths: numberOfMonths != null ? numberOfMonths : mode === "range" ? 2 : 1,
|
|
558
|
+
showFooter: mode === "range",
|
|
559
|
+
presets,
|
|
560
|
+
minDate,
|
|
561
|
+
maxDate,
|
|
562
|
+
disabledDates,
|
|
563
|
+
weekStart,
|
|
564
|
+
renderDay,
|
|
565
|
+
className: cn("border-0 shadow-none", calendarClassName)
|
|
566
|
+
}
|
|
567
|
+
)
|
|
568
|
+
}
|
|
569
|
+
)
|
|
570
|
+
] })
|
|
571
|
+
] });
|
|
572
|
+
};
|
|
408
573
|
|
|
409
574
|
exports.DatePicker = DatePicker;
|
|
575
|
+
exports.DatePickerInput = DatePickerInput;
|
|
576
|
+
exports.default = DatePicker_default;
|
|
410
577
|
//# sourceMappingURL=index.js.map
|
|
411
578
|
//# sourceMappingURL=index.js.map
|