@opengovsg/oui 0.0.0-snapshot-20250812081721 → 0.0.0-snapshot-20250813090518

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 (33) hide show
  1. package/dist/cjs/banner/banner.cjs +1 -1
  2. package/dist/cjs/checkbox/checkbox-group-style-context.cjs +16 -0
  3. package/dist/cjs/checkbox/checkbox.cjs +94 -0
  4. package/dist/cjs/checkbox/index.cjs +12 -0
  5. package/dist/cjs/date-picker/date-picker.cjs +4 -3
  6. package/dist/cjs/date-range-picker/date-range-picker.cjs +2 -2
  7. package/dist/cjs/govt-banner/govt-banner.cjs +24 -59
  8. package/dist/cjs/index.cjs +39 -33
  9. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs +19 -0
  10. package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
  11. package/dist/cjs/select/select.cjs +1 -1
  12. package/dist/esm/banner/banner.js +1 -1
  13. package/dist/esm/checkbox/checkbox-group-style-context.js +13 -0
  14. package/dist/esm/checkbox/checkbox.js +91 -0
  15. package/dist/esm/checkbox/index.js +3 -0
  16. package/dist/esm/date-picker/date-picker.js +4 -3
  17. package/dist/esm/date-range-picker/date-range-picker.js +2 -2
  18. package/dist/esm/govt-banner/govt-banner.js +25 -60
  19. package/dist/esm/index.js +13 -11
  20. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js +14 -0
  21. package/dist/esm/range-calendar/range-calendar.js +1 -1
  22. package/dist/esm/select/select.js +1 -1
  23. package/dist/types/checkbox/checkbox-group-style-context.d.ts +6 -0
  24. package/dist/types/checkbox/checkbox-group-style-context.d.ts.map +1 -0
  25. package/dist/types/checkbox/checkbox.d.ts +19 -0
  26. package/dist/types/checkbox/checkbox.d.ts.map +1 -0
  27. package/dist/types/checkbox/index.d.ts +3 -0
  28. package/dist/types/checkbox/index.d.ts.map +1 -0
  29. package/dist/types/govt-banner/govt-banner.d.ts.map +1 -1
  30. package/dist/types/index.d.mts +1 -0
  31. package/dist/types/index.d.ts +1 -0
  32. package/dist/types/index.d.ts.map +1 -1
  33. package/package.json +3 -3
@@ -7,9 +7,9 @@ var react = require('react');
7
7
  var reactAria = require('react-aria');
8
8
  var reactStately = require('react-stately');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
+ var button = require('../button/button.cjs');
10
11
  var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
11
12
  var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.cjs');
12
- var button = require('../button/button.cjs');
13
13
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
14
14
 
15
15
  const i18nStrings = {
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var context = require('../system/react-utils/context.cjs');
6
+
7
+ const [CheckboxGroupStyleContext, useCheckboxGroupStyleContext] = context.createContext({
8
+ name: "CheckboxGroupStyleContext",
9
+ strict: false,
10
+ defaultValue: {
11
+ size: "md"
12
+ }
13
+ });
14
+
15
+ exports.CheckboxGroupStyleContext = CheckboxGroupStyleContext;
16
+ exports.useCheckboxGroupStyleContext = useCheckboxGroupStyleContext;
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
+ var field = require('../field/field.cjs');
9
+ var utils = require('../system/utils.cjs');
10
+ var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
11
+ var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
12
+ var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
13
+
14
+ const Checkbox = ({
15
+ classNames,
16
+ className,
17
+ ...originalProps
18
+ }) => {
19
+ const [props, variants] = utils.mapPropsVariants(
20
+ originalProps,
21
+ ouiTheme.checkboxStyles.variantKeys
22
+ );
23
+ const { size } = checkboxGroupStyleContext.useCheckboxGroupStyleContext();
24
+ const styles = ouiTheme.checkboxStyles({ size, ...variants });
25
+ return /* @__PURE__ */ jsxRuntime.jsx(
26
+ reactAriaComponents.Checkbox,
27
+ {
28
+ ...props,
29
+ isDisabled: variants.isDisabled,
30
+ isInvalid: variants.isInvalid,
31
+ isSelected: variants.isSelected,
32
+ className: reactAriaComponents.composeRenderProps(
33
+ className ?? classNames?.base,
34
+ (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
35
+ ),
36
+ children: ({ isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
37
+ /* @__PURE__ */ jsxRuntime.jsx(
38
+ "div",
39
+ {
40
+ className: styles.box({
41
+ isSelected: isSelected || isIndeterminate,
42
+ ...renderProps,
43
+ className: classNames?.box
44
+ }),
45
+ children: isIndeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
46
+ minus.default,
47
+ {
48
+ "aria-hidden": true,
49
+ className: styles.icon({ className: classNames?.icon })
50
+ }
51
+ ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
52
+ check.default,
53
+ {
54
+ "aria-hidden": true,
55
+ className: styles.icon({ className: classNames?.icon })
56
+ }
57
+ ) : null
58
+ }
59
+ ),
60
+ props.children
61
+ ] })
62
+ }
63
+ );
64
+ };
65
+ function CheckboxGroup({
66
+ description,
67
+ errorMessage,
68
+ classNames,
69
+ size,
70
+ ...props
71
+ }) {
72
+ const context = {
73
+ size
74
+ };
75
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[checkboxGroupStyleContext.CheckboxGroupStyleContext, context]], children: /* @__PURE__ */ jsxRuntime.jsxs(
76
+ reactAriaComponents.CheckboxGroup,
77
+ {
78
+ ...props,
79
+ className: reactAriaComponents.composeRenderProps(
80
+ props.className ?? classNames?.base,
81
+ (className, renderProps) => ouiTheme.checkboxGroupStyles({ ...renderProps, size, className })
82
+ ),
83
+ children: [
84
+ /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: props.label }),
85
+ props.children,
86
+ description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
87
+ /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, classNames: classNames?.error, children: errorMessage })
88
+ ]
89
+ }
90
+ ) });
91
+ }
92
+
93
+ exports.Checkbox = Checkbox;
94
+ exports.CheckboxGroup = CheckboxGroup;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var checkbox = require('./checkbox.cjs');
5
+ var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
6
+
7
+
8
+
9
+ exports.Checkbox = checkbox.Checkbox;
10
+ exports.CheckboxGroup = checkbox.CheckboxGroup;
11
+ exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
12
+ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
@@ -6,13 +6,14 @@ 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 button = require('../button/button.cjs');
10
+ var calendar$1 = require('../calendar/calendar.cjs');
11
+ require('@internationalized/date');
12
+ var dateField = require('../date-field/date-field.cjs');
9
13
  var field = require('../field/field.cjs');
10
14
  var popover = require('../popover/popover.cjs');
11
15
  var utils = require('../system/utils.cjs');
12
- var dateField = require('../date-field/date-field.cjs');
13
16
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
14
- var calendar$1 = require('../calendar/calendar.cjs');
15
- var button = require('../button/button.cjs');
16
17
 
17
18
  function DatePicker(originalProps) {
18
19
  const [
@@ -7,13 +7,13 @@ var react = require('react');
7
7
  var date = require('@internationalized/date');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
+ var button = require('../button/button.cjs');
11
+ var dateField = require('../date-field/date-field.cjs');
10
12
  var field = require('../field/field.cjs');
11
13
  var popover = require('../popover/popover.cjs');
12
14
  var rangeCalendar = require('../range-calendar/range-calendar.cjs');
13
15
  var utils = require('../system/utils.cjs');
14
16
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
15
- var dateField = require('../date-field/date-field.cjs');
16
- var button = require('../button/button.cjs');
17
17
 
18
18
  function DateRangePicker(originalProps) {
19
19
  const [
@@ -12,54 +12,11 @@ var landmark = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/
12
12
  var externalLink = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.cjs');
13
13
  var lock = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.cjs');
14
14
 
15
- const i18nStrings = {
16
- "en-SG": {
17
- mainLabel: "A Singapore Government Agency Website",
18
- identifyLabel: "How to identify",
19
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
20
- officialLinkHeader: "Official website links end with .gov.sg",
21
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
22
- officialLinkTrusted: "Trusted websites",
23
- secureHeader: "Secure websites use HTTPS",
24
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
25
- },
26
- "zh-SG": {
27
- mainLabel: "A Singapore Government Agency Website",
28
- identifyLabel: "How to identify",
29
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
30
- officialLinkHeader: "Official website links end with .gov.sg",
31
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
32
- officialLinkTrusted: "Trusted websites",
33
- secureHeader: "Secure websites use HTTPS",
34
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
35
- },
36
- "ms-SG": {
37
- mainLabel: "A Singapore Government Agency Website",
38
- identifyLabel: "How to identify",
39
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
40
- officialLinkHeader: "Official website links end with .gov.sg",
41
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
42
- officialLinkTrusted: "Trusted websites",
43
- secureHeader: "Secure websites use HTTPS",
44
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
45
- },
46
- "ta-SG": {
47
- mainLabel: "A Singapore Government Agency Website",
48
- identifyLabel: "How to identify",
49
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
50
- officialLinkHeader: "Official website links end with .gov.sg",
51
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
52
- officialLinkTrusted: "Trusted websites",
53
- secureHeader: "Secure websites use HTTPS",
54
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
55
- }
56
- };
57
15
  function GovtBanner({
58
16
  environment,
59
17
  classNames,
60
18
  ...props
61
19
  }) {
62
- const formatMessage = reactAria.useMessageFormatter(i18nStrings);
63
20
  const state = reactStately.useDisclosureState(props);
64
21
  const panelRef = react.useRef(null);
65
22
  const triggerRef = react.useRef(null);
@@ -106,10 +63,12 @@ function GovtBanner({
106
63
  {
107
64
  className: slots.mainContent({ className: classNames?.mainContent }),
108
65
  children: [
109
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatMessage("mainLabel") }),
110
- environment ? /* @__PURE__ */ jsxRuntime.jsx("b", { children: formatMessage("environmentLabel", {
111
- environment: environment.toUpperCase()
112
- }) }) : null,
66
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "A Singapore Government Agency Website" }),
67
+ environment ? /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
68
+ "[NOTE: THIS IS A ",
69
+ environment.toUpperCase(),
70
+ " WEBSITE]"
71
+ ] }) : null,
113
72
  /* @__PURE__ */ jsxRuntime.jsxs(
114
73
  "button",
115
74
  {
@@ -121,7 +80,7 @@ function GovtBanner({
121
80
  type: "button",
122
81
  ...reactAria.mergeProps(buttonProps, focusProps),
123
82
  children: [
124
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: formatMessage("identifyLabel") }),
83
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
125
84
  /* @__PURE__ */ jsxRuntime.jsx(
126
85
  chevronDown.default,
127
86
  {
@@ -164,13 +123,13 @@ function GovtBanner({
164
123
  className: slots.panelHeader({
165
124
  className: classNames?.panelHeader
166
125
  }),
167
- children: formatMessage("officialLinkHeader")
126
+ children: "Official website links end with .gov.sg"
168
127
  }
169
128
  ),
170
129
  /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
171
- formatMessage("officialLinkContent", {
172
- boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content }, content)
173
- }),
130
+ "Government agencies communicate via ",
131
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: ".gov.sg" }),
132
+ " websites (e.g. go.gov.sg/open).",
174
133
  " ",
175
134
  /* @__PURE__ */ jsxRuntime.jsxs(
176
135
  "a",
@@ -180,7 +139,7 @@ function GovtBanner({
180
139
  rel: "noreferrer",
181
140
  target: "_blank",
182
141
  children: [
183
- formatMessage("officialLinkTrusted", {}),
142
+ "Trusted websites",
184
143
  /* @__PURE__ */ jsxRuntime.jsx(
185
144
  externalLink.default,
186
145
  {
@@ -226,12 +185,14 @@ function GovtBanner({
226
185
  className: slots.panelHeader({
227
186
  className: classNames?.panelHeader
228
187
  }),
229
- children: formatMessage("secureHeader")
188
+ children: "Secure websites use HTTPS"
230
189
  }
231
190
  ),
232
- /* @__PURE__ */ jsxRuntime.jsx("article", { children: formatMessage("secureContent", {
233
- boldThis: (content) => /* @__PURE__ */ jsxRuntime.jsx("b", { children: content }),
234
- icon: /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
191
+ /* @__PURE__ */ jsxRuntime.jsxs("article", { children: [
192
+ "Look for a ",
193
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: "lock" }),
194
+ " ",
195
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": true, children: [
235
196
  "(",
236
197
  /* @__PURE__ */ jsxRuntime.jsx(
237
198
  lock.default,
@@ -242,8 +203,12 @@ function GovtBanner({
242
203
  }
243
204
  ),
244
205
  ")"
245
- ] })
246
- }) })
206
+ ] }),
207
+ " ",
208
+ "or ",
209
+ /* @__PURE__ */ jsxRuntime.jsx("b", { children: "https://" }),
210
+ " as an added precaution. Share sensitive information only on official, secure websites."
211
+ ] })
247
212
  ]
248
213
  }
249
214
  )
@@ -2,6 +2,7 @@
2
2
  'use strict';
3
3
 
4
4
  var useControllableState = require('./hooks/use-controllable-state.cjs');
5
+ var button = require('./button/button.cjs');
5
6
  var govtBanner = require('./govt-banner/govt-banner.cjs');
6
7
  var ripple = require('./ripple/ripple.cjs');
7
8
  var useRipple = require('./ripple/use-ripple.cjs');
@@ -14,33 +15,35 @@ var textField = require('./text-field/text-field.cjs');
14
15
  var field = require('./field/field.cjs');
15
16
  var textArea = require('./text-area/text-area.cjs');
16
17
  var textAreaField = require('./text-area-field/text-area-field.cjs');
18
+ var comboBox = require('./combo-box/combo-box.cjs');
19
+ var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
20
+ var comboBoxItem = require('./combo-box/combo-box-item.cjs');
21
+ var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
22
+ var banner = require('./banner/banner.cjs');
17
23
  var tagField = require('./tag-field/tag-field.cjs');
18
24
  var tagFieldItem = require('./tag-field/tag-field-item.cjs');
19
25
  var select = require('./select/select.cjs');
20
26
  var selectItem = require('./select/select-item.cjs');
21
27
  var selectVariantContext = require('./select/select-variant-context.cjs');
22
28
  var badge = require('./badge/badge.cjs');
29
+ var calendar = require('./calendar/calendar.cjs');
30
+ var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
31
+ var utils = require('./calendar/utils.cjs');
32
+ var date = require('@internationalized/date');
23
33
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
24
34
  var menu = require('./menu/menu.cjs');
25
35
  var popover = require('./popover/popover.cjs');
26
36
  var tabs = require('./tabs/tabs.cjs');
37
+ var dateField = require('./date-field/date-field.cjs');
27
38
  var datePicker = require('./date-picker/date-picker.cjs');
28
39
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
29
- var button = require('./button/button.cjs');
30
- var comboBox = require('./combo-box/combo-box.cjs');
31
- var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
32
- var comboBoxItem = require('./combo-box/combo-box-item.cjs');
33
- var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
34
- var banner = require('./banner/banner.cjs');
35
- var date = require('@internationalized/date');
36
- var calendar = require('./calendar/calendar.cjs');
37
- var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
38
- var utils = require('./calendar/utils.cjs');
39
- var dateField = require('./date-field/date-field.cjs');
40
+ var checkbox = require('./checkbox/checkbox.cjs');
41
+ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
40
42
 
41
43
 
42
44
 
43
45
  exports.useControllableState = useControllableState.useControllableState;
46
+ exports.Button = button.Button;
44
47
  exports.GovtBanner = govtBanner.GovtBanner;
45
48
  exports.Ripple = ripple.Ripple;
46
49
  exports.useRipple = useRipple.useRipple;
@@ -56,6 +59,13 @@ exports.FieldGroup = field.FieldGroup;
56
59
  exports.Label = field.Label;
57
60
  exports.TextArea = textArea.TextArea;
58
61
  exports.TextAreaField = textAreaField.TextAreaField;
62
+ exports.ComboBox = comboBox.ComboBox;
63
+ exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
64
+ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
65
+ exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
66
+ exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
67
+ exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
68
+ exports.Banner = banner.Banner;
59
69
  exports.TagField = tagField.TagField;
60
70
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
61
71
  exports.Select = select.Select;
@@ -63,6 +73,18 @@ exports.SelectItem = selectItem.SelectItem;
63
73
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
64
74
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
65
75
  exports.Badge = badge.Badge;
76
+ exports.Calendar = calendar.Calendar;
77
+ exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
78
+ exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
79
+ exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
80
+ exports.getEraFormat = utils.getEraFormat;
81
+ exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
82
+ exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
83
+ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
84
+ Object.defineProperty(exports, "CalendarDate", {
85
+ enumerable: true,
86
+ get: function () { return date.CalendarDate; }
87
+ });
66
88
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
67
89
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
68
90
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -81,27 +103,11 @@ exports.TabPanel = tabs.TabPanel;
81
103
  exports.Tabs = tabs.Tabs;
82
104
  exports.TabsVariantContext = tabs.TabsVariantContext;
83
105
  exports.useTabsVariantContext = tabs.useTabsVariantContext;
84
- exports.DatePicker = datePicker.DatePicker;
85
- exports.DateRangePicker = dateRangePicker.DateRangePicker;
86
- exports.Button = button.Button;
87
- exports.ComboBox = comboBox.ComboBox;
88
- exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
89
- exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
90
- exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
91
- exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
92
- exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
93
- exports.Banner = banner.Banner;
94
- Object.defineProperty(exports, "CalendarDate", {
95
- enumerable: true,
96
- get: function () { return date.CalendarDate; }
97
- });
98
- exports.Calendar = calendar.Calendar;
99
- exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
100
- exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
101
- exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
102
- exports.getEraFormat = utils.getEraFormat;
103
- exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
104
- exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
105
- exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
106
106
  exports.DateField = dateField.DateField;
107
107
  exports.DateInput = dateField.DateInput;
108
+ exports.DatePicker = datePicker.DatePicker;
109
+ exports.DateRangePicker = dateRangePicker.DateRangePicker;
110
+ exports.Checkbox = checkbox.Checkbox;
111
+ exports.CheckboxGroup = checkbox.CheckboxGroup;
112
+ exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
113
+ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
@@ -0,0 +1,19 @@
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 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
16
+ const Minus = createLucideIcon.default("Minus", __iconNode);
17
+
18
+ exports.__iconNode = __iconNode;
19
+ exports.default = Minus;
@@ -8,12 +8,12 @@ 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');
11
12
  var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
12
13
  var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
13
14
  var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
14
15
  var calendarHeader = require('../calendar/calendar-header.cjs');
15
16
  var utils = require('../system/utils.cjs');
16
- var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
17
17
 
18
18
  const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
19
19
  const [props, variantProps] = utils.mapPropsVariants(
@@ -6,12 +6,12 @@ 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 button = require('../button/button.cjs');
9
10
  var field = require('../field/field.cjs');
10
11
  var popover = require('../popover/popover.cjs');
11
12
  var utils = require('../system/utils.cjs');
12
13
  var selectVariantContext = require('./select-variant-context.cjs');
13
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');
14
- var button = require('../button/button.cjs');
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
17
17
  switch (size) {
@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
5
5
  import { useMessageFormatter, useDisclosure } from 'react-aria';
6
6
  import { useDisclosureState } from 'react-stately';
7
7
  import { bannerStyles } from '@opengovsg/oui-theme';
8
+ import { Button } from '../button/button.js';
8
9
  import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
9
10
  import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
10
- import { Button } from '../button/button.js';
11
11
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
12
12
 
13
13
  const i18nStrings = {
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ "use client";
3
+ import { createContext } from '../system/react-utils/context.js';
4
+
5
+ const [CheckboxGroupStyleContext, useCheckboxGroupStyleContext] = createContext({
6
+ name: "CheckboxGroupStyleContext",
7
+ strict: false,
8
+ defaultValue: {
9
+ size: "md"
10
+ }
11
+ });
12
+
13
+ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext };
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
5
+ import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
6
+ import { Label, Description, FieldError } from '../field/field.js';
7
+ import { mapPropsVariants } from '../system/utils.js';
8
+ import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
9
+ import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
10
+ import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
11
+
12
+ const Checkbox = ({
13
+ classNames,
14
+ className,
15
+ ...originalProps
16
+ }) => {
17
+ const [props, variants] = mapPropsVariants(
18
+ originalProps,
19
+ checkboxStyles.variantKeys
20
+ );
21
+ const { size } = useCheckboxGroupStyleContext();
22
+ const styles = checkboxStyles({ size, ...variants });
23
+ return /* @__PURE__ */ jsx(
24
+ Checkbox$1,
25
+ {
26
+ ...props,
27
+ isDisabled: variants.isDisabled,
28
+ isInvalid: variants.isInvalid,
29
+ isSelected: variants.isSelected,
30
+ className: composeRenderProps(
31
+ className ?? classNames?.base,
32
+ (className2, renderProps) => styles.base({ ...renderProps, className: className2 })
33
+ ),
34
+ children: ({ isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
35
+ /* @__PURE__ */ jsx(
36
+ "div",
37
+ {
38
+ className: styles.box({
39
+ isSelected: isSelected || isIndeterminate,
40
+ ...renderProps,
41
+ className: classNames?.box
42
+ }),
43
+ children: isIndeterminate ? /* @__PURE__ */ jsx(
44
+ Minus,
45
+ {
46
+ "aria-hidden": true,
47
+ className: styles.icon({ className: classNames?.icon })
48
+ }
49
+ ) : isSelected ? /* @__PURE__ */ jsx(
50
+ Check,
51
+ {
52
+ "aria-hidden": true,
53
+ className: styles.icon({ className: classNames?.icon })
54
+ }
55
+ ) : null
56
+ }
57
+ ),
58
+ props.children
59
+ ] })
60
+ }
61
+ );
62
+ };
63
+ function CheckboxGroup({
64
+ description,
65
+ errorMessage,
66
+ classNames,
67
+ size,
68
+ ...props
69
+ }) {
70
+ const context = {
71
+ size
72
+ };
73
+ return /* @__PURE__ */ jsx(Provider, { values: [[CheckboxGroupStyleContext, context]], children: /* @__PURE__ */ jsxs(
74
+ CheckboxGroup$1,
75
+ {
76
+ ...props,
77
+ className: composeRenderProps(
78
+ props.className ?? classNames?.base,
79
+ (className, renderProps) => checkboxGroupStyles({ ...renderProps, size, className })
80
+ ),
81
+ children: [
82
+ /* @__PURE__ */ jsx(Label, { size, className: classNames?.label, children: props.label }),
83
+ props.children,
84
+ description && /* @__PURE__ */ jsx(Description, { size, className: classNames?.description, children: description }),
85
+ /* @__PURE__ */ jsx(FieldError, { size, classNames: classNames?.error, children: errorMessage })
86
+ ]
87
+ }
88
+ ) });
89
+ }
90
+
91
+ export { Checkbox, CheckboxGroup };
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ export { Checkbox, CheckboxGroup } from './checkbox.js';
3
+ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox-group-style-context.js';
@@ -4,13 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
5
  import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
6
6
  import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
7
+ import { Button } from '../button/button.js';
8
+ import { Calendar as Calendar$1 } from '../calendar/calendar.js';
9
+ import '@internationalized/date';
10
+ import { DateInput } from '../date-field/date-field.js';
7
11
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
8
12
  import { Popover } from '../popover/popover.js';
9
13
  import { mapPropsVariants } from '../system/utils.js';
10
- import { DateInput } from '../date-field/date-field.js';
11
14
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
12
- import { Calendar as Calendar$1 } from '../calendar/calendar.js';
13
- import { Button } from '../button/button.js';
14
15
 
15
16
  function DatePicker(originalProps) {
16
17
  const [
@@ -5,13 +5,13 @@ import { useMemo } from 'react';
5
5
  import { CalendarDate } from '@internationalized/date';
6
6
  import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
7
7
  import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
8
+ import { Button } from '../button/button.js';
9
+ import { DateInput } from '../date-field/date-field.js';
8
10
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
11
  import { Popover } from '../popover/popover.js';
10
12
  import { RangeCalendar } from '../range-calendar/range-calendar.js';
11
13
  import { mapPropsVariants } from '../system/utils.js';
12
14
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
13
- import { DateInput } from '../date-field/date-field.js';
14
- import { Button } from '../button/button.js';
15
15
 
16
16
  function DateRangePicker(originalProps) {
17
17
  const [
@@ -2,7 +2,7 @@
2
2
  "use client";
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useRef } from 'react';
5
- import { useMessageFormatter, useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
5
+ import { useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
6
6
  import { useDisclosureState } from 'react-stately';
7
7
  import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
8
8
  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';
@@ -10,54 +10,11 @@ import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/no
10
10
  import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
11
11
  import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.js';
12
12
 
13
- const i18nStrings = {
14
- "en-SG": {
15
- mainLabel: "A Singapore Government Agency Website",
16
- identifyLabel: "How to identify",
17
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
18
- officialLinkHeader: "Official website links end with .gov.sg",
19
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
20
- officialLinkTrusted: "Trusted websites",
21
- secureHeader: "Secure websites use HTTPS",
22
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
23
- },
24
- "zh-SG": {
25
- mainLabel: "A Singapore Government Agency Website",
26
- identifyLabel: "How to identify",
27
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
28
- officialLinkHeader: "Official website links end with .gov.sg",
29
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
30
- officialLinkTrusted: "Trusted websites",
31
- secureHeader: "Secure websites use HTTPS",
32
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
33
- },
34
- "ms-SG": {
35
- mainLabel: "A Singapore Government Agency Website",
36
- identifyLabel: "How to identify",
37
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
38
- officialLinkHeader: "Official website links end with .gov.sg",
39
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
40
- officialLinkTrusted: "Trusted websites",
41
- secureHeader: "Secure websites use HTTPS",
42
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
43
- },
44
- "ta-SG": {
45
- mainLabel: "A Singapore Government Agency Website",
46
- identifyLabel: "How to identify",
47
- environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
48
- officialLinkHeader: "Official website links end with .gov.sg",
49
- officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
50
- officialLinkTrusted: "Trusted websites",
51
- secureHeader: "Secure websites use HTTPS",
52
- secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
53
- }
54
- };
55
13
  function GovtBanner({
56
14
  environment,
57
15
  classNames,
58
16
  ...props
59
17
  }) {
60
- const formatMessage = useMessageFormatter(i18nStrings);
61
18
  const state = useDisclosureState(props);
62
19
  const panelRef = useRef(null);
63
20
  const triggerRef = useRef(null);
@@ -104,10 +61,12 @@ function GovtBanner({
104
61
  {
105
62
  className: slots.mainContent({ className: classNames?.mainContent }),
106
63
  children: [
107
- /* @__PURE__ */ jsx("span", { children: formatMessage("mainLabel") }),
108
- environment ? /* @__PURE__ */ jsx("b", { children: formatMessage("environmentLabel", {
109
- environment: environment.toUpperCase()
110
- }) }) : null,
64
+ /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
65
+ environment ? /* @__PURE__ */ jsxs("b", { children: [
66
+ "[NOTE: THIS IS A ",
67
+ environment.toUpperCase(),
68
+ " WEBSITE]"
69
+ ] }) : null,
111
70
  /* @__PURE__ */ jsxs(
112
71
  "button",
113
72
  {
@@ -119,7 +78,7 @@ function GovtBanner({
119
78
  type: "button",
120
79
  ...mergeProps(buttonProps, focusProps),
121
80
  children: [
122
- /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: formatMessage("identifyLabel") }),
81
+ /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
123
82
  /* @__PURE__ */ jsx(
124
83
  ChevronDown,
125
84
  {
@@ -162,13 +121,13 @@ function GovtBanner({
162
121
  className: slots.panelHeader({
163
122
  className: classNames?.panelHeader
164
123
  }),
165
- children: formatMessage("officialLinkHeader")
124
+ children: "Official website links end with .gov.sg"
166
125
  }
167
126
  ),
168
127
  /* @__PURE__ */ jsxs("article", { children: [
169
- formatMessage("officialLinkContent", {
170
- boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content }, content)
171
- }),
128
+ "Government agencies communicate via ",
129
+ /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
130
+ " websites (e.g. go.gov.sg/open).",
172
131
  " ",
173
132
  /* @__PURE__ */ jsxs(
174
133
  "a",
@@ -178,7 +137,7 @@ function GovtBanner({
178
137
  rel: "noreferrer",
179
138
  target: "_blank",
180
139
  children: [
181
- formatMessage("officialLinkTrusted", {}),
140
+ "Trusted websites",
182
141
  /* @__PURE__ */ jsx(
183
142
  ExternalLink,
184
143
  {
@@ -224,12 +183,14 @@ function GovtBanner({
224
183
  className: slots.panelHeader({
225
184
  className: classNames?.panelHeader
226
185
  }),
227
- children: formatMessage("secureHeader")
186
+ children: "Secure websites use HTTPS"
228
187
  }
229
188
  ),
230
- /* @__PURE__ */ jsx("article", { children: formatMessage("secureContent", {
231
- boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content }),
232
- icon: /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
189
+ /* @__PURE__ */ jsxs("article", { children: [
190
+ "Look for a ",
191
+ /* @__PURE__ */ jsx("b", { children: "lock" }),
192
+ " ",
193
+ /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
233
194
  "(",
234
195
  /* @__PURE__ */ jsx(
235
196
  Lock,
@@ -240,8 +201,12 @@ function GovtBanner({
240
201
  }
241
202
  ),
242
203
  ")"
243
- ] })
244
- }) })
204
+ ] }),
205
+ " ",
206
+ "or ",
207
+ /* @__PURE__ */ jsx("b", { children: "https://" }),
208
+ " as an added precaution. Share sensitive information only on official, secure websites."
209
+ ] })
245
210
  ]
246
211
  }
247
212
  )
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  export { useControllableState } from './hooks/use-controllable-state.js';
3
+ export { Button } from './button/button.js';
3
4
  export { GovtBanner } from './govt-banner/govt-banner.js';
4
5
  export { Ripple } from './ripple/ripple.js';
5
6
  export { useRipple } from './ripple/use-ripple.js';
@@ -12,26 +13,27 @@ export { TextField } from './text-field/text-field.js';
12
13
  export { Description, FieldError, FieldGroup, Label } from './field/field.js';
13
14
  export { TextArea } from './text-area/text-area.js';
14
15
  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';
15
21
  export { TagField } from './tag-field/tag-field.js';
16
22
  export { TagFieldItem } from './tag-field/tag-field-item.js';
17
23
  export { Select } from './select/select.js';
18
24
  export { SelectItem } from './select/select-item.js';
19
25
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
20
26
  export { Badge } from './badge/badge.js';
27
+ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
28
+ export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
29
+ export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
30
+ export { CalendarDate } from '@internationalized/date';
21
31
  export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
22
32
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
23
33
  export { Popover } from './popover/popover.js';
24
34
  export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
35
+ export { DateField, DateInput } from './date-field/date-field.js';
25
36
  export { DatePicker } from './date-picker/date-picker.js';
26
37
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
27
- export { Button } from './button/button.js';
28
- export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
29
- export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
30
- export { ComboBoxItem } from './combo-box/combo-box-item.js';
31
- export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
32
- export { Banner } from './banner/banner.js';
33
- export { CalendarDate } from '@internationalized/date';
34
- export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
35
- export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
36
- export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
37
- export { DateField, DateInput } from './date-field/date-field.js';
38
+ export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
39
+ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
@@ -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: "M5 12h14", key: "1ays0h" }]];
12
+ const Minus = createLucideIcon("Minus", __iconNode);
13
+
14
+ export { __iconNode, Minus as default };
@@ -6,12 +6,12 @@ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internatio
6
6
  import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
7
7
  import { useDeepCompareMemo } from 'use-deep-compare';
8
8
  import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
9
+ import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
9
10
  import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
10
11
  import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
11
12
  import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
12
13
  import { CalendarHeader } from '../calendar/calendar-header.js';
13
14
  import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
14
- import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
15
15
 
16
16
  const RangeCalendar = forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
17
17
  const [props, variantProps] = mapPropsVariants(
@@ -4,12 +4,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
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
+ import { Button } from '../button/button.js';
7
8
  import { Label, Description, FieldError } from '../field/field.js';
8
9
  import { Popover } from '../popover/popover.js';
9
10
  import { mapPropsVariants } from '../system/utils.js';
10
11
  import { SelectVariantContext } from './select-variant-context.js';
11
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';
12
- import { Button } from '../button/button.js';
13
13
 
14
14
  const calculateEstimatedRowHeight = (size) => {
15
15
  switch (size) {
@@ -0,0 +1,6 @@
1
+ import type { CheckboxProps } from "./checkbox";
2
+ export interface UseProvideCheckboxGroupStylesReturn {
3
+ size: CheckboxProps["size"];
4
+ }
5
+ export declare const CheckboxGroupStyleContext: import("react").Context<UseProvideCheckboxGroupStylesReturn>, useCheckboxGroupStyleContext: () => UseProvideCheckboxGroupStylesReturn;
6
+ //# sourceMappingURL=checkbox-group-style-context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox-group-style-context.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox-group-style-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAG/C,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAC5B;AAED,eAAO,MAAO,yBAAyB,gEAAE,4BAA4B,2CAOjE,CAAA"}
@@ -0,0 +1,19 @@
1
+ import type { CheckboxGroupProps as AriaCheckboxGroupProps, CheckboxProps as AriaCheckboxProps, ValidationResult } from "react-aria-components";
2
+ import type { CheckboxSlots, FieldErrorSlots, SlotsToClasses, VariantProps } from "@opengovsg/oui-theme";
3
+ import { checkboxStyles } from "@opengovsg/oui-theme";
4
+ export interface CheckboxProps extends AriaCheckboxProps, VariantProps<typeof checkboxStyles> {
5
+ classNames?: SlotsToClasses<CheckboxSlots>;
6
+ }
7
+ export declare const Checkbox: ({ classNames, className, ...originalProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
8
+ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, "children"> {
9
+ label?: string;
10
+ children?: React.ReactNode;
11
+ description?: string;
12
+ errorMessage?: string | ((validation: ValidationResult) => string);
13
+ classNames?: SlotsToClasses<"label" | "base" | "description"> & {
14
+ error?: SlotsToClasses<FieldErrorSlots>;
15
+ };
16
+ size?: CheckboxProps["size"];
17
+ }
18
+ export declare function CheckboxGroup({ description, errorMessage, classNames, size, ...props }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
19
+ //# sourceMappingURL=checkbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/checkbox/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,kBAAkB,IAAI,sBAAsB,EAC5C,aAAa,IAAI,iBAAiB,EAClC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAS9B,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAuB,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAS1E,MAAM,WAAW,aACf,SAAQ,iBAAiB,EACvB,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,CAAA;CAC3C;AAED,eAAO,MAAM,QAAQ,gDAIlB,aAAa,4CA4Cf,CAAA;AACD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAClE,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG;QAC9D,KAAK,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;KACxC,CAAA;IACD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA8BpB"}
@@ -0,0 +1,3 @@
1
+ export * from "./checkbox";
2
+ export * from "./checkbox-group-style-context";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checkbox/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,gCAAgC,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAY7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAsDD,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CA2JjB"}
1
+ {"version":3,"file":"govt-banner.d.ts","sourceRoot":"","sources":["../../../src/govt-banner/govt-banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAM7C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAG3E,UAAU,eAAgB,SAAQ,eAAe;IAC/C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CACxB,YAAY,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,EAC5C,MAAM,CACP,CAAA;IAED;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;CAC7C;AAED,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,GAAG,KAAK,EACT,EAAE,eAAe,2CAkJjB"}
@@ -23,4 +23,5 @@ export * from "./tabs";
23
23
  export * from "./date-field";
24
24
  export * from "./date-picker";
25
25
  export * from "./date-range-picker";
26
+ export * from "./checkbox";
26
27
  //# sourceMappingURL=index.d.ts.map
@@ -23,4 +23,5 @@ export * from "./tabs";
23
23
  export * from "./date-field";
24
24
  export * from "./date-picker";
25
25
  export * from "./date-range-picker";
26
+ export * from "./checkbox";
26
27
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.0-snapshot-20250812081721",
3
+ "version": "0.0.0-snapshot-20250813090518",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -47,9 +47,9 @@
47
47
  "storybook": "9.1.1",
48
48
  "tsx": "^4.20.3",
49
49
  "typescript": "5.7.3",
50
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250813090518",
50
51
  "@oui/chromatic": "0.0.0",
51
52
  "@oui/eslint-config": "0.0.0",
52
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250812081721",
53
53
  "@oui/prettier-config": "0.0.0",
54
54
  "@oui/typescript-config": "0.0.0"
55
55
  },
@@ -80,7 +80,7 @@
80
80
  "peerDependencies": {
81
81
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
82
82
  "react-aria-components": "^1.10.1",
83
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250812081721"
83
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250813090518"
84
84
  },
85
85
  "scripts": {
86
86
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",