@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.4

package/Breadcrumb/typings.d.ts

@@ -0,0 +1,70 @@
+import type { JSXElementConstructor } from 'react';
+import type { ComponentOverridableForwardRefComponentPropsFactory, NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface BreadcrumbProps extends Omit<NativeElementPropsWithoutKeyAndRef<'nav'>, 'children'> {
+    /**
+     * Display only the last two items with an ellipsis dropdown for all previous items
+     */
+    condensed?: boolean;
+    items: Array<BreadcrumbItemProps>;
+}
+export type BreadcrumbItemComponent = 'a' | 'button' | JSXElementConstructor<any>;
+export type BreadcrumbItemProps<C extends BreadcrumbItemComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<BreadcrumbItemComponent, C, BreadcrumbDropdownItemProps | BreadcrumbItemTextProps | BreadcrumbLinkItemProps>;
+export type BreadcrumbDropdownItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'children'> & {
+    component?: 'button';
+    /**
+     * Whether is the current page item.
+     */
+    current?: boolean;
+    /**
+     * Whether to expand the dropdown item icon.
+     */
+    expand?: boolean;
+    href?: string;
+    label?: string;
+    /**
+     * The dropdown options.
+     */
+    options: Array<{
+        /**
+         * The href of dropdown item.
+         */
+        href?: string;
+        id?: string;
+        /**
+         * The content of dropdown item.
+         */
+        label?: string;
+        target?: '_blank' | '_parent' | '_self' | '_top' | string;
+    }>;
+    target?: '_blank' | '_parent' | '_self' | '_top' | string;
+};
+export type BreadcrumbItemTextProps = {
+    component?: 'div';
+    /**
+     * Whether is the current page item.
+     */
+    current?: boolean;
+    expand?: never;
+    href?: never;
+    /**
+     * The content of breadcrumb text.
+     */
+    label: string;
+    options?: never;
+    target?: never;
+};
+export type BreadcrumbLinkItemProps = Omit<NativeElementPropsWithoutKeyAndRef<'a'>, 'children'> & {
+    component?: 'a';
+    current?: boolean;
+    expand?: never;
+    /**
+     * The href of breadcrumb link.
+     */
+    href: string;
+    label: string;
+    options?: never;
+    /**
+     * The target attribute specifies where to open the linked document.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | string;
+};

package/Button/Button.js

@@ -17,14 +17,14 @@ const Button = forwardRef(function Button(props, ref) {
     const hasLeadingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'leading' && !isIconOnly;
     const hasTrailingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'trailing' && !isIconOnly;
     // Loading 狀態下的 icon
-    const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
+    const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true, size: 16 });
     // 渲染 icon 內容
     const renderIcon = () => {
         if (loading) {
             return loadingIcon;
         }
         if (icon) {
-            return jsx(Icon, { icon: icon.src });
+            return jsx(Icon, { icon: icon.src, size: 16 });
         }
         return null;
     };

package/Calendar/Calendar.d.ts

@@ -5,7 +5,10 @@ import { CalendarDaysProps } from './CalendarDays';
 import { CalendarMonthsProps } from './CalendarMonths';
 import { CalendarWeeksProps } from './CalendarWeeks';
 import { CalendarYearsProps } from './CalendarYears';
-export interface CalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'>, Pick<CalendarDaysProps, 'isDateDisabled' | 'isDateInRange' | 'onDateHover' | 'displayWeekDayLocale'>, Pick<CalendarMonthsProps, 'isMonthDisabled' | 'isMonthInRange' | 'onMonthHover' | 'displayMonthLocale'>, Pick<CalendarWeeksProps, 'isWeekDisabled' | 'isWeekInRange' | 'onWeekHover'>, Pick<CalendarYearsProps, 'isYearDisabled' | 'isYearInRange' | 'onYearHover'>, Pick<CalendarControlsProps, 'disableOnNext' | 'disableOnPrev'> {
+import { CalendarQuartersProps } from './CalendarQuarters';
+import { CalendarHalfYearsProps } from './CalendarHalfYears';
+import { CalendarQuickSelectProps } from './CalendarQuickSelect';
+export interface CalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'>, Pick<CalendarDaysProps, 'renderAnnotations' | 'isDateDisabled' | 'isDateInRange' | 'onDateHover' | 'displayWeekDayLocale'>, Pick<CalendarMonthsProps, 'isMonthDisabled' | 'isMonthInRange' | 'onMonthHover' | 'displayMonthLocale'>, Pick<CalendarWeeksProps, 'isWeekDisabled' | 'isWeekInRange' | 'onWeekHover'>, Pick<CalendarYearsProps, 'isYearDisabled' | 'isYearInRange' | 'onYearHover'>, Pick<CalendarQuartersProps, 'isQuarterDisabled' | 'isQuarterInRange' | 'onQuarterHover'>, Pick<CalendarHalfYearsProps, 'isHalfYearDisabled' | 'isHalfYearInRange' | 'onHalfYearHover'>, Pick<CalendarControlsProps, 'disableOnNext' | 'disableOnPrev' | 'disableOnDoubleNext' | 'disableOnDoublePrev'> {
     /**
      * Other props you may provide to `CalendarDays`
      */
@@ -22,6 +25,19 @@ export interface CalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * Other props you may provide to `CalendarYears`
      */
     calendarYearsProps?: Omit<CalendarYearsProps, 'onClick' | 'referenceDate' | 'value' | 'isYearDisabled' | 'isYearInRange' | 'onYearHover'>;
+    /**
+     * Other props you may provide to `CalendarQuarters`
+     */
+    calendarQuartersProps?: Omit<CalendarQuartersProps, 'onClick' | 'referenceDate' | 'value' | 'isQuarterDisabled' | 'isQuarterInRange' | 'onQuarterHover'>;
+    /**
+     * Other props you may provide to `CalendarHalfYears`
+     */
+    calendarHalfYearsProps?: Omit<CalendarHalfYearsProps, 'onClick' | 'referenceDate' | 'value' | 'isHalfYearDisabled' | 'isHalfYearInRange' | 'onHalfYearHover'>;
+    /**
+     * Disabled footer control element
+     * @default false
+     */
+    disabledFooterControl?: boolean;
     /**
      * Disabled `Month` calendar button click
      * @default false
@@ -49,19 +65,32 @@ export interface CalendarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'
      * Click handler for control button of next.
      */
     onNext?: (currentMode: CalendarMode) => void;
+    /**
+     * Click handler for control button of next.
+     */
+    onDoubleNext?: (currentMode: CalendarMode) => void;
     /**
      * Click handler for control button of prev.
      */
     onPrev?: (currentMode: CalendarMode) => void;
+    /**
+     * Click handler for control button of double prev.
+     */
+    onDoublePrev?: (currentMode: CalendarMode) => void;
     /**
      * Click handler for control button of year.
      */
     onYearControlClick?: VoidFunction;
     /**
-     * The refernce date for getting the calendar.
+     * The reference date for getting the calendar.
      * **The type of `referenceDate` should be the same as your declared `DateType`.**
      */
     referenceDate: DateType;
+    /**
+     * Quick select options for calendar.
+     * Provide options for users to quickly select specific dates or ranges.
+     */
+    quickSelect?: Pick<CalendarQuickSelectProps, 'activeId' | 'options'>;
     /**
      * The displaying cells will be marked as active
      * if the single value of it matches any date object in the array. <br />

package/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { getYearRange, calendarYearModuler, calendarClasses } from '@mezzanine-ui/core/calendar';
+import { getYearRange, calendarYearModuler, calendarQuarterYearsCount, calendarHalfYearYearsCount, calendarClasses } from '@mezzanine-ui/core/calendar';
 import castArray from 'lodash/castArray';
 import { forwardRef } from 'react';
 import { useCalendarContext } from './CalendarContext.js';
@@ -9,6 +9,10 @@ import CalendarDays from './CalendarDays.js';
 import CalendarMonths from './CalendarMonths.js';
 import CalendarWeeks from './CalendarWeeks.js';
 import CalendarYears from './CalendarYears.js';
+import CalendarQuarters from './CalendarQuarters.js';
+import CalendarHalfYears from './CalendarHalfYears.js';
+import CalendarFooterControl from './CalendarFooterControl.js';
+import CalendarQuickSelect from './CalendarQuickSelect.js';
 import cx from 'clsx';
 
 /**
@@ -17,45 +21,95 @@ import cx from 'clsx';
  * You may use the handlers provided by `useCalendarControls` hook or your own customizd methods.
  */
 const Calendar = forwardRef(function Calendar(props, ref) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonth, getMonthShortName, getYear, } = useCalendarContext();
-    const { calendarDaysProps, calendarMonthsProps, calendarWeeksProps, calendarYearsProps, className, disabledMonthSwitch, disableOnNext, disableOnPrev, disabledYearSwitch, displayMonthLocale = displayMonthLocaleFromConfig, displayWeekDayLocale, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, mode = 'day', onChange, onDateHover, onMonthControlClick, onMonthHover, onNext, onPrev, onWeekHover, onYearControlClick, onYearHover, referenceDate, value: valueProp, ...restCalendarProps } = props;
+    const { locale, getNow, getMonth, getMonthShortName, getYear, getCurrentWeekFirstDate, getCurrentMonthFirstDate, getCurrentYearFirstDate, getCurrentQuarterFirstDate, getCurrentHalfYearFirstDate, setHour, setMinute, setSecond, setMillisecond, } = useCalendarContext();
+    const { renderAnnotations, calendarDaysProps, calendarMonthsProps, calendarWeeksProps, calendarYearsProps, calendarQuartersProps, calendarHalfYearsProps, className, disabledFooterControl = false, disabledMonthSwitch, disableOnNext, disableOnPrev, disableOnDoubleNext, disableOnDoublePrev, disabledYearSwitch, displayMonthLocale = locale, displayWeekDayLocale = locale, isDateDisabled, isDateInRange, isMonthDisabled, isMonthInRange, isWeekDisabled, isWeekInRange, isYearDisabled, isYearInRange, isQuarterDisabled, isQuarterInRange, isHalfYearDisabled, isHalfYearInRange, mode = 'day', onChange, onDateHover, onMonthControlClick, onMonthHover, onNext, onDoubleNext, onPrev, onDoublePrev, onWeekHover, onYearControlClick, onYearHover, onQuarterHover, onHalfYearHover, quickSelect, referenceDate, value: valueProp, ...restCalendarProps } = props;
     const value = valueProp ? castArray(valueProp) : undefined;
     /** Compute which calendar to use */
     let displayCalendar;
+    let displayFooterControl;
     if (mode === 'day') {
-        displayCalendar = (jsx(CalendarDays, { ...calendarDaysProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onClick: onChange, onDateHover: onDateHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
+        displayCalendar = (jsx(CalendarDays, { ...calendarDaysProps, renderAnnotations: renderAnnotations, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onClick: onChange, onDateHover: onDateHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(setMillisecond(setSecond(setMinute(setHour(getNow(), 0), 0), 0), 0)), children: "Today" }));
+        }
     }
     else if (mode === 'week') {
         displayCalendar = (jsx(CalendarWeeks, { ...calendarWeeksProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onClick: onChange, onWeekHover: onWeekHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentWeekFirstDate(getNow(), displayWeekDayLocale)), children: "This week" }));
+        }
     }
     else if (mode === 'month') {
         displayCalendar = (jsx(CalendarMonths, { ...calendarMonthsProps, isYearDisabled: isYearDisabled, isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onClick: onChange, onMonthHover: onMonthHover, referenceDate: referenceDate, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentMonthFirstDate(getNow())), children: "This month" }));
+        }
     }
     else if (mode === 'year') {
         displayCalendar = (jsx(CalendarYears, { ...calendarYearsProps, isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onClick: onChange, onYearHover: onYearHover, referenceDate: referenceDate, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentYearFirstDate(getNow())), children: "This year" }));
+        }
+    }
+    else if (mode === 'quarter') {
+        displayCalendar = (jsx(CalendarQuarters, { ...calendarQuartersProps, isQuarterDisabled: isQuarterDisabled, isQuarterInRange: isQuarterInRange, onClick: onChange, onQuarterHover: onQuarterHover, referenceDate: referenceDate, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentQuarterFirstDate(getNow())), children: "This quarter" }));
+        }
+    }
+    else if (mode === 'half-year') {
+        displayCalendar = (jsx(CalendarHalfYears, { ...calendarHalfYearsProps, isHalfYearDisabled: isHalfYearDisabled, isHalfYearInRange: isHalfYearInRange, onClick: onChange, onHalfYearHover: onHalfYearHover, referenceDate: referenceDate, value: value }));
+        if (!disabledFooterControl) {
+            displayFooterControl = (jsx(CalendarFooterControl, { onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(getCurrentHalfYearFirstDate(getNow())), children: "This half year" }));
+        }
     }
     /** Compute controls outcome */
-    const [start, end] = getYearRange(getYear(referenceDate), calendarYearModuler);
-    const displayYearRange = `${start} - ${end}`;
     let controls;
     if (mode === 'day' || mode === 'week') {
-        controls = (jsxs(Fragment, { children: [jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledMonthSwitch && calendarClasses.buttonDisabled), disabled: disabledMonthSwitch, "aria-disabled": disabledMonthSwitch, onClick: onMonthControlClick, children: getMonthShortName(getMonth(referenceDate), displayMonthLocale) }), jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledYearSwitch && calendarClasses.buttonDisabled), disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, onClick: onYearControlClick, children: getYear(referenceDate) })] }));
+        const displayMonth = getMonthShortName(getMonth(referenceDate), displayMonthLocale);
+        const displayYear = getYear(referenceDate);
+        controls = (jsxs(Fragment, { children: [jsx("button", { type: "button", disabled: disabledMonthSwitch, "aria-disabled": disabledMonthSwitch, "aria-label": `Select month, currently ${displayMonth}`, onClick: onMonthControlClick, children: displayMonth }), jsx("button", { type: "button", disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, "aria-label": `Select year, currently ${displayYear}`, onClick: onYearControlClick, children: displayYear })] }));
     }
     else if (mode === 'month') {
-        controls = (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, disabledYearSwitch && calendarClasses.buttonDisabled), disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, onClick: onYearControlClick, children: getYear(referenceDate) }));
+        const displayYear = getYear(referenceDate);
+        controls = (jsx("button", { type: "button", disabled: disabledYearSwitch, "aria-disabled": disabledYearSwitch, "aria-label": `Select year, currently ${displayYear}`, onClick: onYearControlClick, children: displayYear }));
     }
     else if (mode === 'year') {
-        controls = (jsx("button", { type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, calendarClasses.buttonDisabled), disabled: true, "aria-disabled": true, children: displayYearRange }));
-    }
-    return (jsxs("div", { ...restCalendarProps, ref: ref, className: cx(calendarClasses.host, className), children: [jsx(CalendarControls, { disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, onNext: onNext
-                    ? () => {
-                        onNext(mode);
-                    }
-                    : undefined, onPrev: onPrev
-                    ? () => {
-                        onPrev(mode);
-                    }
-                    : undefined, children: controls }), displayCalendar] }));
+        const [start, end] = getYearRange(getYear(referenceDate), calendarYearModuler);
+        const displayYearRange = `${start} - ${end}`;
+        controls = (jsx("button", { type: "button", disabled: true, "aria-disabled": true, "aria-label": `Year range ${displayYearRange}`, children: displayYearRange }));
+    }
+    else if (mode === 'quarter') {
+        const [start, end] = getYearRange(getYear(referenceDate), calendarQuarterYearsCount);
+        const displayQuarterYearRange = `${start} - ${end}`;
+        controls = (jsx("button", { type: "button", disabled: true, "aria-disabled": true, "aria-label": `Quarter year range ${displayQuarterYearRange}`, children: displayQuarterYearRange }));
+    }
+    else if (mode === 'half-year') {
+        const [start, end] = getYearRange(getYear(referenceDate), calendarHalfYearYearsCount);
+        const displayHalfYearYearRange = `${start} - ${end}`;
+        controls = (jsx("button", { type: "button", disabled: true, "aria-disabled": true, "aria-label": `Half-year range ${displayHalfYearYearRange}`, children: displayHalfYearYearRange }));
+    }
+    return (jsxs("div", { ...restCalendarProps, ref: ref, role: "application", "aria-label": `Calendar, ${mode} view`, className: cx(calendarClasses.host, calendarClasses.mode(mode), className), children: [quickSelect && (jsx(CalendarQuickSelect, { activeId: quickSelect.activeId, options: quickSelect.options })), jsxs("div", { className: calendarClasses.mainWithFooter, children: [jsxs("div", { className: calendarClasses.main, children: [jsx(CalendarControls, { disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, disableOnDoubleNext: disableOnDoubleNext, disableOnDoublePrev: disableOnDoublePrev, onDoubleNext: onDoubleNext
+                                    ? () => {
+                                        onDoubleNext(mode);
+                                    }
+                                    : undefined, onNext: 
+                                // Only day and week modes have single next/prev (for month navigation)
+                                onNext && (mode === 'day' || mode === 'week')
+                                    ? () => {
+                                        onNext(mode);
+                                    }
+                                    : undefined, onDoublePrev: onDoublePrev
+                                    ? () => {
+                                        onDoublePrev(mode);
+                                    }
+                                    : undefined, onPrev: 
+                                // Only day and week modes have single next/prev (for month navigation)
+                                onPrev && (mode === 'day' || mode === 'week')
+                                    ? () => {
+                                        onPrev(mode);
+                                    }
+                                    : undefined, children: controls }), displayCalendar] }), displayFooterControl] })] }));
 });
 
 export { Calendar as default };

package/Calendar/CalendarCell.d.ts

@@ -12,6 +12,10 @@ export interface CalendarCellProps extends NativeElementPropsWithoutKeyAndRef<'d
      * Apply today styles if true.
      */
     today?: boolean;
+    /**
+     * The role attribute for accessibility
+     */
+    role?: string;
 }
 /**
  * The react component for `mezzanine` calendar cell.

package/Calendar/CalendarCell.js

@@ -7,11 +7,11 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarCell(props) {
-    const { active, children, className, disabled, today, ...restCalendarCellProps } = props;
-    return (jsx("div", { className: cx(calendarClasses.cell, {
+    const { active, children, className, disabled, today, role, ...restCalendarCellProps } = props;
+    return (jsx("div", { role: role, className: cx(calendarClasses.cell, {
+            [calendarClasses.cellToday]: today,
             [calendarClasses.cellActive]: active,
             [calendarClasses.cellDisabled]: disabled,
-            [calendarClasses.cellToday]: today,
         }, className), ...restCalendarCellProps, children: jsx("span", { className: calendarClasses.cellInner, children: children }) }));
 }
 

package/Calendar/CalendarContext.d.ts

@@ -1,21 +1,28 @@
 import { ReactNode } from 'react';
-import { CalendarMethods } from '@mezzanine-ui/core/calendar';
+import { CalendarLocale, CalendarLocaleValue, CalendarMethods } from '@mezzanine-ui/core/calendar';
 export interface CalendarConfigs extends CalendarMethods {
     defaultDateFormat: string;
     defaultTimeFormat: string;
-    displayMonthLocale: string;
-    displayWeekDayLocale: string;
-    valueLocale: string;
+    /**
+     * The unified locale for all calendar display and value processing.
+     */
+    locale: string;
 }
 export type CalendarConfigProviderProps = {
     children?: ReactNode;
     defaultDateFormat?: string;
     defaultTimeFormat?: string;
-    displayMonthLocale?: string;
-    displayWeekDayLocale?: string;
+    /**
+     * The unified locale for all calendar display and value processing.
+     * This determines the first day of week, month names, weekday names, etc.
+     * Use CalendarLocale enum for type-safe locale values.
+     * @example CalendarLocale.EN_US, CalendarLocale.ZH_TW, CalendarLocale.DE_DE
+     * @default CalendarLocale.EN_US
+     */
+    locale?: CalendarLocaleValue;
     methods: CalendarMethods;
-    valueLocale?: string;
 };
+export { CalendarLocale };
 export declare const CalendarContext: import("react").Context<CalendarConfigs | undefined>;
 export declare function useCalendarContext(): CalendarConfigs;
 declare function CalendarConfigProvider(props: CalendarConfigProviderProps): import("react/jsx-runtime").JSX.Element;

package/Calendar/CalendarContext.js

@@ -1,6 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useMemo, useContext } from 'react';
+import { CalendarLocale, normalizeLocale } from '@mezzanine-ui/core/calendar';
+export { CalendarLocale } from '@mezzanine-ui/core/calendar';
 
 const CalendarContext = createContext(undefined);
 function useCalendarContext() {
@@ -13,22 +15,14 @@ function useCalendarContext() {
     return configs;
 }
 function CalendarConfigProvider(props) {
-    const { children, defaultDateFormat = 'YYYY-MM-DD', defaultTimeFormat = 'HH:mm:ss', displayMonthLocale = 'en-us', displayWeekDayLocale = 'en-us', methods, valueLocale = 'en-us', } = props;
+    const { children, defaultDateFormat = 'YYYY-MM-DD', defaultTimeFormat = 'HH:mm:ss', locale = CalendarLocale.EN_US, methods, } = props;
+    const resolvedLocale = normalizeLocale(locale);
     const context = useMemo(() => ({
         ...methods,
         defaultDateFormat,
         defaultTimeFormat,
-        displayMonthLocale,
-        displayWeekDayLocale,
-        valueLocale,
-    }), [
-        methods,
-        defaultDateFormat,
-        defaultTimeFormat,
-        displayMonthLocale,
-        displayWeekDayLocale,
-        valueLocale,
-    ]);
+        locale: resolvedLocale,
+    }), [methods, defaultDateFormat, defaultTimeFormat, resolvedLocale]);
     return (jsx(CalendarContext.Provider, { value: context, children: children }));
 }
 

package/Calendar/CalendarControls.d.ts

@@ -4,18 +4,34 @@ export interface CalendarControlsProps extends Omit<NativeElementPropsWithoutKey
      * Disable the next controller if true.
      */
     disableOnNext?: boolean;
+    /**
+     * Disable the double next controller if true.
+     */
+    disableOnDoubleNext?: boolean;
     /**
      * Disable the prev controller if true.
      */
     disableOnPrev?: boolean;
+    /**
+     * Disable the double prev controller if true.
+     */
+    disableOnDoublePrev?: boolean;
     /**
      * Click handler for next controller.
      */
     onNext?: VoidFunction;
+    /**
+     * Click handler for double next controller.
+     */
+    onDoubleNext?: VoidFunction;
     /**
      * Click handler for prev controller.
      */
     onPrev?: VoidFunction;
+    /**
+     * Click handler for double prev controller.
+     */
+    onDoublePrev?: VoidFunction;
 }
 /**
  * The react component for `mezzanine` calendar controls.

package/Calendar/CalendarControls.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { calendarClasses } from '@mezzanine-ui/core/calendar';
-import { ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
+import { DoubleChevronLeftIcon, ChevronLeftIcon, ChevronRightIcon, DoubleChevronRightIcon } from '@mezzanine-ui/icons';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -9,12 +9,8 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarControls(props) {
-    const { children, className, disableOnNext, disableOnPrev, onNext, onPrev, ...restElementProps } = props;
-    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.controls, className), children: [onPrev && (jsx("button", { type: "button", "aria-disabled": disableOnPrev, disabled: disableOnPrev, onClick: onPrev, className: cx(calendarClasses.button, calendarClasses.controlsIconButton, calendarClasses.controlsPrev, {
-                    [calendarClasses.buttonDisabled]: disableOnPrev,
-                }), children: jsx(Icon, { icon: ChevronLeftIcon }) })), children, onNext && (jsx("button", { type: "button", "aria-disabled": disableOnNext, disabled: disableOnNext, onClick: onNext, className: cx(calendarClasses.button, calendarClasses.controlsIconButton, calendarClasses.controlsNext, {
-                    [calendarClasses.buttonDisabled]: disableOnNext,
-                }), children: jsx(Icon, { icon: ChevronRightIcon }) }))] }));
+    const { children, className, disableOnNext, disableOnDoubleNext, disableOnPrev, disableOnDoublePrev, onPrev, onNext, onDoubleNext, onDoublePrev, ...restElementProps } = props;
+    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.controls, className), children: [jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onDoublePrev && (jsx("button", { type: "button", "aria-disabled": disableOnDoublePrev, disabled: disableOnDoublePrev, onClick: onDoublePrev, "aria-label": "Go to previous year", title: "Previous Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronLeftIcon, "aria-hidden": "true" }) })), onPrev && (jsx("button", { type: "button", "aria-disabled": disableOnPrev, disabled: disableOnPrev, onClick: onPrev, "aria-label": "Go to previous month", title: "Previous Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronLeftIcon, "aria-hidden": "true" }) }))] }), jsx("div", { className: cx(calendarClasses.controlsMain), children: children }), jsxs("div", { className: cx(calendarClasses.controlsActions), children: [onNext && (jsx("button", { type: "button", "aria-disabled": disableOnNext, disabled: disableOnNext, onClick: onNext, "aria-label": "Go to next month", title: "Next Month", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: ChevronRightIcon, "aria-hidden": "true" }) })), onDoubleNext && (jsx("button", { type: "button", "aria-disabled": disableOnDoubleNext, disabled: disableOnDoubleNext, onClick: onDoubleNext, "aria-label": "Go to next year", title: "Next Year", className: cx(calendarClasses.controlsButton), children: jsx(Icon, { icon: DoubleChevronRightIcon, "aria-hidden": "true" }) }))] })] }));
 }
 
 export { CalendarControls as default };

package/Calendar/CalendarDayOfWeek.js

@@ -10,10 +10,10 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarDayOfWeek(props) {
-    const { getWeekDayNames, displayWeekDayLocale: displayWeekDayLocaleFromConfig, } = useCalendarContext();
-    const { displayWeekDayLocale = displayWeekDayLocaleFromConfig, className, ...restRowProps } = props;
+    const { getWeekDayNames, locale } = useCalendarContext();
+    const { displayWeekDayLocale = locale, className, ...restRowProps } = props;
     const weekDayNames = getWeekDayNames(displayWeekDayLocale);
-    return (jsx("div", { className: cx(calendarClasses.row, className), ...restRowProps, children: weekDayNames.map((name) => (jsx(CalendarCell, { children: name }, `CALENDAR_DAY_OF_WEEK/${name}`))) }));
+    return (jsx("div", { className: cx(calendarClasses.row, className), role: "row", "aria-label": "Days of the week", ...restRowProps, children: weekDayNames.map((name, idx) => (jsx(CalendarCell, { role: "columnheader", children: name }, `CALENDAR_DAY_OF_WEEK/${name}-${idx}`))) }));
 }
 
 export { CalendarDayOfWeek as default };

package/Calendar/CalendarDays.d.ts

@@ -3,6 +3,7 @@ import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { CalendarDayOfWeekProps } from './CalendarDayOfWeek';
 import type { CalendarYearsProps } from './CalendarYears';
 import type { CalendarMonthsProps } from './CalendarMonths';
+import { TypographyColor } from '../Typography';
 export interface CalendarDaysProps extends Pick<CalendarDayOfWeekProps, 'displayWeekDayLocale'>, Pick<CalendarYearsProps, 'isYearDisabled'>, Pick<CalendarMonthsProps, 'isMonthDisabled'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
     /**
      * Provide if you have a custom disabling logic. The method takes the date object as its parameter.
@@ -22,7 +23,14 @@ export interface CalendarDaysProps extends Pick<CalendarDayOfWeekProps, 'display
      */
     onDateHover?: (date: DateType) => void;
     /**
-     * The refernce date for getting the month of the calendar.
+     * The extra annotations for specific dates.
+     */
+    renderAnnotations?: (date: DateType) => {
+        value: string;
+        color?: TypographyColor;
+    };
+    /**
+     * The reference date for getting the month of the calendar.
      */
     referenceDate: DateType;
     /**

package/Calendar/CalendarDays.js

@@ -1,10 +1,11 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useMemo } from 'react';
 import CalendarCell from './CalendarCell.js';
 import CalendarDayOfWeek from './CalendarDayOfWeek.js';
 import { useCalendarContext } from './CalendarContext.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
@@ -13,42 +14,66 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarDays(props) {
-    const { displayWeekDayLocale: displayWeekDayLocaleFromConfig, getCalendarGrid, getDate, getMonth, getNow, isDateIncluded, isSameDate, setDate, setMonth, } = useCalendarContext();
-    const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isYearDisabled, isMonthDisabled, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, referenceDate, value, ...rest } = props;
-    const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
-    return (jsxs("div", { ...rest, className: cx(calendarClasses.board, className), children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => (jsx("div", { className: calendarClasses.row, children: week.map((dateNum) => {
-                    const isPrevMonth = index === 0 && dateNum > 7;
-                    const isNextMonth = index > 3 && dateNum <= 14;
-                    const thisMonth = getMonth(referenceDate);
-                    const month = isPrevMonth
-                        ? thisMonth - 1
-                        : isNextMonth
-                            ? thisMonth + 1
-                            : thisMonth;
-                    const date = setDate(setMonth(referenceDate, month), dateNum);
-                    const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(date)) ||
-                        (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(date)) ||
-                        (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) ||
-                        false;
-                    const inactive = !disabled && (isPrevMonth || isNextMonth);
-                    const inRange = !inactive && isDateInRange && isDateInRange(date);
-                    const active = !disabled && !inactive && value && isDateIncluded(date, value);
-                    const onMouseEnter = onDateHover
-                        ? () => {
-                            onDateHover(date);
-                        }
-                        : undefined;
-                    const onClick = onClickProp
-                        ? () => {
-                            onClickProp(date);
-                        }
-                        : undefined;
-                    return (jsx(CalendarCell, { today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, children: jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
-                                [calendarClasses.buttonInRange]: inRange,
-                                [calendarClasses.buttonActive]: active,
-                                [calendarClasses.buttonDisabled]: disabled,
-                            }), onClick: onClick, children: dateNum }) }, `${getMonth(date)}/${getDate(date)}`));
-                }) }, `CALENDAR_DAYS/WEEK_OF/${index}`)))] }));
+    const { locale, getCalendarGrid, getDate, getMonth, getNow, isDateIncluded, isSameDate, setDate, setMonth, setHour, setMinute, setSecond, setMillisecond, } = useCalendarContext();
+    const { className, displayWeekDayLocale = locale, isYearDisabled, isMonthDisabled, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, renderAnnotations, referenceDate, value, ...rest } = props;
+    const daysGrid = useMemo(() => getCalendarGrid(referenceDate, displayWeekDayLocale), [getCalendarGrid, displayWeekDayLocale, referenceDate]);
+    return (jsx("div", { ...rest, className: cx(calendarClasses.board, className), children: jsxs("div", { className: calendarClasses.daysGrid, children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }), daysGrid.map((week, index) => (jsx("div", { className: calendarClasses.row, children: week.map((dateNum) => {
+                        const isPrevMonth = index === 0 && dateNum > 7;
+                        const isNextMonth = index > 3 && dateNum <= 14;
+                        const thisMonth = getMonth(referenceDate);
+                        const month = isPrevMonth
+                            ? thisMonth - 1
+                            : isNextMonth
+                                ? thisMonth + 1
+                                : thisMonth;
+                        const date = setMillisecond(setSecond(setMinute(setHour(setDate(setMonth(referenceDate, month), dateNum), 0), 0), 0), 0);
+                        const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(date)) ||
+                            (isMonthDisabled === null || isMonthDisabled === void 0 ? void 0 : isMonthDisabled(date)) ||
+                            (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) ||
+                            false;
+                        const inactive = !disabled && (isPrevMonth || isNextMonth);
+                        const inRange = !inactive && isDateInRange && isDateInRange(date);
+                        const active = !disabled && !inactive && value && isDateIncluded(date, value);
+                        const onMouseEnter = onDateHover
+                            ? () => {
+                                onDateHover(date);
+                            }
+                            : undefined;
+                        const onClick = onClickProp
+                            ? () => {
+                                onClickProp(date);
+                            }
+                            : undefined;
+                        // Accessible date label for screen readers
+                        const dateObj = new Date(date);
+                        const dayName = dateObj.toLocaleDateString(displayWeekDayLocale, {
+                            weekday: 'long',
+                        });
+                        const monthName = dateObj.toLocaleDateString(displayWeekDayLocale, { month: 'long' });
+                        const year = dateObj.getFullYear();
+                        const day = dateObj.getDate();
+                        const isToday = isSameDate(date, getNow());
+                        const ariaLabel = [
+                            `${dayName}, ${monthName} ${day}, ${year}`,
+                            isToday && 'Today',
+                            active && 'Selected',
+                            disabled && 'Not available',
+                            inactive && 'Outside current month',
+                        ]
+                            .filter(Boolean)
+                            .join(', ');
+                        return (jsx(CalendarCell, { today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth, children: jsxs("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, "aria-current": isToday ? 'date' : undefined, onMouseEnter: onMouseEnter, className: cx(calendarClasses.button, {
+                                    [calendarClasses.buttonInRange]: inRange,
+                                    [calendarClasses.buttonActive]: active,
+                                    [calendarClasses.buttonDisabled]: disabled,
+                                }), onClick: onClick, children: [dateNum, typeof renderAnnotations === 'function'
+                                        ? (() => {
+                                            var _a, _b;
+                                            const annotation = renderAnnotations(date);
+                                            return (jsx(Typography, { variant: "annotation", color: (_a = annotation === null || annotation === void 0 ? void 0 : annotation.color) !== null && _a !== void 0 ? _a : 'text-neutral', children: (_b = annotation === null || annotation === void 0 ? void 0 : annotation.value) !== null && _b !== void 0 ? _b : '' }));
+                                        })()
+                                        : null] }) }, `${getMonth(date)}/${getDate(date)}`));
+                    }) }, `CALENDAR_DAYS/WEEK_OF/${index}`)))] }) }));
 }
 
 export { CalendarDays as default };