@mezzanine-ui/react 0.6.4

package/Calendar/CalendarDays.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { CalendarDayOfWeekProps } from './CalendarDayOfWeek';
+export interface CalendarDaysProps extends Pick<CalendarDayOfWeekProps, 'displayWeekDayLocale'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * Provide if you have a custom disabling logic. The method takes the date object as its parameter.
+     */
+    isDateDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the date is in range.
+     * The method takes the date object as its parameter.
+     */
+    isDateInRange?: (date: DateType) => boolean;
+    /**
+     * Click handler for date button.
+     */
+    onClick?: (date: DateType) => void;
+    /**
+     * Mouse enter handler for date button.
+     */
+    onDateHover?: (date: DateType) => void;
+    /**
+     * The refernce date for getting the month of the calendar.
+     */
+    referenceDate: DateType;
+    /**
+     * If provided, each date that matches the same dates in this array will be marked as active.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar days. <br />
+ * This component displays a monthly calendar whose month is the same as `referenceDate`.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarDays(props: CalendarDaysProps): JSX.Element;
+export default CalendarDays;

package/Calendar/CalendarDays.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } 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 cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar days. <br />
+ * This component displays a monthly calendar whose month is the same as `referenceDate`.
+ * 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, isDateDisabled, isDateInRange, onClick: onClickProp, onDateHover, referenceDate, value, ...rest } = props;
+    const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
+    return (jsxs("div", Object.assign({}, rest, { className: cx(calendarClasses.board, className) }, { children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }, void 0),
+            daysGrid.map((week, index) => (jsx("div", Object.assign({ 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 = isDateDisabled && isDateDisabled(date);
+                    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, Object.assign({ today: isSameDate(date, getNow()), active: active, disabled: isPrevMonth || isNextMonth }, { children: jsx("button", Object.assign({ 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 }), void 0) }), `${getMonth(date)}/${getDate(date)}`));
+                }) }), `CALENDAR_DAYS/WEEK_OF/${index}`)))] }), void 0));
+}
+
+export default CalendarDays;

package/Calendar/CalendarMonths.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarMonthsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * The locale you want to use when rendering the names of month.
+     * If none provided, it will use the `displayMonthLocale` from calendar context.
+     */
+    displayMonthLocale?: string;
+    /**
+     * Provide if you have a custom disabling logic. The method takes the date object as its parameter.
+     */
+    isMonthDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the month is in range.
+     * The method takes the date object as its parameter.
+     */
+    isMonthInRange?: (date: DateType) => boolean;
+    /**
+     * Click handler for each month button.
+     */
+    onClick?: (target: DateType) => void;
+    /**
+     * Mouse enter handler for each month button.
+     */
+    onMonthHover?: (target: DateType) => void;
+    /**
+     * The refernce date for computing the date object.
+     */
+    referenceDate: DateType;
+    /**
+     * If provided, each month that matches the same months in this array will be marked as active.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar months. <br />
+ * This component displays a 12 months grid.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarMonths(props: CalendarMonthsProps): JSX.Element;
+export default CalendarMonths;

package/Calendar/CalendarMonths.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { calendarClasses, calendarMonths } from '@mezzanine-ui/core/calendar';
+import { useCalendarContext } from './CalendarContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar months. <br />
+ * This component displays a 12 months grid.
+ * 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, onClick: onClickProp, onMonthHover, referenceDate, value, ...rest } = props;
+    const monthNames = getMonthShortNames(displayMonthLocale);
+    return (jsx("div", Object.assign({ className: cx(calendarClasses.board, className) }, rest, { children: jsx("div", Object.assign({ className: calendarClasses.twelveGrid }, { children: calendarMonths.map((month) => {
+                const monthDateType = setMonth(referenceDate, month);
+                const active = value && isMonthIncluded(monthDateType, value);
+                const disabled = isMonthDisabled && isMonthDisabled(monthDateType);
+                const inRange = isMonthInRange && isMonthInRange(monthDateType);
+                const onClick = onClickProp ? () => { onClickProp(monthDateType); } : undefined;
+                const onMouseEnter = onMonthHover ? () => { onMonthHover(monthDateType); } : undefined;
+                return (jsx("button", Object.assign({ type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
+                        [calendarClasses.buttonActive]: active,
+                        [calendarClasses.buttonInRange]: inRange,
+                        [calendarClasses.buttonDisabled]: disabled,
+                    }), onClick: onClick, onMouseEnter: onMouseEnter }, { children: monthNames[month] }), month));
+            }) }), void 0) }), void 0));
+}
+
+export default CalendarMonths;

package/Calendar/CalendarWeeks.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { CalendarDayOfWeekProps } from './CalendarDayOfWeek';
+export interface CalendarWeeksProps extends Pick<CalendarDayOfWeekProps, 'displayWeekDayLocale'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * Provide if you have a custom disabling logic.
+     * The method takes the date object of first date in week as its parameter.
+     */
+    isWeekDisabled?: (date: DateType) => boolean;
+    /**
+     * Provide if you have a custom logic for checking if the week is in range.
+     * The method takes the date object of first date in week as its parameter.
+     */
+    isWeekInRange?: (firstDateOfWeek: DateType) => boolean;
+    /**
+     * Click handler for the button of week row.
+     * The method takes the date object of first date in week as its parameter.
+     */
+    onClick?: (date: DateType) => void;
+    /**
+     * Mouse enter handler for the button of week row.
+     * The method takes the date object of first date in week as its parameter.
+     */
+    onWeekHover?: (firstDateOfWeek: DateType) => void;
+    /**
+     * The refernce date for getting the dates of calendar.
+     */
+    referenceDate: DateType;
+    /**
+     * The week will be marked as active if the first date of week matches the same date of any value in the array.
+     */
+    value?: DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar weeks. <br />
+ * This component displays a monthly calendar whose month is the same as `referenceDate`.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarWeeks(props: CalendarWeeksProps): JSX.Element;
+export default CalendarWeeks;

package/Calendar/CalendarWeeks.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } 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 cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar weeks. <br />
+ * This component displays a monthly calendar whose month is the same as `referenceDate`.
+ * You may use it to compose your own calendar.
+ */
+function CalendarWeeks(props) {
+    const { displayWeekDayLocale: displayWeekDayLocaleFromConfig, getCalendarGrid, getDate, getMonth, getNow, isInMonth, isSameDate, isWeekIncluded, setDate, setMonth, } = useCalendarContext();
+    const { className, displayWeekDayLocale = displayWeekDayLocaleFromConfig, isWeekDisabled, isWeekInRange, onClick: onClickProp, onWeekHover, referenceDate, value, ...rest } = props;
+    const daysGrid = useMemo(() => getCalendarGrid(referenceDate), [getCalendarGrid, referenceDate]);
+    return (jsxs("div", Object.assign({}, rest, { className: cx(calendarClasses.board, className) }, { children: [jsx(CalendarDayOfWeek, { displayWeekDayLocale: displayWeekDayLocale }, void 0),
+            daysGrid.map((week, index) => {
+                const dates = [];
+                const weekStartInPrevMonth = index === 0 && week[0] > 7;
+                const weekStartInNextMonth = index > 3 && week[0] <= 14;
+                week.forEach((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);
+                    dates.push(date);
+                });
+                const disabled = isWeekDisabled && isWeekDisabled(dates[0]);
+                const inactive = !disabled && (weekStartInPrevMonth || weekStartInNextMonth);
+                const active = !disabled && !inactive && value && isWeekIncluded(dates[0], value);
+                const inRange = !disabled && !inactive && isWeekInRange && isWeekInRange(dates[0]);
+                const onMouseEnter = onWeekHover ? () => {
+                    onWeekHover(dates[0]);
+                } : undefined;
+                const onClick = onClickProp ? () => {
+                    onClickProp(dates[0]);
+                } : undefined;
+                return (jsx("button", Object.assign({ type: "button", className: cx(calendarClasses.button, calendarClasses.row, {
+                        [calendarClasses.buttonActive]: active,
+                        [calendarClasses.buttonInRange]: inRange,
+                        [calendarClasses.buttonDisabled]: disabled,
+                    }), disabled: disabled, "aria-disabled": disabled, onClick: onClick, onMouseEnter: onMouseEnter }, { children: week.map((dateNum, dateIndex) => (jsx(CalendarCell, Object.assign({ today: isSameDate(dates[dateIndex], getNow()), disabled: disabled || !isInMonth(dates[dateIndex], getMonth(referenceDate)), active: active }, { children: dateNum }), `${getMonth(dates[dateIndex])}/${getDate(dates[dateIndex])}`))) }), `CALENDAR_WEEKS/WEEK_OF/${index}`));
+            })] }), void 0));
+}
+
+export default CalendarWeeks;

package/Calendar/CalendarYears.d.ts

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

package/Calendar/CalendarYears.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { getCalendarYearRange, calendarClasses, calendarYearsBase } from '@mezzanine-ui/core/calendar';
+import { useMemo } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar years. <br />
+ * This component displays a 12 year grid.
+ * You may use it to compose your own calendar.
+ */
+function CalendarYears(props) {
+    const { getNow, getYear, isYearIncluded, setYear, } = useCalendarContext();
+    const { className, isYearDisabled, isYearInRange, onClick: onClickProp, onYearHover, referenceDate, value, ...rest } = props;
+    const [start] = useMemo(() => getCalendarYearRange(getYear(referenceDate)), [getYear, referenceDate]);
+    return (jsx("div", Object.assign({ className: cx(calendarClasses.board, className) }, rest, { children: jsx("div", Object.assign({ className: calendarClasses.twelveGrid }, { children: calendarYearsBase.map((base) => {
+                const thisYear = base + start;
+                const yearDateType = setYear(getNow(), thisYear);
+                const disabled = isYearDisabled && isYearDisabled(yearDateType);
+                const inactive = !disabled && (base === 0 || base === 11);
+                const active = !disabled && !inactive && value && isYearIncluded(yearDateType, value);
+                const inRange = isYearInRange && isYearInRange(yearDateType);
+                const onClick = onClickProp ? () => { onClickProp(yearDateType); } : undefined;
+                const onMouseEnter = onYearHover ? () => { onYearHover(yearDateType); } : undefined;
+                return (jsx("button", Object.assign({ type: "button", "aria-disabled": disabled, disabled: disabled, className: cx(calendarClasses.button, {
+                        [calendarClasses.buttonActive]: active,
+                        [calendarClasses.buttonInRange]: inRange,
+                        [calendarClasses.buttonDisabled]: disabled,
+                        [calendarClasses.buttonInactive]: inactive,
+                    }), onClick: onClick, onMouseEnter: onMouseEnter }, { children: thisYear }), base + start));
+            }) }), void 0) }), void 0));
+}
+
+export default CalendarYears;

package/Calendar/index.d.ts

@@ -0,0 +1,12 @@
+export { CalendarControlModifier, UseCalendarControlModifiersResult, useCalendarControlModifiers, } from './useCalendarControlModifiers';
+export { useCalendarModeStack, } from './useCalendarModeStack';
+export { useCalendarControls, } from './useCalendarControls';
+export { CalendarConfigs, CalendarConfigProviderProps, CalendarContext, useCalendarContext, default as CalendarConfigProvider, } from './CalendarContext';
+export { CalendarYearsProps, default as CalendarYears, } from './CalendarYears';
+export { CalendarWeeksProps, default as CalendarWeeks, } from './CalendarWeeks';
+export { CalendarMonthsProps, default as CalendarMonths, } from './CalendarMonths';
+export { CalendarDaysProps, default as CalendarDays, } from './CalendarDays';
+export { CalendarDayOfWeekProps, default as CalendarDayOfWeek, } from './CalendarDayOfWeek';
+export { CalendarControlsProps, default as CalendarControls, } from './CalendarControls';
+export { CalendarCellProps, default as CalendarCell, } from './CalendarCell';
+export { CalendarProps, default, } from './Calendar';

package/Calendar/index.js

@@ -0,0 +1,12 @@
+export { useCalendarControlModifiers } from './useCalendarControlModifiers.js';
+export { useCalendarModeStack } from './useCalendarModeStack.js';
+export { useCalendarControls } from './useCalendarControls.js';
+export { default as CalendarConfigProvider, CalendarContext, useCalendarContext } from './CalendarContext.js';
+export { default as CalendarYears } from './CalendarYears.js';
+export { default as CalendarWeeks } from './CalendarWeeks.js';
+export { default as CalendarMonths } from './CalendarMonths.js';
+export { default as CalendarDays } from './CalendarDays.js';
+export { default as CalendarDayOfWeek } from './CalendarDayOfWeek.js';
+export { default as CalendarControls } from './CalendarControls.js';
+export { default as CalendarCell } from './CalendarCell.js';
+export { default } from './Calendar.js';

package/Calendar/useCalendarControlModifiers.d.ts

@@ -0,0 +1,7 @@
+import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
+export declare type CalendarControlModifier = (value: DateType) => DateType;
+export declare type UseCalendarControlModifiersResult = Record<CalendarMode, [
+    CalendarControlModifier,
+    CalendarControlModifier
+]>;
+export declare function useCalendarControlModifiers(): UseCalendarControlModifiersResult;

package/Calendar/useCalendarControlModifiers.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+
+function useCalendarControlModifiers() {
+    const { addYear, addMonth, } = useCalendarContext();
+    return useMemo(() => ({
+        year: [
+            (date) => addYear(date, -12),
+            (date) => addYear(date, 12),
+        ],
+        month: [
+            (date) => addYear(date, -1),
+            (date) => addYear(date, 1),
+        ],
+        week: [
+            (date) => addMonth(date, -1),
+            (date) => addMonth(date, 1),
+        ],
+        day: [
+            (date) => addMonth(date, -1),
+            (date) => addMonth(date, 1),
+        ],
+    }), [addYear, addMonth]);
+}
+
+export { useCalendarControlModifiers };

package/Calendar/useCalendarControls.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="moment" />
+/// <reference types="react" />
+import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
+export declare function useCalendarControls(referenceDateProp: DateType, mode?: CalendarMode): {
+    currentMode: CalendarMode;
+    onMonthControlClick: () => void;
+    onNext: () => void;
+    onPrev: () => void;
+    onYearControlClick: () => void;
+    popModeStack: () => void;
+    referenceDate: import("moment").Moment;
+    updateReferenceDate: import("react").Dispatch<import("react").SetStateAction<import("moment").Moment>>;
+};

package/Calendar/useCalendarControls.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { useCalendarControlModifiers } from './useCalendarControlModifiers.js';
+import { useCalendarModeStack } from './useCalendarModeStack.js';
+
+function useCalendarControls(referenceDateProp, mode) {
+    const [referenceDate, setReferenceDate] = useState(referenceDateProp);
+    useEffect(() => {
+        setReferenceDate(referenceDateProp);
+    }, [referenceDateProp]);
+    const { currentMode, pushModeStack, popModeStack, } = useCalendarModeStack(mode || 'day');
+    const modifierGroup = useCalendarControlModifiers();
+    const onPrev = () => {
+        const [handleMinus] = modifierGroup[currentMode];
+        setReferenceDate(handleMinus(referenceDate));
+    };
+    const onNext = () => {
+        const [, handleAdd] = modifierGroup[currentMode];
+        setReferenceDate(handleAdd(referenceDate));
+    };
+    const onMonthControlClick = () => pushModeStack('month');
+    const onYearControlClick = () => pushModeStack('year');
+    return {
+        currentMode,
+        onMonthControlClick,
+        onNext,
+        onPrev,
+        onYearControlClick,
+        popModeStack,
+        referenceDate,
+        updateReferenceDate: setReferenceDate,
+    };
+}
+
+export { useCalendarControls };

package/Calendar/useCalendarModeStack.d.ts

@@ -0,0 +1,6 @@
+import { CalendarMode } from '@mezzanine-ui/core/calendar';
+export declare function useCalendarModeStack(mode: CalendarMode): {
+    currentMode: CalendarMode;
+    pushModeStack: (newMode: CalendarMode) => void;
+    popModeStack: () => void;
+};

package/Calendar/useCalendarModeStack.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+function useCalendarModeStack(mode) {
+    const [modeStack, setModeStack] = useState([mode]);
+    const [currentMode] = modeStack;
+    const pushModeStack = (newMode) => setModeStack((prev) => [newMode, ...prev]);
+    const popModeStack = () => setModeStack((prev) => (prev.length > 1 ? prev.slice(1, prev.length) : prev));
+    return {
+        currentMode,
+        pushModeStack,
+        popModeStack,
+    };
+}
+
+export { useCalendarModeStack };

package/Card/Card.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TypographyProps } from '../Typography';
+export interface CardProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title' | 'children'> {
+    /**
+     * Card footer actions.
+     */
+    actions?: ReactNode;
+    /**
+     * Card cover.
+    */
+    cover?: ReactNode;
+    /**
+     * The container of the text content(title, subtitle and description).
+     */
+    contentProps?: Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>;
+    /**
+     * Description under the subtitle. visible if value is not empty.
+     */
+    description?: string;
+    /**
+     * Description props
+     */
+    descriptionProps?: Omit<TypographyProps, 'children'>;
+    /**
+     * The container of the content and actions.
+     */
+    metaProps?: Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>;
+    /**
+     * Subtitle under the title. visible if value is not empty.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Subtitle props
+     */
+    subtitleProps?: Omit<TypographyProps, 'children'>;
+    /**
+     * Card title, visible if value is not empty.
+     */
+    title?: ReactNode;
+    /**
+     * Card title props
+     * @default 'variant: h3'
+     */
+    titleProps?: Omit<TypographyProps, 'children'>;
+}
+/**
+ * The react component for `mezzanine` card.
+ */
+declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Card;

package/Card/Card.js

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardClasses } from '@mezzanine-ui/core/card';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` card.
+ */
+const Card = forwardRef(function Card(props, ref) {
+    const { actions, className, contentProps, cover, description, descriptionProps, metaProps, subtitle, subtitleProps, title, titleProps, ...rest } = props;
+    const { variant = 'h3', } = titleProps || {};
+    const titleTypography = (title ? (jsx(Typography, Object.assign({ variant: variant }, titleProps, { children: title }), void 0)) : null);
+    const subtitleTypography = (subtitle ? (jsx(Typography, Object.assign({}, subtitleProps, { children: subtitle }), void 0)) : null);
+    const contentHeader = (titleTypography || subtitleTypography ? (jsxs("div", Object.assign({ className: cardClasses.metaContentsHeader }, { children: [titleTypography, subtitleTypography] }), void 0)) : null);
+    const descriptionTypography = (description ? (jsx(Typography, Object.assign({}, descriptionProps, { children: description }), void 0)) : null);
+    return (jsxs("div", Object.assign({ ref: ref, className: cx(cardClasses.host, className) }, rest, { children: [cover, jsxs("div", Object.assign({ className: cardClasses.meta }, metaProps, { children: [jsxs("div", Object.assign({ className: cardClasses.metaContents }, contentProps, { children: [contentHeader, descriptionTypography] }), void 0), actions] }), void 0)] }), void 0));
+});
+
+export default Card;

package/Card/CardActions.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../Button';
+import { ConfirmActionsProps } from '../ConfirmActions';
+export interface CardActionsProps extends ConfirmActionsProps {
+    /**
+     * Content of cancel button. not render if value is empty.
+     */
+    cancelText?: string;
+    /**
+     * Content of confirm button. not render if value is empty.
+     */
+    confirmText?: string;
+    /**
+     * Click handler for cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+    /**
+     * Indicate whether confirm button loading and cancel button disabled.
+     */
+    loading?: boolean;
+    /**
+     * The action bottom on the left. not render if value is empty.
+     */
+    otherActions?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` cardActions.
+ */
+declare const CardActions: import("react").ForwardRefExoticComponent<CardActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CardActions;

package/Card/CardActions.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cardActionsClasses } from '@mezzanine-ui/core/card';
+import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` cardActions.
+ */
+const CardActions = forwardRef(function CardActions(props, ref) {
+    const { cancelText, cancelButtonProps, className, confirmText, confirmButtonProps, hideCancelButton, hideConfirmButton, loading, onCancel, onConfirm, otherActions, ...rest } = props;
+    return (jsxs("div", Object.assign({ ref: ref, className: cx(cardActionsClasses.host, className) }, rest, { children: [otherActions || (jsx("div", {}, void 0)),
+            jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, hideCancelButton: hideCancelButton || !cancelText, hideConfirmButton: hideConfirmButton || !confirmText, loading: loading }, void 0)] }), void 0));
+});
+
+export default CardActions;

package/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { CardActionsProps, default as CardActions, } from './CardActions';
+export { CardProps, default, } from './Card';

package/Card/index.js

@@ -0,0 +1,2 @@
+export { default as CardActions } from './CardActions.js';
+export { default } from './Card.js';

package/Checkbox/CheckAll.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement, ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { CheckboxGroupProps } from './CheckboxGroup';
+export interface CheckAllProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    children?: ReactElement<CheckboxGroupProps>;
+    label?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` check all.
+ * Only support controlled.
+ */
+declare const CheckAll: import("react").ForwardRefExoticComponent<CheckAllProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CheckAll;