@moneyforward/mfui-components 3.37.2 → 4.1.0

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.types.d.ts

@@ -15,4 +15,5 @@ export type InternalDateRangePickerContentProps = {
     isCalendarOpen: boolean;
     toggleCalendar: () => void;
     calendarLocale: NonNullable<BasePickerProps['calendarLocale']>;
+    firstDayOfWeek: NonNullable<FilterDateRangePickerProps['firstDayOfWeek']>;
 };

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.d.ts

@@ -11,4 +11,4 @@ import { type FilterDateRangePickerProps } from './FilterDateRangePicker.types';
  * neither of which are appropriate here. FilterDateRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export declare function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, minDate, maxDate, calendarLocale, }: FilterDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, enableClearButton, clearButtonProps, disabled, className, targetDOMNode, minDate, maxDate, calendarLocale, firstDayOfWeek, }: FilterDateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.js

@@ -5,6 +5,7 @@ import { filterDateRangePickerSlotRecipe } from '../../../styled-system/recipes'
 import { useDisclosure } from '../../utilities/state/useDisclosure';
 import { BaseRangePickerProvider } from '../shared/BaseRangePicker/BaseRangePickerProvider';
 import { InternalDateRangePickerContent } from './DateRangePickerContent/DateRangePickerContent';
+import { DEFAULT_FIRST_DAY_OF_WEEK } from '../shared/BasePicker/constants';
 const DEFAULT_FORMAT = 'YYYY/MM/DD';
 /**
  * FilterDateRangePicker component.
@@ -18,7 +19,7 @@ const DEFAULT_FORMAT = 'YYYY/MM/DD';
  * neither of which are appropriate here. FilterDateRangePicker uses CalendarIcon and
  * has no form-field semantics.
  */
-export function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, minDate, maxDate, calendarLocale = 'ja', }) {
+export function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, enableClearButton = false, clearButtonProps, disabled = false, className, targetDOMNode, minDate, maxDate, calendarLocale = 'ja', firstDayOfWeek = DEFAULT_FIRST_DAY_OF_WEEK, }) {
     const classes = filterDateRangePickerSlotRecipe();
     const triggerRef = useRef(null);
     const dialogId = useId();
@@ -38,5 +39,5 @@ export function FilterDateRangePicker({ label, value, defaultValue, onChange, op
             onOpenStateChanged?.(false);
         },
     });
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, format: format, isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, minDate: minDate, maxDate: maxDate, disabled: disabled, onChange: onChange, children: _jsx(InternalDateRangePickerContent, { classes: classes, triggerRef: triggerRef, dialogId: dialogId, label: label, format: format, disabled: disabled, className: className, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, calendarLocale: calendarLocale }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, format: format, isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, minDate: minDate, maxDate: maxDate, disabled: disabled, onChange: onChange, children: _jsx(InternalDateRangePickerContent, { classes: classes, triggerRef: triggerRef, dialogId: dialogId, label: label, format: format, disabled: disabled, className: className, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, calendarLocale: calendarLocale, firstDayOfWeek: firstDayOfWeek }) }));
 }

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.types.d.ts

@@ -1,5 +1,6 @@
 import { type PopoverProps } from '../../Popover';
 import { type BasePickerProps } from '../shared/BasePicker';
+import { type FirstDayOfWeek } from '../shared/BasePicker/constants';
 import { type DateRangeInput } from '../shared/BaseRangePicker/BaseRangePicker.types';
 export type FilterDateRangePickerProps = {
     /**
@@ -82,4 +83,10 @@ export type FilterDateRangePickerProps = {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * The day of the week that the calendar week starts on.
+     *
+     * @default 'monday'
+     */
+    firstDayOfWeek?: FirstDayOfWeek;
 };

package/dist/src/DateTimeSelection/shared/BasePicker/constants.d.ts

@@ -10,8 +10,34 @@ export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u309
 export declare const LABEL_TODAY = "\u4ECA\u65E5";
 type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'GO_TO_PREV_YEAR' | 'GO_TO_NEXT_YEAR' | 'SELECT_MONTH' | 'SELECT_YEAR' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY' | 'CLEAR_VALUE';
 export declare const BASE_PICKER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LabelKey, string>>;
-export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
-export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
+/**
+ * The day of the week the calendar week starts on.
+ */
+export type FirstDayOfWeek = 'sunday' | 'monday';
+/**
+ * The index of a day of the week, matching the value returned by `Date.prototype.getDay()`.
+ *
+ * 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday
+ */
+export type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Maps the public `firstDayOfWeek` value to the matching `Date.prototype.getDay()` index.
+ */
+export declare const FIRST_DAY_OF_WEEK_TO_DAY_INDEX: {
+    readonly sunday: 0;
+    readonly monday: 1;
+};
+/**
+ * The default day of the week the calendar week starts on.
+ */
+export declare const DEFAULT_FIRST_DAY_OF_WEEK: FirstDayOfWeek;
+/**
+ * Day-of-the-week labels indexed by `Date.prototype.getDay()` (0 = Sunday).
+ * The tuple type keeps the arrays exactly seven entries long.
+ */
+type DayLabels = readonly [string, string, string, string, string, string, string];
+export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, DayLabels>;
+export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, DayLabels>;
 export declare function getBasePickerLabel(key: LabelKey, locale?: NonNullable<BasePickerProps['calendarLocale']>): string;
 /**
  * The minimum year that can be selected in the DatePicker

package/dist/src/DateTimeSelection/shared/BasePicker/constants.js

@@ -33,13 +33,24 @@ export const BASE_PICKER_LABELS = {
         CLEAR_VALUE: 'Clear value',
     },
 };
+/**
+ * Maps the public `firstDayOfWeek` value to the matching `Date.prototype.getDay()` index.
+ */
+export const FIRST_DAY_OF_WEEK_TO_DAY_INDEX = {
+    sunday: 0,
+    monday: 1,
+};
+/**
+ * The default day of the week the calendar week starts on.
+ */
+export const DEFAULT_FIRST_DAY_OF_WEEK = 'monday';
 export const DAY_ABBREVIATIONS = {
-    ja: ['月', '火', '水', '木', '金', '土', '日'],
-    en: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
+    ja: ['日', '月', '火', '水', '木', '金', '土'],
+    en: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
 };
 export const DAY_FULL_NAMES = {
-    ja: ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
-    en: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+    ja: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
+    en: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
 };
 export function getBasePickerLabel(key, locale = 'ja') {
     const safeLocale = locale in BASE_PICKER_LABELS ? locale : 'ja';

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerPopover.d.ts

@@ -13,6 +13,10 @@ import { type BaseRangePickerProps } from '../BaseRangePicker.types';
  * @remarks
  * - Accessibility is handled by subcomponents (calendars and footer).
  * - This component should not be used outside a BaseRangePickerProvider.
+ * - `firstDayOfWeek` is intentionally not supported here. This popover is only reachable through
+ *   BaseRangePicker's backward-compatible default `renderPopoverContent`, and every real consumer
+ *   (DateRangePicker / MonthRangePicker) supplies its own. The calendars therefore fall back to the
+ *   FirstDayOfWeekContext default ('monday'), which matches the previous hardcoded behaviour.
  *
  * @example
  * <BaseRangePickerProvider>

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerPopover.js

@@ -28,6 +28,10 @@ const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth()
  * @remarks
  * - Accessibility is handled by subcomponents (calendars and footer).
  * - This component should not be used outside a BaseRangePickerProvider.
+ * - `firstDayOfWeek` is intentionally not supported here. This popover is only reachable through
+ *   BaseRangePicker's backward-compatible default `renderPopoverContent`, and every real consumer
+ *   (DateRangePicker / MonthRangePicker) supplies its own. The calendars therefore fall back to the
+ *   FirstDayOfWeekContext default ('monday'), which matches the previous hardcoded behaviour.
  *
  * @example
  * <BaseRangePickerProvider>

package/dist/src/DateTimeSelection/shared/CalendarGrid/CalendarGrid.js

@@ -8,9 +8,13 @@ import { computeDataForStyling } from './utilities/computeDataForStyling';
 import { checkIsSameDate } from './utilities/dateUtilities';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { calendarGridSlotRecipe } from '../../../../styled-system/recipes';
+import { useFirstDayOfWeek } from '../CalendarLocale/FirstDayOfWeekContext';
+import { FIRST_DAY_OF_WEEK_TO_DAY_INDEX } from '../BasePicker/constants';
 export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate, onKeyboardNavigation, pendingFocusDate, onPendingFocusDateChange, value, renderDateCell, className, onDateClick, }) {
-    const dates = useDates(viewingValue);
-    const computedDataForStyles = useMemo(() => computeDataForStyling(viewingValue), [viewingValue]);
+    const firstDayOfWeek = useFirstDayOfWeek();
+    const weekStart = FIRST_DAY_OF_WEEK_TO_DAY_INDEX[firstDayOfWeek];
+    const dates = useDates(viewingValue, weekStart);
+    const computedDataForStyles = useMemo(() => computeDataForStyling(viewingValue, weekStart), [viewingValue, weekStart]);
     const computedPropsForDates = useMemo(() => {
         // Normalize to Date objects — Storybook Controls can pass ISO strings instead of Date instances.
         // Cast to unknown first to suppress the unnecessary-condition lint rule while preserving runtime safety.
@@ -93,9 +97,9 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
         onPendingFocusDateChange?.(null);
     }, [viewingValue, pendingFocusDate, onPendingFocusDateChange]);
     const classes = calendarGridSlotRecipe();
-    return (_jsxs("div", { className: cx(classes.calendarGrid, 'mfui-CalendarGrid__calendarGrid', className), children: [Array(7)
-                .fill(null)
-                .map((_, index) => (_jsx(DayCell, { day: index }, index))), computedPropsForDates.map((dateItem, index) => {
+    return (_jsxs("div", { className: cx(classes.calendarGrid, 'mfui-CalendarGrid__calendarGrid', className), children: [Array.from({ length: 7 })
+                .map((_, index) => ((weekStart + index) % 7))
+                .map((weekday) => (_jsx(DayCell, { day: weekday }, weekday))), computedPropsForDates.map((dateItem, index) => {
                 // All props are generated internally and guaranteed to have required fields
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/computeDataForStyling.d.ts

@@ -1,11 +1,13 @@
+import { type DayIndex } from '../../BasePicker/constants';
 /**
  * Compute data for styling the calendar view
  *
  * @param viewingValue - The value that is currently viewing
+ * @param weekStart - The `Date.prototype.getDay()` index the week starts on (0 = Sunday, 1 = Monday)
  *
  * @returns The data for styling the calendar view
  */
-export declare function computeDataForStyling(viewingValue: Date): {
+export declare function computeDataForStyling(viewingValue: Date, weekStart: DayIndex): {
     datesHasBorderTopLeftRadius: Set<number>;
     datesHasBorderTopRightRadius: Set<number>;
     datesHasBorderBottomLeftRadius: Set<number>;

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/computeDataForStyling.js

@@ -3,43 +3,45 @@ import { getTotalDaysInMonth } from './dateUtilities';
  * Compute data for styling the calendar view
  *
  * @param viewingValue - The value that is currently viewing
+ * @param weekStart - The `Date.prototype.getDay()` index the week starts on (0 = Sunday, 1 = Monday)
  *
  * @returns The data for styling the calendar view
  */
-export function computeDataForStyling(viewingValue) {
+export function computeDataForStyling(viewingValue, weekStart) {
     const year = viewingValue.getFullYear();
     const month = viewingValue.getMonth();
     const firstDate = viewingValue.getDate(); // of course, it's 1, but for readability
     const firstDateDay = viewingValue.getDay();
+    // The last column of the grid, i.e. the day right before the week starts over
+    const weekEnd = (weekStart + 6) % 7;
     const datesHasBorderTopLeftRadius = new Set();
     // First date of the month has borderTopLeftRadius
     datesHasBorderTopLeftRadius.add(1);
-    // First Monday of the month has borderTopLeftRadius
-    // Because Monday is 1, so we will use 8 to represent Monday and % 7 to get the correct date
-    const firstMonday = firstDate + ((8 - firstDateDay) % 7);
-    datesHasBorderTopLeftRadius.add(firstMonday);
+    // First date sitting at the start of a row has borderTopLeftRadius
+    const firstRowStartDate = firstDate + ((weekStart - firstDateDay + 7) % 7);
+    datesHasBorderTopLeftRadius.add(firstRowStartDate);
     const datesHasBorderTopRightRadius = new Set();
-    // First Sunday of the month has borderTopRightRadius
-    const firstSunday = viewingValue.getDate() + ((7 - firstDateDay) % 7);
-    datesHasBorderTopRightRadius.add(firstSunday);
+    // First date sitting at the end of a row has borderTopRightRadius
+    const firstRowEndDate = firstDate + ((weekEnd - firstDateDay + 7) % 7);
+    datesHasBorderTopRightRadius.add(firstRowEndDate);
     const lastDate = new Date(year, month + 1, 0);
     const datesHasBorderBottomLeftRadius = new Set();
-    // Last Monday of the month has borderBottomLeftRadius
-    const lastMonday = lastDate.getDate() - ((lastDate.getDay() + 6) % 7);
-    datesHasBorderBottomLeftRadius.add(lastMonday);
+    // Last date sitting at the start of a row has borderBottomLeftRadius
+    const lastRowStartDate = lastDate.getDate() - ((lastDate.getDay() - weekStart + 7) % 7);
+    datesHasBorderBottomLeftRadius.add(lastRowStartDate);
     const datesHasBorderBottomRightRadius = new Set();
     // Last date of the month has borderBottomRightRadius
     datesHasBorderBottomRightRadius.add(lastDate.getDate());
-    // Last Sunday of the month has borderBottomRightRadius
-    const lastSunday = lastDate.getDate() - lastDate.getDay();
-    datesHasBorderBottomRightRadius.add(lastSunday);
+    // Last date sitting at the end of a row has borderBottomRightRadius
+    const lastRowEndDate = lastDate.getDate() - ((lastDate.getDay() - weekEnd + 7) % 7);
+    datesHasBorderBottomRightRadius.add(lastRowEndDate);
     const datesHasBorderRight = new Set();
-    // All Sundays have borderRight
+    // All dates in the last column have borderRight
     Array(getTotalDaysInMonth(month, year))
         .fill(0)
         .forEach((_date, dateIndex) => {
         const day = new Date(year, month, dateIndex + 1).getDay();
-        if (day === 0) {
+        if (day === weekEnd) {
             datesHasBorderRight.add(dateIndex + 1);
         }
     });
@@ -54,10 +56,10 @@ export function computeDataForStyling(viewingValue) {
     });
     const lastWeekDates = new Set();
     // Last dates of the last week of the viewing month
-    // Simply by adding the last date, then subtracting the index, util it's Monday
+    // Simply by adding the last date, then subtracting the index, until the row starts over
     for (let i = 0; i < 7; i++) {
         const date = lastDate.getDate() - i;
-        if (new Date(year, month, date).getDay() === 1) {
+        if (new Date(year, month, date).getDay() === weekStart) {
             lastWeekDates.add(date);
             break;
         }

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.d.ts

@@ -1,12 +1,15 @@
+import { type DayIndex } from '../../BasePicker/constants';
 /**
  * Separate the viewing value into dates
- * To make sure it always start with Monday, it will fill the blank by null value
+ * To make sure it always starts on the configured first day of the week, it will fill the blank by null value
  *
- * @param viewingValue - The date that user is viewing
+ * @param viewingValue - The date that user is viewing. Always normalized to the first day of the month.
+ * @param weekStart - The `Date.prototype.getDay()` index the week starts on (0 = Sunday, 1 = Monday)
  *
  * @returns The chunked dates as the example
  *
  * @example
+ * // 2025-09 with weekStart = 1 (Monday)
  * [
  *  null, 1, 2, 3, 4, 5, 6,
  *  7, 8, 9, 10, 11, 12, 13,
@@ -16,4 +19,4 @@
  *  null, null, null, null, null, null, null
  * ]
  */
-export declare function useDates(viewingValue: Date): (number | null)[];
+export declare function useDates(viewingValue: Date, weekStart: DayIndex): (number | null)[];

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.js

@@ -2,13 +2,15 @@ import { useMemo } from 'react';
 import { getTotalDaysInMonth } from './dateUtilities';
 /**
  * Separate the viewing value into dates
- * To make sure it always start with Monday, it will fill the blank by null value
+ * To make sure it always starts on the configured first day of the week, it will fill the blank by null value
  *
- * @param viewingValue - The date that user is viewing
+ * @param viewingValue - The date that user is viewing. Always normalized to the first day of the month.
+ * @param weekStart - The `Date.prototype.getDay()` index the week starts on (0 = Sunday, 1 = Monday)
  *
  * @returns The chunked dates as the example
  *
  * @example
+ * // 2025-09 with weekStart = 1 (Monday)
  * [
  *  null, 1, 2, 3, 4, 5, 6,
  *  7, 8, 9, 10, 11, 12, 13,
@@ -18,16 +20,18 @@ import { getTotalDaysInMonth } from './dateUtilities';
  *  null, null, null, null, null, null, null
  * ]
  */
-export function useDates(viewingValue) {
+export function useDates(viewingValue, weekStart) {
     return useMemo(() => {
         // Count empty dates at start
-        const emptyDatesStart = Array(viewingValue.getDay() === 0 ? 6 : viewingValue.getDay() - 1).fill(null);
+        const leadingEmptyCount = (viewingValue.getDay() - weekStart + 7) % 7;
+        const emptyDatesStart = Array(leadingEmptyCount).fill(null);
         // List up dates of viewing value
         const dates = Array(getTotalDaysInMonth(viewingValue.getMonth(), viewingValue.getFullYear()))
             .fill(0)
             .map((_, dateIndex) => dateIndex + 1);
         // Keep the calendar at six weeks so its height does not change between months.
+        // The maximum leading offset (6) plus the longest month (31) is 37, so 42 cells always fit.
         const emptyDatesEnd = Array(42 - emptyDatesStart.length - dates.length).fill(null);
         return [...emptyDatesStart, ...dates, ...emptyDatesEnd];
-    }, [viewingValue]);
+    }, [viewingValue, weekStart]);
 }

package/dist/src/DateTimeSelection/shared/CalendarLocale/FirstDayOfWeekContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type FirstDayOfWeek } from '../BasePicker/constants';
+export type FirstDayOfWeekContextValue = FirstDayOfWeek | undefined;
+export declare function FirstDayOfWeekProvider({ value, children, }: {
+    value: FirstDayOfWeekContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useFirstDayOfWeek(): FirstDayOfWeek;

package/dist/src/DateTimeSelection/shared/CalendarLocale/FirstDayOfWeekContext.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { DEFAULT_FIRST_DAY_OF_WEEK } from '../BasePicker/constants';
+const FirstDayOfWeekContext = createContext(DEFAULT_FIRST_DAY_OF_WEEK);
+export function FirstDayOfWeekProvider({ value, children, }) {
+    return _jsx(FirstDayOfWeekContext.Provider, { value: value, children: children });
+}
+export function useFirstDayOfWeek() {
+    return useContext(FirstDayOfWeekContext) ?? DEFAULT_FIRST_DAY_OF_WEEK;
+}

package/dist/src/DateTimeSelection/shared/DateCell/DateCell.types.d.ts

@@ -59,7 +59,7 @@ export type DateCellProps = {
     /**
      * Whether the cell has right border or not.
      * It will be calculated on the Calendar component and passed down to the DateCell component.
-     * If it is Sunday, it will have borderRight.
+     * If it is in the last column of the week, it will have borderRight.
      *
      * @default false
      */

package/dist/src/DateTimeSelection/shared/DayCell/DayCell.d.ts

@@ -1,13 +1,14 @@
+import { type DayIndex } from '../BasePicker/constants';
 /**
  * DayCellProps is the props interface for the DayCell component.
  */
 type DayCellProps = {
     /**
-     * The day of the week.
+     * The day of the week, matching the value returned by `Date.prototype.getDay()`.
      *
-     * 0 = Monday, 1 = Tuesday, 2 = Wednesday, 3 = Thursday, 4 = Friday, 5 = Saturday, 6 = Sunday
+     * 0 = Sunday, 1 = Monday, 2 = Tuesday, 3 = Wednesday, 4 = Thursday, 5 = Friday, 6 = Saturday
      */
-    day: number;
+    day: DayIndex;
 };
 /**
  * DayCell is a cell that represents a day of the week in the Calendar component.

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueList.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A table-styled list of key-value rows.
+ * Use DecoratedKeyValueList.Item to render each row.
+ *
+ * @example
+ * ```jsx
+ * <DecoratedKeyValueList>
+ *   <DecoratedKeyValueList.Item keyItem="Name" valueItem="Jane Doe" />
+ *   <DecoratedKeyValueList.Item keyItem="Role" valueItem="Administrator" />
+ * </DecoratedKeyValueList>
+ * ```
+ */
+export declare const DecoratedKeyValueList: import("react").ForwardRefExoticComponent<{
+    size?: import("../../styled-system/recipes").DecoratedKeyValueListSlotRecipeVariant['size'];
+    gridTemplateColumns?: import("react").CSSProperties['gridTemplateColumns'];
+    children?: React.ReactNode;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>> & {
+    /**
+     * A row in the DecoratedKeyValueList.
+     */
+    Item: import("react").ForwardRefExoticComponent<import(".").DecoratedKeyValueListItemProps & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueList.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { decoratedKeyValueListSlotRecipe } from '../../styled-system/recipes';
+import { DecoratedKeyValueListItem } from './DecoratedKeyValueListItem/DecoratedKeyValueListItem';
+const DecoratedKeyValueListBase = forwardRef(({ size = 'medium', gridTemplateColumns = '140px 1fr', children, className, style, ...props }, ref) => {
+    const classes = decoratedKeyValueListSlotRecipe({ size });
+    return (_jsx("ul", { ref: ref, className: cx(classes.root, 'mfui-DecoratedKeyValueList__root', className), ...props, style: { gridTemplateColumns, ...style }, children: children }));
+});
+/**
+ * A table-styled list of key-value rows.
+ * Use DecoratedKeyValueList.Item to render each row.
+ *
+ * @example
+ * ```jsx
+ * <DecoratedKeyValueList>
+ *   <DecoratedKeyValueList.Item keyItem="Name" valueItem="Jane Doe" />
+ *   <DecoratedKeyValueList.Item keyItem="Role" valueItem="Administrator" />
+ * </DecoratedKeyValueList>
+ * ```
+ */
+export const DecoratedKeyValueList = Object.assign(DecoratedKeyValueListBase, {
+    /**
+     * A row in the DecoratedKeyValueList.
+     */
+    Item: DecoratedKeyValueListItem,
+});
+DecoratedKeyValueList.displayName = 'DecoratedKeyValueList';

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueList.types.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ComponentPropsWithoutRef } from 'react';
+import { type DecoratedKeyValueListSlotRecipeVariant } from '../../styled-system/recipes';
+/**
+ * Props for the DecoratedKeyValueList component.
+ */
+export type DecoratedKeyValueListProps = {
+    /**
+     * The size (row density) of all items in the list.
+     * @default 'medium'
+     */
+    size?: DecoratedKeyValueListSlotRecipeVariant['size'];
+    /**
+     * The grid template columns defining the key / value column widths.
+     * @default '140px 1fr'
+     */
+    gridTemplateColumns?: CSSProperties['gridTemplateColumns'];
+    /**
+     * The rows of the list. Use DecoratedKeyValueList.Item.
+     */
+    children?: React.ReactNode;
+} & ComponentPropsWithoutRef<'ul'>;

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueList.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueListItem/DecoratedKeyValueListItem.d.ts

@@ -0,0 +1,8 @@
+import { type DecoratedKeyValueListItemProps } from './DecoratedKeyValueListItem.types';
+/**
+ * A row in a DecoratedKeyValueList.
+ * The key item accepts any React node. Use `valueItem` for a single value item,
+ * or `valueItems` to stack multiple simple value items separated by dividers.
+ * Associate form controls with their key items explicitly using native labeling or ARIA attributes.
+ */
+export declare const DecoratedKeyValueListItem: import("react").ForwardRefExoticComponent<DecoratedKeyValueListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueListItem/DecoratedKeyValueListItem.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../../styled-system/css';
+import { decoratedKeyValueListItemSlotRecipe } from '../../../styled-system/recipes';
+/**
+ * A row in a DecoratedKeyValueList.
+ * The key item accepts any React node. Use `valueItem` for a single value item,
+ * or `valueItems` to stack multiple simple value items separated by dividers.
+ * Associate form controls with their key items explicitly using native labeling or ARIA attributes.
+ */
+export const DecoratedKeyValueListItem = forwardRef(({ keyItem, valueItem, valueItems, className, ...props }, ref) => {
+    const classes = decoratedKeyValueListItemSlotRecipe();
+    // Skip nullish and boolean entries so conditional expressions like
+    // `condition && <Node />` do not render an empty cell with a divider.
+    const resolvedValueItems = (valueItems ?? [valueItem]).filter((entry) => entry !== null && entry !== undefined && typeof entry !== 'boolean');
+    return (_jsxs("li", { ref: ref, className: cx(classes.root, 'mfui-DecoratedKeyValueListItem__root', className), ...props, children: [_jsx("div", { className: cx(classes.keyItem, 'mfui-DecoratedKeyValueListItem__keyItem'), children: keyItem }), _jsx("div", { className: cx(classes.valueGroup, 'mfui-DecoratedKeyValueListItem__valueGroup'), children: resolvedValueItems.map((entry, index) => (_jsx("div", { className: cx(classes.valueItem, 'mfui-DecoratedKeyValueListItem__valueItem'), children: entry }, index))) })] }));
+});
+DecoratedKeyValueListItem.displayName = 'DecoratedKeyValueListItem';

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueListItem/DecoratedKeyValueListItem.types.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from 'react';
+type DecoratedKeyValueListItemValueProps = {
+    /**
+     * The value item of the row. Accepts any ReactNode (text, form controls, nested tables, etc.).
+     */
+    valueItem: React.ReactNode;
+    valueItems?: never;
+} | {
+    /**
+     * Multiple value items stacked vertically in the row, separated by dividers.
+     * Intended for simple content such as strings. Nullish and boolean entries are skipped.
+     */
+    valueItems: React.ReactNode[];
+    valueItem?: never;
+};
+/**
+ * Props for the DecoratedKeyValueListItem component.
+ */
+export type DecoratedKeyValueListItemProps = {
+    /**
+     * The key item of the row. Accepts any ReactNode.
+     */
+    keyItem: React.ReactNode;
+} & DecoratedKeyValueListItemValueProps & Omit<ComponentPropsWithoutRef<'li'>, 'children' | 'value'>;
+export {};

package/dist/src/DecoratedKeyValueList/DecoratedKeyValueListItem/DecoratedKeyValueListItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/DecoratedKeyValueList/index.d.ts

@@ -0,0 +1,4 @@
+export { DecoratedKeyValueList } from './DecoratedKeyValueList';
+export type { DecoratedKeyValueListProps } from './DecoratedKeyValueList.types';
+export { DecoratedKeyValueListItem } from './DecoratedKeyValueListItem/DecoratedKeyValueListItem';
+export type { DecoratedKeyValueListItemProps } from './DecoratedKeyValueListItem/DecoratedKeyValueListItem.types';

package/dist/src/DecoratedKeyValueList/index.js

@@ -0,0 +1,2 @@
+export { DecoratedKeyValueList } from './DecoratedKeyValueList';
+export { DecoratedKeyValueListItem } from './DecoratedKeyValueListItem/DecoratedKeyValueListItem';

package/dist/src/DisplayTable/DisplayTable.d.ts

@@ -5,7 +5,7 @@ import { DisplayTableHeader } from './DisplayTableHeader';
 import { DisplayTableHeaderCell } from './DisplayTableHeaderCell';
 import { DisplayTableHeaderRow } from './DisplayTableHeaderRow';
 import { DisplayTableRow } from './DisplayTableRow';
-declare function Base({ title, titleTag, lead, className, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading, ...props }: DisplayTableProps): import("react/jsx-runtime").JSX.Element;
+declare function Base({ title, titleTag, renderHeading, lead, className, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading, ...props }: DisplayTableProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The `DisplayTable` component.
  *

package/dist/src/DisplayTable/DisplayTable.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DisplayTableProvider } from './DisplayTableProvider';
 import { displayTableSlotRecipe } from '../../styled-system/recipes';
 import { DisplayTableBody } from './DisplayTableBody';
@@ -11,9 +11,14 @@ import { DisplayTableRow } from './DisplayTableRow';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
 import { Typography } from '../Typography';
-function Base({ title, titleTag = 'h4', lead, className, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading = false, ...props }) {
+function Base({ title, titleTag = 'h4', renderHeading, lead, className, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading = false, ...props }) {
     const classes = displayTableSlotRecipe({ fixedHeader });
-    return (_jsx(DisplayTableProvider, { fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DisplayTable__wrapper', wrapperProps?.className), children: [_jsxs("div", { className: cx(classes.header, 'mfui-DisplayTable__header'), children: [_jsx(Heading, { variant: "sectionHeading2", tag: titleTag, className: cx(classes.title, 'mfui-DisplayTable__title'), children: title }), lead ? (_jsx(Typography, { tag: "p", className: cx(classes.lead, 'mfui-DisplayTable__lead'), children: lead })) : null] }), _jsx("div", { className: cx(classes.body, 'mfui-DisplayTable__body'), children: _jsx("table", { className: cx(classes.table, 'mfui-DisplayTable__table', className), "aria-live": "polite", "aria-busy": loading, "aria-label": loading ? 'データを読み込み中' : undefined, ...props }) })] }) }));
+    const headingNode = title ? (_jsx(Heading, { variant: "sectionHeading2", tag: titleTag, className: cx(classes.title, 'mfui-DisplayTable__title'), children: title })) : null;
+    const leadNode = lead ? (_jsx(Typography, { tag: "p", className: cx(classes.lead, 'mfui-DisplayTable__lead'), children: lead })) : null;
+    const headingContent = renderHeading ? (renderHeading({ headingNode, leadNode })) : headingNode || leadNode ? (_jsxs(_Fragment, { children: [headingNode, leadNode] })) : null;
+    // `renderHeading` can return renderable falsy values such as `0`, so only nodes React never renders are excluded.
+    const hasHeadingContent = headingContent != null && typeof headingContent !== 'boolean' && headingContent !== '';
+    return (_jsx(DisplayTableProvider, { fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DisplayTable__wrapper', wrapperProps?.className), children: [hasHeadingContent ? (_jsx("div", { className: cx(classes.header, 'mfui-DisplayTable__header'), children: headingContent })) : null, _jsx("div", { className: cx(classes.body, 'mfui-DisplayTable__body'), children: _jsx("table", { className: cx(classes.table, 'mfui-DisplayTable__table', className), "aria-live": "polite", "aria-busy": loading, "aria-label": loading ? 'データを読み込み中' : undefined, ...props }) })] }) }));
 }
 /**
  * The `DisplayTable` component.