@onesy/ui-react 1.0.0

package/TimePicker/index.d.ts

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

package/TimePicker/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 TimePicker_1 = require("./TimePicker");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TimePicker_1).default; } });

package/TimePicker/package.json

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

package/TimeRangePicker/TimeRangePicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ITimePicker } from '../TimePicker/TimePicker';
+export interface ITimeRangePicker extends ITimePicker {
+}
+declare const TimeRangePicker: React.FC<ITimeRangePicker>;
+export default TimeRangePicker;

package/TimeRangePicker/TimeRangePicker.js

@@ -0,0 +1,40 @@
+"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 style_react_1 = require("@onesy/style-react");
+const TimePicker_1 = __importDefault(require("../TimePicker"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {}
+}), { name: 'onesy-TimeRangePicker' });
+const TimeRangePicker = 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.onesyTimeRangePicker) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const TimePicker = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TimePicker) || TimePicker_1.default; }, [theme]);
+    const { className } = props, other = __rest(props, ["className"]);
+    const { classes } = useStyle();
+    return ((0, jsx_runtime_1.jsx)(TimePicker, Object.assign({ ref: ref, range: true, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('TimeRangePicker', theme) && [
+                'onesy-TimeRangePicker-root'
+            ],
+            className,
+            classes.root
+        ]) }, other)));
+});
+TimeRangePicker.displayName = 'onesy-TimeRangePicker';
+exports.default = TimeRangePicker;

package/TimeRangePicker/index.d.ts

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

package/TimeRangePicker/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 TimeRangePicker_1 = require("./TimeRangePicker");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TimeRangePicker_1).default; } });

package/TimeRangePicker/package.json

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

package/Timeline/Timeline.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+export interface ITimeline extends ILine {
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const Timeline: React.FC<ITimeline>;
+export default Timeline;

package/Timeline/Timeline.js

@@ -0,0 +1,43 @@
+"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 style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+}), { name: 'onesy-Timeline' });
+const Timeline = 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.onesyTimeline) === 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 { orientation = 'vertical', Component = 'ul', className, children } = props, other = __rest(props, ["orientation", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const direction = orientation === 'vertical' ? 'column' : 'row';
+    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: ref, gap: 0, direction: direction, Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('Timeline', theme) && [
+                'onesy-Timeline-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: react_1.default.Children.toArray(children).map((item) => (react_1.default.cloneElement(item, {
+            orientation
+        }))) })));
+});
+Timeline.displayName = 'onesy-Timeline';
+exports.default = Timeline;

package/Timeline/index.d.ts

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

package/Timeline/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 Timeline_1 = require("./Timeline");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Timeline_1).default; } });

package/Timeline/package.json

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

package/TimelineItem/TimelineItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IElement, IPropsAny, IElementReference } from '../types';
+export interface ITimelineItem extends ILine {
+    orientation?: 'vertical' | 'horizontal';
+    start?: IElement;
+    end?: IElement;
+    DividerProps?: IPropsAny;
+    IconProps?: IPropsAny;
+    Icon?: IElementReference;
+    Divider?: any;
+}
+declare const TimelineItem: React.FC<ITimelineItem>;
+export default TimelineItem;

package/TimelineItem/TimelineItem.js

@@ -0,0 +1,152 @@
+"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 style_react_1 = require("@onesy/style-react");
+const Surface_1 = __importDefault(require("../Surface"));
+const Divider_1 = __importDefault(require("../Divider"));
+const Line_1 = __importDefault(require("../Line"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        '&:last-of-type': {
+            '& $divider': {
+                display: 'none'
+            }
+        }
+    },
+    orientation_vertical: {
+        minHeight: '77px'
+    },
+    orientation_horizontal: {
+        minWidth: '114px'
+    },
+    icon: {
+        display: 'inline-block',
+        width: '12px',
+        height: '12px',
+        borderRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    aside_orientation_vertical: {
+        padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(3, 'px')}`
+    },
+    aside_orientation_horizontal: {
+        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(0.5, 'px')}`
+    },
+    iconWrapper: {
+        lineHeight: '0'
+    },
+    iconWrapper_orientation_vertical: {
+        marginBlock: '8px'
+    },
+    iconWrapper_orientation_horizontal: {
+        marginInline: '8px'
+    },
+    divider: {
+        '&.onesy-Divider-root': {
+            margin: '0px'
+        }
+    },
+    divider_orientation_vertical: {
+        '&.onesy-Divider-root': {
+            width: '2px'
+        }
+    },
+    divider_orientation_horizontal: {
+        '&.onesy-Divider-root': {
+            height: '2px'
+        }
+    }
+}), { name: 'onesy-TimelineItem' });
+const TimelineItem = 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.onesyTimelineItem) === 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 Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
+    const { orientation = 'vertical', start, end, DividerProps: DividerProps_ = !props.Divider ? {
+        tonal: 'secondary',
+        color: 'neutral'
+    } : undefined, IconProps = !props.Icon ? {
+        tonal: 'secondary',
+        color: 'neutral',
+        version: 'filled'
+    } : undefined, Icon, Divider: Divider_, Component = 'li', className, children } = props, other = __rest(props, ["orientation", "start", "end", "DividerProps", "IconProps", "Icon", "Divider", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const direction = orientation === 'vertical' ? 'row' : 'column';
+    const lineDirection = orientation === 'vertical' ? 'column' : 'row';
+    const DividerProps = Object.assign({}, DividerProps_);
+    if (!Divider_) {
+        DividerProps.orientation = orientation;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 0, align: 'unset', justify: 'unset', direction: direction, Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                'onesy-TimelineItem-root'
+            ],
+            className,
+            classes.root,
+            classes[`orientation_${orientation}`]
+        ]) }, other, { children: [start && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                        'onesy-TimelineItem-aside',
+                        'onesy-TimelineItem-item',
+                        'onesy-TimelineItem-start'
+                    ],
+                    classes.aside,
+                    classes.item,
+                    classes.start,
+                    classes[`aside_orientation_${orientation}`]
+                ]) }, { children: start }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: lineDirection, align: 'center', justify: 'flex-start', className: (0, style_react_1.classNames)([
+                    (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                        'onesy-TimelineItem-item',
+                        'onesy-TimelineItem-middle'
+                    ],
+                    classes.item,
+                    classes.middle
+                ]) }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                            (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                                'onesy-TimelineItem-icon-wrapper'
+                            ],
+                            classes.iconWrapper,
+                            classes[`iconWrapper_orientation_${orientation}`]
+                        ]) }, { children: Icon ? Icon : ((0, jsx_runtime_1.jsx)(Surface, Object.assign({}, IconProps, { tonal: true, className: (0, style_react_1.classNames)([
+                                (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                                    'onesy-TimelineItem-icon'
+                                ],
+                                IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
+                                classes.icon
+                            ]) }))) })), Divider_ ? Divider_ : ((0, jsx_runtime_1.jsx)(Divider, Object.assign({}, DividerProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                                'onesy-TimelineItem-divider'
+                            ],
+                            DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                            classes.divider,
+                            classes[`divider_orientation_${orientation}`]
+                        ]), flex: true })))] })), (end || children) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_1.staticClassName)('TimelineItem', theme) && [
+                        'onesy-TimelineItem-aside',
+                        'onesy-TimelineItem-item',
+                        'onesy-TimelineItem-end'
+                    ],
+                    classes.aside,
+                    classes.item,
+                    classes.end,
+                    classes[`aside_orientation_${orientation}`]
+                ]) }, { children: end || children })))] })));
+});
+TimelineItem.displayName = 'onesy-TimelineItem';
+exports.default = TimelineItem;

package/TimelineItem/index.d.ts

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

package/TimelineItem/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 TimelineItem_1 = require("./TimelineItem");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(TimelineItem_1).default; } });

package/TimelineItem/package.json

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

package/Timer/Timer.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ISurface } from '../Surface/Surface';
+import { IElementReference, IPropsAny } from '../types';
+export interface ITimer extends ISurface {
+    renderValue?: (value: string) => any;
+    icon?: boolean;
+    onStart?: (event: React.MouseEvent<any>) => any;
+    onFlag?: (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;
+    IconFlag?: IElementReference;
+    IconStop?: IElementReference;
+    TreeProps?: IPropsAny;
+    TooltipProps?: IPropsAny;
+    IconButtonProps?: IPropsAny;
+    IconProps?: IPropsAny;
+}
+declare const Timer: React.FC<ITimer>;
+export default Timer;

package/Timer/Timer.js

@@ -0,0 +1,208 @@
+"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 date_1 = require("@onesy/date");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialTimerW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialTimerW100"));
+const IconMaterialPlayArrowW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPlayArrowW100"));
+const IconMaterialPauseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialPauseW100"));
+const IconMaterialStopW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialStopW100"));
+const IconMaterialFlagW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFlagW100"));
+const Fade_1 = __importDefault(require("../Fade"));
+const Expand_1 = __importDefault(require("../Expand"));
+const Type_1 = __importDefault(require("../Type"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const Tree_1 = __importDefault(require("../Tree"));
+const Surface_1 = __importDefault(require("../Surface"));
+const Line_1 = __importDefault(require("../Line"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        minWidth: '300px',
+        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`,
+        borderRadius: theme.methods.shape.radius.value('rg', 'px')
+    },
+    value: {
+        marginTop: '8px'
+    },
+    flags_wrapper: {
+        width: '100%',
+        paddingTop: theme.methods.space.value(1, 'px')
+    },
+    flags: {
+        width: '100%',
+        maxHeight: '170px',
+        overflowY: 'auto'
+    },
+    flag: {
+        width: '100%',
+        paddingInlineStart: theme.methods.space.value(0.5, 'px')
+    },
+    actions: {
+        marginTop: '8px'
+    }
+}), { name: 'onesy-Timer' });
+const Timer = 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.onesyTimer) === 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 Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Expand = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Expand) || Expand_1.default; }, [theme]);
+    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
+    const Tree = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tree) || Tree_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const { tonal = true, color = 'primary', renderValue, icon = true, onStart: onStart_, onFlag: onFlag_, onPause: onPause_, onStop: onStop_, onResume: onResume_, Icon: Icon_ = IconMaterialTimerW100_1.default, IconStart = IconMaterialPlayArrowW100_1.default, IconPause = IconMaterialPauseW100_1.default, IconFlag = IconMaterialFlagW100_1.default, IconStop = IconMaterialStopW100_1.default, TreeProps: TreeProps_, TooltipProps: TooltipProps_, IconButtonProps: IconButtonProps_, IconProps: IconProps_, Component = 'div', className } = props, other = __rest(props, ["tonal", "color", "renderValue", "icon", "onStart", "onFlag", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconFlag", "IconStop", "TreeProps", "TooltipProps", "IconButtonProps", "IconProps", "Component", "className"]);
+    const { classes } = useStyle();
+    const [status, setStatus] = react_1.default.useState('initial');
+    const [flags, setFlags] = react_1.default.useState([]);
+    const [expand, setExpand] = react_1.default.useState();
+    const [value, setValue] = react_1.default.useState(0);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        start: react_1.default.useRef(0),
+        valuePaused: react_1.default.useRef(0),
+        value: react_1.default.useRef(undefined),
+        animationFrame: react_1.default.useRef(undefined)
+    };
+    refs.value.current = value;
+    const clear = () => {
+        cancelAnimationFrame(refs.animationFrame.current);
+    };
+    react_1.default.useEffect(() => {
+        return () => {
+            // Clean up
+            clear();
+        };
+    }, []);
+    const update = () => {
+        setValue(refs.valuePaused.current + (date_1.OnesyDate.milliseconds - refs.start.current));
+        refs.animationFrame.current = requestAnimationFrame(update);
+    };
+    const onStart = react_1.default.useCallback((event) => {
+        refs.start.current = date_1.OnesyDate.milliseconds;
+        // ~60+ fps
+        refs.animationFrame.current = requestAnimationFrame(update);
+        setStatus('running');
+        if ((0, utils_1.is)('function', onStart_))
+            onStart_(event);
+    }, []);
+    const onFlag = react_1.default.useCallback((event) => {
+        if (!expand)
+            setExpand(true);
+        setFlags(values => [...values, refs.value.current]);
+        if ((0, utils_1.is)('function', onFlag_))
+            onFlag_(event);
+    }, [expand]);
+    const onPause = react_1.default.useCallback((event) => {
+        clear();
+        // Remember previous value
+        refs.valuePaused.current = refs.value.current;
+        setStatus('paused');
+        if ((0, utils_1.is)('function', onPause_))
+            onPause_(event);
+    }, []);
+    const onStop = react_1.default.useCallback((event) => {
+        clear();
+        setStatus('initial');
+        setExpand(false);
+        setValue(0);
+        refs.start.current = 0;
+        refs.valuePaused.current = 0;
+        refs.value.current = 0;
+        if ((0, utils_1.is)('function', onStop_))
+            onStop_(event);
+    }, []);
+    const onResume = react_1.default.useCallback((event) => {
+        // ~60+ fps
+        refs.animationFrame.current = requestAnimationFrame(update);
+        // Update start, valuePaused value
+        refs.start.current = date_1.OnesyDate.milliseconds;
+        setStatus('running');
+        if ((0, utils_1.is)('function', onResume_))
+            onResume_(event);
+    }, []);
+    const onExited = react_1.default.useCallback(() => {
+        setFlags([]);
+    }, []);
+    const IconProps = Object.assign({}, IconProps_);
+    const TooltipProps = Object.assign({ portal: true, interactive: false }, TooltipProps_);
+    const TreeProps = Object.assign({ tonal, color: 'inherit' }, TreeProps_);
+    const IconButtonProps = Object.assign({ tonal, color: 'inherit', version: 'text' }, IconButtonProps_);
+    const valueFormat = (valueNew_) => {
+        let valueNew = '';
+        const valueDuration = (0, date_1.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);
+        if (valueDuration.hour > 0)
+            valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.hour)}:`;
+        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.minute || 0)}:`;
+        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.second || 0)}.`;
+        valueNew += `${(0, utils_1.getLeadingZerosNumber)(Math.floor((valueDuration.millisecond || 0) / 10))}`;
+        return valueNew;
+    };
+    const value_ = status === 'initial' ? '00:00.00' : valueFormat(value);
+    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else if (ref === null || ref === void 0 ? void 0 : ref.current)
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tonal: tonal, color: color, gap: 0, direction: 'column', align: 'center', Component: Line, AdditionalProps: {
+            Component
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Timer', theme) && [
+                'onesy-Timer-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_, Object.assign({ size: 'medium' }, IconProps, { style: Object.assign({ marginBottom: 4 }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style) }))), (0, utils_1.is)('function', renderValue) ? renderValue(value_) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1', className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Timer', theme) && [
+                        'onesy-Timer-value'
+                    ],
+                    classes.value
+                ]) }, { children: value_ }))), (0, jsx_runtime_1.jsx)(Expand, Object.assign({ in: expand, parent: refs.root.current, onExited: onExited, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Timer', theme) && [
+                        'onesy-Timer-flags-wrapper'
+                    ],
+                    classes.flags_wrapper
+                ]) }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Surface, Object.assign({ tonal: tonal, color: color }, { children: ({ palette }) => {
+                            return ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ openDefault: true, middle: 'Flags', indicator: true, indicatorPosition: 'end', parent: refs.root.current, TreeProps: {
+                                    className: (0, style_react_1.classNames)([
+                                        (0, utils_2.staticClassName)('Timer', theme) && [
+                                            'onesy-Timer-flags'
+                                        ],
+                                        classes.flags
+                                    ])
+                                } }, TreeProps, { children: flags.map((item, index) => ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ icon: ((0, jsx_runtime_1.jsx)(IconFlag, { size: 'small', color: palette[40] })), middle: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', className: (0, style_react_1.classNames)([
+                                            classes.flag
+                                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: (0, utils_1.getLeadingZerosNumber)(index + 1) })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', style: {
+                                                    opacity: '0.7'
+                                                } }, { children: ["+", valueFormat(item - (flags[index - 1] || 0))] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, { children: valueFormat(item) }))] }))), noPadding: true, indicator: true, indicatorPosition: 'end' }, TreeProps), index))) })));
+                        } })) }) })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Timer', theme) && [
+                        'onesy-Timer-actions'
+                    ],
+                    classes.actions
+                ]) }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Start' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Flag' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onFlag }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFlag, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Pause' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, {}) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Stop' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Resume' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) }))] }) })))] }))] })));
+});
+Timer.displayName = 'onesy-Timer';
+exports.default = Timer;

package/Timer/index.d.ts

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

package/Timer/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 Timer_1 = require("./Timer");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Timer_1).default; } });

package/Timer/package.json

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

package/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IChip } from '../Chip/Chip';
+export interface IToggleButton extends IChip {
+}
+declare const ToggleButton: React.FC<IToggleButton>;
+export default ToggleButton;