@opengovsg/oui 0.0.8 → 0.0.10

package/dist/esm/calendar/calendar.js

@@ -0,0 +1,152 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useContext } from 'react';
+import { CalendarDate, today, getLocalTimeZone } from '@internationalized/date';
+import { Calendar as Calendar$1, composeRenderProps, Provider, CalendarGrid, CalendarGridBody, CalendarCell, Text, CalendarStateContext } from 'react-aria-components';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { calendarStyles, dataAttr, cn } from '@opengovsg/oui-theme';
+import { forwardRef, mapPropsVariants } from '../system/utils.js';
+import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.js';
+import { CalendarBottomContent } from './calendar-bottom-content.js';
+import { CalendarGridHeader } from './calendar-grid-header.js';
+import { CalendarHeader } from './calendar-header.js';
+import { CalendarStyleContext } from './calendar-style-context.js';
+
+const Calendar = forwardRef(function Calendar2(originalProps, ref) {
+  const [props, variantProps] = mapPropsVariants(
+    originalProps,
+    calendarStyles.variantKeys
+  );
+  const {
+    className,
+    classNames,
+    weekdayStyle = "narrow",
+    minValue = new CalendarDate(1900, 0, 1),
+    maxValue = new CalendarDate(2100, 12, 31),
+    bottomContent,
+    showTodayButton = true,
+    errorMessage,
+    ...restProps
+  } = props;
+  const slots = useDeepCompareMemo(
+    () => calendarStyles(variantProps),
+    [variantProps]
+  );
+  const context = useMemo(
+    () => ({
+      slots,
+      classNames,
+      className,
+      size: variantProps.size ?? calendarStyles.defaultVariants.size
+    }),
+    [className, classNames, slots, variantProps.size]
+  );
+  const numberOfVisibleMonths = props.visibleDuration?.months ?? 1;
+  const dateToHighlight = useMemo(() => {
+    if (props.defaultFocusedValue !== void 0) {
+      return props.defaultFocusedValue;
+    }
+    return today(getLocalTimeZone());
+  }, [props.defaultFocusedValue]);
+  return /* @__PURE__ */ jsxs(
+    Calendar$1,
+    {
+      pageBehavior: "single",
+      ...restProps,
+      ref,
+      minValue,
+      maxValue,
+      className: composeRenderProps(
+        className,
+        (className2, renderProps) => slots.base({
+          className: cn(classNames?.base, className2),
+          ...renderProps
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(CalendarStateWrapper, { children: /* @__PURE__ */ jsxs(Provider, { values: [[CalendarStyleContext, context]], children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: slots.gridWrapper({
+                className: classNames?.gridWrapper
+              }),
+              children: Array.from({ length: numberOfVisibleMonths }).map((_, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: slots.calendar({ className: classNames?.calendar }),
+                  children: [
+                    /* @__PURE__ */ jsx(CalendarHeader, { offsetMonths: index }),
+                    /* @__PURE__ */ jsxs(
+                      CalendarGrid,
+                      {
+                        className: slots.grid({ className: classNames?.grid }),
+                        weekdayStyle,
+                        offset: { months: index },
+                        children: [
+                          /* @__PURE__ */ jsx(CalendarGridHeader, {}),
+                          /* @__PURE__ */ jsx(
+                            CalendarGridBody,
+                            {
+                              className: slots.gridBody({
+                                className: classNames?.gridBody
+                              }),
+                              children: (date) => /* @__PURE__ */ jsx(
+                                CalendarCell,
+                                {
+                                  className: composeRenderProps(
+                                    classNames?.cell,
+                                    (className2, renderProps) => slots.cell({
+                                      className: className2,
+                                      isMultipleMonths: numberOfVisibleMonths >= 2,
+                                      ...renderProps
+                                    })
+                                  ),
+                                  "data-highlighted": dataAttr(
+                                    dateToHighlight ? date.compare(dateToHighlight) === 0 : false
+                                  ),
+                                  date
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                },
+                index
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CalendarBottomContent,
+            {
+              bottomContent,
+              showTodayButton
+            }
+          )
+        ] }) }),
+        errorMessage && /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: slots.errorMessage({
+              className: classNames?.errorMessage
+            }),
+            slot: "errorMessage",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+});
+const CalendarStateWrapper = ({
+  children
+}) => {
+  const state = useContext(CalendarStateContext);
+  return /* @__PURE__ */ jsx(Provider, { values: [[AgnosticCalendarStateContext, state]], children });
+};
+
+export { Calendar, CalendarStateWrapper };

package/dist/esm/calendar/hooks/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { i18nStrings, useCalendarI18n } from './use-calendar-i18n.js';
+export { useCalendarSelectors } from './use-calendar-selectors.js';

package/dist/esm/calendar/hooks/use-calendar-i18n.js

@@ -0,0 +1,30 @@
+"use strict";
+import { useMessageFormatter } from 'react-aria';
+
+const i18nStrings = {
+  "en-SG": {
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    today: "Today"
+  },
+  "zh-SG": {
+    selectMonth: "\u9009\u62E9\u6708\u4EFD",
+    selectYear: "\u9009\u62E9\u5E74\u4EFD",
+    today: "\u4ECA\u5929"
+  },
+  "ms-SG": {
+    selectMonth: "Pilih bulan",
+    selectYear: "Pilih tahun",
+    today: "Hari ini"
+  },
+  "ta-SG": {
+    selectMonth: "\u0BAE\u0BBE\u0BA4\u0BA4\u0BCD\u0BA4\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    selectYear: "\u0B86\u0BA3\u0BCD\u0B9F\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD",
+    today: "\u0B87\u0BA9\u0BCD\u0BB1\u0BC1"
+  }
+};
+const useCalendarI18n = () => {
+  return useMessageFormatter(i18nStrings);
+};
+
+export { i18nStrings, useCalendarI18n };

package/dist/esm/calendar/hooks/use-calendar-selectors.js

@@ -0,0 +1,39 @@
+"use strict";
+"use client";
+import { useMemo } from 'react';
+import { useDateFormatter } from 'react-aria';
+import { useGenerateLocalizedMonths, useGenerateLocalizedYears } from '../utils.js';
+
+const useCalendarSelectors = (state) => {
+  const yearRange = useMemo(() => {
+    const start = state.minValue.year ?? 1900;
+    const end = state.maxValue.year ?? 2100;
+    return { start, end };
+  }, [state.maxValue, state.minValue]);
+  const dateFormatter = useDateFormatter(state);
+  const datePartOrder = useMemo(() => {
+    const parts = dateFormatter.formatToParts(
+      state.visibleRange.start.toDate(state.timeZone)
+    );
+    const filteredParts = parts.filter(
+      (part) => ["year", "month"].includes(part.type)
+    );
+    const filteredPartNames = filteredParts.map((part) => part.type);
+    return filteredPartNames;
+  }, [dateFormatter, state.timeZone, state.visibleRange.start]);
+  const months = useGenerateLocalizedMonths(state.timeZone);
+  const years = useGenerateLocalizedYears(
+    yearRange.start,
+    yearRange.end,
+    state.timeZone
+  );
+  return useMemo(() => {
+    return {
+      months,
+      years,
+      datePartOrder
+    };
+  }, [datePartOrder, months, years]);
+};
+
+export { useCalendarSelectors };

package/dist/esm/calendar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+export { Calendar, CalendarStateWrapper } from './calendar.js';
+export { CalendarStyleContext, useCalendarStyleContext } from './calendar-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './utils.js';
+export { CalendarDate } from '@internationalized/date';

package/dist/esm/calendar/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/calendar/utils.js

@@ -0,0 +1,57 @@
+"use strict";
+import { useMemo } from 'react';
+import { CalendarDate } from '@internationalized/date';
+import { useDateFormatter } from '@react-aria/i18n';
+
+function getEraFormat(date) {
+  return date?.calendar.identifier === "gregory" && date.era === "BC" ? "short" : void 0;
+}
+function useLocalizedMonthYear(date, timeZone) {
+  const era = getEraFormat(date);
+  const monthFormatter = useDateFormatter({
+    month: "long",
+    year: "numeric",
+    era,
+    calendar: date.calendar.identifier,
+    timeZone
+  });
+  return monthFormatter.format(date.toDate(timeZone));
+}
+function useGenerateLocalizedMonths(timeZone, formatterOptions) {
+  const formatter = useDateFormatter({
+    month: "long",
+    timeZone,
+    ...formatterOptions
+  });
+  return useMemo(() => {
+    return Array.from({ length: 12 }, (_, i) => {
+      const id = i + 1;
+      return {
+        id,
+        textValue: formatter.format(
+          new CalendarDate(2020, id, 1).toDate(timeZone)
+        )
+      };
+    });
+  }, [formatter, timeZone]);
+}
+function useGenerateLocalizedYears(yearStart, yearEnd, timeZone, formatterOptions) {
+  const formatter = useDateFormatter({
+    year: "numeric",
+    timeZone,
+    ...formatterOptions
+  });
+  return useMemo(() => {
+    return Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => {
+      const year = yearStart + i;
+      return {
+        id: year,
+        textValue: formatter.format(
+          new CalendarDate(year, 1, 1).toDate(timeZone)
+        )
+      };
+    });
+  }, [formatter, yearStart, yearEnd, timeZone]);
+}
+
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear };

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

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDeferredValue, useMemo, useState, useCallback } from 'react';
 import fuzzysort from 'fuzzysort';
 import { Text } from 'react-aria-components';
-import { comboBoxStyles, comboBoxItemStyles, comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
+import { comboBoxStyles, listBoxItemStyles, comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBox } from './combo-box.js';
 import { ComboBoxItem } from './combo-box-item.js';
@@ -79,7 +79,7 @@ function ComboBoxFuzzy(originalProps) {
     },
     [onInputChangeProp, preparedItems]
   );
-  const comboboxItemStyles = comboBoxItemStyles(variantProps);
+  const itemStyles = listBoxItemStyles(variantProps);
   return /* @__PURE__ */ jsx(
     ComboBox,
     {
@@ -93,7 +93,7 @@ function ComboBoxFuzzy(originalProps) {
         /* @__PURE__ */ jsx(
           Text,
           {
-            className: comboboxItemStyles.label({
+            className: itemStyles.label({
               className: itemClassNames?.label
             }),
             slot: "label",
@@ -112,7 +112,7 @@ function ComboBoxFuzzy(originalProps) {
         item.description && /* @__PURE__ */ jsx(
           Text,
           {
-            className: comboboxItemStyles.description({
+            className: itemStyles.description({
               className: itemClassNames?.description
             }),
             slot: "description",

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

@@ -3,7 +3,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useContextProps, ListBoxItem, composeRenderProps, Text } from 'react-aria-components';
-import { comboBoxItemStyles } from '@opengovsg/oui-theme';
+import { listBoxItemStyles } from '@opengovsg/oui-theme';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
 
@@ -16,8 +16,8 @@ const ComboBoxItem = forwardRef(function ComboBoxItem2(originalProps, ref) {
   const [
     { className, description, children, classNames, ...props },
     variantProps
-  ] = mapPropsVariants(originalProps, comboBoxItemStyles.variantKeys);
-  const styles = comboBoxItemStyles(variantProps);
+  ] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
+  const styles = listBoxItemStyles(variantProps);
   const defaultTextValue = useMemo(() => {
     if (props.textValue) {
       return props.textValue;

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

@@ -3,14 +3,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
-import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Popover, Virtualizer, ListBox } from 'react-aria-components';
-import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+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 { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
 import { Label, FieldGroup, Description, FieldError } from '../field/field.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 { Popover } from '../popover/popover.js';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {
@@ -44,7 +45,7 @@ function ComboBoxEmptyState({
   size,
   className
 }) {
-  const styles = comboBoxItemStyles({ size });
+  const styles = listBoxItemStyles({ size });
   const formatMessage = useMessageFormatter(i18nStrings);
   return /* @__PURE__ */ jsx(
     "span",

package/dist/esm/index.js

@@ -1,8 +1,4 @@
 "use strict";
-export { Input } from './input/input.js';
-export { useControllableState } from './hooks/use-controllable-state.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 { Spinner } from './spinner/spinner.js';
@@ -10,16 +6,28 @@ export { useSpinner } from './spinner/use-spinner.js';
 export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
 export { TextField } from './text-field/text-field.js';
-export { Description, FieldError, 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';
+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 { useControllableState } from './hooks/use-controllable-state.js';
+export { Button } from './button/button.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
+export { Input } from './input/input.js';
+export { Description, FieldError, 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';
 export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
 export { Banner } from './banner/banner.js';
-export { TagField } from './tag-field/tag-field.js';
-export { Select } from './select/select.js';
-export { SelectItem } from './select/select-item.js';
-export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
 export { Badge } from './badge/badge.js';
+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';

package/dist/esm/menu/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu.js';

package/dist/esm/menu/menu.js

@@ -0,0 +1,220 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useMemo, useCallback } from 'react';
+import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
+import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
+import { forwardRefGeneric, mapPropsVariants } from '../system/utils.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 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 { createContext } from '../system/react-utils/context.js';
+import { Popover } from '../popover/popover.js';
+
+const [MenuVariantContext, useMenuVariantContext] = createContext({
+  name: "MenuVariantContext",
+  strict: false
+});
+function MenuInner(originalProps, ref) {
+  [originalProps, ref] = useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [props, variantProps] = mapPropsVariants(
+    originalProps,
+    menuStyles.variantKeys
+  );
+  const { className, classNames, placement, ...rest } = props;
+  const styles = menuStyles(variantProps);
+  return /* @__PURE__ */ jsx(Provider, { values: [[MenuVariantContext, variantProps]], children: /* @__PURE__ */ jsx(
+    Popover,
+    {
+      placement,
+      className: styles.popover({ className: classNames?.popover }),
+      children: /* @__PURE__ */ jsx(
+        Menu$1,
+        {
+          ...rest,
+          ref,
+          className: composeRenderProps(
+            className ?? classNames?.base,
+            (className2, renderProps) => styles.base({
+              className: className2,
+              ...renderProps
+            })
+          )
+        }
+      )
+    }
+  ) });
+}
+const Menu = forwardRefGeneric(MenuInner);
+const MenuItem = forwardRef(function MenuItem2(originalProps, ref) {
+  [originalProps, ref] = useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [
+    {
+      classNames,
+      className,
+      multipleSelectionIcon: multipleSelectionIconProp,
+      singleSelectionIcon: singleSelectionIconProp,
+      startContent,
+      endContent,
+      ...props
+    },
+    variantProps
+  ] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
+  const styles = menuItemStyles(variantProps);
+  const multipleSelectionIcon = useMemo(() => {
+    if (multipleSelectionIconProp !== void 0) {
+      return multipleSelectionIconProp;
+    }
+    return /* @__PURE__ */ jsx(
+      Check,
+      {
+        "aria-hidden": true,
+        className: styles.icon({ className: classNames?.icon })
+      }
+    );
+  }, [classNames?.icon, multipleSelectionIconProp, styles]);
+  const singleSelectionIcon = useMemo(() => {
+    if (singleSelectionIconProp !== void 0) {
+      return singleSelectionIconProp;
+    }
+    return /* @__PURE__ */ jsx(
+      Check,
+      {
+        "aria-hidden": true,
+        className: styles.icon({ className: classNames?.icon })
+      }
+    );
+  }, [classNames?.icon, singleSelectionIconProp, styles]);
+  const showIconContainer = useCallback(
+    (selectionMode) => {
+      switch (selectionMode) {
+        case "none":
+          return false;
+        case "multiple":
+          return !!multipleSelectionIcon;
+        case "single":
+          return !!singleSelectionIcon;
+      }
+    },
+    [multipleSelectionIcon, singleSelectionIcon]
+  );
+  const defaultTextValue = useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof props.children === "string") {
+      return props.children;
+    }
+    return void 0;
+  }, [props.children, props.textValue]);
+  return /* @__PURE__ */ jsx(
+    MenuItem$1,
+    {
+      ref,
+      textValue: defaultTextValue,
+      ...props,
+      isDisabled: variantProps.isDisabled,
+      className: composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({
+          className: className2,
+          ...renderProps
+        })
+      ),
+      children: composeRenderProps(
+        props.children,
+        (children, { selectionMode, isSelected, hasSubmenu }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          startContent,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: styles.label({
+                className: classNames?.label
+              }),
+              children
+            }
+          ),
+          showIconContainer(selectionMode) && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: styles.iconContainer({
+                className: classNames?.iconContainer
+              }),
+              children: [
+                isSelected && selectionMode === "multiple" && multipleSelectionIcon,
+                isSelected && selectionMode === "single" && singleSelectionIcon
+              ]
+            }
+          ),
+          endContent,
+          hasSubmenu && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": true,
+              className: styles.icon({
+                className: classNames?.icon
+              })
+            }
+          )
+        ] })
+      )
+    }
+  );
+});
+function MenuSeparator(props) {
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      ...props,
+      className: menuDividerStyles({
+        className: props.className
+      })
+    }
+  );
+}
+function MenuSectionInner(originalProps, ref) {
+  [originalProps, ref] = useContextProps(
+    originalProps,
+    ref,
+    MenuVariantContext
+  );
+  const [{ title, classNames, ...props }, variantProps] = mapPropsVariants(
+    originalProps,
+    menuSectionStyles.variantKeys
+  );
+  const styles = menuSectionStyles(variantProps);
+  return /* @__PURE__ */ jsxs(
+    MenuSection$1,
+    {
+      ref,
+      className: styles.base({
+        className: props.className ?? classNames?.base
+      }),
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx(
+          Header,
+          {
+            className: styles.header({
+              className: classNames?.header
+            }),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Collection, { items: props.items, children: props.children })
+      ]
+    }
+  );
+}
+const MenuSection = forwardRefGeneric(MenuSectionInner);
+const MenuTrigger = MenuTrigger$1;
+const SubmenuTrigger = SubmenuTrigger$1;
+
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.js

@@ -0,0 +1,14 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @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: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("ChevronLeft", __iconNode);
+
+export { __iconNode, ChevronLeft as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js

@@ -0,0 +1,14 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @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: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("ChevronRight", __iconNode);
+
+export { __iconNode, ChevronRight as default };