@onesy/ui-react 1.0.0

package/NavigationDrawer/NavigationDrawer.js

@@ -0,0 +1,222 @@
+"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 Modal_1 = __importDefault(require("../Modal"));
+const Slide_1 = __importDefault(require("../Slide"));
+const useSwipe_1 = __importDefault(require("../useSwipe"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        '& .onesy-Modal-surface': {
+            display: 'flex',
+            flexDirection: 'column',
+            margin: '0',
+            maxHeight: 'unset',
+            maxWidth: 'unset',
+            minWidth: 'unset',
+            flex: '1 0 auto',
+            padding: '0'
+        }
+    },
+    position_fixed: {
+        position: 'fixed'
+    },
+    position_absolute: {
+        position: 'absolute'
+    },
+    version_modal_position_fixed: {
+        '& .onesy-Modal-surface': {
+            position: 'fixed'
+        }
+    },
+    version_modal_position_absolute: {
+        '& .onesy-Modal-surface': {
+            position: 'absolute'
+        }
+    },
+    version_standard: {
+        '&.onesy-Modal-root': {
+            position: 'unset',
+            inset: 'unset'
+        },
+        '& .onesy-Modal-surface': {
+            position: 'relative'
+        }
+    },
+    direction_top: {
+        '& .onesy-Modal-surface': {
+            top: '0',
+            width: '100%',
+            borderRadius: `0 0 ${theme.methods.shape.radius.value(2, 'px')} ${theme.methods.shape.radius.value(2, 'px')}`
+        }
+    },
+    direction_left: {
+        '& .onesy-Modal-surface': {
+            left: '0',
+            height: '100%',
+            borderRadius: `0 ${theme.methods.shape.radius.value(2, 'px')} ${theme.methods.shape.radius.value(2, 'px')} 0`
+        }
+    },
+    direction_right: {
+        '& .onesy-Modal-surface': {
+            right: '0',
+            height: '100%',
+            borderRadius: `${theme.methods.shape.radius.value(2, 'px')} 0 0 ${theme.methods.shape.radius.value(2, 'px')}`
+        }
+    },
+    direction_bottom: {
+        '& .onesy-Modal-surface': {
+            bottom: '0',
+            width: '100%',
+            borderRadius: `${theme.methods.shape.radius.value(2, 'px')} ${theme.methods.shape.radius.value(2, 'px')} 0 0`
+        }
+    }
+}), { name: 'onesy-NavigationDrawer' });
+const NavigationDrawer = 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.onesyNavigationDrawer) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    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 Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
+    const { tonal = false, color = [undefined, 'modal'].includes(props.version) ? 'themed' : 'default', version = 'modal', open: open_, openDefault, position = 'fixed', direction: direction_ = 'left', swipe = true, swipeTouchAnywhere = true, swipeBackgroundFollow = true, min, removeOnExited, onClose: onClose_, TransitionComponentProps = {}, Component = 'nav', className, children } = props, other = __rest(props, ["tonal", "color", "version", "open", "openDefault", "position", "direction", "swipe", "swipeTouchAnywhere", "swipeBackgroundFollow", "min", "removeOnExited", "onClose", "TransitionComponentProps", "Component", "className", "children"]);
+    const [entered, setEntered] = react_1.default.useState(false);
+    const [open, setOpen] = react_1.default.useState(false);
+    const refs = {
+        modal: react_1.default.useRef(undefined),
+        background: react_1.default.useRef(undefined)
+    };
+    const { classes } = useStyle();
+    let direction = direction_;
+    if (theme.direction === 'rtl') {
+        if (direction === 'left')
+            direction = 'right';
+        else if (direction === 'right')
+            direction = 'left';
+    }
+    let swipeValue;
+    if (swipe) {
+        const swipeOptions = {
+            open,
+            min,
+            direction,
+            touchAnywhere: swipeTouchAnywhere
+        };
+        swipeValue = (0, useSwipe_1.default)(refs.modal.current, swipeOptions);
+    }
+    react_1.default.useEffect(() => {
+        if (open_ !== open)
+            setOpen(open_);
+    }, [open_]);
+    react_1.default.useEffect(() => {
+        if (swipeValue && version === 'modal') {
+            const valueSwipe = swipeValue.value;
+            const valuePercentageSwipe = (0, utils_1.clamp)(swipeValue.valuePercentage, 0, 100);
+            const position_ = swipeValue.position;
+            if (position_ !== undefined) {
+                let value_;
+                if (direction === 'top')
+                    value_ = `translateY(${valueSwipe}px)`;
+                if (direction === 'left')
+                    value_ = `translateX(${valueSwipe}px)`;
+                if (direction === 'right')
+                    value_ = `translateX(${valueSwipe}px)`;
+                if (direction === 'bottom')
+                    value_ = `translateY(${valueSwipe}px)`;
+                // Add transitions
+                if (refs.modal.current) {
+                    refs.modal.current.style.transition = theme.methods.transitions.make('transform', { duration: 'xs' });
+                    refs.modal.current.style.transform = value_;
+                }
+                if (refs.background.current) {
+                    refs.background.current.style.transition = theme.methods.transitions.make('opacity', { duration: 'xs' });
+                }
+                if (position_ === 'min') {
+                    if (refs.background.current) {
+                        refs.background.current.style.opacity = '0';
+                    }
+                    if (refs.modal.current)
+                        setTimeout(() => {
+                            onClose();
+                        }, theme.transitions.duration.xs + 14);
+                }
+                if (position_ === 'max') {
+                    if (refs.background.current) {
+                        refs.background.current.style.opacity = '1';
+                    }
+                }
+            }
+            else {
+                let value_ = '';
+                if (refs.modal.current) {
+                    if (direction === 'top')
+                        value_ = `translateY(${valueSwipe}px)`;
+                    if (direction === 'left')
+                        value_ = `translateX(${valueSwipe}px)`;
+                    if (direction === 'right')
+                        value_ = `translateX(${valueSwipe}px)`;
+                    if (direction === 'bottom')
+                        value_ = `translateY(${valueSwipe}px)`;
+                    // No transition
+                    refs.modal.current.style.transition = 'none';
+                    refs.modal.current.style.transform = value_;
+                }
+                if (swipeBackgroundFollow && refs.background.current) {
+                    // No transition
+                    refs.background.current.style.transition = 'none';
+                    refs.background.current.style.opacity = `${valuePercentageSwipe / 100}`;
+                }
+                else {
+                    // Add transition
+                    refs.background.current.style.transition = theme.methods.transitions.make('opacity', { duration: 'xs' });
+                }
+            }
+        }
+    }, [version, swipeValue === null || swipeValue === void 0 ? void 0 : swipeValue.value, swipeValue === null || swipeValue === void 0 ? void 0 : swipeValue.position]);
+    const onClose = react_1.default.useCallback(() => {
+        if ((0, utils_1.is)('function', onClose_))
+            onClose_();
+    }, []);
+    if (version === 'standard') {
+        other.portal = other.portal !== undefined ? other.portal : false;
+        other.freezeScroll = other.freezeScroll !== undefined ? other.freezeScroll : false;
+        other.background = other.background !== undefined ? other.background : false;
+        other.focus = other.focus !== undefined ? other.focus : false;
+        other.disableKeyboardClose = other.disableKeyboardClose !== undefined ? other.disableKeyboardClose : true;
+    }
+    TransitionComponentProps.direction = TransitionComponentProps.direction !== undefined ? TransitionComponentProps.direction : direction;
+    TransitionComponentProps.removeOnExited = TransitionComponentProps.removeOnExited !== undefined ? TransitionComponentProps.removeOnExited : min === undefined;
+    if (min !== undefined) {
+        other.freezeScroll = other.freezeScroll !== undefined ? other.freezeScroll : false;
+        other.openDefault = false;
+        TransitionComponentProps.min = TransitionComponentProps.min !== undefined ? TransitionComponentProps.min : min;
+    }
+    return ((0, jsx_runtime_1.jsx)(Modal, Object.assign({ ref: ref, open: open, mainRef: refs.modal, backgroundRef: refs.background, partialyOpened: min !== undefined, tonal: tonal, color: color, onClose: onClose, TransitionComponentProps: Object.assign({ onAdded: () => setEntered(true), onEntered: () => setEntered(true), onExited: () => setEntered(false), enterOnAdd: false }, TransitionComponentProps), TransitionComponent: Slide, Component: Component, portal: position === 'fixed', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NavigationDrawer', theme) && [
+                'onesy-NavigationDrawer-root'
+            ],
+            className,
+            classes.root,
+            classes[`position_${position}`],
+            classes[`direction_${direction}`],
+            classes[`version_${version}`],
+            classes[`version_${version}_position_${position}`]
+        ]) }, other, { children: children })));
+});
+NavigationDrawer.displayName = 'onesy-NavigationDrawer';
+exports.default = NavigationDrawer;

package/NavigationDrawer/index.d.ts

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

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

package/NavigationDrawer/package.json

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

package/NavigationItem/NavigationItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ITooltip } from '../Tooltip/Tooltip';
+import { ITonal, IColor, IElement, IElementReference, IPropsAny } from '../types';
+export declare type INavigationItemVersion = 'regular' | 'auto';
+export interface INavigationItem extends ITooltip {
+    tonal?: ITonal;
+    color?: IColor;
+    version?: 'regular' | 'auto';
+    value?: any;
+    vertical?: boolean;
+    name?: IElement;
+    label?: IElement;
+    icon?: IElement;
+    iconSelected?: IElement;
+    selected?: boolean;
+    disabled?: boolean;
+    IconWrapperComponent?: IElementReference;
+    onFocus?: (event: React.FocusEvent<any>) => any;
+    onBlur?: (event: React.FocusEvent<any>) => any;
+    onKeyDown?: (event: React.KeyboardEvent<any>) => any;
+    onMouseDown?: (event: React.MouseEvent<any>) => any;
+    onMouseEnter?: (event: React.MouseEvent<any>) => any;
+    onMouseLeave?: (event: React.MouseEvent<any>) => any;
+    onTouchStart?: (event: React.TouchEvent<any>) => any;
+    TooltipProps?: IPropsAny;
+    IconWrapperProps?: IPropsAny;
+}
+declare const NavigationItem: React.FC<INavigationItem>;
+export default NavigationItem;

package/NavigationItem/NavigationItem.js

@@ -0,0 +1,294 @@
+"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 Type_1 = __importDefault(require("../Type"));
+const Fade_1 = __importDefault(require("../Fade"));
+const Line_1 = __importDefault(require("../Line"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const Transition_1 = __importDefault(require("../Transition"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        display: 'inline-flex',
+        justifyContent: 'center',
+        flex: '1 1 auto',
+        userSelect: 'none',
+        cursor: 'pointer',
+        padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
+        minHeight: '80px',
+    },
+    vertical: {
+        flex: '0 0 auto',
+        padding: '0px',
+        minHeight: '52px',
+        width: '100%'
+    },
+    iconWrapper: {
+        position: 'absolute',
+        top: '0',
+        height: '32px',
+        width: '64px'
+    },
+    iconWrapper_center: {
+        top: '50%',
+        transform: 'translateY(-50%)',
+        transition: theme.methods.transitions.make(['top', 'transform']),
+    },
+    iconWrapper_center_selected: {
+        top: '0',
+        transform: 'translateY(0)'
+    },
+    icon: {
+        lineHeight: '0'
+    },
+    labelWrapper: {
+        position: 'absolute',
+        bottom: '0'
+    },
+    label: {
+        position: 'absolute',
+        bottom: '0'
+    },
+    indicator: {
+        position: 'absolute',
+        inset: '0',
+        width: '100%',
+        height: '100%',
+        borderRadius: theme.methods.shape.radius.value(40, 'px'),
+        opacity: '0',
+        transform: 'scaleX(0.74)',
+        transition: theme.methods.transitions.make(['opacity', 'transform']),
+        pointerEvents: 'none',
+        background: 'currentColor',
+    },
+    indicator_enter: {
+        opacity: '0',
+        transform: 'scaleX(0.74)',
+    },
+    indicator_entering: {
+        opacity: '1',
+        transform: 'scaleX(1)'
+    },
+    indicator_entered: {
+        opacity: '1',
+        transform: 'scaleX(1)'
+    },
+    indicator_exit: {
+        opacity: '1',
+        transform: 'scaleX(1)'
+    },
+    indicator_exiting: {
+        opacity: '0',
+        transform: 'scaleX(1)',
+        transition: theme.methods.transitions.make(['opacity', 'transform'], { duration: 0 })
+    },
+    indicator_exited: {
+        opacity: '0',
+        transform: 'scaleX(0.74)'
+    },
+    indicator_hover: { opacity: theme.palette.visual_contrast.default.opacity.hover },
+    indicator_selected: { opacity: theme.palette.visual_contrast.default.opacity.selected },
+    indicator_focus: { opacity: theme.palette.visual_contrast.default.opacity.focus },
+    indicator_pressed: { opacity: theme.palette.visual_contrast.default.opacity.press },
+    disabled: {
+        opacity: theme.palette.visual_contrast.default.opacity.disabled,
+        pointerEvents: 'none',
+        cursor: 'default'
+    }
+}), { name: 'onesy-NavigationItem' });
+const NavigationItem = react_1.default.forwardRef((props_, ref) => {
+    var _a;
+    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.onesyNavigationItem) === 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 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 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 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 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 { tonal = true, color = 'primary', version = 'regular', value, vertical, name, label, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [focus, setFocus] = react_1.default.useState(false);
+    const [hover, setHover] = react_1.default.useState(false);
+    const [mouseDown, setMouseDown] = react_1.default.useState(false);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        props: react_1.default.useRef(undefined),
+        hover: react_1.default.useRef(undefined)
+    };
+    const styles = {
+        root: {},
+        icon: {},
+        label: {},
+        indicator: {}
+    };
+    refs.props.current = props;
+    refs.hover.current = hover;
+    react_1.default.useEffect(() => {
+        var _a;
+        const onMouseUp = () => {
+            if (!refs.props.current.disabled) {
+                setMouseDown(false);
+                setFocus(false);
+            }
+        };
+        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);
+        return () => {
+            rootDocument.removeEventListener('mouseup', onMouseUp);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        if (!selected) {
+            if (refs.hover.current)
+                setHover(false);
+        }
+    }, [selected]);
+    const onKeyDown = react_1.default.useCallback((event) => {
+        if (!disabled) {
+            if (event.key === 'Enter') {
+                if ((0, utils_1.is)('function', props.onClick))
+                    props.onClick(event);
+            }
+        }
+        if ((0, utils_1.is)('function', onKeyDown_))
+            onKeyDown_(event);
+    }, []);
+    const onFocus = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setFocus(true);
+        if ((0, utils_1.is)('function', onFocus_))
+            onFocus_(event);
+    }, []);
+    const onBlur = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setFocus(false);
+        if ((0, utils_1.is)('function', onBlur_))
+            onBlur_(event);
+    }, []);
+    const onTouchStart = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setMouseDown(true);
+        if ((0, utils_1.is)('function', onTouchStart))
+            onTouchStart(event);
+    }, []);
+    const onMouseDown = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setMouseDown(true);
+        if ((0, utils_1.is)('function', onMouseDown_))
+            onMouseDown_(event);
+    }, []);
+    const onMouseEnter = react_1.default.useCallback((event) => {
+        if (!disabled)
+            setHover(true);
+        if ((0, utils_1.is)('function', onMouseEnter_))
+            onMouseEnter_(event);
+    }, []);
+    const onMouseLeave = react_1.default.useCallback((event) => {
+        if (!refs.props.current.disabled)
+            setHover(false);
+        if ((0, utils_1.is)('function', onMouseLeave_))
+            onMouseLeave_(event);
+    }, []);
+    let palette;
+    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+        palette = theme.methods.color(color);
+    }
+    if (!tonal) {
+        let background = (_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main;
+        if (color === 'default')
+            background = theme.palette.background.default.primary;
+        styles.icon.color = styles.label.color = styles.indicator.color = theme.methods.palette.color.text((palette === null || palette === void 0 ? void 0 : palette.main) || background, true, 'light');
+    }
+    else {
+        styles.indicator.color = (palette === null || palette === void 0 ? void 0 : palette.main) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
+        styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
+    }
+    const LabelWrapper = version === 'auto' ? Fade : react_1.default.Fragment;
+    const LabelWrapperProps = {};
+    if (version === 'auto') {
+        LabelWrapperProps.in = selected;
+        LabelWrapperProps.className = (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                'onesy-NavigationItem-label'
+            ],
+            classes.labelWrapper
+        ]);
+    }
+    const Icon = (selected && iconSelected) || icon;
+    return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: label || value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                    'onesy-NavigationItem-root',
+                    selected && 'onesy-NavigationItem-selected',
+                    hover && `onesy-NavigationItem-hover`,
+                    mouseDown && `onesy-NavigationItem-mouse-down`,
+                    focus && `onesy-NavigationItem-focus`,
+                    disabled && `onesy-NavigationItem-disabled`
+                ],
+                className,
+                classes.root,
+                vertical && classes.vertical,
+                disabled && classes.disabled
+            ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (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;
+                }, direction: 'column', align: 'center', justify: 'center', gap: 0.5, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                        'onesy-NavigationItem-item'
+                    ],
+                    classes.item
+                ]) }, { children: [Icon && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ Component: 'span', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                                'onesy-NavigationItem-icon-wrapper'
+                            ],
+                            classes.iconWrapper,
+                            ['none', 'auto'].includes(version) && classes.iconWrapper_center,
+                            ['auto'].includes(version) && selected && classes.iconWrapper_center_selected
+                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: hover || focus || selected }, { children: (status) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                                        (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                                            'onesy-NavigationItem-indicator'
+                                        ],
+                                        classes.indicator,
+                                        classes[`indicator_${status}`],
+                                        selected && classes.indicator_selected,
+                                        hover && classes.indicator_hover,
+                                        focus && classes.indicator_focus,
+                                        mouseDown && classes.indicator_pressed
+                                    ]), style: styles.indicator })) })), (0, jsx_runtime_1.jsx)(IconWrapperComponent, Object.assign({}, IconWrapperProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                                        'onesy-NavigationItem-icon'
+                                    ],
+                                    IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className,
+                                    classes.icon
+                                ]) }, { children: react_1.default.cloneElement(Icon, {
+                                    style: Object.assign(Object.assign({}, Icon.props.style), styles.icon)
+                                }) }))] }))), ['regular', 'auto'].includes(version) && ((0, jsx_runtime_1.jsx)(LabelWrapper, Object.assign({}, LabelWrapperProps, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                                    'onesy-NavigationItem-label'
+                                ],
+                                classes.label
+                            ]), style: styles.label }, { children: name !== undefined ? name : label })) })))] })) })) })));
+});
+NavigationItem.displayName = 'onesy-NavigationItem';
+exports.default = NavigationItem;

package/NavigationItem/index.d.ts

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

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

package/NavigationItem/package.json

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

package/NavigationRail/NavigationRail.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ISurface } from '../Surface/Surface';
+import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
+import { ISize, IElement, IPropsAny } from '../types';
+export interface INavigationRail extends Omit<ISurface, 'version'> {
+    size?: ISize;
+    value?: any;
+    valueDefault?: any;
+    onChange?: (value: any) => any;
+    version?: INavigationItemVersion;
+    justify?: 'start' | 'center' | 'end';
+    border?: boolean;
+    header?: IElement;
+    fixed?: boolean;
+    NavigationBarProps?: IPropsAny;
+    DividerProps?: IPropsAny;
+}
+declare const NavigationRail: React.FC<INavigationRail>;
+export default NavigationRail;