@opengovsg/oui 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/dist/cjs/banner/banner.cjs +1 -1
  2. package/dist/cjs/button/button.cjs +1 -1
  3. package/dist/cjs/combo-box/combo-box-fuzzy.cjs +1 -1
  4. package/dist/cjs/combo-box/combo-box.cjs +1 -1
  5. package/dist/cjs/field/field.cjs +1 -1
  6. package/dist/cjs/govt-banner/govt-banner.cjs +1 -1
  7. package/dist/cjs/index.cjs +2 -0
  8. package/dist/cjs/input/input.cjs +1 -1
  9. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs +19 -0
  10. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs +22 -0
  11. package/dist/cjs/select/index.cjs +8 -0
  12. package/dist/cjs/select/select-item.cjs +63 -0
  13. package/dist/cjs/select/select-variant-context.cjs +12 -0
  14. package/dist/cjs/select/select.cjs +103 -0
  15. package/dist/cjs/spinner/use-spinner.cjs +1 -1
  16. package/dist/cjs/system/react-utils/context.cjs +1 -5
  17. package/dist/cjs/tag-field/tag-field-list.cjs +1 -1
  18. package/dist/cjs/tag-field/tag-field.cjs +1 -1
  19. package/dist/cjs/tag-field/use-tag-field.cjs +1 -0
  20. package/dist/cjs/text-area/text-area.cjs +1 -1
  21. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  22. package/dist/cjs/text-field/text-field.cjs +1 -1
  23. package/dist/cjs/toggle/toggle.cjs +1 -1
  24. package/dist/esm/banner/banner.js +1 -1
  25. package/dist/esm/button/button.js +1 -1
  26. package/dist/esm/combo-box/combo-box-fuzzy.js +1 -1
  27. package/dist/esm/combo-box/combo-box.js +1 -1
  28. package/dist/esm/field/field.js +1 -1
  29. package/dist/esm/govt-banner/govt-banner.js +1 -1
  30. package/dist/esm/index.js +1 -0
  31. package/dist/esm/input/input.js +1 -1
  32. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js +14 -0
  33. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.js +17 -0
  34. package/dist/esm/select/index.js +2 -0
  35. package/dist/esm/select/select-item.js +61 -0
  36. package/dist/esm/select/select-variant-context.js +9 -0
  37. package/dist/esm/select/select.js +101 -0
  38. package/dist/esm/spinner/use-spinner.js +1 -1
  39. package/dist/esm/system/react-utils/context.js +1 -5
  40. package/dist/esm/tag-field/tag-field-list.js +1 -1
  41. package/dist/esm/tag-field/tag-field.js +1 -1
  42. package/dist/esm/tag-field/use-tag-field.js +1 -0
  43. package/dist/esm/text-area/text-area.js +1 -1
  44. package/dist/esm/text-area-field/text-area-field.js +1 -1
  45. package/dist/esm/text-field/text-field.js +1 -1
  46. package/dist/esm/toggle/toggle.js +1 -1
  47. package/dist/types/banner/banner.d.ts +4 -3
  48. package/dist/types/banner/banner.d.ts.map +1 -1
  49. package/dist/types/button/button.d.ts +2 -11
  50. package/dist/types/button/button.d.ts.map +1 -1
  51. package/dist/types/combo-box/combo-box-fuzzy.d.ts +4 -3
  52. package/dist/types/combo-box/combo-box-fuzzy.d.ts.map +1 -1
  53. package/dist/types/combo-box/combo-box.d.ts +3 -3
  54. package/dist/types/combo-box/combo-box.d.ts.map +1 -1
  55. package/dist/types/field/field.d.ts +2 -2
  56. package/dist/types/field/field.d.ts.map +1 -1
  57. package/dist/types/govt-banner/govt-banner.d.ts +1 -1
  58. package/dist/types/govt-banner/govt-banner.d.ts.map +1 -1
  59. package/dist/types/index.d.mts +1 -0
  60. package/dist/types/index.d.ts +1 -0
  61. package/dist/types/index.d.ts.map +1 -1
  62. package/dist/types/input/input.d.ts +3 -2
  63. package/dist/types/input/input.d.ts.map +1 -1
  64. package/dist/types/select/index.d.ts +2 -0
  65. package/dist/types/select/index.d.ts.map +1 -0
  66. package/dist/types/select/select-item.d.ts +9 -0
  67. package/dist/types/select/select-item.d.ts.map +1 -0
  68. package/dist/types/select/select-variant-context.d.ts +4 -0
  69. package/dist/types/select/select-variant-context.d.ts.map +1 -0
  70. package/dist/types/select/select.d.ts +17 -0
  71. package/dist/types/select/select.d.ts.map +1 -0
  72. package/dist/types/skip-nav-link/skip-nav-link.d.ts +3 -2
  73. package/dist/types/skip-nav-link/skip-nav-link.d.ts.map +1 -1
  74. package/dist/types/spinner/use-spinner.d.ts +1 -1
  75. package/dist/types/spinner/use-spinner.d.ts.map +1 -1
  76. package/dist/types/system/react-utils/context.d.ts +1 -5
  77. package/dist/types/system/react-utils/context.d.ts.map +1 -1
  78. package/dist/types/system/types.d.ts +1 -1
  79. package/dist/types/system/types.d.ts.map +1 -1
  80. package/dist/types/system/utils.d.ts +2 -2
  81. package/dist/types/system/utils.d.ts.map +1 -1
  82. package/dist/types/tag-field/tag-field-list.d.ts +6 -6
  83. package/dist/types/tag-field/tag-field-list.d.ts.map +1 -1
  84. package/dist/types/tag-field/tag-field-root.d.ts +3 -3
  85. package/dist/types/tag-field/tag-field-root.d.ts.map +1 -1
  86. package/dist/types/tag-field/tag-field-state-context.d.ts +2 -2
  87. package/dist/types/tag-field/tag-field-state-context.d.ts.map +1 -1
  88. package/dist/types/tag-field/tag-field-tag-list.d.ts +3 -3
  89. package/dist/types/tag-field/tag-field-tag-list.d.ts.map +1 -1
  90. package/dist/types/tag-field/tag-field-trigger.d.ts +2 -2
  91. package/dist/types/tag-field/tag-field-trigger.d.ts.map +1 -1
  92. package/dist/types/tag-field/tag-field.d.ts +1 -1
  93. package/dist/types/tag-field/tag-field.d.ts.map +1 -1
  94. package/dist/types/tag-field/types.d.ts +2 -2
  95. package/dist/types/tag-field/types.d.ts.map +1 -1
  96. package/dist/types/tag-field/use-tag-field-state.d.ts +4 -4
  97. package/dist/types/tag-field/use-tag-field-state.d.ts.map +1 -1
  98. package/dist/types/tag-field/use-tag-field.d.ts +7 -7
  99. package/dist/types/tag-field/use-tag-field.d.ts.map +1 -1
  100. package/dist/types/text-area/text-area.d.ts +3 -2
  101. package/dist/types/text-area/text-area.d.ts.map +1 -1
  102. package/dist/types/text-area-field/text-area-field.d.ts +3 -3
  103. package/dist/types/text-area-field/text-area-field.d.ts.map +1 -1
  104. package/dist/types/text-field/text-field.d.ts +3 -3
  105. package/dist/types/text-field/text-field.d.ts.map +1 -1
  106. package/dist/types/toggle/toggle.d.ts +3 -2
  107. package/dist/types/toggle/toggle.d.ts.map +1 -1
  108. package/package.json +4 -4
@@ -4,9 +4,9 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAria = require('react-aria');
9
8
  var reactStately = require('react-stately');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
10
  var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
11
11
  var info = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.cjs');
12
12
  var button = require('../button/button.cjs');
@@ -4,9 +4,9 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var utils = require('@react-aria/utils');
9
8
  var reactAriaComponents = require('react-aria-components');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
10
  var useRipple = require('../ripple/use-ripple.cjs');
11
11
  var spinner = require('../spinner/spinner.cjs');
12
12
  var ripple = require('../ripple/ripple.cjs');
@@ -4,8 +4,8 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var fuzzysort = require('fuzzysort');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
9
  var comboBox = require('./combo-box.cjs');
10
10
 
11
11
  function HighlightedText({
@@ -4,9 +4,9 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAria = require('react-aria');
9
8
  var reactAriaComponents = require('react-aria-components');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
10
  var field = require('../field/field.cjs');
11
11
  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');
12
12
  var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
@@ -3,8 +3,8 @@
3
3
  'use strict';
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var ouiTheme = require('@opengovsg/oui-theme');
7
6
  var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
8
  var circleAlert = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.cjs');
9
9
 
10
10
  function Label({ size, className, ...props }) {
@@ -4,9 +4,9 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAria = require('react-aria');
9
8
  var reactStately = require('react-stately');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
10
  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');
11
11
  var landmark = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.cjs');
12
12
  var externalLink = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.cjs');
@@ -19,6 +19,7 @@ var comboBox = require('./combo-box/combo-box.cjs');
19
19
  var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
20
20
  var banner = require('./banner/banner.cjs');
21
21
  var tagField = require('./tag-field/tag-field.cjs');
22
+ var select = require('./select/select.cjs');
22
23
 
23
24
 
24
25
 
@@ -45,3 +46,4 @@ exports.ComboBoxItem = comboBox.ComboBoxItem;
45
46
  exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
46
47
  exports.Banner = banner.Banner;
47
48
  exports.TagField = tagField.TagField;
49
+ exports.Select = select.Select;
@@ -4,8 +4,8 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
9
 
10
10
  const Input = react.forwardRef(
11
11
  ({ size, variant, isDisabled, ...props }, ref) => {
@@ -0,0 +1,19 @@
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 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
16
+ const Check = createLucideIcon.default("Check", __iconNode);
17
+
18
+ exports.__iconNode = __iconNode;
19
+ exports.default = Check;
@@ -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: "m7 15 5 5 5-5", key: "1hf1tw" }],
17
+ ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
18
+ ];
19
+ const ChevronsUpDown = createLucideIcon.default("ChevronsUpDown", __iconNode);
20
+
21
+ exports.__iconNode = __iconNode;
22
+ exports.default = ChevronsUpDown;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var select = require('./select.cjs');
5
+
6
+
7
+
8
+ exports.Select = select.Select;
@@ -0,0 +1,63 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var reactAriaComponents = require('react-aria-components');
6
+ var ouiTheme = require('@opengovsg/oui-theme');
7
+ var utils = require('../system/utils.cjs');
8
+ var selectVariantContext = require('./select-variant-context.cjs');
9
+ var check = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.cjs');
10
+
11
+ const SelectItem = utils.forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
12
+ [originalProps, ref] = reactAriaComponents.useContextProps(
13
+ originalProps,
14
+ ref,
15
+ selectVariantContext.SelectVariantContext
16
+ );
17
+ const [props, variantProps] = utils.mapPropsVariants(
18
+ originalProps,
19
+ ouiTheme.selectItemStyles.variantKeys
20
+ );
21
+ const styles = ouiTheme.selectItemStyles(variantProps);
22
+ return /* @__PURE__ */ jsxRuntime.jsx(
23
+ reactAriaComponents.ListBoxItem,
24
+ {
25
+ ...props,
26
+ ref,
27
+ className: ouiTheme.composeRenderProps(
28
+ props.className ?? classNames?.base,
29
+ (className, renderProps) => styles.base({ className, ...renderProps })
30
+ ),
31
+ children: (renderProps) => {
32
+ if (typeof props.children === "function") {
33
+ return props.children(renderProps);
34
+ }
35
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36
+ /* @__PURE__ */ jsxRuntime.jsx(
37
+ "span",
38
+ {
39
+ className: styles.text({
40
+ className: classNames?.text,
41
+ ...renderProps
42
+ }),
43
+ children: props.children
44
+ }
45
+ ),
46
+ renderProps.isSelected && /* @__PURE__ */ jsxRuntime.jsx(
47
+ "span",
48
+ {
49
+ "aria-hidden": true,
50
+ className: styles.icon({
51
+ className: classNames?.icon,
52
+ ...renderProps
53
+ }),
54
+ children: /* @__PURE__ */ jsxRuntime.jsx(check.default, {})
55
+ }
56
+ )
57
+ ] });
58
+ }
59
+ }
60
+ );
61
+ });
62
+
63
+ exports.SelectItem = SelectItem;
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ 'use strict';
3
+
4
+ var context = require('../system/react-utils/context.cjs');
5
+
6
+ const [SelectVariantContext, useSelectVariantContext] = context.createContext({
7
+ name: "SelectVariantContext",
8
+ strict: true
9
+ });
10
+
11
+ exports.SelectVariantContext = SelectVariantContext;
12
+ exports.useSelectVariantContext = useSelectVariantContext;
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+ "use client";
3
+ 'use strict';
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var react = require('react');
7
+ var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
+ var utils = require('../system/utils.cjs');
10
+ var selectVariantContext = require('./select-variant-context.cjs');
11
+ var chevronsUpDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-up-down.cjs');
12
+ var field = require('../field/field.cjs');
13
+ var button = require('../button/button.cjs');
14
+
15
+ const calculateEstimatedRowHeight = (size) => {
16
+ switch (size) {
17
+ case "xs":
18
+ return 44;
19
+ case "sm":
20
+ return 44;
21
+ case "md":
22
+ return 48;
23
+ }
24
+ };
25
+ function Select({
26
+ label,
27
+ description,
28
+ classNames,
29
+ ...originalProps
30
+ }) {
31
+ const [_props, variantProps] = utils.mapPropsVariants(
32
+ originalProps,
33
+ ouiTheme.selectStyles.variantKeys
34
+ );
35
+ const { items, children, listLayoutOptions, ...props } = _props;
36
+ const styles = ouiTheme.selectStyles(variantProps);
37
+ const layout = react.useMemo(() => {
38
+ return new reactAriaComponents.ListLayout({
39
+ estimatedRowHeight: calculateEstimatedRowHeight(
40
+ variantProps.size ?? "md"
41
+ ),
42
+ ...listLayoutOptions
43
+ });
44
+ }, [listLayoutOptions, variantProps.size]);
45
+ return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[selectVariantContext.SelectVariantContext, variantProps]], children: /* @__PURE__ */ jsxRuntime.jsxs(
46
+ reactAriaComponents.Select,
47
+ {
48
+ className: ouiTheme.composeRenderProps(
49
+ props.className,
50
+ (className, renderProps) => styles.base({ className, ...renderProps })
51
+ ),
52
+ ...props,
53
+ children: [
54
+ label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size: variantProps.size, className: classNames?.label, children: label }),
55
+ /* @__PURE__ */ jsxRuntime.jsxs(
56
+ button.Button,
57
+ {
58
+ size: variantProps.size,
59
+ variant: variantProps.variant ?? ouiTheme.selectStyles.defaultVariants.variant,
60
+ color: variantProps.color ?? ouiTheme.selectStyles.defaultVariants.color,
61
+ className: ouiTheme.composeRenderProps(
62
+ classNames?.trigger,
63
+ (className, renderProps) => styles.trigger({ className, ...renderProps })
64
+ ),
65
+ children: [
66
+ /* @__PURE__ */ jsxRuntime.jsx(
67
+ reactAriaComponents.SelectValue,
68
+ {
69
+ className: styles.selectedText({
70
+ className: classNames?.selectedText
71
+ })
72
+ }
73
+ ),
74
+ /* @__PURE__ */ jsxRuntime.jsx(chevronsUpDown.default, { className: "h-4 w-4" })
75
+ ]
76
+ }
77
+ ),
78
+ description && /* @__PURE__ */ jsxRuntime.jsx(
79
+ field.Description,
80
+ {
81
+ size: variantProps.size,
82
+ className: classNames?.description,
83
+ children: description
84
+ }
85
+ ),
86
+ /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: styles.popover({ className: classNames?.popover }), children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Virtualizer, { layout, children: /* @__PURE__ */ jsxRuntime.jsx(
87
+ reactAriaComponents.ListBox,
88
+ {
89
+ items,
90
+ shouldFocusWrap: true,
91
+ className: ouiTheme.composeRenderProps(
92
+ classNames?.list,
93
+ (className, renderProps) => styles.list({ className, ...renderProps })
94
+ ),
95
+ children
96
+ }
97
+ ) }) })
98
+ ]
99
+ }
100
+ ) });
101
+ }
102
+
103
+ exports.Select = Select;
@@ -3,8 +3,8 @@
3
3
  'use strict';
4
4
 
5
5
  var react = require('react');
6
- var ouiTheme = require('@opengovsg/oui-theme');
7
6
  var useDeepCompare = require('use-deep-compare');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
8
  var utils = require('../system/utils.cjs');
9
9
 
10
10
  const useSpinner = (originalProps) => {
@@ -21,11 +21,7 @@ function createContext(options = {}) {
21
21
  }
22
22
  return context;
23
23
  }
24
- return [
25
- Context.Provider,
26
- useContext,
27
- Context
28
- ];
24
+ return [Context, useContext];
29
25
  }
30
26
 
31
27
  exports.createContext = createContext;
@@ -3,8 +3,8 @@
3
3
 
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var react = require('react');
6
- var ouiTheme = require('@opengovsg/oui-theme');
7
6
  var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
8
  var utils = require('../system/utils.cjs');
9
9
  var tagFieldStateContext = require('./tag-field-state-context.cjs');
10
10
 
@@ -4,8 +4,8 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
9
  var tagFieldList = require('./tag-field-list.cjs');
10
10
  var tagFieldRoot = require('./tag-field-root.cjs');
11
11
  var tagFieldTagList = require('./tag-field-tag-list.cjs');
@@ -127,6 +127,7 @@ function useTagField(props, state) {
127
127
  });
128
128
  const { isInvalid, validationErrors, validationDetails } = state.displayValidation;
129
129
  const inputProps = getInputProps({
130
+ placeholder: props.placeholder,
130
131
  ref: inputRef,
131
132
  "aria-label": props["aria-label"],
132
133
  "aria-labelledby": props["aria-labelledby"],
@@ -4,8 +4,8 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAriaComponents = require('react-aria-components');
8
+ var ouiTheme = require('@opengovsg/oui-theme');
9
9
 
10
10
  const TextArea = react.forwardRef(
11
11
  ({ size, variant, isDisabled, ...props }, ref) => {
@@ -3,8 +3,8 @@
3
3
  'use strict';
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var ouiTheme = require('@opengovsg/oui-theme');
7
6
  var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
8
  var textArea = require('../text-area/text-area.cjs');
9
9
  var field = require('../field/field.cjs');
10
10
 
@@ -3,8 +3,8 @@
3
3
  'use strict';
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var ouiTheme = require('@opengovsg/oui-theme');
7
6
  var reactAriaComponents = require('react-aria-components');
7
+ var ouiTheme = require('@opengovsg/oui-theme');
8
8
  var input = require('../input/input.cjs');
9
9
  var field = require('../field/field.cjs');
10
10
 
@@ -4,9 +4,9 @@
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
- var ouiTheme = require('@opengovsg/oui-theme');
8
7
  var reactAria = require('react-aria');
9
8
  var reactAriaComponents = require('react-aria-components');
9
+ var ouiTheme = require('@opengovsg/oui-theme');
10
10
  var utils = require('../system/utils.cjs');
11
11
 
12
12
  const Toggle = ({
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import { useMemo, useRef } from 'react';
5
- import { bannerStyles } from '@opengovsg/oui-theme';
6
5
  import { useMessageFormatter, useDisclosure } from 'react-aria';
7
6
  import { useDisclosureState } from 'react-stately';
7
+ import { bannerStyles } from '@opengovsg/oui-theme';
8
8
  import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
9
9
  import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
10
10
  import { Button } from '../button/button.js';
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import { forwardRef, useMemo } from 'react';
5
- import { buttonStyles } from '@opengovsg/oui-theme';
6
5
  import { chain } from '@react-aria/utils';
7
6
  import { Button as Button$1, composeRenderProps } from 'react-aria-components';
7
+ import { buttonStyles } from '@opengovsg/oui-theme';
8
8
  import { useRipple } from '../ripple/use-ripple.js';
9
9
  import { Spinner } from '../spinner/spinner.js';
10
10
  import { Ripple } from '../ripple/ripple.js';
@@ -2,8 +2,8 @@
2
2
  "use client";
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
  import { useDeferredValue, useMemo, useState, useCallback } from 'react';
5
- import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
6
5
  import fuzzysort from 'fuzzysort';
6
+ import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
7
7
  import { ComboBox, ComboBoxItem } from './combo-box.js';
8
8
 
9
9
  function HighlightedText({
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { useMemo, useCallback } from 'react';
5
- import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
6
5
  import { useMessageFormatter } from 'react-aria';
7
6
  import { ListLayout, ComboBox as ComboBox$1, Input, Button, Virtualizer, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
7
+ import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
8
8
  import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
9
  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';
10
10
  import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  "use client";
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
- import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
5
4
  import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
5
+ import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
6
6
  import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
7
7
 
8
8
  function Label({ size, className, ...props }) {
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useRef } from 'react';
5
- import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
6
5
  import { useMessageFormatter, useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
7
6
  import { useDisclosureState } from 'react-stately';
7
+ import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
8
8
  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';
9
9
  import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js';
10
10
  import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
package/dist/esm/index.js CHANGED
@@ -17,3 +17,4 @@ export { ComboBox, ComboBoxEmptyState, ComboBoxItem } from './combo-box/combo-bo
17
17
  export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
18
18
  export { Banner } from './banner/banner.js';
19
19
  export { TagField } from './tag-field/tag-field.js';
20
+ export { Select } from './select/select.js';
@@ -2,8 +2,8 @@
2
2
  "use client";
3
3
  import { jsx } from 'react/jsx-runtime';
4
4
  import { forwardRef } from 'react';
5
- import { composeRenderProps, inputStyles } from '@opengovsg/oui-theme';
6
5
  import { Input as Input$1 } from 'react-aria-components';
6
+ import { composeRenderProps, inputStyles } from '@opengovsg/oui-theme';
7
7
 
8
8
  const Input = forwardRef(
9
9
  ({ size, variant, isDisabled, ...props }, ref) => {
@@ -0,0 +1,14 @@
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 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
12
+ const Check = createLucideIcon("Check", __iconNode);
13
+
14
+ export { __iconNode, Check as default };
@@ -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: "m7 15 5 5 5-5", key: "1hf1tw" }],
13
+ ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
14
+ ];
15
+ const ChevronsUpDown = createLucideIcon("ChevronsUpDown", __iconNode);
16
+
17
+ export { __iconNode, ChevronsUpDown as default };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ export { Select } from './select.js';
@@ -0,0 +1,61 @@
1
+ "use strict";
2
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
+ import { useContextProps, ListBoxItem } from 'react-aria-components';
4
+ import { selectItemStyles, composeRenderProps } from '@opengovsg/oui-theme';
5
+ import { forwardRef, mapPropsVariants } from '../system/utils.js';
6
+ import { SelectVariantContext } from './select-variant-context.js';
7
+ import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
8
+
9
+ const SelectItem = forwardRef(function SelectItem2({ classNames, ...originalProps }, ref) {
10
+ [originalProps, ref] = useContextProps(
11
+ originalProps,
12
+ ref,
13
+ SelectVariantContext
14
+ );
15
+ const [props, variantProps] = mapPropsVariants(
16
+ originalProps,
17
+ selectItemStyles.variantKeys
18
+ );
19
+ const styles = selectItemStyles(variantProps);
20
+ return /* @__PURE__ */ jsx(
21
+ ListBoxItem,
22
+ {
23
+ ...props,
24
+ ref,
25
+ className: composeRenderProps(
26
+ props.className ?? classNames?.base,
27
+ (className, renderProps) => styles.base({ className, ...renderProps })
28
+ ),
29
+ children: (renderProps) => {
30
+ if (typeof props.children === "function") {
31
+ return props.children(renderProps);
32
+ }
33
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
34
+ /* @__PURE__ */ jsx(
35
+ "span",
36
+ {
37
+ className: styles.text({
38
+ className: classNames?.text,
39
+ ...renderProps
40
+ }),
41
+ children: props.children
42
+ }
43
+ ),
44
+ renderProps.isSelected && /* @__PURE__ */ jsx(
45
+ "span",
46
+ {
47
+ "aria-hidden": true,
48
+ className: styles.icon({
49
+ className: classNames?.icon,
50
+ ...renderProps
51
+ }),
52
+ children: /* @__PURE__ */ jsx(Check, {})
53
+ }
54
+ )
55
+ ] });
56
+ }
57
+ }
58
+ );
59
+ });
60
+
61
+ export { SelectItem };
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ import { createContext } from '../system/react-utils/context.js';
3
+
4
+ const [SelectVariantContext, useSelectVariantContext] = createContext({
5
+ name: "SelectVariantContext",
6
+ strict: true
7
+ });
8
+
9
+ export { SelectVariantContext, useSelectVariantContext };