@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,38 @@
+export const LABEL_PREV_YEAR = '前の年'; // Previous year
+export const LABEL_NEXT_YEAR = '次の年'; // Next year
+export const LABEL_OPEN_CALENDAR = 'カレンダーを開く'; // Open calendar
+export const LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる'; // Close calendar
+/**
+ * Localized labels for MonthPicker navigation buttons
+ */
+export const MONTH_PICKER_LABELS = {
+    ja: {
+        prevYear: '前の年',
+        nextYear: '次の年',
+    },
+    en: {
+        prevYear: 'Previous year',
+        nextYear: 'Next year',
+    },
+};
+/**
+ * Get a localized label for MonthPicker
+ *
+ * @param locale - The locale to use ('ja' or 'en')
+ *
+ * @param key - The label key to retrieve
+ *
+ * @returns The localized label string
+ */
+export function getMonthPickerLabel(locale, key) {
+    const safeLocale = locale in MONTH_PICKER_LABELS ? locale : 'ja';
+    return MONTH_PICKER_LABELS[safeLocale][key];
+}
+/**
+ * The minimum viewable year in the year selector
+ */
+export const MINIMUM_VIEWABLE_YEAR = 1800;
+/**
+ * The maximum viewable year in the year selector
+ */
+export const MAXIMUM_VIEWABLE_YEAR = 2099;

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

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

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

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

package/dist/esm/src/DateTimeSelection/MonthPicker/utilities/useMonthPickerKeyboardNavigation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook for handling keyboard navigation in MonthPickerMonthCell
+ *
+ * @param onKeyDown - Optional callback for additional key handling
+ *
+ * @param minMonth - The minimum selectable month
+ *
+ * @param maxMonth - The maximum selectable month
+ *
+ * @param checkDisabledMonth - Function to check if a month should be disabled
+ *
+ * @returns A keyboard event handler for month navigation
+ */
+export declare function useMonthPickerKeyboardNavigation(onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>, minMonth?: Date, maxMonth?: Date, checkDisabledMonth?: (date: Date) => boolean): import("react").KeyboardEventHandler<HTMLButtonElement>;

package/dist/esm/src/DateTimeSelection/MonthPicker/utilities/useMonthPickerKeyboardNavigation.js

@@ -0,0 +1,100 @@
+import { useCallback } from 'react';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
+import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from '../constants';
+/**
+ * Hook for handling keyboard navigation in MonthPickerMonthCell
+ *
+ * @param onKeyDown - Optional callback for additional key handling
+ *
+ * @param minMonth - The minimum selectable month
+ *
+ * @param maxMonth - The maximum selectable month
+ *
+ * @param checkDisabledMonth - Function to check if a month should be disabled
+ *
+ * @returns A keyboard event handler for month navigation
+ */
+export function useMonthPickerKeyboardNavigation(onKeyDown, minMonth, maxMonth, checkDisabledMonth) {
+    const { viewingValue, setViewingValue, setPendingFocusDate, baseFormat } = useBasePickerContext();
+    const isMonthDisabled = useCallback((date) => {
+        // Check year boundaries
+        const year = date.year();
+        const isYearBelowMinimum = year < MINIMUM_VIEWABLE_YEAR;
+        const isYearAboveMaximum = year > MAXIMUM_VIEWABLE_YEAR;
+        if (isYearBelowMinimum || isYearAboveMaximum) {
+            return true;
+        }
+        // Check minMonth constraint
+        if (minMonth) {
+            const minMonthStart = dayjs(minMonth).startOf('month');
+            if (date.startOf('month').isBefore(minMonthStart)) {
+                return true;
+            }
+        }
+        // Check maxMonth constraint
+        if (maxMonth) {
+            const maxMonthStart = dayjs(maxMonth).startOf('month');
+            if (date.startOf('month').isAfter(maxMonthStart)) {
+                return true;
+            }
+        }
+        // Check custom disabled logic
+        if (checkDisabledMonth) {
+            const monthDate = date.startOf('month').toDate();
+            if (checkDisabledMonth(monthDate)) {
+                return true;
+            }
+        }
+        return false;
+    }, [minMonth, maxMonth, checkDisabledMonth]);
+    return useCallback((event) => {
+        const { key, currentTarget } = event;
+        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if (!allowedKeys.includes(key)) {
+            onKeyDown?.(event);
+            return;
+        }
+        const currentMonth = currentTarget.dataset['mfuiMonth'];
+        if (!currentMonth)
+            return;
+        const currentDayjs = dayjs(currentMonth);
+        // Prevent screen scrolling when changing focus
+        event.preventDefault();
+        // Handle month navigation
+        let targetDate = currentDayjs;
+        switch (key) {
+            case 'ArrowLeft':
+                targetDate = currentDayjs.subtract(1, 'month');
+                break;
+            case 'ArrowRight':
+                targetDate = currentDayjs.add(1, 'month');
+                break;
+            case 'ArrowUp':
+                targetDate = currentDayjs.subtract(3, 'month');
+                break;
+            case 'ArrowDown':
+                targetDate = currentDayjs.add(3, 'month');
+                break;
+        }
+        // Check if target month is disabled by constraints
+        if (isMonthDisabled(targetDate)) {
+            return; // Don't navigate to disabled months
+        }
+        const targetYear = targetDate.format('YYYY');
+        const currentYear = dayjs(viewingValue).format('YYYY');
+        if (targetYear !== currentYear) {
+            // If target date is in a different year, update viewingValue and set pending focus
+            setViewingValue(targetDate.toDate());
+            setPendingFocusDate(targetDate.format(baseFormat));
+        }
+        else {
+            // Focus the target month if it exists and is not disabled
+            const targetCell = document.querySelector(`[data-mfui-month="${targetDate.format(baseFormat)}"]`);
+            if (targetCell && !targetCell.disabled) {
+                targetCell.focus();
+            }
+        }
+        onKeyDown?.(event);
+    }, [viewingValue, setViewingValue, setPendingFocusDate, onKeyDown, baseFormat, isMonthDisabled]);
+}

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

@@ -0,0 +1,17 @@
+import { type MonthRangePickerProps } from './MonthRangePicker.types';
+/**
+ * MonthRangePicker component for selecting month ranges.
+ *
+ * @param props - MonthRangePicker props including month-specific constraints
+ *
+ * @example
+ * ```tsx
+ * <MonthRangePicker
+ *   value={[startMonth, endMonth]}
+ *   onChange={([start, end]) => console.log('Selected range:', start, end)}
+ *   minMonth={new Date(2020, 0, 1)}
+ *   maxMonth={new Date(2030, 11, 1)}
+ * />
+ * ```
+ */
+export declare function MonthRangePicker({ format, minMonth, maxMonth, startInputProps, endInputProps, ...restProps }: MonthRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MonthRangePicker component
+ *
+ * A month range picker component that allows users to select a range of months.
+ * Built on top of BaseRangePicker with month-specific functionality and constraints.
+ *
+ * Features:
+ * - Month-specific range selection with visual feedback
+ * - Year navigation controls
+ * - Month constraints (min/max/disabled)
+ * - Keyboard navigation support
+ * - Apply/Cancel workflow
+ */
+import { BaseRangePicker } from '../shared/BaseRangePicker';
+import { MonthRangePickerPanel } from './MonthRangePickerPanel';
+/**
+ * MonthRangePicker component for selecting month ranges.
+ *
+ * @param props - MonthRangePicker props including month-specific constraints
+ *
+ * @example
+ * ```tsx
+ * <MonthRangePicker
+ *   value={[startMonth, endMonth]}
+ *   onChange={([start, end]) => console.log('Selected range:', start, end)}
+ *   minMonth={new Date(2020, 0, 1)}
+ *   maxMonth={new Date(2030, 11, 1)}
+ * />
+ * ```
+ */
+export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, ...restProps }) {
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, startInputProps: {
+            placeholder: '開始月',
+            ...startInputProps,
+        }, endInputProps: {
+            placeholder: '終了月',
+            ...endInputProps,
+        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", renderPopoverContent: ({ viewingValue, setViewingValue, value }) => (_jsx(MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth })) }));
+}

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

@@ -0,0 +1,28 @@
+import { type BaseRangePickerProps } from '../shared/BaseRangePicker';
+/**
+ * The props for the MonthRangePicker component
+ */
+export type MonthRangePickerProps = BaseRangePickerProps & {
+    /**
+     * The minimum selectable month.
+     * Months before this value will be disabled.
+     *
+     * @example
+     * ```tsx
+     * // Disable months before January 2020
+     * <MonthRangePicker minMonth={new Date(2020, 0, 1)} />
+     * ```
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this value will be disabled.
+     *
+     * @example
+     * ```tsx
+     * // Disable months after December 2030
+     * <MonthRangePicker maxMonth={new Date(2030, 11, 1)} />
+     * ```
+     */
+    maxMonth?: Date;
+};

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

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

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

@@ -0,0 +1,10 @@
+import { type MonthRangePickerContentProps } from './MonthRangePickerContent.types';
+/**
+ * MonthRangePickerContent component for dual-panel month grid layout.
+ *
+ * Renders two side-by-side month grids for the current and next year,
+ * matching the DateRangePickerPopover's dual-panel calendar layout.
+ *
+ * @param props - MonthRangePickerContent props
+ */
+export declare function MonthRangePickerContent({ viewingValue, value, minMonth, maxMonth, handleKeyboardNavigation, }: MonthRangePickerContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cx } from '../../../../styled-system/css';
+import { monthRangePickerContentSlotRecipe } from '../../../../styled-system/recipes';
+import { MonthRangePickerMonthGrid } from '../MonthRangePickerMonthGrid';
+/**
+ * MonthRangePickerContent component for dual-panel month grid layout.
+ *
+ * Renders two side-by-side month grids for the current and next year,
+ * matching the DateRangePickerPopover's dual-panel calendar layout.
+ *
+ * @param props - MonthRangePickerContent props
+ */
+export function MonthRangePickerContent({ viewingValue, value, minMonth, maxMonth, handleKeyboardNavigation, }) {
+    const currentYear = viewingValue.getFullYear();
+    const nextYear = currentYear + 1;
+    // Create dates for the two year panels
+    const currentYearDate = useMemo(() => new Date(currentYear, 0, 1), [currentYear]);
+    const nextYearDate = useMemo(() => new Date(nextYear, 0, 1), [nextYear]);
+    const classNames = monthRangePickerContentSlotRecipe();
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerContent__root'), children: [_jsx(MonthRangePickerMonthGrid, { viewingValue: currentYearDate, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(MonthRangePickerMonthGrid, { viewingValue: nextYearDate, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }));
+}

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

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * MonthRangePickerContent component props.
+ *
+ * The MonthRangePickerContent component renders dual-panel month grids
+ * for range selection, matching DateRangePickerPopover's layout.
+ */
+export type MonthRangePickerContentProps = {
+    /**
+     * The current viewing value (year) for the month range picker.
+     */
+    viewingValue: Date;
+    /**
+     * The selected range value as [startMonth, endMonth].
+     */
+    value?: [Date | undefined, Date | undefined];
+    /**
+     * The minimum selectable month.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     */
+    maxMonth?: Date;
+    /**
+     * Handler for keyboard navigation events.
+     */
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+} & ComponentPropsWithoutRef<'div'>;

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerContent/MonthRangePickerContent.types.js

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

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerContent/index.d.ts

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

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerContent/index.js

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

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

@@ -0,0 +1,15 @@
+import { type MonthRangePickerMonthCellProps } from './MonthRangePickerMonthCell.types';
+/**
+ * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
+ *
+ * This component provides visual feedback for:
+ * - Range start and end months
+ * - Months in between the selected range
+ * - Hover preview during range selection
+ *
+ * The actual range selection logic is handled by the parent components through
+ * the BaseRangePickerProvider context.
+ *
+ * @param props - MonthRangePickerMonthCell props
+ */
+export declare function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }: MonthRangePickerMonthCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MonthCell } from '../../shared/MonthCell';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
+/**
+ * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
+ *
+ * This component provides visual feedback for:
+ * - Range start and end months
+ * - Months in between the selected range
+ * - Hover preview during range selection
+ *
+ * The actual range selection logic is handled by the parent components through
+ * the BaseRangePickerProvider context.
+ *
+ * @param props - MonthRangePickerMonthCell props
+ */
+export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }) {
+    // Calculate if this month is selected (either start or end of range)
+    const selected = isRangeStart || isRangeEnd || monthCellProps.selected || false;
+    // Create accessible label for range selection
+    const accessibleLabel = useMemo(() => {
+        const monthText = dayjs(monthCellProps.date).format('MMMM YYYY');
+        const statusParts = [];
+        if (monthCellProps.disabled) {
+            statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
+        }
+        else if (selected) {
+            if (isRangeStart) {
+                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_START);
+            }
+            else if (isRangeEnd) {
+                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_END);
+            }
+            else {
+                statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.SELECTED);
+            }
+        }
+        else if (isInRange) {
+            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 }) }));
+}

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

@@ -0,0 +1,30 @@
+import { type MonthCellProps } from '../../shared/MonthCell/MonthCell.types';
+/**
+ * Props for MonthRangePickerMonthCell component
+ */
+export type MonthRangePickerMonthCellProps = MonthCellProps & {
+    /**
+     * Whether this month is within the selected range (between start and end)
+     */
+    isInRange?: boolean;
+    /**
+     * Whether this month is the start of the selected range
+     */
+    isRangeStart?: boolean;
+    /**
+     * Whether this month is the end of the selected range
+     */
+    isRangeEnd?: boolean;
+    /**
+     * Handler for mouse enter events (for hover preview)
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Handler for mouse leave events (for hover preview)
+     */
+    onMouseLeave?: () => void;
+    /**
+     * Handler for keyboard navigation events.
+     */
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+};

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * Default Japanese accessibility labels for MonthRangePicker
+ * These constants provide consistent Japanese text for screen readers.
+ * Matches the DateRangePicker labels for consistency.
+ */
+export declare const MONTH_RANGE_PICKER_A11Y_LABELS: {
+    /** Label for selected months */
+    readonly SELECTED: "選択済み";
+    /** Label for months in the selected range */
+    readonly IN_RANGE: "選択範囲内";
+    /** Label for unavailable/disabled months */
+    readonly UNAVAILABLE: "無効";
+    /** Label for range start months */
+    readonly RANGE_START: "範囲開始";
+    /** Label for range end months */
+    readonly RANGE_END: "範囲終了";
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Default Japanese accessibility labels for MonthRangePicker
+ * These constants provide consistent Japanese text for screen readers.
+ * Matches the DateRangePicker labels for consistency.
+ */
+export const MONTH_RANGE_PICKER_A11Y_LABELS = {
+    /** Label for selected months */
+    SELECTED: '選択済み',
+    /** Label for months in the selected range */
+    IN_RANGE: '選択範囲内',
+    /** Label for unavailable/disabled months */
+    UNAVAILABLE: '無効',
+    /** Label for range start months */
+    RANGE_START: '範囲開始',
+    /** Label for range end months */
+    RANGE_END: '範囲終了',
+};

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { type MonthRangePickerMonthGridProps } from './MonthRangePickerMonthGrid.types';
+/**
+ * MonthRangePickerMonthGrid component that integrates MonthGrid with range selection logic.
+ *
+ * This component:
+ * - Uses the shared MonthGrid for layout and basic month logic
+ * - Integrates with BaseRangePickerProvider for range selection state
+ * - Provides custom MonthRangePickerMonthCell with range visual states
+ * - Handles month click and hover events for range selection
+ *
+ * @param props - MonthRangePickerMonthGrid props
+ */
+export declare function MonthRangePickerMonthGrid({ viewingValue, minMonth, maxMonth, handleKeyboardNavigation, }: MonthRangePickerMonthGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonthGrid } from '../../shared/MonthGrid';
+import { MonthRangePickerMonthCell } from '../MonthRangePickerMonthCell';
+import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+/**
+ * MonthRangePickerMonthGrid component that integrates MonthGrid with range selection logic.
+ *
+ * This component:
+ * - Uses the shared MonthGrid for layout and basic month logic
+ * - Integrates with BaseRangePickerProvider for range selection state
+ * - Provides custom MonthRangePickerMonthCell with range visual states
+ * - Handles month click and hover events for range selection
+ *
+ * @param props - MonthRangePickerMonthGrid props
+ */
+export function MonthRangePickerMonthGrid({ viewingValue, minMonth, maxMonth, handleKeyboardNavigation, }) {
+    // Access range selection context
+    const { handleDateClick, handlePreview, clearPreview, isInRange, isRangeStart, isRangeEnd, pendingFocusDate, setPendingFocusDate, } = useBaseRangePickerContext();
+    // Render custom month cell with range selection logic
+    const renderMonthCell = (props) => (_jsx(MonthRangePickerMonthCell, { ...props, handleKeyboardNavigation: handleKeyboardNavigation, 
+        // Range selection states
+        isInRange: isInRange(props.date), isRangeStart: isRangeStart(props.date), isRangeEnd: isRangeEnd(props.date), 
+        // Range selection handlers
+        onMouseEnter: () => {
+            handlePreview(props.date);
+        }, onMouseLeave: clearPreview, onClick: (event) => {
+            // Call range selection handler
+            handleDateClick(props.date);
+            // Also call the original onClick if it exists
+            props.onClick?.(event);
+        } }));
+    return (_jsx(MonthGrid, { year: viewingValue.getFullYear(), selectedMonth: undefined, minMonth: minMonth, maxMonth: maxMonth, renderMonthCell: renderMonthCell, pendingFocusMonth: pendingFocusDate ?? undefined, onMonthSelect: undefined, onPendingFocusMonthChange: setPendingFocusDate }));
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Props for MonthRangePickerMonthGrid component
+ */
+export type MonthRangePickerMonthGridProps = {
+    /**
+     * Current viewing year (determines which year of months to display)
+     */
+    viewingValue: Date;
+    /**
+     * Current selected range [start, end]
+     * Used for visual feedback but actual selection is managed by context
+     */
+    value?: [Date | undefined, Date | undefined];
+    /**
+     * The minimum selectable month.
+     * Months before this value will be disabled.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this value will be disabled.
+     */
+    maxMonth?: Date;
+    /**
+     * Handler for keyboard navigation events.
+     */
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+};

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthGrid/MonthRangePickerMonthGrid.types.js

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

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthGrid/index.d.ts

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

package/dist/esm/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthGrid/index.js

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

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

@@ -0,0 +1,12 @@
+import { type MonthRangePickerNavigationProps } from './MonthRangePickerNavigation.types';
+/**
+ * Year navigation component for MonthRangePicker.
+ *
+ * Provides dual-column navigation layout matching DateRangePickerPopover:
+ * - Left column: Previous year button + Current year + Placeholder
+ * - Right column: Placeholder + Next year + Next year button
+ * Navigation is disabled based on min/max month constraints.
+ *
+ * @param props - MonthRangePickerNavigation props
+ */
+export declare function MonthRangePickerNavigation({ viewingValue, setViewingValue, minMonth, maxMonth, }: MonthRangePickerNavigationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { PickerAfter, PickerBefore } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../../../styled-system/css';
+import { monthRangePickerNavigationSlotRecipe } from '../../../../styled-system/recipes';
+import { IconButton } from '../../../IconButton';
+import { Typography } from '../../../Typography';
+// Constants for year navigation limits
+const MINIMUM_VIEWABLE_YEAR = 1900;
+const MAXIMUM_VIEWABLE_YEAR = 2100;
+const LABEL_PREV_YEAR = '前年';
+const LABEL_NEXT_YEAR = '翌年';
+/**
+ * Year navigation component for MonthRangePicker.
+ *
+ * Provides dual-column navigation layout matching DateRangePickerPopover:
+ * - Left column: Previous year button + Current year + Placeholder
+ * - Right column: Placeholder + Next year + Next year button
+ * Navigation is disabled based on min/max month constraints.
+ *
+ * @param props - MonthRangePickerNavigation props
+ */
+export function MonthRangePickerNavigation({ viewingValue, setViewingValue, minMonth, maxMonth, }) {
+    const currentYear = viewingValue.getFullYear();
+    const nextYear = currentYear + 1;
+    // Calculate if year navigation should be disabled based on min/max constraints
+    const { isPreviousYearDisabled, isNextYearDisabled } = useMemo(() => {
+        const baseMinYearDisabled = currentYear <= MINIMUM_VIEWABLE_YEAR;
+        const baseMaxYearDisabled = nextYear >= MAXIMUM_VIEWABLE_YEAR;
+        // Check if previous year would have any valid months
+        let minConstraintPreviousDisabled = false;
+        if (minMonth) {
+            const minYear = minMonth.getFullYear();
+            const previousYear = currentYear - 1;
+            // Previous year is disabled if it's before the minMonth year
+            minConstraintPreviousDisabled = previousYear < minYear;
+        }
+        // Check if next year would have any valid months
+        let maxConstraintNextDisabled = false;
+        if (maxMonth) {
+            const maxYear = maxMonth.getFullYear();
+            // Next year is disabled if it's after the maxMonth year
+            // (meaning ALL months in that year are after maxMonth)
+            maxConstraintNextDisabled = nextYear > maxYear;
+        }
+        return {
+            isPreviousYearDisabled: baseMinYearDisabled || minConstraintPreviousDisabled,
+            isNextYearDisabled: baseMaxYearDisabled || maxConstraintNextDisabled,
+        };
+    }, [currentYear, nextYear, minMonth, maxMonth]);
+    // Handle previous year navigation
+    const handlePreviousYear = useCallback(() => {
+        if (!isPreviousYearDisabled) {
+            const newDate = new Date(viewingValue);
+            newDate.setFullYear(currentYear - 1);
+            setViewingValue(newDate);
+        }
+    }, [isPreviousYearDisabled, viewingValue, currentYear, setViewingValue]);
+    // Handle next year navigation
+    const handleNextYear = useCallback(() => {
+        if (!isNextYearDisabled) {
+            const newDate = new Date(viewingValue);
+            newDate.setFullYear(nextYear + 1);
+            setViewingValue(newDate);
+        }
+    }, [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, {}) })] })] }));
+}