@onesy/ui-react 1.0.0

package/Confirm/Confirm.js

@@ -0,0 +1,133 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Button_1 = __importDefault(require("../Button"));
+const Context_1 = __importDefault(require("./Context"));
+const ModalHeader_1 = __importDefault(require("../ModalHeader"));
+const ModalFooter_1 = __importDefault(require("../ModalFooter"));
+const ModalTitle_1 = __importDefault(require("../ModalTitle"));
+const ModalMain_1 = __importDefault(require("../ModalMain"));
+const ModalText_1 = __importDefault(require("../ModalText"));
+const Modal_1 = __importDefault(require("../Modal"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        '& .onesy-ModalMain-root': {
+            padding: `6px 0 10px`
+        },
+        '& .onesy-ModalFooter-root': {
+            padding: `12px 0 12px`
+        },
+        '& .onesy-Modal-background:not(.onesy-Modal-background-invisible)': {
+            background: theme.methods.palette.color.colorToRgb(theme.methods.palette.color.value('default', 10), theme.palette.light ? 20 : 40)
+        }
+    },
+    surface: {
+        '&.onesy-Surface-root': {
+            background: theme.palette.color.primary[theme.palette.light ? 99 : 5],
+            paddingBottom: '8px'
+        }
+    }
+}), { name: 'onesy-Confirm' });
+const Confirm = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c, _d;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyConfirm) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const ModalHeader = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalHeader) || ModalHeader_1.default; }, [theme]);
+    const ModalFooter = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalFooter) || ModalFooter_1.default; }, [theme]);
+    const ModalTitle = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalTitle) || ModalTitle_1.default; }, [theme]);
+    const ModalMain = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalMain) || ModalMain_1.default; }, [theme]);
+    const ModalText = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ModalText) || ModalText_1.default; }, [theme]);
+    const Modal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Modal) || Modal_1.default; }, [theme]);
+    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
+    const { throwError, onOpen, onClose, className, children } = props, other = __rest(props, ["throwError", "onOpen", "onClose", "className", "children"]);
+    const { classes } = useStyle();
+    const [openModal, setOpenModal] = react_1.default.useState(false);
+    const refs = {
+        value: react_1.default.useRef({}),
+        modal: react_1.default.useRef(),
+        props: react_1.default.useRef(undefined),
+        promise: {
+            resolve: react_1.default.useRef(undefined),
+            reject: react_1.default.useRef(undefined)
+        }
+    };
+    refs.props.current = props;
+    const open = react_1.default.useCallback((value) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        if (!openModal) {
+            refs.modal.current = Object.assign({}, value);
+            // Defaults
+            refs.modal.current.name = (value === null || value === void 0 ? void 0 : value.name) !== undefined ? value === null || value === void 0 ? void 0 : value.name : 'Confirmation';
+            refs.modal.current.description = (value === null || value === void 0 ? void 0 : value.description) !== undefined ? value === null || value === void 0 ? void 0 : value.description : 'Are you sure you want to proceed?';
+            if (((_b = (_a = refs.modal.current.buttons) === null || _a === void 0 ? void 0 : _a.negative) === null || _b === void 0 ? void 0 : _b.text) === undefined)
+                (0, utils_1.setObjectValue)(refs.modal.current, 'buttons.negative.text', '');
+            if (((_d = (_c = refs.modal.current.buttons) === null || _c === void 0 ? void 0 : _c.positive) === null || _d === void 0 ? void 0 : _d.text) === undefined)
+                (0, utils_1.setObjectValue)(refs.modal.current, 'buttons.positive.text', '');
+            refs.modal.current.buttons.negative.text = ((_f = (_e = value === null || value === void 0 ? void 0 : value.buttons) === null || _e === void 0 ? void 0 : _e.negative) === null || _f === void 0 ? void 0 : _f.text) !== undefined ? (_h = (_g = value === null || value === void 0 ? void 0 : value.buttons) === null || _g === void 0 ? void 0 : _g.negative) === null || _h === void 0 ? void 0 : _h.text : 'Cancel';
+            refs.modal.current.buttons.positive.text = ((_k = (_j = value === null || value === void 0 ? void 0 : value.buttons) === null || _j === void 0 ? void 0 : _j.positive) === null || _k === void 0 ? void 0 : _k.text) !== undefined ? (_m = (_l = value === null || value === void 0 ? void 0 : value.buttons) === null || _l === void 0 ? void 0 : _l.positive) === null || _m === void 0 ? void 0 : _m.text : 'Confirm';
+            refs.modal.current.throwError = (value === null || value === void 0 ? void 0 : value.throwError) !== undefined ? value.throwError : refs.props.current.throwError;
+            const promise = new Promise((resolve, reject) => {
+                refs.promise.resolve.current = resolve;
+                refs.promise.reject.current = reject;
+            });
+            setOpenModal(true);
+            if ((0, utils_1.is)('function', onOpen))
+                onOpen();
+            return promise;
+        }
+    }, [openModal, onOpen]);
+    const close = react_1.default.useCallback((confirm = false) => {
+        var _a, _b, _c, _d, _e, _f;
+        if (openModal) {
+            setOpenModal(false);
+            if ((0, utils_1.is)('function', onClose))
+                onClose();
+            // Resolve or reject
+            if (confirm)
+                (_b = (_a = refs.promise.resolve).current) === null || _b === void 0 ? void 0 : _b.call(_a, confirm);
+            else
+                !refs.modal.current.throwError ? (_d = (_c = refs.promise.resolve).current) === null || _d === void 0 ? void 0 : _d.call(_c, false) : (_f = (_e = refs.promise.reject).current) === null || _f === void 0 ? void 0 : _f.call(_e);
+            refs.promise.resolve.current = undefined;
+            refs.promise.reject.current = undefined;
+        }
+    }, [openModal, onClose]);
+    const _e = (refs.modal.current || {}), { name, description, buttons, throwError: throwError_, ButtonNegativeProps, ButtonPositiveProps, modal } = _e, otherModal = __rest(_e, ["name", "description", "buttons", "throwError", "ButtonNegativeProps", "ButtonPositiveProps", "modal"]);
+    // Add to the value
+    refs.value.current.open = open;
+    refs.value.current.close = close;
+    return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [children, (0, jsx_runtime_1.jsx)(Modal, Object.assign({ ref: ref, open: openModal, onClose: close, SurfaceProps: {
+                    tonal: true,
+                    color: 'primary',
+                    className: (0, style_react_1.classNames)([
+                        classes.surface
+                    ])
+                }, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Confirm', theme) && [
+                        `onesy-Confirm-root`
+                    ],
+                    className,
+                    classes.root
+                ]) }, other, otherModal, { children: (0, utils_1.is)('function', modal) ?
+                    modal({ resolve: refs.promise.resolve.current, reject: refs.promise.reject.current }) :
+                    ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [name !== false && ((0, jsx_runtime_1.jsx)(ModalHeader, { children: (0, jsx_runtime_1.jsx)(ModalTitle, Object.assign({ version: 't1', weight: 500 }, { children: name || 'Confirmation' })) })), (0, jsx_runtime_1.jsx)(ModalMain, { children: (0, jsx_runtime_1.jsx)(ModalText, Object.assign({ version: 'b1', weight: 200 }, { children: description !== undefined ? description : 'Are you sure you want to proceed?' })) }), (0, jsx_runtime_1.jsxs)(ModalFooter, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(false) }, ButtonNegativeProps, { children: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _a === void 0 ? void 0 : _a.text) !== undefined ? (_b = buttons === null || buttons === void 0 ? void 0 : buttons.negative) === null || _b === void 0 ? void 0 : _b.text : 'Cancel' })), (0, jsx_runtime_1.jsx)(Button, Object.assign({ version: 'text', color: 'inherit', tonal: true, onClick: () => close(true) }, ButtonPositiveProps, { children: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _c === void 0 ? void 0 : _c.text) !== undefined ? (_d = buttons === null || buttons === void 0 ? void 0 : buttons.positive) === null || _d === void 0 ? void 0 : _d.text : 'Confirm' }))] })] })) }))] })));
+});
+Confirm.displayName = 'onesy-Confirm';
+exports.default = Confirm;

package/Confirm/Context.d.ts

@@ -0,0 +1,2 @@
+declare const OnesyConfirmContext: any;
+export default OnesyConfirmContext;

package/Confirm/Context.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const OnesyConfirmContext = react_1.default.createContext(undefined);
+exports.default = OnesyConfirmContext;

package/Confirm/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Confirm';
+export { default as ConfirmContext } from './Context';
+export { default as Confirm } from './Confirm';
+export { default as useConfirm } from './useConfirm';

package/Confirm/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfirm = exports.Confirm = exports.ConfirmContext = exports.default = void 0;
+var Confirm_1 = require("./Confirm");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Confirm_1).default; } });
+var Context_1 = require("./Context");
+Object.defineProperty(exports, "ConfirmContext", { enumerable: true, get: function () { return __importDefault(Context_1).default; } });
+var Confirm_2 = require("./Confirm");
+Object.defineProperty(exports, "Confirm", { enumerable: true, get: function () { return __importDefault(Confirm_2).default; } });
+var useConfirm_1 = require("./useConfirm");
+Object.defineProperty(exports, "useConfirm", { enumerable: true, get: function () { return __importDefault(useConfirm_1).default; } });

package/Confirm/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Confirm/index.js",
+  "types": "./index.d.ts"
+}

package/Confirm/useConfirm.d.ts

@@ -0,0 +1,2 @@
+import { IConfirmValue } from './Confirm';
+export default function useConfirm(): IConfirmValue;

package/Confirm/useConfirm.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Context_1 = __importDefault(require("./Context"));
+function useConfirm() {
+    const value = react_1.default.useContext(Context_1.default);
+    return value;
+}
+exports.default = useConfirm;

package/Container/Container.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IValueBreakpoints } from '../types';
+export interface IContainer extends ILine {
+    alignment?: 'start' | 'center' | 'end' | Partial<Record<IValueBreakpoints, 'start' | 'center' | 'end'>>;
+    paddingVertical?: 'both' | 'start' | 'end' | 'none' | Partial<Record<IValueBreakpoints, 'both' | 'start' | 'end' | 'none'>>;
+    paddingHorizontal?: 'both' | 'start' | 'end' | 'none' | Partial<Record<IValueBreakpoints, 'both' | 'start' | 'end' | 'none'>>;
+    fullWidth?: boolean | Partial<Record<IValueBreakpoints, boolean>>;
+    maxWidth?: 'xxs' | 'xs' | 'sm' | 'rg' | 'lg' | 'xl' | 'unset' | Partial<Record<IValueBreakpoints, 'xxs' | 'xs' | 'sm' | 'rg' | 'lg' | 'xl' | 'unset'>>;
+}
+declare const Container: React.FC<IContainer>;
+export default Container;

package/Container/Container.js

@@ -0,0 +1,137 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line"));
+const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        width: '100%'
+    },
+    // alignment
+    alignment_start: {
+        marginInlineEnd: 'auto'
+    },
+    alignment_center: {
+        marginInline: 'auto'
+    },
+    alignment_end: {
+        marginInlineStart: 'auto'
+    },
+    // padding
+    // vertical
+    padding_vertical_both: {
+        paddingBlock: theme.methods.space.value(2, 'px')
+    },
+    padding_vertical_start: {
+        paddingBlockStart: theme.methods.space.value(2, 'px')
+    },
+    padding_vertical_end: {
+        paddingBlockEnd: theme.methods.space.value(2, 'px')
+    },
+    padding_vertical_none: {
+        paddingBlock: '0px'
+    },
+    // horizontal
+    padding_horizontal_both: {
+        paddingInline: theme.methods.space.value(2, 'px')
+    },
+    padding_horizontal_start: {
+        paddingInlineStart: theme.methods.space.value(2, 'px')
+    },
+    padding_horizontal_end: {
+        paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    padding_horizontal_none: {
+        paddingInline: '0px'
+    },
+    // maxWidth
+    maxWidth_xxs: { maxWidth: '320px' },
+    maxWidth_xs: { maxWidth: '400px' },
+    maxWidth_sm: { maxWidth: '600px' },
+    maxWidth_rg: { maxWidth: '960px' },
+    maxWidth_lg: { maxWidth: '1240px' },
+    maxWidth_xl: { maxWidth: '1920px' },
+    maxWidth_unset: { maxWidth: 'unset' },
+    // full width
+    fullWidth: {
+        width: '100%',
+        maxWidth: 'unset'
+    },
+}), { name: 'onesy-Container' });
+const Container = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyContainer) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const { alignment: alignment_, paddingVertical: paddingVertical_, paddingHorizontal: paddingHorizontal_, fullWidth: fullWidth_, maxWidth: maxWidth_, Component = 'div', style, className, children } = props, other = __rest(props, ["alignment", "paddingVertical", "paddingHorizontal", "fullWidth", "maxWidth", "Component", "style", "className", "children"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    const keys = react_1.default.useMemo(() => {
+        const result = [];
+        const items = [alignment_, paddingVertical_, paddingHorizontal_, fullWidth_, maxWidth_];
+        items.forEach(item => {
+            if ((0, utils_1.is)('object', item))
+                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+        });
+        return (0, utils_1.unique)(result);
+    }, [alignment_, paddingVertical_, paddingHorizontal_, fullWidth_, maxWidth_]);
+    const breakpoints = {};
+    keys.forEach(key => {
+        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+    });
+    const alignment = (0, utils_2.valueBreakpoints)(alignment_, 'center', breakpoints, theme);
+    const paddingVertical = (0, utils_2.valueBreakpoints)(paddingVertical_, 'none', breakpoints, theme);
+    const paddingHorizontal = (0, utils_2.valueBreakpoints)(paddingHorizontal_, 'both', breakpoints, theme);
+    const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
+    const maxWidth = (0, utils_2.valueBreakpoints)(maxWidth_, undefined, breakpoints, theme);
+    const styles = {
+        root: {}
+    };
+    if (!classes[`maxWidth_${maxWidth}`])
+        styles.root.maxWidth = maxWidth;
+    if (!['both', 'start', 'end', 'none'].includes(paddingHorizontal))
+        styles.root.paddingInline = paddingHorizontal;
+    if (!['both', 'start', 'end', 'none'].includes(paddingVertical))
+        styles.root.paddingBlock = paddingVertical;
+    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, gap: 0, direction: 'row', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Container', theme) && [
+                'onesy-Container-root'
+            ],
+            className,
+            classes.root,
+            classes[`alignment_${alignment}`],
+            classes[`maxWidth_${maxWidth}`],
+            classes[`padding_vertical_${paddingVertical}`],
+            classes[`padding_horizontal_${paddingHorizontal}`],
+            fullWidth && classes.fullWidth
+        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: children })));
+});
+Container.displayName = 'onesy-Container';
+exports.default = Container;

package/Container/index.d.ts

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

package/Container/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Container_1 = require("./Container");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Container_1).default; } });

package/Container/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/Container/index.js",
+  "types": "./index.d.ts"
+}

package/Countdown/Countdown.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ISurface } from '../Surface/Surface';
+import { IElement, IElementReference, IPropsAny } from '../types';
+export interface ICountdown extends Omit<ISurface, 'version'> {
+    version?: 'linear' | 'round';
+    renderValue?: (value: string) => IElement;
+    icon?: boolean;
+    onStart?: (event: React.MouseEvent<any>) => any;
+    onPause?: (event: React.MouseEvent<any>) => any;
+    onStop?: (event: React.MouseEvent<any>) => any;
+    onResume?: (event: React.MouseEvent<any>) => any;
+    Icon?: IElementReference;
+    IconStart?: IElementReference;
+    IconPause?: IElementReference;
+    IconStop?: IElementReference;
+    TreeProps?: IPropsAny;
+    TooltipProps?: IPropsAny;
+    RoundProgressProps?: IPropsAny;
+    NumericTextFieldProps?: IPropsAny;
+    IconButtonProps?: IPropsAny;
+    LinearProgressProps?: IPropsAny;
+    IconProps?: IPropsAny;
+}
+declare const Countdown: React.FC<ICountdown>;
+export default Countdown;