@mezzanine-ui/react 0.6.4

package/Picker/usePickerValue.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="moment" />
+import { DateType } from '@mezzanine-ui/core/calendar';
+import { RefObject } from 'react';
+export declare type UsePickerValueProps = {
+    defaultValue?: DateType;
+    format: string;
+    formats: string[];
+    inputRef: RefObject<HTMLInputElement>;
+    value?: DateType;
+};
+/**
+ * This hook keep tracks of an internal value.
+ */
+export declare function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }: UsePickerValueProps): {
+    inputValue: string;
+    onBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onChange: (val?: import("moment").Moment | undefined) => void;
+    onInputChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    value: import("moment").Moment | undefined;
+};

package/Picker/usePickerValue.js

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+import { usePickerInputValue } from './usePickerInputValue.js';
+
+/**
+ * This hook keep tracks of an internal value.
+ */
+function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }) {
+    const { formatToString, parse, valueLocale, } = useCalendarContext();
+    const inputDefaultValue = defaultValue ? formatToString(valueLocale, defaultValue, format) : '';
+    const [value, setValue] = useState(valueProp);
+    const onChange = (val) => {
+        setValue(val);
+    };
+    const onInputChange = (val) => {
+        const valDateType = parse(valueLocale, val, formats);
+        onChange(valDateType);
+    };
+    const { inputChangeHandler, inputValue, onChange: setInputValue, } = usePickerInputValue({
+        defaultValue: inputDefaultValue,
+        onChange: onInputChange,
+    });
+    useEffect(() => {
+        const valString = valueProp ? formatToString(valueLocale, valueProp, format) : '';
+        setInputValue(valString);
+        onChange(valueProp);
+    }, [valueProp]);
+    const onSyncInputAndStateChange = (val) => {
+        const valueString = val ? formatToString(valueLocale, val, format) : '';
+        setInputValue(valueString);
+        setValue(val);
+    };
+    const guardValidDateTypeOnEvents = () => {
+        if (!value) {
+            onSyncInputAndStateChange(valueProp);
+        }
+    };
+    const guardValidDateTypeOnKeyDown = (event) => {
+        var _a;
+        if (event.key === 'Enter' || event.key === 'Escape') {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            guardValidDateTypeOnEvents();
+        }
+    };
+    const onBlur = () => {
+        guardValidDateTypeOnEvents();
+    };
+    return {
+        inputValue,
+        onBlur,
+        onChange: onSyncInputAndStateChange,
+        onInputChange: inputChangeHandler,
+        onKeyDown: guardValidDateTypeOnKeyDown,
+        value,
+    };
+}
+
+export { usePickerValue };

package/Picker/useRangePickerValue.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="moment" />
+import { RangePickerPickingValue, RangePickerValue } from '@mezzanine-ui/core/picker';
+import { RefObject } from 'react';
+import { UsePickerValueProps } from './usePickerValue';
+export interface UseRangePickerValueProps extends Pick<UsePickerValueProps, 'format' | 'formats'> {
+    inputFromRef: RefObject<HTMLInputElement>;
+    inputToRef: RefObject<HTMLInputElement>;
+    value?: RangePickerValue;
+}
+export declare function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value: valueProp, }: UseRangePickerValueProps): {
+    inputFromValue: string;
+    inputToValue: string;
+    onChange: (target?: undefined[] | [import("moment").Moment, import("moment").Moment] | [import("moment").Moment] | [undefined, import("moment").Moment] | [import("moment").Moment, undefined] | undefined) => RangePickerPickingValue | undefined;
+    onFromBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onFromKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    onInputFromChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onInputToChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onToBlur: (event: import("react").FocusEvent<HTMLInputElement>) => void;
+    onToKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    value: RangePickerPickingValue;
+};

package/Picker/useRangePickerValue.js

@@ -0,0 +1,94 @@
+import { usePickerValue } from './usePickerValue.js';
+import { useCalendarContext } from '../Calendar/CalendarContext.js';
+
+function useRangePickerValue({ format, formats, inputFromRef, inputToRef, value: valueProp, }) {
+    const { parse: parseFromConfig, valueLocale, isBefore, } = useCalendarContext();
+    function parse(val) {
+        return parseFromConfig(valueLocale, val, formats);
+    }
+    function sortValues(valueToSort) {
+        const [v1, v2] = valueToSort;
+        return isBefore(v1, v2) ? [v1, v2] : [v2, v1];
+    }
+    const { inputValue: inputFromValue, onBlur: onFromBlur, onChange: onFromChange, onInputChange: onInputFromChange, onKeyDown: onFromKeyDown, value: from, } = usePickerValue({
+        format,
+        formats,
+        value: valueProp === null || valueProp === void 0 ? void 0 : valueProp[0],
+        inputRef: inputFromRef,
+    });
+    const { inputValue: inputToValue, onBlur: onToBlur, onChange: onToChange, onInputChange: onInputToChange, onKeyDown: onToKeyDown, value: to, } = usePickerValue({
+        format,
+        formats,
+        value: valueProp === null || valueProp === void 0 ? void 0 : valueProp[1],
+        inputRef: inputToRef,
+    });
+    const value = [from, to];
+    const onChange = (target) => {
+        const [newFrom, newTo] = target || [];
+        if (newFrom && newTo) {
+            const sortedVal = sortValues([newFrom, newTo]);
+            onFromChange(sortedVal[0]);
+            onToChange(sortedVal[1]);
+            return sortedVal;
+        }
+        onFromChange(target === null || target === void 0 ? void 0 : target[0]);
+        onToChange(target === null || target === void 0 ? void 0 : target[1]);
+        return target;
+    };
+    const onOrderGuardedInputFromChange = (event) => {
+        onInputFromChange(event);
+        const currentVal = parse(event.target.value);
+        if (currentVal && to) {
+            if (isBefore(to, currentVal)) {
+                onToChange(undefined);
+            }
+        }
+    };
+    const onOrderGuardedInputToChange = (event) => {
+        onInputToChange(event);
+        const currentVal = parse(event.target.value);
+        if (currentVal && from) {
+            if (isBefore(currentVal, from)) {
+                onFromChange(undefined);
+            }
+        }
+    };
+    const guardValidValueOnFromKeyDown = (event) => {
+        var _a, _b;
+        onFromKeyDown(event);
+        if (event.key === 'Enter') {
+            if (from && !to) {
+                (_a = inputToRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (to && !from) {
+                (_b = inputFromRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    };
+    const guardValidValueOnToKeyDown = (event) => {
+        var _a, _b;
+        onToKeyDown(event);
+        if (event.key === 'Enter') {
+            if (from && !to) {
+                (_a = inputToRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (to && !from) {
+                (_b = inputFromRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    };
+    return {
+        inputFromValue,
+        inputToValue,
+        onChange,
+        onFromBlur,
+        onFromKeyDown: guardValidValueOnFromKeyDown,
+        onInputFromChange: onOrderGuardedInputFromChange,
+        onInputToChange: onOrderGuardedInputToChange,
+        onToBlur,
+        onToKeyDown: guardValidValueOnToKeyDown,
+        value,
+    };
+}
+
+export { useRangePickerValue };

package/Picker/useTabKeyClose.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, RefObject } from 'react';
+export declare function useTabKeyClose(onClose: VoidFunction, lastElementRefInFlow: RefObject<HTMLElement>, deps?: DependencyList): void;

package/Picker/useTabKeyClose.js

@@ -0,0 +1,12 @@
+import { useDocumentTabKeyDown } from '../hooks/useDocumentTabKeyDown.js';
+
+function useTabKeyClose(onClose, lastElementRefInFlow, deps) {
+    useDocumentTabKeyDown(() => () => {
+        const { activeElement } = document;
+        if (activeElement === lastElementRefInFlow.current) {
+            onClose();
+        }
+    }, deps);
+}
+
+export { useTabKeyClose };

package/Popconfirm/Popconfirm.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { PopoverProps } from '../Popover';
+import { ConfirmActionsProps } from '../ConfirmActions';
+export interface PopconfirmProps extends PopoverProps, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'onCancel' | 'onConfirm'> {
+    /**
+     * Customize the icon on the popconfirm
+     */
+    icon?: IconDefinition;
+    /**
+     * the title of the confirmation box
+     */
+    title?: ReactNode;
+}
+declare const Popconfirm: import("react").ForwardRefExoticComponent<PopconfirmProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Popconfirm;

package/Popconfirm/Popconfirm.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ExclamationCircleFilledIcon } from '@mezzanine-ui/icons';
+import { popConfirmClasses } from '@mezzanine-ui/core/popconfirm';
+import Popover from '../Popover/Popover.js';
+import Icon from '../Icon/Icon.js';
+import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+import cx from 'clsx';
+
+const Popconfirm = forwardRef(function Popconfirm(props, ref) {
+    const { className, container, cancelButtonProps, cancelText, confirmButtonProps, confirmText, icon = ExclamationCircleFilledIcon, onCancel, onConfirm, title, ...rest } = props;
+    return (jsx(Popover, Object.assign({}, rest, { ref: ref, className: cx(popConfirmClasses.host, className), title: (jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }, void 0), title] }, void 0)) }, { children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }, void 0) }), void 0));
+});
+
+export default Popconfirm;

package/Popconfirm/index.d.ts

@@ -0,0 +1 @@
+export { PopconfirmProps, default, } from './Popconfirm';

package/Popconfirm/index.js

@@ -0,0 +1 @@
+export { default } from './Popconfirm.js';

package/Popover/Popover.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { PopperProps } from '../Popper';
+import { ClickAwayEvent } from '../hooks/useClickAway';
+export interface PopoverProps extends Omit<PopperProps, 'title'> {
+    /**
+     * Whether to disable triggering onClose while clicked away.
+     * @default false
+     */
+    disableClickAway?: boolean;
+    /**
+     * The handler fired while clicked away.
+     */
+    onClose?: (event: ClickAwayEvent) => void;
+    /**
+     * the title of popover
+     */
+    title?: ReactNode;
+}
+/**
+ * The react component for `mezzanine` popover.
+ */
+declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Popover;

package/Popover/Popover.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { popoverClasses } from '@mezzanine-ui/core/popover';
+import { useClickAway } from '../hooks/useClickAway.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Popper from '../Popper/Popper.js';
+import cx from 'clsx';
+
+const offsetModifier = {
+    name: 'offset',
+    options: {
+        offset: [0, 8],
+    },
+};
+/**
+ * The react component for `mezzanine` popover.
+ */
+const Popover = forwardRef(function Popover(props, ref) {
+    const { children, className, disableClickAway = false, onClose, open, options = {}, title, ...rest } = props;
+    const { modifiers = [] } = options;
+    const popoverRef = useRef(null);
+    const composedRef = useComposeRefs([ref, popoverRef]);
+    useClickAway(() => {
+        if (!open || disableClickAway || !onClose) {
+            return;
+        }
+        return (event) => {
+            if (onClose) {
+                onClose(event);
+            }
+        };
+    }, popoverRef, [
+        open,
+        disableClickAway,
+        onClose,
+        popoverRef,
+    ]);
+    return (jsxs(Popper, Object.assign({}, rest, { ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
+            ...options,
+            modifiers: [offsetModifier, ...modifiers],
+        } }, { children: [title && jsx("div", Object.assign({ className: popoverClasses.title }, { children: title }), void 0),
+            children && jsx("div", Object.assign({ className: popoverClasses.content }, { children: children }), void 0)] }), void 0));
+});
+
+export default Popover;

package/Popover/index.d.ts

@@ -0,0 +1 @@
+export { PopoverProps, default, } from './Popover';

package/Popover/index.js

@@ -0,0 +1 @@
+export { default } from './Popover.js';

package/Popper/Popper.d.ts

@@ -0,0 +1,32 @@
+import { Options as _PopperOptions } from '@popperjs/core';
+import { Ref } from 'react';
+import { Modifier, usePopper } from 'react-popper';
+import { ElementGetter } from '../utils/getElement';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { PortalProps } from '../Portal';
+export type { Placement as PopperPlacement, PositioningStrategy as PopperPositionStrategy, } from '@popperjs/core';
+export declare type PopperOptions<Modifiers> = Omit<Partial<_PopperOptions>, 'modifiers'> & {
+    modifiers?: ReadonlyArray<Modifier<Modifiers>>;
+};
+export declare type PopperController = ReturnType<typeof usePopper>;
+export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The ref of trigger Element.
+     */
+    anchor?: ElementGetter;
+    /**
+     * Provide `controllerRef` if you need access to `usePopper` results.
+     */
+    controllerRef?: Ref<PopperController>;
+    /**
+     * The portal element will show if open=true
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The options of usePopper hook of react-popper.
+     */
+    options?: PopperOptions<any>;
+}
+declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Popper;

package/Popper/Popper.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useImperativeHandle } from 'react';
+import { usePopper } from 'react-popper';
+import { getElement } from '../utils/getElement.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Portal from '../Portal/Portal.js';
+
+const Popper = forwardRef(function Popper(props, ref) {
+    const { anchor, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
+    const [popperEl, setPopperEl] = useState(null);
+    const composedRef = useComposeRefs([ref, setPopperEl]);
+    const anchorEl = getElement(anchor);
+    const { attributes, forceUpdate, state, styles, update, } = usePopper(anchorEl, popperEl, options);
+    useImperativeHandle(controllerRef, () => ({
+        attributes,
+        forceUpdate,
+        state,
+        styles,
+        update,
+    }));
+    if (!open) {
+        return null;
+    }
+    return (jsx(Portal, Object.assign({ container: container, disablePortal: disablePortal }, { children: jsx("div", Object.assign({}, rest, { ref: composedRef, style: {
+                ...style,
+                ...styles.popper,
+            } }, attributes.popper, { children: children }), void 0) }), void 0));
+});
+
+export default Popper;

package/Popper/index.d.ts

@@ -0,0 +1 @@
+export { PopperPlacement, PopperPositionStrategy, PopperOptions, PopperController, PopperProps, default, } from './Popper';

package/Popper/index.js

@@ -0,0 +1 @@
+export { default } from './Popper.js';

package/Portal/Portal.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react';
+import { ElementGetter } from '../utils/getElement';
+export interface PortalProps {
+    /**
+     * The element you want to portal.
+     */
+    children?: ReactNode;
+    /**
+     * The destination where to portal.
+     */
+    container?: ElementGetter;
+    /**
+     * Whether to disable portal.
+     * If true, it will be a normal component.
+     * @default false
+     */
+    disablePortal?: boolean;
+}
+declare const Portal: FC<PortalProps>;
+export default Portal;

package/Portal/Portal.js

@@ -0,0 +1,22 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { getElement } from '../utils/getElement.js';
+
+const Portal = (props) => {
+    const { children, container, disablePortal = false, } = props;
+    const [portalElement, setPortalElement] = useState(() => (disablePortal
+        ? null
+        : getElement(container) || document.body));
+    useEffect(() => {
+        if (!disablePortal) {
+            setPortalElement(getElement(container) || document.body);
+        }
+    }, [container, disablePortal]);
+    if (disablePortal || !portalElement) {
+        return jsx(Fragment, { children: children }, void 0);
+    }
+    return createPortal(children, portalElement);
+};
+
+export default Portal;

package/Portal/index.d.ts

@@ -0,0 +1 @@
+export { PortalProps, default, } from './Portal';

package/Portal/index.js

@@ -0,0 +1 @@
+export { default } from './Portal.js';

package/Progress/Progress.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { ProgressType, ProgressStatus } from '@mezzanine-ui/core/progress';
+import { Size } from '@mezzanine-ui/system/size';
+import { TypographyProps } from '../Typography';
+import { IconProps } from '../Icon';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ProgressProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'title' | 'children'> {
+    /**
+     * Customize circle.
+     * circle radius = (size - strokeWidth) / 2
+     * @default size=80,strokeWidth=8
+     */
+    circleProps?: {
+        size: number;
+        strokeWidth: number;
+    };
+    /**
+     * Icon props when status is 'error'.
+     */
+    errorIconProps?: Omit<IconProps, 'className'>;
+    /**
+     * The progress percent(0~100).
+     * @default 0
+     */
+    percent?: number;
+    /**
+     * Percent text props when status is 'normal'.
+     */
+    percentProps?: Omit<TypographyProps, 'className' | 'children'>;
+    /**
+     * Force mark the progress status. automatically set if not defined.
+     * (normal(0~99) or success(100) depending on percent)
+     */
+    status?: ProgressStatus;
+    /**
+     * The size of line type progress.
+     * @default 'medium'
+     */
+    size?: Size;
+    /**
+     * Display the progress info(percent and icon) or not.
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * Icon props when status is 'success'.
+     */
+    successIconProps?: Omit<IconProps, 'className'>;
+    /**
+     * The type of progress.
+     * @default 'line'
+     */
+    type?: ProgressType;
+}
+/**
+ * The react component for `mezzanine` progress.
+ */
+declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Progress;

package/Progress/Progress.js

@@ -0,0 +1,32 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ProgressStatuses, ProgressTypes, progressClasses } from '@mezzanine-ui/core/progress';
+import { CheckCircleFilledIcon, CheckIcon, TimesCircleFilledIcon, TimesIcon } from '@mezzanine-ui/icons';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` progress.
+ */
+const Progress = forwardRef(function Progress(props, ref) {
+    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = 'medium', status = percent < 100 ? ProgressStatuses.normal : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
+    const percentLimited = Math.max(0, Math.min(100, percent));
+    const defaultSuccessIcon = type === ProgressTypes.line ? CheckCircleFilledIcon : CheckIcon;
+    const defaultErrorIcon = type === ProgressTypes.line ? TimesCircleFilledIcon : TimesIcon;
+    const renderInfo = (variant) => (jsx("div", Object.assign({ className: progressClasses.info }, { children: status === ProgressStatuses.normal
+            ? /** percent text */ (jsx(Typography, Object.assign({ className: progressClasses.infoPercent, variant: variant }, percentProps, { children: `${percentLimited}%` }), void 0)) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultSuccessIcon }, successIconProps), void 0)),
+                status === ProgressStatuses.error && (jsx(Icon, Object.assign({ className: progressClasses.infoIcon, icon: defaultErrorIcon }, errorIconProps), void 0))] }, void 0)) }), void 0));
+    const renderLine = () => (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: progressClasses.lineBg }, { children: jsx("div", { style: { width: `${percentLimited}%` } }, void 0) }), void 0), showInfo && renderInfo('input3')] }, void 0));
+    const renderCircle = () => {
+        const { size: circleSize = 80, strokeWidth = 8, } = circleProps || {};
+        const radius = (circleSize - strokeWidth) / 2;
+        const progressLength = percent > 0 ? percent * radius * Math.PI * 0.02 : 0.00001;
+        const circleXY = circleSize / 2;
+        return (jsxs(Fragment, { children: [jsxs("svg", Object.assign({ style: { boxSizing: 'border-box' }, height: circleSize, width: circleSize }, { children: [jsx("circle", { className: progressClasses.circleBg, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth }, void 0),
+                        jsx("circle", { className: progressClasses.circleFiller, cx: circleXY, cy: circleXY, r: radius, strokeWidth: strokeWidth, strokeDasharray: `${progressLength.toString()} 999` }, void 0)] }), void 0), showInfo && renderInfo('button3')] }, void 0));
+    };
+    return (jsxs("div", Object.assign({ ref: ref, className: cx(progressClasses.host, className, status === ProgressStatuses.success && progressClasses.success, status === ProgressStatuses.error && progressClasses.error, type === ProgressTypes.line && progressClasses.lineVariant, type === ProgressTypes.circle && progressClasses.circleVariant, progressClasses.size(size)) }, rest, { children: [type === ProgressTypes.line && renderLine(), type === ProgressTypes.circle && renderCircle()] }), void 0));
+});
+
+export default Progress;

package/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export type { ProgressType, ProgressTypes, ProgressStatus, ProgressStatuses, } from '@mezzanine-ui/core/progress';
+export { ProgressProps, default, } from './Progress';

package/Progress/index.js

@@ -0,0 +1 @@
+export { default } from './Progress.js';

package/README.md

@@ -0,0 +1 @@
+# @mezzanine-ui/react

package/Radio/Radio.d.ts

@@ -0,0 +1,41 @@
+import { ChangeEventHandler } from 'react';
+import { RadioSize } from '@mezzanine-ui/core/radio';
+import { InputCheckProps } from '../_internal/InputCheck';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface RadioProps extends Omit<InputCheckProps, 'control' | 'htmlFor'> {
+    /**
+     * Whether the radio is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the radio is checked by default.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Since at Mezzanine we use a host element to wrap our input, most derived props will be passed to the host element.
+     *  If you need direct control to the input element, use this prop to provide to it.
+     *
+     * Noticed that if you pass an id within this prop,
+     *  the rendered label element will have `htmlFor` sync with passed in id.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value' | `aria-${'disabled' | 'checked'}`>;
+    /**
+     * The change event handler of input in radio.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The size of radio.
+     * @default 'medium'
+     */
+    size?: RadioSize;
+    /**
+     * The value of input in radio.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` radio.
+ */
+declare const Radio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Radio;

package/Radio/Radio.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext } from 'react';
+import { radioClasses } from '@mezzanine-ui/core/radio';
+import { useRadioControlValue } from '../Form/useRadioControlValue.js';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import InputCheck from '../_internal/InputCheck/InputCheck.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` radio.
+ */
+const Radio = forwardRef(function Radio(props, ref) {
+    const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
+    const radioGroup = useContext(RadioGroupContext);
+    const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = radioGroup || {};
+    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || 'medium', value, ...rest } = props;
+    const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
+    const [checked, onChange] = useRadioControlValue({
+        checked: checkedProp,
+        defaultChecked,
+        onChange: onChangeProp,
+        radioGroup,
+        value,
+    });
+    return (jsx(InputCheck, Object.assign({}, rest, { ref: ref, control: (jsx("span", Object.assign({ className: cx(radioClasses.host, {
+                [radioClasses.checked]: checked,
+            }) }, { children: jsx("input", Object.assign({}, restInputProps, { "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }), void 0) }), void 0)), disabled: disabled, error: error, htmlFor: inputId, size: size }, { children: children }), void 0));
+});
+
+export default Radio;