@opengovsg/oui 0.0.0-snapshot-20251103063040 → 0.0.0-snapshot-20251203091804

package/dist/cjs/tag-field/tag-field-state-context.cjs

@@ -1,11 +1,11 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 
 const TagFieldStateContext = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  $670gB$react.createContext(null)
+  react.createContext(null)
 );
 
 exports.TagFieldStateContext = TagFieldStateContext;

package/dist/cjs/tag-field/tag-field-tag-list.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var tagFieldStateContext = require('./tag-field-state-context.cjs');
 var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
@@ -17,8 +17,8 @@ const TagFieldTagList = ({
     isDisabled,
     isReadOnly,
     itemToText
-  } = $670gB$react.useContext(tagFieldStateContext.TagFieldStateContext);
-  const handleRemoveSelectedItem = $670gB$react.useCallback(
+  } = react.useContext(tagFieldStateContext.TagFieldStateContext);
+  const handleRemoveSelectedItem = react.useCallback(
     (item) => () => {
       if (isDisabled || isReadOnly) return;
       removeSelectedItem(item);

package/dist/cjs/tag-field/tag-field-trigger.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var utils = require('../system/utils.cjs');
 
-const TagFieldTriggerContext = $670gB$react.createContext({});
+const TagFieldTriggerContext = react.createContext({});
 const TagFieldTrigger = utils.forwardRef(
   (props, ref) => {
     [props, ref] = reactAriaComponents.useContextProps(props, ref, TagFieldTriggerContext);

package/dist/cjs/tag-field/tag-field.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 var field = require('../field/field.cjs');
@@ -99,7 +99,7 @@ function TagField({
       {
         className: styles.list({ className: classNames?.list }),
         itemClassNames: props.itemClassNames,
-        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ $670gB$react.createElement(tagFieldItem.TagFieldItem, { ...props2, ...itemProps, key })
+        children: ({ key, itemProps, ...props2 }) => children ? children({ key, itemProps, ...props2 }) : /* @__PURE__ */ react.createElement(tagFieldItem.TagFieldItem, { ...props2, ...itemProps, key })
       }
     ) })
   ] });

package/dist/cjs/tag-field/use-tag-field-state.cjs

@@ -1,14 +1,14 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 var form = require('@react-stately/form');
 var utils = require('@react-stately/utils');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
 
 function useTagFieldState(props) {
   const { itemToText, itemToKey, defaultFilter } = props;
-  const itemsByKey = $670gB$react.useMemo(() => {
+  const itemsByKey = react.useMemo(() => {
     const items = props.items ?? props.defaultItems ?? [];
     return items.reduce(
       (acc, item) => {
@@ -18,7 +18,7 @@ function useTagFieldState(props) {
       {}
     ) ?? {};
   }, [itemToKey, props.defaultItems, props.items]);
-  const getSelectedItemsByKey = $670gB$react.useCallback(
+  const getSelectedItemsByKey = react.useCallback(
     (keys) => {
       if (!keys) return;
       return [...keys].map((key) => itemsByKey[key]);
@@ -36,13 +36,13 @@ function useTagFieldState(props) {
     defaultInputValue,
     props.onInputChange
   );
-  const controlledSelectedKeys = $670gB$react.useMemo(
+  const controlledSelectedKeys = react.useMemo(
     () => new Set(selectedItems.map(itemToKey)),
     [itemToKey, selectedItems]
   );
   const validation = form.useFormValidationState({
     ...props,
-    value: $670gB$react.useMemo(
+    value: react.useMemo(
       () => ({
         inputValue,
         selectedKeys: controlledSelectedKeys
@@ -50,7 +50,7 @@ function useTagFieldState(props) {
       [controlledSelectedKeys, inputValue]
     )
   });
-  const filteredItems = $670gB$react.useMemo(
+  const filteredItems = react.useMemo(
     () => (
       // No default filter if items are controlled.
       !!props.items || !defaultFilter ? props.items ?? [] : filterItems({

package/dist/cjs/tag-field/use-tag-field.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var $670gB$react = require('react');
+var react = require('react');
 var utils = require('@react-aria/utils');
 var reactVirtual = require('@tanstack/react-virtual');
 var downshift = require('downshift');
@@ -23,7 +23,7 @@ function useTagField(props, state) {
     label,
     virtualRowHeight = 40
   } = props;
-  const backupBtnRef = $670gB$react.useRef(null);
+  const backupBtnRef = react.useRef(null);
   buttonRef = buttonRef ?? backupBtnRef;
   const {
     selectedItems,
@@ -48,14 +48,14 @@ function useTagField(props, state) {
       }
     }
   });
-  const disabledKeysSet = $670gB$react.useMemo(() => {
+  const disabledKeysSet = react.useMemo(() => {
     return new Set(disabledKeys);
   }, [disabledKeys]);
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     getScrollElement: () => listBoxRef.current,
     estimateSize: () => virtualRowHeight,
-    getItemKey: $670gB$react.useCallback(
+    getItemKey: react.useCallback(
       (index) => itemToKey(items[index]),
       [itemToKey, items]
     ),

package/dist/cjs/text-area/text-area.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 
-const TextArea = $670gB$react.forwardRef(
+const TextArea = react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,

package/dist/cjs/toggle/toggle.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
+var react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -21,12 +21,12 @@ const Toggle = ({
     ouiTheme.toggleStyles.variantKeys
   );
   const slots = ouiTheme.toggleStyles(variantProps);
-  const clonedThumbIcon = $670gB$react.useCallback(
+  const clonedThumbIcon = react.useCallback(
     (renderProps) => {
       const baseProps = {
         className: slots.thumbIcon({ className: classNames?.thumbIcon })
       };
-      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
     },
     [classNames?.thumbIcon, slots, thumbIcon]
   );

package/dist/esm/banner/banner.js

@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 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';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
-import { Button } from '../button/button.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {

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

@@ -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-field/date-field.js

@@ -9,7 +9,15 @@ import { mapPropsVariants } from '../system/utils.js';
 
 function DateField(originalProps) {
   const [
-    { label, description, errorMessage, className, classNames, ...props },
+    {
+      inputProps,
+      label,
+      description,
+      errorMessage,
+      className,
+      classNames,
+      ...props
+    },
     variantProps
   ] = useMemo(
     () => mapPropsVariants(originalProps, dateFieldStyles.variantKeys),
@@ -26,11 +34,11 @@ function DateField(originalProps) {
       isDisabled: variantProps.isDisabled,
       className: composeTailwindRenderProps(
         className ?? classNames?.base,
-        "flex flex-col gap-2"
+        "flex w-full flex-col gap-2"
       ),
       children: [
         label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
-        /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles }),
+        /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
         description && /* @__PURE__ */ jsx(
           Description,
           {
@@ -65,6 +73,7 @@ function DateInput(originalProps) {
           className: composeRenderProps(
             classNames?.segment,
             (className2, renderProps) => styles.segment({
+              isEditable: segment.isEditable,
               ...renderProps,
               className: className2
             })

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

@@ -4,13 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import '@internationalized/date';
 import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
-import { Button } from '../button/button.js';
 
 function DatePicker(originalProps) {
   const [
@@ -23,6 +24,7 @@ function DatePicker(originalProps) {
       calendarProps,
       popoverProps,
       calendarButtonProps,
+      selectorIcon,
       ...props
     },
     variantProps
@@ -61,20 +63,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,
+          {
+            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 === "xs" ? "sm" : variantProps.size,
-            classNames: classNames?.calendar,
-            ...calendarProps
+            className: classNames?.description,
+            size: variantProps.size,
+            children: description
           }
-        ) }) }),
-        description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
-        /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
+        ),
+        /* @__PURE__ */ jsx(FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
       ]
     }
   );

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

@@ -5,13 +5,13 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { DateInput } from '../date-field/date-field.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Button } from '../button/button.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/field/field.js

@@ -1,6 +1,7 @@
 "use strict";
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
 import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
 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';
@@ -12,12 +13,19 @@ function Description({ size, className, ...props }) {
   return /* @__PURE__ */ jsx(
     Text,
     {
-      ...props,
       slot: "description",
+      ...props,
       className: descriptionStyles({ className, size })
     }
   );
 }
+function FieldErrorIcon({
+  size,
+  className
+}) {
+  const styles = fieldErrorStyles({ size });
+  return /* @__PURE__ */ jsx(CircleAlert, { className: styles.icon({ className }) });
+}
 function FieldError({
   children,
   className,
@@ -26,7 +34,15 @@ function FieldError({
   ...props
 }) {
   const styles = fieldErrorStyles({ size });
-  if (!children) return null;
+  const childrenFromProps = useMemo(() => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(FieldErrorIcon, { className: classNames?.icon, size }),
+        children
+      ] });
+    }
+    return children;
+  }, [children, classNames?.icon, size]);
   return /* @__PURE__ */ jsx(
     FieldError$1,
     {
@@ -35,10 +51,7 @@ function FieldError({
         className ?? classNames?.text,
         (className2, renderProps) => styles.text({ ...renderProps, className: className2 })
       ),
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CircleAlert, { className: styles.icon({ className: classNames?.icon }) }),
-        children
-      ] })
+      children: childrenFromProps
     }
   );
 }
@@ -55,4 +68,4 @@ function FieldGroup(props) {
   );
 }
 
-export { Description, FieldError, FieldGroup, Label };
+export { Description, FieldError, FieldErrorIcon, FieldGroup, Label };

package/dist/esm/field/index.js

@@ -1,2 +1,2 @@
 "use strict";
-export { Description, FieldError, FieldGroup, Label } from './field.js';
+export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field.js';

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 };