@opengovsg/oui 0.0.22 → 0.0.23

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');
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 = $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');
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 = () => {
@@ -1,39 +1,39 @@
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');
7
4
  var ripple = require('./ripple/ripple.cjs');
8
5
  var useRipple = require('./ripple/use-ripple.cjs');
9
6
  var spinner = require('./spinner/spinner.cjs');
10
7
  var useSpinner = require('./spinner/use-spinner.cjs');
11
8
  var toggle = require('./toggle/toggle.cjs');
12
9
  var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
13
- var input = require('./input/input.cjs');
14
10
  var textField = require('./text-field/text-field.cjs');
15
- var field = require('./field/field.cjs');
16
11
  var textArea = require('./text-area/text-area.cjs');
17
12
  var textAreaField = require('./text-area-field/text-area-field.cjs');
18
13
  var comboBox = require('./combo-box/combo-box.cjs');
19
14
  var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
20
15
  var comboBoxItem = require('./combo-box/combo-box-item.cjs');
21
16
  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');
22
+ var menu = require('./menu/menu.cjs');
23
+ var tabs = require('./tabs/tabs.cjs');
24
+ var useControllableState = require('./hooks/use-controllable-state.cjs');
25
+ var button = require('./button/button.cjs');
26
+ var govtBanner = require('./govt-banner/govt-banner.cjs');
27
+ var input = require('./input/input.cjs');
28
+ var field = require('./field/field.cjs');
29
+ var banner = require('./banner/banner.cjs');
28
30
  var badge = require('./badge/badge.cjs');
29
31
  var date = require('@internationalized/date');
30
32
  var calendar = require('./calendar/calendar.cjs');
31
33
  var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
32
34
  var utils = require('./calendar/utils.cjs');
33
35
  var rangeCalendar = require('./range-calendar/range-calendar.cjs');
34
- var menu = require('./menu/menu.cjs');
35
36
  var popover = require('./popover/popover.cjs');
36
- var tabs = require('./tabs/tabs.cjs');
37
37
  var dateField = require('./date-field/date-field.cjs');
38
38
  var datePicker = require('./date-picker/date-picker.cjs');
39
39
  var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
@@ -47,25 +47,17 @@ var usePagination$1 = require('./pagination/use-pagination.cjs');
47
47
  var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
48
48
  var fileInfo = require('./file-dropzone/file-info.cjs');
49
49
  var utils$1 = require('./file-dropzone/utils.cjs');
50
+ var numberField = require('./number-field/number-field.cjs');
50
51
 
51
52
 
52
53
 
53
- exports.useControllableState = useControllableState.useControllableState;
54
- exports.Button = button.Button;
55
- exports.GovtBanner = govtBanner.GovtBanner;
56
54
  exports.Ripple = ripple.Ripple;
57
55
  exports.useRipple = useRipple.useRipple;
58
56
  exports.Spinner = spinner.Spinner;
59
57
  exports.useSpinner = useSpinner.useSpinner;
60
58
  exports.Toggle = toggle.Toggle;
61
59
  exports.SkipNavLink = skipNavLink.SkipNavLink;
62
- exports.Input = input.Input;
63
60
  exports.TextField = textField.TextField;
64
- exports.Description = field.Description;
65
- exports.FieldError = field.FieldError;
66
- exports.FieldErrorIcon = field.FieldErrorIcon;
67
- exports.FieldGroup = field.FieldGroup;
68
- exports.Label = field.Label;
69
61
  exports.TextArea = textArea.TextArea;
70
62
  exports.TextAreaField = textAreaField.TextAreaField;
71
63
  exports.ComboBox = comboBox.ComboBox;
@@ -74,13 +66,36 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
74
66
  exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
75
67
  exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
76
68
  exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
77
- exports.Banner = banner.Banner;
78
69
  exports.TagField = tagField.TagField;
79
70
  exports.TagFieldItem = tagFieldItem.TagFieldItem;
80
71
  exports.Select = select.Select;
81
72
  exports.SelectItem = selectItem.SelectItem;
82
73
  exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
83
74
  exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
75
+ exports.Menu = menu.Menu;
76
+ exports.MenuItem = menu.MenuItem;
77
+ exports.MenuSection = menu.MenuSection;
78
+ exports.MenuSeparator = menu.MenuSeparator;
79
+ exports.MenuTrigger = menu.MenuTrigger;
80
+ exports.MenuVariantContext = menu.MenuVariantContext;
81
+ exports.SubmenuTrigger = menu.SubmenuTrigger;
82
+ exports.useMenuVariantContext = menu.useMenuVariantContext;
83
+ exports.Tab = tabs.Tab;
84
+ exports.TabList = tabs.TabList;
85
+ exports.TabPanel = tabs.TabPanel;
86
+ exports.Tabs = tabs.Tabs;
87
+ exports.TabsVariantContext = tabs.TabsVariantContext;
88
+ exports.useTabsVariantContext = tabs.useTabsVariantContext;
89
+ exports.useControllableState = useControllableState.useControllableState;
90
+ exports.Button = button.Button;
91
+ exports.GovtBanner = govtBanner.GovtBanner;
92
+ exports.Input = input.Input;
93
+ exports.Description = field.Description;
94
+ exports.FieldError = field.FieldError;
95
+ exports.FieldErrorIcon = field.FieldErrorIcon;
96
+ exports.FieldGroup = field.FieldGroup;
97
+ exports.Label = field.Label;
98
+ exports.Banner = banner.Banner;
84
99
  exports.Badge = badge.Badge;
85
100
  Object.defineProperty(exports, "CalendarDate", {
86
101
  enumerable: true,
@@ -97,21 +112,7 @@ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
97
112
  exports.RangeCalendar = rangeCalendar.RangeCalendar;
98
113
  exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
99
114
  exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
100
- exports.Menu = menu.Menu;
101
- exports.MenuItem = menu.MenuItem;
102
- exports.MenuSection = menu.MenuSection;
103
- exports.MenuSeparator = menu.MenuSeparator;
104
- exports.MenuTrigger = menu.MenuTrigger;
105
- exports.MenuVariantContext = menu.MenuVariantContext;
106
- exports.SubmenuTrigger = menu.SubmenuTrigger;
107
- exports.useMenuVariantContext = menu.useMenuVariantContext;
108
115
  exports.Popover = popover.Popover;
109
- exports.Tab = tabs.Tab;
110
- exports.TabList = tabs.TabList;
111
- exports.TabPanel = tabs.TabPanel;
112
- exports.Tabs = tabs.Tabs;
113
- exports.TabsVariantContext = tabs.TabsVariantContext;
114
- exports.useTabsVariantContext = tabs.useTabsVariantContext;
115
116
  exports.DateField = dateField.DateField;
116
117
  exports.DateInput = dateField.DateInput;
117
118
  exports.DatePicker = datePicker.DatePicker;
@@ -130,3 +131,4 @@ exports.FileDropzone = fileDropzone.FileDropzone;
130
131
  exports.FileInfo = fileInfo.FileInfo;
131
132
  exports.formatBytes = utils$1.formatBytes;
132
133
  exports.formatErrorMessage = utils$1.formatErrorMessage;
134
+ exports.NumberField = numberField.NumberField;
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var createLucideIcon = require('../createLucideIcon.cjs');
6
+
7
+ /**
8
+ * @license lucide-react v0.475.0 - ISC
9
+ *
10
+ * This source code is licensed under the ISC license.
11
+ * See the LICENSE file in the root directory of this source tree.
12
+ */
13
+
14
+
15
+ const __iconNode = [
16
+ ["path", { d: "M5 12h14", key: "1ays0h" }],
17
+ ["path", { d: "M12 5v14", key: "s699le" }]
18
+ ];
19
+ const Plus = createLucideIcon.default("Plus", __iconNode);
20
+
21
+ exports.__iconNode = __iconNode;
22
+ exports.default = Plus;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var numberField = require('./number-field.cjs');
5
+
6
+
7
+
8
+ exports.NumberField = numberField.NumberField;
@@ -0,0 +1,136 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
+ var utils = require('../system/utils.cjs');
9
+ var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
10
+ var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs');
11
+ var field = require('../field/field.cjs');
12
+ var input = require('../input/input.cjs');
13
+ var button = require('../button/button.cjs');
14
+
15
+ function NumberField(originalProps) {
16
+ const [
17
+ {
18
+ label,
19
+ description,
20
+ errorMessage,
21
+ classNames,
22
+ inputProps,
23
+ startContent,
24
+ endContent,
25
+ hideSteppers,
26
+ ...props
27
+ },
28
+ variantProps
29
+ ] = utils.mapPropsVariants(originalProps, ouiTheme.numberFieldStyles.variantKeys);
30
+ const styles = ouiTheme.numberFieldStyles(variantProps);
31
+ return /* @__PURE__ */ jsxRuntime.jsxs(
32
+ reactAriaComponents.NumberField,
33
+ {
34
+ ...props,
35
+ "data-hide-steppers": ouiTheme.dataAttr(!!hideSteppers),
36
+ "data-has-start-content": ouiTheme.dataAttr(!!startContent),
37
+ "data-has-end-content": ouiTheme.dataAttr(!!endContent),
38
+ className: ouiTheme.composeTailwindRenderProps(
39
+ props.className,
40
+ styles.base({
41
+ className: classNames?.base
42
+ })
43
+ ),
44
+ children: [
45
+ label && /* @__PURE__ */ jsxRuntime.jsx(
46
+ field.Label,
47
+ {
48
+ className: styles.label({ className: classNames?.label }),
49
+ size: variantProps.size,
50
+ children: label
51
+ }
52
+ ),
53
+ /* @__PURE__ */ jsxRuntime.jsx(field.FieldGroup, { className: styles.field({ className: classNames?.field }), children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
54
+ startContent,
55
+ /* @__PURE__ */ jsxRuntime.jsx(
56
+ input.Input,
57
+ {
58
+ size: variantProps.size,
59
+ variant: "unstyled",
60
+ className: styles.input({
61
+ className: classNames?.input
62
+ }),
63
+ ...inputProps
64
+ }
65
+ ),
66
+ endContent,
67
+ !hideSteppers && /* @__PURE__ */ jsxRuntime.jsxs(
68
+ "div",
69
+ {
70
+ className: ouiTheme.fieldBorderStyles({
71
+ ...renderProps,
72
+ className: ouiTheme.cn(
73
+ styles.stepperContainer({
74
+ className: classNames?.stepperContainer
75
+ })
76
+ )
77
+ }),
78
+ children: [
79
+ /* @__PURE__ */ jsxRuntime.jsx(
80
+ button.Button,
81
+ {
82
+ className: styles.decrement({
83
+ className: classNames?.decrement
84
+ }),
85
+ size: variantProps.size,
86
+ isIconOnly: true,
87
+ variant: "clear",
88
+ color: "neutral",
89
+ slot: "decrement",
90
+ children: /* @__PURE__ */ jsxRuntime.jsx(minus.default, { "aria-hidden": true })
91
+ }
92
+ ),
93
+ /* @__PURE__ */ jsxRuntime.jsx(
94
+ button.Button,
95
+ {
96
+ className: styles.increment({
97
+ className: classNames?.increment
98
+ }),
99
+ size: variantProps.size,
100
+ isIconOnly: true,
101
+ variant: "clear",
102
+ color: "neutral",
103
+ slot: "increment",
104
+ children: /* @__PURE__ */ jsxRuntime.jsx(plus.default, { "aria-hidden": true })
105
+ }
106
+ )
107
+ ]
108
+ }
109
+ )
110
+ ] }) }),
111
+ description && /* @__PURE__ */ jsxRuntime.jsx(
112
+ field.Description,
113
+ {
114
+ className: styles.description({
115
+ className: classNames?.description
116
+ }),
117
+ size: variantProps.size,
118
+ children: description
119
+ }
120
+ ),
121
+ /* @__PURE__ */ jsxRuntime.jsx(
122
+ field.FieldError,
123
+ {
124
+ className: styles.error({
125
+ className: classNames?.error
126
+ }),
127
+ size: variantProps.size,
128
+ children: errorMessage
129
+ }
130
+ )
131
+ ]
132
+ }
133
+ );
134
+ }
135
+
136
+ exports.NumberField = NumberField;
@@ -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 = () => {
package/dist/esm/index.js CHANGED
@@ -1,37 +1,37 @@
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';
5
2
  export { Ripple } from './ripple/ripple.js';
6
3
  export { useRipple } from './ripple/use-ripple.js';
7
4
  export { Spinner } from './spinner/spinner.js';
8
5
  export { useSpinner } from './spinner/use-spinner.js';
9
6
  export { Toggle } from './toggle/toggle.js';
10
7
  export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
11
- export { Input } from './input/input.js';
12
8
  export { TextField } from './text-field/text-field.js';
13
- export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
14
9
  export { TextArea } from './text-area/text-area.js';
15
10
  export { TextAreaField } from './text-area-field/text-area-field.js';
16
11
  export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
17
12
  export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
18
13
  export { ComboBoxItem } from './combo-box/combo-box-item.js';
19
14
  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';
20
+ export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
21
+ export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
22
+ export { useControllableState } from './hooks/use-controllable-state.js';
23
+ export { Button } from './button/button.js';
24
+ export { GovtBanner } from './govt-banner/govt-banner.js';
25
+ export { Input } from './input/input.js';
26
+ export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
27
+ export { Banner } from './banner/banner.js';
26
28
  export { Badge } from './badge/badge.js';
27
29
  export { CalendarDate } from '@internationalized/date';
28
30
  export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
29
31
  export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
30
32
  export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
31
33
  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
34
  export { Popover } from './popover/popover.js';
34
- export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
35
35
  export { DateField, DateInput } from './date-field/date-field.js';
36
36
  export { DatePicker } from './date-picker/date-picker.js';
37
37
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
@@ -45,3 +45,4 @@ export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagin
45
45
  export { FileDropzone } from './file-dropzone/file-dropzone.js';
46
46
  export { FileInfo } from './file-dropzone/file-info.js';
47
47
  export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
48
+ export { NumberField } from './number-field/number-field.js';
@@ -0,0 +1,17 @@
1
+ import createLucideIcon from '../createLucideIcon.js';
2
+
3
+ /**
4
+ * @license lucide-react v0.475.0 - ISC
5
+ *
6
+ * This source code is licensed under the ISC license.
7
+ * See the LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+
11
+ const __iconNode = [
12
+ ["path", { d: "M5 12h14", key: "1ays0h" }],
13
+ ["path", { d: "M12 5v14", key: "s699le" }]
14
+ ];
15
+ const Plus = createLucideIcon("Plus", __iconNode);
16
+
17
+ export { __iconNode, Plus as default };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ export { NumberField } from './number-field.js';
@@ -0,0 +1,134 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
4
+ import { NumberField as NumberField$1 } from 'react-aria-components';
5
+ import { numberFieldStyles, composeTailwindRenderProps, dataAttr, fieldBorderStyles, cn } from '@opengovsg/oui-theme';
6
+ import { mapPropsVariants } from '../system/utils.js';
7
+ import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
8
+ import Plus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.js';
9
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
10
+ import { Input } from '../input/input.js';
11
+ import { Button } from '../button/button.js';
12
+
13
+ function NumberField(originalProps) {
14
+ const [
15
+ {
16
+ label,
17
+ description,
18
+ errorMessage,
19
+ classNames,
20
+ inputProps,
21
+ startContent,
22
+ endContent,
23
+ hideSteppers,
24
+ ...props
25
+ },
26
+ variantProps
27
+ ] = mapPropsVariants(originalProps, numberFieldStyles.variantKeys);
28
+ const styles = numberFieldStyles(variantProps);
29
+ return /* @__PURE__ */ jsxs(
30
+ NumberField$1,
31
+ {
32
+ ...props,
33
+ "data-hide-steppers": dataAttr(!!hideSteppers),
34
+ "data-has-start-content": dataAttr(!!startContent),
35
+ "data-has-end-content": dataAttr(!!endContent),
36
+ className: composeTailwindRenderProps(
37
+ props.className,
38
+ styles.base({
39
+ className: classNames?.base
40
+ })
41
+ ),
42
+ children: [
43
+ label && /* @__PURE__ */ jsx(
44
+ Label,
45
+ {
46
+ className: styles.label({ className: classNames?.label }),
47
+ size: variantProps.size,
48
+ children: label
49
+ }
50
+ ),
51
+ /* @__PURE__ */ jsx(FieldGroup, { className: styles.field({ className: classNames?.field }), children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
52
+ startContent,
53
+ /* @__PURE__ */ jsx(
54
+ Input,
55
+ {
56
+ size: variantProps.size,
57
+ variant: "unstyled",
58
+ className: styles.input({
59
+ className: classNames?.input
60
+ }),
61
+ ...inputProps
62
+ }
63
+ ),
64
+ endContent,
65
+ !hideSteppers && /* @__PURE__ */ jsxs(
66
+ "div",
67
+ {
68
+ className: fieldBorderStyles({
69
+ ...renderProps,
70
+ className: cn(
71
+ styles.stepperContainer({
72
+ className: classNames?.stepperContainer
73
+ })
74
+ )
75
+ }),
76
+ children: [
77
+ /* @__PURE__ */ jsx(
78
+ Button,
79
+ {
80
+ className: styles.decrement({
81
+ className: classNames?.decrement
82
+ }),
83
+ size: variantProps.size,
84
+ isIconOnly: true,
85
+ variant: "clear",
86
+ color: "neutral",
87
+ slot: "decrement",
88
+ children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
89
+ }
90
+ ),
91
+ /* @__PURE__ */ jsx(
92
+ Button,
93
+ {
94
+ className: styles.increment({
95
+ className: classNames?.increment
96
+ }),
97
+ size: variantProps.size,
98
+ isIconOnly: true,
99
+ variant: "clear",
100
+ color: "neutral",
101
+ slot: "increment",
102
+ children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
103
+ }
104
+ )
105
+ ]
106
+ }
107
+ )
108
+ ] }) }),
109
+ description && /* @__PURE__ */ jsx(
110
+ Description,
111
+ {
112
+ className: styles.description({
113
+ className: classNames?.description
114
+ }),
115
+ size: variantProps.size,
116
+ children: description
117
+ }
118
+ ),
119
+ /* @__PURE__ */ jsx(
120
+ FieldError,
121
+ {
122
+ className: styles.error({
123
+ className: classNames?.error
124
+ }),
125
+ size: variantProps.size,
126
+ children: errorMessage
127
+ }
128
+ )
129
+ ]
130
+ }
131
+ );
132
+ }
133
+
134
+ export { NumberField };
@@ -26,4 +26,5 @@ export * from "./date-range-picker";
26
26
  export * from "./checkbox";
27
27
  export * from "./pagination";
28
28
  export * from "./file-dropzone";
29
+ export * from "./number-field";
29
30
  //# sourceMappingURL=index.d.ts.map
@@ -26,4 +26,5 @@ export * from "./date-range-picker";
26
26
  export * from "./checkbox";
27
27
  export * from "./pagination";
28
28
  export * from "./file-dropzone";
29
+ export * from "./number-field";
29
30
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA"}
@@ -0,0 +1,3 @@
1
+ export { NumberField } from "./number-field";
2
+ export type { NumberFieldProps } from "./number-field";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/number-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA"}
@@ -0,0 +1,24 @@
1
+ import type { NumberFieldProps as AriaNumberFieldProps, ValidationResult } from "react-aria-components";
2
+ import type { NumberFieldSlots, NumberFieldVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
3
+ import type { InputProps } from "../input";
4
+ export interface NumberFieldProps extends AriaNumberFieldProps, NumberFieldVariantProps {
5
+ label?: string;
6
+ description?: string;
7
+ errorMessage?: string | ((validation: ValidationResult) => string);
8
+ classNames?: SlotsToClasses<NumberFieldSlots>;
9
+ inputProps?: Partial<InputProps>;
10
+ /**
11
+ * If true, hides the stepper buttons
12
+ */
13
+ hideSteppers?: boolean;
14
+ /**
15
+ * Content to be displayed at the start of the input field
16
+ */
17
+ startContent?: React.ReactNode;
18
+ /**
19
+ * Content to be displayed at the end of the input field
20
+ */
21
+ endContent?: React.ReactNode;
22
+ }
23
+ export declare function NumberField(originalProps: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
24
+ //# sourceMappingURL=number-field.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../src/number-field/number-field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,IAAI,oBAAoB,EACxC,gBAAgB,EACjB,MAAM,uBAAuB,CAAA;AAI9B,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAS7B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,uBAAuB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,gBAAgB,KAAK,MAAM,CAAC,CAAA;IAElE,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;IAE7C,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAA;IAEhC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,wBAAgB,WAAW,CAAC,aAAa,EAAE,gBAAgB,2CAgH1D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opengovsg/oui",
3
- "version": "0.0.22",
3
+ "version": "0.0.23",
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.22",
52
+ "@opengovsg/oui-theme": "0.0.23",
53
53
  "@oui/chromatic": "0.0.0",
54
54
  "@oui/eslint-config": "0.0.0",
55
55
  "@oui/prettier-config": "0.0.0",
@@ -84,7 +84,7 @@
84
84
  "motion": ">=11.12.0 || >=12.0.0-alpha.1",
85
85
  "react": ">= 18",
86
86
  "react-aria-components": "^1.12.2",
87
- "@opengovsg/oui-theme": "0.0.22"
87
+ "@opengovsg/oui-theme": "0.0.23"
88
88
  },
89
89
  "scripts": {
90
90
  "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",