@moneyforward/mfui-components 3.20.0 → 3.21.0

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

@@ -0,0 +1,61 @@
+import { type ComponentPropsWithoutRef, type MouseEvent, type SyntheticEvent } from 'react';
+import { type IconButtonProps } from '../../IconButton';
+type TimePickerOwnProps = {
+    /**
+     * Callback fired when the time value changes.
+     *
+     * @param value - The new time string (e.g., `"09:30"`) — empty string when cleared.
+     *
+     * @param event - The originating event. A `ChangeEvent<HTMLInputElement>` for
+     * input typing, a `MouseEvent` from the clear button when the value is cleared.
+     */
+    onChange?: (value: string, event: SyntheticEvent) => void;
+    /**
+     * The display and input format. Drives the granularity of the underlying
+     * `<input type="time">` by setting `step=1` for seconds.
+     *
+     * **iOS Safari limitation**: iOS Safari ignores the `step` attribute on
+     * `<input type="time">`, so the seconds segment is never rendered or
+     * editable there. Setting `format="HH:mm:ss"` on iOS Safari still produces
+     * an HH:mm-only input; consumers that need seconds on iOS must collect
+     * them through a separate control.
+     *
+     * @default 'HH:mm'
+     */
+    format?: 'HH:mm' | 'HH:mm:ss';
+    /**
+     * Size variant matching the Figma trigger: small (24px) / medium (32px) / large (48px).
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the input is invalid (applies error border + sets `aria-invalid`).
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Props for the clear IconButton. Use `aria-label` to override the default
+     * accessible name.
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+    /**
+     * Props for the picker indicator IconButton (the clock icon). Use `aria-label`
+     * to override the default accessible name.
+     */
+    pickerIndicatorIconButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+};
+/**
+ * `TimePicker` is a wrapper around `<input type="time">`, so it inherits the
+ * native input's attributes (`name`, `id`, `min`, `max`, `step`, `required`,
+ * `disabled`, `aria-*`, `onBlur`, `onFocus`, `className`, …) plus the
+ * component-specific props above. `onChange`, `size`, `type` and `aria-invalid`
+ * are intentionally omitted — they are owned by the component.
+ */
+export type TimePickerProps = Omit<ComponentPropsWithoutRef<'input'>, keyof TimePickerOwnProps | 'type' | 'aria-invalid'> & TimePickerOwnProps;
+export {};

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

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

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

@@ -0,0 +1,4 @@
+type TimePickerLabelKey = 'openPicker';
+export declare const TIME_PICKER_LABELS: Record<'ja' | 'en', Record<TimePickerLabelKey, string>>;
+export declare function getTimePickerLabel(locale: 'ja' | 'en', key: TimePickerLabelKey): string;
+export {};

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

@@ -0,0 +1,12 @@
+export const TIME_PICKER_LABELS = {
+    ja: {
+        openPicker: '時刻を開く',
+    },
+    en: {
+        openPicker: 'Open time picker',
+    },
+};
+export function getTimePickerLabel(locale, key) {
+    const safeLocale = locale in TIME_PICKER_LABELS ? locale : 'ja';
+    return TIME_PICKER_LABELS[safeLocale][key];
+}

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

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.types';

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

@@ -0,0 +1 @@
+export { TimePicker } from './TimePicker';

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

@@ -6,3 +6,4 @@ export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';
+export * from './TimePicker';

package/dist/src/DateTimeSelection/index.js

@@ -6,3 +6,4 @@ export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';
+export * from './TimePicker';

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

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -77,12 +77,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

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

@@ -270,6 +270,16 @@ export type BaseRangePickerProps = {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Custom function to format a Date value for display in the input fields.
+     * When provided, overrides the default dayjs formatting.
+     * Use this with `displayJapaneseCalendar` to show era-format strings in the inputs.
+     *
+     * @param date - The date to format
+     *
+     * @returns The formatted string to display
+     */
+    customFormatValue?: (date: Date) => string;
     /**
      * Controls which months are initially displayed in the two-panel calendar view.
      * - `'currentAndNext'`: Shows the value's start month on the left and the next month on the right.

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

@@ -5,7 +5,7 @@ import { flushSync } from 'react-dom';
 import { dayjs } from '../../../../utilities/date/dayjs';
 import { useUpdateEffect } from '../../../../utilities/effect/useUpdateEffect';
 import { useTransformedState } from '../../../../utilities/state/useTransformedState';
-import { parseInputDateSimple } from '../../utilities/dateParsing';
+import { parseInputDate } from '../../utilities/dateParsing';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
 // Normalizes a date to the first of the month
@@ -98,11 +98,12 @@ function autoCompletePartialRange(dates) {
     }
     return dates;
 }
-const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
+    const formatDate = useMemo(() => customFormatValue ?? ((d) => dayjs(d).format(format)), [customFormatValue, format]);
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
         const [startDate, endDate] = value ?? defaultValue ?? [undefined, undefined];
-        return [startDate ? dayjs(startDate).format(format) : '', endDate ? dayjs(endDate).format(format) : ''];
+        return [startDate ? formatDate(startDate) : '', endDate ? formatDate(endDate) : ''];
     });
     const [startDate, endDate] = value ?? dates;
     const [startDateString, endDateString] = dateStrings;
@@ -135,9 +136,9 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     useUpdateEffect(() => {
         if (value) {
             setDates(value);
-            setDateStrings([value[0] ? dayjs(value[0]).format(format) : '', value[1] ? dayjs(value[1]).format(format) : '']);
+            setDateStrings([value[0] ? formatDate(value[0]) : '', value[1] ? formatDate(value[1]) : '']);
         }
-    }, [value, format, setDates]);
+    }, [value, formatDate, setDates]);
     const handleChange = useCallback((newDates) => {
         let [newStartDate, newEndDate] = normalizeToStartOfDay(newDates);
         // Swap dates if start date is after end date
@@ -146,12 +147,9 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
         setDates([newStartDate, newEndDate]);
         // In uncontrolled mode, update dateStrings for input display
-        setDateStrings([
-            newStartDate ? dayjs(newStartDate).format(format) : '',
-            newEndDate ? dayjs(newEndDate).format(format) : '',
-        ]);
+        setDateStrings([newStartDate ? formatDate(newStartDate) : '', newEndDate ? formatDate(newEndDate) : '']);
         onChange?.([newStartDate, newEndDate]);
-    }, [onChange, format, setDates]);
+    }, [onChange, formatDate, setDates]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
         const proposedEndDate = nextEndDate !== undefined ? nextEndDate : endDate;
         // Apply auto-completion behavior when start date is set and end date is missing
@@ -177,13 +175,16 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const handleStartDateStringChange = useCallback((value) => {
         setDateStrings([value, endDateString]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = parseInputDateSimple(value, format);
-        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate, format)) {
-            setViewingMonth(parsedDate);
+        const parseResult = parseInputDate(value, format);
+        if (parseResult.isValid &&
+            parseResult.result &&
+            !isDateOutsideConstraints(parseResult.result, minDate, maxDate, format)) {
+            const newDate = parseResult.result;
+            setViewingMonth(newDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryStart(parsedDate);
+            setTemporaryStart(newDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(dayjs(parsedDate).format(pendingFocusDayjsFormat));
+            setPendingFocusDate(dayjs(newDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
@@ -203,13 +204,16 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const handleEndDateStringChange = useCallback((value) => {
         setDateStrings([startDateString, value]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = parseInputDateSimple(value, format);
-        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate, format)) {
-            setViewingMonth(parsedDate);
+        const parseResult = parseInputDate(value, format);
+        if (parseResult.isValid &&
+            parseResult.result &&
+            !isDateOutsideConstraints(parseResult.result, minDate, maxDate, format)) {
+            const newDate = parseResult.result;
+            setViewingMonth(newDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryEnd(parsedDate);
+            setTemporaryEnd(newDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(dayjs(parsedDate).format(pendingFocusDayjsFormat));
+            setPendingFocusDate(dayjs(newDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.types.d.ts

@@ -97,6 +97,15 @@ export type BaseRangePickerProviderProps = {
      * @internal
      */
     initialViewingDate?: Date;
+    /**
+     * Custom function to format a Date value for display in the input fields.
+     * When provided, overrides the default dayjs formatting.
+     *
+     * @param date - The date to format
+     *
+     * @returns The formatted string to display
+     */
+    customFormatValue?: (date: Date) => string;
     /**
      * dayjs format string for `pendingFocusDate` so it matches the focused grid cell's `data-mfui-*` attribute.
      *

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { dayjs } from '../../../../../utilities/date/dayjs';
+import { parseInputDate } from '../../../utilities/dateParsing';
 import { useBaseRangePickerContext } from '../../BaseRangePickerProvider';
-import { parseInputDateSimple } from '../../../utilities/dateParsing';
 const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
     ...baseProps,
     value,
@@ -16,12 +16,12 @@ const createInputProps = (baseProps, value, format, onStringChange, onDateChange
         if (event.defaultPrevented)
             return;
         baseProps.onBlur?.(event);
-        const parsedDate = parseInputDateSimple(value, format);
-        if (!parsedDate) {
+        const parseResult = parseInputDate(value, format);
+        if (!parseResult.isValid || !parseResult.result) {
             onDateChange(undefined, otherDate);
             return;
         }
-        const currentDate = dayjs(parsedDate).startOf('day').toDate();
+        const currentDate = dayjs(parseResult.result).startOf('day').toDate();
         // Check if the date is disabled due to constraints
         if (isDateDisabled?.(currentDate)) {
             // Clear the input if the date violates constraints

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

@@ -5,4 +5,4 @@ export declare function CalendarLocaleProvider({ value, children, }: {
     value: CalendarLocaleContextValue;
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useCalendarLocale(): CalendarLocaleContextValue;
+export declare function useCalendarLocale(): NonNullable<CalendarLocaleContextValue>;

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

@@ -6,5 +6,5 @@ export function CalendarLocaleProvider({ value, children, }) {
     return _jsx(CalendarLocaleContext.Provider, { value: value, children: children });
 }
 export function useCalendarLocale() {
-    return useContext(CalendarLocaleContext);
+    return useContext(CalendarLocaleContext) ?? 'ja';
 }

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

@@ -10,8 +10,7 @@ import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
 export function DayCell({ day }) {
     const calendarLocale = useCalendarLocale();
     const classNames = dayCellSlotRecipe();
-    const safeLocale = calendarLocale ?? 'ja';
-    const abbreviation = DAY_ABBREVIATIONS[safeLocale][day];
-    const fullName = DAY_FULL_NAMES[safeLocale][day];
+    const abbreviation = DAY_ABBREVIATIONS[calendarLocale][day];
+    const fullName = DAY_FULL_NAMES[calendarLocale][day];
     return (_jsx("div", { className: cx(classNames.root, 'mfui-DayCell__root'), "aria-label": fullName, children: _jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }) }));
 }

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

@@ -16,7 +16,7 @@ export function YearSelector({ value, onChange, filterYear, triggerProps, trigge
         const year = MINIMUM_VIEWABLE_YEAR + i;
         let label;
         if (displayJapaneseCalendar) {
-            label = yearToEraLabel(year, calendarLocale ?? 'ja');
+            label = yearToEraLabel(year, calendarLocale);
         }
         else if (calendarLocale === 'ja') {
             label = `${String(year)}年`;

package/dist/src/DateTimeSelection/shared/utilities/dateParsing.js

@@ -20,16 +20,23 @@ export function parseInputDate(inputString, format) {
     // Use the refined Japanese era detection from japaneseCalendar utility
     const hasJapaneseEra = isJapaneseEraFormat(inputString);
     if (hasJapaneseEra) {
-        // Try Japanese calendar parsing for era formats
-        try {
-            const jpResult = warekiToDate(inputString);
-            if (jpResult.isValid) {
-                return { isValid: true, result: jpResult.result };
+        // Skip month-only wareki parsing when the format requires a day component.
+        // e.g. "令和7年1月" should not parse for YYYY/MM/DD — the user hasn't typed the day yet.
+        const isMonthOnlyEra = inputString.trimEnd().endsWith('月');
+        const formatRequiresDay = format.includes('D');
+        const shouldTryWareki = !(isMonthOnlyEra && formatRequiresDay);
+        if (shouldTryWareki) {
+            // Try Japanese calendar parsing for era formats
+            try {
+                const jpResult = warekiToDate(inputString);
+                if (jpResult.isValid) {
+                    return { isValid: true, result: jpResult.result };
+                }
+            }
+            catch (error) {
+                // If Japanese calendar parsing fails, fall back to dayjs
+                console.warn('Japanese calendar parsing failed:', error);
             }
-        }
-        catch (error) {
-            // If Japanese calendar parsing fails, fall back to dayjs
-            console.warn('Japanese calendar parsing failed:', error);
         }
     }
     // Try dayjs parsing for Western calendar format first

package/dist/src/DateTimeSelection/shared/utilities/japaneseCalendar.d.ts

@@ -1,8 +1,8 @@
-declare const REIWA: "\u4EE4\u548C";
-declare const HEISEI: "\u5E73\u6210";
-declare const SHOWA: "\u662D\u548C";
-declare const TAISHO: "\u5927\u6B63";
-declare const MEIJI: "\u660E\u6CBB";
+declare const REIWA = "\u4EE4\u548C";
+declare const HEISEI = "\u5E73\u6210";
+declare const SHOWA = "\u662D\u548C";
+declare const TAISHO = "\u5927\u6B63";
+declare const MEIJI = "\u660E\u6CBB";
 type Geongo = typeof REIWA | typeof HEISEI | typeof SHOWA | typeof TAISHO | typeof MEIJI;
 declare const WAREKI_START_YEARS: {
     readonly r: 2019;
@@ -64,13 +64,41 @@ export declare function isJapaneseEraFormat(inputString: string): boolean;
 export declare function yearToEraLabel(year: number, locale: 'ja' | 'en'): string;
 /**
  * Formats a Date to a short English era string for display in the DatePicker trigger input.
- * Format: "{EraName} {eraYear}/{month}/{day}" (e.g., "Reiwa 7/12/25").
- * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/12/25").
+ * Format: "{EraName} {eraYear}/{MM}/{DD}" (e.g., "Reiwa 7/03/06").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03/06").
  *
  * @param date - The date to format
  *
- * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ * @returns Short English era string (e.g., "Reiwa 7/03/06")
  */
 export declare function dateToEnglishEraShort(date: Date): string;
+/**
+ * Formats a Date to a short English era string for display in the MonthPicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}" (e.g., "Reiwa 7/03").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era month string (e.g., "Reiwa 7/03")
+ */
+export declare function dateToEnglishEraMonthShort(date: Date): string;
+/**
+ * Formats a Date to a Japanese-era string with day precision (e.g., "令和7年3月6日").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era string with day (e.g., "令和7年3月6日")
+ */
+export declare function dateToJapaneseEra(date: Date): string;
+/**
+ * Formats a Date to a Japanese-era string with month precision (e.g., "令和7年3月").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era month string (e.g., "令和7年3月")
+ */
+export declare function dateToJapaneseEraMonth(date: Date): string;
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };
 export type { WarekiResult };

package/dist/src/DateTimeSelection/shared/utilities/japaneseCalendar.js

@@ -38,8 +38,8 @@ const WAREKI_START_YEARS = {
 const warekiReg = {
     // Western calendar: supports full-width numbers and flexible separators
     dateString: new RegExp(String.raw `^([0-9０-９]{4})${WESTERN_SEPARATOR}([0-9０-９]{1,2})${WESTERN_SEPARATOR}([0-9０-９]{1,2})(?:[\s．]([0-9０-９]{2}):([0-9０-９]{2}))?$`),
-    // Japanese era: supports both traditional (H12年2月12日) and Western-style (H12.2.12) formats
-    wareki: new RegExp(String.raw `^(${Object.keys(WAREKI_START_YEARS).join('|')})(元|[0-9０-９]{1,2})(?:年([0-9０-９]{1,2})月([0-9０-９]{1,2})日|[./-]([0-9０-９]{1,2})[./-]([0-9０-９]{1,2}))$`),
+    // Japanese era: supports traditional (H12年2月12日), Western-style (H12.2.12), and month-only (H12年2月) formats
+    wareki: new RegExp(String.raw `^(${Object.keys(WAREKI_START_YEARS).join('|')})(元|[0-9０-９]{1,2})(?:年([0-9０-９]{1,2})月([0-9０-９]{1,2})日|[./-]([0-9０-９]{1,2})[./-]([0-9０-９]{1,2})|年([0-9０-９]{1,2})月)$`),
     // Era detection for both traditional and Western-style formats
     eraDetection: /^(?:令和|平成|昭和|大正|明治|[rhstmRHSTM])(?:元|[0-9０-９]{1,2})(?:年|[./-])/,
 };
@@ -137,11 +137,12 @@ export function warekiToDate(wareki) {
         const baseYear = WAREKI_START_YEARS[matchedWareki[1]];
         // Handle "元" (first year) and regular years
         const eraYear = matchedWareki[2] === '元' ? 1 : Number(matchedWareki[2]);
-        // Handle both traditional (年月日) and Western-style (./- separators) formats
+        // Handle traditional (年月日), Western-style (./- separators), and month-only (年月) formats
         // Traditional format: groups 3,4 (month, day)
         // Western format: groups 5,6 (month, day)
-        const month = Number(matchedWareki[3] || matchedWareki[5]);
-        const day = Number(matchedWareki[4] || matchedWareki[6]);
+        // Month-only format: group 7 (month), day defaults to 1
+        const month = Number(matchedWareki[3] || matchedWareki[5] || matchedWareki[7]);
+        const day = matchedWareki[7] !== undefined ? 1 : Number(matchedWareki[4] || matchedWareki[6]);
         // Validation: ensure era year is reasonable (1-200 years per era)
         if (eraYear < 1 || eraYear > 200) {
             return {
@@ -240,24 +241,90 @@ export function yearToEraLabel(year, locale) {
     return `${gengo}${eraYear === 1 ? '元' : String(eraYear)}年`;
 }
 /**
- * Formats a Date to a short English era string for display in the DatePicker trigger input.
- * Format: "{EraName} {eraYear}/{month}/{day}" (e.g., "Reiwa 7/12/25").
- * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/12/25").
+ * Internal helper used by `dateToEnglishEraShort` and `dateToEnglishEraMonthShort`.
+ * Pre-Meiji dates (year < 1868) fall back to the Gregorian year.
  *
  * @param date - The date to format
  *
- * @returns Short English era string (e.g., "Reiwa 7/12/25")
+ * @param options - Format options. `includeDay: true` produces "{Era} {Y}/{MM}/{DD}";
+ *   `includeDay: false` produces "{Era} {Y}/{MM}" and resolves the era using day 1.
+ *
+ * @returns Formatted English era string
  */
-export function dateToEnglishEraShort(date) {
+function dateToEnglishEra(date, { includeDay }) {
     const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
+    const monthNum = date.getMonth() + 1;
+    const dayNum = date.getDate();
+    const month = String(monthNum).padStart(2, '0');
+    const daySuffix = includeDay ? `/${String(dayNum).padStart(2, '0')}` : '';
     if (year < MEIJI_START_YEAR) {
-        return `${String(year)}/${String(month)}/${String(day)}`;
+        return `${String(year)}/${month}${daySuffix}`;
     }
-    const gengo = selectGengo(year, month, day);
+    // Month-only outputs resolve the era using day 1, which means the transition month
+    // keeps the older era label (e.g., Dec 1926 → Taisho 15/12, not Showa 1/12).
+    const gengo = selectGengo(year, monthNum, includeDay ? dayNum : 1);
     const eraYear = year - WAREKI_START_YEARS[gengo] + 1;
-    return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}/${String(month)}/${String(day)}`;
+    return `${ERA_NAMES_EN[gengo]} ${String(eraYear)}/${month}${daySuffix}`;
+}
+/**
+ * Formats a Date to a short English era string for display in the DatePicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}/{DD}" (e.g., "Reiwa 7/03/06").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03/06").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era string (e.g., "Reiwa 7/03/06")
+ */
+export function dateToEnglishEraShort(date) {
+    return dateToEnglishEra(date, { includeDay: true });
+}
+/**
+ * Formats a Date to a short English era string for display in the MonthPicker trigger input.
+ * Format: "{EraName} {eraYear}/{MM}" (e.g., "Reiwa 7/03").
+ * For pre-Meiji dates (year < 1868): falls back to the Gregorian year (e.g., "1867/03").
+ *
+ * @param date - The date to format
+ *
+ * @returns Short English era month string (e.g., "Reiwa 7/03")
+ */
+export function dateToEnglishEraMonthShort(date) {
+    return dateToEnglishEra(date, { includeDay: false });
+}
+// Cached Intl formatters for the Japanese era (wareki) — module-level so the
+// formatter instances are reused across components instead of being created
+// inside each `useMemo`.
+const japaneseEraDateFormatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+    era: 'long',
+    year: 'numeric',
+    month: 'narrow',
+    day: 'numeric',
+});
+const japaneseEraMonthFormatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
+    era: 'long',
+    year: 'numeric',
+    month: 'narrow',
+});
+/**
+ * Formats a Date to a Japanese-era string with day precision (e.g., "令和7年3月6日").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era string with day (e.g., "令和7年3月6日")
+ */
+export function dateToJapaneseEra(date) {
+    return japaneseEraDateFormatter.format(date);
+}
+/**
+ * Formats a Date to a Japanese-era string with month precision (e.g., "令和7年3月").
+ * Uses the platform's built-in `ja-JP-u-ca-japanese` calendar.
+ *
+ * @param date - The date to format
+ *
+ * @returns Japanese era month string (e.g., "令和7年3月")
+ */
+export function dateToJapaneseEraMonth(date) {
+    return japaneseEraMonthFormatter.format(date);
 }
 // Export the utility functions and constants
 export { warekiReg, dateToWareki, fullWidthToHalfWidth, selectGengo, WAREKI_START_YEARS };

package/dist/src/DateTimeSelection/shared/utilities/monthCellMonthFormat.d.ts

@@ -0,0 +1,14 @@
+import { type BasePickerProps } from '../BasePicker/BasePicker.types';
+/**
+ * dayjs format string for the visible month label in {@link MonthCell} (`monthLabel`),
+ * based on calendar locale (Japanese `M月` vs English three-letter abbreviations).
+ *
+ * @param calendarLocale - The calendar locale (`'ja'` or `'en'`) — selects between
+ *   Japanese (`M月`) and English (`[Jan]`–`[Dec]`) abbreviations
+ *
+ * @param date - The date whose month index selects the English abbreviation.
+ *   Only consulted when `calendarLocale === 'en'`.
+ *
+ * @returns A dayjs-compatible format string for the month label
+ */
+export declare function getMonthCellMonthFormat(calendarLocale: BasePickerProps['calendarLocale'], date: Date): string;

package/dist/src/DateTimeSelection/shared/utilities/monthCellMonthFormat.js

@@ -0,0 +1,35 @@
+// 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]',
+];
+/**
+ * dayjs format string for the visible month label in {@link MonthCell} (`monthLabel`),
+ * based on calendar locale (Japanese `M月` vs English three-letter abbreviations).
+ *
+ * @param calendarLocale - The calendar locale (`'ja'` or `'en'`) — selects between
+ *   Japanese (`M月`) and English (`[Jan]`–`[Dec]`) abbreviations
+ *
+ * @param date - The date whose month index selects the English abbreviation.
+ *   Only consulted when `calendarLocale === 'en'`.
+ *
+ * @returns A dayjs-compatible format string for the month label
+ */
+export function getMonthCellMonthFormat(calendarLocale, date) {
+    if (calendarLocale === 'en') {
+        // Date.getMonth() always returns 0–11, so the array access is safe.
+        const monthIndex = date.getMonth();
+        return ENGLISH_MONTH_ABBREVIATIONS[monthIndex];
+    }
+    return 'M月';
+}

package/dist/styled-system/recipes/index.d.ts

@@ -70,6 +70,7 @@ export * from './status-label-slot-recipe';
 export * from './month-cell-slot-recipe';
 export * from './month-grid-slot-recipe';
 export * from './month-picker-panel-slot-recipe';
+export * from './time-picker-slot-recipe';
 export * from './skeleton-slot-recipe';
 export * from './checkbox-group-slot-recipe';
 export * from './multiple-filter-select-box-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -69,6 +69,7 @@ export * from './status-label-slot-recipe.js';
 export * from './month-cell-slot-recipe.js';
 export * from './month-grid-slot-recipe.js';
 export * from './month-picker-panel-slot-recipe.js';
+export * from './time-picker-slot-recipe.js';
 export * from './skeleton-slot-recipe.js';
 export * from './checkbox-group-slot-recipe.js';
 export * from './multiple-filter-select-box-slot-recipe.js';