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

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 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');
10
11
  var useRipple = require('../ripple/use-ripple.cjs');
11
12
  var spinner = require('../spinner/spinner.cjs');
12
- var ripple = require('../ripple/ripple.cjs');
13
13
 
14
14
  const Button = react.forwardRef(
15
15
  ({
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var date = require('@internationalized/date');
8
8
  var reactAriaComponents = require('react-aria-components');
9
+ var select = require('../select/select.cjs');
10
+ var selectItem = require('../select/select-item.cjs');
9
11
  var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
10
12
  var calendarStyleContext = require('./calendar-style-context.cjs');
11
13
  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 react = require('react');
7
7
  var reactAria = require('react-aria');
8
8
  var reactAriaComponents = require('react-aria-components');
9
9
  var ouiTheme = require('@opengovsg/oui-theme');
10
+ var field = require('../field/field.cjs');
11
+ var popover = require('../popover/popover.cjs');
10
12
  var utils = require('../system/utils.cjs');
11
13
  var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
12
- var field = require('../field/field.cjs');
13
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');
14
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');
15
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');
16
- var popover = require('../popover/popover.cjs');
17
17
 
18
18
  const calculateEstimatedRowHeight = (size) => {
19
19
  switch (size) {
@@ -6,8 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
- var 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 [
@@ -6,13 +6,13 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
+ var field = require('../field/field.cjs');
10
+ var popover = require('../popover/popover.cjs');
9
11
  var utils = require('../system/utils.cjs');
10
12
  var dateField = require('../date-field/date-field.cjs');
11
13
  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
14
  var calendar$1 = require('../calendar/calendar.cjs');
13
- var field = require('../field/field.cjs');
14
15
  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 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 field = require('../field/field.cjs');
11
+ var popover = require('../popover/popover.cjs');
12
+ var rangeCalendar = require('../range-calendar/range-calendar.cjs');
10
13
  var utils = require('../system/utils.cjs');
11
14
  var calendar = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.cjs');
12
- var rangeCalendar = require('../range-calendar/range-calendar.cjs');
13
- var field = require('../field/field.cjs');
14
15
  var dateField = require('../date-field/date-field.cjs');
15
16
  var button = require('../button/button.cjs');
16
- var popover = require('../popover/popover.cjs');
17
17
 
18
18
  function DateRangePicker(originalProps) {
19
19
  const [
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  'use strict';
3
3
 
4
- var textArea = require('./text-area/text-area.cjs');
5
4
  var useControllableState = require('./hooks/use-controllable-state.cjs');
6
- var button = require('./button/button.cjs');
7
5
  var govtBanner = require('./govt-banner/govt-banner.cjs');
8
6
  var ripple = require('./ripple/ripple.cjs');
9
7
  var useRipple = require('./ripple/use-ripple.cjs');
@@ -14,35 +12,35 @@ var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
14
12
  var input = require('./input/input.cjs');
15
13
  var textField = require('./text-field/text-field.cjs');
16
14
  var field = require('./field/field.cjs');
15
+ var textArea = require('./text-area/text-area.cjs');
17
16
  var textAreaField = require('./text-area-field/text-area-field.cjs');
18
- var comboBox = require('./combo-box/combo-box.cjs');
19
- var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
20
- var comboBoxItem = require('./combo-box/combo-box-item.cjs');
21
- var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
22
- var banner = require('./banner/banner.cjs');
23
17
  var tagField = require('./tag-field/tag-field.cjs');
24
18
  var tagFieldItem = require('./tag-field/tag-field-item.cjs');
25
19
  var select = require('./select/select.cjs');
26
20
  var selectItem = require('./select/select-item.cjs');
27
21
  var selectVariantContext = require('./select/select-variant-context.cjs');
28
22
  var badge = require('./badge/badge.cjs');
29
- var date = require('@internationalized/date');
30
- var calendar = require('./calendar/calendar.cjs');
31
- var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
32
- var utils = require('./calendar/utils.cjs');
33
23
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
34
24
  var menu = require('./menu/menu.cjs');
35
25
  var popover = require('./popover/popover.cjs');
36
26
  var tabs = require('./tabs/tabs.cjs');
37
- var dateField = require('./date-field/date-field.cjs');
38
27
  var datePicker = require('./date-picker/date-picker.cjs');
39
28
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
29
+ var button = require('./button/button.cjs');
30
+ var comboBox = require('./combo-box/combo-box.cjs');
31
+ var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
32
+ var comboBoxItem = require('./combo-box/combo-box-item.cjs');
33
+ var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
34
+ var banner = require('./banner/banner.cjs');
35
+ var date = require('@internationalized/date');
36
+ var calendar = require('./calendar/calendar.cjs');
37
+ var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
38
+ var utils = require('./calendar/utils.cjs');
39
+ var dateField = require('./date-field/date-field.cjs');
40
40
 
41
41
 
42
42
 
43
- exports.TextArea = textArea.TextArea;
44
43
  exports.useControllableState = useControllableState.useControllableState;
45
- exports.Button = button.Button;
46
44
  exports.GovtBanner = govtBanner.GovtBanner;
47
45
  exports.Ripple = ripple.Ripple;
48
46
  exports.useRipple = useRipple.useRipple;
@@ -56,14 +54,8 @@ exports.Description = field.Description;
56
54
  exports.FieldError = field.FieldError;
57
55
  exports.FieldGroup = field.FieldGroup;
58
56
  exports.Label = field.Label;
57
+ exports.TextArea = textArea.TextArea;
59
58
  exports.TextAreaField = textAreaField.TextAreaField;
60
- exports.ComboBox = comboBox.ComboBox;
61
- exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
62
- exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
63
- exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
64
- exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
65
- exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
66
- exports.Banner = banner.Banner;
67
59
  exports.TagField = tagField.TagField;
68
60
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
69
61
  exports.Select = select.Select;
@@ -71,18 +63,6 @@ exports.SelectItem = selectItem.SelectItem;
71
63
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
72
64
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
73
65
  exports.Badge = badge.Badge;
74
- Object.defineProperty(exports, "CalendarDate", {
75
- enumerable: true,
76
- get: function () { return date.CalendarDate; }
77
- });
78
- exports.Calendar = calendar.Calendar;
79
- exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
80
- exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
81
- exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
82
- exports.getEraFormat = utils.getEraFormat;
83
- exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
84
- exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
85
- exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
86
66
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
87
67
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
88
68
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
@@ -101,7 +81,27 @@ exports.TabPanel = tabs.TabPanel;
101
81
  exports.Tabs = tabs.Tabs;
102
82
  exports.TabsVariantContext = tabs.TabsVariantContext;
103
83
  exports.useTabsVariantContext = tabs.useTabsVariantContext;
104
- exports.DateField = dateField.DateField;
105
- exports.DateInput = dateField.DateInput;
106
84
  exports.DatePicker = datePicker.DatePicker;
107
85
  exports.DateRangePicker = dateRangePicker.DateRangePicker;
86
+ exports.Button = button.Button;
87
+ exports.ComboBox = comboBox.ComboBox;
88
+ exports.ComboBoxEmptyState = comboBox.ComboBoxEmptyState;
89
+ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
90
+ exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
91
+ exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
92
+ exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
93
+ exports.Banner = banner.Banner;
94
+ Object.defineProperty(exports, "CalendarDate", {
95
+ enumerable: true,
96
+ get: function () { return date.CalendarDate; }
97
+ });
98
+ exports.Calendar = calendar.Calendar;
99
+ exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
100
+ exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
101
+ exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
102
+ exports.getEraFormat = utils.getEraFormat;
103
+ exports.useGenerateLocalizedMonths = utils.useGenerateLocalizedMonths;
104
+ exports.useGenerateLocalizedYears = utils.useGenerateLocalizedYears;
105
+ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
106
+ exports.DateField = dateField.DateField;
107
+ exports.DateInput = dateField.DateInput;
@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
+ var popover = require('../popover/popover.cjs');
9
10
  var utils = require('../system/utils.cjs');
10
11
  var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
11
12
  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');
12
13
  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 react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
+ var field = require('../field/field.cjs');
10
+ var popover = require('../popover/popover.cjs');
9
11
  var utils = require('../system/utils.cjs');
10
12
  var selectVariantContext = require('./select-variant-context.cjs');
11
- var field = require('../field/field.cjs');
12
13
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
13
- var popover = require('../popover/popover.cjs');
14
14
  var button = require('../button/button.cjs');
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var reactAriaComponents = require('react-aria-components');
8
8
  var ouiTheme = require('@opengovsg/oui-theme');
9
+ var field = require('../field/field.cjs');
10
+ var input = require('../input/input.cjs');
11
+ var popover = require('../popover/popover.cjs');
9
12
  var tagFieldItem = require('./tag-field-item.cjs');
10
13
  var tagFieldList = require('./tag-field-list.cjs');
11
14
  var tagFieldRoot = require('./tag-field-root.cjs');
12
15
  var tagFieldTagList = require('./tag-field-tag-list.cjs');
13
16
  var tagFieldTrigger = require('./tag-field-trigger.cjs');
14
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');
15
- var field = require('../field/field.cjs');
16
- var input = require('../input/input.cjs');
17
- var popover = require('../popover/popover.cjs');
18
18
 
19
19
  function TagField({
20
20
  classNames,
@@ -5,8 +5,8 @@
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var reactAriaComponents = require('react-aria-components');
7
7
  var ouiTheme = require('@opengovsg/oui-theme');
8
- var 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,
@@ -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,
@@ -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';
8
9
  import { useRipple } from '../ripple/use-ripple.js';
9
10
  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';
7
9
  import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
8
10
  import { useCalendarStyleContext } from './calendar-style-context.js';
9
11
  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 { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
+ import { Popover } from '../popover/popover.js';
8
10
  import { mapPropsVariants } from '../system/utils.js';
9
11
  import { ComboBoxVariantContext } from './combo-box-variant-context.js';
10
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
11
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';
12
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';
13
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';
14
- import { Popover } from '../popover/popover.js';
15
15
 
16
16
  const calculateEstimatedRowHeight = (size) => {
17
17
  switch (size) {
@@ -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 [
@@ -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 { Label, FieldGroup, Description, FieldError } from '../field/field.js';
8
+ import { Popover } from '../popover/popover.js';
7
9
  import { mapPropsVariants } from '../system/utils.js';
8
10
  import { DateInput } from '../date-field/date-field.js';
9
11
  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
12
  import { Calendar as Calendar$1 } from '../calendar/calendar.js';
11
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
12
13
  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 { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
+ import { Popover } from '../popover/popover.js';
10
+ import { RangeCalendar } from '../range-calendar/range-calendar.js';
8
11
  import { mapPropsVariants } from '../system/utils.js';
9
12
  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';
11
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
12
13
  import { DateInput } from '../date-field/date-field.js';
13
14
  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,7 +1,5 @@
1
1
  "use strict";
2
- export { TextArea } from './text-area/text-area.js';
3
2
  export { useControllableState } from './hooks/use-controllable-state.js';
4
- export { Button } from './button/button.js';
5
3
  export { GovtBanner } from './govt-banner/govt-banner.js';
6
4
  export { Ripple } from './ripple/ripple.js';
7
5
  export { useRipple } from './ripple/use-ripple.js';
@@ -12,26 +10,28 @@ export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
12
10
  export { Input } from './input/input.js';
13
11
  export { TextField } from './text-field/text-field.js';
14
12
  export { Description, FieldError, FieldGroup, Label } from './field/field.js';
13
+ export { TextArea } from './text-area/text-area.js';
15
14
  export { TextAreaField } from './text-area-field/text-area-field.js';
16
- export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
17
- export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
18
- export { ComboBoxItem } from './combo-box/combo-box-item.js';
19
- export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
20
- export { Banner } from './banner/banner.js';
21
15
  export { TagField } from './tag-field/tag-field.js';
22
16
  export { TagFieldItem } from './tag-field/tag-field-item.js';
23
17
  export { Select } from './select/select.js';
24
18
  export { SelectItem } from './select/select-item.js';
25
19
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
26
20
  export { Badge } from './badge/badge.js';
27
- export { CalendarDate } from '@internationalized/date';
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
21
  export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
32
22
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
33
23
  export { Popover } from './popover/popover.js';
34
24
  export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
35
- export { DateField, DateInput } from './date-field/date-field.js';
36
25
  export { DatePicker } from './date-picker/date-picker.js';
37
26
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
27
+ export { Button } from './button/button.js';
28
+ export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
29
+ export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
30
+ export { ComboBoxItem } from './combo-box/combo-box-item.js';
31
+ export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
32
+ export { Banner } from './banner/banner.js';
33
+ export { CalendarDate } from '@internationalized/date';
34
+ export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
35
+ export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
36
+ export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
37
+ export { DateField, DateInput } from './date-field/date-field.js';
@@ -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';
7
8
  import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
8
9
  import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
9
10
  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';
10
11
  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 { Label, Description, FieldError } from '../field/field.js';
8
+ import { Popover } from '../popover/popover.js';
7
9
  import { mapPropsVariants } from '../system/utils.js';
8
10
  import { SelectVariantContext } from './select-variant-context.js';
9
- import { Label, Description, FieldError } from '../field/field.js';
10
11
  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,15 +4,15 @@ 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';
8
+ import { Input } from '../input/input.js';
9
+ import { Popover } from '../popover/popover.js';
7
10
  import { TagFieldItem } from './tag-field-item.js';
8
11
  import { TagFieldList } from './tag-field-list.js';
9
12
  import { TagFieldRoot } from './tag-field-root.js';
10
13
  import { TagFieldTagList } from './tag-field-tag-list.js';
11
14
  import { TagFieldTrigger } from './tag-field-trigger.js';
12
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';
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,
@@ -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,
@@ -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,
@@ -49,22 +49,6 @@ export declare function useBadge(originalProps: UseBadgeProps): {
49
49
  md: string;
50
50
  };
51
51
  }, undefined, string, {
52
- responsiveVariants?: boolean | (string | number | symbol)[] | {
53
- size?: boolean | (string | number | symbol)[] | undefined;
54
- isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
55
- } | undefined;
56
- } & import("tailwind-variants/dist/config.js").TWMConfig & {
57
- twMergeConfig: {
58
- extend: {
59
- theme: {};
60
- classGroups: {
61
- prose: {
62
- prose: (() => boolean)[];
63
- }[];
64
- };
65
- };
66
- };
67
- }, {
68
52
  isFocusVisible: {
69
53
  false: string;
70
54
  true: string;
@@ -75,21 +59,6 @@ export declare function useBadge(originalProps: UseBadgeProps): {
75
59
  true: string;
76
60
  };
77
61
  }, undefined, "outline-offset-2 outline-none", {
78
- responsiveVariants?: boolean | (string | number | symbol)[] | {
79
- isFocusVisible?: boolean | (string | number | symbol)[] | undefined;
80
- } | undefined;
81
- } & import("tailwind-variants/dist/config.js").TWMConfig & {
82
- twMergeConfig: {
83
- extend: {
84
- theme: {};
85
- classGroups: {
86
- prose: {
87
- prose: (() => boolean)[];
88
- }[];
89
- };
90
- };
91
- };
92
- }, {
93
62
  isFocusVisible: {
94
63
  false: string;
95
64
  true: string;
@@ -99,17 +68,7 @@ export declare function useBadge(originalProps: UseBadgeProps): {
99
68
  false: string;
100
69
  true: string;
101
70
  };
102
- }, undefined, "outline-offset-2 outline-none", import("tailwind-variants/dist/config.js").TVConfig<{
103
- isFocusVisible: {
104
- false: string;
105
- true: string;
106
- };
107
- }, {
108
- isFocusVisible: {
109
- false: string;
110
- true: string;
111
- };
112
- }>, unknown, unknown, undefined>>>;
71
+ }, undefined, "outline-offset-2 outline-none", unknown, unknown, undefined>>>;
113
72
  base: ((slotProps?: ({
114
73
  size?: "md" | "sm" | "xs" | undefined;
115
74
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -117,14 +76,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
117
76
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
118
77
  isDisabled?: boolean | undefined;
119
78
  isCloseable?: boolean | undefined;
120
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
79
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
121
80
  size?: "md" | "sm" | "xs" | undefined;
122
81
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
123
82
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
124
83
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
125
84
  isDisabled?: boolean | undefined;
126
85
  isCloseable?: boolean | undefined;
127
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
86
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
128
87
  dot: ((slotProps?: ({
129
88
  size?: "md" | "sm" | "xs" | undefined;
130
89
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -132,14 +91,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
132
91
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
133
92
  isDisabled?: boolean | undefined;
134
93
  isCloseable?: boolean | undefined;
135
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
94
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
136
95
  size?: "md" | "sm" | "xs" | undefined;
137
96
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
138
97
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
139
98
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
140
99
  isDisabled?: boolean | undefined;
141
100
  isCloseable?: boolean | undefined;
142
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
101
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
143
102
  content: ((slotProps?: ({
144
103
  size?: "md" | "sm" | "xs" | undefined;
145
104
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
@@ -147,14 +106,14 @@ export declare function useBadge(originalProps: UseBadgeProps): {
147
106
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
148
107
  isDisabled?: boolean | undefined;
149
108
  isCloseable?: boolean | undefined;
150
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string) & ((slotProps?: ({
109
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string) & ((slotProps?: ({
151
110
  size?: "md" | "sm" | "xs" | undefined;
152
111
  color?: "sub" | "main" | "neutral" | "critical" | "warning" | "success" | undefined;
153
112
  radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
154
113
  variant?: "solid" | "outline" | "dot" | "subtle" | undefined;
155
114
  isDisabled?: boolean | undefined;
156
115
  isCloseable?: boolean | undefined;
157
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string);
116
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string);
158
117
  };
159
118
  classNames: SlotsToClasses<"content" | "base" | "dot" | "closeButton"> | undefined;
160
119
  isCloseable: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"use-badge.d.ts","sourceRoot":"","sources":["../../../src/badge/use-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC;AAiBD,wBAAgB,QAAQ,CAAC,aAAa,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGpD"}
1
+ {"version":3,"file":"use-badge.d.ts","sourceRoot":"","sources":["../../../src/badge/use-badge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,MAAM,WAAW,aAAc,SAAQ,WAAW,EAAE,iBAAiB;IACnE,GAAG,CAAC,EAAE,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE5B;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,GAAG,aAAa,CAAC,CAAA;IACvD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CAClC;AAiBD,wBAAgB,QAAQ,CAAC,aAAa,EAAE,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiGpD"}
@@ -28,36 +28,36 @@ export declare const useSpinner: (originalProps: UseSpinnerProps) => {
28
28
  base: (slotProps?: ({
29
29
  size?: "lg" | "md" | "sm" | undefined;
30
30
  color?: "current" | "white" | undefined;
31
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
31
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
32
32
  wrapper: (slotProps?: ({
33
33
  size?: "lg" | "md" | "sm" | undefined;
34
34
  color?: "current" | "white" | undefined;
35
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
35
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
36
36
  circle1: (slotProps?: ({
37
37
  size?: "lg" | "md" | "sm" | undefined;
38
38
  color?: "current" | "white" | undefined;
39
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
39
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
40
40
  circle2: (slotProps?: ({
41
41
  size?: "lg" | "md" | "sm" | undefined;
42
42
  color?: "current" | "white" | undefined;
43
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
43
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
44
44
  } & {
45
45
  base: (slotProps?: ({
46
46
  size?: "lg" | "md" | "sm" | undefined;
47
47
  color?: "current" | "white" | undefined;
48
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
48
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
49
49
  wrapper: (slotProps?: ({
50
50
  size?: "lg" | "md" | "sm" | undefined;
51
51
  color?: "current" | "white" | undefined;
52
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
52
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
53
53
  circle1: (slotProps?: ({
54
54
  size?: "lg" | "md" | "sm" | undefined;
55
55
  color?: "current" | "white" | undefined;
56
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
56
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
57
57
  circle2: (slotProps?: ({
58
58
  size?: "lg" | "md" | "sm" | undefined;
59
59
  color?: "current" | "white" | undefined;
60
- } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
60
+ } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
61
61
  } & {};
62
62
  classNames: SlotsToClasses<"base" | "wrapper" | "circle1" | "circle2"> | undefined;
63
63
  getSpinnerProps: PropGetter;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.0-snapshot-20250808095237",
3
+ "version": "0.0.0-snapshot-20250812081721",
4
4
  "sideEffects": false,
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "type": "module",
@@ -34,7 +34,7 @@
34
34
  }
35
35
  },
36
36
  "devDependencies": {
37
- "@storybook/react-vite": "9.0.0-beta.11",
37
+ "@storybook/react-vite": "9.1.1",
38
38
  "@types/lodash-es": "^4.17.12",
39
39
  "@types/prop-types": "^15.7.15",
40
40
  "@types/react": "^19.0.12",
@@ -44,12 +44,12 @@
44
44
  "lucide-react": "^0.475.0",
45
45
  "motion": "^12.18.1",
46
46
  "prettier": "^3.5.3",
47
- "storybook": "9.0.0-beta.11",
47
+ "storybook": "9.1.1",
48
48
  "tsx": "^4.20.3",
49
49
  "typescript": "5.7.3",
50
- "@oui/eslint-config": "0.0.0",
51
50
  "@oui/chromatic": "0.0.0",
52
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250808095237",
51
+ "@oui/eslint-config": "0.0.0",
52
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250812081721",
53
53
  "@oui/prettier-config": "0.0.0",
54
54
  "@oui/typescript-config": "0.0.0"
55
55
  },
@@ -80,7 +80,7 @@
80
80
  "peerDependencies": {
81
81
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
82
82
  "react-aria-components": "^1.10.1",
83
- "@opengovsg/oui-theme": "0.0.0-snapshot-20250808095237"
83
+ "@opengovsg/oui-theme": "0.0.0-snapshot-20250812081721"
84
84
  },
85
85
  "scripts": {
86
86
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",