@onesy/ui-react 1.0.0

package/ModalText/package.json

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

package/ModalTitle/ModalTitle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IType } from '../Type/Type';
+export interface IModalTitle extends IType {
+}
+declare const ModalTitle: React.FC<IModalTitle>;
+export default ModalTitle;

package/ModalTitle/ModalTitle.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 Type_1 = __importDefault(require("../Type"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {}
+}), { name: 'onesy-ModalTitle' });
+const ModalTitle = 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.onesyModalTitle) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    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 { className, children } = props, other = __rest(props, ["className", "children"]);
+    const { classes } = useStyle();
+    return ((0, jsx_runtime_1.jsx)(Type, Object.assign({ ref: ref, version: 't2', align: 'center', id: 'onesy-modal-title', className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('ModalTitle', theme) && [
+                'onesy-ModalTitle-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: children })));
+});
+ModalTitle.displayName = 'onesy-ModalTitle';
+exports.default = ModalTitle;

package/ModalTitle/index.d.ts

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

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

package/ModalTitle/package.json

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

package/MoreOptions/MoreOptions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IMenu } from '../Menu/Menu';
+import { IPropsAny } from '../types';
+export interface IMoreOptions extends IMenu {
+    Icon?: any;
+    IconButtonProps?: IPropsAny;
+}
+declare const MoreOptions: React.FC<IMoreOptions>;
+export default MoreOptions;

package/MoreOptions/MoreOptions.js

@@ -0,0 +1,55 @@
+"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 IconMaterialMoreVertW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialMoreVertW100"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Menu_1 = __importDefault(require("../Menu/Menu"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    iconButton: {
+        flex: '0 0 auto'
+    }
+}), { name: 'onesy-MoreOptions' });
+const MoreOptions = 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.onesyMoreOptions) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_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 { menuItems, Icon: Icon_ = IconMaterialMoreVertW100_1.default, IconButtonProps, className } = props, other = __rest(props, ["menuItems", "Icon", "IconButtonProps", "className"]);
+    const { classes } = useStyle();
+    const onClick = react_1.default.useCallback((event) => {
+        //  event.stopPropagation();
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ alignment: 'center', onClick: onClick, menuItems: menuItems }, other, { ListProps: Object.assign({ color: 'themed', size: 'small' }, other === null || other === void 0 ? void 0 : other.ListProps), className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('MoreOptions', theme) && [
+                'onesy-MoreOptions-root'
+            ],
+            className,
+            classes.root
+        ]) }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ color: 'inherit', size: 'small', disabled: !(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length), onClick: onClick }, IconButtonProps, { className: (0, style_react_1.classNames)([
+                (0, utils_1.staticClassName)('MoreOptions', theme) && [
+                    'onesy-MoreOptions-icon-button'
+                ],
+                IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
+                classes.iconButton
+            ]) }, { children: (0, jsx_runtime_1.jsx)(Icon_, {}) })) })));
+});
+MoreOptions.displayName = 'onesy-MoreOptions';
+exports.default = MoreOptions;

package/MoreOptions/index.d.ts

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

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

package/MoreOptions/package.json

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

package/Move/Move.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IBaseElement } from '../types';
+export interface IMove extends IBaseElement {
+    version?: 'regular' | 'fixed';
+    manage?: boolean;
+    manageLevel?: number;
+    onMouseDown?: (event: React.MouseEvent<any>) => any;
+    onTouchStart?: (event: React.TouchEvent<any>) => any;
+}
+declare const Move: React.FC<IMove>;
+export default Move;

package/Move/Move.js

@@ -0,0 +1,147 @@
+"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 utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        pointerEvents: 'auto',
+        touchAction: 'none'
+    }
+}), { name: 'onesy-Move' });
+const Move = 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.onesyMove) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { classes } = useStyle();
+    const { version = 'regular', manage = false, manageLevel = 0, disabled, onMouseDown: onMouseDown_, onTouchStart: onTouchStart_, Component = 'div', className, style, children } = props, other = __rest(props, ["version", "manage", "manageLevel", "disabled", "onMouseDown", "onTouchStart", "Component", "className", "style", "children"]);
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        values: react_1.default.useRef(undefined),
+        version: react_1.default.useRef(undefined),
+        mouseDown: react_1.default.useRef(undefined),
+        onMouseDown: react_1.default.useRef(undefined),
+        onTouchStart: react_1.default.useRef(undefined),
+        previousMouseEvent: react_1.default.useRef(undefined),
+        disabled: react_1.default.useRef(undefined)
+    };
+    const [mouseDown, setMouseDown] = react_1.default.useState(false);
+    const [values, setValues] = react_1.default.useState({});
+    refs.version.current = version;
+    refs.values.current = values;
+    refs.mouseDown.current = mouseDown;
+    refs.onMouseDown.current = onMouseDown_;
+    refs.onTouchStart.current = onTouchStart_;
+    refs.disabled.current = disabled;
+    const styles = {
+        root: {}
+    };
+    const onMouseDown = react_1.default.useCallback((event) => {
+        setMouseDown(true);
+        if ((0, utils_1.is)('function', refs.onMouseDown.current))
+            refs.onMouseDown.current(event);
+    }, []);
+    const onTouchStart = react_1.default.useCallback((event) => {
+        setMouseDown(true);
+        if ((0, utils_1.is)('function', refs.onTouchStart.current))
+            refs.onTouchStart.current(event);
+    }, []);
+    const onMouseUp = react_1.default.useCallback((event) => {
+        setMouseDown(false);
+        refs.previousMouseEvent.current = undefined;
+        if ((0, utils_1.is)('function', refs.onMouseDown.current))
+            refs.onMouseDown.current(event);
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        const onMove = (x_, y_) => {
+            if (refs.mouseDown.current && refs.previousMouseEvent.current && !refs.disabled.current) {
+                const { clientX: xPrevious, clientY: yPrevious } = refs.previousMouseEvent.current;
+                const x = x_ - xPrevious;
+                const y = y_ - yPrevious;
+                const transform = refs.root.current.style.transform;
+                const { left: left_, top: top_ } = refs.root.current.style;
+                const [xTransform, yTransform] = ((transform === null || transform === void 0 ? void 0 : transform.match(/[-+]?\d+\.?\d*/g)) || [0, 0]).map((item) => Number(item));
+                const left = +(left_ || '').replace('px', '');
+                const top = +(top_ || '').replace('px', '');
+                const valuesNew = Object.assign(Object.assign({}, refs.values.current), { x: x + (left || xTransform || 0), y: y + (top || yTransform || 0) });
+                if (refs.version.current === 'regular')
+                    refs.root.current.style.transform = `translate(${valuesNew.x}px, ${valuesNew.y}px)`;
+                else {
+                    refs.root.current.style.position = 'fixed';
+                    refs.root.current.style.left = `${valuesNew.x}px`;
+                    refs.root.current.style.top = `${valuesNew.y}px`;
+                }
+                setValues(valuesNew);
+            }
+        };
+        const onMouseMove = (event) => {
+            if (refs.mouseDown.current && !refs.disabled.current) {
+                const { clientY, clientX } = event;
+                onMove(clientX, clientY);
+                refs.previousMouseEvent.current = event;
+            }
+        };
+        const onTouchMove = (event) => {
+            if (refs.mouseDown.current && !refs.disabled.current) {
+                const { clientY, clientX } = event.touches[0];
+                onMove(clientX, clientY);
+                refs.previousMouseEvent.current = event;
+                // Normalize for use as a mouseDown value
+                refs.previousMouseEvent.current.clientY = clientY;
+                refs.previousMouseEvent.current.clientX = clientX;
+            }
+        };
+        if (manage && refs.root.current) {
+            const parents = (0, utils_1.element)(refs.root.current).parents();
+            const parent = parents[manageLevel || 0];
+            if (parent && !['HTML', 'html', 'BODY', 'body', 'HEAD', 'head'].includes(parent.tagName)) {
+                parent.style.pointerEvents = 'none';
+                styles.root.pointerEvents = 'auto';
+            }
+        }
+        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);
+        rootDocument.addEventListener('touchmove', onTouchMove, { passive: true });
+        return () => {
+            rootDocument.removeEventListener('mouseup', onMouseUp);
+            rootDocument.removeEventListener('mousemove', onMouseMove);
+            rootDocument.removeEventListener('touchend', onMouseUp);
+            rootDocument.removeEventListener('touchmove', onTouchMove);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, onMouseDown: onMouseDown, onTouchStart: onTouchStart, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Move', theme) && [
+                'onesy-Move-root'
+            ],
+            className,
+            classes.root
+        ]), style: Object.assign(Object.assign({}, styles.root), style) }, other, { children: children })));
+});
+Move.displayName = 'onesy-Move';
+exports.default = Move;

package/Move/index.d.ts

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

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

package/Move/package.json

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

package/NavigationBar/NavigationBar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ISurface } from '../Surface/Surface';
+import { INavigationItemVersion } from '../NavigationItem/NavigationItem';
+export declare type TNavigationBarValue = Array<string>;
+export interface INavigationBar extends Omit<ISurface, 'version'> {
+    value?: TNavigationBarValue;
+    valueDefault?: TNavigationBarValue;
+    onChange?: (value: TNavigationBarValue) => any;
+    version?: INavigationItemVersion;
+    fixed?: boolean;
+}
+declare const NavigationBar: React.FC<INavigationBar>;
+export default NavigationBar;

package/NavigationBar/NavigationBar.js

@@ -0,0 +1,114 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Line_1 = __importDefault(require("../Line"));
+const Surface_1 = __importDefault(require("../Surface"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        zIndex: theme.z_index.app_bar,
+        width: '100%',
+        padding: '0'
+    },
+    fixed: {
+        position: 'fixed',
+        insetInline: '0',
+        bottom: '0'
+    }
+}), { name: 'onesy-NavigationBar' });
+const NavigationBar = 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.onesyNavigationBar) === 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 { color = 'primary', tonal = true, version = 'regular', value, valueDefault, onChange, fixed, className, style, children: children_ } = props, other = __rest(props, ["color", "tonal", "version", "value", "valueDefault", "onChange", "fixed", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const [selected, setSelected] = react_1.default.useState(() => {
+        const valueNew = valueDefault !== undefined ? valueDefault : value;
+        return valueNew !== undefined ? (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew] : [];
+    });
+    const styles = {
+        root: {},
+        icon: {}
+    };
+    react_1.default.useEffect(() => {
+        setInit(true);
+    }, []);
+    react_1.default.useEffect(() => {
+        if (init && value !== selected)
+            setSelected((0, utils_1.is)('array', value) ? value : [value]);
+    }, [value]);
+    const onSelect = (itemProps) => {
+        // Only one item at the time is selectable,
+        // and it cannot be unselected by clicking on the same item
+        const valueNew = [itemProps.value];
+        if (valueNew !== undefined) {
+            // Update inner or controlled
+            if (!props.hasOwnProperty('value'))
+                setSelected(valueNew);
+            if ((0, utils_1.is)('function', onChange))
+                onChange(valueNew);
+        }
+    };
+    let palette;
+    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+        palette = theme.methods.color(color);
+    }
+    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
+        if (tonal)
+            styles.root.backgroundColor = theme.methods.palette.color.value(undefined, 95, true, palette);
+        else
+            styles.root.backgroundColor = palette.main;
+    }
+    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 = theme.methods.palette.color.text((palette === null || palette === void 0 ? void 0 : palette.main) || background, true, 'light');
+    }
+    else {
+        styles.icon.color = theme.methods.palette.color.value(color, 5, true, palette);
+    }
+    const children = react_1.default.Children
+        .toArray(children_)
+        .map((item, index) => {
+        var _a, _b;
+        return react_1.default.cloneElement(item, Object.assign(Object.assign({ key: index }, (['onesy-NavigationItem'].includes((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? Object.assign(Object.assign({}, other), { version }) : {})), { color: item.props.color !== undefined ? item.props.color : (['onesy-NavigationItem'].includes((_b = item.type) === null || _b === void 0 ? void 0 : _b.displayName) ? color : styles.icon.color), tonal: item.props.tonal !== undefined ? item.props.tonal : tonal, selected: selected.includes(item.props.value), onClick: () => {
+                if (!item.props.disabled) {
+                    onSelect(item.props);
+                    // Invoke items on click method
+                    if ((0, utils_1.is)('function', item.props.onClick))
+                        item.props.onClick();
+                }
+            } }));
+    });
+    return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, Component: Line, color: color, tonal: tonal, direction: 'row', align: 'center', justify: 'initial', gap: 1, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NavigationBar', theme) && [
+                'onesy-NavigationBar-root'
+            ],
+            className,
+            classes.root,
+            fixed && classes.fixed
+        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: children })));
+});
+NavigationBar.displayName = 'onesy-NavigationBar';
+exports.default = NavigationBar;

package/NavigationBar/index.d.ts

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

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

package/NavigationBar/package.json

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

package/NavigationDrawer/NavigationDrawer.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IModal } from '../Modal/Modal';
+import { IMethodTransition, IPropsAny } from '../types';
+export interface INavigationDrawer extends IModal {
+    version?: 'modal' | 'standard';
+    position?: 'fixed' | 'absolute';
+    direction?: 'top' | 'left' | 'bottom' | 'right';
+    swipe?: boolean;
+    swipeTouchAnywhere?: boolean;
+    swipeBackgroundFollow?: boolean;
+    min?: number;
+    removeOnExited?: IMethodTransition;
+    TransitionComponentProps?: IPropsAny;
+}
+declare const NavigationDrawer: React.FC<INavigationDrawer>;
+export default NavigationDrawer;