@onesy/ui-react 1.0.0

package/Widgets/Widgets.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IBaseElement, IElement, IPropsAny, IElementReference } from '../types';
+export interface IWidgetsValue {
+    open: (value?: string) => void;
+    openAll: () => void;
+    close: (value?: string) => void;
+    closeAll: () => void;
+}
+export interface IWidgets extends IBaseElement {
+    widgets?: IElement;
+    position?: 'top' | 'bottom';
+    move?: boolean;
+    fixed?: boolean;
+    onOpen?: (value: string) => any;
+    onOpenAll?: () => any;
+    onClose?: (value: string) => any;
+    onCloseAll?: () => any;
+    SpeedDialProps?: IPropsAny;
+    MoveProps?: IPropsAny;
+    Icon?: IElementReference;
+    IconCloseItem?: IElementReference;
+}
+declare const Widgets: React.FC<IWidgets>;
+export default Widgets;

package/Widgets/Widgets.js

@@ -0,0 +1,176 @@
+"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 IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
+const IconMaterialWidgetsW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialWidgetsW100"));
+const SpeedDial_1 = __importDefault(require("../SpeedDial"));
+const SpeedDialItem_1 = __importDefault(require("../SpeedDialItem"));
+const Transition_1 = __importDefault(require("../Transition"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Move_1 = __importDefault(require("../Move"));
+const Context_1 = __importDefault(require("./Context"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        width: '100%',
+        padding: `0 ${theme.methods.space.value(13, 'px')}`,
+        pointerEvents: 'none',
+        zIndex: theme.z_index.modal - 1
+    },
+    line: {
+        pointerEvents: 'auto'
+    },
+    fixed: {
+        position: 'fixed'
+    },
+    position_top: {
+        top: '24px'
+    },
+    position_bottom: {
+        bottom: '24px'
+    },
+    widget: {
+        userSelect: 'none',
+        boxShadow: theme.shadows.values.default[6]
+    },
+    item: {
+        position: 'fixed',
+        top: '40px',
+        left: '40px',
+        opacity: '0',
+        transform: 'translateY(100%)',
+        transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
+        zIndex: theme.z_index.modal - 1,
+        '&.enter': {
+            opacity: '0',
+            transform: 'translateY(100%)'
+        },
+        '&.entering': {
+            opacity: '1',
+            transform: 'translateY(0%)'
+        },
+        '&.entered': {
+            opacity: '1',
+            transform: 'translateY(0%)'
+        },
+        '&.exit': {
+            opacity: '1',
+            transform: 'translateY(0%)'
+        },
+        '&.exiting': {
+            opacity: '0',
+            transform: 'translateY(100%)'
+        },
+        '&.exited': {
+            opacity: '0',
+            transform: 'translateY(100%)'
+        }
+    },
+    iconButton: {
+        top: '8px',
+        insetInlineEnd: '-8px',
+        transform: `translateX(${theme.direction === 'ltr' ? '' : '-'}100%)`,
+        zIndex: '1',
+        '&.onesy-IconButton-root': {
+            position: 'absolute'
+        }
+    }
+}), { name: 'onesy-Widgets' });
+const Widgets = 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.onesyWidgets) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const SpeedDial = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDial) || SpeedDial_1.default; }, [theme]);
+    const SpeedDialItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDialItem) || SpeedDialItem_1.default; }, [theme]);
+    const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_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 Move = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Move) || Move_1.default; }, [theme]);
+    const { widgets, position = 'bottom', move = true, fixed = true, onOpen, onOpenAll, onClose, onCloseAll, SpeedDialProps, MoveProps, Icon: Icon_ = IconMaterialWidgetsW100_1.default, IconCloseItem = IconMaterialCloseW100_1.default, className, children } = props, other = __rest(props, ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "className", "children"]);
+    const { classes } = useStyle();
+    const [openItems, setOpenItems] = react_1.default.useState([]);
+    const refs = {
+        value: react_1.default.useRef({}),
+        props: react_1.default.useRef(undefined)
+    };
+    refs.props.current = props;
+    const open = react_1.default.useCallback((value) => {
+        setOpenItems(items => (0, utils_1.unique)([...items, value]));
+        if ((0, utils_1.is)('function', onOpen))
+            onOpen(value);
+    }, []);
+    const openAll = react_1.default.useCallback(() => {
+        setOpenItems(() => (0, utils_1.unique)((widgets || []).map((item) => {
+            const valueItem = item.value !== undefined ? item.value : item.label;
+            return valueItem;
+        })));
+        if ((0, utils_1.is)('function', onOpenAll))
+            onOpenAll();
+    }, []);
+    const close = react_1.default.useCallback((value) => {
+        setOpenItems(items => (0, utils_1.unique)(items.filter((item) => item !== value)));
+        if ((0, utils_1.is)('function', onClose))
+            onClose(value);
+    }, []);
+    const closeAll = react_1.default.useCallback(() => {
+        setOpenItems([]);
+        if ((0, utils_1.is)('function', onCloseAll))
+            onCloseAll();
+    }, []);
+    // Add to the value
+    refs.value.current.open = open;
+    refs.value.current.openAll = openAll;
+    refs.value.current.close = close;
+    refs.value.current.closeAll = closeAll;
+    const widgetsToUse = [...(widgets || [])].reverse();
+    return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpeedDial, Object.assign({ ref: ref, direction: 'top', position: 'bottom', alignment: 'start', Icon: Icon_, noRotate: true }, SpeedDialProps, { children: widgets.map((item, index) => {
+                            const valueItem = item.value !== undefined ? item.value : item.label;
+                            return ((0, jsx_runtime_1.jsx)(SpeedDialItem, { onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem), label: !openItems.includes(valueItem) ? item.label : `Close ${item.label}`, Icon: item.Icon }, index));
+                        }) })), widgetsToUse.map((item, index) => {
+                        const valueItem = item.value !== undefined ? item.value : item.label;
+                        const WidgetWrapper = Move;
+                        const WidgetWrapperProps = Object.assign({ version: 'fixed', manage: true, manageLevel: 1, disabled: !(move && item.move !== false) }, MoveProps);
+                        return ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: openItems.includes(valueItem), removeOnExited: true }, { children: (status) => {
+                                var _a;
+                                return ((0, jsx_runtime_1.jsxs)(WidgetWrapper, Object.assign({ className: (0, style_react_1.classNames)([
+                                        (0, utils_2.staticClassName)('Widgets', theme) && [
+                                            `onesy-Widgets-item`
+                                        ],
+                                        classes.item,
+                                        status
+                                    ]) }, WidgetWrapperProps, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => close(valueItem), color: 'default', version: 'filled', size: 'small', elevation: false, className: (0, style_react_1.classNames)([
+                                                (0, utils_2.staticClassName)('Widgets', theme) && [
+                                                    `onesy-Widgets-icon-button`
+                                                ],
+                                                classes.iconButton
+                                            ]) }, { children: (0, jsx_runtime_1.jsx)(IconCloseItem, {}) })), react_1.default.cloneElement(item.element, Object.assign({ className: (0, style_react_1.classNames)([
+                                                (0, utils_2.staticClassName)('Widgets', theme) && [
+                                                    `onesy-Widgets-widget`
+                                                ],
+                                                classes.widget
+                                            ]) }, (((['onesy-Weather', 'onesy-Watch'].includes((_a = item.element.type) === null || _a === void 0 ? void 0 : _a.displayName))) ? {
+                                            shadow: true,
+                                            style: {
+                                                boxShadow: 'none'
+                                            }
+                                        } : undefined)))] })));
+                            } }), index));
+                    })] }), children] })));
+});
+Widgets.displayName = 'onesy-Widgets';
+exports.default = Widgets;

package/Widgets/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Widgets';
+export { default as WidgetsContext } from './Context';
+export { default as Widgets } from './Widgets';
+export { default as useWidgets } from './useWidgets';

package/Widgets/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.useWidgets = exports.Widgets = exports.WidgetsContext = exports.default = void 0;
+var Widgets_1 = require("./Widgets");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Widgets_1).default; } });
+var Context_1 = require("./Context");
+Object.defineProperty(exports, "WidgetsContext", { enumerable: true, get: function () { return __importDefault(Context_1).default; } });
+var Widgets_2 = require("./Widgets");
+Object.defineProperty(exports, "Widgets", { enumerable: true, get: function () { return __importDefault(Widgets_2).default; } });
+var useWidgets_1 = require("./useWidgets");
+Object.defineProperty(exports, "useWidgets", { enumerable: true, get: function () { return __importDefault(useWidgets_1).default; } });

package/Widgets/package.json

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

package/Widgets/useWidgets.d.ts

@@ -0,0 +1,2 @@
+import { IWidgetsValue } from './Widgets';
+export default function useWidgets(): IWidgetsValue;

package/Widgets/useWidgets.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 useWidgets() {
+    const value = react_1.default.useContext(Context_1.default);
+    return value;
+}
+exports.default = useWidgets;

package/WindowSplit/WindowSplit.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { ITonal, IColor, IElement, IPropsAny } from '../types';
+export interface IWindowSplit extends ILine {
+    tonal?: ITonal;
+    color?: IColor;
+    valueDefault?: number;
+    value?: number;
+    onChange?: (value: number) => any;
+    padding?: number;
+    paddingStart?: number;
+    paddingEnd?: number;
+    iconButton?: IElement;
+    orientation?: 'vertical' | 'horizontal';
+    noKeyboard?: boolean;
+    noDivider?: boolean;
+    focus?: boolean;
+    onFocus?: (event: React.FocusEvent<any>) => any;
+    onBlur?: (event: React.FocusEvent<any>) => any;
+    onMouseEnter?: (event: React.MouseEvent<any>) => any;
+    onMouseLeave?: (event: React.MouseEvent<any>) => any;
+    iconButtonComponent?: IElement;
+    iconOrientationHorizontal?: IElement;
+    iconOrientationVertical?: IElement;
+    IconButtonProps?: IPropsAny;
+    DividerProps?: IPropsAny;
+}
+declare const WindowSplit: React.FC<IWindowSplit>;
+export default WindowSplit;

package/WindowSplit/WindowSplit.js

@@ -0,0 +1,346 @@
+"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 IconMaterialSwapHorizW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSwapHorizW100"));
+const IconMaterialSwapVertW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSwapVertW100"));
+const Line_1 = __importDefault(require("../Line"));
+const Divider_1 = __importDefault(require("../Divider"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        touchAction: 'none',
+        overflow: 'hidden'
+    },
+    mouseDown_orientation_horizontal: {
+        '& *': {
+            cursor: 'ew-resize !important'
+        }
+    },
+    mouseDown_orientation_vertical: {
+        '& *': {
+            cursor: 'ns-resize !important'
+        }
+    },
+    focus: {
+        outline: '4px solid currentColor',
+        outlineOffset: '8px'
+    },
+    wrapper: {
+        width: '100%',
+        height: '100%'
+    },
+    item: {
+        flex: '1 1 auto'
+    },
+    iconButton: {
+        position: 'absolute',
+        userSelect: 'none',
+        zIndex: '4'
+    },
+    iconButton_orientation_horizontal: {
+        cursor: 'ew-resize',
+        transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`
+    },
+    iconButton_orientation_vertical: {
+        cursor: 'ns-resize',
+        transform: `translateY(50%)`
+    },
+    divider: {
+        position: 'absolute',
+        userSelect: 'none',
+        flex: '0 0 auto',
+        zIndex: '3',
+        '&.onesy-Divider-root': {
+            opacity: '1',
+            margin: '0px'
+        }
+    },
+    divider_orientation_horizontal: {
+        insetBlock: '0',
+        cursor: 'ew-resize',
+        transform: `translateX(${theme.direction === 'rtl' ? '-' : ''}50%)`,
+        '&.onesy-Divider-root': {
+            width: '8px'
+        }
+    },
+    divider_orientation_vertical: {
+        insetInline: '0',
+        cursor: 'ns-resize',
+        transform: `translateY(50%)`,
+        '&.onesy-Divider-root': {
+            height: '8px'
+        }
+    }
+}), { name: 'onesy-WindowSplit' });
+const WindowSplit = 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.onesyWindowSplit) === 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 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 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 { tonal = false, color = 'inverted', valueDefault, value: value_ = 50, onChange: onChange_, padding, paddingStart, paddingEnd, iconButton, orientation = 'horizontal', noKeyboard, noDivider, focus: focus_ = false, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, iconButtonComponent, iconOrientationHorizontal = (0, jsx_runtime_1.jsx)(IconMaterialSwapHorizW100_1.default, {}), iconOrientationVertical = (0, jsx_runtime_1.jsx)(IconMaterialSwapVertW100_1.default, {}), IconButtonProps = {
+        version: 'filled',
+        elevation: false
+    }, SeparatorProps: SeparatorProps_, DividerProps = {}, className, children: children_ } = props, other = __rest(props, ["tonal", "color", "valueDefault", "value", "onChange", "padding", "paddingStart", "paddingEnd", "iconButton", "orientation", "noKeyboard", "noDivider", "focus", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "iconButtonComponent", "iconOrientationHorizontal", "iconOrientationVertical", "IconButtonProps", "SeparatorProps", "DividerProps", "className", "children"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const [focus, setFocus] = react_1.default.useState();
+    const [mouseDown, setMouseDown] = react_1.default.useState();
+    const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        value: react_1.default.useRef(undefined),
+        mouseDown: react_1.default.useRef(undefined),
+        hover: react_1.default.useRef(undefined),
+        props: react_1.default.useRef(undefined),
+        orientation: react_1.default.useRef(undefined),
+        direction: react_1.default.useRef(undefined),
+        ids: {
+            root: react_1.default.useId()
+        }
+    };
+    refs.value.current = value;
+    refs.mouseDown.current = mouseDown;
+    refs.props.current = props;
+    refs.orientation.current = orientation;
+    refs.direction.current = theme.direction;
+    const styles = {
+        start: {
+            [orientation === 'horizontal' ? 'width' : 'height']: `${100 - value}%`
+        },
+        end: {
+            [orientation === 'horizontal' ? 'width' : 'height']: `${value}%`
+        },
+        divider: {
+            [orientation === 'horizontal' ? 'insetInlineEnd' : 'insetBlockEnd']: `${value}%`
+        }
+    };
+    IconButtonProps.tonal = IconButtonProps.tonal !== undefined ? IconButtonProps.tonal : tonal;
+    IconButtonProps.color = IconButtonProps.color !== undefined ? IconButtonProps.color : color;
+    DividerProps.tonal = DividerProps.tonal !== undefined ? DividerProps.tonal : tonal;
+    DividerProps.color = DividerProps.color !== undefined ? DividerProps.color : color;
+    const min = 0;
+    const max = 100;
+    const valuePrecision = (valueMouse) => {
+        let valueNew = (max + min) - (0, utils_1.valueFromPercentageWithinRange)(valueMouse * 100, min, max);
+        if (refs.direction.current === 'rtl' && refs.orientation.current === 'horizontal')
+            valueNew = (max + min) - valueNew;
+        if (valueNew <= min)
+            return min;
+        if (valueNew >= max)
+            return max;
+        return valueNew;
+    };
+    react_1.default.useEffect(() => {
+        var _a;
+        const onMouseUp = () => {
+            setMouseDown(false);
+            setFocus(false);
+        };
+        const onMouseMove = (event) => {
+            if (refs.mouseDown.current) {
+                const x = event.clientX;
+                const y = event.clientY;
+                const rect = refs.root.current.getBoundingClientRect();
+                const { width, height } = rect;
+                // Value to the precision point value
+                let valueNew = refs.orientation.current === 'horizontal' ? (x - rect.x) / width : (y - rect.y) / height;
+                valueNew = valuePrecision(valueNew);
+                onChange(valueNew);
+            }
+        };
+        const onTouchMove = (event) => {
+            if (refs.mouseDown.current) {
+                const x = event.touches[0].clientX;
+                const y = event.touches[0].clientY;
+                const rect = refs.root.current.getBoundingClientRect();
+                const { width, height } = rect;
+                // Value to the precision point value
+                let valueNew = refs.orientation.current === 'horizontal' ? (x - rect.x) / width : (y - rect.y) / height;
+                valueNew = valuePrecision(valueNew);
+                onChange(valueNew);
+            }
+        };
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('mouseup', onMouseUp);
+        rootDocument.addEventListener('mousemove', onMouseMove);
+        rootDocument.addEventListener('touchend', onMouseUp, { passive: true });
+        rootDocument.addEventListener('touchmove', onTouchMove);
+        setInit(true);
+        return () => {
+            rootDocument.removeEventListener('mouseup', onMouseUp);
+            rootDocument.removeEventListener('touchend', onMouseUp);
+            rootDocument.removeEventListener('mousemove', onMouseMove);
+            rootDocument.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        if (init) {
+            if (value_ !== value)
+                setValue(value_);
+        }
+    }, [value_]);
+    const onTouchStart = (event) => {
+        setMouseDown(true);
+    };
+    const onFocus = react_1.default.useCallback((event) => {
+        setFocus(true);
+        if ((0, utils_1.is)('function', onFocus_))
+            onFocus_(event);
+    }, []);
+    const onBlur = react_1.default.useCallback((event) => {
+        setFocus(false);
+        if ((0, utils_1.is)('function', onBlur_))
+            onBlur_(event);
+    }, []);
+    const onFocusIconButton = react_1.default.useCallback((event) => {
+        setFocus(true);
+    }, []);
+    const onBlurIconButton = react_1.default.useCallback((event) => {
+        setFocus(false);
+    }, []);
+    const onMouseDown = react_1.default.useCallback(() => {
+        setMouseDown(true);
+    }, []);
+    const move = (forward_ = true) => {
+        let forward = forward_;
+        if (refs.orientation.current === 'horizontal') {
+            if (refs.direction.current === 'rtl')
+                forward = !forward;
+        }
+        let valueNew = refs.value.current || 0;
+        valueNew = (0, utils_1.clamp)(valueNew + (forward ? 1 : -1), 0, 100);
+        // Update
+        onChange(valueNew);
+    };
+    const onKeyDown = react_1.default.useCallback((event) => {
+        if (['ArrowUp', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            if (['Home', 'End'].includes(event.key) ||
+                (['ArrowLeft', 'ArrowRight'].includes(event.key) && refs.orientation.current === 'horizontal') ||
+                (['ArrowUp', 'ArrowDown'].includes(event.key) && refs.orientation.current === 'vertical')) {
+                // Prevent default
+                event.preventDefault();
+                let valueNew;
+                switch (event.key) {
+                    case 'Home':
+                        valueNew = refs.orientation.current !== 'vertical' ? 0 : 100;
+                        return onChange(valueNew);
+                    case 'End':
+                        valueNew = refs.orientation.current !== 'vertical' ? 100 : 0;
+                        return onChange(valueNew);
+                    case 'ArrowUp':
+                    case 'ArrowLeft':
+                        return move();
+                    case 'ArrowDown':
+                    case 'ArrowRight':
+                        return move(false);
+                    default:
+                        break;
+                }
+            }
+        }
+    }, []);
+    const onChange = (valueItem) => {
+        const minValue = paddingEnd !== undefined ? paddingEnd : padding !== undefined ? padding : 0;
+        const maxValue = paddingStart !== undefined ? paddingStart : padding !== undefined ? padding : 0;
+        const valueNew = (0, utils_1.clamp)(valueItem, minValue, 100 - maxValue);
+        // Update inner or controlled
+        if (!props.hasOwnProperty('value'))
+            setValue(valueNew);
+        if ((0, utils_1.is)('function', onChange_))
+            onChange_(valueNew);
+    };
+    const SeparatorProps = Object.assign(Object.assign({}, SeparatorProps_), { role: 'separator', 'aria-label': 'Window separator', 'aria-valuenow': value, 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuetext': `${value}%`, 'aria-controls': refs.ids.root });
+    const direction = orientation === 'horizontal' ? 'row' : 'column';
+    // Only 2 children to use
+    const children = react_1.default.Children.toArray(children_).slice(0, 2);
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, tabIndex: !iconButton ? 0 : undefined, gap: 0, direction: direction, align: 'center', justify: 'center' }, (focus_ && {
+        onFocus,
+        onBlur
+    }), { onKeyDown: !noKeyboard ? onKeyDown : undefined, id: refs.ids.root, "aria-orientation": orientation, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                'onesy-WindowSplit-root',
+                focus && `onesy-WindowSplit-focus`,
+                mouseDown && `onesy-WindowSplit-mouse-down`,
+            ],
+            className,
+            classes.root,
+            mouseDown && classes[`mouseDown_orientation_${orientation}`],
+            focus_ && focus && !mouseDown && classes.focus
+        ]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: direction, align: 'unset', justify: 'unset', className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                        'onesy-WindowSplit-wrapper'
+                    ],
+                    classes.wrapper
+                ]) }, { children: [children[0] && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'unset', justify: 'unset', className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                                'onesy-WindowSplit-start'
+                            ],
+                            classes.item,
+                            classes.start
+                        ]), style: Object.assign({}, styles.start) }, { children: children[0] }))), children[1] && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'unset', justify: 'unset', className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                                'onesy-WindowSplit-end'
+                            ],
+                            classes.item,
+                            classes.end
+                        ]), style: Object.assign({}, styles.end) }, { children: children[1] })))] })), !noDivider && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({ onTouchStart: onTouchStart, onMouseDown: (event) => {
+                    onMouseDown();
+                    if ((0, utils_1.is)('function', DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.onMouseDown))
+                        IconButtonProps.onMouseDown(event);
+                }, orientation: orientation === 'vertical' ? 'horizontal' : 'vertical' }, DividerProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                        'onesy-WindowSplit-divider'
+                    ],
+                    DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                    classes.divider,
+                    classes[`divider_orientation_${orientation}`]
+                ]), style: Object.assign(Object.assign({}, styles.divider), DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.style) }))), iconButton && !noDivider && ((iconButtonComponent && react_1.default.cloneElement(iconButtonComponent, Object.assign({ className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                        'onesy-WindowSplit-icon-button'
+                    ],
+                    classes.iconButton,
+                    classes[`iconButton_orientation_${orientation}`]
+                ]) }, SeparatorProps))) ||
+                (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onFocus: onFocusIconButton, onBlur: onBlurIconButton, onTouchStart: onTouchStart, onMouseDown: (event) => {
+                        onMouseDown();
+                        if ((0, utils_1.is)('function', IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.onMouseDown))
+                            IconButtonProps.onMouseDown(event);
+                    } }, SeparatorProps, IconButtonProps, { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('WindowSplit', theme) && [
+                            'onesy-WindowSplit-icon-button'
+                        ],
+                        IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
+                        classes.iconButton,
+                        classes[`iconButton_orientation_${orientation}`]
+                    ]), style: Object.assign(Object.assign({}, styles.divider), IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.style) }, { children: orientation === 'horizontal' ? iconOrientationHorizontal : orientation === 'vertical' ? iconOrientationVertical : undefined })))] })));
+});
+WindowSplit.displayName = 'onesy-WindowSplit';
+exports.default = WindowSplit;

package/WindowSplit/index.d.ts

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

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

package/WindowSplit/package.json

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

package/Zoom/Zoom.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ITransition } from '../';
+export interface IZoom extends ITransition {
+}
+declare const Zoom: React.FC<IZoom>;
+export default Zoom;