@moneyforward/mfui-components 3.20.0 → 3.22.0

package/dist/src/DateTimeSelection/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import { BasePicker } from '../shared/BasePicker';
 import { DatePickerPanel } from './DatePickerPanel';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
 import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
-import { dateToEnglishEraShort } from '../shared/utilities/japaneseCalendar';
+import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
  * DatePicker component
  *
@@ -15,16 +15,7 @@ export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate,
     const customFormatValue = useMemo(() => {
         if (!displayJapaneseCalendar)
             return;
-        if (calendarLocale === 'en') {
-            return (date) => dateToEnglishEraShort(date);
-        }
-        const formatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
-            era: 'long',
-            year: 'numeric',
-            month: 'narrow',
-            day: 'numeric',
-        });
-        return (date) => formatter.format(date);
+        return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
     }, [displayJapaneseCalendar, calendarLocale]);
     return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) }) })) }));
 }

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

@@ -5,4 +5,4 @@ import { type DateRangePickerProps } from './DateRangePicker.types';
  *
  * @param props - DateRangePicker props
  */
-export declare function DateRangePicker({ format, calendarLocale, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ format, calendarLocale, displayJapaneseCalendar, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePicker.js

@@ -6,15 +6,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * All logic and props are inherited from BaseRangePicker.
  * See BaseRangePicker for implementation details.
  */
+import { useMemo } from 'react';
 import { BaseRangePicker } from '../shared/BaseRangePicker';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { DateRangePickerPopover } from './DateRangePickerPopover/DateRangePickerPopover';
+import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
  * DateRangePicker component for selecting date ranges.
  * Extends BaseRangePicker with date-specific functionality.
  *
  * @param props - DateRangePicker props
  */
-export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', ...restProps }) {
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, renderPopoverContent: () => (_jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) })) }));
+export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', displayJapaneseCalendar = false, ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
+    }, [displayJapaneseCalendar, calendarLocale]);
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: () => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })) }));
 }

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

@@ -10,4 +10,18 @@ export type DateRangePickerProps = BaseRangePickerProps & {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Whether to display the date in Japanese calendar format (e.g., "令和7年1月15日")
+     * When enabled, the text inputs will show dates in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, dates are romanized with
+     *   zero-padded month/day (e.g., "Reiwa 7/01/15").
+     * - Pre-Meiji dates (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12/31").
+     */
+    displayJapaneseCalendar?: boolean;
 };

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerPopover.js

@@ -13,6 +13,8 @@ import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
 import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
 import { getBasePickerLabel } from '../../shared/BasePicker/constants';
 import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../../shared/utilities/japaneseCalendar';
 // Utility function to add months to a date
 const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
 /**
@@ -38,6 +40,7 @@ const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth()
 export function DateRangePickerPopover() {
     const { viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled, minDate, maxDate } = useBaseRangePickerContext();
     const calendarLocale = useCalendarLocale();
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
     const rightViewingMonth = useMemo(() => addMonths(viewingMonth, 1), [viewingMonth]);
     // Check if navigation buttons should be disabled based on constraints
     const isPreviousMonthDisabled = useCallback(() => {
@@ -129,14 +132,19 @@ export function DateRangePickerPopover() {
     // Localized labels
     const previousMonthLabel = useMemo(() => getBasePickerLabel('GO_TO_PREV_MONTH', calendarLocale), [calendarLocale]);
     const nextMonthLabel = useMemo(() => getBasePickerLabel('GO_TO_NEXT_MONTH', calendarLocale), [calendarLocale]);
-    // Localized month format functions
-    const formatMonth = useMemo(() => (date) => {
+    // Localized month labels (Gregorian vs Japanese-calendar era, matching trigger formatting)
+    const formatMonth = useMemo(() => {
+        const firstOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+        if (displayJapaneseCalendar) {
+            const formatEra = calendarLocale === 'ja' ? dateToJapaneseEraMonth : dateToEnglishEraMonthShort;
+            return (date) => formatEra(firstOfMonth(date));
+        }
         if (calendarLocale === 'ja') {
-            return `${String(date.getFullYear())}年${String(date.getMonth() + 1)}月`;
+            return (date) => `${String(firstOfMonth(date).getFullYear())}年${String(firstOfMonth(date).getMonth() + 1)}月`;
         }
         const monthFormatter = new Intl.DateTimeFormat('en-US', { month: 'long' });
-        return `${monthFormatter.format(date)} ${String(date.getFullYear())}`;
-    }, [calendarLocale]);
+        return (date) => `${monthFormatter.format(firstOfMonth(date))} ${String(firstOfMonth(date).getFullYear())}`;
+    }, [calendarLocale, displayJapaneseCalendar]);
     return (_jsxs("div", { className: cx(classNames.root, 'mfui-DateRangePickerPopover__root'), onKeyDown: handleOnKeyDown, children: [_jsxs("div", { className: cx(classNames.navigation, 'mfui-DateRangePickerPopover__navigation'), children: [_jsxs("div", { className: cx(classNames.navigationColumn, 'mfui-DateRangePickerPopover__navigationColumn'), children: [_jsx(IconButton, { "aria-label": previousMonthLabel, disabled: isPreviousMonthDisabled(), onClick: () => {
                                     if (!isPreviousMonthDisabled()) {
                                         setViewingMonth(addMonths(viewingMonth, -1));

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility.js

@@ -51,8 +51,8 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         return getAllDateCells().filter((element) => element.dataset['mfuiInRange'] === 'true');
     }
     function getLeftMonthLabel() {
-        // Look for month labels - handles both Japanese (YYYY年MM月) and English (Month YYYY) formats
-        const monthLabels = screen.getAllByText(/年.*月|\w+ \d{4}/);
+        // Month navigation headings: Gregorian JA/EN, Japanese-era JA, or romanized-era EN (e.g. Reiwa 7/01)
+        const monthLabels = screen.getAllByText(/年[0-9０-９]*月|\d{4}年\d{1,2}月|\b(?:January|February|March|April|May|June|July|August|September|October|November|December)\b \d{4}|\b(?:Reiwa|Heisei|Showa|Taisho|Meiji)\s+\d{1,2}\/\d{2}|(?:令和|平成|昭和|大正|明治)(?:元|[0-9０-９]{1,2})年[0-9０-９]{1,2}月/);
         return monthLabels[0]?.textContent ?? null;
     }
     // Actions

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility.js

@@ -12,7 +12,9 @@ export function createDateRangePickerTriggerTestUtility({ user }) {
         return screen.queryByRole('button', { name: LOCALE.CLEAR_BUTTON_LABEL });
     }
     function getCalendarButton() {
-        return screen.getByRole('button', { name: LOCALE.CALENDAR_BUTTON_LABEL });
+        return screen.getByRole('button', {
+            name: new RegExp(`^(?:${LOCALE.CALENDAR_BUTTON_LABEL}|Open calendar)$`),
+        });
     }
     // Value Queries
     function getStartValue() {

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

@@ -5,4 +5,4 @@ import { type MonthPickerProps } from './MonthPicker.types';
  *
  * @param props - MonthPicker props including minMonth and maxMonth constraints
  */
-export declare function MonthPicker({ format, minMonth, maxMonth, checkDisabledMonth, calendarLocale, ...restProps }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthPicker({ format, minMonth, maxMonth, checkDisabledMonth, calendarLocale, displayJapaneseCalendar, ...restProps }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/MonthPicker/MonthPicker.js

@@ -6,15 +6,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * All logic and props are inherited from BasePicker, except for the popover content and format.
  * See BasePicker for implementation details.
  */
+import { useMemo } from 'react';
 import { BasePicker } from '../shared/BasePicker';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { MonthPickerPanel } from './MonthPickerPanel/MonthPickerPanel';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../shared/utilities/japaneseCalendar';
 /**
  * MonthPicker component for selecting months.
  * Extends BasePicker with month-specific functionality.
  *
  * @param props - MonthPicker props including minMonth and maxMonth constraints
  */
-export function MonthPicker({ format = 'YYYY/MM', minMonth, maxMonth, checkDisabledMonth, calendarLocale = 'ja', ...restProps }) {
-    return (_jsx(BasePicker, { ...restProps, format: format, baseFormat: "YYYY-MM", calendarLocale: calendarLocale, renderPopoverContent: ({ viewingValue, setViewingValue, value, onChange }) => (_jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange }) })) }));
+export function MonthPicker({ format = 'YYYY/MM', minMonth, maxMonth, checkDisabledMonth, calendarLocale = 'ja', displayJapaneseCalendar = false, ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraMonthShort : dateToJapaneseEraMonth;
+    }, [displayJapaneseCalendar, calendarLocale]);
+    return (_jsx(BasePicker, { ...restProps, format: format, baseFormat: "YYYY-MM", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ viewingValue, setViewingValue, value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange }) }) })) }));
 }

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

@@ -39,4 +39,18 @@ export type MonthPickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'b
      * // Displays: "Jan", "Feb", etc. and English navigation labels
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Whether to display the month in Japanese calendar format (e.g., "令和7年1月")
+     * When enabled, the text input will show months in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, months are romanized with
+     *   a zero-padded month number (e.g., "Reiwa 7/01").
+     * - Pre-Meiji months (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12").
+     */
+    displayJapaneseCalendar?: boolean;
 };

package/dist/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.js

@@ -2,38 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { MonthCell } from '../../../shared/MonthCell';
 import { useCalendarLocale } from '../../../shared/CalendarLocale/CalendarLocaleContext';
+import { getMonthCellMonthFormat } from '../../../shared/utilities/monthCellMonthFormat';
 import { useMonthPickerKeyboardNavigation } from '../../utilities/useMonthPickerKeyboardNavigation';
-// English month abbreviations wrapped in square brackets to escape them in dayjs format strings
-const ENGLISH_MONTH_ABBREVIATIONS = [
-    '[Jan]',
-    '[Feb]',
-    '[Mar]',
-    '[Apr]',
-    '[May]',
-    '[Jun]',
-    '[Jul]',
-    '[Aug]',
-    '[Sep]',
-    '[Oct]',
-    '[Nov]',
-    '[Dec]',
-];
 /**
  * MonthPickerMonthCell is a wrapper around the shared MonthCell component.
  * It handles month selection and integrates with the MonthPicker context.
  */
 export function MonthPickerMonthCell({ onKeyDown, minMonth, maxMonth, checkDisabledMonth, date, ...rest }) {
     const locale = useCalendarLocale();
-    // Generate month format string based on locale
-    const monthFormat = useMemo(() => {
-        const monthIndex = date.getMonth();
-        if (locale === 'en') {
-            // Return English month abbreviation escaped for dayjs
-            return ENGLISH_MONTH_ABBREVIATIONS[monthIndex];
-        }
-        // Japanese format: "1月", "2月", etc. (using dayjs format)
-        return 'M月';
-    }, [locale, date]);
+    const monthFormat = useMemo(() => getMonthCellMonthFormat(locale, date), [locale, date]);
     const handleKeyDown = useMonthPickerKeyboardNavigation(onKeyDown, minMonth, maxMonth, checkDisabledMonth);
     return _jsx(MonthCell, { ...rest, date: date, monthFormat: monthFormat, onKeyDown: handleKeyDown });
 }

package/dist/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthPickerPanel.js

@@ -109,7 +109,7 @@ export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChang
         setPendingFocusDate(null);
     }, [viewingValue, pendingFocusDate, setPendingFocusDate, baseFormat]);
     const classNames = monthPickerPanelSlotRecipe();
-    return (_jsxs("div", { ...props, className: cx(classNames.root, 'mfui-MonthPickerPanel__root', className), children: [_jsxs("div", { className: cx(classNames.navigation, 'mfui-MonthPickerPanel__navigation'), children: [!isPreviousYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale ?? 'ja', 'prevYear'), onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') })), _jsx(YearSelector, { value: viewingValue, triggerWrapperProps: { className: cx(classNames.yearSelector, 'mfui-MonthPickerPanel__yearSelector') }, filterYear: shouldFilterYears ? filterYear : undefined, onChange: handleYearSelect }), !isNextYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale ?? 'ja', 'nextYear'), onClick: handleNextYear, children: _jsx(PickerAfter, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') }))] }), _jsx(MonthPickerMonthGrid, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange })] }));
+    return (_jsxs("div", { ...props, className: cx(classNames.root, 'mfui-MonthPickerPanel__root', className), children: [_jsxs("div", { className: cx(classNames.navigation, 'mfui-MonthPickerPanel__navigation'), children: [!isPreviousYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale, 'prevYear'), onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') })), _jsx(YearSelector, { value: viewingValue, triggerWrapperProps: { className: cx(classNames.yearSelector, 'mfui-MonthPickerPanel__yearSelector') }, filterYear: shouldFilterYears ? filterYear : undefined, onChange: handleYearSelect }), !isNextYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale, 'nextYear'), onClick: handleNextYear, children: _jsx(PickerAfter, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') }))] }), _jsx(MonthPickerMonthGrid, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange })] }));
 }
 // Create a placeholder div that matches IconButton dimensions to prevent layout shift
 function YearNavigationPlaceholder({ className }) {

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

@@ -14,4 +14,4 @@ import { type MonthRangePickerProps } from './MonthRangePicker.types';
  * />
  * ```
  */
-export declare function MonthRangePicker({ format, minMonth, maxMonth, startInputProps, endInputProps, initialDisplayedMonths, ...restProps }: MonthRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthRangePicker({ format, minMonth, maxMonth, startInputProps, endInputProps, initialDisplayedMonths, displayJapaneseCalendar, calendarLocale, ...restProps }: MonthRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePicker.js

@@ -12,8 +12,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - Keyboard navigation support
  * - Apply/Cancel workflow
  */
+import { useMemo } from 'react';
 import { BaseRangePicker } from '../shared/BaseRangePicker';
+import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { MonthRangePickerPanel } from './MonthRangePickerPanel';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../shared/utilities/japaneseCalendar';
 /**
  * MonthRangePicker component for selecting month ranges.
  *
@@ -29,7 +33,12 @@ import { MonthRangePickerPanel } from './MonthRangePickerPanel';
  * />
  * ```
  */
-export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, ...restProps }) {
+export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, displayJapaneseCalendar = false, calendarLocale = 'ja', ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraMonthShort : dateToJapaneseEraMonth;
+    }, [displayJapaneseCalendar, calendarLocale]);
     // MonthRangePicker panels are grouped by year (left = viewingYear, right = viewingYear + 1).
     // When `previousAndCurrent` is requested, we shift by a full year so the left panel
     // shows the previous year. This applies regardless of whether `value` is set.
@@ -51,11 +60,11 @@ export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, start
         // Same-year value + previousAndCurrent: show previous year on the left
         return new Date(startDate.getFullYear() - 1, 0, 1);
     })();
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, pendingFocusDayjsFormat: "YYYY-MM", initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
-            placeholder: '開始月',
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, pendingFocusDayjsFormat: "YYYY-MM", initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, startInputProps: {
+            placeholder: calendarLocale === 'en' ? 'Start month' : '開始月',
             ...startInputProps,
         }, endInputProps: {
-            placeholder: '終了月',
+            placeholder: calendarLocale === 'en' ? 'End month' : '終了月',
             ...endInputProps,
-        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", renderPopoverContent: ({ viewingValue, setViewingValue, value }) => (_jsx(MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth })) }));
+        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", calendarLocale: calendarLocale, renderPopoverContent: ({ viewingValue, setViewingValue, value }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth }) }) })) }));
 }

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

@@ -1,3 +1,4 @@
+import { type BasePickerProps } from '../shared/BasePicker';
 import { type BaseRangePickerProps } from '../shared/BaseRangePicker';
 /**
  * The props for the MonthRangePicker component
@@ -25,4 +26,24 @@ export type MonthRangePickerProps = BaseRangePickerProps & {
      * ```
      */
     maxMonth?: Date;
+    /**
+     * Whether to display the month in Japanese calendar format (e.g., "令和7年1月")
+     * When enabled, the text inputs will show months in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, months are romanized with
+     *   a zero-padded month number (e.g., "Reiwa 7/01").
+     * - Pre-Meiji months (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12").
+     */
+    displayJapaneseCalendar?: boolean;
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
 };

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.d.ts

@@ -1,4 +1,5 @@
 import { type MonthRangePickerMonthCellProps } from './MonthRangePickerMonthCell.types';
+import 'dayjs/locale/en';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { MonthCell } from '../../shared/MonthCell';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { getMonthCellMonthFormat } from '../../shared/utilities/monthCellMonthFormat';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
+import 'dayjs/locale/en';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *
@@ -17,11 +20,15 @@ import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
  * @param props - MonthRangePickerMonthCell props
  */
 export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }) {
+    const calendarLocale = useCalendarLocale();
     // Calculate if this month is selected (either start or end of range)
     const selected = isRangeStart || isRangeEnd || monthCellProps.selected || false;
+    const monthFormat = useMemo(() => getMonthCellMonthFormat(calendarLocale, monthCellProps.date), [calendarLocale, monthCellProps.date]);
     // Create accessible label for range selection
     const accessibleLabel = useMemo(() => {
-        const monthText = dayjs(monthCellProps.date).format('MMMM YYYY');
+        const monthText = calendarLocale === 'en'
+            ? dayjs(monthCellProps.date).locale('en').format('MMMM YYYY')
+            : dayjs(monthCellProps.date).format('MMMM YYYY');
         const statusParts = [];
         if (monthCellProps.disabled) {
             statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
@@ -41,6 +48,6 @@ export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd,
             statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
         }
         return statusParts.length > 0 ? `${monthText}, ${statusParts.join(', ')}` : monthText;
-    }, [monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
-    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
+    }, [calendarLocale, monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
+    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, monthFormat: monthFormat, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
 }

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerNavigation/MonthRangePickerNavigation.js

@@ -5,11 +5,14 @@ import { cx } from '../../../../styled-system/css';
 import { monthRangePickerNavigationSlotRecipe } from '../../../../styled-system/recipes';
 import { IconButton } from '../../../IconButton';
 import { Typography } from '../../../Typography';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { yearToEraLabel } from '../../shared/utilities/japaneseCalendar';
 // Constants for year navigation limits
 const MINIMUM_VIEWABLE_YEAR = 1900;
 const MAXIMUM_VIEWABLE_YEAR = 2100;
-const LABEL_PREV_YEAR = '前年';
-const LABEL_NEXT_YEAR = '翌年';
+const LABEL_PREV_YEAR = { ja: '前年', en: 'Previous year' };
+const LABEL_NEXT_YEAR = { ja: '翌年', en: 'Next year' };
 /**
  * Year navigation component for MonthRangePicker.
  *
@@ -21,8 +24,18 @@ const LABEL_NEXT_YEAR = '翌年';
  * @param props - MonthRangePickerNavigation props
  */
 export function MonthRangePickerNavigation({ viewingValue, setViewingValue, minMonth, maxMonth, }) {
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
+    const calendarLocale = useCalendarLocale();
     const currentYear = viewingValue.getFullYear();
     const nextYear = currentYear + 1;
+    const formatYear = (year) => {
+        if (displayJapaneseCalendar) {
+            return yearToEraLabel(year, calendarLocale);
+        }
+        return calendarLocale === 'en' ? String(year) : `${String(year)}年`;
+    };
+    const currentYearLabel = formatYear(currentYear);
+    const nextYearLabel = formatYear(nextYear);
     // Calculate if year navigation should be disabled based on min/max constraints
     const { isPreviousYearDisabled, isNextYearDisabled } = useMemo(() => {
         const baseMinYearDisabled = currentYear <= MINIMUM_VIEWABLE_YEAR;
@@ -65,5 +78,5 @@ export function MonthRangePickerNavigation({ viewingValue, setViewingValue, minM
         }
     }, [isNextYearDisabled, viewingValue, nextYear, setViewingValue]);
     const classNames = monthRangePickerNavigationSlotRecipe();
-    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerNavigation__root'), children: [_jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx(IconButton, { "aria-label": LABEL_PREV_YEAR, disabled: isPreviousYearDisabled, onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) }), _jsxs(Typography, { variant: "contentHeading", children: [currentYear, "\u5E74"] }), _jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') })] }), _jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') }), _jsxs(Typography, { variant: "contentHeading", children: [nextYear, "\u5E74"] }), _jsx(IconButton, { "aria-label": LABEL_NEXT_YEAR, disabled: isNextYearDisabled, onClick: handleNextYear, children: _jsx(PickerAfter, {}) })] })] }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerNavigation__root'), children: [_jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx(IconButton, { "aria-label": LABEL_PREV_YEAR[calendarLocale], disabled: isPreviousYearDisabled, onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) }), _jsx(Typography, { variant: "contentHeading", children: currentYearLabel }), _jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') })] }), _jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') }), _jsx(Typography, { variant: "contentHeading", children: nextYearLabel }), _jsx(IconButton, { "aria-label": LABEL_NEXT_YEAR[calendarLocale], disabled: isNextYearDisabled, onClick: handleNextYear, children: _jsx(PickerAfter, {}) })] })] }));
 }

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerPanel/MonthRangePickerPanel.js

@@ -7,6 +7,7 @@ import { BaseRangePickerFooter } from '../../shared/BaseRangePicker/BaseRangePic
 import { MonthRangePickerNavigation } from '../MonthRangePickerNavigation';
 import { MonthRangePickerContent } from '../MonthRangePickerContent';
 import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
 /**
  * MonthRangePickerPanel component for selecting month ranges.
  *
@@ -32,6 +33,7 @@ import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRang
  */
 export function MonthRangePickerPanel({ viewingValue, setViewingValue, value, minMonth, maxMonth, }) {
     const { setPendingFocusDate, handlePreview } = useBaseRangePickerContext();
+    const calendarLocale = useCalendarLocale();
     // Cross-Panel Keyboard Navigation for MonthRangePicker
     const handleKeyboardNavigation = useCallback((event) => {
         const { key, currentTarget } = event;
@@ -85,5 +87,5 @@ export function MonthRangePickerPanel({ viewingValue, setViewingValue, value, mi
         }
     }, [viewingValue, setViewingValue, setPendingFocusDate, handlePreview]);
     const classNames = monthRangePickerPanelSlotRecipe();
-    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerPanel__root'), children: [_jsx(MonthRangePickerNavigation, { viewingValue: viewingValue, setViewingValue: setViewingValue, minMonth: minMonth, maxMonth: maxMonth }), _jsx(MonthRangePickerContent, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerFooter, {})] }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerPanel__root'), children: [_jsx(MonthRangePickerNavigation, { viewingValue: viewingValue, setViewingValue: setViewingValue, minMonth: minMonth, maxMonth: maxMonth }), _jsx(MonthRangePickerContent, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerFooter, { calendarLocale: calendarLocale })] }));
 }

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

@@ -0,0 +1,43 @@
+/**
+ * TimePicker is a styled wrapper around the native `<input type="time">`.
+ *
+ * The browser owns the picker UI: typing into the segmented control, the
+ * UA-provided dropdown, and Escape-to-revert semantics all come from the
+ * platform. The trailing clock icon opens the native picker — on desktop via
+ * `HTMLInputElement.showPicker()`, on iOS Safari (where `showPicker` is not
+ * reliably implemented) by dispatching a click on the underlying input, which
+ * is what iOS Safari uses to open its native time picker.
+ *
+ * The `value` prop follows the same string format as the HTML `<input type="time">`
+ * element: `"HH:mm"` for hours and minutes, `"HH:mm:ss"` for hours, minutes, and seconds.
+ *
+ * The component does not render its own `<label>`. Consumers are expected to
+ * provide an accessible name via a parent `<label htmlFor>`, `aria-labelledby`,
+ * or `aria-label`.
+ *
+ * @example
+ * // Controlled
+ * const [time, setTime] = useState<string>('');
+ * <TimePicker value={time} onChange={setTime} />
+ *
+ * @example
+ * // With seconds
+ * <TimePicker format="HH:mm:ss" />
+ */
+export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "aria-invalid" | keyof {
+    onChange?: (value: string, event: import("react").SyntheticEvent) => void;
+    format?: "HH:mm" | "HH:mm:ss";
+    size?: "small" | "medium" | "large";
+    invalid?: boolean;
+    onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+}> & {
+    onChange?: (value: string, event: import("react").SyntheticEvent) => void;
+    format?: "HH:mm" | "HH:mm:ss";
+    size?: "small" | "medium" | "large";
+    invalid?: boolean;
+    onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/DateTimeSelection/TimePicker/TimePicker.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from 'react';
+import { Time } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../../styled-system/css';
+import { timePickerSlotRecipe } from '../../../styled-system/recipes';
+import { FocusIndicator } from '../../FocusIndicator';
+import { InternalIconButton as IconButton } from '../../IconButton/IconButton';
+import { ClearButton } from '../../shared/ClearButton';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { getTimePickerLabel } from './constants';
+/**
+ * TimePicker is a styled wrapper around the native `<input type="time">`.
+ *
+ * The browser owns the picker UI: typing into the segmented control, the
+ * UA-provided dropdown, and Escape-to-revert semantics all come from the
+ * platform. The trailing clock icon opens the native picker — on desktop via
+ * `HTMLInputElement.showPicker()`, on iOS Safari (where `showPicker` is not
+ * reliably implemented) by dispatching a click on the underlying input, which
+ * is what iOS Safari uses to open its native time picker.
+ *
+ * The `value` prop follows the same string format as the HTML `<input type="time">`
+ * element: `"HH:mm"` for hours and minutes, `"HH:mm:ss"` for hours, minutes, and seconds.
+ *
+ * The component does not render its own `<label>`. Consumers are expected to
+ * provide an accessible name via a parent `<label htmlFor>`, `aria-labelledby`,
+ * or `aria-label`.
+ *
+ * @example
+ * // Controlled
+ * const [time, setTime] = useState<string>('');
+ * <TimePicker value={time} onChange={setTime} />
+ *
+ * @example
+ * // With seconds
+ * <TimePicker format="HH:mm:ss" />
+ */
+export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, step, onClear, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
+    const inputRef = useRef(null);
+    const mergedInputRef = mergeRefs(ref, inputRef);
+    // Track the live value internally so the clear button can read it whether
+    // the consumer is using `value` (controlled) or `defaultValue` (uncontrolled).
+    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
+    const effectiveValue = value === undefined ? internalValue : value;
+    const hasValue = effectiveValue !== '';
+    const classes = timePickerSlotRecipe({ size, disabled, invalid });
+    const pickerLabel = pickerIndicatorIconButtonProps?.['aria-label'] ?? getTimePickerLabel('ja', 'openPicker');
+    const resolvedStep = step ?? (format === 'HH:mm:ss' ? 1 : undefined);
+    const handleClear = useCallback((event) => {
+        if (!inputRef.current)
+            return;
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        setter?.call(inputRef.current, '');
+        setInternalValue('');
+        onChange?.('', event);
+        inputRef.current.focus();
+        onClear?.(event);
+    }, [onChange, onClear]);
+    // Try the spec-compliant `showPicker()` API first. On iOS Safari (where
+    // `showPicker` is not reliably implemented and frequently throws), fall
+    // back to dispatching a click on the input element — iOS Safari opens its
+    // native time picker in response to a user-initiated click on the input.
+    const triggerPicker = useCallback(() => {
+        const input = inputRef.current;
+        if (!input || disabled)
+            return;
+        if (typeof input.showPicker === 'function') {
+            try {
+                input.showPicker();
+                return;
+            }
+            catch {
+                // Fall through to the click fallback below.
+            }
+        }
+        input.click();
+    }, [disabled]);
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { className: cx(classes.root, 'mfui-TimePicker__root', className), children: [_jsx("input", { ...inputProps, ref: mergedInputRef, type: "time", className: cx(classes.input, 'mfui-TimePicker__input'), value: value, defaultValue: defaultValue, disabled: disabled, step: resolvedStep, "aria-invalid": invalid || undefined, onChange: (event) => {
+                        setInternalValue(event.target.value);
+                        onChange?.(event.target.value, event);
+                    } }), hasValue && !disabled ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TimePicker__clearButton'), disabled: disabled, onClick: handleClear })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": pickerLabel, className: cx(classes.pickerButton, 'mfui-TimePicker__pickerButton'), disabled: disabled, onClick: () => {
+                        triggerPicker();
+                    }, children: _jsx(Time, {}) })] }) }));
+});