@onesy/ui-react 1.0.0

package/NavigationRail/NavigationRail.js

@@ -0,0 +1,156 @@
+"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 Divider_1 = __importDefault(require("../Divider"));
+const NavigationBar_1 = __importDefault(require("../NavigationBar"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        height: '100%',
+        width: '80px',
+        padding: `${theme.methods.space.value(5, 'px')} 0`,
+        overflow: 'auto',
+        zIndex: theme.z_index.app_bar
+    },
+    size_small: { width: '72px' },
+    size_regular: { width: '80px' },
+    size_large: { width: '88px' },
+    fixed: {
+        position: 'fixed',
+        insetBlock: '0',
+        insetInlineStart: '0'
+    },
+    header: {
+        marginBottom: '70px'
+    },
+    main: {
+        width: '100%',
+        flex: '1 1 auto',
+        '&.onesy-NavigationBar-root': {
+            background: 'transparent'
+        }
+    },
+    divider: {
+        position: 'absolute',
+        height: '100%',
+        insetBlock: '0',
+        insetInlineEnd: '0',
+        '&.onesy-Divider-root': {
+            margin: '0',
+            opacity: theme.palette.light ? '0.07' : '0.11'
+        }
+    }
+}), { name: 'onesy-NavigationRail' });
+const NavigationRail = 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.onesyNavigationRail) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
+    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
+    const NavigationBar = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NavigationBar) || NavigationBar_1.default; }, [theme]);
+    const { tonal = true, color = 'primary', version = 'regular', size = 'regular', value, valueDefault, onChange, justify = 'center', border, header: header_, fixed, NavigationBarProps, DividerProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "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);
+        }
+    };
+    const header = react_1.default.Children
+        .toArray(header_)
+        .map((item, index) => {
+        var _a;
+        return react_1.default.cloneElement(item, {
+            key: index,
+            color: item.props.color !== undefined ? item.props.color : color,
+            tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'secondary' : tonal
+        });
+    });
+    const children = react_1.default.Children
+        .toArray(children_)
+        .map((item, index) => {
+        var _a;
+        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) ? {
+            vertical: true
+        } : {})), { 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.jsxs)(Surface, Object.assign({ ref: ref, Component: Line, color: color, tonal: tonal, direction: 'column', align: 'initial', justify: 'initial', gap: 0, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NavigationRail', theme) && [
+                'onesy-NavigationRail-root',
+                `onesy-NavigationRail-version-${version}`,
+                `onesy-NavigationRail-size-${size}`
+            ],
+            className,
+            classes.root,
+            classes[`size_${size}`],
+            fixed && classes.fixed
+        ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [header && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NavigationRail', theme) && [
+                        'onesy-NavigationRail-header'
+                    ],
+                    classes.header
+                ]) }, { children: header }))), children && ((0, jsx_runtime_1.jsx)(NavigationBar, Object.assign({ version: version, direction: 'column', justify: justify, gap: 2, color: color, tonal: tonal }, NavigationBarProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NavigationRail', theme) && [
+                        'onesy-NavigationRail-main'
+                    ],
+                    NavigationBarProps === null || NavigationBarProps === void 0 ? void 0 : NavigationBarProps.className,
+                    classes.main
+                ]) }, { children: children }))), border && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({ orientation: 'vertical' }, DividerProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NavigationRail', theme) && [
+                        'onesy-NavigationRail-divider'
+                    ],
+                    DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                    classes.divider
+                ]) })))] })));
+});
+NavigationRail.displayName = 'onesy-NavigationRail';
+exports.default = NavigationRail;

package/NavigationRail/index.d.ts

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

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

package/NavigationRail/package.json

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

package/NotFound/NotFound.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ISection } from '../Section/Section';
+export interface INotFound extends ISection {
+    name?: any;
+    href?: string;
+    to?: string;
+    start?: any;
+    end?: any;
+    renderButton?: (props: any) => any;
+    fullHeight?: any;
+    ButtonProps?: any;
+    TypeProps?: any;
+}
+declare const NotFound: React.FC<INotFound>;
+export default NotFound;

package/NotFound/NotFound.js

@@ -0,0 +1,68 @@
+"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 react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Section_1 = __importDefault(require("../Section"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    fullHeight: {
+        height: '100vh'
+    }
+}), { name: 'onesy-NotFound' });
+const NotFound = 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.onesyNotFound) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_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 Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
+    const { name = 'Page not found 🫠', to = '/', link = '', renderButton, fullHeight, start, end, ButtonProps, TypeProps, className } = props, other = __rest(props, ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "ButtonProps", "TypeProps", "className"]);
+    const { classes } = useStyle();
+    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
+    const onTo = react_1.default.useCallback(() => {
+        if (link)
+            window.open(link, 'blank');
+        else
+            navigate(to);
+    }, [to, link]);
+    return ((0, jsx_runtime_1.jsxs)(Section, Object.assign({ ref: ref, flex: true, fullWidth: true, align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NotFound', theme) && [
+                `onesy-NotFound-root`
+            ],
+            className,
+            classes.root,
+            fullHeight && classes.fullHeight
+        ]) }, other, { children: [start, (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', align: 'center' }, TypeProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NotFound', theme) && [
+                        `onesy-NotFound-type`
+                    ],
+                    TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className
+                ]) }, { children: name })), (0, utils_1.is)('function', renderButton) ? renderButton({}) : ((0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'default', version: 'outlined', size: 'small', onClick: onTo }, ButtonProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('NotFound', theme) && [
+                        `onesy-NotFound-button`
+                    ],
+                    ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className,
+                    classes.button
+                ]) }, { children: "Back" }))), end] })));
+});
+NotFound.displayName = 'onesy-NotFound';
+exports.default = NotFound;

package/NotFound/index.d.ts

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

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

package/NotFound/package.json

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

package/NumericTextField/NumericTextField.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IAdvancedTextField } from '../AdvancedTextField/AdvancedTextField';
+import { IElementReference, IPropsAny } from '../types';
+export interface INumericTextField extends IAdvancedTextField {
+    min?: number;
+    max?: number;
+    increment?: boolean;
+    decrement?: boolean;
+    incrementValue?: number;
+    decrementValue?: number;
+    IconIncrement?: IElementReference;
+    IconDecrement?: IElementReference;
+    IconButtonProps?: IPropsAny;
+}
+declare const NumericTextField: React.FC<INumericTextField>;
+export default NumericTextField;

package/NumericTextField/NumericTextField.js

@@ -0,0 +1,217 @@
+"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 IconMaterialKeyboardArrowUpW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowUpW100"));
+const IconMaterialKeyboardArrowDownW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialKeyboardArrowDownW100"));
+const AdvancedTextField_1 = __importDefault(require("../AdvancedTextField"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {}
+}), { name: 'onesy-NumericTextField' });
+const NumericTextField = 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.onesyNumericTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const AdvancedTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AdvancedTextField) || AdvancedTextField_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 { valueDefault, value: value_, onChange: onChange_, version = 'outlined', size = 'regular', min, max, increment = true, decrement = true, incrementValue = 1, decrementValue = 1, onFocus: onFocus_, onBlur: onBlur_, IconIncrement = IconMaterialKeyboardArrowUpW100_1.default, IconDecrement = IconMaterialKeyboardArrowDownW100_1.default, IconButtonProps, IconProps, className } = props, other = __rest(props, ["valueDefault", "value", "onChange", "version", "size", "min", "max", "increment", "decrement", "incrementValue", "decrementValue", "onFocus", "onBlur", "IconIncrement", "IconDecrement", "IconButtonProps", "IconProps", "className"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const [focus, setFocus] = react_1.default.useState(false);
+    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),
+        focus: react_1.default.useRef(undefined),
+        min: react_1.default.useRef(undefined),
+        max: react_1.default.useRef(undefined),
+        onChange: react_1.default.useRef(onChange_),
+        props: react_1.default.useRef(props)
+    };
+    refs.value.current = value;
+    refs.focus.current = focus;
+    refs.min.current = min;
+    refs.max.current = max;
+    refs.onChange.current = onChange_;
+    refs.props.current = props;
+    react_1.default.useEffect(() => {
+        setInit(true);
+    }, []);
+    react_1.default.useEffect(() => {
+        var _a;
+        const method = (event) => {
+            if (['ArrowUp', 'ArrowDown', 'End', 'Home'].includes(event.key)) {
+                event.preventDefault();
+            }
+            switch (event.key) {
+                case 'End':
+                    if (refs.focus.current && refs.min.current !== undefined) {
+                        let valueNew = refs.min.current;
+                        if (props.thousand)
+                            valueNew = (0, utils_1.numberWithCommas)(valueNew);
+                        if (props.prefix !== undefined)
+                            valueNew = `${props.prefix}${valueNew}`;
+                        onChange(valueNew);
+                    }
+                    return;
+                case 'Home':
+                    if (refs.focus.current && refs.max.current !== undefined) {
+                        let valueNew = refs.max.current;
+                        if (props.thousand)
+                            valueNew = (0, utils_1.numberWithCommas)(valueNew);
+                        if (props.prefix !== undefined)
+                            valueNew = `${props.prefix}${valueNew}`;
+                        onChange(valueNew);
+                    }
+                    return;
+                case 'ArrowUp':
+                    if (refs.focus.current)
+                        onIncrement();
+                    return;
+                case 'ArrowDown':
+                    if (refs.focus.current)
+                        onDecrement();
+                    return;
+                default:
+                    break;
+            }
+        };
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('keydown', method);
+        return () => {
+            // Clean up
+            rootDocument.removeEventListener('keydown', method);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        if (init) {
+            if (value_ !== value)
+                setValue(value_);
+        }
+    }, [value_]);
+    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 onChange = (valueNew_) => {
+        let valueNew = valueNew_;
+        const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+        const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+        if (['', ' ', refs.props.current.prefix, `${refs.props.current.prefix} `, undefined].includes(valueNew))
+            valueNew = '';
+        if (!['', ' ', '+', '-', 'e', 'e+', 'e-', `${refs.props.current.prefix}+`, `${refs.props.current.prefix}-`, undefined].includes(valueNew)) {
+            if (refs.props.current.prefix !== undefined)
+                valueNew = valueNew.replace(refs.props.current.prefix, '');
+            if (refs.props.current.thousand)
+                valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+            valueNew = (0, utils_1.clamp)(+valueNew, min_, max_);
+            if (refs.props.current.thousand)
+                valueNew = (0, utils_1.numberWithCommas)(valueNew);
+            if (refs.props.current.prefix !== undefined)
+                valueNew = `${refs.props.current.prefix}${valueNew}`;
+        }
+        if (['+', '-', 'e', 'e+', 'e-'].includes(valueNew_) ||
+            ((String(valueNew_).startsWith('-0') || String(valueNew_).includes('.')) && (0, utils_1.clamp)(+valueNew_, min_, max_) === +valueNew_))
+            valueNew = valueNew_;
+        // Update inner or controlled
+        if (!refs.props.current.hasOwnProperty('value'))
+            setValue(valueNew);
+        if ((0, utils_1.is)('function', refs.onChange.current))
+            refs.onChange.current(valueNew);
+    };
+    const onIncrement = () => {
+        let valueNew = refs.value.current || '0';
+        if (refs.props.current.prefix !== undefined)
+            valueNew = valueNew.replace(refs.props.current.prefix, '');
+        if (refs.props.current.thousand)
+            valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+        const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+        const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+        valueNew = (0, utils_1.clamp)(+valueNew + incrementValue, min_, max_);
+        if (refs.props.current.thousand)
+            valueNew = (0, utils_1.numberWithCommas)(valueNew);
+        if (refs.props.current.prefix !== undefined)
+            valueNew = `${refs.props.current.prefix}${valueNew}`;
+        // Update
+        onChange(valueNew);
+    };
+    const onDecrement = () => {
+        let valueNew = refs.value.current || '0';
+        if (refs.props.current.prefix !== undefined)
+            valueNew = valueNew.replace(refs.props.current.prefix, '');
+        if (refs.props.current.thousand)
+            valueNew = valueNew.replace(new RegExp(`\\${refs.props.current.thousandSeparator || ','}`, 'g'), '');
+        const min_ = refs.min.current !== undefined ? refs.min.current : Number.MIN_SAFE_INTEGER;
+        const max_ = refs.max.current !== undefined ? refs.max.current : Number.MAX_SAFE_INTEGER;
+        valueNew = (0, utils_1.clamp)(+valueNew - decrementValue, min_, max_);
+        if (refs.props.current.thousand)
+            valueNew = (0, utils_1.numberWithCommas)(valueNew);
+        if (refs.props.current.prefix !== undefined)
+            valueNew = `${refs.props.current.prefix}${valueNew}`;
+        // Update
+        onChange(valueNew);
+    };
+    const end = [];
+    const iconButtonProps = {
+        size: 24,
+        fontSize: '1.5rem'
+    };
+    if (decrement)
+        end.push((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onDecrement }, iconButtonProps, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDecrement, Object.assign({}, IconProps)) })));
+    if (increment)
+        end.push((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onIncrement }, iconButtonProps, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconIncrement, Object.assign({}, IconProps)) })));
+    return ((0, jsx_runtime_1.jsx)(AdvancedTextField, Object.assign({ ref: item => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, value: value, onFocus: onFocus, onBlur: onBlur, onChange: onChange, version: version, size: size, validate: (valueNew_) => {
+            if (valueNew_.startsWith(' ') || valueNew_.endsWith(' '))
+                return;
+            if (['', ' ', '+', '-', 'e', 'e+', 'e-', '-0', '-0.', props.prefix, `${props.prefix} `, `${props.prefix}+`, `${props.prefix}-`, undefined].includes(valueNew_))
+                return true;
+            let valueNew = valueNew_;
+            if (props.prefix !== undefined)
+                valueNew = valueNew_.replace(props.prefix, '');
+            if (props.thousand)
+                valueNew = valueNew.replace(new RegExp(`\\${props.thousandSeparator || ','}`, 'g'), '');
+            valueNew = +valueNew;
+            return (0, utils_1.is)('number', valueNew);
+        }, end: end, endVerticalAlign: 'center', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('NumericTextField', theme) && [
+                'onesy-NumericTextField-root',
+                `onesy-NumericTextField-version-${version}`,
+                `onesy-NumericTextField-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other)));
+});
+NumericTextField.displayName = 'onesy-NumericTextField';
+exports.default = NumericTextField;

package/NumericTextField/index.d.ts

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

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

package/NumericTextField/package.json

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

package/Page/Page.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { IElement, IElementReference } from '../types';
+export interface IPageForward {
+    to?: string;
+    name?: string;
+    label?: string;
+}
+export interface IPage extends ILine {
+    back?: IPageForward;
+    forward?: IPageForward;
+    noHeader?: boolean;
+    name?: string | IElement;
+    IconBack?: IElementReference;
+    IconForward?: IElementReference;
+}
+declare const Page: React.FC<IPage>;
+export default Page;

package/Page/Page.js

@@ -0,0 +1,70 @@
+"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 react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialArrowBackW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowBackW100"));
+const IconMaterialArrowForwardW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialArrowForwardW100"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Line_1 = __importDefault(require("../Line"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const Type_1 = __importDefault(require("../Type"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        height: '100%',
+        maxWidth: '1024px',
+        padding: theme.methods.space.value(3, 'px'),
+        '& .onesy-overflow-y': {
+            height: '0px',
+            flex: '1 1 auto',
+            overflowX: 'hidden',
+            overflowY: 'auto'
+        }
+    },
+    name: {
+        maxWidth: '440px'
+    }
+}), { name: 'onesy-Page' });
+const Page = 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.onesyPage) === 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 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 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 { back, forward, noHeader, name, IconBack = IconMaterialArrowBackW100_1.default, IconForward = IconMaterialArrowForwardW100_1.default, Component = Line, className, children } = props, other = __rest(props, ["back", "forward", "noHeader", "name", "IconBack", "IconForward", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
+    const IconButtonProps = {
+        color: 'inherit'
+    };
+    const navigation = (back || forward) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [back ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((back === null || back === void 0 ? void 0 : back.name) !== undefined ? back.name : back === null || back === void 0 ? void 0 : back.label) || 'Back' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(back === null || back === void 0 ? void 0 : back.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBack, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {}), forward ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((forward === null || forward === void 0 ? void 0 : forward.name) !== undefined ? forward.name : forward === null || forward === void 0 ? void 0 : forward.label) || 'Forward' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(forward === null || forward === void 0 ? void 0 : forward.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconForward, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {})] })));
+    const header = !noHeader && (navigation || name) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'column', fullWidth: true }, { children: [navigation, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'center', fullWidth: true }, { children: (0, utils_1.is)('string', name) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1', color: 'inherit', align: 'center', className: classes.name }, { children: name }))) : name }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, gap: 4, direction: 'column', justify: 'unset', align: 'unset', fullWidth: true, flex: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Page', theme) && [
+                'onesy-Page-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [header, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'column', justify: 'unset', align: 'unset', fullWidth: true, flex: true }, { children: children }))] })));
+});
+Page.displayName = 'onesy-Page';
+exports.default = Page;

package/Page/index.d.ts

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

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