@zuzjs/ui 0.2.8 → 0.3.1

package/dist/index.js

@@ -6,6 +6,8 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { nanoid } from 'nanoid';
 import { ClassNames } from '@emotion/react';
+import ReactDOM from 'react-dom/client';
+export { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 const AppContext = createContext({});
@@ -59,25 +61,27 @@ class AppTheme {
         _AppTheme_darkTheme.set(this, void 0);
         this.get = () => {
             let self = this;
-            // if(self.#mode === "auto"){
-            //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-            //         self.#mode = event.matches ? "dark" : "light";
-            //         self.#listen(self.#mode);
-            //     });
-            //     return window.matchMedia && 
-            //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-            //         self.#darkTheme : self.#lightTheme;
-            // }else 
-            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
-                return __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
+            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
+                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+                    __classPrivateFieldSet(self, _AppTheme_mode, event.matches ? "dark" : "light", "f");
+                    __classPrivateFieldGet(self, _AppTheme_listen, "f").call(self, __classPrivateFieldGet(self, _AppTheme_mode, "f"));
+                });
+                return window.matchMedia &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches ?
+                    __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
             }
-            else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "dark") {
-                return __classPrivateFieldGet(self, _AppTheme_darkTheme, "f");
+            else {
+                if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
+                    return __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
+                }
+                else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "dark") {
+                    return __classPrivateFieldGet(self, _AppTheme_darkTheme, "f");
+                }
             }
         };
         const conf = _conf || {};
         __classPrivateFieldSet(this, _AppTheme_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Theme switched to ${mod}`); }, "f");
-        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || "auto", "f");
+        __classPrivateFieldSet(this, _AppTheme_mode, conf.mode || conf.theme.mode || "auto", "f");
         __classPrivateFieldSet(this, _AppTheme_lightTheme, Object.assign({ 
             //CORE
             tag: "light", dark: false, primary: '#edeef5', secondary: '#f9f9f9', textColor: '#111111' }, ("theme" in conf && "light" in conf.theme ? Object.assign({}, conf.theme.light) : {})), "f");
@@ -88,6 +92,26 @@ class AppTheme {
 }
 _AppTheme_mode = new WeakMap(), _AppTheme_listen = new WeakMap(), _AppTheme_lightTheme = new WeakMap(), _AppTheme_darkTheme = new WeakMap();
 
+var _AppLang_mode, _AppLang_listen, _AppLang_lang;
+class AppLang {
+    constructor(_conf) {
+        _AppLang_mode.set(this, void 0);
+        _AppLang_listen.set(this, void 0);
+        _AppLang_lang.set(this, void 0);
+        this.get = () => {
+            let self = this;
+            return __classPrivateFieldGet(self, _AppLang_lang, "f");
+        };
+        const conf = _conf || {};
+        __classPrivateFieldSet(this, _AppLang_listen, "listen" in conf ? conf.listen : (mod) => { console.log(`Lang switched to ${mod}`); }, "f");
+        __classPrivateFieldSet(this, _AppLang_mode, conf.mode || "en", "f");
+        __classPrivateFieldSet(this, _AppLang_lang, Object.assign({ 
+            //CORE
+            tag: "en" }, ("lang" in conf ? Object.assign({}, conf.lang) : {})), "f");
+    }
+}
+_AppLang_mode = new WeakMap(), _AppLang_listen = new WeakMap(), _AppLang_lang = new WeakMap();
+
 let isMounted = true;
 const STORE_KEY = `__zuzjs`;
 const STORE_FORM_KEY = `${STORE_KEY}forms`;
@@ -102,14 +126,14 @@ const defaultState = {
     }
 };
 const rootReducer = (state, action) => (Object.assign(Object.assign({}, state), action.payload));
-const AppProvider = ({ children, initialState = {}, theme = {} }) => {
+const AppProvider = ({ children, initialState = {}, theme = {}, lang = {} }) => {
     useEffect(() => {
         isMounted = true;
         return () => {
             isMounted = false;
         };
     }, []);
-    const rootState = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultState), initialState), { theme: new AppTheme({ theme }).get() })), [initialState]);
+    const rootState = useMemo(() => (Object.assign(Object.assign(Object.assign({}, defaultState), initialState), { theme: new AppTheme({ theme }).get(), lang: new AppLang({ lang }).get() })), [initialState]);
     const [state, _dispatch] = useReducer(rootReducer, rootState);
     const dispatch = useCallback((args) => {
         if (isMounted) {
@@ -135,12 +159,14 @@ const AppProvider = ({ children, initialState = {}, theme = {} }) => {
 };
 AppProvider.defaultProps = {
     theme: {},
+    lang: {},
     initialState: {},
 };
 AppProvider.propTypes = {
     children: PropTypes.node.isRequired,
     initialState: PropTypes.instanceOf(Object),
-    theme: PropTypes.instanceOf(Object)
+    theme: PropTypes.instanceOf(Object),
+    lang: PropTypes.instanceOf(Object)
 };
 
 const createSlice = ({ name, initialState, reducers }) => {
@@ -556,14 +582,14 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
 };
 
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, onKeyUp, onClick, readOnly, type, tag, placeholder, name, form, touched, onSubmit, defaultValue, fref } = props;
+    const { as, accept, multiple, onChange, onKeyUp, onClick, readOnly, type, tag, placeholder, name, form, touched, onSubmit, value, defaultValue, fref, autoComplete } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     let Tag = tag || 'input';
     const El = Tag;
     const _ref = fref || useRef();
     const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, defaultValue: defaultValue || ``, onKeyUp: (e) => {
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, Object.assign({}, cleanProps(props), { type: type || `text`, placeholder: placeholder || undefined, autoComplete: autoComplete || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
                 let k = e['keyCode'] || ['which'];
                 if (El != 'textarea' && k == 13 && form && onSubmit) {
                     onSubmit(forms[form]);
@@ -575,7 +601,7 @@ const Input = forwardRef((props, ref) => {
                 dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
                 onChange && onChange(val == "" ? null : val);
             }, onClick: onClick ? onClick : () => { }, readOnly: readOnly || false, onBlur: e => {
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
+            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) })) }));
 });
 
 const Select = forwardRef((props, ref) => {
@@ -601,45 +627,70 @@ const useTheme = (mod = 'auto') => {
     return state['theme'] || {};
 };
 
-const useImage = (url, crossOrigin, referrerpolicy) => {
-    const statusRef = useRef('loading');
-    const imageRef = useRef();
-    const [_, setStateToken] = useState(0);
-    const oldUrl = useRef();
-    const oldCrossOrigin = useRef();
-    const oldReferrerPolicy = useRef();
-    if (oldUrl.current !== url || oldCrossOrigin.current !== crossOrigin || oldReferrerPolicy.current !== referrerpolicy) {
-        statusRef.current = 'loading';
-        imageRef.current = undefined;
-        oldUrl.current = url;
-        oldCrossOrigin.current = crossOrigin;
-        oldReferrerPolicy.current = referrerpolicy;
-    }
-    useLayoutEffect(function () {
-        if (!url)
-            return;
-        var img = document.createElement('img');
-        function onload() {
-            statusRef.current = 'loaded';
-            imageRef.current = img;
-            setStateToken(Math.random());
-        }
-        function onerror() {
-            statusRef.current = 'failed';
-            imageRef.current = undefined;
-            setStateToken(Math.random());
-        }
-        img.addEventListener('load', onload);
-        img.addEventListener('error', onerror);
-        crossOrigin && (img.crossOrigin = crossOrigin);
-        referrerpolicy && (img.referrerPolicy = referrerpolicy);
-        img.src = url;
-        return function cleanup() {
-            img.removeEventListener('load', onload);
-            img.removeEventListener('error', onerror);
+const removeBlankArrayElements = (a) => a.filter((x) => x);
+const stringToArray = (x) => (Array.isArray(x) ? x : [x]);
+const cache = {};
+// sequential map.find for promises
+const promiseFind = (arr, promiseFactory) => {
+    let done = false;
+    return new Promise((resolve, reject) => {
+        const queueNext = (src) => {
+            return promiseFactory(src).then(() => {
+                done = true;
+                resolve(src);
+            });
         };
-    }, [url, crossOrigin, referrerpolicy]);
-    return [imageRef.current, statusRef.current];
+        arr
+            .reduce((p, src) => {
+            // ensure we aren't done before enqueuing the next source
+            return p.catch(() => {
+                if (!done)
+                    return queueNext(src);
+            });
+        }, queueNext(arr.shift()))
+            .catch(reject);
+    });
+};
+const useImage = ({ srcList, imgPromise = imgPromiseFactory({ decode: true }), useSuspense = true, }) => {
+    const [, setIsSettled] = useState(false);
+    const sourceList = removeBlankArrayElements(stringToArray(srcList));
+    const sourceKey = sourceList.join('');
+    if (!cache[sourceKey]) {
+        // create promise to loop through sources and try to load one
+        cache[sourceKey] = {
+            promise: promiseFind(sourceList, imgPromise),
+            cache: 'pending',
+            error: null,
+        };
+    }
+    // when promise resolves/reject, update cache & state
+    if (cache[sourceKey].cache === 'resolved') {
+        return { src: cache[sourceKey].src, isLoading: false, error: null };
+    }
+    if (cache[sourceKey].cache === 'rejected') {
+        if (useSuspense)
+            throw cache[sourceKey].error;
+        return { isLoading: false, error: cache[sourceKey].error, src: undefined };
+    }
+    cache[sourceKey].promise
+        // if a source was found, update cache
+        // when not using suspense, update state to force a rerender
+        .then((src) => {
+        cache[sourceKey] = Object.assign(Object.assign({}, cache[sourceKey]), { cache: 'resolved', src });
+        if (!useSuspense)
+            setIsSettled(sourceKey);
+    })
+        // if no source was found, or if another error occurred, update cache
+        // when not using suspense, update state to force a rerender
+        .catch((error) => {
+        cache[sourceKey] = Object.assign(Object.assign({}, cache[sourceKey]), { cache: 'rejected', error });
+        if (!useSuspense)
+            setIsSettled(sourceKey);
+    });
+    // cache[sourceKey].cache === 'pending')
+    if (useSuspense)
+        throw cache[sourceKey].promise;
+    return { isLoading: true, src: undefined, error: null };
 };
 
 /** External Dependencies */
@@ -799,13 +850,14 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
     return currentBreakpoint;
 };
 
-var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft;
+var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft, _Toaster_root;
 class Toaster {
     constructor(config) {
         _Toaster_container.set(this, void 0);
         _Toaster_startTop.set(this, void 0);
         _Toaster_tout.set(this, void 0);
         _Toaster_defaultTimeLeft.set(this, void 0);
+        _Toaster_root.set(this, void 0);
         this.show = (message, duration) => {
             let self = this;
             self.toast({
@@ -816,12 +868,13 @@ class Toaster {
         __classPrivateFieldSet(this, _Toaster_startTop, 20, "f");
         __classPrivateFieldSet(this, _Toaster_defaultTimeLeft, 4, "f");
         const rootID = (config === null || config === void 0 ? void 0 : config.root) || `toast-container`;
-        if (document.querySelector(`#${rootID}`))
+        __classPrivateFieldSet(this, _Toaster_root, rootID, "f");
+        if (window.document.querySelector(`#${rootID}`))
             return;
-        var root = document.createElement('div');
+        var root = window.document.createElement('div');
         root.id = rootID;
-        document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, document.querySelector(`#${rootID}`), "f");
+        window.document.body.appendChild(root);
+        __classPrivateFieldSet(this, _Toaster_container, window.document.querySelector(`#${rootID}`), "f");
     }
     dismiss(ID) {
         let self = this;
@@ -841,7 +894,7 @@ class Toaster {
     }
     toast(config) {
         var self = this;
-        var ID = 'toast-' + nanoid(), toast = document.createElement('div'); document.createElement('div');
+        var ID = 'toast-' + nanoid(), toast = window.document.createElement('div'); window.document.createElement('div');
         toast.id = ID;
         toast.style.backgroundColor = `#111`;
         toast.style.color = `#fff`;
@@ -856,7 +909,7 @@ class Toaster {
         toast.classList.add('fixed');
         toast.classList.add('f');
         toast.innerHTML = config.message || `You haven't passed "message" in this toast`;
-        __classPrivateFieldGet(self, _Toaster_container, "f").appendChild(toast);
+        (__classPrivateFieldGet(self, _Toaster_container, "f") || window.document.querySelector(`#${__classPrivateFieldGet(self, _Toaster_root, "f")}`)).appendChild(toast);
         self.arrangeToasts()
             .then(() => {
             setTimeout(() => {
@@ -883,20 +936,93 @@ class Toaster {
         });
     }
 }
-_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap();
+_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap(), _Toaster_root = new WeakMap();
 
 const useToast = () => {
     const toaster = useMemo(() => new Toaster(), []);
     return toaster;
 };
 
+const useLang = (mod = 'en') => {
+    const state = useContext(AppContext);
+    return state['lang'] || {};
+};
+
+const Box = forwardRef((props, ref) => {
+    const _noClick = () => { };
+    // console.log(props)
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({}, cleanProps(props), { title: props.title || undefined, id: props.id || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
+});
+
+const useContextMenu = (contextID) => {
+    const ID = `context-${contextID}`;
+    useState(false);
+    const [root, setRoot] = useState(null);
+    const nodeRef = useRef(null);
+    const el = (e) => window.document.createElement(e);
+    function checkBoundaries(x, y) {
+        if (nodeRef.current) {
+            const { innerWidth, innerHeight } = window;
+            const { offsetWidth, offsetHeight } = nodeRef.current;
+            if (x + offsetWidth > innerWidth)
+                x -= x + offsetWidth - innerWidth;
+            if (y + offsetHeight > innerHeight)
+                y -= y + offsetHeight - innerHeight;
+        }
+        return { x, y };
+    }
+    const hide = () => {
+        try {
+            root === null || root === void 0 ? void 0 : root.unmount();
+            setRoot(null);
+        }
+        catch (e) { }
+    };
+    const Menu = (e, items) => {
+        const p = getMousePosition(e);
+        const { x, y } = checkBoundaries(p.x, p.y);
+        return (jsx(Box, Object.assign({ bref: nodeRef, flex: true, dir: `cols`, fixed: true, top: y, left: x, as: `zuz-contextmenu ${ID}` }, { children: items && items.map((m, i) => m.id == `line` ? jsx(Box, { as: `line` }, `line-${i}-${m.id}`) : jsx("button", Object.assign({ onClick: ev => {
+                    if (m.onClick) {
+                        m.onClick(ev, m);
+                    }
+                    else {
+                        console.log(`No onClick eventFound`);
+                    }
+                    hide();
+                } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+    };
+    const show = (e, items) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!window.document.querySelector(`#context-${contextID}`)) {
+            let div = el(`div`);
+            div.id = ID;
+            window.document.body.appendChild(div);
+        }
+        root.render(Menu(e, items));
+    };
+    useEffect(() => {
+        if (!window.document.querySelector(`#context-${contextID}`)) {
+            let div = el(`div`);
+            div.id = ID;
+            window.document.body.appendChild(div);
+        }
+        if (!root)
+            setRoot(ReactDOM.createRoot(document.getElementById(ID)));
+    }, [root]);
+    return {
+        show,
+        hide
+    };
+};
+
 const Button = forwardRef((props, ref) => {
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     if (props.html) {
         ({ __html: props.html });
     }
     return (jsx(ClassNames, { children: ({ css, cx }) => {
-            return (jsx("button", Object.assign({ title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
+            return (jsx("button", Object.assign({}, cleanProps(props), { title: "title" in props ? props.title : undefined, type: props.type, className: `button${props.as ? ` ${props.as}` : ``} ${cx(css `
                 padding: 5px 10px;
                 border-radius: 2px;
                 ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onClick: e => {
@@ -1001,6 +1127,17 @@ const makeCSSValue = (k, v, o) => {
     }
     return `${k}:${v}${unit};`;
 };
+const cleanProps = (props) => {
+    let _props = Object.assign({}, props);
+    Object.keys(_props).map(k => {
+        if (k in cssProps) {
+            delete _props[k];
+        }
+    });
+    let _extras = [`as`, `hover`, `bref`];
+    _extras.map(x => x in _props && delete _props[x]);
+    return _props;
+};
 const buildCSS = (props) => {
     let css = ``;
     Object.keys(props).map(k => {
@@ -1037,7 +1174,7 @@ const randstr = function (len) {
     }
     return text;
 };
-const setCookie = (key, value, expiry) => Cookies.set(key, value, { expires: expiry || 7 });
+const setCookie = (key, value, expiry, host) => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host });
 const getCookie = (key) => Cookies.get(key) || null;
 const removeCookie = (key) => Cookies.remove(key);
 const buildFormData = (data) => {
@@ -1190,6 +1327,53 @@ const getUriParams = () => {
     return xny;
 };
 const rgb2hex = rgb => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;
+const getHostname = url => {
+    if (window.URL) {
+        let u = new window.URL(url);
+        return u.hostname;
+    }
+    else {
+        var a = document.createElement(`a`);
+        a.href = url;
+        return a.hostname.replace("www.", "");
+    }
+};
+const imgPromiseFactory = ({ decode = true, crossOrigin = '' }) => (src) => {
+    return new Promise((resolve, reject) => {
+        const i = new Image();
+        if (crossOrigin)
+            i.crossOrigin = crossOrigin;
+        i.onload = () => {
+            decode && i.decode ? i.decode().then(resolve).catch(reject) : resolve();
+        };
+        i.onerror = reject;
+        i.src = src;
+    });
+};
+const parseFilename = nm => {
+    var re = /(?:\.([^.]+))?$/;
+    return {
+        name: nm.split('.').slice(0, -1).join('.'),
+        ext: re.exec(nm)[1]
+    };
+};
+const camelCase = str => str.replace(":", "-").replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+const getMousePosition = e => {
+    const pos = {
+        x: e.clientX,
+        y: e.clientY,
+    };
+    const touch = e.changedTouches;
+    if (touch) {
+        pos.x = touch[0].clientX;
+        pos.y = touch[0].clientY;
+    }
+    if (!pos.x || pos.x < 0)
+        pos.x = 0;
+    if (!pos.y || pos.y < 0)
+        pos.y = 0;
+    return pos;
+};
 
 const AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1202,11 +1386,6 @@ const App = forwardRef((props, ref) => {
     return (jsx(AppProvider, { children: jsx(AppMain, {}) }));
 });
 
-const Box = forwardRef((props, ref) => {
-    const _noClick = () => { };
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("div", Object.assign({ id: props.id || undefined, onClick: props.onClick || _noClick, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: props.bref || ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })) }));
-});
-
 // const CoreBlock = styled.section`display: block;`
 // const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
 const Component = forwardRef((props, ref) => {
@@ -1338,9 +1517,18 @@ const Icon = forwardRef((props, ref) => {
     return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, bref: ref, as: `icon-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: path && Array(path).fill(undefined).map((p, i) => jsx("span", { className: `path${i + 1}` }, `ico-${as}-${i}`)) })));
 });
 
-const Image = forwardRef((props, ref) => {
-    const [photo, status] = useImage(props.src, 'anonymous', 'origin');
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsxs("picture", Object.assign({ className: cx(css `${buildCSS({ flex: true })}`) }, { children: [status == 'loading' && jsx(Box, { className: `${props.as ? `${props.as} ` : ``}${cx(css `background: #eee;${buildCSS(props)}`)}` }), status == 'loaded' && jsx("img", { src: props.src, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref })] })) }));
+const Image$1 = forwardRef((props, ref) => {
+    const { src, isLoading, error } = useImage({ srcList: props.src, useSuspense: false });
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsxs(Fragment, { children: [isLoading && jsx(Box, { className: `${props.as ? `${props.as} ` : ``}${cx(css `background: #eee;${buildCSS(props)}`)}` }), !isLoading && jsx("img", { src: src, className: `${props.as ? `${props.as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref })] }) })
+    // <ClassNames>
+    //     {({ css, cx }) => <picture className={cx(css`${buildCSS({ flex: true })}`)}>
+    //         {status == 'loading' && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
+    //         {status == 'loaded' && <img src={props.src}
+    //         className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+    //         ref={ref} />}
+    //     </picture>}
+    // </ClassNames>
+    );
 });
 
 const DEFAULT_COLUMNS = 2;
@@ -1528,7 +1716,7 @@ const Tweet = (props) => {
 
 const ContextMenu = forwardRef((props, ref) => {
     const { as, size, color, hover, pos, items } = props;
-    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, ai: `c`, jc: `c`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
+    return (jsx(Box, Object.assign({ hover: hover || {}, flex: true, dir: `cols`, fixed: true, top: (pos === null || pos === void 0 ? void 0 : pos.y) || 0, left: (pos === null || pos === void 0 ? void 0 : pos.x) || 0, bref: ref, as: `contextmenu-${as}`, size: size || 24, color: color || `#111111` }, { children: items && items.map((m, i) => jsx(Button, Object.assign({ onClick: m.on ? m.on : () => { } }, { children: m.label }), `cm-${i}-${m.id}`)) })));
 });
 
 const buildElement = (el) => {
@@ -1548,4 +1736,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };
+export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image$1 as Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, camelCase, cleanProps, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getMousePosition, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, parseFilename, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useContextMenu, useDevice, useDispatch, useImage, useLang, useResizeObserver, useStore, useTheme, useToast, uuid };

package/dist/styles.css

@@ -312,6 +312,50 @@ button {
   font-size: 72px;
 }
 
+/*
+    BoldSize
+    It will generate .b400 { font-weight: 400; } from '400'
+*/
+.bold {
+  font-weight: bold;
+}
+
+.b100 {
+  font-weight: 100;
+}
+
+.b200 {
+  font-weight: 200;
+}
+
+.b300 {
+  font-weight: 300;
+}
+
+.b400 {
+  font-weight: 400;
+}
+
+.b500 {
+  font-weight: 500;
+}
+
+.b600 {
+  font-weight: 600;
+}
+
+.b700 {
+  font-weight: 700;
+}
+
+.b800 {
+  font-weight: 800;
+}
+
+.b900 {
+  font-weight: 900;
+}
+
 @-webkit-keyframes rotating /* Safari and Chrome */ {
   from {
     -webkit-transform: rotate(0deg);
@@ -411,4 +455,31 @@ button {
 }
 .zuz-checkbox:checked + label:after {
   left: 20px;
+}
+
+.zuz-contextmenu {
+  min-width: 220px;
+  border-radius: 5px;
+  padding: 4px;
+  background: rgba(34, 34, 34, 0.5);
+  border: 1px rgba(255, 255, 255, 0.25) solid;
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(20px);
+}
+.zuz-contextmenu button {
+  border: 0px;
+  text-align: left;
+  padding: 4px 6px;
+  background: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  color: #fff;
+  border-radius: 4px;
+}
+.zuz-contextmenu button:hover {
+  background: #385fd2;
+}
+.zuz-contextmenu .line {
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  margin: 4px 6px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "exports": {

package/src/comps/box.tsx

@@ -3,15 +3,19 @@ import {
     useEffect
 } from 'react';
 import { ClassNames } from '@emotion/react'
-import { buildCSS } from '../core'
+import { cleanProps, buildCSS } from '../core'
 
 const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
 
     const _noClick = () => {}
 
+    // console.log(props)
+
     return (
         <ClassNames>
             {({ css, cx }) => <div 
+                {...cleanProps(props)}
+                title={props.title || undefined}
                 id={props.id || undefined}
                 onClick={props.onClick || _noClick}
                 className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`} 

package/src/comps/button.tsx

@@ -5,7 +5,7 @@ import React, {
 import { ClassNames } from '@emotion/react'
 import { 
   buildCSS,
-  filterStyleProps
+  cleanProps
 } from '../core'
 import { useStore } from '../hooks'
 import { STORE_FORM_KEY } from '../context/AppProvider'
@@ -22,6 +22,7 @@ const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTM
         {({ css, cx }) => {
           return (
             <button
+              {...cleanProps(props)}
               title={"title" in props ? props.title : undefined}
               type={props.type}
               className={`button${props.as ? ` ${props.as}` : ``} ${cx(css`

package/src/comps/contextmenu.tsx

@@ -22,14 +22,12 @@ const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyR
     return (
         <Box 
             hover={hover || {}}
-            flex
+            flex dir={`cols`}
             fixed
             top={pos?.y || 0}
             left={pos?.x || 0}
             bref={ref}
             as={`contextmenu-${as}`}
-            ai={`c`}
-            jc={`c`}
             size={size || 24}
             color={color || `#111111`}
         >