@itilite/lumina-ui 1.2.2 → 1.2.21

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 (91) hide show
  1. package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.mjs +1 -1
  2. package/dist/atom/Switch/Switch.d.mts +1 -1
  3. package/dist/atom/Switch/Switch.d.ts +1 -1
  4. package/dist/atom/Switch/Switch.js +2 -2
  5. package/dist/atom/Switch/Switch.mjs +1 -1
  6. package/dist/{chunk-TMSPSGSS.mjs → chunk-IIJUGDEJ.mjs} +3 -3
  7. package/dist/{chunk-E27NPVR4.mjs → chunk-LTP5I3GX.mjs} +3 -3
  8. package/dist/chunk-O6PQFAXN.mjs +47 -0
  9. package/dist/index.js +2 -2
  10. package/dist/index.mjs +6 -6
  11. package/dist/styles.css +847 -824
  12. package/package.json +28 -27
  13. package/dist/AdvancedDateRangePicker-D7xn4So6.d.mts +0 -59
  14. package/dist/AdvancedDateRangePicker-D7xn4So6.d.ts +0 -59
  15. package/dist/AdvancedDateRangePicker-D9Sdk4rK.d.mts +0 -64
  16. package/dist/AdvancedDateRangePicker-D9Sdk4rK.d.ts +0 -64
  17. package/dist/AdvancedDateRangePicker-DGg-rucL.d.mts +0 -62
  18. package/dist/AdvancedDateRangePicker-DGg-rucL.d.ts +0 -62
  19. package/dist/AdvancedDateRangePicker-Di3rHxqf.d.mts +0 -64
  20. package/dist/AdvancedDateRangePicker-Di3rHxqf.d.ts +0 -64
  21. package/dist/AdvancedDateRangePicker-Dxug2Mcf.d.mts +0 -60
  22. package/dist/AdvancedDateRangePicker-Dxug2Mcf.d.ts +0 -60
  23. package/dist/AdvancedDateRangePicker-ozItnkhp.d.mts +0 -57
  24. package/dist/AdvancedDateRangePicker-ozItnkhp.d.ts +0 -57
  25. package/dist/Table-BOq-_9Nr.d.mts +0 -121
  26. package/dist/Table-BOq-_9Nr.d.ts +0 -121
  27. package/dist/Table-BxaCiQmh.d.mts +0 -82
  28. package/dist/Table-BxaCiQmh.d.ts +0 -82
  29. package/dist/Table-CnzP9dkc.d.mts +0 -82
  30. package/dist/Table-CnzP9dkc.d.ts +0 -82
  31. package/dist/Table-DNvoh2P8.d.mts +0 -127
  32. package/dist/Table-DNvoh2P8.d.ts +0 -127
  33. package/dist/Table-DSFYzrpU.d.mts +0 -129
  34. package/dist/Table-DSFYzrpU.d.ts +0 -129
  35. package/dist/Table-DmfNNnuD.d.mts +0 -86
  36. package/dist/Table-DmfNNnuD.d.ts +0 -86
  37. package/dist/Table-DoCPt3ri.d.mts +0 -129
  38. package/dist/Table-DoCPt3ri.d.ts +0 -129
  39. package/dist/chunk-27LRL4RO.mjs +0 -428
  40. package/dist/chunk-2IT3XM7C.mjs +0 -473
  41. package/dist/chunk-3HXZIFV6.mjs +0 -438
  42. package/dist/chunk-4JX54OKI.mjs +0 -627
  43. package/dist/chunk-53O7JM5I.mjs +0 -424
  44. package/dist/chunk-5JXIJTAS.mjs +0 -448
  45. package/dist/chunk-5OUMKJWI.mjs +0 -301
  46. package/dist/chunk-5PMUTA6S.mjs +0 -303
  47. package/dist/chunk-5PQ43JFX.mjs +0 -440
  48. package/dist/chunk-62VAYFZA.mjs +0 -437
  49. package/dist/chunk-6ON32H2N.mjs +0 -431
  50. package/dist/chunk-6RIZXTFP.mjs +0 -290
  51. package/dist/chunk-6XIT27XY.mjs +0 -269
  52. package/dist/chunk-772C454L.mjs +0 -438
  53. package/dist/chunk-7L267Y4P.mjs +0 -429
  54. package/dist/chunk-7WSVCE2C.mjs +0 -269
  55. package/dist/chunk-ANJI6SPV.mjs +0 -283
  56. package/dist/chunk-BFFLWW7N.mjs +0 -250
  57. package/dist/chunk-C5VYFNVC.mjs +0 -441
  58. package/dist/chunk-CDYPIUWU.mjs +0 -681
  59. package/dist/chunk-DL7BZMGE.mjs +0 -295
  60. package/dist/chunk-DXPVJNGY.mjs +0 -284
  61. package/dist/chunk-FTL3PFC2.mjs +0 -438
  62. package/dist/chunk-G4P6XGQX.mjs +0 -278
  63. package/dist/chunk-GGWY2SYX.mjs +0 -452
  64. package/dist/chunk-GZ4P7OL3.mjs +0 -429
  65. package/dist/chunk-I6GLPWHS.mjs +0 -278
  66. package/dist/chunk-IPVJEGDI.mjs +0 -476
  67. package/dist/chunk-J4YYP4IZ.mjs +0 -0
  68. package/dist/chunk-J5JDQ4R6.mjs +0 -278
  69. package/dist/chunk-K2A4TWA3.mjs +0 -430
  70. package/dist/chunk-L3L42SIL.mjs +0 -429
  71. package/dist/chunk-LRNKIRH3.mjs +0 -289
  72. package/dist/chunk-MA23J4WQ.mjs +0 -430
  73. package/dist/chunk-N4DPPZVJ.mjs +0 -269
  74. package/dist/chunk-PQ3B2FEB.mjs +0 -249
  75. package/dist/chunk-QQA7KWAJ.mjs +0 -477
  76. package/dist/chunk-QRGHJP7U.mjs +0 -437
  77. package/dist/chunk-QU73KNTT.mjs +0 -452
  78. package/dist/chunk-RC6IGURJ.mjs +0 -428
  79. package/dist/chunk-SKPCOHON.mjs +0 -473
  80. package/dist/chunk-SRKN7WS7.mjs +0 -448
  81. package/dist/chunk-T43CWNOG.mjs +0 -283
  82. package/dist/chunk-TE5EOIIW.mjs +0 -301
  83. package/dist/chunk-TQDZWJZP.mjs +0 -269
  84. package/dist/chunk-UAGSPM3T.mjs +0 -288
  85. package/dist/chunk-UC4NTBDH.mjs +0 -439
  86. package/dist/chunk-UPSQTJJ4.mjs +0 -294
  87. package/dist/chunk-V3CHJHUX.mjs +0 -424
  88. package/dist/chunk-X3NDICAU.mjs +0 -284
  89. package/dist/chunk-XECXKSTC.mjs +0 -453
  90. package/dist/chunk-XIVTXS3Y.mjs +0 -439
  91. package/dist/chunk-ZGV6QMVM.mjs +0 -437
@@ -1,627 +0,0 @@
1
- import {
2
- Select_default
3
- } from "./chunk-GU5F7Z7I.mjs";
4
- import {
5
- Chevron
6
- } from "./chunk-ZTRM4HZJ.mjs";
7
-
8
- // src/atom/RangePicker/RangePicker.tsx
9
- import { memo, useEffect, useRef, useState } from "react";
10
- import clsx from "clsx";
11
- import dayjs from "dayjs";
12
-
13
- // src/atom/RangePicker/RangePicker.module.scss
14
- var RangePicker_module_default = { "range_start": "RangePicker-module__range_start___hGQp-", "range_end": "RangePicker-module__range_end___JJNib" };
15
-
16
- // src/atom/RangePicker/RangePicker.tsx
17
- import { Fragment, jsx, jsxs } from "react/jsx-runtime";
18
- function CustomRangePicker(props) {
19
- var _a, _b;
20
- const {
21
- id = "",
22
- footer,
23
- onChange = () => {
24
- },
25
- dateRange = ["", ""],
26
- showNightCount = false,
27
- isRange = true,
28
- showYearDropdown = false,
29
- showSingleCalendar = false,
30
- disablePastDates = false,
31
- // New prop to control past date restriction
32
- minDate = null,
33
- // New prop for minimum allowed date
34
- maxDate = null,
35
- // New prop for maximum allowed date
36
- minYear = 1900,
37
- // Minimum year for dropdown
38
- maxYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
39
- // Maximum year for dropdown
40
- experience = "business",
41
- showToastError = () => {
42
- }
43
- } = props;
44
- const onChangeRef = useRef(onChange);
45
- useEffect(() => {
46
- onChangeRef.current = onChange;
47
- }, [onChange]);
48
- const getInitialDate = () => {
49
- if (dateRange[0]) {
50
- return new Date(dateRange[0]);
51
- }
52
- if (!minDate && !maxDate && !minYear && !maxYear) {
53
- return /* @__PURE__ */ new Date();
54
- }
55
- if (maxYear && maxYear !== (/* @__PURE__ */ new Date()).getFullYear()) {
56
- let targetDate = new Date(maxYear, 7, 1);
57
- if (maxDate) {
58
- const maxDateTime = new Date(maxDate);
59
- if (targetDate > maxDateTime) {
60
- targetDate = new Date(
61
- maxDateTime.getFullYear(),
62
- maxDateTime.getMonth(),
63
- 1
64
- );
65
- }
66
- }
67
- return targetDate;
68
- }
69
- if (minDate) {
70
- const minDateTime = new Date(minDate);
71
- minDateTime.setHours(0, 0, 0, 0);
72
- return minDateTime;
73
- }
74
- return /* @__PURE__ */ new Date();
75
- };
76
- const [currentDate, setCurrentDate] = useState(() => getInitialDate());
77
- const [startDate, setStartDate] = useState(
78
- dateRange[0] ? new Date(dateRange[0]) : null
79
- );
80
- const [endDate, setEndDate] = useState(
81
- dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
82
- );
83
- const [hoverDate, setHoverDate] = useState(null);
84
- const [isSelectingEnd, setIsSelectingEnd] = useState(
85
- dateRange[0] && !dateRange[1] ? true : false
86
- );
87
- const [selectedDate, setSelectedDate] = useState(
88
- !isRange && dateRange[0] ? new Date(dateRange[0]) : null
89
- );
90
- useEffect(() => {
91
- const newStart = dateRange[0] ? new Date(dateRange[0]) : null;
92
- const newEnd = dateRange[1] ? new Date(dateRange[1]) : null;
93
- setStartDate(newStart);
94
- setEndDate(newEnd);
95
- if (newStart) {
96
- setCurrentDate(new Date(newStart.getFullYear(), newStart.getMonth(), 1));
97
- }
98
- }, [dateRange]);
99
- const getDaysBetween = (start, end) => {
100
- if (!start || !end) return 0;
101
- const startDay = dayjs(start).startOf("day");
102
- const endDay = dayjs(end).startOf("day");
103
- return endDay.diff(startDay, "day");
104
- };
105
- const nightCount = Math.abs(getDaysBetween(startDate || endDate, hoverDate));
106
- const nightCountText = nightCount > 1 ? `${nightCount} nights` : "1 night";
107
- const today = /* @__PURE__ */ new Date();
108
- today.setHours(0, 0, 0, 0);
109
- const firstMonth = new Date(
110
- currentDate.getFullYear(),
111
- currentDate.getMonth(),
112
- 1
113
- );
114
- const secondMonth = new Date(
115
- currentDate.getFullYear(),
116
- currentDate.getMonth() + 1,
117
- 1
118
- );
119
- const monthNames = [
120
- "January",
121
- "February",
122
- "March",
123
- "April",
124
- "May",
125
- "June",
126
- "July",
127
- "August",
128
- "September",
129
- "October",
130
- "November",
131
- "December"
132
- ];
133
- const dayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
134
- const generateYearOptions = () => {
135
- const years = [];
136
- for (let i = minYear; i <= maxYear; i++) {
137
- const isYearDisabled = isYearCompletelyDisabled(i);
138
- years.push({
139
- label: i.toString(),
140
- value: i,
141
- disabled: isYearDisabled
142
- });
143
- }
144
- return years;
145
- };
146
- const isYearCompletelyDisabled = (year) => {
147
- const firstDayOfYear = new Date(year, 0, 1);
148
- const lastDayOfYear = new Date(year, 11, 31);
149
- if (minDate) {
150
- const minDateTime = new Date(minDate);
151
- minDateTime.setHours(0, 0, 0, 0);
152
- if (minDateTime > lastDayOfYear) {
153
- return true;
154
- }
155
- }
156
- if (maxDate) {
157
- const maxDateTime = new Date(maxDate);
158
- maxDateTime.setHours(0, 0, 0, 0);
159
- if (maxDateTime < firstDayOfYear) {
160
- return true;
161
- }
162
- }
163
- if (disablePastDates) {
164
- const today2 = /* @__PURE__ */ new Date();
165
- today2.setHours(0, 0, 0, 0);
166
- if (lastDayOfYear < today2) {
167
- return true;
168
- }
169
- }
170
- return false;
171
- };
172
- const yearOptions = generateYearOptions();
173
- const generateCalendarDays = (monthDate) => {
174
- const year = monthDate.getFullYear();
175
- const month = monthDate.getMonth();
176
- const firstDay = new Date(year, month, 1);
177
- const lastDay = new Date(year, month + 1, 0);
178
- const daysInMonth = lastDay.getDate();
179
- const startingDayOfWeek = firstDay.getDay();
180
- const days = [];
181
- for (let i = 0; i < startingDayOfWeek; i++) {
182
- days.push(null);
183
- }
184
- for (let day = 1; day <= daysInMonth; day++) {
185
- days.push(new Date(year, month, day));
186
- }
187
- return days;
188
- };
189
- const formatDateKey = (date) => {
190
- if (!date) return "";
191
- return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
192
- };
193
- const isSameDate = (date1, date2) => {
194
- if (!date1 || !date2) return false;
195
- return formatDateKey(date1) === formatDateKey(date2);
196
- };
197
- const isDateDisabled = (date) => {
198
- if (!date) return false;
199
- const checkDate = new Date(date);
200
- checkDate.setHours(0, 0, 0, 0);
201
- if (disablePastDates && checkDate < today) {
202
- return true;
203
- }
204
- if (minDate) {
205
- const minDateTime = new Date(minDate);
206
- minDateTime.setHours(0, 0, 0, 0);
207
- if (checkDate < minDateTime) {
208
- return true;
209
- }
210
- }
211
- if (maxDate) {
212
- const maxDateTime = new Date(maxDate);
213
- maxDateTime.setHours(0, 0, 0, 0);
214
- if (checkDate > maxDateTime) {
215
- return true;
216
- }
217
- }
218
- return false;
219
- };
220
- const isDateInRange = (date) => {
221
- if (!isRange || !startDate || !date) return false;
222
- const compareDate = endDate || hoverDate;
223
- if (!compareDate) return false;
224
- const start = startDate < compareDate ? startDate : compareDate;
225
- const end = startDate < compareDate ? compareDate : startDate;
226
- return date >= start && date <= end;
227
- };
228
- const isDateBetweenRange = (date) => {
229
- if (!isRange || !startDate || !date) return false;
230
- const compareDate = endDate || hoverDate;
231
- if (!compareDate) return false;
232
- const start = startDate < compareDate ? startDate : compareDate;
233
- const end = startDate < compareDate ? compareDate : startDate;
234
- return date > start && date < end;
235
- };
236
- const handleDateClick = (date) => {
237
- if (isDateDisabled(date)) return;
238
- if (!isRange) {
239
- setSelectedDate(date);
240
- onChangeRef.current(null, dayjs(date).format("D MMM, YYYY"));
241
- return;
242
- }
243
- let nextStart = startDate;
244
- let nextEnd = endDate;
245
- const isCheckinCheckoutSame = dayjs(date).format("D MMM, YYYY") === dayjs(startDate).format("D MMM, YYYY");
246
- if (showNightCount && isCheckinCheckoutSame) {
247
- setStartDate(null);
248
- setEndDate(null);
249
- setIsSelectingEnd(false);
250
- setHoverDate(null);
251
- showToastError("Check-in and check-out dates cannot be the same.");
252
- onChangeRef.current(null, ["", ""]);
253
- return;
254
- }
255
- if (!startDate || startDate && endDate) {
256
- nextStart = date;
257
- nextEnd = null;
258
- setStartDate(nextStart);
259
- setEndDate(nextEnd);
260
- setIsSelectingEnd(true);
261
- setHoverDate(null);
262
- } else if (startDate && !endDate) {
263
- if (date < startDate) {
264
- nextEnd = startDate;
265
- nextStart = date;
266
- } else {
267
- nextEnd = date;
268
- }
269
- setStartDate(nextStart);
270
- setEndDate(nextEnd);
271
- setIsSelectingEnd(false);
272
- setHoverDate(null);
273
- }
274
- onChangeRef.current(null, [
275
- nextStart ? dayjs(nextStart).format("D MMM, YYYY") : "",
276
- nextEnd ? dayjs(nextEnd).format("D MMM, YYYY") : ""
277
- ]);
278
- };
279
- useEffect(() => {
280
- if (isRange && startDate && !endDate) {
281
- sessionStorage.setItem(
282
- "rangePickerStartDate",
283
- dayjs(startDate).format("D MMM, YYYY")
284
- );
285
- }
286
- }, [startDate, endDate, isRange]);
287
- const handleDateHover = (date) => {
288
- if (isDateDisabled(date) || !isRange) return;
289
- if (isSelectingEnd && startDate && !endDate) {
290
- setHoverDate(date);
291
- }
292
- };
293
- const navigateMonth = (direction) => {
294
- const newDate = new Date(currentDate);
295
- newDate.setMonth(currentDate.getMonth() + direction);
296
- setCurrentDate(newDate);
297
- };
298
- const isPreviousMonthDisabled = () => {
299
- const previousMonth = new Date(currentDate);
300
- previousMonth.setMonth(currentDate.getMonth() - 1);
301
- const lastDayOfPreviousMonth = new Date(
302
- previousMonth.getFullYear(),
303
- previousMonth.getMonth() + 1,
304
- 0
305
- );
306
- return isDateDisabled(lastDayOfPreviousMonth);
307
- };
308
- const isNextMonthDisabled = () => {
309
- const nextMonth = new Date(currentDate);
310
- nextMonth.setMonth(currentDate.getMonth() + 1);
311
- const firstDayOfNextMonth = new Date(
312
- nextMonth.getFullYear(),
313
- nextMonth.getMonth(),
314
- 1
315
- );
316
- return isDateDisabled(firstDayOfNextMonth);
317
- };
318
- const handleYearChange = (selectedYear) => {
319
- const newDate = new Date(currentDate);
320
- newDate.setFullYear(selectedYear);
321
- const targetMonth = newDate.getMonth();
322
- if (!isMonthDisabled(selectedYear, targetMonth)) {
323
- setCurrentDate(newDate);
324
- } else {
325
- const firstAvailableMonth = findFirstAvailableMonth(selectedYear);
326
- if (firstAvailableMonth !== -1) {
327
- newDate.setMonth(firstAvailableMonth);
328
- setCurrentDate(newDate);
329
- }
330
- }
331
- };
332
- const isMonthDisabled = (year, month) => {
333
- const lastDayOfMonth = new Date(year, month + 1, 0);
334
- const firstDayOfMonth = new Date(year, month, 1);
335
- return isDateDisabled(lastDayOfMonth) && isDateDisabled(firstDayOfMonth);
336
- };
337
- const findFirstAvailableMonth = (year) => {
338
- for (let month = 0; month < 12; month++) {
339
- if (!isMonthDisabled(year, month)) {
340
- return month;
341
- }
342
- }
343
- return -1;
344
- };
345
- const isSameDay = ((_a = dayjs(startDate)) == null ? void 0 : _a.format("D MMM, YYYY")) === ((_b = dayjs(endDate)) == null ? void 0 : _b.format("D MMM, YYYY"));
346
- const NightCountTooltip = () => {
347
- const TooltipArrow = memo(() => {
348
- return /* @__PURE__ */ jsx("div", { className: "tw-w-3 tw-h-3 tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-transparent tw-rotate-90", children: /* @__PURE__ */ jsx(
349
- "div",
350
- {
351
- style: {
352
- borderTop: "5px solid transparent",
353
- borderBottom: "5px solid transparent",
354
- borderLeft: "8px solid black"
355
- }
356
- }
357
- ) });
358
- });
359
- return /* @__PURE__ */ jsxs("div", { className: "tw-absolute tw-bottom-11 tw-py-2 tw-bg-black tw-text-white tw-px-2 tw-rounded-lg tw-z-50 tw-text-xs tw-whitespace-nowrap tw-opacity-0 tw-pointer-events-none group-hover:tw-opacity-100 tw-transition-opacity tw-duration-200", children: [
360
- nightCountText,
361
- /* @__PURE__ */ jsx("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ jsx(TooltipArrow, {}) })
362
- ] });
363
- };
364
- const renderCalendar = (monthDate, isSecondCalendar = false) => {
365
- const days = generateCalendarDays(monthDate);
366
- const monthName = monthNames[monthDate.getMonth()];
367
- const year = monthDate.getFullYear();
368
- return /* @__PURE__ */ jsxs(
369
- "div",
370
- {
371
- className: clsx("tw-flex-1 tw-max-w-[83vw] tw-mb-2", {
372
- "tw-h-[320px]": showYearDropdown || days.length > 35,
373
- "tw-h-[290px]": !showYearDropdown || days.length <= 35
374
- }),
375
- children: [
376
- /* @__PURE__ */ jsx("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ jsxs("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
377
- /* @__PURE__ */ jsxs("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
378
- monthName,
379
- " ",
380
- !showYearDropdown && ` ${year}`
381
- ] }),
382
- showYearDropdown && /* @__PURE__ */ jsx(
383
- Select_default,
384
- {
385
- options: yearOptions,
386
- value: currentDate.getFullYear(),
387
- valueSelected: currentDate.getFullYear(),
388
- onChange: (selectedYear) => {
389
- if (typeof selectedYear === "number") {
390
- handleYearChange(selectedYear);
391
- }
392
- },
393
- className: "tw-min-w-fit tw-bg-transparent tw-typography-footNoteBold tw-text-color-text-default",
394
- size: "small",
395
- variant: "filled",
396
- style: { width: "80px" },
397
- id: `${id}-year-select`,
398
- allowClear: false,
399
- enableSearch: false,
400
- experience
401
- }
402
- )
403
- ] }) }),
404
- /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ jsx(
405
- "div",
406
- {
407
- className: "tw-py-2 tw-px-0 tw-text-center tw-typography-caption2 tw-text-[#6B7280]",
408
- children: day
409
- },
410
- day
411
- )) }),
412
- /* @__PURE__ */ jsx("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
413
- if (!date) {
414
- return /* @__PURE__ */ jsx("div", { className: "tw-h-10" }, index);
415
- }
416
- const isStart = isRange ? isSameDate(date, startDate) : false;
417
- const isEnd = isRange ? isSameDate(date, endDate) : false;
418
- const isSelected = !isRange ? isSameDate(date, selectedDate) : false;
419
- const isInRange = isRange ? isDateBetweenRange(date) : false;
420
- const isHovering = isRange && isSelectingEnd && hoverDate && isDateInRange(date) && !isStart && !isEnd;
421
- const isDisabled = isDateDisabled(date);
422
- let className = "tw-relative tw-z-20 tw-h-10 tw-w-10 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold ";
423
- const isFirstInRow = index % 7 === 0;
424
- const isLastInRow = index % 7 === 6;
425
- let pseudoClass = "";
426
- if (isDisabled) {
427
- className += "tw-text-gray-300 tw-cursor-not-allowed ";
428
- } else {
429
- className += "tw-cursor-pointer ";
430
- if (isStart || isEnd || isSelected) {
431
- className += "tw-bg-black tw-z-[21] tw-text-white tw-font-medium tw-rounded-full ";
432
- } else if (isInRange) {
433
- className += "tw-text-gray-900";
434
- if (window.innerWidth < 640) {
435
- className = className.replace(
436
- "tw-w-10",
437
- "tw-pr-2 tw-w-[50px] sm:tw-w-10 sm:tw-pr-0"
438
- );
439
- }
440
- pseudoClass = clsx(RangePicker_module_default.range_start, RangePicker_module_default.range_end);
441
- } else {
442
- className += "tw-text-gray-700 hover:tw-border-2 hover:tw-border-black tw-rounded-full hover:tw-border-solid ";
443
- }
444
- if (isHovering) {
445
- className += "tw-border-2 tw-border-gray-400 tw-bg-white tw-z-[22]";
446
- }
447
- }
448
- const titleDate = dayjs(date).format("YYYY-MM-DD");
449
- const hoverDateFormatted = dayjs(hoverDate || null).format(
450
- "YYYY-MM-DD"
451
- );
452
- const isHoveringDate = dayjs(hoverDateFormatted).isSame(
453
- dayjs(date),
454
- "day"
455
- );
456
- const isHoverDateGreater = dayjs(hoverDate).isAfter(
457
- dayjs(startDate),
458
- "day"
459
- );
460
- const isHoverDateLess = dayjs(hoverDate).isBefore(
461
- dayjs(startDate),
462
- "day"
463
- );
464
- return /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
465
- (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ jsx(
466
- "div",
467
- {
468
- className: clsx(
469
- "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
470
- {
471
- "tw-left-5": isStart,
472
- "tw-right-5": isEnd,
473
- "tw-invisible": isFirstInRow && isEnd || isLastInRow && isStart
474
- }
475
- )
476
- }
477
- ),
478
- isHoveringDate && isHovering && /* @__PURE__ */ jsxs(Fragment, { children: [
479
- /* @__PURE__ */ jsx(
480
- "div",
481
- {
482
- className: clsx(
483
- "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
484
- {
485
- "tw-right-5": isHoverDateGreater,
486
- "tw-left-5": isHoverDateLess,
487
- "tw-invisible": isFirstInRow && isHoverDateGreater || isLastInRow && isHoverDateLess
488
- }
489
- )
490
- }
491
- ),
492
- /* @__PURE__ */ jsx(
493
- "div",
494
- {
495
- className: clsx(
496
- "tw-w-[18px] tw-h-[40px] tw-bg-white tw-rounded-r-full tw-absolute tw-z-20",
497
- {
498
- "tw-left-5": isHoverDateLess,
499
- "tw-right-5 tw-rotate-180": isHoverDateGreater
500
- }
501
- )
502
- }
503
- )
504
- ] }),
505
- isStart && /* @__PURE__ */ jsxs(Fragment, { children: [
506
- /* @__PURE__ */ jsx(
507
- "div",
508
- {
509
- className: clsx(
510
- "tw-w-9 tw-h-8 tw-bg-[#F2EFEC] tw-rotate-90 tw-absolute tw-z-10 tw-top-1",
511
- {
512
- "tw-right-5": isHoverDateLess,
513
- "tw-left-5": isHoverDateGreater,
514
- "tw-invisible": isLastInRow
515
- }
516
- )
517
- }
518
- ),
519
- /* @__PURE__ */ jsx(
520
- "div",
521
- {
522
- className: clsx(
523
- "tw-w-[18px] tw-h-[40px] tw-bg-white tw-rounded-r-full tw-absolute tw-z-20",
524
- {
525
- "tw-left-5": isHoverDateGreater,
526
- "tw-right-5 tw-rotate-180": isHoverDateLess
527
- }
528
- )
529
- }
530
- )
531
- ] }),
532
- /* @__PURE__ */ jsxs(
533
- "div",
534
- {
535
- className: clsx(className, pseudoClass, "tw-group", {
536
- "tw-border-2 !tw-border-black tw-rounded-full tw-border-solid": dayjs(date).isSame(dayjs(hoverDate), "day")
537
- }),
538
- onClick: () => handleDateClick(date),
539
- onMouseEnter: () => handleDateHover(date),
540
- "data-date": titleDate,
541
- children: [
542
- showNightCount && isRange && isHovering && /* @__PURE__ */ jsx(NightCountTooltip, {}),
543
- date.getDate()
544
- ]
545
- }
546
- )
547
- ] }, formatDateKey(date));
548
- }) })
549
- ]
550
- }
551
- );
552
- };
553
- const arrowClasses = "tw-relative tw-top-3 sm:tw-top-0 tw-cursor-pointer tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-justify-center hover:tw-bg-gray-100 tw-items-center";
554
- return /* @__PURE__ */ jsxs(
555
- "div",
556
- {
557
- className: clsx(
558
- "custom-range-picker tw-relative tw-bg-white tw-rounded-xl tw-pt-1 tw-px-0 tw-max-w-4xl tw-mx-auto tw-border tw-border-gray-200 tw-border-solid tw-w-full tw-max-h-[90vh] tw-overflow-y-auto",
559
- {
560
- "sm:tw-w-[640px]": !showSingleCalendar,
561
- "sm:tw-w-[330px]": showSingleCalendar
562
- }
563
- ),
564
- children: [
565
- /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-px-4 tw-justify-between tw-mb-4 tw-absolute tw-right-0 tw-left-0 tw-top-0.5 sm:tw-top-4 tw-w-auto", children: [
566
- !isPreviousMonthDisabled() && /* @__PURE__ */ jsx(
567
- "div",
568
- {
569
- className: clsx(arrowClasses, "tw-left-1"),
570
- onClick: () => navigateMonth(-1),
571
- id: "calendar-previous-month-button",
572
- children: /* @__PURE__ */ jsx(
573
- Chevron,
574
- {
575
- size: "medium",
576
- className: "tw-relative -tw-top-0.5 tw-right-0.5"
577
- }
578
- )
579
- }
580
- ),
581
- isPreviousMonthDisabled() && /* @__PURE__ */ jsx("div", { className: "tw-w-10 tw-h-10" }),
582
- !isNextMonthDisabled() && /* @__PURE__ */ jsx(
583
- "div",
584
- {
585
- className: clsx(arrowClasses, "tw-mt-[1px] tw-right-1"),
586
- onClick: () => navigateMonth(1),
587
- id: "calendar-next-month-button",
588
- children: /* @__PURE__ */ jsx(
589
- Chevron,
590
- {
591
- size: "medium",
592
- onClick: () => navigateMonth(1),
593
- className: "tw-rotate-180 tw-relative tw-top-0.5 tw-left-0.5"
594
- }
595
- )
596
- }
597
- ),
598
- isNextMonthDisabled() && /* @__PURE__ */ jsx("div", { className: "tw-w-10 tw-h-10" })
599
- ] }),
600
- /* @__PURE__ */ jsx("div", { className: "tw-flex tw-items-center tw-justify-between tw-px-6 tw-border-solid tw-border-color-gray-100 tw-border-b tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-w-auto", children: /* @__PURE__ */ jsxs(
601
- "div",
602
- {
603
- className: clsx("tw-flex tw-w-full", {
604
- "tw-flex-col sm:tw-space-x-8 sm:tw-flex-row": isRange || !showSingleCalendar,
605
- "tw-justify-center": !isRange || showSingleCalendar,
606
- "tw-pt-4": showYearDropdown,
607
- // More space when year dropdown is visible
608
- "tw-pt-6": !showYearDropdown
609
- }),
610
- children: [
611
- renderCalendar(firstMonth),
612
- !showSingleCalendar && renderCalendar(secondMonth, true)
613
- ]
614
- }
615
- ) }),
616
- footer
617
- ]
618
- }
619
- );
620
- }
621
- CustomRangePicker.displayName = "RangePicker";
622
- var RangePicker_default = CustomRangePicker;
623
-
624
- export {
625
- CustomRangePicker,
626
- RangePicker_default
627
- };