@mezzanine-ui/react 0.6.4

package/Button/Button.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { SpinnerIcon } from '@mezzanine-ui/icons';
+import { buttonClasses } from '@mezzanine-ui/core/button';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` button.
+ */
+const Button = forwardRef(function Button(props, ref) {
+    const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = 'medium', suffix: suffixProp, variant = 'text', ...rest } = props;
+    let prefix = prefixProp;
+    let suffix = suffixProp;
+    if (loading) {
+        const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true }, void 0);
+        if (suffix && !prefix) {
+            suffix = loadingIcon;
+        }
+        else {
+            prefix = loadingIcon;
+        }
+    }
+    const asIconBtn = children == null && !!(prefix || suffix);
+    return (jsxs(Component, Object.assign({}, rest, { ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.color(color), buttonClasses.size(size), {
+            [buttonClasses.danger]: danger,
+            [buttonClasses.disabled]: disabled,
+            [buttonClasses.icon]: asIconBtn,
+            [buttonClasses.loading]: loading,
+        }, className), disabled: disabled, onClick: (event) => {
+            if (!disabled && !loading && onClick) {
+                onClick(event);
+            }
+        } }, { children: [prefix, children && jsx("span", Object.assign({ className: buttonClasses.label }, { children: children }), void 0), suffix] }), void 0));
+});
+
+export default Button;

package/Button/ButtonGroup.d.ts

@@ -0,0 +1,63 @@
+import { ReactElement } from 'react';
+import { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ButtonProps } from './Button';
+import { IconButtonProps } from './IconButton';
+export declare type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
+export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * If `true`, all buttons will not have spacing between each others.
+     * @default false
+     */
+    attached?: boolean;
+    /**
+     * Only accept button elements or icon button elements.
+     */
+    children: ButtonGroupChild | ButtonGroupChild[];
+    /**
+     * If the `color` of a button inside group not provided, the `color` of group will override it.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * If the `danger` of a button inside group not provided, the `danger` of group will override it.
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * If the `disabled` of a button inside group not provided, the `disabled` of group will override it.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, set width: 100%.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The orientation of button group.
+     * @default horizontal
+     */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * If the `size` of a button inside group not provided, the `size` of group will override it.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The spacing level of button gap between each buttons.
+     * Will be added on if `attached`=false.
+     * @default small:3,others:4
+     */
+    spacing?: ButtonGroupSpacing;
+    /**
+     * If the `variant` of a button inside group not provided, the `variant` of group will override it.
+     * @default 'text'
+     */
+    variant?: ButtonVariant;
+}
+/**
+ * The react component for `mezzanine` button group.
+ */
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ButtonGroup;

package/Button/ButtonGroup.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, cloneElement } from 'react';
+import { toButtonGroupCssVars, buttonGroupClasses } from '@mezzanine-ui/core/button';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` button group.
+ */
+const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
+    const { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = 'medium', spacing, style: styleProp, variant = 'text', ...rest } = props;
+    const cssVars = toButtonGroupCssVars({ size, spacing });
+    const style = {
+        ...styleProp,
+        ...cssVars,
+    };
+    return (jsx("div", Object.assign({ ref: ref }, rest, { "aria-orientation": orientation, className: cx(buttonGroupClasses.host, buttonGroupClasses.orientation(orientation), {
+            [buttonGroupClasses.fullWidth]: fullWidth,
+            [buttonGroupClasses.attached]: attached,
+        }, className), role: role, style: style }, { children: Children.map(children, (unknownChild) => {
+            var _a, _b;
+            const child = unknownChild;
+            if (!child) {
+                return null;
+            }
+            return cloneElement(child, {
+                color: child.props.color || color,
+                danger: (_a = child.props.danger) !== null && _a !== void 0 ? _a : danger,
+                disabled: (_b = child.props.disabled) !== null && _b !== void 0 ? _b : disabled,
+                size: child.props.size || size,
+                variant: child.props.variant || variant,
+            });
+        }) }), void 0));
+});
+
+export default ButtonGroup;

package/Button/IconButton.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { ButtonComponent, ButtonPropsBase } from './typings';
+export declare type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
+    /**
+     * The icon element.
+     */
+    children?: ReactNode;
+}>;
+/**
+ * The react component for `mezzanine` button only has icon.
+ */
+declare const IconButton: import("react").ForwardRefExoticComponent<Pick<Pick<Pick<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "prefix" | "color" | "disabled" | "key" | "form" | "slot" | "style" | "title" | "children" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "prefix" | "color" | "disabled" | "form" | "slot" | "style" | "title" | "children" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, "prefix" | "form" | "slot" | "style" | "title" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & Pick<ButtonPropsBase, "color" | "danger" | "disabled" | "loading" | "size" | "variant"> & {
+    /**
+     * The icon element.
+     */
+    children?: ReactNode;
+}, "prefix" | "color" | "danger" | "disabled" | "loading" | "size" | "variant" | "form" | "slot" | "style" | "title" | "children" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    component?: "button" | "a" | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>) | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/Button/IconButton.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import Button from './Button.js';
+
+/**
+ * The react component for `mezzanine` button only has icon.
+ */
+const IconButton = forwardRef(function IconButton(props, ref) {
+    const { children, ...rest } = props;
+    return (jsx(Button, Object.assign({}, rest, { ref: ref, prefix: children }), void 0));
+});
+
+export default IconButton;

package/Button/index.d.ts

@@ -0,0 +1,20 @@
+import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { ButtonComponent, ButtonPropsBase } from './typings';
+import { ButtonProps } from './Button';
+import { IconButtonProps } from './IconButton';
+export type { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
+export { ButtonGroupChild, ButtonGroupProps, default as ButtonGroup } from './ButtonGroup';
+export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps, };
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+declare type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+export declare const IconButton: GenericIconButton;
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+declare type GenericButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<ButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+declare const _default: GenericButton;
+export default _default;

package/Button/index.js

@@ -0,0 +1,8 @@
+import Button from './Button.js';
+export { default } from './Button.js';
+import IconButton$1 from './IconButton.js';
+export { default as ButtonGroup } from './ButtonGroup.js';
+
+const IconButton = IconButton$1;
+
+export { IconButton };

package/Button/typings.d.ts

@@ -0,0 +1,44 @@
+import { JSXElementConstructor, ReactNode } from 'react';
+import { ButtonColor, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+export declare type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
+export interface ButtonPropsBase {
+    /**
+     * The color name provided by palette.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * If true, will use error color instead of color from props.
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * If true, button will be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, replace the original icon.
+     * Replace suffix if only suffix provided, or prefix.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The element placed on the start of button.
+     */
+    prefix?: ReactNode;
+    /**
+     * The size of button.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The element placed on the end of button.
+     */
+    suffix?: ReactNode;
+    /**
+     * The variant of button.
+     * @default 'text'
+     */
+    variant?: ButtonVariant;
+}

package/Calendar/Calendar.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { CalendarMode, DateType } from '@mezzanine-ui/core/calendar';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { CalendarControlsProps } from './CalendarControls';
+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'> {
+    /**
+     * Other props you may provide to `CalendarDays`
+     */
+    calendarDaysProps?: Omit<CalendarDaysProps, 'onClick' | 'referenceDate' | 'value' | 'displayWeekDayLocale' | 'isDateDisabled' | 'isDateInRange' | 'onDateHover' | 'updateReferenceDate'>;
+    /**
+     * Other props you may provide to `CalendarMonths`
+     */
+    calendarMonthsProps?: Omit<CalendarMonthsProps, 'onClick' | 'referenceDate' | 'value' | 'isMonthDisabled' | 'isMonthInRange' | 'onMonthHover' | 'displayMonthLocale'>;
+    /**
+     * Other props you may provide to `CalendarWeeks`
+     */
+    calendarWeeksProps?: Omit<CalendarWeeksProps, 'onClick' | 'referenceDate' | 'value' | 'displayWeekDayLocale' | 'isWeekDisabled' | 'isWeekInRange' | 'onWeekHover'>;
+    /**
+     * Other props you may provide to `CalendarYears`
+     */
+    calendarYearsProps?: Omit<CalendarYearsProps, 'onClick' | 'referenceDate' | 'value' | 'isYearDisabled' | 'isYearInRange' | 'onYearHover'>;
+    /**
+     * Use this prop to switch calendars.
+     * @default 'day'
+     */
+    mode?: CalendarMode;
+    /**
+     * Click handler for every cell on calendars.
+     */
+    onChange?: (target: DateType) => void;
+    /**
+     * Click handler for control button of month.
+     */
+    onMonthControlClick?: VoidFunction;
+    /**
+     * Click handler for control button of next.
+     */
+    onNext?: (currentMode: CalendarMode) => void;
+    /**
+     * Click handler for control button of prev.
+     */
+    onPrev?: (currentMode: CalendarMode) => void;
+    /**
+     * Click handler for control button of year.
+     */
+    onYearControlClick?: VoidFunction;
+    /**
+     * The refernce date for getting the calendar.
+     * **The type of `referenceDate` should be the same as your declared `DateType`.**
+     */
+    referenceDate: DateType;
+    /**
+     * The displaying cells will be marked as active
+     * if the single value of it matches any date object in the array. <br />
+     * **The type of `value` should be the same as your declared `DateType`.**
+     */
+    value?: DateType | DateType[];
+}
+/**
+ * The react component for `mezzanine` calendar. <br />
+ * Notice that any component related to calendar should be used along with `CalendarContext`. <br />
+ * You may use the handlers provided by `useCalendarControls` hook or your own customizd methods.
+ */
+declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Calendar;

package/Calendar/Calendar.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { getYearRange, calendarYearModuler, calendarClasses } from '@mezzanine-ui/core/calendar';
+import castArray from 'lodash/castArray';
+import { forwardRef } from 'react';
+import { useCalendarContext } from './CalendarContext.js';
+import CalendarControls from './CalendarControls.js';
+import CalendarDays from './CalendarDays.js';
+import CalendarMonths from './CalendarMonths.js';
+import CalendarWeeks from './CalendarWeeks.js';
+import CalendarYears from './CalendarYears.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar. <br />
+ * Notice that any component related to calendar should be used along with `CalendarContext`. <br />
+ * 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, disableOnNext, disableOnPrev, 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 value = valueProp && castArray(valueProp);
+    /** Compute which calendar to use */
+    let displayCalendar;
+    if (mode === 'day') {
+        displayCalendar = (jsx(CalendarDays, Object.assign({}, calendarDaysProps, { isDateDisabled: isDateDisabled, isDateInRange: isDateInRange, onClick: onChange, onDateHover: onDateHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }), void 0));
+    }
+    else if (mode === 'week') {
+        displayCalendar = (jsx(CalendarWeeks, Object.assign({}, calendarWeeksProps, { isWeekDisabled: isWeekDisabled, isWeekInRange: isWeekInRange, onClick: onChange, onWeekHover: onWeekHover, referenceDate: referenceDate, displayWeekDayLocale: displayWeekDayLocale, value: value }), void 0));
+    }
+    else if (mode === 'month') {
+        displayCalendar = (jsx(CalendarMonths, Object.assign({}, calendarMonthsProps, { isMonthDisabled: isMonthDisabled, isMonthInRange: isMonthInRange, onClick: onChange, onMonthHover: onMonthHover, referenceDate: referenceDate, value: value }), void 0));
+    }
+    else if (mode === 'year') {
+        displayCalendar = (jsx(CalendarYears, Object.assign({}, calendarYearsProps, { isYearDisabled: isYearDisabled, isYearInRange: isYearInRange, onClick: onChange, onYearHover: onYearHover, referenceDate: referenceDate, value: value }), void 0));
+    }
+    /** 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", Object.assign({ type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onMonthControlClick }, { children: getMonthShortName(getMonth(referenceDate), displayMonthLocale) }), void 0),
+                jsx("button", Object.assign({ type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onYearControlClick }, { children: getYear(referenceDate) }), void 0)] }, void 0));
+    }
+    else if (mode === 'month') {
+        controls = (jsx("button", Object.assign({ type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton), onClick: onYearControlClick }, { children: getYear(referenceDate) }), void 0));
+    }
+    else if (mode === 'year') {
+        controls = (jsx("button", Object.assign({ type: "button", className: cx(calendarClasses.button, calendarClasses.controlsButton, calendarClasses.buttonDisabled), disabled: true, "aria-disabled": true }, { children: displayYearRange }), void 0));
+    }
+    return (jsxs("div", Object.assign({}, restCalendarProps, { ref: ref, className: cx(calendarClasses.host, className) }, { children: [jsx(CalendarControls, Object.assign({ disableOnNext: disableOnNext, disableOnPrev: disableOnPrev, onNext: onNext ? () => { onNext(mode); } : undefined, onPrev: onPrev ? () => { onPrev(mode); } : undefined }, { children: controls }), void 0), displayCalendar] }), void 0));
+});
+
+export default Calendar;

package/Calendar/CalendarCell.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarCellProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Apply active styles if true.
+     */
+    active?: boolean;
+    /**
+     * Apply disabled styles if true.
+     */
+    disabled?: boolean;
+    /**
+     * Apply today styles if true.
+     */
+    today?: boolean;
+}
+/**
+ * The react component for `mezzanine` calendar cell.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarCell(props: CalendarCellProps): JSX.Element;
+export default CalendarCell;

package/Calendar/CalendarCell.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar cell.
+ * You may use it to compose your own calendar.
+ */
+function CalendarCell(props) {
+    const { active, children, className, disabled, onClick, today, ...restCalendarCellProps } = props;
+    return (jsx("div", Object.assign({ className: cx(calendarClasses.cell, {
+            [calendarClasses.cellActive]: active,
+            [calendarClasses.cellDisabled]: disabled,
+            [calendarClasses.cellToday]: today,
+        }, className) }, restCalendarCellProps, { children: jsx("span", Object.assign({ className: calendarClasses.cellInner }, { children: children }), void 0) }), void 0));
+}
+
+export default CalendarCell;

package/Calendar/CalendarContext.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { CalendarMethods, DateType } from '@mezzanine-ui/core/calendar';
+export interface CalendarConfigs extends CalendarMethods<DateType> {
+    defaultDateFormat: string;
+    defaultTimeFormat: string;
+    displayMonthLocale: string;
+    displayWeekDayLocale: string;
+    valueLocale: string;
+}
+export declare type CalendarConfigProviderProps = {
+    children?: ReactNode;
+    defaultDateFormat?: string;
+    defaultTimeFormat?: string;
+    displayMonthLocale?: string;
+    displayWeekDayLocale?: string;
+    methods: CalendarMethods<DateType>;
+    valueLocale?: string;
+};
+export declare const CalendarContext: import("react").Context<CalendarConfigs | undefined>;
+export declare function useCalendarContext(): CalendarConfigs;
+declare function CalendarConfigProvider(props: CalendarConfigProviderProps): JSX.Element;
+export default CalendarConfigProvider;

package/Calendar/CalendarContext.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+
+const CalendarContext = createContext(undefined);
+function useCalendarContext() {
+    const configs = useContext(CalendarContext);
+    if (!configs) {
+        throw new Error('Cannot find values in your context. ' +
+            'Make sure you use `CalendarConfigProvider` in your app ' +
+            'and pass in one of the following as methods: `CalendarMethodsMoment`.');
+    }
+    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;
+    return (jsx(CalendarContext.Provider, Object.assign({ value: {
+            ...methods,
+            defaultDateFormat,
+            defaultTimeFormat,
+            displayMonthLocale,
+            displayWeekDayLocale,
+            valueLocale,
+        } }, { children: children }), void 0));
+}
+
+export default CalendarConfigProvider;
+export { CalendarContext, useCalendarContext };

package/Calendar/CalendarControls.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarControlsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick'> {
+    /**
+     * Disable the next controller if true.
+     */
+    disableOnNext?: boolean;
+    /**
+     * Disable the prev controller if true.
+     */
+    disableOnPrev?: boolean;
+    /**
+     * Click handler for next controller.
+     */
+    onNext?: VoidFunction;
+    /**
+     * Click handler for prev controller.
+     */
+    onPrev?: VoidFunction;
+}
+/**
+ * The react component for `mezzanine` calendar controls.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarControls(props: CalendarControlsProps): JSX.Element;
+export default CalendarControls;

package/Calendar/CalendarControls.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import { ChevronLeftIcon, ChevronRightIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar controls.
+ * You may use it to compose your own calendar.
+ */
+function CalendarControls(props) {
+    const { children, className, disableOnNext, disableOnPrev, onNext, onPrev, ...restElementProps } = props;
+    return (jsxs("div", Object.assign({}, restElementProps, { className: cx(calendarClasses.controls, className) }, { children: [onPrev && (jsx("button", Object.assign({ 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 }, void 0) }), void 0)), children, onNext && (jsx("button", Object.assign({ 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 }, void 0) }), void 0))] }), void 0));
+}
+
+export default CalendarControls;

package/Calendar/CalendarDayOfWeek.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface CalendarDayOfWeekProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onClick' | 'children'> {
+    /**
+     * The locale you want to use when rendering the name of week day.
+     * If none provided, it will use the `displayWeekDayLocale` from calendar context.
+     */
+    displayWeekDayLocale?: string;
+}
+/**
+ * The react component for `mezzanine` calendar day of week.
+ * You may use it to compose your own calendar.
+ */
+declare function CalendarDayOfWeek(props: CalendarDayOfWeekProps): JSX.Element;
+export default CalendarDayOfWeek;

package/Calendar/CalendarDayOfWeek.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { calendarClasses } from '@mezzanine-ui/core/calendar';
+import CalendarCell from './CalendarCell.js';
+import { useCalendarContext } from './CalendarContext.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` calendar day of week.
+ * You may use it to compose your own calendar.
+ */
+function CalendarDayOfWeek(props) {
+    const { getWeekDayNames, displayWeekDayLocale: displayWeekDayLocaleFromConfig, } = useCalendarContext();
+    const { displayWeekDayLocale = displayWeekDayLocaleFromConfig, className, ...restRowProps } = props;
+    const weekDayNames = getWeekDayNames(displayWeekDayLocale);
+    return (jsx("div", Object.assign({ className: cx(calendarClasses.row, className) }, restRowProps, { children: weekDayNames.map((name) => (jsx(CalendarCell, { children: name }, `CALENDAR_DAY_OF_WEEK/${name}`))) }), void 0));
+}
+
+export default CalendarDayOfWeek;