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

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.
@@ -7,9 +7,9 @@ var $670gB$react = require('react');
7
7
  var utils = require('@react-aria/utils');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
- var ripple = require('../ripple/ripple.cjs');
11
10
  var useRipple = require('../ripple/use-ripple.cjs');
12
11
  var spinner = require('../spinner/spinner.cjs');
12
+ var ripple = require('../ripple/ripple.cjs');
13
13
 
14
14
  const Button = $670gB$react.forwardRef(
15
15
  ({
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var $670gB$react = require('react');
7
7
  var date = require('@internationalized/date');
8
8
  var reactAriaComponents = require('react-aria-components');
9
- var select = require('../select/select.cjs');
10
- var selectItem = require('../select/select-item.cjs');
11
9
  var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
12
10
  var calendarStyleContext = require('./calendar-style-context.cjs');
13
11
  var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
12
+ var select = require('../select/select.cjs');
13
+ var selectItem = require('../select/select-item.cjs');
14
14
  var useCalendarI18n = require('./hooks/use-calendar-i18n.cjs');
15
15
 
16
16
  const CalendarMonthDaySelector = () => {
@@ -7,13 +7,13 @@ 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 popover = require('../popover/popover.cjs');
11
10
  var utils = require('../system/utils.cjs');
12
11
  var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
13
12
  var field = require('../field/field.cjs');
14
13
  var chevronUp = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.cjs');
15
14
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
16
15
  var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
16
+ var popover = require('../popover/popover.cjs');
17
17
 
18
18
  const calculateEstimatedRowHeight = (size) => {
19
19
  switch (size) {
@@ -75,6 +75,7 @@ function ComboBox(originalProps) {
75
75
  dependencies,
76
76
  onClear,
77
77
  renderEmptyState: renderEmptyStateProp,
78
+ inputProps,
78
79
  ...props
79
80
  } = _props;
80
81
  const styles = ouiTheme.comboBoxStyles(variantProps);
@@ -135,7 +136,8 @@ function ComboBox(originalProps) {
135
136
  className: ouiTheme.composeRenderProps(
136
137
  classNames?.field,
137
138
  (className, renderProps) => styles.field({ ...renderProps, className })
138
- )
139
+ ),
140
+ ...inputProps
139
141
  }
140
142
  ),
141
143
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -6,13 +6,13 @@ 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 popover = require('../popover/popover.cjs');
10
9
  var utils = require('../system/utils.cjs');
11
10
  var dateField = require('../date-field/date-field.cjs');
12
11
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
13
12
  var calendar$1 = require('../calendar/calendar.cjs');
14
13
  var field = require('../field/field.cjs');
15
14
  var button = require('../button/button.cjs');
15
+ var popover = require('../popover/popover.cjs');
16
16
 
17
17
  function DatePicker(originalProps) {
18
18
  const [
@@ -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 popover = require('../popover/popover.cjs');
11
- var rangeCalendar = require('../range-calendar/range-calendar.cjs');
12
10
  var utils = require('../system/utils.cjs');
13
11
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
12
+ var rangeCalendar = require('../range-calendar/range-calendar.cjs');
14
13
  var field = require('../field/field.cjs');
15
14
  var dateField = require('../date-field/date-field.cjs');
16
15
  var button = require('../button/button.cjs');
16
+ var popover = require('../popover/popover.cjs');
17
17
 
18
18
  function DateRangePicker(originalProps) {
19
19
  const [
@@ -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');
14
- var tagField = require('./tag-field/tag-field.cjs');
15
- var tagFieldItem = require('./tag-field/tag-field-item.cjs');
16
- var select = require('./select/select.cjs');
17
- var selectItem = require('./select/select-item.cjs');
18
- var selectVariantContext = require('./select/select-variant-context.cjs');
19
- var rangeCalendar = require('./range-calendar/range-calendar.cjs');
20
- var menu = require('./menu/menu.cjs');
21
- var popover = require('./popover/popover.cjs');
22
- var tabs = require('./tabs/tabs.cjs');
23
- var pagination = require('./pagination/pagination.cjs');
24
- var paginationCursor = require('./pagination/pagination-cursor.cjs');
25
- var paginationItem = require('./pagination/pagination-item.cjs');
26
- var usePagination = require('./pagination/hooks/use-pagination.cjs');
27
- 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
18
  var comboBox = require('./combo-box/combo-box.cjs');
33
19
  var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
34
20
  var comboBoxItem = require('./combo-box/combo-box-item.cjs');
35
21
  var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
36
22
  var banner = require('./banner/banner.cjs');
23
+ var tagField = require('./tag-field/tag-field.cjs');
24
+ var tagFieldItem = require('./tag-field/tag-field-item.cjs');
25
+ var select = require('./select/select.cjs');
26
+ var selectItem = require('./select/select-item.cjs');
27
+ var selectVariantContext = require('./select/select-variant-context.cjs');
37
28
  var badge = require('./badge/badge.cjs');
38
29
  var date = require('@internationalized/date');
39
30
  var calendar = require('./calendar/calendar.cjs');
40
31
  var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
41
32
  var utils = require('./calendar/utils.cjs');
33
+ var rangeCalendar = require('./range-calendar/range-calendar.cjs');
34
+ var menu = require('./menu/menu.cjs');
35
+ var popover = require('./popover/popover.cjs');
36
+ var tabs = require('./tabs/tabs.cjs');
42
37
  var dateField = require('./date-field/date-field.cjs');
43
38
  var datePicker = require('./date-picker/date-picker.cjs');
44
39
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
45
40
  var checkbox = require('./checkbox/checkbox.cjs');
46
41
  var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context.cjs');
42
+ var usePagination = require('./pagination/hooks/use-pagination.cjs');
43
+ var pagination = require('./pagination/pagination.cjs');
44
+ var paginationCursor = require('./pagination/pagination-cursor.cjs');
45
+ var paginationItem = require('./pagination/pagination-item.cjs');
46
+ var usePagination$1 = require('./pagination/use-pagination.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,38 @@ 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;
73
+ exports.Banner = banner.Banner;
60
74
  exports.TagField = tagField.TagField;
61
75
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
62
76
  exports.Select = select.Select;
63
77
  exports.SelectItem = selectItem.SelectItem;
64
78
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
65
79
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
80
+ exports.Badge = badge.Badge;
81
+ Object.defineProperty(exports, "CalendarDate", {
82
+ enumerable: true,
83
+ get: function () { return date.CalendarDate; }
84
+ });
85
+ exports.Calendar = calendar.Calendar;
86
+ exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
87
+ exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
88
+ exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
89
+ exports.getEraFormat = utils.getEraFormat;
90
+ exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
91
+ exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
92
+ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
66
93
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
67
94
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
68
95
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -81,39 +108,6 @@ exports.TabPanel = tabs.TabPanel;
81
108
  exports.Tabs = tabs.Tabs;
82
109
  exports.TabsVariantContext = tabs.TabsVariantContext;
83
110
  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
111
  exports.DateField = dateField.DateField;
118
112
  exports.DateInput = dateField.DateInput;
119
113
  exports.DatePicker = datePicker.DatePicker;
@@ -122,3 +116,9 @@ exports.Checkbox = checkbox.Checkbox;
122
116
  exports.CheckboxGroup = checkbox.CheckboxGroup;
123
117
  exports.CheckboxGroupStyleContext = checkboxGroupStyleContext.CheckboxGroupStyleContext;
124
118
  exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGroupStyleContext;
119
+ exports.PaginationItemType = usePagination.PaginationItemType;
120
+ exports.Pagination = pagination.Pagination;
121
+ exports.PaginationCursor = paginationCursor.PaginationCursor;
122
+ exports.PaginationItem = paginationItem.PaginationItem;
123
+ exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
124
+ exports.usePagination = usePagination$1.usePagination;
@@ -6,11 +6,11 @@ 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 popover = require('../popover/popover.cjs');
10
9
  var utils = require('../system/utils.cjs');
11
10
  var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
12
11
  var chevronRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
13
12
  var context = require('../system/react-utils/context.cjs');
13
+ var popover = require('../popover/popover.cjs');
14
14
 
15
15
  const [MenuVariantContext, useMenuVariantContext] = context.createContext({
16
16
  name: "MenuVariantContext",
@@ -6,11 +6,11 @@ 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 popover = require('../popover/popover.cjs');
10
9
  var utils = require('../system/utils.cjs');
11
10
  var selectVariantContext = require('./select-variant-context.cjs');
12
11
  var field = require('../field/field.cjs');
13
12
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
13
+ var popover = require('../popover/popover.cjs');
14
14
  var button = require('../button/button.cjs');
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
@@ -6,8 +6,6 @@ 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 input = require('../input/input.cjs');
10
- var popover = require('../popover/popover.cjs');
11
9
  var tagFieldItem = require('./tag-field-item.cjs');
12
10
  var tagFieldList = require('./tag-field-list.cjs');
13
11
  var tagFieldRoot = require('./tag-field-root.cjs');
@@ -15,6 +13,8 @@ var tagFieldTagList = require('./tag-field-tag-list.cjs');
15
13
  var tagFieldTrigger = require('./tag-field-trigger.cjs');
16
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');
17
15
  var field = require('../field/field.cjs');
16
+ var input = require('../input/input.cjs');
17
+ var popover = require('../popover/popover.cjs');
18
18
 
19
19
  function TagField({
20
20
  classNames,
@@ -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
  );
@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
5
5
  import { chain } from '@react-aria/utils';
6
6
  import { Button as Button$1, composeRenderProps } from 'react-aria-components';
7
7
  import { buttonStyles } from '@opengovsg/oui-theme';
8
- import { Ripple } from '../ripple/ripple.js';
9
8
  import { useRipple } from '../ripple/use-ripple.js';
10
9
  import { Spinner } from '../spinner/spinner.js';
10
+ import { Ripple } from '../ripple/ripple.js';
11
11
 
12
12
  const Button = forwardRef(
13
13
  ({
@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
4
4
  import { useContext } from 'react';
5
5
  import { CalendarDate } from '@internationalized/date';
6
6
  import { Group } from 'react-aria-components';
7
- import { Select } from '../select/select.js';
8
- import { SelectItem } from '../select/select-item.js';
9
7
  import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
10
8
  import { useCalendarStyleContext } from './calendar-style-context.js';
11
9
  import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
10
+ import { Select } from '../select/select.js';
11
+ import { SelectItem } from '../select/select-item.js';
12
12
  import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
13
13
 
14
14
  const CalendarMonthDaySelector = () => {
@@ -5,13 +5,13 @@ 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 { Popover } from '../popover/popover.js';
9
8
  import { mapPropsVariants } from '../system/utils.js';
10
9
  import { ComboBoxVariantContext } from './combo-box-variant-context.js';
11
10
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
12
11
  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
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';
14
13
  import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
14
+ import { Popover } from '../popover/popover.js';
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
17
17
  switch (size) {
@@ -73,6 +73,7 @@ function ComboBox(originalProps) {
73
73
  dependencies,
74
74
  onClear,
75
75
  renderEmptyState: renderEmptyStateProp,
76
+ inputProps,
76
77
  ...props
77
78
  } = _props;
78
79
  const styles = comboBoxStyles(variantProps);
@@ -133,7 +134,8 @@ function ComboBox(originalProps) {
133
134
  className: composeRenderProps(
134
135
  classNames?.field,
135
136
  (className, renderProps) => styles.field({ ...renderProps, className })
136
- )
137
+ ),
138
+ ...inputProps
137
139
  }
138
140
  ),
139
141
  /* @__PURE__ */ jsx(
@@ -4,13 +4,13 @@ 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 { Popover } from '../popover/popover.js';
8
7
  import { mapPropsVariants } from '../system/utils.js';
9
8
  import { DateInput } from '../date-field/date-field.js';
10
9
  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
10
  import { Calendar as Calendar$1 } from '../calendar/calendar.js';
12
11
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
13
12
  import { Button } from '../button/button.js';
13
+ import { Popover } from '../popover/popover.js';
14
14
 
15
15
  function DatePicker(originalProps) {
16
16
  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 { Popover } from '../popover/popover.js';
9
- import { RangeCalendar } from '../range-calendar/range-calendar.js';
10
8
  import { mapPropsVariants } from '../system/utils.js';
11
9
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
10
+ import { RangeCalendar } from '../range-calendar/range-calendar.js';
12
11
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
13
12
  import { DateInput } from '../date-field/date-field.js';
14
13
  import { Button } from '../button/button.js';
14
+ import { Popover } from '../popover/popover.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';
12
- export { TagField } from './tag-field/tag-field.js';
13
- export { TagFieldItem } from './tag-field/tag-field-item.js';
14
- export { Select } from './select/select.js';
15
- export { SelectItem } from './select/select-item.js';
16
- export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
17
- export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
18
- export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
19
- export { Popover } from './popover/popover.js';
20
- export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
21
- export { Pagination } from './pagination/pagination.js';
22
- export { PaginationCursor } from './pagination/pagination-cursor.js';
23
- export { PaginationItem } from './pagination/pagination-item.js';
24
- export { PaginationItemType } from './pagination/hooks/use-pagination.js';
25
- 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
16
  export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
31
17
  export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
32
18
  export { ComboBoxItem } from './combo-box/combo-box-item.js';
33
19
  export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
34
20
  export { Banner } from './banner/banner.js';
21
+ export { TagField } from './tag-field/tag-field.js';
22
+ export { TagFieldItem } from './tag-field/tag-field-item.js';
23
+ export { Select } from './select/select.js';
24
+ export { SelectItem } from './select/select-item.js';
25
+ export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
35
26
  export { Badge } from './badge/badge.js';
36
27
  export { CalendarDate } from '@internationalized/date';
37
28
  export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
38
29
  export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
39
30
  export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
31
+ export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
32
+ export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
33
+ export { Popover } from './popover/popover.js';
34
+ export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
40
35
  export { DateField, DateInput } from './date-field/date-field.js';
41
36
  export { DatePicker } from './date-picker/date-picker.js';
42
37
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
43
38
  export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
44
39
  export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
40
+ export { PaginationItemType } from './pagination/hooks/use-pagination.js';
41
+ export { Pagination } from './pagination/pagination.js';
42
+ export { PaginationCursor } from './pagination/pagination-cursor.js';
43
+ export { PaginationItem } from './pagination/pagination-item.js';
44
+ export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { forwardRef, useMemo, useCallback } from 'react';
5
5
  import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
6
6
  import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
7
- import { Popover } from '../popover/popover.js';
8
7
  import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
9
8
  import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
10
9
  import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
11
10
  import { createContext } from '../system/react-utils/context.js';
11
+ import { Popover } from '../popover/popover.js';
12
12
 
13
13
  const [MenuVariantContext, useMenuVariantContext] = createContext({
14
14
  name: "MenuVariantContext",
@@ -4,11 +4,11 @@ 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 { Popover } from '../popover/popover.js';
8
7
  import { mapPropsVariants } from '../system/utils.js';
9
8
  import { SelectVariantContext } from './select-variant-context.js';
10
9
  import { Label, Description, FieldError } from '../field/field.js';
11
10
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
11
+ import { Popover } from '../popover/popover.js';
12
12
  import { Button } from '../button/button.js';
13
13
 
14
14
  const calculateEstimatedRowHeight = (size) => {
@@ -4,8 +4,6 @@ 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 { Input } from '../input/input.js';
8
- import { Popover } from '../popover/popover.js';
9
7
  import { TagFieldItem } from './tag-field-item.js';
10
8
  import { TagFieldList } from './tag-field-list.js';
11
9
  import { TagFieldRoot } from './tag-field-root.js';
@@ -13,6 +11,8 @@ import { TagFieldTagList } from './tag-field-tag-list.js';
13
11
  import { TagFieldTrigger } from './tag-field-trigger.js';
14
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';
15
13
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
14
+ import { Input } from '../input/input.js';
15
+ import { Popover } from '../popover/popover.js';
16
16
 
17
17
  function TagField({
18
18
  classNames,
@@ -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
  );
@@ -1,4 +1,4 @@
1
- import type { ComboBoxProps as AriaComboBoxProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
1
+ import type { ComboBoxProps as AriaComboBoxProps, InputProps, ListBoxProps, ListLayoutOptions, ValidationResult } from "react-aria-components";
2
2
  import type { ComboBoxSlots, ComboBoxVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
3
3
  export interface ComboBoxProps<T extends object> extends ComboBoxVariantProps, Omit<AriaComboBoxProps<T>, "children"> {
4
4
  label?: React.ReactNode;
@@ -26,6 +26,7 @@ export interface ComboBoxProps<T extends object> extends ComboBoxVariantProps, O
26
26
  onClear?: () => void;
27
27
  renderEmptyState?: ListBoxProps<T>["renderEmptyState"];
28
28
  children?: ListBoxProps<T>["children"];
29
+ inputProps?: Partial<InputProps>;
29
30
  }
30
31
  export declare function ComboBoxEmptyState({ size, className, }: Pick<ComboBoxVariantProps, "size"> & {
31
32
  className?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAe7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IAErC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAE9C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IAEtD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;CACvC;AAkCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY7D;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6JzE"}
1
+ {"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,aAAa,IAAI,iBAAiB,EAClC,UAAU,EACV,YAAY,EAEZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAc9B,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAe7B,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM,CAC7C,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,EAAE,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,EAAE,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAC3E,UAAU,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,GACxC,cAAc,CAAC,aAAa,GAAG,YAAY,CAAC,CAAA;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,mFAAmF;IACnF,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;IAC9C;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gBAAgB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;CACjC;AAkCD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAS,GACV,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CAY7D;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,2CA+JzE"}
@@ -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
@@ -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-20251002073151",
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-20251002073151",
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-20251002073151"
87
87
  },
88
88
  "scripts": {
89
89
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",