@opengovsg/oui 0.0.49 → 0.0.50

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 (25) hide show
  1. package/dist/cjs/banner/banner.cjs +1 -1
  2. package/dist/cjs/date-picker/date-picker.cjs +3 -2
  3. package/dist/cjs/date-range-picker/date-range-picker.cjs +1 -1
  4. package/dist/cjs/file-dropzone/file-info.cjs +1 -1
  5. package/dist/cjs/index.cjs +38 -38
  6. package/dist/cjs/modal/modal-content.cjs +1 -1
  7. package/dist/cjs/number-field/number-field.cjs +1 -1
  8. package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
  9. package/dist/cjs/search-field/search-field.cjs +7 -4
  10. package/dist/cjs/select/select.cjs +1 -1
  11. package/dist/cjs/sidebar/sidebar-list.cjs +1 -1
  12. package/dist/esm/banner/banner.js +1 -1
  13. package/dist/esm/date-picker/date-picker.js +3 -2
  14. package/dist/esm/date-range-picker/date-range-picker.js +1 -1
  15. package/dist/esm/file-dropzone/file-info.js +1 -1
  16. package/dist/esm/index.js +11 -11
  17. package/dist/esm/modal/modal-content.js +1 -1
  18. package/dist/esm/number-field/number-field.js +1 -1
  19. package/dist/esm/range-calendar/range-calendar.js +1 -1
  20. package/dist/esm/search-field/search-field.js +7 -4
  21. package/dist/esm/select/select.js +1 -1
  22. package/dist/esm/sidebar/sidebar-list.js +1 -1
  23. package/dist/types/search-field/search-field.d.ts +5 -0
  24. package/dist/types/search-field/search-field.d.ts.map +1 -1
  25. package/package.json +5 -5
package/dist/cjs/banner/banner.cjs CHANGED
@@ -7,10 +7,10 @@ var $670gB$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 i18n = require('./i18n.cjs');
11
12
  var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
12
13
  var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.cjs');
13
- var button = require('../button/button.cjs');
14
14
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
15
15
 
16
16
  const Banner = ({
package/dist/cjs/date-picker/date-picker.cjs CHANGED
@@ -6,13 +6,14 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var $670gB$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');
9
12
  var dateField = require('../date-field/date-field.cjs');
10
13
  var field = require('../field/field.cjs');
11
14
  var popover = require('../popover/popover.cjs');
12
15
  var utils = require('../system/utils.cjs');
13
16
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/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 [
package/dist/cjs/date-range-picker/date-range-picker.cjs CHANGED
@@ -7,13 +7,13 @@ var $670gB$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');
10
11
  var dateField = require('../date-field/date-field.cjs');
11
12
  var field = require('../field/field.cjs');
12
13
  var popover = require('../popover/popover.cjs');
13
14
  var rangeCalendar = require('../range-calendar/range-calendar.cjs');
14
15
  var utils = require('../system/utils.cjs');
15
16
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
16
- var button = require('../button/button.cjs');
17
17
 
18
18
  function DateRangePicker(originalProps) {
19
19
  const [
package/dist/cjs/file-dropzone/file-info.cjs CHANGED
@@ -5,10 +5,10 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var $670gB$react = require('react');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
+ var button = require('../button/button.cjs');
8
9
  var contexts = require('./contexts.cjs');
9
10
  var utils = require('./utils.cjs');
10
11
  var trash2 = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.cjs');
11
- var button = require('../button/button.cjs');
12
12
 
13
13
  const FileInfo = ({ file, imagePreview, classNames }) => {
14
14
  const {
package/dist/cjs/index.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  var useControllableState = require('./hooks/use-controllable-state.cjs');
5
5
  var useDraggable = require('./hooks/use-draggable.cjs');
6
+ var button = require('./button/button.cjs');
6
7
  var govtBanner = require('./govt-banner/govt-banner.cjs');
7
8
  var ripple = require('./ripple/ripple.cjs');
8
9
  var useRipple = require('./ripple/use-ripple.cjs');
@@ -19,11 +20,17 @@ var comboBox = require('./combo-box/combo-box.cjs');
19
20
  var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
20
21
  var comboBoxItem = require('./combo-box/combo-box-item.cjs');
21
22
  var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
23
+ var banner = require('./banner/banner.cjs');
22
24
  var tagField = require('./tag-field/tag-field.cjs');
23
25
  var tagFieldItem = require('./tag-field/tag-field-item.cjs');
24
26
  var select = require('./select/select.cjs');
25
27
  var selectItem = require('./select/select-item.cjs');
26
28
  var selectVariantContext = require('./select/select-variant-context.cjs');
29
+ var badge = require('./badge/badge.cjs');
30
+ var calendar = require('./calendar/calendar.cjs');
31
+ var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
32
+ var utils$1 = require('./calendar/utils.cjs');
33
+ var date = require('@internationalized/date');
27
34
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
28
35
  var menu = require('./menu/menu.cjs');
29
36
  var popover = require('./popover/popover.cjs');
@@ -31,6 +38,8 @@ var tabs = require('./tabs/tabs.cjs');
31
38
  var dateField = require('./date-field/date-field.cjs');
32
39
  var datePicker = require('./date-picker/date-picker.cjs');
33
40
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
41
+ var checkbox = require('./checkbox/checkbox.cjs');
42
+ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
34
43
  var pagination = require('./pagination/pagination.cjs');
35
44
  var paginationCursor = require('./pagination/pagination-cursor.cjs');
36
45
  var paginationItem = require('./pagination/pagination-item.cjs');
@@ -57,9 +66,11 @@ var navbarItem = require('./navbar/navbar-item.cjs');
57
66
  var useNavbar = require('./navbar/use-navbar.cjs');
58
67
  var navbarContext = require('./navbar/navbar-context.cjs');
59
68
  var index = require('./avatar/index.cjs');
69
+ var accordion = require('./accordion/accordion.cjs');
60
70
  var timeField = require('./time-field/time-field.cjs');
61
71
  var searchField = require('./search-field/search-field.cjs');
62
72
  var link = require('./link/link.cjs');
73
+ var breadcrumbs = require('./breadcrumbs/breadcrumbs.cjs');
63
74
  var sidebar = require('./sidebar/sidebar.cjs');
64
75
  var sidebarRoot = require('./sidebar/sidebar-root.cjs');
65
76
  var sidebarItem = require('./sidebar/sidebar-item.cjs');
@@ -70,27 +81,17 @@ var phoneNumberField = require('./phone-number-field/phone-number-field.cjs');
70
81
  var BasePhoneInput = require('react-phone-number-input');
71
82
  var infobox = require('./infobox/infobox.cjs');
72
83
  var radio = require('./radio-group/radio.cjs');
73
- var accordion = require('./accordion/accordion.cjs');
74
84
  var avatarContext = require('./avatar/avatar-context.cjs');
75
85
  var avatar = require('./avatar/avatar.cjs');
76
86
  var avatarGroup = require('./avatar/avatar-group.cjs');
77
87
  var avatarGroupContext = require('./avatar/avatar-group-context.cjs');
78
- var badge = require('./badge/badge.cjs');
79
- var banner = require('./banner/banner.cjs');
80
- var breadcrumbs = require('./breadcrumbs/breadcrumbs.cjs');
81
- var button = require('./button/button.cjs');
82
- var calendar = require('./calendar/calendar.cjs');
83
- var date = require('@internationalized/date');
84
- var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
85
- var checkbox = require('./checkbox/checkbox.cjs');
86
- var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
87
- var utils$1 = require('./calendar/utils.cjs');
88
88
  var sonner = require('sonner');
89
89
 
90
90
 
91
91
 
92
92
  exports.useControllableState = useControllableState.useControllableState;
93
93
  exports.useDraggable = useDraggable.useDraggable;
94
+ exports.Button = button.Button;
94
95
  exports.GovtBanner = govtBanner.GovtBanner;
95
96
  exports.Ripple = ripple.Ripple;
96
97
  exports.useRipple = useRipple.useRipple;
@@ -113,12 +114,26 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
113
114
  exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
114
115
  exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
115
116
  exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
117
+ exports.Banner = banner.Banner;
116
118
  exports.TagField = tagField.TagField;
117
119
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
118
120
  exports.Select = select.Select;
119
121
  exports.SelectItem = selectItem.SelectItem;
120
122
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
121
123
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
124
+ exports.Badge = badge.Badge;
125
+ exports.Calendar = calendar.Calendar;
126
+ exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
127
+ exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
128
+ exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
129
+ exports.getEraFormat = utils$1.getEraFormat;
130
+ exports.useGenerateLocalizedMonths = utils$1.useGenerateLocalizedMonths;
131
+ exports.useGenerateLocalizedYears = utils$1.useGenerateLocalizedYears;
132
+ exports.useLocalizedMonthYear = utils$1.useLocalizedMonthYear;
133
+ Object.defineProperty(exports, "CalendarDate", {
134
+ enumerable: true,
135
+ get: function () { return date.CalendarDate; }
136
+ });
122
137
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
123
138
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
124
139
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -142,6 +157,10 @@ exports.DateField = dateField.DateField;
142
157
  exports.DateInput = dateField.DateInput;
143
158
  exports.DatePicker = datePicker.DatePicker;
144
159
  exports.DateRangePicker = dateRangePicker.DateRangePicker;
160
+ exports.Checkbox = checkbox.Checkbox;
161
+ exports.CheckboxGroup = checkbox.CheckboxGroup;
162
+ exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
163
+ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
145
164
  exports.Pagination = pagination.Pagination;
146
165
  exports.PaginationCursor = paginationCursor.PaginationCursor;
147
166
  exports.PaginationItem = paginationItem.PaginationItem;
@@ -172,9 +191,17 @@ exports.useNavbar = useNavbar.useNavbar;
172
191
  exports.NavbarProvider = navbarContext.NavbarProvider;
173
192
  exports.useNavbarContext = navbarContext.useNavbarContext;
174
193
  exports.Avatar = index.Avatar;
194
+ exports.Accordion = accordion.Accordion;
195
+ exports.AccordionContent = accordion.AccordionContent;
196
+ exports.AccordionHeader = accordion.AccordionHeader;
197
+ exports.AccordionItem = accordion.AccordionItem;
198
+ exports.AccordionStyleContext = accordion.AccordionStyleContext;
199
+ exports.useAccordionStyleContext = accordion.useAccordionStyleContext;
175
200
  exports.TimeField = timeField.TimeField;
176
201
  exports.SearchField = searchField.SearchField;
177
202
  exports.Link = link.Link;
203
+ exports.Breadcrumb = breadcrumbs.Breadcrumb;
204
+ exports.Breadcrumbs = breadcrumbs.Breadcrumbs;
178
205
  exports.Sidebar = sidebar.Sidebar;
179
206
  exports.generateSidebarItems = sidebar.generateSidebarItems;
180
207
  exports.SidebarRoot = sidebarRoot.SidebarRoot;
@@ -210,12 +237,6 @@ Object.defineProperty(exports, "parsePhoneNumber", {
210
237
  exports.Infobox = infobox.Infobox;
211
238
  exports.Radio = radio.Radio;
212
239
  exports.RadioGroup = radio.RadioGroup;
213
- exports.Accordion = accordion.Accordion;
214
- exports.AccordionContent = accordion.AccordionContent;
215
- exports.AccordionHeader = accordion.AccordionHeader;
216
- exports.AccordionItem = accordion.AccordionItem;
217
- exports.AccordionStyleContext = accordion.AccordionStyleContext;
218
- exports.useAccordionStyleContext = accordion.useAccordionStyleContext;
219
240
  exports.AvatarContext = avatarContext.AvatarContext;
220
241
  exports.useAvatarContext = avatarContext.useAvatarContext;
221
242
  exports.AvatarFallback = avatar.AvatarFallback;
@@ -224,27 +245,6 @@ exports.AvatarRoot = avatar.AvatarRoot;
224
245
  exports.AvatarGroup = avatarGroup.AvatarGroup;
225
246
  exports.AvatarGroupProvider = avatarGroupContext.AvatarGroupProvider;
226
247
  exports.useAvatarGroup = avatarGroupContext.useAvatarGroup;
227
- exports.Badge = badge.Badge;
228
- exports.Banner = banner.Banner;
229
- exports.Breadcrumb = breadcrumbs.Breadcrumb;
230
- exports.Breadcrumbs = breadcrumbs.Breadcrumbs;
231
- exports.Button = button.Button;
232
- exports.Calendar = calendar.Calendar;
233
- exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
234
- Object.defineProperty(exports, "CalendarDate", {
235
- enumerable: true,
236
- get: function () { return date.CalendarDate; }
237
- });
238
- exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
239
- exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
240
- exports.Checkbox = checkbox.Checkbox;
241
- exports.CheckboxGroup = checkbox.CheckboxGroup;
242
- exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
243
- exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
244
- exports.getEraFormat = utils$1.getEraFormat;
245
- exports.useGenerateLocalizedMonths = utils$1.useGenerateLocalizedMonths;
246
- exports.useGenerateLocalizedYears = utils$1.useGenerateLocalizedYears;
247
- exports.useLocalizedMonthYear = utils$1.useLocalizedMonthYear;
248
248
  Object.defineProperty(exports, "toast", {
249
249
  enumerable: true,
250
250
  get: function () { return sonner.toast; }
package/dist/cjs/modal/modal-content.cjs CHANGED
@@ -7,10 +7,10 @@ var $670gB$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 button = require('../button/button.cjs');
10
11
  var i18n = require('./i18n.cjs');
11
12
  var modalVariantContext = require('./modal-variant-context.cjs');
12
13
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
13
- var button = require('../button/button.cjs');
14
14
 
15
15
  function ModalContent({
16
16
  closeButtonContent: closeButtonContentProp,
package/dist/cjs/number-field/number-field.cjs CHANGED
@@ -5,12 +5,12 @@
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 button = require('../button/button.cjs');
8
9
  var field = require('../field/field.cjs');
9
10
  var input = require('../input/input.cjs');
10
11
  var utils = require('../system/utils.cjs');
11
12
  var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
12
13
  var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.cjs');
13
- var button = require('../button/button.cjs');
14
14
 
15
15
  function NumberField(originalProps) {
16
16
  const [
package/dist/cjs/range-calendar/range-calendar.cjs CHANGED
@@ -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(
package/dist/cjs/search-field/search-field.cjs CHANGED
@@ -5,13 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
5
5
  var reactAria = require('react-aria');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
+ var button = require('../button/button.cjs');
8
9
  var field = require('../field/field.cjs');
9
10
  var input = require('../input/input.cjs');
10
11
  var utils = require('../system/utils.cjs');
11
12
  var i18n = require('./i18n.cjs');
12
13
  var search = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/search.cjs');
13
14
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.cjs');
14
- var button = require('../button/button.cjs');
15
15
 
16
16
  function SearchField(originalProps) {
17
17
  const [
@@ -22,6 +22,7 @@ function SearchField(originalProps) {
22
22
  searchIcon,
23
23
  inputProps,
24
24
  classNames,
25
+ clearIcon,
25
26
  ...props
26
27
  },
27
28
  variantProps
@@ -68,7 +69,7 @@ function SearchField(originalProps) {
68
69
  ...inputProps
69
70
  }
70
71
  ),
71
- /* @__PURE__ */ jsxRuntime.jsx(
72
+ clearIcon !== null && /* @__PURE__ */ jsxRuntime.jsx(
72
73
  button.Button,
73
74
  {
74
75
  isIconOnly: true,
@@ -76,8 +77,10 @@ function SearchField(originalProps) {
76
77
  variant: "clear",
77
78
  color: "sub",
78
79
  size: variantProps.size,
79
- className: styles.clearButton({ className: classNames?.clearButton }),
80
- children: /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
80
+ className: styles.clearButton({
81
+ className: classNames?.clearButton
82
+ }),
83
+ children: clearIcon ?? /* @__PURE__ */ jsxRuntime.jsx(x.default, { "aria-hidden": true })
81
84
  }
82
85
  )
83
86
  ] }),
package/dist/cjs/select/select.cjs CHANGED
@@ -7,6 +7,7 @@ var $670gB$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 button = require('../button/button.cjs');
10
11
  var field = require('../field/field.cjs');
11
12
  var popover = require('../popover/popover.cjs');
12
13
  var sizing = require('../system/react-utils/sizing.cjs');
@@ -14,7 +15,6 @@ var utils = require('../system/utils.cjs');
14
15
  var i18n = require('./i18n.cjs');
15
16
  var selectVariantContext = require('./select-variant-context.cjs');
16
17
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
17
- var button = require('../button/button.cjs');
18
18
 
19
19
  const calculateEstimatedRowHeight = (size) => {
20
20
  switch (size) {
package/dist/cjs/sidebar/sidebar-list.cjs CHANGED
@@ -8,11 +8,11 @@ var reactAria = require('react-aria');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var reactStately = require('react-stately');
10
10
  var ouiTheme = require('@opengovsg/oui-theme');
11
+ var button = require('../button/button.cjs');
11
12
  var utils = require('../system/utils.cjs');
12
13
  var context = require('./context.cjs');
13
14
  var i18n = require('./i18n.cjs');
14
15
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
15
- var button = require('../button/button.cjs');
16
16
 
17
17
  const SidebarListSection = ({
18
18
  onlyCaretToggle,
package/dist/esm/banner/banner.js CHANGED
@@ -5,10 +5,10 @@ import { useMemo, useRef } from 'react';
5
5
  import { useLocalizedStringFormatter, 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 { i18nStrings } from './i18n.js';
9
10
  import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
10
11
  import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.js';
11
- import { Button } from '../button/button.js';
12
12
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
13
13
 
14
14
  const Banner = ({
package/dist/esm/date-picker/date-picker.js CHANGED
@@ -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';
7
10
  import { DateInput } from '../date-field/date-field.js';
8
11
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
12
  import { Popover } from '../popover/popover.js';
10
13
  import { mapPropsVariants } from '../system/utils.js';
11
14
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/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 [
package/dist/esm/date-range-picker/date-range-picker.js CHANGED
@@ -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';
8
9
  import { DateInput } from '../date-field/date-field.js';
9
10
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
10
11
  import { Popover } from '../popover/popover.js';
11
12
  import { RangeCalendar } from '../range-calendar/range-calendar.js';
12
13
  import { mapPropsVariants } from '../system/utils.js';
13
14
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.js';
14
- import { Button } from '../button/button.js';
15
15
 
16
16
  function DateRangePicker(originalProps) {
17
17
  const [
package/dist/esm/file-dropzone/file-info.js CHANGED
@@ -3,10 +3,10 @@
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useState, useEffect } from 'react';
5
5
  import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
6
+ import { Button } from '../button/button.js';
6
7
  import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
7
8
  import { formatBytes } from './utils.js';
8
9
  import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.js';
9
- import { Button } from '../button/button.js';
10
10
 
11
11
  const FileInfo = ({ file, imagePreview, classNames }) => {
12
12
  const {
package/dist/esm/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  export { useControllableState } from './hooks/use-controllable-state.js';
3
3
  export { useDraggable } from './hooks/use-draggable.js';
4
+ export { Button } from './button/button.js';
4
5
  export { GovtBanner } from './govt-banner/govt-banner.js';
5
6
  export { Ripple } from './ripple/ripple.js';
6
7
  export { useRipple } from './ripple/use-ripple.js';
@@ -17,11 +18,17 @@ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
17
18
  export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
18
19
  export { ComboBoxItem } from './combo-box/combo-box-item.js';
19
20
  export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
21
+ export { Banner } from './banner/banner.js';
20
22
  export { TagField } from './tag-field/tag-field.js';
21
23
  export { TagFieldItem } from './tag-field/tag-field-item.js';
22
24
  export { Select } from './select/select.js';
23
25
  export { SelectItem } from './select/select-item.js';
24
26
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
27
+ export { Badge } from './badge/badge.js';
28
+ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
29
+ export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
30
+ export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
31
+ export { CalendarDate } from '@internationalized/date';
25
32
  export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
26
33
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
27
34
  export { Popover } from './popover/popover.js';
@@ -29,6 +36,8 @@ export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVar
29
36
  export { DateField, DateInput } from './date-field/date-field.js';
30
37
  export { DatePicker } from './date-picker/date-picker.js';
31
38
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
39
+ export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
40
+ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
32
41
  export { Pagination } from './pagination/pagination.js';
33
42
  export { PaginationCursor } from './pagination/pagination-cursor.js';
34
43
  export { PaginationItem } from './pagination/pagination-item.js';
@@ -55,9 +64,11 @@ export { NavbarItem } from './navbar/navbar-item.js';
55
64
  export { useNavbar } from './navbar/use-navbar.js';
56
65
  export { NavbarProvider, useNavbarContext } from './navbar/navbar-context.js';
57
66
  export { Avatar } from './avatar/index.js';
67
+ export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
58
68
  export { TimeField } from './time-field/time-field.js';
59
69
  export { SearchField } from './search-field/search-field.js';
60
70
  export { Link } from './link/link.js';
71
+ export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
61
72
  export { Sidebar, generateSidebarItems } from './sidebar/sidebar.js';
62
73
  export { SidebarRoot } from './sidebar/sidebar-root.js';
63
74
  export { SidebarItem } from './sidebar/sidebar-item.js';
@@ -68,19 +79,8 @@ export { CountrySelect, FlagComponent, PhoneInput, PhoneNumberField } from './ph
68
79
  export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input';
69
80
  export { Infobox } from './infobox/infobox.js';
70
81
  export { Radio, RadioGroup } from './radio-group/radio.js';
71
- export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
72
82
  export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
73
83
  export { AvatarFallback, AvatarImage, AvatarRoot } from './avatar/avatar.js';
74
84
  export { AvatarGroup } from './avatar/avatar-group.js';
75
85
  export { AvatarGroupProvider, useAvatarGroup } from './avatar/avatar-group-context.js';
76
- export { Badge } from './badge/badge.js';
77
- export { Banner } from './banner/banner.js';
78
- export { Breadcrumb, Breadcrumbs } from './breadcrumbs/breadcrumbs.js';
79
- export { Button } from './button/button.js';
80
- export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
81
- export { CalendarDate } from '@internationalized/date';
82
- export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
83
- export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
84
- export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
85
- export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
86
86
  export { toast } from 'sonner';
package/dist/esm/modal/modal-content.js CHANGED
@@ -5,10 +5,10 @@ import { useContext, isValidElement } from 'react';
5
5
  import { useLocalizedStringFormatter } from 'react-aria';
6
6
  import { Dialog } from 'react-aria-components';
7
7
  import { cn } from '@opengovsg/oui-theme';
8
+ import { Button } from '../button/button.js';
8
9
  import { i18nStrings } from './i18n.js';
9
10
  import { ModalVariantContext } from './modal-variant-context.js';
10
11
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
11
- import { Button } from '../button/button.js';
12
12
 
13
13
  function ModalContent({
14
14
  closeButtonContent: closeButtonContentProp,
package/dist/esm/number-field/number-field.js CHANGED
@@ -3,12 +3,12 @@
3
3
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
4
  import { NumberField as NumberField$1 } from 'react-aria-components';
5
5
  import { numberFieldStyles, fieldBorderStyles, cn, composeTailwindRenderProps, dataAttr } from '@opengovsg/oui-theme';
6
+ import { Button } from '../button/button.js';
6
7
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
7
8
  import { Input } from '../input/input.js';
8
9
  import { mapPropsVariants } from '../system/utils.js';
9
10
  import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.js';
10
11
  import Plus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.js';
11
- import { Button } from '../button/button.js';
12
12
 
13
13
  function NumberField(originalProps) {
14
14
  const [
package/dist/esm/range-calendar/range-calendar.js CHANGED
@@ -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(
package/dist/esm/search-field/search-field.js CHANGED
@@ -3,13 +3,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useLocalizedStringFormatter } from 'react-aria';
4
4
  import { SearchField as SearchField$1 } from 'react-aria-components';
5
5
  import { searchFieldStyles, composeRenderProps } from '@opengovsg/oui-theme';
6
+ import { Button } from '../button/button.js';
6
7
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
7
8
  import { Input } from '../input/input.js';
8
9
  import { mapPropsVariants } from '../system/utils.js';
9
10
  import { i18nStrings } from './i18n.js';
10
11
  import Search from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/search.js';
11
12
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
12
- import { Button } from '../button/button.js';
13
13
 
14
14
  function SearchField(originalProps) {
15
15
  const [
@@ -20,6 +20,7 @@ function SearchField(originalProps) {
20
20
  searchIcon,
21
21
  inputProps,
22
22
  classNames,
23
+ clearIcon,
23
24
  ...props
24
25
  },
25
26
  variantProps
@@ -66,7 +67,7 @@ function SearchField(originalProps) {
66
67
  ...inputProps
67
68
  }
68
69
  ),
69
- /* @__PURE__ */ jsx(
70
+ clearIcon !== null && /* @__PURE__ */ jsx(
70
71
  Button,
71
72
  {
72
73
  isIconOnly: true,
@@ -74,8 +75,10 @@ function SearchField(originalProps) {
74
75
  variant: "clear",
75
76
  color: "sub",
76
77
  size: variantProps.size,
77
- className: styles.clearButton({ className: classNames?.clearButton }),
78
- children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
78
+ className: styles.clearButton({
79
+ className: classNames?.clearButton
80
+ }),
81
+ children: clearIcon ?? /* @__PURE__ */ jsx(X, { "aria-hidden": true })
79
82
  }
80
83
  )
81
84
  ] }),
package/dist/esm/select/select.js CHANGED
@@ -5,6 +5,7 @@ import { useMemo, isValidElement, cloneElement } from 'react';
5
5
  import { useLocalizedStringFormatter } from 'react-aria';
6
6
  import { useFilter, Virtualizer, ListLayout, ListBox, Provider, Select as Select$1, SelectValue, Autocomplete, SearchField, Input } from 'react-aria-components';
7
7
  import { selectStyles, cn, composeRenderProps } from '@opengovsg/oui-theme';
8
+ import { Button } from '../button/button.js';
8
9
  import { Label, Description, FieldError } from '../field/field.js';
9
10
  import { Popover } from '../popover/popover.js';
10
11
  import { useElementWidth } from '../system/react-utils/sizing.js';
@@ -12,7 +13,6 @@ import { mapPropsVariants } from '../system/utils.js';
12
13
  import { i18nStrings } from './i18n.js';
13
14
  import { SelectVariantContext } from './select-variant-context.js';
14
15
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
15
- import { Button } from '../button/button.js';
16
16
 
17
17
  const calculateEstimatedRowHeight = (size) => {
18
18
  switch (size) {
package/dist/esm/sidebar/sidebar-list.js CHANGED
@@ -6,11 +6,11 @@ import { useLocalizedStringFormatter } from 'react-aria';
6
6
  import { Disclosure, DisclosurePanel, Provider, Link, Button as Button$1 } from 'react-aria-components';
7
7
  import { useDisclosureState } from 'react-stately';
8
8
  import { dataAttr } from '@opengovsg/oui-theme';
9
+ import { Button } from '../button/button.js';
9
10
  import { forwardRef } from '../system/utils.js';
10
11
  import { useSidebarStyleContext, useSidebarCollapseContext, SidebarNestContext, useSidebarNestContext } from './context.js';
11
12
  import { i18nStrings } from './i18n.js';
12
13
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
13
- import { Button } from '../button/button.js';
14
14
 
15
15
  const SidebarListSection = ({
16
16
  onlyCaretToggle,
package/dist/types/search-field/search-field.d.ts CHANGED
@@ -10,6 +10,11 @@ export interface SearchFieldProps extends AriaSearchFieldProps, SearchFieldVaria
10
10
  searchIcon?: React.ReactNode | null;
11
11
  inputProps?: Partial<InputProps>;
12
12
  classNames?: SlotsToClasses<SearchFieldSlots>;
13
+ /**
14
+ * The icon to show in the clear button. Defaults to an `XIcon`. Set to `null` to hide the clear button.
15
+ * @example Can also be used to provide a spinner icon while the search is loading.
16
+ */
17
+ clearIcon?: React.ReactNode;
13
18
  }
14
19
  export declare function SearchField(originalProps: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
15
20
  //# sourceMappingURL=search-field.d.ts.map
package/dist/types/search-field/search-field.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD;yCACqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CAwE1D"}
1
+ {"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EACT,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD;yCACqC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAChC,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CA6E1D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.49",
3
+ "version": "0.0.50",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -50,11 +50,11 @@
50
50
  "storybook": "10.1.10",
51
51
  "tsx": "^4.21.0",
52
52
  "typescript": "5.7.3",
53
- "@oui/chromatic": "0.0.0",
53
+ "@opengovsg/oui-theme": "0.0.50",
54
54
  "@oui/eslint-config": "0.0.0",
55
+ "@oui/chromatic": "0.0.0",
55
56
  "@oui/prettier-config": "0.0.0",
56
- "@oui/typescript-config": "0.0.0",
57
- "@opengovsg/oui-theme": "0.0.49"
57
+ "@oui/typescript-config": "0.0.0"
58
58
  },
59
59
  "dependencies": {
60
60
  "@internationalized/date": "^3.10.1",
@@ -90,7 +90,7 @@
90
90
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
91
91
  "react": ">= 18",
92
92
  "react-aria-components": "^1.14.0",
93
- "@opengovsg/oui-theme": "0.0.49"
93
+ "@opengovsg/oui-theme": "0.0.50"
94
94
  },
95
95
  "scripts": {
96
96
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",