@mezzanine-ui/react 0.16.0 → 1.0.0-alpha.0

package/Calendar/CalendarConfigProviderDayjs.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
+export type CalendarConfigProviderDayjsProps = {
+    children?: ReactNode;
+    defaultDateFormat?: string;
+    defaultTimeFormat?: 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;
+};
+/**
+ * Pre-configured CalendarConfigProvider with Dayjs methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+export declare function CalendarConfigProviderDayjs(props: CalendarConfigProviderDayjsProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarConfigProviderDayjs;

package/Calendar/CalendarConfigProviderDayjs.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import CalendarMethodsDayjs from '@mezzanine-ui/core/calendarMethodsDayjs';
+import CalendarConfigProvider from './CalendarContext.js';
+
+/**
+ * Pre-configured CalendarConfigProvider with Dayjs methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+function CalendarConfigProviderDayjs(props) {
+    const { children, defaultDateFormat, defaultTimeFormat, locale } = props;
+    return (jsx(CalendarConfigProvider, { defaultDateFormat: defaultDateFormat, defaultTimeFormat: defaultTimeFormat, locale: locale, methods: CalendarMethodsDayjs, children: children }));
+}
+
+export { CalendarConfigProviderDayjs, CalendarConfigProviderDayjs as default };

package/Calendar/CalendarConfigProviderLuxon.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
+export type CalendarConfigProviderLuxonProps = {
+    children?: ReactNode;
+    defaultDateFormat?: string;
+    defaultTimeFormat?: 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;
+};
+/**
+ * Pre-configured CalendarConfigProvider with Luxon methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+export declare function CalendarConfigProviderLuxon(props: CalendarConfigProviderLuxonProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarConfigProviderLuxon;

package/Calendar/CalendarConfigProviderLuxon.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import CalendarMethodsLuxon from '@mezzanine-ui/core/calendarMethodsLuxon';
+import CalendarConfigProvider from './CalendarContext.js';
+
+/**
+ * Pre-configured CalendarConfigProvider with Luxon methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+function CalendarConfigProviderLuxon(props) {
+    const { children, defaultDateFormat, defaultTimeFormat, locale } = props;
+    return (jsx(CalendarConfigProvider, { defaultDateFormat: defaultDateFormat, defaultTimeFormat: defaultTimeFormat, locale: locale, methods: CalendarMethodsLuxon, children: children }));
+}
+
+export { CalendarConfigProviderLuxon, CalendarConfigProviderLuxon as default };

package/Calendar/CalendarConfigProviderMoment.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { CalendarLocaleValue } from '@mezzanine-ui/core/calendar';
+export type CalendarConfigProviderMomentProps = {
+    children?: ReactNode;
+    defaultDateFormat?: string;
+    defaultTimeFormat?: 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;
+};
+/**
+ * Pre-configured CalendarConfigProvider with Moment methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+export declare function CalendarConfigProviderMoment(props: CalendarConfigProviderMomentProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarConfigProviderMoment;

package/Calendar/CalendarConfigProviderMoment.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import CalendarMethodsMoment from '@mezzanine-ui/core/calendarMethodsMoment';
+import CalendarConfigProvider from './CalendarContext.js';
+
+/**
+ * Pre-configured CalendarConfigProvider with Moment methods.
+ * Use this component in Next.js App Router to avoid Server/Client Component boundary issues.
+ */
+function CalendarConfigProviderMoment(props) {
+    const { children, defaultDateFormat, defaultTimeFormat, locale } = props;
+    return (jsx(CalendarConfigProvider, { defaultDateFormat: defaultDateFormat, defaultTimeFormat: defaultTimeFormat, locale: locale, methods: CalendarMethodsMoment, children: children }));
+}
+
+export { CalendarConfigProviderMoment, CalendarConfigProviderMoment as default };

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,5 +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() {
@@ -12,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

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { calendarClasses } from '@mezzanine-ui/core/calendar';
 import CalendarCell from './CalendarCell.js';
@@ -9,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,9 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
+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';
 
 /**
@@ -12,43 +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);
-                    // eslint-disable-next-line no-nested-ternary
-                    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 };

package/Calendar/CalendarFooterActions.d.ts

@@ -0,0 +1,13 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ButtonProps } from '../Button';
+export interface CalendarFooterActionsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    actions: {
+        secondaryButtonProps: ButtonProps;
+        primaryButtonProps: ButtonProps;
+    };
+}
+/**
+ * The react component for `mezzanine` calendar footer actions.
+ */
+declare function CalendarFooterActions(props: CalendarFooterActionsProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarFooterActions;

package/Calendar/CalendarFooterActions.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import Button from '../Button/Button.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar footer actions.
+ */
+function CalendarFooterActions(props) {
+    const { actions, className, ...restElementProps } = props;
+    return (jsxs("div", { ...restElementProps, className: cx(calendarClasses.footerActions, className), children: [jsx(Button, { variant: "base-tertiary", size: "minor", ...actions.secondaryButtonProps }), jsx(Button, { variant: "base-primary", size: "minor", ...actions.primaryButtonProps })] }));
+}
+
+export { CalendarFooterActions as default };

package/Calendar/CalendarFooterControl.d.ts

@@ -0,0 +1,16 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarFooterControlProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /**
+     * The name of children content.
+     */
+    children?: string;
+    /**
+     * The onClick handler for button
+     */
+    onClick?: VoidFunction;
+}
+/**
+ * The react component for `mezzanine` calendar footer control.
+ */
+declare function CalendarFooterControl(props: CalendarFooterControlProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarFooterControl;

package/Calendar/CalendarFooterControl.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import Button from '../Button/Button.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar footer control.
+ */
+function CalendarFooterControl(props) {
+    const { children, className, onClick, ...restElementProps } = props;
+    return (jsx("div", { ...restElementProps, className: cx(calendarClasses.footerControl, className), children: jsx(Button, { variant: "base-ghost", size: "minor", onClick: onClick, children: children }) }));
+}
+
+export { CalendarFooterControl as default };

package/Calendar/CalendarHalfYears.d.ts

@@ -0,0 +1,39 @@
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarHalfYearsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * Provide if you have a custom disabling logic.
+     * The method takes the date object as its parameter.
+     */
+    isHalfYearDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the half-year is in range.
+     * The method takes the date object as its parameter.
+     */
+    isHalfYearInRange?: (date: DateType) => boolean;
+    /**
+     * Click handler for the button of each half-year.
+     * The method takes the date object as its parameter.
+     */
+    onClick?: (target: DateType) => void;
+    /**
+     * Mouse enter handler for the button of each half-year.
+     * The method takes the date object as its parameter.
+     */
+    onHalfYearHover?: (target: DateType) => void;
+    /**
+     * The reference date for getting the half-years range and computing the date object.
+     */
+    referenceDate: DateType;
+    /**
+     * The half-year will be marked as active if it matches the same half-year of any value in the array.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar half-years.
+ * This component displays half-years for 5 years.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarHalfYears(props: CalendarHalfYearsProps): import("react/jsx-runtime").JSX.Element;
+export default CalendarHalfYears;

package/Calendar/CalendarHalfYears.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { getYearRange, calendarHalfYearYearsCount, calendarHalfYears, calendarClasses } from '@mezzanine-ui/core/calendar';
+import { useMemo } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+import CalendarCell from './CalendarCell.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar half-years.
+ * This component displays half-years for 5 years.
+ * You may use it to compose your own calendar.
+ */
+function CalendarHalfYears(props) {
+    const { getYear, getCurrentHalfYearFirstDate, isHalfYearIncluded, setYear, setMonth, } = useCalendarContext();
+    const { className, isHalfYearDisabled, isHalfYearInRange, onClick: onClickProp, onHalfYearHover, referenceDate, value, ...rest } = props;
+    const currentYear = getYear(referenceDate);
+    const [start] = useMemo(() => getYearRange(currentYear, calendarHalfYearYearsCount), [currentYear]);
+    const years = useMemo(() => {
+        return Array.from({ length: calendarHalfYearYearsCount }, (_, i) => start + i);
+    }, [start]);
+    return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: years.map((year, yearIndex) => {
+            return (jsxs("div", { className: cx(calendarClasses.row, {
+                    [calendarClasses.rowWithBorder]: yearIndex > 0,
+                }), children: [jsx(CalendarCell, { disabled: true, children: year }), calendarHalfYears.map((halfYear) => {
+                        const halfYearStartMonth = (halfYear - 1) * 6;
+                        const halfYearDate = setMonth(setYear(getCurrentHalfYearFirstDate(referenceDate), year), halfYearStartMonth);
+                        const disabled = isHalfYearDisabled && isHalfYearDisabled(halfYearDate);
+                        const inRange = !disabled &&
+                            isHalfYearInRange &&
+                            isHalfYearInRange(halfYearDate);
+                        const active = !disabled && value && isHalfYearIncluded(halfYearDate, value);
+                        const onClick = () => {
+                            if (disabled)
+                                return;
+                            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(halfYearDate);
+                        };
+                        const onMouseEnter = () => {
+                            if (disabled)
+                                return;
+                            onHalfYearHover === null || onHalfYearHover === void 0 ? void 0 : onHalfYearHover(halfYearDate);
+                        };
+                        // Accessible half-year label for screen readers
+                        const halfYearMonths = halfYear === 1 ? 'January to June' : 'July to December';
+                        const ariaLabel = [
+                            `Half ${halfYear}, ${year}`,
+                            halfYearMonths,
+                            active && 'Selected',
+                            disabled && 'Not available',
+                        ]
+                            .filter(Boolean)
+                            .join(', ');
+                        return (jsxs("button", { type: "button", disabled: disabled, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-pressed": active, className: cx(calendarClasses.button, {
+                                [calendarClasses.buttonDisabled]: disabled,
+                                [calendarClasses.buttonInRange]: inRange,
+                                [calendarClasses.buttonActive]: active,
+                            }), onClick: onClick, onMouseEnter: onMouseEnter, children: ["H", halfYear] }, halfYear));
+                    })] }, year));
+        }) }));
+}
+
+export { CalendarHalfYears as default };

package/Calendar/CalendarMonths.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { calendarMonths, calendarClasses } from '@mezzanine-ui/core/calendar';
 import { useCalendarContext } from './CalendarContext.js';
@@ -9,11 +10,11 @@ import cx from 'clsx';
  * You may use it to compose your own calendar.
  */
 function CalendarMonths(props) {
-    const { displayMonthLocale: displayMonthLocaleFromConfig, getMonthShortNames, isMonthIncluded, setMonth, } = useCalendarContext();
-    const { className, displayMonthLocale = displayMonthLocaleFromConfig, isMonthDisabled, isMonthInRange, isYearDisabled, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
+    const { locale, getMonthShortNames, isMonthIncluded, getCurrentMonthFirstDate, setMonth, } = useCalendarContext();
+    const { className, displayMonthLocale = locale, isMonthDisabled, isMonthInRange, isYearDisabled, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
     const monthNames = getMonthShortNames(displayMonthLocale);
     return (jsx("div", { className: cx(calendarClasses.board, className), ...rest, children: jsx("div", { className: calendarClasses.twelveGrid, children: calendarMonths.map((month) => {
-                const monthDateType = setMonth(referenceDate, month);
+                const monthDateType = setMonth(getCurrentMonthFirstDate(referenceDate), month);
                 const active = value && isMonthIncluded(monthDateType, value);
                 /** @NOTE Current month should be disabled when current year is disabled */
                 const disabled = (isYearDisabled === null || isYearDisabled === void 0 ? void 0 : isYearDisabled(monthDateType)) ||
@@ -30,7 +31,18 @@ function CalendarMonths(props) {
                         onMonthHover(monthDateType);
                     }
                     : undefined;
-                return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
+                // Accessible month label for screen readers
+                const monthDate = new Date(monthDateType);
+                const fullMonthName = monthDate.toLocaleDateString(displayMonthLocale, { month: 'long' });
+                const year = monthDate.getFullYear();
+                const ariaLabel = [
+                    `${fullMonthName} ${year}`,
+                    active && 'Selected',
+                    disabled && 'Not available',
+                ]
+                    .filter(Boolean)
+                    .join(', ');
+                return (jsx("button", { type: "button", "aria-disabled": disabled, disabled: disabled, "aria-label": ariaLabel, "aria-pressed": active, className: cx(calendarClasses.button, {
                         [calendarClasses.buttonActive]: active,
                         [calendarClasses.buttonInRange]: inRange,
                         [calendarClasses.buttonDisabled]: disabled,