@opengovsg/oui 0.0.21 → 0.0.23

package/dist/cjs/index.cjs

@@ -1,39 +1,39 @@
 "use strict";
 'use strict';
 
-var toggle = require('./toggle/toggle.cjs');
-var useControllableState = require('./hooks/use-controllable-state.cjs');
-var button = require('./button/button.cjs');
-var govtBanner = require('./govt-banner/govt-banner.cjs');
 var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
 var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
+var toggle = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
-var input = require('./input/input.cjs');
 var textField = require('./text-field/text-field.cjs');
-var field = require('./field/field.cjs');
 var textArea = require('./text-area/text-area.cjs');
 var textAreaField = require('./text-area-field/text-area-field.cjs');
 var comboBox = require('./combo-box/combo-box.cjs');
 var comboBoxFuzzy = require('./combo-box/combo-box-fuzzy.cjs');
 var comboBoxItem = require('./combo-box/combo-box-item.cjs');
 var comboBoxVariantContext = require('./combo-box/combo-box-variant-context.cjs');
-var banner = require('./banner/banner.cjs');
 var tagField = require('./tag-field/tag-field.cjs');
 var tagFieldItem = require('./tag-field/tag-field-item.cjs');
 var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
+var menu = require('./menu/menu.cjs');
+var tabs = require('./tabs/tabs.cjs');
+var useControllableState = require('./hooks/use-controllable-state.cjs');
+var button = require('./button/button.cjs');
+var govtBanner = require('./govt-banner/govt-banner.cjs');
+var input = require('./input/input.cjs');
+var field = require('./field/field.cjs');
+var banner = require('./banner/banner.cjs');
 var badge = require('./badge/badge.cjs');
 var date = require('@internationalized/date');
 var calendar = require('./calendar/calendar.cjs');
 var calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils = require('./calendar/utils.cjs');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
-var menu = require('./menu/menu.cjs');
 var popover = require('./popover/popover.cjs');
-var tabs = require('./tabs/tabs.cjs');
 var dateField = require('./date-field/date-field.cjs');
 var datePicker = require('./date-picker/date-picker.cjs');
 var dateRangePicker = require('./date-range-picker/date-range-picker.cjs');
@@ -44,25 +44,20 @@ var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
 var usePagination$1 = require('./pagination/use-pagination.cjs');
+var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
+var fileInfo = require('./file-dropzone/file-info.cjs');
+var utils$1 = require('./file-dropzone/utils.cjs');
+var numberField = require('./number-field/number-field.cjs');
 
 
 
-exports.Toggle = toggle.Toggle;
-exports.useControllableState = useControllableState.useControllableState;
-exports.Button = button.Button;
-exports.GovtBanner = govtBanner.GovtBanner;
 exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
 exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
+exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
-exports.Input = input.Input;
 exports.TextField = textField.TextField;
-exports.Description = field.Description;
-exports.FieldError = field.FieldError;
-exports.FieldErrorIcon = field.FieldErrorIcon;
-exports.FieldGroup = field.FieldGroup;
-exports.Label = field.Label;
 exports.TextArea = textArea.TextArea;
 exports.TextAreaField = textAreaField.TextAreaField;
 exports.ComboBox = comboBox.ComboBox;
@@ -71,13 +66,36 @@ exports.ComboBoxFuzzy = comboBoxFuzzy.ComboBoxFuzzy;
 exports.ComboBoxItem = comboBoxItem.ComboBoxItem;
 exports.ComboBoxVariantContext = comboBoxVariantContext.ComboBoxVariantContext;
 exports.useComboBoxVariantContext = comboBoxVariantContext.useComboBoxVariantContext;
-exports.Banner = banner.Banner;
 exports.TagField = tagField.TagField;
 exports.TagFieldItem = tagFieldItem.TagFieldItem;
 exports.Select = select.Select;
 exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
+exports.Menu = menu.Menu;
+exports.MenuItem = menu.MenuItem;
+exports.MenuSection = menu.MenuSection;
+exports.MenuSeparator = menu.MenuSeparator;
+exports.MenuTrigger = menu.MenuTrigger;
+exports.MenuVariantContext = menu.MenuVariantContext;
+exports.SubmenuTrigger = menu.SubmenuTrigger;
+exports.useMenuVariantContext = menu.useMenuVariantContext;
+exports.Tab = tabs.Tab;
+exports.TabList = tabs.TabList;
+exports.TabPanel = tabs.TabPanel;
+exports.Tabs = tabs.Tabs;
+exports.TabsVariantContext = tabs.TabsVariantContext;
+exports.useTabsVariantContext = tabs.useTabsVariantContext;
+exports.useControllableState = useControllableState.useControllableState;
+exports.Button = button.Button;
+exports.GovtBanner = govtBanner.GovtBanner;
+exports.Input = input.Input;
+exports.Description = field.Description;
+exports.FieldError = field.FieldError;
+exports.FieldErrorIcon = field.FieldErrorIcon;
+exports.FieldGroup = field.FieldGroup;
+exports.Label = field.Label;
+exports.Banner = banner.Banner;
 exports.Badge = badge.Badge;
 Object.defineProperty(exports, "CalendarDate", {
 	enumerable: true,
@@ -94,21 +112,7 @@ exports.useLocalizedMonthYear = utils.useLocalizedMonthYear;
 exports.RangeCalendar = rangeCalendar.RangeCalendar;
 exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
 exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
-exports.Menu = menu.Menu;
-exports.MenuItem = menu.MenuItem;
-exports.MenuSection = menu.MenuSection;
-exports.MenuSeparator = menu.MenuSeparator;
-exports.MenuTrigger = menu.MenuTrigger;
-exports.MenuVariantContext = menu.MenuVariantContext;
-exports.SubmenuTrigger = menu.SubmenuTrigger;
-exports.useMenuVariantContext = menu.useMenuVariantContext;
 exports.Popover = popover.Popover;
-exports.Tab = tabs.Tab;
-exports.TabList = tabs.TabList;
-exports.TabPanel = tabs.TabPanel;
-exports.Tabs = tabs.Tabs;
-exports.TabsVariantContext = tabs.TabsVariantContext;
-exports.useTabsVariantContext = tabs.useTabsVariantContext;
 exports.DateField = dateField.DateField;
 exports.DateInput = dateField.DateInput;
 exports.DatePicker = datePicker.DatePicker;
@@ -123,3 +127,8 @@ exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination$1.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination$1.usePagination;
+exports.FileDropzone = fileDropzone.FileDropzone;
+exports.FileInfo = fileInfo.FileInfo;
+exports.formatBytes = utils$1.formatBytes;
+exports.formatErrorMessage = utils$1.formatErrorMessage;
+exports.NumberField = numberField.NumberField;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon.default("Plus", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Plus;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+];
+const Trash2 = createLucideIcon.default("Trash2", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Trash2;

package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createLucideIcon = require('../createLucideIcon.cjs');
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
+  ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
+];
+const Upload = createLucideIcon.default("Upload", __iconNode);
+
+exports.__iconNode = __iconNode;
+exports.default = Upload;

package/dist/cjs/number-field/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var numberField = require('./number-field.cjs');
+
+
+
+exports.NumberField = numberField.NumberField;

package/dist/cjs/number-field/number-field.cjs

@@ -0,0 +1,136 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.cjs');
+var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var button = require('../button/button.cjs');
+
+function NumberField(originalProps) {
+  const [
+    {
+      label,
+      description,
+      errorMessage,
+      classNames,
+      inputProps,
+      startContent,
+      endContent,
+      hideSteppers,
+      ...props
+    },
+    variantProps
+  ] = utils.mapPropsVariants(originalProps, ouiTheme.numberFieldStyles.variantKeys);
+  const styles = ouiTheme.numberFieldStyles(variantProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.NumberField,
+    {
+      ...props,
+      "data-hide-steppers": ouiTheme.dataAttr(!!hideSteppers),
+      "data-has-start-content": ouiTheme.dataAttr(!!startContent),
+      "data-has-end-content": ouiTheme.dataAttr(!!endContent),
+      className: ouiTheme.composeTailwindRenderProps(
+        props.className,
+        styles.base({
+          className: classNames?.base
+        })
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Label,
+          {
+            className: styles.label({ className: classNames?.label }),
+            size: variantProps.size,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldGroup, { className: styles.field({ className: classNames?.field }), children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          startContent,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              size: variantProps.size,
+              variant: "unstyled",
+              className: styles.input({
+                className: classNames?.input
+              }),
+              ...inputProps
+            }
+          ),
+          endContent,
+          !hideSteppers && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: ouiTheme.fieldBorderStyles({
+                ...renderProps,
+                className: ouiTheme.cn(
+                  styles.stepperContainer({
+                    className: classNames?.stepperContainer
+                  })
+                )
+              }),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    className: styles.decrement({
+                      className: classNames?.decrement
+                    }),
+                    size: variantProps.size,
+                    isIconOnly: true,
+                    variant: "clear",
+                    color: "neutral",
+                    slot: "decrement",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(minus.default, { "aria-hidden": true })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    className: styles.increment({
+                      className: classNames?.increment
+                    }),
+                    size: variantProps.size,
+                    isIconOnly: true,
+                    variant: "clear",
+                    color: "neutral",
+                    slot: "increment",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(plus.default, { "aria-hidden": true })
+                  }
+                )
+              ]
+            }
+          )
+        ] }) }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Description,
+          {
+            className: styles.description({
+              className: classNames?.description
+            }),
+            size: variantProps.size,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          field.FieldError,
+          {
+            className: styles.error({
+              className: classNames?.error
+            }),
+            size: variantProps.size,
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.NumberField = NumberField;

package/dist/esm/button/button.js

@@ -5,9 +5,9 @@ import { forwardRef, useMemo } from 'react';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
 import { buttonStyles } from '@opengovsg/oui-theme';
+import { Ripple } from '../ripple/ripple.js';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
-import { Ripple } from '../ripple/ripple.js';
 
 const Button = forwardRef(
   ({

package/dist/esm/calendar/calendar-month-day-selector.js

@@ -4,11 +4,11 @@ import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { Group } from 'react-aria-components';
+import { Select } from '../select/select.js';
+import { SelectItem } from '../select/select-item.js';
 import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { useCalendarSelectors } from './hooks/use-calendar-selectors.js';
-import { Select } from '../select/select.js';
-import { SelectItem } from '../select/select-item.js';
 import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
 
 const CalendarMonthDaySelector = () => {
@@ -61,7 +61,8 @@ const CalendarMonthDaySelector = () => {
           list: slots.yearList({ className: classNames?.yearList }),
           selectedText: slots.selectorText({
             className: classNames?.selectorText
-          })
+          }),
+          popover: "min-w-[8ch]"
         },
         selectedKey: state.visibleRange.start.year,
         "aria-label": formatMessage("selectYear"),

package/dist/esm/date-picker/date-picker.js

@@ -23,6 +23,7 @@ function DatePicker(originalProps) {
       calendarProps,
       popoverProps,
       calendarButtonProps,
+      selectorIcon,
       ...props
     },
     variantProps
@@ -61,20 +62,44 @@ function DatePicker(originalProps) {
                 className: classNames?.calendarButton
               }),
               ...calendarButtonProps,
-              children: /* @__PURE__ */ jsx(Calendar, { "aria-hidden": true })
+              children: selectorIcon ?? /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  className: styles.selectorIcon({
+                    className: classNames?.selectorIcon
+                  }),
+                  "aria-hidden": true
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
-          Calendar$1,
+        /* @__PURE__ */ jsx(
+          Popover,
           {
-            size: variantProps.size === "xs" ? "sm" : variantProps.size,
-            classNames: classNames?.calendar,
-            ...calendarProps
+            placement: "bottom end",
+            classNames: classNames?.popover,
+            ...popoverProps,
+            children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
+              Calendar$1,
+              {
+                size: variantProps.size === "xs" ? "sm" : variantProps.size,
+                classNames: classNames?.calendar,
+                pageBehavior: props.pageBehavior,
+                ...calendarProps
+              }
+            ) })
           }
-        ) }) }),
-        description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
-        /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
+        ),
+        description && /* @__PURE__ */ jsx(
+          Description,
+          {
+            className: classNames?.description,
+            size: variantProps.size,
+            children: description
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
       ]
     }
   );

package/dist/esm/field/field.js

@@ -13,8 +13,8 @@ function Description({ size, className, ...props }) {
   return /* @__PURE__ */ jsx(
     Text,
     {
-      ...props,
       slot: "description",
+      ...props,
       className: descriptionStyles({ className, size })
     }
   );

package/dist/esm/file-dropzone/contexts.js

@@ -0,0 +1,13 @@
+"use strict";
+import { createContext } from '../system/react-utils/context.js';
+
+const [FileDropzoneStateContext, useFileDropzoneStateContext] = createContext({
+  strict: true,
+  name: "FileDropzoneStateContext"
+});
+const [FileDropzoneStyleContext, useFileDropzoneStyleContext] = createContext({
+  strict: true,
+  name: "FileDropzoneStyleContext"
+});
+
+export { FileDropzoneStateContext, FileDropzoneStyleContext, useFileDropzoneStateContext, useFileDropzoneStyleContext };