@opengovsg/oui 0.0.0-snapshot-20250320092809 → 0.0.0-snapshot-20250326085831

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -0,0 +1,188 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var date = require('@internationalized/date');
+var reactAriaComponents = require('react-aria-components');
+var useDeepCompare = require('use-deep-compare');
+var ouiTheme = require('@opengovsg/oui-theme');
+var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
+var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
+var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
+var calendarHeader = require('../calendar/calendar-header.cjs');
+var utils = require('../system/utils.cjs');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
+
+const RangeCalendar = react.forwardRef(function RangeCalendar2(originalProps, ref) {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.calendarStyles.variantKeys
+  );
+  const {
+    className,
+    classNames,
+    weekdayStyle = "narrow",
+    minValue = new date.CalendarDate(1900, 0, 1),
+    maxValue = new date.CalendarDate(2100, 12, 31),
+    bottomContent,
+    showTodayButton = true,
+    errorMessage,
+    ...restProps
+  } = props;
+  const slots = useDeepCompare.useDeepCompareMemo(
+    () => ouiTheme.calendarStyles({ ...variantProps, isRange: true }),
+    [variantProps]
+  );
+  const context = react.useMemo(
+    () => ({
+      slots,
+      classNames,
+      className,
+      size: variantProps.size ?? ouiTheme.calendarStyles.defaultVariants.size
+    }),
+    [className, classNames, slots, variantProps.size]
+  );
+  const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
+  const dateToHighlight = react.useMemo(() => {
+    if (props.defaultFocusedValue !== void 0) {
+      return props.defaultFocusedValue;
+    }
+    return date.today(date.getLocalTimeZone());
+  }, [props.defaultFocusedValue]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.RangeCalendar,
+    {
+      ...restProps,
+      ref,
+      minValue,
+      maxValue,
+      className: ouiTheme.composeRenderProps(
+        className,
+        (className2, renderProps) => slots.base({
+          className: ouiTheme.cn(classNames?.base, className2),
+          ...renderProps
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[calendarStyleContext.CalendarStyleContext, context]], children: /* @__PURE__ */ jsxRuntime.jsxs(RangeCalendarStateWrapper, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: slots.gridWrapper({
+                className: classNames?.gridWrapper
+              }),
+              children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: slots.calendar({ className: classNames?.calendar }),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(calendarHeader.CalendarHeader, { offsetMonths: index }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactAriaComponents.CalendarGrid,
+                      {
+                        className: slots.grid({ className: classNames?.grid }),
+                        weekdayStyle,
+                        offset: { months: index },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(calendarGridHeader.CalendarGridHeader, {}),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactAriaComponents.CalendarGridBody,
+                            {
+                              className: slots.gridBody({
+                                className: classNames?.gridBody
+                              }),
+                              children: (date) => /* @__PURE__ */ jsxRuntime.jsx(
+                                RangeCalendarCell,
+                                {
+                                  firstDayOfWeek: props.firstDayOfWeek,
+                                  dateToHighlight,
+                                  date,
+                                  isMultipleMonths: numberOfVisibleMonths >= 2
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                index
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            calendarBottomContent.CalendarBottomContent,
+            {
+              bottomContent,
+              showTodayButton
+            }
+          )
+        ] }) }),
+        errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Text,
+          {
+            className: slots.errorMessage({
+              className: classNames?.errorMessage
+            }),
+            slot: "errorMessage",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+});
+const RangeCalendarStateWrapper = ({
+  children
+}) => {
+  const state = react.useContext(reactAriaComponents.RangeCalendarStateContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Provider, { values: [[agnosticCalendarStateContext.AgnosticCalendarStateContext, state]], children });
+};
+const RangeCalendarCell = ({
+  date: date$1,
+  isMultipleMonths,
+  dateToHighlight,
+  firstDayOfWeek
+}) => {
+  const { classNames, slots } = calendarStyleContext.useCalendarStyleContext();
+  const state = react.useContext(agnosticCalendarStateContext.AgnosticCalendarStateContext);
+  const { locale } = reactAriaComponents.useLocale();
+  const dataAttributes = react.useMemo(() => {
+    const isDateHighlighted = dateToHighlight ? date$1.compare(dateToHighlight) === 0 : false;
+    const isSelected = state.isSelected(date$1);
+    const isDisabled = state.isCellDisabled(date$1);
+    const isInvalid = state.isInvalid(date$1);
+    const isFirstSelectedAfterDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date$1.subtract({ days: 1 }));
+    const isLastSelectedBeforeDisabled = !isDisabled && !isInvalid && state.isCellUnavailable(date$1.add({ days: 1 }));
+    const dayOfWeek = date.getDayOfWeek(date$1, locale, firstDayOfWeek);
+    const isRangeStart = isSelected && (isFirstSelectedAfterDisabled || dayOfWeek === 0 || date$1.day === 1);
+    const isRangeEnd = isSelected && (isLastSelectedBeforeDisabled || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
+    return {
+      "data-highlighted": ouiTheme.dataAttr(isDateHighlighted),
+      "data-range-end": ouiTheme.dataAttr(isRangeEnd),
+      "data-range-start": ouiTheme.dataAttr(isRangeStart)
+    };
+  }, [date$1, dateToHighlight, firstDayOfWeek, locale, state]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.CalendarCell,
+    {
+      className: ouiTheme.composeRenderProps(
+        classNames?.cell,
+        (className, renderProps) => slots.cell({
+          className,
+          isMultipleMonths,
+          ...renderProps
+        })
+      ),
+      ...dataAttributes,
+      date: date$1
+    }
+  );
+};
+
+exports.RangeCalendar = RangeCalendar;
+exports.RangeCalendarCell = RangeCalendarCell;
+exports.RangeCalendarStateWrapper = RangeCalendarStateWrapper;

package/dist/cjs/select/select.cjs

@@ -6,9 +6,9 @@ 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 utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var field = require('../field/field.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 button = require('../button/button.cjs');
 

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

@@ -6,14 +6,14 @@ 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 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 field = require('../field/field.cjs');
-var input = require('../input/input.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 textArea = require('../text-area/text-area.cjs');
 var field = require('../field/field.cjs');
+var textArea = require('../text-area/text-area.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 input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TextField({
   label,

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/agnostic-calendar-state-context.js

@@ -0,0 +1,10 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [AgnosticCalendarStateContext, useAgnosticCalendarStateContext] = createContext({
+  name: "AgnosticCalendarStateContext",
+  strict: true
+});
+
+export { AgnosticCalendarStateContext, useAgnosticCalendarStateContext };

package/dist/esm/calendar/calendar-bottom-content.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { today, getLocalTimeZone } from '@internationalized/date';
+import { Button } from '../button/button.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+import { useCalendarI18n } from './hooks/use-calendar-i18n.js';
+
+const CalendarBottomContent = ({
+  bottomContent,
+  showTodayButton
+}) => {
+  const state = useContext(AgnosticCalendarStateContext);
+  const { slots, classNames, size } = useCalendarStyleContext();
+  const formatMessage = useCalendarI18n();
+  if (bottomContent) {
+    return bottomContent;
+  }
+  if (!showTodayButton) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: slots.bottomContentWrapper({
+        className: classNames?.bottomContentWrapper
+      }),
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          isDisabled: state.isDisabled,
+          variant: "clear",
+          color: "sub",
+          size,
+          slot: null,
+          className: slots.todayButton({ className: classNames?.todayButton }),
+          onPress: () => {
+            state.setFocusedDate(today(getLocalTimeZone()));
+          },
+          children: formatMessage("today")
+        }
+      )
+    }
+  );
+};
+
+export { CalendarBottomContent };

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

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeaderCell } from 'react-aria-components';
+import { useCalendarStyleContext } from './calendar-style-context.js';
+
+function CalendarGridHeader() {
+  const { slots, classNames } = useCalendarStyleContext();
+  return /* @__PURE__ */ jsx(
+    CalendarGridHeader$1,
+    {
+      className: slots.gridHeader({ className: classNames?.gridHeader }),
+      children: (day) => /* @__PURE__ */ jsx(
+        CalendarHeaderCell,
+        {
+          className: slots.gridHeaderCell({
+            className: classNames?.gridHeaderCell
+          }),
+          children: day
+        }
+      )
+    }
+  );
+}
+
+export { CalendarGridHeader };

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

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { useLocale, Group, Heading } from 'react-aria-components';
+import { Button } from '../button/button.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+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';
+
+function CalendarHeader({ offsetMonths = 0 }) {
+  const { direction } = useLocale();
+  const { slots, classNames, size } = useCalendarStyleContext();
+  const state = useContext(AgnosticCalendarStateContext);
+  const monthYearTitle = useLocalizedMonthYear(
+    state.visibleRange.start.add({ months: offsetMonths }),
+    state.timeZone
+  );
+  if (offsetMonths === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: slots.header({ className: classNames?.header }), children: [
+      /* @__PURE__ */ jsx(CalendarMonthDaySelector, {}),
+      /* @__PURE__ */ jsxs(
+        Group,
+        {
+          className: slots.buttonGroup({ className: classNames?.buttonGroup }),
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size,
+                isIconOnly: true,
+                variant: "clear",
+                color: "sub",
+                slot: "previous",
+                className: slots.prevButton({ className: classNames?.prevButton }),
+                children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size,
+                variant: "clear",
+                color: "sub",
+                isIconOnly: true,
+                slot: "next",
+                className: slots.nextButton({
+                  className: classNames?.nextButton
+                }),
+                children: direction === "rtl" ? /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      className: slots.header({ className: classNames?.header }),
+      "aria-hidden": true,
+      level: 2,
+      children: monthYearTitle
+    }
+  );
+}
+
+export { CalendarHeader };

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

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+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 { useCalendarI18n } from './hooks/use-calendar-i18n.js';
+
+const CalendarMonthDaySelector = () => {
+  const { slots, size, classNames } = useCalendarStyleContext();
+  const state = useContext(AgnosticCalendarStateContext);
+  const { months, years, datePartOrder } = useCalendarSelectors(state);
+  const formatMessage = useCalendarI18n();
+  return /* @__PURE__ */ jsx(Group, { className: slots.selectors({ className: classNames?.selectors }), children: datePartOrder.map((part) => {
+    if (part === "month") {
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          isDisabled: state.isDisabled,
+          size,
+          items: months,
+          variant: "clear",
+          classNames: {
+            trigger: slots.monthSelector({
+              className: classNames?.monthSelector
+            }),
+            list: slots.monthList({ className: classNames?.monthList }),
+            selectedText: slots.selectorText({
+              className: classNames?.selectorText
+            }),
+            popover: "min-w-[12ch]"
+          },
+          selectedKey: state.visibleRange.start.month,
+          "aria-label": formatMessage("selectMonth"),
+          onSelectionChange: (month) => {
+            state.setFocusedDate(
+              new CalendarDate(state.focusedDate.year, Number(month), 1)
+            );
+          },
+          children: (month) => /* @__PURE__ */ jsx(SelectItem, { children: month.textValue })
+        },
+        part
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        isDisabled: state.isDisabled,
+        size,
+        variant: "clear",
+        items: years,
+        classNames: {
+          trigger: slots.yearSelector({
+            className: classNames?.yearSelector
+          }),
+          list: slots.yearList({ className: classNames?.yearList }),
+          selectedText: slots.selectorText({
+            className: classNames?.selectorText
+          })
+        },
+        selectedKey: state.visibleRange.start.year,
+        "aria-label": formatMessage("selectYear"),
+        onSelectionChange: (year) => {
+          state.setFocusedDate(
+            new CalendarDate(
+              Number(year),
+              state.focusedDate.month,
+              state.focusedDate.day
+            )
+          );
+        },
+        children: (year) => /* @__PURE__ */ jsx(SelectItem, { children: year.textValue })
+      },
+      part
+    );
+  }) });
+};
+
+export { CalendarMonthDaySelector };

package/dist/esm/calendar/calendar-style-context.js

@@ -1,34 +1,10 @@
 "use strict";
 "use client";
-import { useDeepCompareMemo } from 'use-deep-compare';
-import { calendarStyles } from '@opengovsg/oui-theme';
-import { mapPropsVariants } from '../system/utils.js';
 import { createContext } from '../system/react-utils/context.js';
 
-function useProvideCalendarStyles(originalProps) {
-  const [props, variantProps] = mapPropsVariants(
-    originalProps,
-    calendarStyles.variantKeys
-  );
-  const { errorMessage, className, classNames, ...restProps } = props;
-  const slots = useDeepCompareMemo(
-    () => calendarStyles(variantProps),
-    [variantProps]
-  );
-  return {
-    context: {
-      slots,
-      classNames,
-      className,
-      size: variantProps.size ?? calendarStyles.defaultVariants.size,
-      errorMessage
-    },
-    calendarProps: { ...restProps, onChange: restProps.onChange }
-  };
-}
 const [CalendarStyleContext, useCalendarStyleContext] = createContext({
   name: "CalendarStyleContext",
   strict: true
 });
 
-export { CalendarStyleContext, useCalendarStyleContext, useProvideCalendarStyles };
+export { CalendarStyleContext, useCalendarStyleContext };