@opengovsg/oui 0.0.0-snapshot-20250511111650 → 0.0.0-snapshot-20250808095237

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 (63) hide show
  1. package/dist/cjs/button/button.cjs +4 -2
  2. package/dist/cjs/calendar/calendar-month-day-selector.cjs +2 -2
  3. package/dist/cjs/calendar/calendar.cjs +1 -1
  4. package/dist/cjs/combo-box/combo-box.cjs +2 -2
  5. package/dist/cjs/date-field/date-field.cjs +81 -0
  6. package/dist/cjs/date-field/index.cjs +9 -0
  7. package/dist/cjs/date-picker/date-picker.cjs +85 -0
  8. package/dist/cjs/date-picker/index.cjs +8 -0
  9. package/dist/cjs/date-range-picker/date-range-picker.cjs +128 -0
  10. package/dist/cjs/date-range-picker/index.cjs +8 -0
  11. package/dist/cjs/govt-banner/govt-banner.cjs +1 -1
  12. package/dist/cjs/index.cjs +20 -13
  13. package/dist/cjs/menu/menu.cjs +1 -1
  14. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs +24 -0
  15. package/dist/cjs/range-calendar/range-calendar.cjs +2 -2
  16. package/dist/cjs/select/select.cjs +2 -2
  17. package/dist/cjs/tag-field/tag-field.cjs +3 -3
  18. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  19. package/dist/cjs/text-field/text-field.cjs +1 -1
  20. package/dist/esm/button/button.js +4 -2
  21. package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
  22. package/dist/esm/calendar/calendar.js +2 -2
  23. package/dist/esm/combo-box/combo-box.js +2 -2
  24. package/dist/esm/date-field/date-field.js +78 -0
  25. package/dist/esm/date-field/index.js +2 -0
  26. package/dist/esm/date-picker/date-picker.js +83 -0
  27. package/dist/esm/date-picker/index.js +2 -0
  28. package/dist/esm/date-range-picker/date-range-picker.js +126 -0
  29. package/dist/esm/date-range-picker/index.js +2 -0
  30. package/dist/esm/govt-banner/govt-banner.js +1 -1
  31. package/dist/esm/index.js +8 -5
  32. package/dist/esm/menu/menu.js +1 -1
  33. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js +19 -0
  34. package/dist/esm/range-calendar/range-calendar.js +4 -4
  35. package/dist/esm/select/select.js +2 -2
  36. package/dist/esm/tag-field/tag-field.js +3 -3
  37. package/dist/esm/text-area-field/text-area-field.js +1 -1
  38. package/dist/esm/text-field/text-field.js +1 -1
  39. package/dist/types/button/button.d.ts.map +1 -1
  40. package/dist/types/calendar/calendar.d.ts +2 -3
  41. package/dist/types/calendar/calendar.d.ts.map +1 -1
  42. package/dist/types/calendar/types.d.ts +2 -13
  43. package/dist/types/calendar/types.d.ts.map +1 -1
  44. package/dist/types/date-field/date-field.d.ts +19 -0
  45. package/dist/types/date-field/date-field.d.ts.map +1 -0
  46. package/dist/types/date-field/index.d.ts +2 -0
  47. package/dist/types/date-field/index.d.ts.map +1 -0
  48. package/dist/types/date-picker/date-picker.d.ts +20 -0
  49. package/dist/types/date-picker/date-picker.d.ts.map +1 -0
  50. package/dist/types/date-picker/index.d.ts +2 -0
  51. package/dist/types/date-picker/index.d.ts.map +1 -0
  52. package/dist/types/date-range-picker/date-range-picker.d.ts +19 -0
  53. package/dist/types/date-range-picker/date-range-picker.d.ts.map +1 -0
  54. package/dist/types/date-range-picker/index.d.ts +2 -0
  55. package/dist/types/date-range-picker/index.d.ts.map +1 -0
  56. package/dist/types/index.d.mts +3 -0
  57. package/dist/types/index.d.ts +3 -0
  58. package/dist/types/index.d.ts.map +1 -1
  59. package/dist/types/menu/menu.d.ts +1 -1
  60. package/dist/types/menu/menu.d.ts.map +1 -1
  61. package/dist/types/range-calendar/range-calendar.d.ts +2 -13
  62. package/dist/types/range-calendar/range-calendar.d.ts.map +1 -1
  63. package/package.json +26 -26
@@ -7,9 +7,9 @@ var react = require('react');
7
7
  var utils = require('@react-aria/utils');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
- var ripple = require('../ripple/ripple.cjs');
11
10
  var useRipple = require('../ripple/use-ripple.cjs');
12
11
  var spinner = require('../spinner/spinner.cjs');
12
+ var ripple = require('../ripple/ripple.cjs');
13
13
 
14
14
  const Button = react.forwardRef(
15
15
  ({
@@ -29,6 +29,7 @@ const Button = react.forwardRef(
29
29
  isPending,
30
30
  spinner: spinnerProp,
31
31
  isIconOnly,
32
+ isAttached,
32
33
  ...props
33
34
  }, ref) => {
34
35
  const {
@@ -62,7 +63,8 @@ const Button = react.forwardRef(
62
63
  layout,
63
64
  color,
64
65
  radius,
65
- isIconOnly
66
+ isIconOnly,
67
+ isAttached
66
68
  })
67
69
  ),
68
70
  isPending,
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var date = require('@internationalized/date');
8
8
  var reactAriaComponents = require('react-aria-components');
9
- var select = require('../select/select.cjs');
10
- var selectItem = require('../select/select-item.cjs');
11
9
  var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
12
10
  var calendarStyleContext = require('./calendar-style-context.cjs');
13
11
  var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
12
+ var select = require('../select/select.cjs');
13
+ var selectItem = require('../select/select-item.cjs');
14
14
  var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
15
15
 
16
16
  const CalendarMonthDaySelector = () => {
@@ -15,7 +15,7 @@ var calendarGridHeader = require('./calendar-grid-header.cjs');
15
15
  var calendarHeader = require('./calendar-header.cjs');
16
16
  var calendarStyleContext = require('./calendar-style-context.cjs');
17
17
 
18
- const Calendar = utils.forwardRef(function Calendar2(originalProps, ref) {
18
+ const Calendar = utils.forwardRefGeneric(function Calendar2(originalProps, ref) {
19
19
  const [props, variantProps] = utils.mapPropsVariants(
20
20
  originalProps,
21
21
  ouiTheme.calendarStyles.variantKeys
@@ -7,13 +7,13 @@ var react = require('react');
7
7
  var reactAria = require('react-aria');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
- var field = require('../field/field.cjs');
11
- var popover = require('../popover/popover.cjs');
12
10
  var utils = require('../system/utils.cjs');
13
11
  var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
12
+ var field = require('../field/field.cjs');
14
13
  var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
15
14
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
16
15
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
16
+ var popover = require('../popover/popover.cjs');
17
17
 
18
18
  const calculateEstimatedRowHeight = (size) => {
19
19
  switch (size) {
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
+ var utils = require('../system/utils.cjs');
10
+ var field = require('../field/field.cjs');
11
+
12
+ function DateField(originalProps) {
13
+ const [
14
+ { label, description, errorMessage, className, classNames, ...props },
15
+ variantProps
16
+ ] = react.useMemo(
17
+ () => utils.mapPropsVariants(originalProps, ouiTheme.dateFieldStyles.variantKeys),
18
+ [originalProps]
19
+ );
20
+ const styles = ouiTheme.dateFieldStyles({
21
+ className: classNames?.input,
22
+ ...variantProps
23
+ });
24
+ return /* @__PURE__ */ jsxRuntime.jsxs(
25
+ reactAriaComponents.DateField,
26
+ {
27
+ ...props,
28
+ isDisabled: variantProps.isDisabled,
29
+ className: ouiTheme.composeTailwindRenderProps(
30
+ className ?? classNames?.base,
31
+ "flex flex-col gap-2"
32
+ ),
33
+ children: [
34
+ label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
35
+ /* @__PURE__ */ jsxRuntime.jsx(DateInput, { size: variantProps.size, className: styles }),
36
+ description && /* @__PURE__ */ jsxRuntime.jsx(
37
+ field.Description,
38
+ {
39
+ size: variantProps.size,
40
+ className: classNames?.description,
41
+ children: description
42
+ }
43
+ ),
44
+ /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, className: classNames?.error, children: errorMessage })
45
+ ]
46
+ }
47
+ );
48
+ }
49
+ function DateInput(originalProps) {
50
+ const [{ className, classNames, ...props }, variantProps] = react.useMemo(
51
+ () => utils.mapPropsVariants(originalProps, ouiTheme.dateInputStyles.variantKeys),
52
+ [originalProps]
53
+ );
54
+ const styles = ouiTheme.dateInputStyles(variantProps);
55
+ return /* @__PURE__ */ jsxRuntime.jsx(
56
+ reactAriaComponents.DateInput,
57
+ {
58
+ className: ouiTheme.composeTailwindRenderProps(
59
+ className ?? classNames?.base,
60
+ styles.base()
61
+ ),
62
+ ...props,
63
+ children: (segment) => /* @__PURE__ */ jsxRuntime.jsx(
64
+ reactAriaComponents.DateSegment,
65
+ {
66
+ segment,
67
+ className: ouiTheme.composeRenderProps(
68
+ classNames?.segment,
69
+ (className2, renderProps) => styles.segment({
70
+ ...renderProps,
71
+ className: className2
72
+ })
73
+ )
74
+ }
75
+ )
76
+ }
77
+ );
78
+ }
79
+
80
+ exports.DateField = DateField;
81
+ exports.DateInput = DateInput;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var dateField = require('./date-field.cjs');
5
+
6
+
7
+
8
+ exports.DateField = dateField.DateField;
9
+ exports.DateInput = dateField.DateInput;
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
+ var utils = require('../system/utils.cjs');
10
+ var dateField = require('../date-field/date-field.cjs');
11
+ var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
12
+ var calendar$1 = require('../calendar/calendar.cjs');
13
+ var field = require('../field/field.cjs');
14
+ var button = require('../button/button.cjs');
15
+ var popover = require('../popover/popover.cjs');
16
+
17
+ function DatePicker(originalProps) {
18
+ const [
19
+ {
20
+ label,
21
+ description,
22
+ errorMessage,
23
+ classNames,
24
+ className,
25
+ calendarProps,
26
+ popoverProps,
27
+ calendarButtonProps,
28
+ ...props
29
+ },
30
+ variantProps
31
+ ] = react.useMemo(
32
+ () => utils.mapPropsVariants(originalProps, ouiTheme.datePickerStyles.variantKeys),
33
+ [originalProps]
34
+ );
35
+ const styles = ouiTheme.datePickerStyles(variantProps);
36
+ return /* @__PURE__ */ jsxRuntime.jsxs(
37
+ reactAriaComponents.DatePicker,
38
+ {
39
+ ...props,
40
+ className: ouiTheme.composeTailwindRenderProps(
41
+ className ?? classNames?.base,
42
+ styles.base()
43
+ ),
44
+ children: [
45
+ label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, children: label }),
46
+ /* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
47
+ /* @__PURE__ */ jsxRuntime.jsx(
48
+ dateField.DateInput,
49
+ {
50
+ size: variantProps.size,
51
+ className: styles.input({ className: classNames?.input })
52
+ }
53
+ ),
54
+ /* @__PURE__ */ jsxRuntime.jsx(
55
+ button.Button,
56
+ {
57
+ isIconOnly: true,
58
+ isAttached: true,
59
+ variant: "clear",
60
+ color: "sub",
61
+ size: variantProps.size,
62
+ className: styles.calendarButton({
63
+ className: classNames?.calendarButton
64
+ }),
65
+ ...calendarButtonProps,
66
+ children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
67
+ }
68
+ )
69
+ ] }),
70
+ /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
71
+ calendar$1.Calendar,
72
+ {
73
+ size: variantProps.size === "xs" ? "sm" : variantProps.size,
74
+ classNames: classNames?.calendar,
75
+ ...calendarProps
76
+ }
77
+ ) }) }),
78
+ description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
79
+ /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage })
80
+ ]
81
+ }
82
+ );
83
+ }
84
+
85
+ exports.DatePicker = DatePicker;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var datePicker = require('./date-picker.cjs');
5
+
6
+
7
+
8
+ exports.DatePicker = datePicker.DatePicker;
@@ -0,0 +1,128 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var date = require('@internationalized/date');
8
+ var reactAriaComponents = require('react-aria-components');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
+ var utils = require('../system/utils.cjs');
11
+ var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
12
+ var rangeCalendar = require('../range-calendar/range-calendar.cjs');
13
+ var field = require('../field/field.cjs');
14
+ var dateField = require('../date-field/date-field.cjs');
15
+ var button = require('../button/button.cjs');
16
+ var popover = require('../popover/popover.cjs');
17
+
18
+ function DateRangePicker(originalProps) {
19
+ const [
20
+ {
21
+ label,
22
+ description,
23
+ errorMessage,
24
+ classNames,
25
+ className,
26
+ calendarProps,
27
+ popoverProps,
28
+ calendarButtonProps,
29
+ minValue: minValueProp,
30
+ maxValue: maxValueProp,
31
+ ...props
32
+ },
33
+ variantProps
34
+ ] = react.useMemo(
35
+ () => utils.mapPropsVariants(originalProps, ouiTheme.dateRangePickerStyles.variantKeys),
36
+ [originalProps]
37
+ );
38
+ const styles = ouiTheme.dateRangePickerStyles(variantProps);
39
+ const { minValue, maxValue } = react.useMemo(() => {
40
+ return {
41
+ minValue: minValueProp ?? new date.CalendarDate(1900, 0, 1),
42
+ // Default to 1 Jan 1900
43
+ maxValue: maxValueProp ?? new date.CalendarDate(2100, 12, 31)
44
+ // Default to 31 Dec 2100
45
+ };
46
+ }, [maxValueProp, minValueProp]);
47
+ return /* @__PURE__ */ jsxRuntime.jsxs(
48
+ reactAriaComponents.DateRangePicker,
49
+ {
50
+ ...props,
51
+ minValue,
52
+ maxValue,
53
+ className: ouiTheme.composeTailwindRenderProps(
54
+ className ?? classNames?.base,
55
+ styles.base()
56
+ ),
57
+ children: [
58
+ label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { children: label }),
59
+ /* @__PURE__ */ jsxRuntime.jsxs(field.FieldGroup, { className: styles.group({ className: classNames?.group }), children: [
60
+ /* @__PURE__ */ jsxRuntime.jsxs(
61
+ "div",
62
+ {
63
+ className: styles.dateWrapper({ className: classNames?.dateWrapper }),
64
+ children: [
65
+ /* @__PURE__ */ jsxRuntime.jsx(
66
+ dateField.DateInput,
67
+ {
68
+ slot: "start",
69
+ size: variantProps.size,
70
+ className: styles.startInput({ className: classNames?.startInput })
71
+ }
72
+ ),
73
+ /* @__PURE__ */ jsxRuntime.jsx(
74
+ "span",
75
+ {
76
+ "aria-hidden": "true",
77
+ className: styles.connector({
78
+ className: classNames?.connector
79
+ }),
80
+ children: "\u2013"
81
+ }
82
+ ),
83
+ /* @__PURE__ */ jsxRuntime.jsx(
84
+ dateField.DateInput,
85
+ {
86
+ slot: "end",
87
+ size: variantProps.size,
88
+ className: styles.endInput({ className: classNames?.endInput })
89
+ }
90
+ )
91
+ ]
92
+ }
93
+ ),
94
+ /* @__PURE__ */ jsxRuntime.jsx(
95
+ button.Button,
96
+ {
97
+ isIconOnly: true,
98
+ isAttached: true,
99
+ variant: "clear",
100
+ color: "sub",
101
+ size: variantProps.size,
102
+ className: styles.calendarButton({
103
+ className: classNames?.calendarButton
104
+ }),
105
+ ...calendarButtonProps,
106
+ children: /* @__PURE__ */ jsxRuntime.jsx(calendar.default, { "aria-hidden": true })
107
+ }
108
+ )
109
+ ] }),
110
+ description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size: variantProps.size, children: description }),
111
+ /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size: variantProps.size, children: errorMessage }),
112
+ /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsxRuntime.jsx(
113
+ rangeCalendar.RangeCalendar,
114
+ {
115
+ visibleDuration: { months: 2 },
116
+ size: variantProps.size === "xs" ? "sm" : variantProps.size,
117
+ classNames: classNames?.calendar,
118
+ minValue,
119
+ maxValue,
120
+ ...calendarProps
121
+ }
122
+ ) }) })
123
+ ]
124
+ }
125
+ );
126
+ }
127
+
128
+ exports.DateRangePicker = DateRangePicker;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var dateRangePicker = require('./date-range-picker.cjs');
5
+
6
+
7
+
8
+ exports.DateRangePicker = dateRangePicker.DateRangePicker;
@@ -169,7 +169,7 @@ function GovtBanner({
169
169
  ),
170
170
  /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
171
171
  formatMessage("officialLinkContent", {
172
- boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content })
172
+ boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content }, content)
173
173
  }),
174
174
  " ",
175
175
  /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1,7 +1,9 @@
1
1
  "use strict";
2
2
  'use strict';
3
3
 
4
+ var textArea = require('./text-area/text-area.cjs');
4
5
  var useControllableState = require('./hooks/use-controllable-state.cjs');
6
+ var button = require('./button/button.cjs');
5
7
  var govtBanner = require('./govt-banner/govt-banner.cjs');
6
8
  var ripple = require('./ripple/ripple.cjs');
7
9
  var useRipple = require('./ripple/use-ripple.cjs');
@@ -12,32 +14,35 @@ var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
12
14
  var input = require('./input/input.cjs');
13
15
  var textField = require('./text-field/text-field.cjs');
14
16
  var field = require('./field/field.cjs');
15
- var textArea = require('./text-area/text-area.cjs');
16
17
  var textAreaField = require('./text-area-field/text-area-field.cjs');
17
18
  var comboBox = require('./combo-box/combo-box.cjs');
18
19
  var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
19
20
  var comboBoxItem = require('./combo-box/combo-box-item.cjs');
20
21
  var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
22
+ var banner = require('./banner/banner.cjs');
21
23
  var tagField = require('./tag-field/tag-field.cjs');
22
24
  var tagFieldItem = require('./tag-field/tag-field-item.cjs');
23
25
  var select = require('./select/select.cjs');
24
26
  var selectItem = require('./select/select-item.cjs');
25
27
  var selectVariantContext = require('./select/select-variant-context.cjs');
28
+ var badge = require('./badge/badge.cjs');
29
+ var date = require('@internationalized/date');
26
30
  var calendar = require('./calendar/calendar.cjs');
27
31
  var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
28
32
  var utils = require('./calendar/utils.cjs');
29
- var date = require('@internationalized/date');
30
33
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
31
34
  var menu = require('./menu/menu.cjs');
32
35
  var popover = require('./popover/popover.cjs');
33
36
  var tabs = require('./tabs/tabs.cjs');
34
- var button = require('./button/button.cjs');
35
- var banner = require('./banner/banner.cjs');
36
- var badge = require('./badge/badge.cjs');
37
+ var dateField = require('./date-field/date-field.cjs');
38
+ var datePicker = require('./date-picker/date-picker.cjs');
39
+ var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
37
40
 
38
41
 
39
42
 
43
+ exports.TextArea = textArea.TextArea;
40
44
  exports.useControllableState = useControllableState.useControllableState;
45
+ exports.Button = button.Button;
41
46
  exports.GovtBanner = govtBanner.GovtBanner;
42
47
  exports.Ripple = ripple.Ripple;
43
48
  exports.useRipple = useRipple.useRipple;
@@ -51,7 +56,6 @@ exports.Description = field.Description;
51
56
  exports.FieldError = field.FieldError;
52
57
  exports.FieldGroup = field.FieldGroup;
53
58
  exports.Label = field.Label;
54
- exports.TextArea = textArea.TextArea;
55
59
  exports.TextAreaField = textAreaField.TextAreaField;
56
60
  exports.ComboBox = comboBox.ComboBox;
57
61
  exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
@@ -59,12 +63,18 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
59
63
  exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
60
64
  exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
61
65
  exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
66
+ exports.Banner = banner.Banner;
62
67
  exports.TagField = tagField.TagField;
63
68
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
64
69
  exports.Select = select.Select;
65
70
  exports.SelectItem = selectItem.SelectItem;
66
71
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
67
72
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
73
+ exports.Badge = badge.Badge;
74
+ Object.defineProperty(exports, "CalendarDate", {
75
+ enumerable: true,
76
+ get: function () { return date.CalendarDate; }
77
+ });
68
78
  exports.Calendar = calendar.Calendar;
69
79
  exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
70
80
  exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
@@ -73,10 +83,6 @@ exports.getEraFormat = utils.getEraFormat;
73
83
  exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
74
84
  exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
75
85
  exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
76
- Object.defineProperty(exports, "CalendarDate", {
77
- enumerable: true,
78
- get: function () { return date.CalendarDate; }
79
- });
80
86
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
81
87
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
82
88
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -95,6 +101,7 @@ exports.TabPanel = tabs.TabPanel;
95
101
  exports.Tabs = tabs.Tabs;
96
102
  exports.TabsVariantContext = tabs.TabsVariantContext;
97
103
  exports.useTabsVariantContext = tabs.useTabsVariantContext;
98
- exports.Button = button.Button;
99
- exports.Banner = banner.Banner;
100
- exports.Badge = badge.Badge;
104
+ exports.DateField = dateField.DateField;
105
+ exports.DateInput = dateField.DateInput;
106
+ exports.DatePicker = datePicker.DatePicker;
107
+ exports.DateRangePicker = dateRangePicker.DateRangePicker;
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
- var popover = require('../popover/popover.cjs');
10
9
  var utils = require('../system/utils.cjs');
11
10
  var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
12
11
  var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
13
12
  var context = require('../system/react-utils/context.cjs');
13
+ var popover = require('../popover/popover.cjs');
14
14
 
15
15
  const [MenuVariantContext, useMenuVariantContext] = context.createContext({
16
16
  name: "MenuVariantContext",
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var createLucideIcon = require('../createLucideIcon.cjs');
6
+
7
+ /**
8
+ * @license lucide-react v0.475.0 - ISC
9
+ *
10
+ * This source code is licensed under the ISC license.
11
+ * See the LICENSE file in the root directory of this source tree.
12
+ */
13
+
14
+
15
+ const __iconNode = [
16
+ ["path", { d: "M8 2v4", key: "1cmpym" }],
17
+ ["path", { d: "M16 2v4", key: "4m81vk" }],
18
+ ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
19
+ ["path", { d: "M3 10h18", key: "8toen8" }]
20
+ ];
21
+ const Calendar = createLucideIcon.default("Calendar", __iconNode);
22
+
23
+ exports.__iconNode = __iconNode;
24
+ exports.default = Calendar;
@@ -8,14 +8,14 @@ var date = require('@internationalized/date');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var useDeepCompare = require('use-deep-compare');
10
10
  var ouiTheme = require('@opengovsg/oui-theme');
11
- var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
12
11
  var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
13
12
  var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
14
13
  var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
15
14
  var calendarHeader = require('../calendar/calendar-header.cjs');
16
15
  var utils = require('../system/utils.cjs');
16
+ var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
17
17
 
18
- const RangeCalendar = react.forwardRef(function RangeCalendar2(originalProps, ref) {
18
+ const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
19
19
  const [props, variantProps] = utils.mapPropsVariants(
20
20
  originalProps,
21
21
  ouiTheme.calendarStyles.variantKeys
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
- var field = require('../field/field.cjs');
10
- var popover = require('../popover/popover.cjs');
11
9
  var utils = require('../system/utils.cjs');
12
10
  var selectVariantContext = require('./select-variant-context.cjs');
11
+ var field = require('../field/field.cjs');
13
12
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
13
+ var popover = require('../popover/popover.cjs');
14
14
  var button = require('../button/button.cjs');
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
- var field = require('../field/field.cjs');
10
- var input = require('../input/input.cjs');
11
- var popover = require('../popover/popover.cjs');
12
9
  var tagFieldItem = require('./tag-field-item.cjs');
13
10
  var tagFieldList = require('./tag-field-list.cjs');
14
11
  var tagFieldRoot = require('./tag-field-root.cjs');
15
12
  var tagFieldTagList = require('./tag-field-tag-list.cjs');
16
13
  var tagFieldTrigger = require('./tag-field-trigger.cjs');
17
14
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
15
+ var field = require('../field/field.cjs');
16
+ var input = require('../input/input.cjs');
17
+ var popover = require('../popover/popover.cjs');
18
18
 
19
19
  function TagField({
20
20
  classNames,
@@ -5,8 +5,8 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
- var field = require('../field/field.cjs');
9
8
  var textArea = require('../text-area/text-area.cjs');
9
+ var field = require('../field/field.cjs');
10
10
 
11
11
  function TextAreaField({
12
12
  label,
@@ -5,8 +5,8 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
- var field = require('../field/field.cjs');
9
8
  var input = require('../input/input.cjs');
9
+ var field = require('../field/field.cjs');
10
10
 
11
11
  function TextField({
12
12
  label,
@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
5
5
  import { chain } from '@react-aria/utils';
6
6
  import { Button as Button$1, composeRenderProps } from 'react-aria-components';
7
7
  import { buttonStyles } from '@opengovsg/oui-theme';
8
- import { Ripple } from '../ripple/ripple.js';
9
8
  import { useRipple } from '../ripple/use-ripple.js';
10
9
  import { Spinner } from '../spinner/spinner.js';
10
+ import { Ripple } from '../ripple/ripple.js';
11
11
 
12
12
  const Button = forwardRef(
13
13
  ({
@@ -27,6 +27,7 @@ const Button = forwardRef(
27
27
  isPending,
28
28
  spinner: spinnerProp,
29
29
  isIconOnly,
30
+ isAttached,
30
31
  ...props
31
32
  }, ref) => {
32
33
  const {
@@ -60,7 +61,8 @@ const Button = forwardRef(
60
61
  layout,
61
62
  color,
62
63
  radius,
63
- isIconOnly
64
+ isIconOnly,
65
+ isAttached
64
66
  })
65
67
  ),
66
68
  isPending,
@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
4
4
  import { useContext } from 'react';
5
5
  import { CalendarDate } from '@internationalized/date';
6
6
  import { Group } from 'react-aria-components';
7
- import { Select } from '../select/select.js';
8
- import { SelectItem } from '../select/select-item.js';
9
7
  import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
10
8
  import { useCalendarStyleContext } from './calendar-style-context.js';
11
9
  import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
10
+ import { Select } from '../select/select.js';
11
+ import { SelectItem } from '../select/select-item.js';
12
12
  import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
13
13
 
14
14
  const CalendarMonthDaySelector = () => {