@opengovsg/oui 0.0.9 → 0.0.10

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 (111) hide show
  1. package/dist/cjs/button/button.cjs +1 -1
  2. package/dist/cjs/calendar/agnostic-calendar-state-context.cjs +13 -0
  3. package/dist/cjs/calendar/calendar-bottom-content.cjs +51 -0
  4. package/dist/cjs/calendar/calendar-grid-header.cjs +28 -0
  5. package/dist/cjs/calendar/calendar-header.cjs +74 -0
  6. package/dist/cjs/calendar/calendar-month-day-selector.cjs +86 -0
  7. package/dist/cjs/calendar/calendar-style-context.cjs +0 -25
  8. package/dist/cjs/calendar/calendar.cjs +143 -4
  9. package/dist/cjs/calendar/hooks/index.cjs +11 -0
  10. package/dist/cjs/calendar/hooks/use-calendar-i18n.cjs +33 -0
  11. package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +41 -0
  12. package/dist/cjs/calendar/index.cjs +1 -1
  13. package/dist/cjs/combo-box/combo-box-fuzzy.cjs +3 -3
  14. package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
  15. package/dist/cjs/combo-box/combo-box.cjs +3 -2
  16. package/dist/cjs/index.cjs +38 -23
  17. package/dist/cjs/menu/index.cjs +15 -0
  18. package/dist/cjs/menu/menu.cjs +229 -0
  19. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs +19 -0
  20. package/dist/cjs/popover/index.cjs +8 -0
  21. package/dist/cjs/popover/popover.cjs +46 -0
  22. package/dist/cjs/range-calendar/index.cjs +10 -0
  23. package/dist/cjs/range-calendar/range-calendar.cjs +188 -0
  24. package/dist/cjs/select/select.cjs +4 -1
  25. package/dist/cjs/system/react-utils/context.cjs +3 -2
  26. package/dist/cjs/tag-field/tag-field-item.cjs +8 -3
  27. package/dist/cjs/tag-field/tag-field.cjs +2 -1
  28. package/dist/esm/button/button.js +1 -1
  29. package/dist/esm/calendar/agnostic-calendar-state-context.js +10 -0
  30. package/dist/esm/calendar/calendar-bottom-content.js +49 -0
  31. package/dist/esm/calendar/calendar-grid-header.js +26 -0
  32. package/dist/esm/calendar/calendar-header.js +72 -0
  33. package/dist/esm/calendar/calendar-month-day-selector.js +84 -0
  34. package/dist/esm/calendar/calendar-style-context.js +1 -25
  35. package/dist/esm/calendar/calendar.js +147 -9
  36. package/dist/esm/calendar/hooks/index.js +3 -0
  37. package/dist/esm/calendar/hooks/use-calendar-i18n.js +30 -0
  38. package/dist/esm/calendar/hooks/use-calendar-selectors.js +39 -0
  39. package/dist/esm/calendar/index.js +2 -2
  40. package/dist/esm/combo-box/combo-box-fuzzy.js +4 -4
  41. package/dist/esm/combo-box/combo-box-item.js +3 -3
  42. package/dist/esm/combo-box/combo-box.js +4 -3
  43. package/dist/esm/index.js +15 -12
  44. package/dist/esm/menu/index.js +2 -0
  45. package/dist/esm/menu/menu.js +220 -0
  46. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js +14 -0
  47. package/dist/esm/popover/index.js +2 -0
  48. package/dist/esm/popover/popover.js +44 -0
  49. package/dist/esm/range-calendar/index.js +2 -0
  50. package/dist/esm/range-calendar/range-calendar.js +184 -0
  51. package/dist/esm/select/select.js +5 -2
  52. package/dist/esm/system/react-utils/context.js +3 -2
  53. package/dist/esm/tag-field/tag-field-item.js +9 -4
  54. package/dist/esm/tag-field/tag-field.js +3 -2
  55. package/dist/types/calendar/agnostic-calendar-state-context.d.ts +3 -0
  56. package/dist/types/calendar/agnostic-calendar-state-context.d.ts.map +1 -0
  57. package/dist/types/calendar/calendar-bottom-content.d.ts +4 -0
  58. package/dist/types/calendar/calendar-bottom-content.d.ts.map +1 -0
  59. package/dist/types/calendar/calendar-grid-header.d.ts +2 -0
  60. package/dist/types/calendar/calendar-grid-header.d.ts.map +1 -0
  61. package/dist/types/calendar/calendar-header.d.ts +6 -0
  62. package/dist/types/calendar/calendar-header.d.ts.map +1 -0
  63. package/dist/types/calendar/calendar-month-day-selector.d.ts +2 -0
  64. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -0
  65. package/dist/types/calendar/calendar-style-context.d.ts +10 -1030
  66. package/dist/types/calendar/calendar-style-context.d.ts.map +1 -1
  67. package/dist/types/calendar/calendar.d.ts +5 -2
  68. package/dist/types/calendar/calendar.d.ts.map +1 -1
  69. package/dist/types/calendar/hooks/index.d.ts +3 -0
  70. package/dist/types/calendar/hooks/index.d.ts.map +1 -0
  71. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts +4 -0
  72. package/dist/types/calendar/hooks/use-calendar-i18n.d.ts.map +1 -0
  73. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts +13 -0
  74. package/dist/types/calendar/hooks/use-calendar-selectors.d.ts.map +1 -0
  75. package/dist/types/calendar/types.d.ts +5 -4
  76. package/dist/types/calendar/types.d.ts.map +1 -1
  77. package/dist/types/combo-box/combo-box-fuzzy.d.ts +2 -2
  78. package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
  79. package/dist/types/combo-box/combo-box-item.d.ts +3 -3
  80. package/dist/types/combo-box/combo-box-item.d.ts.map +1 -1
  81. package/dist/types/combo-box/combo-box.d.ts.map +1 -1
  82. package/dist/types/index.d.mts +3 -0
  83. package/dist/types/index.d.ts +3 -0
  84. package/dist/types/index.d.ts.map +1 -1
  85. package/dist/types/menu/index.d.ts +2 -0
  86. package/dist/types/menu/index.d.ts.map +1 -0
  87. package/dist/types/menu/menu.d.ts +38 -0
  88. package/dist/types/menu/menu.d.ts.map +1 -0
  89. package/dist/types/popover/index.d.ts +2 -0
  90. package/dist/types/popover/index.d.ts.map +1 -0
  91. package/dist/types/popover/popover.d.ts +21 -0
  92. package/dist/types/popover/popover.d.ts.map +1 -0
  93. package/dist/types/range-calendar/index.d.ts +2 -0
  94. package/dist/types/range-calendar/index.d.ts.map +1 -0
  95. package/dist/types/range-calendar/range-calendar.d.ts +69 -0
  96. package/dist/types/range-calendar/range-calendar.d.ts.map +1 -0
  97. package/dist/types/select/select.d.ts +4 -3
  98. package/dist/types/select/select.d.ts.map +1 -1
  99. package/dist/types/system/react-utils/context.d.ts +3 -2
  100. package/dist/types/system/react-utils/context.d.ts.map +1 -1
  101. package/dist/types/tag-field/tag-field-item.d.ts +2 -2
  102. package/dist/types/tag-field/tag-field-item.d.ts.map +1 -1
  103. package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
  104. package/dist/types/tag-field/tag-field.d.ts.map +1 -1
  105. package/dist/types/tag-field/types.d.ts +3 -3
  106. package/dist/types/tag-field/types.d.ts.map +1 -1
  107. package/package.json +5 -5
  108. package/dist/cjs/calendar/calendar-base.cjs +0 -347
  109. package/dist/esm/calendar/calendar-base.js +0 -343
  110. package/dist/types/calendar/calendar-base.d.ts +0 -14
  111. package/dist/types/calendar/calendar-base.d.ts.map +0 -1
package/dist/esm/index.js CHANGED
@@ -1,30 +1,33 @@
1
1
  "use strict";
2
- export { useControllableState } from './hooks/use-controllable-state.js';
3
- export { Button } from './button/button.js';
4
- export { GovtBanner } from './govt-banner/govt-banner.js';
5
2
  export { Ripple } from './ripple/ripple.js';
6
3
  export { useRipple } from './ripple/use-ripple.js';
7
4
  export { Spinner } from './spinner/spinner.js';
8
5
  export { useSpinner } from './spinner/use-spinner.js';
9
6
  export { Toggle } from './toggle/toggle.js';
10
7
  export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
11
- export { Input } from './input/input.js';
12
8
  export { TextField } from './text-field/text-field.js';
13
- export { Description, FieldError, FieldGroup, Label } from './field/field.js';
14
9
  export { TextArea } from './text-area/text-area.js';
15
10
  export { TextAreaField } from './text-area-field/text-area-field.js';
16
- export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
17
- export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
18
- export { ComboBoxItem } from './combo-box/combo-box-item.js';
19
- export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
20
- export { Banner } from './banner/banner.js';
21
11
  export { TagField } from './tag-field/tag-field.js';
22
12
  export { TagFieldItem } from './tag-field/tag-field-item.js';
23
13
  export { Select } from './select/select.js';
24
14
  export { SelectItem } from './select/select-item.js';
25
15
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
16
+ export { useControllableState } from './hooks/use-controllable-state.js';
17
+ export { Button } from './button/button.js';
18
+ export { GovtBanner } from './govt-banner/govt-banner.js';
19
+ export { Input } from './input/input.js';
20
+ export { Description, FieldError, FieldGroup, Label } from './field/field.js';
21
+ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
22
+ export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
23
+ export { ComboBoxItem } from './combo-box/combo-box-item.js';
24
+ export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
25
+ export { Banner } from './banner/banner.js';
26
26
  export { Badge } from './badge/badge.js';
27
27
  export { CalendarDate } from '@internationalized/date';
28
- export { Calendar } from './calendar/calendar.js';
29
- export { CalendarStyleContext, useCalendarStyleContext, useProvideCalendarStyles } from './calendar/calendar-style-context.js';
28
+ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
29
+ export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
30
30
  export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
31
+ export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
32
+ export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
33
+ export { Popover } from './popover/popover.js';
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu.js';
@@ -0,0 +1,220 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { forwardRef, useMemo, useCallback } from 'react';
5
+ import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
6
+ import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
7
+ import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
8
+ import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
9
+ import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
10
+ import { createContext } from '../system/react-utils/context.js';
11
+ import { Popover } from '../popover/popover.js';
12
+
13
+ const [MenuVariantContext, useMenuVariantContext] = createContext({
14
+ name: "MenuVariantContext",
15
+ strict: false
16
+ });
17
+ function MenuInner(originalProps, ref) {
18
+ [originalProps, ref] = useContextProps(
19
+ originalProps,
20
+ ref,
21
+ MenuVariantContext
22
+ );
23
+ const [props, variantProps] = mapPropsVariants(
24
+ originalProps,
25
+ menuStyles.variantKeys
26
+ );
27
+ const { className, classNames, placement, ...rest } = props;
28
+ const styles = menuStyles(variantProps);
29
+ return /* @__PURE__ */ jsx(Provider, { values: [[MenuVariantContext, variantProps]], children: /* @__PURE__ */ jsx(
30
+ Popover,
31
+ {
32
+ placement,
33
+ className: styles.popover({ className: classNames?.popover }),
34
+ children: /* @__PURE__ */ jsx(
35
+ Menu$1,
36
+ {
37
+ ...rest,
38
+ ref,
39
+ className: composeRenderProps(
40
+ className ?? classNames?.base,
41
+ (className2, renderProps) => styles.base({
42
+ className: className2,
43
+ ...renderProps
44
+ })
45
+ )
46
+ }
47
+ )
48
+ }
49
+ ) });
50
+ }
51
+ const Menu = forwardRefGeneric(MenuInner);
52
+ const MenuItem = forwardRef(function MenuItem2(originalProps, ref) {
53
+ [originalProps, ref] = useContextProps(
54
+ originalProps,
55
+ ref,
56
+ MenuVariantContext
57
+ );
58
+ const [
59
+ {
60
+ classNames,
61
+ className,
62
+ multipleSelectionIcon: multipleSelectionIconProp,
63
+ singleSelectionIcon: singleSelectionIconProp,
64
+ startContent,
65
+ endContent,
66
+ ...props
67
+ },
68
+ variantProps
69
+ ] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
70
+ const styles = menuItemStyles(variantProps);
71
+ const multipleSelectionIcon = useMemo(() => {
72
+ if (multipleSelectionIconProp !== void 0) {
73
+ return multipleSelectionIconProp;
74
+ }
75
+ return /* @__PURE__ */ jsx(
76
+ Check,
77
+ {
78
+ "aria-hidden": true,
79
+ className: styles.icon({ className: classNames?.icon })
80
+ }
81
+ );
82
+ }, [classNames?.icon, multipleSelectionIconProp, styles]);
83
+ const singleSelectionIcon = useMemo(() => {
84
+ if (singleSelectionIconProp !== void 0) {
85
+ return singleSelectionIconProp;
86
+ }
87
+ return /* @__PURE__ */ jsx(
88
+ Check,
89
+ {
90
+ "aria-hidden": true,
91
+ className: styles.icon({ className: classNames?.icon })
92
+ }
93
+ );
94
+ }, [classNames?.icon, singleSelectionIconProp, styles]);
95
+ const showIconContainer = useCallback(
96
+ (selectionMode) => {
97
+ switch (selectionMode) {
98
+ case "none":
99
+ return false;
100
+ case "multiple":
101
+ return !!multipleSelectionIcon;
102
+ case "single":
103
+ return !!singleSelectionIcon;
104
+ }
105
+ },
106
+ [multipleSelectionIcon, singleSelectionIcon]
107
+ );
108
+ const defaultTextValue = useMemo(() => {
109
+ if (props.textValue) {
110
+ return props.textValue;
111
+ }
112
+ if (typeof props.children === "string") {
113
+ return props.children;
114
+ }
115
+ return void 0;
116
+ }, [props.children, props.textValue]);
117
+ return /* @__PURE__ */ jsx(
118
+ MenuItem$1,
119
+ {
120
+ ref,
121
+ textValue: defaultTextValue,
122
+ ...props,
123
+ isDisabled: variantProps.isDisabled,
124
+ className: composeRenderProps(
125
+ className ?? classNames?.container,
126
+ (className2, renderProps) => styles.container({
127
+ className: className2,
128
+ ...renderProps
129
+ })
130
+ ),
131
+ children: composeRenderProps(
132
+ props.children,
133
+ (children, { selectionMode, isSelected, hasSubmenu }) => /* @__PURE__ */ jsxs(Fragment, { children: [
134
+ startContent,
135
+ /* @__PURE__ */ jsx(
136
+ "span",
137
+ {
138
+ className: styles.label({
139
+ className: classNames?.label
140
+ }),
141
+ children
142
+ }
143
+ ),
144
+ showIconContainer(selectionMode) && /* @__PURE__ */ jsxs(
145
+ "span",
146
+ {
147
+ className: styles.iconContainer({
148
+ className: classNames?.iconContainer
149
+ }),
150
+ children: [
151
+ isSelected && selectionMode === "multiple" && multipleSelectionIcon,
152
+ isSelected && selectionMode === "single" && singleSelectionIcon
153
+ ]
154
+ }
155
+ ),
156
+ endContent,
157
+ hasSubmenu && /* @__PURE__ */ jsx(
158
+ ChevronRight,
159
+ {
160
+ "aria-hidden": true,
161
+ className: styles.icon({
162
+ className: classNames?.icon
163
+ })
164
+ }
165
+ )
166
+ ] })
167
+ )
168
+ }
169
+ );
170
+ });
171
+ function MenuSeparator(props) {
172
+ return /* @__PURE__ */ jsx(
173
+ Separator,
174
+ {
175
+ ...props,
176
+ className: menuDividerStyles({
177
+ className: props.className
178
+ })
179
+ }
180
+ );
181
+ }
182
+ function MenuSectionInner(originalProps, ref) {
183
+ [originalProps, ref] = useContextProps(
184
+ originalProps,
185
+ ref,
186
+ MenuVariantContext
187
+ );
188
+ const [{ title, classNames, ...props }, variantProps] = mapPropsVariants(
189
+ originalProps,
190
+ menuSectionStyles.variantKeys
191
+ );
192
+ const styles = menuSectionStyles(variantProps);
193
+ return /* @__PURE__ */ jsxs(
194
+ MenuSection$1,
195
+ {
196
+ ref,
197
+ className: styles.base({
198
+ className: props.className ?? classNames?.base
199
+ }),
200
+ ...props,
201
+ children: [
202
+ title && /* @__PURE__ */ jsx(
203
+ Header,
204
+ {
205
+ className: styles.header({
206
+ className: classNames?.header
207
+ }),
208
+ children: title
209
+ }
210
+ ),
211
+ /* @__PURE__ */ jsx(Collection, { items: props.items, children: props.children })
212
+ ]
213
+ }
214
+ );
215
+ }
216
+ const MenuSection = forwardRefGeneric(MenuSectionInner);
217
+ const MenuTrigger = MenuTrigger$1;
218
+ const SubmenuTrigger = SubmenuTrigger$1;
219
+
220
+ export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext };
@@ -0,0 +1,14 @@
1
+ import createLucideIcon from '../createLucideIcon.js';
2
+
3
+ /**
4
+ * @license lucide-react v0.475.0 - ISC
5
+ *
6
+ * This source code is licensed under the ISC license.
7
+ * See the LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+
11
+ const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
12
+ const Check = createLucideIcon("Check", __iconNode);
13
+
14
+ export { __iconNode, Check as default };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ export { Popover } from './popover.js';
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { useSlottedContext, PopoverContext, Popover as Popover$1, composeRenderProps, OverlayArrow } from 'react-aria-components';
5
+ import { popoverArrowStyles, popoverStyles } from '@opengovsg/oui-theme';
6
+
7
+ const Popover = ({
8
+ children,
9
+ showArrow,
10
+ className,
11
+ classNames,
12
+ ...props
13
+ }) => {
14
+ const popoverContext = useSlottedContext(PopoverContext);
15
+ const isSubmenu = popoverContext?.trigger === "SubmenuTrigger";
16
+ let offset = showArrow ? 12 : 8;
17
+ offset = isSubmenu ? offset - 6 : offset;
18
+ return /* @__PURE__ */ jsxs(
19
+ Popover$1,
20
+ {
21
+ offset,
22
+ ...props,
23
+ className: composeRenderProps(
24
+ className ?? classNames?.base,
25
+ (className2, renderProps) => popoverStyles({ ...renderProps, className: className2 })
26
+ ),
27
+ children: [
28
+ showArrow && /* @__PURE__ */ jsx(OverlayArrow, { className: "group", children: /* @__PURE__ */ jsx(
29
+ "svg",
30
+ {
31
+ width: 12,
32
+ height: 12,
33
+ viewBox: "0 0 12 12",
34
+ className: popoverArrowStyles({ className: classNames?.arrow }),
35
+ children: /* @__PURE__ */ jsx("path", { d: "M0 0 L6 6 L12 0" })
36
+ }
37
+ ) }),
38
+ children
39
+ ]
40
+ }
41
+ );
42
+ };
43
+
44
+ export { Popover };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar.js';
@@ -0,0 +1,184 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { forwardRef, useMemo, useContext } from 'react';
5
+ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internationalized/date';
6
+ import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
7
+ import { useDeepCompareMemo } from 'use-deep-compare';
8
+ import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
9
+ import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
10
+ import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
11
+ import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
12
+ import { CalendarHeader } from '../calendar/calendar-header.js';
13
+ import { mapPropsVariants } from '../system/utils.js';
14
+ import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
15
+
16
+ const RangeCalendar = forwardRef(function RangeCalendar2(originalProps, ref) {
17
+ const [props, variantProps] = mapPropsVariants(
18
+ originalProps,
19
+ calendarStyles.variantKeys
20
+ );
21
+ const {
22
+ className,
23
+ classNames,
24
+ weekdayStyle = "narrow",
25
+ minValue = new CalendarDate(1900, 0, 1),
26
+ maxValue = new CalendarDate(2100, 12, 31),
27
+ bottomContent,
28
+ showTodayButton = true,
29
+ errorMessage,
30
+ ...restProps
31
+ } = props;
32
+ const slots = useDeepCompareMemo(
33
+ () => calendarStyles({ ...variantProps, isRange: true }),
34
+ [variantProps]
35
+ );
36
+ const context = useMemo(
37
+ () => ({
38
+ slots,
39
+ classNames,
40
+ className,
41
+ size: variantProps.size ?? calendarStyles.defaultVariants.size
42
+ }),
43
+ [className, classNames, slots, variantProps.size]
44
+ );
45
+ const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
46
+ const dateToHighlight = useMemo(() => {
47
+ if (props.defaultFocusedValue !== void 0) {
48
+ return props.defaultFocusedValue;
49
+ }
50
+ return today(getLocalTimeZone());
51
+ }, [props.defaultFocusedValue]);
52
+ return /* @__PURE__ */ jsxs(
53
+ RangeCalendar$1,
54
+ {
55
+ ...restProps,
56
+ ref,
57
+ minValue,
58
+ maxValue,
59
+ className: composeRenderProps(
60
+ className,
61
+ (className2, renderProps) => slots.base({
62
+ className: cn(classNames?.base, className2),
63
+ ...renderProps
64
+ })
65
+ ),
66
+ children: [
67
+ /* @__PURE__ */ jsx(Provider, { values: [[CalendarStyleContext, context]], children: /* @__PURE__ */ jsxs(RangeCalendarStateWrapper, { children: [
68
+ /* @__PURE__ */ jsx(
69
+ "div",
70
+ {
71
+ className: slots.gridWrapper({
72
+ className: classNames?.gridWrapper
73
+ }),
74
+ children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxs(
75
+ "div",
76
+ {
77
+ className: slots.calendar({ className: classNames?.calendar }),
78
+ children: [
79
+ /* @__PURE__ */ jsx(CalendarHeader, { offsetMonths: index }),
80
+ /* @__PURE__ */ jsxs(
81
+ CalendarGrid,
82
+ {
83
+ className: slots.grid({ className: classNames?.grid }),
84
+ weekdayStyle,
85
+ offset: { months: index },
86
+ children: [
87
+ /* @__PURE__ */ jsx(CalendarGridHeader, {}),
88
+ /* @__PURE__ */ jsx(
89
+ CalendarGridBody,
90
+ {
91
+ className: slots.gridBody({
92
+ className: classNames?.gridBody
93
+ }),
94
+ children: (date) => /* @__PURE__ */ jsx(
95
+ RangeCalendarCell,
96
+ {
97
+ firstDayOfWeek: props.firstDayOfWeek,
98
+ dateToHighlight,
99
+ date,
100
+ isMultipleMonths: numberOfVisibleMonths >= 2
101
+ }
102
+ )
103
+ }
104
+ )
105
+ ]
106
+ }
107
+ )
108
+ ]
109
+ },
110
+ index
111
+ ))
112
+ }
113
+ ),
114
+ /* @__PURE__ */ jsx(
115
+ CalendarBottomContent,
116
+ {
117
+ bottomContent,
118
+ showTodayButton
119
+ }
120
+ )
121
+ ] }) }),
122
+ errorMessage && /* @__PURE__ */ jsx(
123
+ Text,
124
+ {
125
+ className: slots.errorMessage({
126
+ className: classNames?.errorMessage
127
+ }),
128
+ slot: "errorMessage",
129
+ children: errorMessage
130
+ }
131
+ )
132
+ ]
133
+ }
134
+ );
135
+ });
136
+ const RangeCalendarStateWrapper = ({
137
+ children
138
+ }) => {
139
+ const state = useContext(RangeCalendarStateContext);
140
+ return /* @__PURE__ */ jsx(Provider, { values: [[AgnosticCalendarStateContext, state]], children });
141
+ };
142
+ const RangeCalendarCell = ({
143
+ date,
144
+ isMultipleMonths,
145
+ dateToHighlight,
146
+ firstDayOfWeek
147
+ }) => {
148
+ const { classNames, slots } = useCalendarStyleContext();
149
+ const state = useContext(AgnosticCalendarStateContext);
150
+ const { locale } = useLocale();
151
+ const dataAttributes = useMemo(() => {
152
+ const isDateHighlighted = dateToHighlight ? date.compare(dateToHighlight) === 0 : false;
153
+ const isSelected = state.isSelected(date);
154
+ const isDisabled = state.isCellDisabled(date);
155
+ const isInvalid = state.isInvalid(date);
156
+ const isFirstSelectedAfterDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date.subtract({ days: 1 }));
157
+ const isLastSelectedBeforeDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date.add({ days: 1 }));
158
+ const dayOfWeek = getDayOfWeek(date, locale, firstDayOfWeek);
159
+ const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || date.day === 1);
160
+ const isRangeEnd = isSelected && (isLastSelectedBeforeDisabled || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
161
+ return {
162
+ "data-highlighted": dataAttr(isDateHighlighted),
163
+ "data-range-end": dataAttr(isRangeEnd),
164
+ "data-range-start": dataAttr(isRangeStart)
165
+ };
166
+ }, [date, dateToHighlight, firstDayOfWeek, locale, state]);
167
+ return /* @__PURE__ */ jsx(
168
+ CalendarCell,
169
+ {
170
+ className: composeRenderProps(
171
+ classNames?.cell,
172
+ (className, renderProps) => slots.cell({
173
+ className,
174
+ isMultipleMonths,
175
+ ...renderProps
176
+ })
177
+ ),
178
+ ...dataAttributes,
179
+ date
180
+ }
181
+ );
182
+ };
183
+
184
+ export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper };
@@ -2,12 +2,13 @@
2
2
  "use client";
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
- import { Provider, Select as Select$1, SelectValue, Popover, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
5
+ import { Provider, Select as Select$1, SelectValue, Virtualizer, ListLayout, ListBox } from 'react-aria-components';
6
6
  import { selectStyles, composeRenderProps } from '@opengovsg/oui-theme';
7
7
  import { mapPropsVariants } from '../system/utils.js';
8
8
  import { SelectVariantContext } from './select-variant-context.js';
9
- import { Label, Description } from '../field/field.js';
9
+ import { Label, Description, FieldError } from '../field/field.js';
10
10
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
11
+ import { Popover } from '../popover/popover.js';
11
12
  import { Button } from '../button/button.js';
12
13
 
13
14
  const calculateEstimatedRowHeight = (size) => {
@@ -24,6 +25,7 @@ function Select({
24
25
  label,
25
26
  description,
26
27
  classNames,
28
+ errorMessage,
27
29
  ...originalProps
28
30
  }) {
29
31
  const [_props, variantProps] = mapPropsVariants(
@@ -88,6 +90,7 @@ function Select({
88
90
  children: description
89
91
  }
90
92
  ),
93
+ /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage }),
91
94
  /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(Virtualizer, { layout: ListLayout, layoutOptions, children: /* @__PURE__ */ jsx(
92
95
  ListBox,
93
96
  {
@@ -5,9 +5,10 @@ function createContext(options = {}) {
5
5
  const {
6
6
  strict = true,
7
7
  errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
8
- name
8
+ name,
9
+ defaultValue
9
10
  } = options;
10
- const Context = createContext$1(void 0);
11
+ const Context = createContext$1(defaultValue);
11
12
  Context.displayName = name;
12
13
  function useContext$1() {
13
14
  const context = useContext(Context);
@@ -2,21 +2,26 @@
2
2
  "use client";
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
  import { useContext } from 'react';
5
- import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
5
+ import { listBoxItemStyles, dataAttr } from '@opengovsg/oui-theme';
6
6
  import { forwardRefGeneric } from '../system/utils.js';
7
7
  import { TagFieldStateContext } from './tag-field-state-context.js';
8
8
 
9
9
  const TagFieldItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
10
10
  const { itemToText, size } = useContext(TagFieldStateContext);
11
- const styles = tagFieldItemStyles({ size });
11
+ const styles = listBoxItemStyles({ size });
12
12
  return /* @__PURE__ */ jsx(
13
13
  "li",
14
14
  {
15
15
  ref,
16
16
  ...itemProps,
17
- className: styles.container({ className: classNames?.container }),
17
+ className: styles.container({
18
+ className: classNames?.container,
19
+ isFocused: isHighlighted,
20
+ isDisabled: itemProps["aria-disabled"]
21
+ }),
18
22
  "data-rac": true,
19
- "data-hovered": dataAttr(isHighlighted),
23
+ "data-focused": dataAttr(isHighlighted),
24
+ "data-disabled": dataAttr(itemProps["aria-disabled"]),
20
25
  children: /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
21
26
  }
22
27
  );
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { createElement } from 'react';
5
- import { composeRenderProps, Popover } from 'react-aria-components';
5
+ import { composeRenderProps } from 'react-aria-components';
6
6
  import { tagFieldStyles } from '@opengovsg/oui-theme';
7
7
  import { TagFieldItem } from './tag-field-item.js';
8
8
  import { TagFieldList } from './tag-field-list.js';
@@ -12,6 +12,7 @@ import { TagFieldTrigger } from './tag-field-trigger.js';
12
12
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
13
13
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
14
14
  import { Input } from '../input/input.js';
15
+ import { Popover } from '../popover/popover.js';
15
16
 
16
17
  function TagField({
17
18
  classNames,
@@ -91,7 +92,7 @@ function TagField({
91
92
  }
92
93
  )
93
94
  ] }),
94
- /* @__PURE__ */ jsx(Popover, { children: /* @__PURE__ */ jsx(
95
+ /* @__PURE__ */ jsx(Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsx(
95
96
  TagFieldList,
96
97
  {
97
98
  className: styles.list({ className: classNames?.list }),
@@ -0,0 +1,3 @@
1
+ import type { CalendarState, RangeCalendarState } from "react-stately";
2
+ export declare const AgnosticCalendarStateContext: import("react").Context<CalendarState | RangeCalendarState>, useAgnosticCalendarStateContext: () => CalendarState | RangeCalendarState;
3
+ //# sourceMappingURL=agnostic-calendar-state-context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"agnostic-calendar-state-context.d.ts","sourceRoot":"","sources":["../../../src/calendar/agnostic-calendar-state-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAItE,eAAO,MAAO,4BAA4B,+DAAE,+BAA+B,0CAIvE,CAAA"}
@@ -0,0 +1,4 @@
1
+ import type { CalendarDate } from "@internationalized/date";
2
+ import type { CalendarProps } from "./types";
3
+ export declare const CalendarBottomContent: <T extends CalendarDate>({ bottomContent, showTodayButton, }: Pick<CalendarProps<T>, "bottomContent" | "showTodayButton">) => string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
4
+ //# sourceMappingURL=calendar-bottom-content.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calendar-bottom-content.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-bottom-content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAI3D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAM5C,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,YAAY,uCAGzD,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,GAAG,iBAAiB,CAAC,6VAkC7D,CAAA"}
@@ -0,0 +1,2 @@
1
+ export declare function CalendarGridHeader(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=calendar-grid-header.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calendar-grid-header.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-grid-header.tsx"],"names":[],"mappings":"AASA,wBAAgB,kBAAkB,4CAiBjC"}
@@ -0,0 +1,6 @@
1
+ interface CalendarHeaderProps {
2
+ offsetMonths?: number;
3
+ }
4
+ export declare function CalendarHeader({ offsetMonths }: CalendarHeaderProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
6
+ //# sourceMappingURL=calendar-header.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"calendar-header.d.ts","sourceRoot":"","sources":["../../../src/calendar/calendar-header.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,cAAc,CAAC,EAAE,YAAgB,EAAE,EAAE,mBAAmB,2CA8DvE"}
@@ -0,0 +1,2 @@
1
+ export declare const CalendarMonthDaySelector: () => import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=calendar-month-day-selector.d.ts.map