@onesy/ui-react 1.0.0

package/Emojis/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Emojis';
+export { default as emojis_list } from './emojis_list';

package/Emojis/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emojis_list = exports.default = void 0;
+var Emojis_1 = require("./Emojis");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Emojis_1).default; } });
+var emojis_list_1 = require("./emojis_list");
+Object.defineProperty(exports, "emojis_list", { enumerable: true, get: function () { return __importDefault(emojis_list_1).default; } });

package/Emojis/package.json

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

package/Expand/Expand.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITransition } from '..';
+import { IPropsAny } from '../types';
+export interface IExpand extends Omit<ITransition, 'className'> {
+    value?: number;
+    expandSize?: number;
+    orientation?: 'veritcal' | 'horizontal';
+    WrapperProps?: IPropsAny;
+    className?: string;
+}
+declare const Expand: React.FC<IExpand>;
+export default Expand;

package/Expand/Expand.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 __1 = require("..");
+const Wrapper = react_1.default.forwardRef((props, ref) => {
+    const { children, style } = props, other = __rest(props, ["children", "style"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, other, { style: Object.assign({ width: '100%' }, style) }, { children: props.children })));
+});
+const Expand = 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.onesyExpand) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { in: inProp, value: valueProvided, prefix, run, append, add, enter, exit, enterOnAdd, exitOnAdd, noAbruption, removeOnExited = true, delay, duration: duration_, timing_function, addTransition, onTransition, onAppended, onAdd, onAdding, onAdded, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onRemoved, expandSize, orientation, WrapperProps, className, style, children } = props, other = __rest(props, ["in", "value", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "expandSize", "orientation", "WrapperProps", "className", "style", "children"]);
+    const [value, setValue] = react_1.default.useState(valueProvided !== undefined ? valueProvided : null);
+    const [parent, setParent] = react_1.default.useState();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        placeholder: react_1.default.useRef(undefined),
+        parent: react_1.default.useRef(undefined),
+        element: react_1.default.useRef(undefined),
+        value: react_1.default.useRef(0)
+    };
+    refs.value.current = value;
+    refs.parent.current = parent;
+    let prop = 'height';
+    if (orientation === 'horizontal')
+        prop = 'width';
+    const isTransition = react_1.default.useCallback((item) => {
+        const values = ['Transition', 'Fade', 'Grow', 'Slide', 'Zoom'];
+        return values.some(item_ => item === null || item === void 0 ? void 0 : item.includes(item_));
+    }, []);
+    const childrenWithTransition = isTransition((_a = children === null || children === void 0 ? void 0 : children.type) === null || _a === void 0 ? void 0 : _a.displayName);
+    react_1.default.useEffect(() => {
+        const method = () => {
+            setValue(null);
+            setParent(null);
+        };
+        // on resize
+        // recalculate width, value
+        window.addEventListener('resize', method);
+        return () => {
+            window.removeEventListener('resize', method);
+        };
+    }, []);
+    const styles = (status) => {
+        var _a;
+        const styles_ = (refs.root.current && window.getComputedStyle((_a = refs.root) === null || _a === void 0 ? void 0 : _a.current)) || {};
+        const allStyles = {
+            appended: {
+                position: 'fixed',
+                left: '1114%',
+                visibility: 'hidden'
+            },
+            enter: {
+                transition: 'none',
+                [prop]: 0,
+                overflow: 'hidden'
+            },
+            entering: {
+                [prop]: `${valueProvided !== undefined ? valueProvided : refs.value.current}px`,
+                overflow: 'hidden'
+            },
+            entered: {
+                [prop]: 'auto'
+            },
+            exit: {
+                [prop]: styles_[prop],
+                overflow: 'hidden'
+            },
+            exiting: {
+                [prop]: expandSize !== undefined ? expandSize : '0',
+                overflow: 'hidden'
+            },
+            exited: {
+                [prop]: expandSize !== undefined ? expandSize : '0',
+                overflow: 'hidden'
+            }
+        };
+        return allStyles[status];
+    };
+    const duration = (status, property = 'opacity') => {
+        const properties = {
+            [prop]: theme.transitions.duration.rg
+        };
+        return `${((0, utils_1.is)('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
+    };
+    const timingFunction = (status) => ((0, utils_1.is)('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
+    const children_ = ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, WrapperProps, { children: children })));
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [value === null && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: item => {
+                            if (!item)
+                                return;
+                            if (!parent)
+                                setParent(item.parentElement);
+                        } }), parent && ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, WrapperProps, { ref: (item) => {
+                            if (!item)
+                                return;
+                            if (WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.ref) {
+                                if ((0, utils_1.is)('function', WrapperProps.ref))
+                                    WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.ref(item);
+                                else
+                                    WrapperProps.ref.current = item;
+                            }
+                            if (refs.value.current === null) {
+                                setValue(item.getBoundingClientRect()[prop] || 0);
+                            }
+                        }, style: Object.assign({ position: 'fixed', left: '1114%', visibility: 'hidden', width: parent.offsetWidth }, WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style) }, { children: react_1.default.cloneElement(children, Object.assign({}, (childrenWithTransition && { in: true }))) })))] }), value !== null && ((0, jsx_runtime_1.jsx)(__1.Transition, Object.assign({ removeOnExited: true }, props, { children: (status, ref_) => {
+                    var _a;
+                    // If children update
+                    // & value is updated
+                    if (['appending', 'appended', 'adding', 'added', 'entering', 'entered'].includes(status)) {
+                        const value_ = (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {})[prop];
+                        if (value_ > 0 && value_ !== refs.value.current)
+                            setValue(value_);
+                    }
+                    return react_1.default.cloneElement(children_, Object.assign(Object.assign({}, other), { className, ref: (item) => {
+                            refs.root.current = item;
+                            if (ref) {
+                                if ((0, utils_1.is)('function', ref))
+                                    ref(item);
+                                else
+                                    ref.current = item;
+                            }
+                            if (ref_) {
+                                if ((0, utils_1.is)('function', ref_))
+                                    ref_(item);
+                                else
+                                    ref_.current = item;
+                            }
+                            if (children_.ref) {
+                                if ((0, utils_1.is)('function', children_.ref))
+                                    children_.ref(item);
+                                else
+                                    children_.ref.current = item;
+                            }
+                        }, style: Object.assign(Object.assign(Object.assign({ position: 'relative', transition: `${prop} ${duration(status, prop)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`, visibility: status === 'exited' && !inProp && expandSize === undefined ? 'hidden' : undefined }, styles(status)), style), children_ === null || children_ === void 0 ? void 0 : children_.style) }));
+                } })))] });
+});
+Expand.displayName = 'onesy-Expand';
+exports.default = Expand;

package/Expand/index.d.ts

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

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

package/Expand/package.json

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

package/Fab/Fab.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IButton } from '../Button/Button';
+export interface IFab extends IButton {
+}
+declare const Fab: React.FC<IFab>;
+export default Fab;

package/Fab/Fab.js

@@ -0,0 +1,29 @@
+"use strict";
+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 Button_1 = __importDefault(require("../Button"));
+const utils_1 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {}
+}), { name: 'onesy-Fab' });
+const Fab = 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.onesyFab) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    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 { tonal = 'primary', version = 'filled', className } = props;
+    const { classes } = useStyle();
+    return ((0, jsx_runtime_1.jsx)(Button, Object.assign({ ref: ref }, props, { className: (0, style_react_1.classNames)([
+            (0, utils_1.staticClassName)('Fab', theme) && [
+                'onesy-Fab-root'
+            ],
+            className,
+            classes.root
+        ]), version: version, tonal: tonal, fab: true })));
+});
+Fab.displayName = 'onesy-Fab';
+exports.default = Fab;

package/Fab/index.d.ts

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

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

package/Fab/package.json

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

package/Fade/Fade.d.ts

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

package/Fade/Fade.js

@@ -0,0 +1,106 @@
+"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 __1 = require("..");
+const Fade = 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.onesyFade) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const { in: inProp, prefix, run, append, add, enter, exit, enterOnAdd, exitOnAdd, noAbruption, removeOnExited, delay, duration: duration_, timing_function, addTransition, onTransition, onAppended, onAdd, onAdding, onAdded, onEnter, onEntering, onEntered, onExit, onExiting, onExited, onRemoved, className, style, children } = props, other = __rest(props, ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"]);
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    const styles = (status) => {
+        var _a;
+        const { opacity = 1 } = (refs.root.current && window.getComputedStyle((_a = refs.root) === null || _a === void 0 ? void 0 : _a.current)) || {};
+        const allStyles = {
+            appended: {
+                visibility: 'hidden'
+            },
+            add: {
+                transition: 'none',
+                opacity: 0
+            },
+            adding: {
+                opacity: 1
+            },
+            added: {
+                opacity: 1
+            },
+            enter: {
+                transition: 'none',
+                opacity: 0
+            },
+            entering: {
+                opacity: 1
+            },
+            // With no opacity
+            // as if there's inline opacity value
+            // it ie. overrides button disabled class
+            // opacity value
+            entered: {},
+            exit: {
+                opacity
+            },
+            exiting: {
+                opacity: 0
+            },
+            exited: {
+                opacity: 0
+            }
+        };
+        return allStyles[status];
+    };
+    const duration = (status, property = 'opacity') => {
+        const properties = {
+            opacity: theme.transitions.duration.sm
+        };
+        return `${((0, utils_1.is)('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
+    };
+    const timingFunction = status => ((0, utils_1.is)('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
+    return ((0, jsx_runtime_1.jsx)(__1.Transition, Object.assign({}, props, { name: 'fade' }, { children: (status, ref_) => {
+            var _a, _b;
+            return react_1.default.cloneElement(children, Object.assign(Object.assign({}, other), { ref: (item) => {
+                    refs.root.current = item;
+                    if (ref) {
+                        if ((0, utils_1.is)('function', ref))
+                            ref(item);
+                        else
+                            ref.current = item;
+                    }
+                    if (ref_) {
+                        if ((0, utils_1.is)('function', ref_))
+                            ref_(item);
+                        else
+                            ref_.current = item;
+                    }
+                    if (children.ref) {
+                        if ((0, utils_1.is)('function', children.ref))
+                            children.ref(item);
+                        else
+                            children.ref.current = item;
+                    }
+                }, className: (0, style_react_1.classNames)([
+                    className,
+                    (_a = children === null || children === void 0 ? void 0 : children.props) === null || _a === void 0 ? void 0 : _a.className
+                ]), style: Object.assign(Object.assign(Object.assign({ visibility: status === 'exited' && !inProp ? 'hidden' : undefined, transition: `opacity ${duration(status)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}` }, styles(status)), (_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b.style), style) }));
+        } })));
+});
+Fade.displayName = 'onesy-Fade';
+exports.default = Fade;

package/Fade/index.d.ts

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

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

package/Fade/package.json

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

package/FileChoose/FileChoose.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ILine } from '../Line/Line';
+import { ITonal, IColor, IRef, IElementReference, IPropsAny, ISize } from '../types';
+export declare type TFileChooseValue = File | Array<File>;
+export interface IFileChoose extends ILine {
+    tonal?: ITonal;
+    color?: IColor;
+    inputRef?: IRef;
+    size?: ISize;
+    max?: number;
+    allowedTypes?: Array<string>;
+    files?: Array<File>;
+    valueDefault?: TFileChooseValue;
+    value?: TFileChooseValue;
+    multiple?: boolean;
+    accept?: string;
+    capture?: boolean | 'user' | 'environment';
+    remove?: boolean;
+    renderFiles?: (value: TFileChooseValue, onRemove: (index: number) => any) => any;
+    onClick?: (event: React.MouseEvent<any>) => any;
+    onChange?: (value: TFileChooseValue) => any;
+    IconStart?: IElementReference;
+    inputProps?: IPropsAny;
+    WrapperProps?: IPropsAny;
+    ComponentProps?: IPropsAny;
+}
+declare const FileChoose: React.FC<IFileChoose>;
+export default FileChoose;

package/FileChoose/FileChoose.js

@@ -0,0 +1,154 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
+const IconMaterialDraftW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialDraftW100"));
+const IconMaterialCloudUploadW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloudUploadW100"));
+const IconMaterialFolderW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFolderW100"));
+const IconMaterialFolderOpenW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFolderOpenW100"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Tree_1 = __importDefault(require("../Tree"));
+const Line_1 = __importDefault(require("../Line"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative'
+    },
+    input: {
+        position: 'absolute',
+        width: '0px',
+        height: '0px',
+        visibility: 'hidden'
+    },
+    files: {
+        width: '340px',
+        maxWidth: '100%'
+    },
+    file: {
+        maxWidth: '174px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }
+}), { name: 'onesy-FileChoose' });
+const FileChoose = 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.onesyFileChoose) === 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 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 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 Tree = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tree) || Tree_1.default; }, [theme]);
+    const { tonal = true, color = 'default', inputRef, size = 'regular', max, allowedTypes, files, valueDefault, value: value_, multiple, accept, capture, remove = true, renderFiles, onClick, onChange: onChange_, IconStart = IconMaterialCloudUploadW100_1.default, inputProps, WrapperProps: WrapperProps_, ComponentProps: ComponentProps_, Component = Button, className, style, children = 'Choose file' } = props, other = __rest(props, ["tonal", "color", "inputRef", "size", "max", "allowedTypes", "files", "valueDefault", "value", "multiple", "accept", "capture", "remove", "renderFiles", "onClick", "onChange", "IconStart", "inputProps", "WrapperProps", "ComponentProps", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [init, setInit] = react_1.default.useState(false);
+    const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
+    const refs = {
+        value: react_1.default.useRef(undefined),
+        input: react_1.default.useRef(undefined),
+        allowedTypes: react_1.default.useRef(undefined),
+        max: react_1.default.useRef(undefined)
+    };
+    refs.value.current = value;
+    refs.max.current = max;
+    refs.allowedTypes.current = allowedTypes;
+    react_1.default.useEffect(() => {
+        setInit(true);
+    }, []);
+    react_1.default.useEffect(() => {
+        if (init) {
+            if (value_ !== refs.value.current)
+                setValue(value_);
+        }
+    }, [value_]);
+    const onChange = react_1.default.useCallback((valueNew_) => {
+        let valueNew = valueNew_;
+        // Allowed types
+        if ((0, utils_1.is)('array', refs.allowedTypes.current))
+            valueNew = valueNew.map((item) => refs.allowedTypes.current.includes(item.name));
+        // Max
+        if (refs.max.current)
+            valueNew = valueNew.slice(0, refs.max.current);
+        if (!props.hasOwnProperty('value'))
+            setValue(valueNew);
+        if ((0, utils_1.is)('function', onChange_))
+            onChange_(valueNew);
+    }, []);
+    const onChangeMethod = react_1.default.useCallback((event) => {
+        const valueNew = Array.from(refs.input.current.files);
+        onChange(valueNew);
+    }, []);
+    const onRemove = (index) => {
+        const valueNew = [...value];
+        valueNew.splice(index, 1);
+        onChange(valueNew);
+    };
+    const onReset = (event) => {
+        if (refs.input.current)
+            refs.input.current.value = '';
+        if ((0, utils_1.is)('function', onClick))
+            onClick(event);
+    };
+    const Wrapper = files ? Line : react_1.default.Fragment;
+    const WrapperProps = files ? Object.assign(Object.assign(Object.assign({ ref, direction: 'column' }, WrapperProps_), { className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('FileChoose', theme) && [
+                'onesy-FileChoose-root'
+            ],
+            WrapperProps_ === null || WrapperProps_ === void 0 ? void 0 : WrapperProps_.className,
+            className,
+            classes.root
+        ]) }), other) : undefined;
+    let ComponentProps = Object.assign({}, ComponentProps_);
+    if (!files) {
+        ComponentProps = Object.assign(Object.assign(Object.assign({}, ComponentProps), { ref, className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('FileChoose', theme) && [
+                    'onesy-FileChoose-root'
+                ],
+                ComponentProps_ === null || ComponentProps_ === void 0 ? void 0 : ComponentProps_.className,
+                className,
+                classes.root
+            ]) }), other);
+    }
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ Component: 'label', tonal: tonal, color: color, version: 'outlined', start: ((0, jsx_runtime_1.jsx)(IconStart, {})), onClick: onReset, size: size }, ComponentProps, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: item => {
+                            if (inputRef)
+                                inputRef.current = item;
+                            refs.input.current = item;
+                        }, type: 'file', accept: accept, multiple: multiple, capture: capture, onChange: onChangeMethod }, inputProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('FileChoose', theme) && [
+                                'onesy-FileChoose-input'
+                            ],
+                            inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
+                            classes.input
+                        ]) })), children] })), files && !!(value === null || value === void 0 ? void 0 : value.length) && ((0, utils_1.is)('function', renderFiles) ? renderFiles(value, onRemove) : ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ openDefault: true, icon: (0, jsx_runtime_1.jsx)(IconMaterialFolderW100_1.default, { size: 'small' }), iconOpen: (0, jsx_runtime_1.jsx)(IconMaterialFolderOpenW100_1.default, { size: 'small' }), middle: 'Files', indicator: true, indicatorPosition: 'end', className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('FileChoose', theme) && [
+                        'onesy-FileChoose-files'
+                    ],
+                    classes.files
+                ]) }, { children: value.map((item, index) => ((0, jsx_runtime_1.jsx)(Tree, { icon: (0, jsx_runtime_1.jsx)(IconMaterialDraftW100_1.default, { size: 'small' }), end: remove && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: true, color: 'default', size: 20, fontSize: utils_2.iconFontSize, onClick: () => onRemove(index) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialCloseW100_1.default, {}) }))), middle: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('FileChoose', theme) && [
+                                        'onesy-FileChoose-file'
+                                    ],
+                                    classes.file
+                                ]) }, { children: item.name })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: (0, utils_1.to)(item.size, 'size-format') }))] }))) }, index))) }))))] })));
+});
+FileChoose.displayName = 'onesy-FileChoose';
+exports.default = FileChoose;

package/FileChoose/index.d.ts

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

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

package/FileChoose/package.json

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

package/Focus/Focus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IBaseElement } from '../types';
+export declare const matches: (value: Element) => any;
+export declare const queryMatchFocusable = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled]), details:not([disabled]), summary:not(:disabled)";
+export interface IFocus extends IBaseElement {
+}
+declare const Focus: React.FC<IFocus>;
+export default Focus;