@opengovsg/oui 0.0.0-snapshot-20250923040433 → 0.0.0-snapshot-20251002072708

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 (29) hide show
  1. package/dist/cjs/banner/banner.cjs +1 -1
  2. package/dist/cjs/checkbox/checkbox.cjs +1 -1
  3. package/dist/cjs/combo-box/combo-box.cjs +1 -1
  4. package/dist/cjs/date-field/date-field.cjs +1 -1
  5. package/dist/cjs/date-picker/date-picker.cjs +5 -4
  6. package/dist/cjs/date-range-picker/date-range-picker.cjs +3 -3
  7. package/dist/cjs/index.cjs +50 -50
  8. package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
  9. package/dist/cjs/select/select.cjs +2 -2
  10. package/dist/cjs/tag-field/tag-field.cjs +1 -1
  11. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  12. package/dist/cjs/text-field/text-field.cjs +1 -1
  13. package/dist/cjs/toggle/toggle.cjs +3 -1
  14. package/dist/esm/banner/banner.js +1 -1
  15. package/dist/esm/checkbox/checkbox.js +1 -1
  16. package/dist/esm/combo-box/combo-box.js +1 -1
  17. package/dist/esm/date-field/date-field.js +1 -1
  18. package/dist/esm/date-picker/date-picker.js +5 -4
  19. package/dist/esm/date-range-picker/date-range-picker.js +3 -3
  20. package/dist/esm/index.js +17 -17
  21. package/dist/esm/range-calendar/range-calendar.js +1 -1
  22. package/dist/esm/select/select.js +2 -2
  23. package/dist/esm/tag-field/tag-field.js +1 -1
  24. package/dist/esm/text-area-field/text-area-field.js +1 -1
  25. package/dist/esm/text-field/text-field.js +1 -1
  26. package/dist/esm/toggle/toggle.js +3 -1
  27. package/dist/types/toggle/toggle.d.ts +6 -1
  28. package/dist/types/toggle/toggle.d.ts.map +1 -1
  29. package/package.json +3 -3
package/dist/cjs/banner/banner.cjs CHANGED
@@ -7,9 +7,9 @@ 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 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 = {
package/dist/cjs/checkbox/checkbox.cjs CHANGED
@@ -5,11 +5,11 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
+ var field = require('../field/field.cjs');
8
9
  var utils = require('../system/utils.cjs');
9
10
  var checkboxGroupStyleContext = require('./checkbox-group-style-context.cjs');
10
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');
11
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');
12
- var field = require('../field/field.cjs');
13
13
 
14
14
  const Checkbox = ({
15
15
  classNames,
package/dist/cjs/combo-box/combo-box.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 field = require('../field/field.cjs');
10
11
  var popover = require('../popover/popover.cjs');
11
12
  var utils = require('../system/utils.cjs');
12
13
  var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
13
- var field = require('../field/field.cjs');
14
14
  var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
15
15
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
16
16
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
package/dist/cjs/date-field/date-field.cjs CHANGED
@@ -6,8 +6,8 @@ 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 utils = require('../system/utils.cjs');
10
9
  var field = require('../field/field.cjs');
10
+ var utils = require('../system/utils.cjs');
11
11
 
12
12
  function DateField(originalProps) {
13
13
  const [
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');
12
+ var dateField = require('../date-field/date-field.cjs');
13
+ var field = require('../field/field.cjs');
9
14
  var popover = require('../popover/popover.cjs');
10
15
  var utils = require('../system/utils.cjs');
11
- var dateField = require('../date-field/date-field.cjs');
12
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');
13
- var calendar$1 = require('../calendar/calendar.cjs');
14
- var field = require('../field/field.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');
11
+ var dateField = require('../date-field/date-field.cjs');
12
+ var field = require('../field/field.cjs');
10
13
  var popover = require('../popover/popover.cjs');
11
14
  var rangeCalendar = require('../range-calendar/range-calendar.cjs');
12
15
  var utils = require('../system/utils.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 field = require('../field/field.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 [
package/dist/cjs/index.cjs CHANGED
@@ -1,6 +1,9 @@
1
1
  "use strict";
2
2
  'use strict';
3
3
 
4
+ var useControllableState = require('./hooks/use-controllable-state.cjs');
5
+ var button = require('./button/button.cjs');
6
+ var govtBanner = require('./govt-banner/govt-banner.cjs');
4
7
  var ripple = require('./ripple/ripple.cjs');
5
8
  var useRipple = require('./ripple/use-ripple.cjs');
6
9
  var spinner = require('./spinner/spinner.cjs');
@@ -9,44 +12,44 @@ var toggle = require('./toggle/toggle.cjs');
9
12
  var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
10
13
  var input = require('./input/input.cjs');
11
14
  var textField = require('./text-field/text-field.cjs');
15
+ var field = require('./field/field.cjs');
12
16
  var textArea = require('./text-area/text-area.cjs');
13
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');
14
22
  var tagField = require('./tag-field/tag-field.cjs');
15
23
  var tagFieldItem = require('./tag-field/tag-field-item.cjs');
16
24
  var select = require('./select/select.cjs');
17
25
  var selectItem = require('./select/select-item.cjs');
18
26
  var selectVariantContext = require('./select/select-variant-context.cjs');
27
+ var calendar = require('./calendar/calendar.cjs');
28
+ var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
29
+ var utils = require('./calendar/utils.cjs');
30
+ var date = require('@internationalized/date');
19
31
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
20
32
  var menu = require('./menu/menu.cjs');
21
33
  var popover = require('./popover/popover.cjs');
22
34
  var tabs = require('./tabs/tabs.cjs');
35
+ var dateField = require('./date-field/date-field.cjs');
36
+ var datePicker = require('./date-picker/date-picker.cjs');
37
+ var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
38
+ var checkbox = require('./checkbox/checkbox.cjs');
39
+ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
23
40
  var pagination = require('./pagination/pagination.cjs');
24
41
  var paginationCursor = require('./pagination/pagination-cursor.cjs');
25
42
  var paginationItem = require('./pagination/pagination-item.cjs');
26
43
  var usePagination = require('./pagination/hooks/use-pagination.cjs');
27
44
  var usePagination$1 = require('./pagination/use-pagination.cjs');
28
- var useControllableState = require('./hooks/use-controllable-state.cjs');
29
- var button = require('./button/button.cjs');
30
- var govtBanner = require('./govt-banner/govt-banner.cjs');
31
- var field = require('./field/field.cjs');
32
- var comboBox = require('./combo-box/combo-box.cjs');
33
- var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
34
- var comboBoxItem = require('./combo-box/combo-box-item.cjs');
35
- var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
36
45
  var banner = require('./banner/banner.cjs');
37
46
  var badge = require('./badge/badge.cjs');
38
- var date = require('@internationalized/date');
39
- var calendar = require('./calendar/calendar.cjs');
40
- var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
41
- var utils = require('./calendar/utils.cjs');
42
- var dateField = require('./date-field/date-field.cjs');
43
- var datePicker = require('./date-picker/date-picker.cjs');
44
- var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
45
- var checkbox = require('./checkbox/checkbox.cjs');
46
- var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
47
47
 
48
48
 
49
49
 
50
+ exports.useControllableState = useControllableState.useControllableState;
51
+ exports.Button = button.Button;
52
+ exports.GovtBanner = govtBanner.GovtBanner;
50
53
  exports.Ripple = ripple.Ripple;
51
54
  exports.useRipple = useRipple.useRipple;
52
55
  exports.Spinner = spinner.Spinner;
@@ -55,14 +58,36 @@ exports.Toggle = toggle.Toggle;
55
58
  exports.SkipNavLink = skipNavLink.SkipNavLink;
56
59
  exports.Input = input.Input;
57
60
  exports.TextField = textField.TextField;
61
+ exports.Description = field.Description;
62
+ exports.FieldError = field.FieldError;
63
+ exports.FieldGroup = field.FieldGroup;
64
+ exports.Label = field.Label;
58
65
  exports.TextArea = textArea.TextArea;
59
66
  exports.TextAreaField = textAreaField.TextAreaField;
67
+ exports.ComboBox = comboBox.ComboBox;
68
+ exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
69
+ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
70
+ exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
71
+ exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
72
+ exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
60
73
  exports.TagField = tagField.TagField;
61
74
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
62
75
  exports.Select = select.Select;
63
76
  exports.SelectItem = selectItem.SelectItem;
64
77
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
65
78
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
79
+ exports.Calendar = calendar.Calendar;
80
+ exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
81
+ exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
82
+ exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
83
+ exports.getEraFormat = utils.getEraFormat;
84
+ exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
85
+ exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
86
+ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
87
+ Object.defineProperty(exports, "CalendarDate", {
88
+ enumerable: true,
89
+ get: function () { return date.CalendarDate; }
90
+ });
66
91
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
67
92
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
68
93
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -81,39 +106,6 @@ exports.TabPanel = tabs.TabPanel;
81
106
  exports.Tabs = tabs.Tabs;
82
107
  exports.TabsVariantContext = tabs.TabsVariantContext;
83
108
  exports.useTabsVariantContext = tabs.useTabsVariantContext;
84
- exports.Pagination = pagination.Pagination;
85
- exports.PaginationCursor = paginationCursor.PaginationCursor;
86
- exports.PaginationItem = paginationItem.PaginationItem;
87
- exports.PaginationItemType = usePagination.PaginationItemType;
88
- exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
89
- exports.usePagination = usePagination$1.usePagination;
90
- exports.useControllableState = useControllableState.useControllableState;
91
- exports.Button = button.Button;
92
- exports.GovtBanner = govtBanner.GovtBanner;
93
- exports.Description = field.Description;
94
- exports.FieldError = field.FieldError;
95
- exports.FieldGroup = field.FieldGroup;
96
- exports.Label = field.Label;
97
- exports.ComboBox = comboBox.ComboBox;
98
- exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
99
- exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
100
- exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
101
- exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
102
- exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
103
- exports.Banner = banner.Banner;
104
- exports.Badge = badge.Badge;
105
- Object.defineProperty(exports, "CalendarDate", {
106
- enumerable: true,
107
- get: function () { return date.CalendarDate; }
108
- });
109
- exports.Calendar = calendar.Calendar;
110
- exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
111
- exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
112
- exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
113
- exports.getEraFormat = utils.getEraFormat;
114
- exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
115
- exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
116
- exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
117
109
  exports.DateField = dateField.DateField;
118
110
  exports.DateInput = dateField.DateInput;
119
111
  exports.DatePicker = datePicker.DatePicker;
@@ -122,3 +114,11 @@ exports.Checkbox = checkbox.Checkbox;
122
114
  exports.CheckboxGroup = checkbox.CheckboxGroup;
123
115
  exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
124
116
  exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
117
+ exports.Pagination = pagination.Pagination;
118
+ exports.PaginationCursor = paginationCursor.PaginationCursor;
119
+ exports.PaginationItem = paginationItem.PaginationItem;
120
+ exports.PaginationItemType = usePagination.PaginationItemType;
121
+ exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
122
+ exports.usePagination = usePagination$1.usePagination;
123
+ exports.Banner = banner.Banner;
124
+ exports.Badge = badge.Badge;
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/select/select.cjs CHANGED
@@ -6,12 +6,12 @@ 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 field = require('../field/field.cjs');
9
11
  var popover = require('../popover/popover.cjs');
10
12
  var utils = require('../system/utils.cjs');
11
13
  var selectVariantContext = require('./select-variant-context.cjs');
12
- var field = require('../field/field.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) {
package/dist/cjs/tag-field/tag-field.cjs CHANGED
@@ -6,6 +6,7 @@ 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 field = require('../field/field.cjs');
9
10
  var input = require('../input/input.cjs');
10
11
  var popover = require('../popover/popover.cjs');
11
12
  var tagFieldItem = require('./tag-field-item.cjs');
@@ -14,7 +15,6 @@ var tagFieldRoot = require('./tag-field-root.cjs');
14
15
  var tagFieldTagList = require('./tag-field-tag-list.cjs');
15
16
  var tagFieldTrigger = require('./tag-field-trigger.cjs');
16
17
  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');
17
- var field = require('../field/field.cjs');
18
18
 
19
19
  function TagField({
20
20
  classNames,
package/dist/cjs/text-area-field/text-area-field.cjs CHANGED
@@ -5,8 +5,8 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
- var textArea = require('../text-area/text-area.cjs');
9
8
  var field = require('../field/field.cjs');
9
+ var textArea = require('../text-area/text-area.cjs');
10
10
 
11
11
  function TextAreaField({
12
12
  label,
package/dist/cjs/text-field/text-field.cjs CHANGED
@@ -5,8 +5,8 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
- var input = require('../input/input.cjs');
9
8
  var field = require('../field/field.cjs');
9
+ var input = require('../input/input.cjs');
10
10
 
11
11
  function TextField({
12
12
  label,
package/dist/cjs/toggle/toggle.cjs CHANGED
@@ -13,6 +13,7 @@ const Toggle = ({
13
13
  children,
14
14
  classNames,
15
15
  thumbIcon,
16
+ labelPlacement = "end",
16
17
  ...originalProps
17
18
  }) => {
18
19
  const [props, variantProps] = utils.mapPropsVariants(
@@ -38,8 +39,9 @@ const Toggle = ({
38
39
  slots.base()
39
40
  ),
40
41
  children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
42
+ labelPlacement === "start" ? children : null,
41
43
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.track({ className: classNames?.track }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.thumb({ className: classNames?.thumb }), children: thumbIcon && clonedThumbIcon(renderProps) }) }),
42
- children
44
+ labelPlacement === "end" ? children : null
43
45
  ] })
44
46
  }
45
47
  );
package/dist/esm/banner/banner.js CHANGED
@@ -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 = {
package/dist/esm/checkbox/checkbox.js CHANGED
@@ -3,11 +3,11 @@
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
5
5
  import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
6
+ import { Label, Description, FieldError } from '../field/field.js';
6
7
  import { mapPropsVariants } from '../system/utils.js';
7
8
  import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
8
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';
9
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';
10
- import { Label, Description, FieldError } from '../field/field.js';
11
11
 
12
12
  const Checkbox = ({
13
13
  classNames,
package/dist/esm/combo-box/combo-box.js CHANGED
@@ -5,10 +5,10 @@ import { useMemo, useCallback } from 'react';
5
5
  import { useMessageFormatter } from 'react-aria';
6
6
  import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
7
7
  import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
8
+ import { Label, FieldGroup, 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 { ComboBoxVariantContext } from './combo-box-variant-context.js';
11
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
12
12
  import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
13
13
  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';
14
14
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
package/dist/esm/date-field/date-field.js CHANGED
@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
5
  import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
6
6
  import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
7
- import { mapPropsVariants } from '../system/utils.js';
8
7
  import { Label, Description, FieldError } from '../field/field.js';
8
+ import { mapPropsVariants } from '../system/utils.js';
9
9
 
10
10
  function DateField(originalProps) {
11
11
  const [
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';
10
+ import { DateInput } from '../date-field/date-field.js';
11
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
7
12
  import { Popover } from '../popover/popover.js';
8
13
  import { mapPropsVariants } from '../system/utils.js';
9
- import { DateInput } from '../date-field/date-field.js';
10
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';
11
- import { Calendar as Calendar$1 } from '../calendar/calendar.js';
12
- import { Label, FieldGroup, Description, FieldError } from '../field/field.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';
9
+ import { DateInput } from '../date-field/date-field.js';
10
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
8
11
  import { Popover } from '../popover/popover.js';
9
12
  import { RangeCalendar } from '../range-calendar/range-calendar.js';
10
13
  import { mapPropsVariants } from '../system/utils.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 { Label, FieldGroup, Description, FieldError } from '../field/field.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 [
package/dist/esm/index.js CHANGED
@@ -1,4 +1,7 @@
1
1
  "use strict";
2
+ export { useControllableState } from './hooks/use-controllable-state.js';
3
+ export { Button } from './button/button.js';
4
+ export { GovtBanner } from './govt-banner/govt-banner.js';
2
5
  export { Ripple } from './ripple/ripple.js';
3
6
  export { useRipple } from './ripple/use-ripple.js';
4
7
  export { Spinner } from './spinner/spinner.js';
@@ -7,38 +10,35 @@ export { Toggle } from './toggle/toggle.js';
7
10
  export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
8
11
  export { Input } from './input/input.js';
9
12
  export { TextField } from './text-field/text-field.js';
13
+ export { Description, FieldError, FieldGroup, Label } from './field/field.js';
10
14
  export { TextArea } from './text-area/text-area.js';
11
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';
12
20
  export { TagField } from './tag-field/tag-field.js';
13
21
  export { TagFieldItem } from './tag-field/tag-field-item.js';
14
22
  export { Select } from './select/select.js';
15
23
  export { SelectItem } from './select/select-item.js';
16
24
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
25
+ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
26
+ export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
27
+ export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
28
+ export { CalendarDate } from '@internationalized/date';
17
29
  export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
18
30
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
19
31
  export { Popover } from './popover/popover.js';
20
32
  export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
33
+ export { DateField, DateInput } from './date-field/date-field.js';
34
+ export { DatePicker } from './date-picker/date-picker.js';
35
+ export { DateRangePicker } from './date-range-picker/date-range-picker.js';
36
+ export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
37
+ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
21
38
  export { Pagination } from './pagination/pagination.js';
22
39
  export { PaginationCursor } from './pagination/pagination-cursor.js';
23
40
  export { PaginationItem } from './pagination/pagination-item.js';
24
41
  export { PaginationItemType } from './pagination/hooks/use-pagination.js';
25
42
  export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
26
- export { useControllableState } from './hooks/use-controllable-state.js';
27
- export { Button } from './button/button.js';
28
- export { GovtBanner } from './govt-banner/govt-banner.js';
29
- export { Description, FieldError, FieldGroup, Label } from './field/field.js';
30
- export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
31
- export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
32
- export { ComboBoxItem } from './combo-box/combo-box-item.js';
33
- export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
34
43
  export { Banner } from './banner/banner.js';
35
44
  export { Badge } from './badge/badge.js';
36
- export { CalendarDate } from '@internationalized/date';
37
- export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
38
- export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
39
- export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
40
- export { DateField, DateInput } from './date-field/date-field.js';
41
- export { DatePicker } from './date-picker/date-picker.js';
42
- export { DateRangePicker } from './date-range-picker/date-range-picker.js';
43
- export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
44
- export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
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/select/select.js CHANGED
@@ -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';
8
+ import { Label, Description, FieldError } from '../field/field.js';
7
9
  import { Popover } from '../popover/popover.js';
8
10
  import { mapPropsVariants } from '../system/utils.js';
9
11
  import { SelectVariantContext } from './select-variant-context.js';
10
- import { Label, Description, FieldError } from '../field/field.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) {
package/dist/esm/tag-field/tag-field.js CHANGED
@@ -4,6 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { createElement } from 'react';
5
5
  import { composeRenderProps } from 'react-aria-components';
6
6
  import { tagFieldStyles } from '@opengovsg/oui-theme';
7
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
7
8
  import { Input } from '../input/input.js';
8
9
  import { Popover } from '../popover/popover.js';
9
10
  import { TagFieldItem } from './tag-field-item.js';
@@ -12,7 +13,6 @@ import { TagFieldRoot } from './tag-field-root.js';
12
13
  import { TagFieldTagList } from './tag-field-tag-list.js';
13
14
  import { TagFieldTrigger } from './tag-field-trigger.js';
14
15
  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';
15
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
16
16
 
17
17
  function TagField({
18
18
  classNames,
package/dist/esm/text-area-field/text-area-field.js CHANGED
@@ -3,8 +3,8 @@
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { TextField } from 'react-aria-components';
5
5
  import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
6
- import { TextArea } from '../text-area/text-area.js';
7
6
  import { Label, Description, FieldError } from '../field/field.js';
7
+ import { TextArea } from '../text-area/text-area.js';
8
8
 
9
9
  function TextAreaField({
10
10
  label,
package/dist/esm/text-field/text-field.js CHANGED
@@ -3,8 +3,8 @@
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { TextField as TextField$1 } from 'react-aria-components';
5
5
  import { composeTailwindRenderProps } from '@opengovsg/oui-theme';
6
- import { Input } from '../input/input.js';
7
6
  import { Label, Description, FieldError } from '../field/field.js';
7
+ import { Input } from '../input/input.js';
8
8
 
9
9
  function TextField({
10
10
  label,
package/dist/esm/toggle/toggle.js CHANGED
@@ -11,6 +11,7 @@ const Toggle = ({
11
11
  children,
12
12
  classNames,
13
13
  thumbIcon,
14
+ labelPlacement = "end",
14
15
  ...originalProps
15
16
  }) => {
16
17
  const [props, variantProps] = mapPropsVariants(
@@ -36,8 +37,9 @@ const Toggle = ({
36
37
  slots.base()
37
38
  ),
38
39
  children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
40
+ labelPlacement === "start" ? children : null,
39
41
  /* @__PURE__ */ jsx("div", { className: slots.track({ className: classNames?.track }), children: /* @__PURE__ */ jsx("span", { className: slots.thumb({ className: classNames?.thumb }), children: thumbIcon && clonedThumbIcon(renderProps) }) }),
40
- children
42
+ labelPlacement === "end" ? children : null
41
43
  ] })
42
44
  }
43
45
  );
package/dist/types/toggle/toggle.d.ts CHANGED
@@ -10,6 +10,11 @@ interface _ToggleProps extends Omit<AriaSwitchProps, "children">, VariantProps<t
10
10
  * The icon to be displayed inside the thumb.
11
11
  */
12
12
  thumbIcon?: React.ReactElement | ((props: ToggleThumbIconProps) => React.ReactNode);
13
+ /**
14
+ * Where to place the children label.
15
+ * @defaultValue "end"
16
+ */
17
+ labelPlacement?: "start" | "end";
13
18
  }
14
19
  export type ToggleProps = _ToggleProps & ({
15
20
  children: React.ReactNode;
@@ -18,6 +23,6 @@ export type ToggleProps = _ToggleProps & ({
18
23
  children?: never;
19
24
  "aria-label": string;
20
25
  });
21
- export declare const Toggle: ({ children, classNames, thumbIcon, ...originalProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const Toggle: ({ children, classNames, thumbIcon, labelPlacement, ...originalProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
22
27
  export {};
23
28
  //# sourceMappingURL=toggle.d.ts.map
package/dist/types/toggle/toggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA8B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAI/E,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,YACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC;;OAEG;IACH,SAAS,CAAC,EACN,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACvD;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GACpC,CACI;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB,CACJ,CAAA;AAEH,eAAO,MAAM,MAAM,0DAKhB,WAAW,4CAwCb,CAAA"}
1
+ {"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/toggle/toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EACX,YAAY,EACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAA8B,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAI/E,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB;IAC7D,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,UAAU,YACR,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,EACvC,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC;;OAEG;IACH,SAAS,CAAC,EACN,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;IACtD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACjC;AAED,MAAM,MAAM,WAAW,GAAG,YAAY,GACpC,CACI;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,GACD;IACE,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,YAAY,EAAE,MAAM,CAAA;CACrB,CACJ,CAAA;AAEH,eAAO,MAAM,MAAM,0EAMhB,WAAW,4CAyCb,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.0-snapshot-20250923040433",
3
+ "version": "0.0.0-snapshot-20251002072708",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -49,7 +49,7 @@
49
49
  "storybook": "9.1.6",
50
50
  "tsx": "^4.20.3",
51
51
  "typescript": "5.7.3",
52
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250923040433",
52
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20251002072708",
53
53
  "@oui/chromatic": "0.0.0",
54
54
  "@oui/eslint-config": "0.0.0",
55
55
  "@oui/prettier-config": "0.0.0",
@@ -83,7 +83,7 @@
83
83
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
84
84
  "react": ">= 18",
85
85
  "react-aria-components": "^1.12.2",
86
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250923040433"
86
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20251002072708"
87
87
  },
88
88
  "scripts": {
89
89
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",