@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.
- package/dist/cjs/button/button.cjs +1 -1
- package/dist/cjs/calendar/calendar-month-day-selector.cjs +2 -2
- package/dist/cjs/index.cjs +34 -32
- package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs +22 -0
- package/dist/cjs/number-field/index.cjs +8 -0
- package/dist/cjs/number-field/number-field.cjs +136 -0
- package/dist/esm/button/button.js +1 -1
- package/dist/esm/calendar/calendar-month-day-selector.js +2 -2
- package/dist/esm/index.js +9 -8
- package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.js +17 -0
- package/dist/esm/number-field/index.js +2 -0
- package/dist/esm/number-field/number-field.js +134 -0
- package/dist/types/index.d.mts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/number-field/index.d.ts +3 -0
- package/dist/types/number-field/index.d.ts.map +1 -0
- package/dist/types/number-field/number-field.d.ts +24 -0
- package/dist/types/number-field/number-field.d.ts.map +1 -0
- package/package.json +3 -3
|
@@ -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 = () => {
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -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,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,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 };
|
package/dist/types/index.d.mts
CHANGED
package/dist/types/index.d.ts
CHANGED
|
@@ -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 @@
|
|
|
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.
|
|
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.
|
|
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.
|
|
87
|
+
"@opengovsg/oui-theme": "0.0.23"
|
|
88
88
|
},
|
|
89
89
|
"scripts": {
|
|
90
90
|
"build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",
|