@dmsi/wedgekit-react 0.0.230 → 0.0.232

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 (57) hide show
  1. package/dist/{chunk-2RUQFWER.js → chunk-2VRZB2A4.js} +1 -1
  2. package/dist/{chunk-A76MF7ZO.js → chunk-3M23BFB4.js} +2 -2
  3. package/dist/{chunk-7W4I2NK3.js → chunk-5JVMULVC.js} +12 -2
  4. package/dist/{chunk-2WRRRPEB.js → chunk-7BBXPM5C.js} +1 -1
  5. package/dist/{chunk-XOUEHNCC.js → chunk-Q7ETEWBW.js} +1 -1
  6. package/dist/chunk-SQJ7MWY7.js +493 -0
  7. package/dist/chunk-VZVPD3XK.js +1182 -0
  8. package/dist/components/CalendarRange.cjs +4066 -224
  9. package/dist/components/CalendarRange.css +4831 -0
  10. package/dist/components/CalendarRange.js +23 -1
  11. package/dist/components/DataGridCell.cjs +12 -2
  12. package/dist/components/DataGridCell.js +3 -3
  13. package/dist/components/DateInput.cjs +3682 -329
  14. package/dist/components/DateInput.css +4831 -0
  15. package/dist/components/DateInput.js +23 -5
  16. package/dist/components/DateRangeInput.cjs +3682 -329
  17. package/dist/components/DateRangeInput.css +4831 -0
  18. package/dist/components/DateRangeInput.js +23 -5
  19. package/dist/components/FilterGroup.cjs +12 -2
  20. package/dist/components/FilterGroup.js +7 -7
  21. package/dist/components/Input.cjs +12 -2
  22. package/dist/components/Input.js +1 -1
  23. package/dist/components/MobileDataGrid.js +3 -3
  24. package/dist/components/Modal.js +4 -4
  25. package/dist/components/ModalButtons.js +2 -2
  26. package/dist/components/ModalHeader.js +2 -2
  27. package/dist/components/NavigationTab.js +2 -2
  28. package/dist/components/NavigationTabs.js +2 -2
  29. package/dist/components/Notification.js +3 -3
  30. package/dist/components/OptionPill.js +2 -2
  31. package/dist/components/PDFViewer.js +6 -6
  32. package/dist/components/Password.cjs +12 -2
  33. package/dist/components/Password.js +1 -1
  34. package/dist/components/Search.cjs +12 -2
  35. package/dist/components/Search.js +2 -2
  36. package/dist/components/Select.cjs +12 -2
  37. package/dist/components/Select.js +2 -2
  38. package/dist/components/Stepper.cjs +12 -2
  39. package/dist/components/Stepper.js +4 -4
  40. package/dist/components/Time.cjs +12 -2
  41. package/dist/components/Time.js +1 -1
  42. package/dist/components/Toast.js +3 -3
  43. package/dist/components/Upload.js +3 -3
  44. package/dist/components/index.cjs +12 -2
  45. package/dist/components/index.css +3 -0
  46. package/dist/components/index.js +12 -1142
  47. package/dist/index.css +3 -0
  48. package/package.json +1 -1
  49. package/src/components/CalendarRange.tsx +316 -165
  50. package/src/components/DateInput.tsx +1 -0
  51. package/src/components/DateRangeInput.tsx +1 -0
  52. package/src/components/Input.tsx +19 -5
  53. package/dist/chunk-SE5DM2IJ.js +0 -350
  54. package/dist/{chunk-ED7FXZRX.js → chunk-BW2MWMVM.js} +3 -3
  55. package/dist/{chunk-FYW64H7N.js → chunk-JFPRYMID.js} +3 -3
  56. package/dist/{chunk-A5ROZWIH.js → chunk-R4H6D4SZ.js} +3 -3
  57. package/dist/{chunk-47KTDBGA.js → chunk-T7UCZWWK.js} +3 -3
@@ -1,350 +0,0 @@
1
- import {
2
- Icon
3
- } from "./chunk-UAPWR2KE.js";
4
- import {
5
- componentPadding,
6
- layoutGap,
7
- layoutPaddding,
8
- typography
9
- } from "./chunk-RDLEIAQU.js";
10
- import {
11
- __objRest,
12
- __spreadProps,
13
- __spreadValues
14
- } from "./chunk-BBZEL7EG.js";
15
-
16
- // src/components/CalendarRange.tsx
17
- import clsx from "clsx";
18
- import React, { useEffect, useState } from "react";
19
- import { Temporal } from "@js-temporal/polyfill";
20
- import { jsx, jsxs } from "react/jsx-runtime";
21
- function isWeekend(date) {
22
- return date.dayOfWeek === 6 || date.dayOfWeek === 7;
23
- }
24
- function DateCell(_a) {
25
- var _b = _a, {
26
- date,
27
- isInMonth,
28
- isToday,
29
- isSelected,
30
- inRange,
31
- isDisabled,
32
- isRangeStart,
33
- isRangeEnd,
34
- onClick,
35
- onMouseEnter,
36
- onMouseLeave,
37
- cellPadding = "",
38
- isRangeDisabled = false,
39
- id,
40
- testid
41
- } = _b, props = __objRest(_b, [
42
- "date",
43
- "isInMonth",
44
- "isToday",
45
- "isSelected",
46
- "inRange",
47
- "isDisabled",
48
- "isRangeStart",
49
- "isRangeEnd",
50
- "onClick",
51
- "onMouseEnter",
52
- "onMouseLeave",
53
- "cellPadding",
54
- "isRangeDisabled",
55
- "id",
56
- "testid"
57
- ]);
58
- return /* @__PURE__ */ jsx(
59
- "span",
60
- __spreadProps(__spreadValues({}, props), {
61
- id,
62
- "data-testid": testid,
63
- className: clsx(
64
- "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
65
- typography.caption,
66
- cellPadding,
67
- !isToday && !isSelected && !inRange && !isDisabled && !isRangeStart && !isRangeEnd && "border-transparent",
68
- !isInMonth && "border-transparent",
69
- // Today: subtle border ring
70
- isToday && !isSelected && !inRange && "rounded-full border-border-primary-normal ",
71
- // Selected: Figma blue, white text, strong shadow
72
- isSelected && "bg-action-400 text-white border-action-400 z-10",
73
- !isSelected && !inRange && "rounded-base",
74
- // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
75
- (isRangeDisabled || !inRange && isSelected) && "rounded-base",
76
- inRange && isSelected && "hover:border-action-500",
77
- // In range: Figma light blue background
78
- inRange && !isSelected && "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0 ",
79
- // Disabled: Figma gray, no pointer, no hover
80
- isDisabled && !inRange ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
81
- "text-text-primary-normal cursor-pointer",
82
- // Figma hover: blue bg, blue text (or red text if selected)
83
- isSelected ? "hover:bg-background-action-primary-hover hover:text-white" : "hover:bg-action-100 hover:text-text-action-primary-hover",
84
- // Figma active: darker blue bg, white text
85
- "active:bg-action-300 active:text-white",
86
- // Figma focus: ring
87
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
88
- ],
89
- isRangeStart && "rounded-l",
90
- isRangeEnd && "rounded-r"
91
- ),
92
- tabIndex: isDisabled ? -1 : 0,
93
- "aria-disabled": isDisabled,
94
- onClick: () => !isDisabled && isInMonth && onClick(),
95
- onMouseEnter: () => isInMonth && onMouseEnter(),
96
- onMouseLeave: () => isInMonth && onMouseLeave(),
97
- children: isInMonth ? date.day : ""
98
- })
99
- );
100
- }
101
- function CalendarRange({
102
- from,
103
- to,
104
- onChange,
105
- isDateAvailable,
106
- mode = "double",
107
- cardStyle = false,
108
- disableRange = false,
109
- id,
110
- testid
111
- }) {
112
- const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
113
- const parseDate = (d) => {
114
- if (!d) {
115
- return void 0;
116
- }
117
- try {
118
- if (typeof d === "number") {
119
- return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
120
- }
121
- if (typeof d === "string") {
122
- return Temporal.PlainDate.from(d);
123
- }
124
- return void 0;
125
- } catch (error) {
126
- console.error("Invalid date format:", d, error);
127
- return Temporal.Now.plainDateISO();
128
- }
129
- };
130
- const fromDate = parseDate(from);
131
- const toDate = parseDate(to);
132
- const today = Temporal.Now.plainDateISO();
133
- const [baseMonth, setBaseMonth] = useState(
134
- fromDate != null ? fromDate : today.with({ day: 1 })
135
- );
136
- const [selecting, setSelecting] = useState("from");
137
- const [pendingFrom, setPendingFrom] = useState(void 0);
138
- const [hoveredDate, setHoveredDate] = useState(void 0);
139
- useEffect(() => {
140
- if (fromDate) {
141
- setBaseMonth(fromDate.with({ day: 1 }));
142
- } else if (toDate) {
143
- setBaseMonth(toDate.with({ day: 1 }));
144
- }
145
- }, [from, to]);
146
- useEffect(() => {
147
- if (fromDate && toDate) {
148
- setSelecting("from");
149
- setPendingFrom(void 0);
150
- setHoveredDate(void 0);
151
- }
152
- }, [from, to]);
153
- function getMonthData(monthOffset) {
154
- const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
155
- const days = monthDate.daysInMonth;
156
- const firstDayOffset = monthDate.dayOfWeek % 7;
157
- return {
158
- name: monthDate.toLocaleString("en-US", { month: "long" }),
159
- year: monthDate.year,
160
- days,
161
- firstDayOffset,
162
- date: monthDate
163
- };
164
- }
165
- function handleDayClick(date) {
166
- if (isDateAvailable && !isDateAvailable(date)) return;
167
- if (mode === "single" && disableRange) {
168
- if (onChange) {
169
- onChange(date.toString(), date.toString());
170
- }
171
- return;
172
- }
173
- if (selecting === "from") {
174
- setPendingFrom(date);
175
- setSelecting("to");
176
- setHoveredDate(void 0);
177
- } else if (pendingFrom) {
178
- if (onChange) {
179
- const [start, end] = Temporal.PlainDate.compare(date, pendingFrom) < 0 ? [date, pendingFrom] : [pendingFrom, date];
180
- onChange(start.toString(), end.toString());
181
- }
182
- setPendingFrom(void 0);
183
- setSelecting("from");
184
- setHoveredDate(void 0);
185
- }
186
- }
187
- function isInRange(date) {
188
- if (mode === "single" && disableRange) {
189
- return false;
190
- }
191
- if (pendingFrom && selecting === "to" && hoveredDate) {
192
- const [start, end] = Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
193
- return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
194
- }
195
- if (!pendingFrom && fromDate && toDate) {
196
- return Temporal.PlainDate.compare(date, fromDate) >= 0 && Temporal.PlainDate.compare(date, toDate) <= 0;
197
- }
198
- return false;
199
- }
200
- return /* @__PURE__ */ jsx(
201
- "div",
202
- {
203
- id,
204
- "data-testid": testid,
205
- className: clsx(
206
- "relative bg-background-grouped-primary-normal rounded-base w-fit",
207
- layoutPaddding,
208
- layoutGap,
209
- cardStyle && "shadow-4",
210
- // baseTransition,
211
- "overflow-hidden"
212
- ),
213
- children: /* @__PURE__ */ jsx(
214
- "div",
215
- {
216
- className: clsx(
217
- "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
218
- layoutGap
219
- ),
220
- children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
221
- const month = getMonthData(offset);
222
- const totalCells = 42;
223
- const emptyCells = month.firstDayOffset;
224
- return /* @__PURE__ */ jsxs(React.Fragment, { children: [
225
- /* @__PURE__ */ jsxs(
226
- "div",
227
- {
228
- className: clsx("flex flex-col"),
229
- children: [
230
- /* @__PURE__ */ jsxs(
231
- "div",
232
- {
233
- className: clsx(
234
- "flex flex-row items-center justify-between",
235
- typography.label,
236
- "text-text-action-primary-normal"
237
- ),
238
- children: [
239
- idx === 0 ? /* @__PURE__ */ jsx(
240
- "button",
241
- {
242
- id: id ? `${id}-prev-month-button` : void 0,
243
- "data-testid": testid ? `${testid}-prev-month-button` : void 0,
244
- type: "button",
245
- className: clsx(
246
- "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
247
- componentPadding
248
- ),
249
- "aria-label": "Previous month",
250
- onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
251
- children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left", size: 24 })
252
- }
253
- ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "mr-1") }),
254
- /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-compact-component-padding", children: [
255
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate", children: month.name }),
256
- /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate", children: month.year })
257
- ] }),
258
- (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
259
- "button",
260
- {
261
- id: id ? `${id}-next-month-button` : void 0,
262
- "data-testid": testid ? `${testid}-next-month-button` : void 0,
263
- type: "button",
264
- className: clsx(
265
- "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
266
- componentPadding
267
- ),
268
- "aria-label": "Next month",
269
- onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
270
- children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 24 })
271
- }
272
- ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "ml-1") })
273
- ]
274
- }
275
- ),
276
- /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: weekDays.map((d) => /* @__PURE__ */ jsx(
277
- "span",
278
- {
279
- className: clsx(
280
- typography.caption,
281
- "text-text-secondary-normal text-center",
282
- "w-10"
283
- ),
284
- children: d
285
- },
286
- d
287
- )) }),
288
- /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
289
- const day = i - emptyCells + 1;
290
- const date = month.date.with({ day: 1 }).add({
291
- days: i - emptyCells
292
- });
293
- const isInMonth = day > 0 && day <= month.days;
294
- const isToday = isInMonth && date.equals(today);
295
- const isSelected = isInMonth && (!pendingFrom && fromDate && date.equals(fromDate) || !pendingFrom && toDate && date.equals(toDate) || pendingFrom && date.equals(pendingFrom));
296
- const inRange = isInMonth && isInRange(date);
297
- const isDisabled = !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
298
- const hoverDateIsBeforePendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
299
- const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
300
- const isRangeStart = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
301
- const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
302
- return /* @__PURE__ */ jsx(
303
- DateCell,
304
- {
305
- id: id ? `${id}-date-${date.toString()}` : void 0,
306
- testid: testid ? `${testid}-date-${date.toString()}` : void 0,
307
- date,
308
- isInMonth: !!isInMonth,
309
- isToday: !!isToday,
310
- isSelected: !!isSelected,
311
- inRange: !!inRange,
312
- isDisabled: !!isDisabled,
313
- onClick: () => handleDayClick(date),
314
- onMouseEnter: () => setHoveredDate(date),
315
- onMouseLeave: () => setHoveredDate(void 0),
316
- isRangeStart: !!isRangeStart,
317
- isRangeEnd: !!isRangeEnd,
318
- isRangeDisabled: mode === "single" && disableRange,
319
- cellPadding: componentPadding
320
- },
321
- i
322
- );
323
- }) })
324
- ]
325
- }
326
- ),
327
- mode === "double" && idx === 0 && /* @__PURE__ */ jsx(
328
- "div",
329
- {
330
- className: clsx(
331
- "self-stretch bg-border-primary-normal rounded-base",
332
- // 1px width, full height, matches Figma divider
333
- "w-px"
334
- )
335
- }
336
- )
337
- ] }, month.name + month.year);
338
- })
339
- }
340
- )
341
- }
342
- );
343
- }
344
- var CalendarRange_default = CalendarRange;
345
-
346
- export {
347
- isWeekend,
348
- CalendarRange,
349
- CalendarRange_default
350
- };
@@ -1,12 +1,12 @@
1
1
  import {
2
2
  Label
3
3
  } from "./chunk-CJVTFYI4.js";
4
- import {
5
- Button
6
- } from "./chunk-SK742QNF.js";
7
4
  import {
8
5
  Icon
9
6
  } from "./chunk-UAPWR2KE.js";
7
+ import {
8
+ Button
9
+ } from "./chunk-SK742QNF.js";
10
10
  import {
11
11
  baseTransition,
12
12
  componentGap,
@@ -1,9 +1,9 @@
1
- import {
2
- Button
3
- } from "./chunk-SK742QNF.js";
4
1
  import {
5
2
  Icon
6
3
  } from "./chunk-UAPWR2KE.js";
4
+ import {
5
+ Button
6
+ } from "./chunk-SK742QNF.js";
7
7
  import {
8
8
  __objRest,
9
9
  __spreadProps,
@@ -1,12 +1,12 @@
1
1
  import {
2
2
  Heading2
3
3
  } from "./chunk-REOLWEZG.js";
4
- import {
5
- Button
6
- } from "./chunk-SK742QNF.js";
7
4
  import {
8
5
  Icon
9
6
  } from "./chunk-UAPWR2KE.js";
7
+ import {
8
+ Button
9
+ } from "./chunk-SK742QNF.js";
10
10
  import {
11
11
  layoutGroupGap,
12
12
  layoutPaddding
@@ -1,9 +1,9 @@
1
- import {
2
- Button
3
- } from "./chunk-SK742QNF.js";
4
1
  import {
5
2
  Icon
6
3
  } from "./chunk-UAPWR2KE.js";
4
+ import {
5
+ Button
6
+ } from "./chunk-SK742QNF.js";
7
7
  import {
8
8
  layoutGroupGap,
9
9
  layoutPaddding