@opengovsg/oui 0.0.24 → 0.0.26

package/dist/cjs/modal/modal-header.cjs

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var modalVariantContext = require('./modal-variant-context.cjs');
+
+function ModalHeader(props) {
+  const { slots, classNames } = react.useContext(modalVariantContext.ModalVariantContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Heading,
+    {
+      slot: "title",
+      ...props,
+      className: slots.header({
+        className: ouiTheme.cn(classNames?.header, props.className)
+      })
+    }
+  );
+}
+
+exports.ModalHeader = ModalHeader;

package/dist/cjs/modal/modal-variant-context.cjs

@@ -0,0 +1,13 @@
+"use strict";
+"use client";
+'use strict';
+
+var context = require('../system/react-utils/context.cjs');
+
+const [ModalVariantContext, useModalVariantContext] = context.createContext({
+  name: "ModalVariantContext",
+  strict: true
+});
+
+exports.ModalVariantContext = ModalVariantContext;
+exports.useModalVariantContext = useModalVariantContext;

package/dist/cjs/modal/modal.cjs

@@ -0,0 +1,66 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var ouiTheme = require('@opengovsg/oui-theme');
+var utils = require('../system/utils.cjs');
+var modalVariantContext = require('./modal-variant-context.cjs');
+
+const Modal = react.forwardRef(function Modal2(originalProps, ref) {
+  const [{ classNames, ...props }, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.modalStyles.variantKeys
+  );
+  const { isDismissable = true } = props;
+  const slots = ouiTheme.modalStyles(variantProps);
+  const buttonSize = react.useMemo(() => {
+    switch (variantProps.size) {
+      case "mobile":
+        return "md";
+      default: {
+        return "lg";
+      }
+    }
+  }, [variantProps.size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Provider,
+    {
+      values: [
+        [
+          modalVariantContext.ModalVariantContext,
+          { ...variantProps, classNames, buttonSize, slots }
+        ]
+      ],
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactAriaComponents.ModalOverlay,
+        {
+          ...props,
+          isDismissable,
+          className: ouiTheme.composeRenderProps(
+            classNames?.overlay,
+            (className, renderProps) => slots.overlay({ className, ...renderProps })
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Modal,
+            {
+              ...props,
+              ref,
+              isDismissable,
+              "data-placement": variantProps.placement,
+              className: ouiTheme.composeRenderProps(
+                props.className ?? classNames?.base,
+                (className, renderProps) => slots.base({ className, ...renderProps })
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+});
+Modal.displayName = "Modal";
+
+exports.Modal = Modal;

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

@@ -5,11 +5,11 @@
 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.2.1/node_modules/lucide-react/dist/esm/icons/minus.cjs');
+var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/plus.cjs');
 var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
-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 button = require('../button/button.cjs');
 
 function NumberField(originalProps) {

package/dist/cjs/pagination/pagination.cjs

@@ -11,9 +11,9 @@ var usePagination$1 = require('./hooks/use-pagination.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
 var usePagination = require('./use-pagination.cjs');
-var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
-var ellipsis = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs');
-var chevronsRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs');
+var chevronLeft = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
+var ellipsis = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/ellipsis.cjs');
+var chevronsRight = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs');
 
 const Pagination = utils.forwardRef((props, ref) => {
   const {

package/dist/cjs/select/select.cjs

@@ -6,11 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-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');
+var field = require('../field/field.cjs');
+var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var popover = require('../popover/popover.cjs');
 var button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {

package/dist/cjs/system/utils.cjs

@@ -28,53 +28,6 @@ const mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   }
   return [props, picked];
 };
-function useRenderProps(props) {
-  const {
-    className,
-    style,
-    children,
-    defaultClassName = void 0,
-    defaultChildren = void 0,
-    defaultStyle,
-    values
-  } = props;
-  return react.useMemo(() => {
-    let computedClassName;
-    let computedStyle;
-    let computedChildren;
-    if (typeof className === "function") {
-      computedClassName = className({ ...values, defaultClassName });
-    } else {
-      computedClassName = className;
-    }
-    if (typeof style === "function") {
-      computedStyle = style({ ...values, defaultStyle: defaultStyle || {} });
-    } else {
-      computedStyle = style;
-    }
-    if (typeof children === "function") {
-      computedChildren = children({ ...values, defaultChildren });
-    } else if (children == null) {
-      computedChildren = defaultChildren;
-    } else {
-      computedChildren = children;
-    }
-    return {
-      className: computedClassName ?? defaultClassName,
-      style: computedStyle || defaultStyle ? { ...defaultStyle, ...computedStyle } : void 0,
-      children: computedChildren ?? defaultChildren,
-      "data-rac": ""
-    };
-  }, [
-    className,
-    style,
-    children,
-    defaultClassName,
-    defaultChildren,
-    defaultStyle,
-    values
-  ]);
-}
 function removeDataAttributes(props) {
   const prefix = /^(data-.*)$/;
   const filteredProps = {};
@@ -101,4 +54,3 @@ exports.forwardRefGeneric = forwardRefGeneric;
 exports.mapPropsVariants = mapPropsVariants;
 exports.pickAriaAttributes = pickAriaAttributes;
 exports.removeDataAttributes = removeDataAttributes;
-exports.useRenderProps = useRenderProps;

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

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 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');
+var x = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/x.cjs');
 
 const TagFieldTagList = ({
   classNames,

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

@@ -6,15 +6,15 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
-var input = require('../input/input.cjs');
-var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
 var tagFieldList = require('./tag-field-list.cjs');
 var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.cjs');
-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');
+var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
+var popover = require('../popover/popover.cjs');
 
 function TagField({
   classNames,

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

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var textArea = require('../text-area/text-area.cjs');
+var field = require('../field/field.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
+var field = require('../field/field.cjs');
 
 function TextField({
   label,

package/dist/esm/badge/badge.js

@@ -3,7 +3,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { useBadge } from './use-badge.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';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const Badge = forwardRef((props, ref) => {
   const {

package/dist/esm/banner/banner.js

@@ -5,10 +5,10 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } 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';
-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 CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
+import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/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';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {
   "en-SG": {

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 { useRipple } from '../ripple/use-ripple.js';
+import { Ripple } from '../ripple/ripple.js';
 
 const Button = forwardRef(
   ({

package/dist/esm/calendar/calendar-header.js

@@ -8,8 +8,8 @@ import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.
 import { CalendarMonthDaySelector } from './calendar-month-day-selector.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { useLocalizedMonthYear } from './utils.js';
-import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
-import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
+import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
+import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
 
 function CalendarHeader({ offsetMonths = 0 }) {
   const { direction } = useLocale();

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
-import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
-import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
+import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/minus.js';
+import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/check.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,

package/dist/esm/combo-box/combo-box.js

@@ -5,13 +5,13 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
-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';
-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';
-import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/x.js';
+import { Popover } from '../popover/popover.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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

@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
 import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 function DateField(originalProps) {
   const [

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

@@ -4,13 +4,13 @@ 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 { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { DateInput } from '../date-field/date-field.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 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/calendar.js';
 import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Button } from '../button/button.js';
+import { Popover } from '../popover/popover.js';
 
 function DatePicker(originalProps) {
   const [

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 { 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 Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/calendar.js';
+import { RangeCalendar } from '../range-calendar/range-calendar.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { DateInput } from '../date-field/date-field.js';
 import { Button } from '../button/button.js';
+import { Popover } from '../popover/popover.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/field/field.js

@@ -4,7 +4,7 @@ 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';
+import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 
 function Label({ size, className, ...props }) {
   return /* @__PURE__ */ jsx(Label$1, { ...props, className: labelStyles({ className, size }) });

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

@@ -7,13 +7,13 @@ import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
 import { useDropzone } from 'react-dropzone';
 import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
-import { Label, Description, FieldError } from '../field/field.js';
-import { useControllableState } from '../hooks/use-controllable-state.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { FileDropzoneStyleContext, FileDropzoneStateContext, useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { FileInfo } from './file-info.js';
 import { formatErrorMessage, formatBytes } from './utils.js';
-import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js';
+import { useControllableState } from '../hooks/use-controllable-state.js';
+import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/upload.js';
+import { Label, Description, FieldError } from '../field/field.js';
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = mapPropsVariants(

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

@@ -5,7 +5,7 @@ import { useState, useEffect } from 'react';
 import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
 import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { formatBytes } from './utils.js';
-import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js';
+import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/trash-2.js';
 import { Button } from '../button/button.js';
 
 const FileInfo = ({ file, imagePreview, classNames }) => {

package/dist/esm/govt-banner/govt-banner.js

@@ -5,10 +5,10 @@ import { useRef } from 'react';
 import { useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
-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';
-import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js';
-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';
-import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.js';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/landmark.js';
+import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/external-link.js';
+import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.1/node_modules/lucide-react/dist/esm/icons/lock.js';
 
 function GovtBanner({
   environment,

package/dist/esm/hooks/index.js

@@ -1,2 +1,3 @@
 "use strict";
 export { useControllableState } from './use-controllable-state.js';
+export { useDraggable } from './use-draggable.js';

package/dist/esm/hooks/use-draggable.js

@@ -0,0 +1,86 @@
+"use strict";
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { useMove } from '@react-aria/interactions';
+
+function useDraggable(props) {
+  const { targetRef, isDisabled = false, canOverflow = false } = props;
+  const boundary = useRef({ minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0 });
+  const isDragging = useRef(false);
+  let transform = { offsetX: 0, offsetY: 0 };
+  const onMoveStart = useCallback(() => {
+    isDragging.current = true;
+    const { offsetX, offsetY } = transform;
+    const targetRect = targetRef?.current?.getBoundingClientRect();
+    const targetLeft = targetRect?.left ?? 0;
+    const targetTop = targetRect?.top ?? 0;
+    const targetWidth = targetRect?.width ?? 0;
+    const targetHeight = targetRect?.height ?? 0;
+    const clientWidth = document.documentElement.clientWidth;
+    const clientHeight = document.documentElement.clientHeight;
+    const minLeft = -targetLeft + offsetX;
+    const minTop = -targetTop + offsetY;
+    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+    const maxTop = clientHeight - targetTop - targetHeight + offsetY;
+    boundary.current = {
+      minLeft,
+      minTop,
+      maxLeft,
+      maxTop
+    };
+  }, [transform, targetRef?.current]);
+  const onMove = useCallback(
+    (e) => {
+      if (isDisabled) {
+        return;
+      }
+      const { offsetX, offsetY } = transform;
+      const { minLeft, minTop, maxLeft, maxTop } = boundary.current;
+      let moveX = offsetX + e.deltaX;
+      let moveY = offsetY + e.deltaY;
+      if (!canOverflow) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+        moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      }
+      transform = {
+        offsetX: moveX,
+        offsetY: moveY
+      };
+      if (targetRef?.current) {
+        targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
+      }
+    },
+    [isDisabled, transform, boundary.current, canOverflow, targetRef?.current]
+  );
+  const onMoveEnd = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  const { moveProps } = useMove({
+    onMoveStart,
+    onMove,
+    onMoveEnd
+  });
+  const preventDefault = useCallback((e) => {
+    if (isDragging.current) {
+      e.preventDefault();
+    }
+  }, []);
+  useEffect(() => {
+    if (!isDisabled) {
+      document.body.addEventListener("touchmove", preventDefault, {
+        passive: false
+      });
+    }
+    return () => {
+      document.body.removeEventListener("touchmove", preventDefault);
+    };
+  }, [isDisabled, preventDefault]);
+  return {
+    moveProps: {
+      ...moveProps,
+      style: { cursor: !isDisabled ? "move" : void 0 }
+    }
+  };
+}
+
+export { useDraggable };

package/dist/esm/index.js

@@ -1,15 +1,9 @@
 "use strict";
-export { useControllableState } from './hooks/use-controllable-state.js';
-export { GovtBanner } from './govt-banner/govt-banner.js';
-export { Ripple } from './ripple/ripple.js';
-export { useRipple } from './ripple/use-ripple.js';
 export { Spinner } from './spinner/spinner.js';
 export { useSpinner } from './spinner/use-spinner.js';
 export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
-export { Input } from './input/input.js';
 export { TextField } from './text-field/text-field.js';
-export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
 export { TagField } from './tag-field/tag-field.js';
@@ -17,20 +11,15 @@ export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
-export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
-export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
-export { Popover } from './popover/popover.js';
 export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
-export { Pagination } from './pagination/pagination.js';
-export { PaginationCursor } from './pagination/pagination-cursor.js';
-export { PaginationItem } from './pagination/pagination-item.js';
-export { PaginationItemType } from './pagination/hooks/use-pagination.js';
-export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
-export { FileDropzone } from './file-dropzone/file-dropzone.js';
-export { FileInfo } from './file-dropzone/file-info.js';
-export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
-export { NumberField } from './number-field/number-field.js';
+export { useControllableState } from './hooks/use-controllable-state.js';
+export { useDraggable } from './hooks/use-draggable.js';
 export { Button } from './button/button.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
+export { Ripple } from './ripple/ripple.js';
+export { useRipple } from './ripple/use-ripple.js';
+export { Input } from './input/input.js';
+export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
 export { ComboBoxItem } from './combo-box/combo-box-item.js';
@@ -41,8 +30,26 @@ export { CalendarDate } from '@internationalized/date';
 export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
 export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
 export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
+export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
+export { Popover } from './popover/popover.js';
 export { DateField, DateInput } from './date-field/date-field.js';
 export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-range-picker/date-range-picker.js';
 export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
 export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
+export { PaginationItemType } from './pagination/hooks/use-pagination.js';
+export { Pagination } from './pagination/pagination.js';
+export { PaginationCursor } from './pagination/pagination-cursor.js';
+export { PaginationItem } from './pagination/pagination-item.js';
+export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
+export { FileDropzone } from './file-dropzone/file-dropzone.js';
+export { FileInfo } from './file-dropzone/file-info.js';
+export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
+export { NumberField } from './number-field/number-field.js';
+export { Modal } from './modal/modal.js';
+export { ModalContent } from './modal/modal-content.js';
+export { ModalFooter } from './modal/modal-footer.js';
+export { ModalBody } from './modal/modal-body.js';
+export { ModalHeader } from './modal/modal-header.js';
+export { ModalVariantContext, useModalVariantContext } from './modal/modal-variant-context.js';