@zuzjs/ui 0.2.7 → 0.3.0

package/dist/index.js

@@ -6,6 +6,7 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { nanoid } from 'nanoid';
 import { ClassNames } from '@emotion/react';
+export { Link } from 'react-router-dom';
 import styled from '@emotion/styled';
 
 const AppContext = createContext({});
@@ -59,20 +60,22 @@ 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 || {};
@@ -88,6 +91,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 +125,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 +158,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 +581,14 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
 };
 
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, onKeyUp, 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 } = 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, { 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, value: value || undefined, defaultValue: defaultValue || ``, onKeyUp: (e) => {
                 let k = e['keyCode'] || ['which'];
                 if (El != 'textarea' && k == 13 && form && onSubmit) {
                     onSubmit(forms[form]);
@@ -574,7 +599,7 @@ const Input = forwardRef((props, ref) => {
                     : e.currentTarget.value;
                 dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
                 onChange && onChange(val == "" ? null : val);
-            }, readOnly: readOnly || false, onBlur: e => {
+            }, onClick: onClick ? onClick : () => { }, readOnly: readOnly || false, onBlur: e => {
             }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
 });
 
@@ -601,45 +626,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 +849,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 +867,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 +893,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 +908,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,13 +935,18 @@ 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 Button = forwardRef((props, ref) => {
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     if (props.html) {
@@ -1037,7 +1094,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 +1247,29 @@ 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 AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1338,9 +1418,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;
@@ -1548,4 +1637,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, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getHostname, getUriParams, grab, imgPromiseFactory, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, 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);

package/package.json

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

package/src/comps/image.tsx

@@ -9,17 +9,25 @@ import Box from './box'
 
 const Image = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
 
-    const [photo, status] = useImage(props.src, 'anonymous', 'origin');
+    const { src, isLoading, error } = useImage({ srcList: props.src, useSuspense: false });
     
     return (
         <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>}
+            {({ css, cx }) => <>
+                {isLoading && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
+                {!isLoading && <img src={src}
+                    className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+                    ref={ref} />}
+            </>}
         </ClassNames>
+        // <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>
     )
 })
 

package/src/comps/input.tsx

@@ -23,6 +23,7 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         multiple,
         onChange,
         onKeyUp,
+        onClick,
         readOnly,
         type,
         tag,
@@ -31,6 +32,7 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
         form,
         touched,
         onSubmit,
+        value,
         defaultValue,
         fref
     } = props;
@@ -54,6 +56,7 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
                 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 : SyntheticEvent) => {
                     let k = e['keyCode'] || ['which'];
@@ -68,6 +71,7 @@ const Input = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTM
                     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 => {
                     if(touched){}

package/src/comps/toaster.tsx

@@ -6,6 +6,7 @@ class Toaster {
     #startTop : number
     #tout : null
     #defaultTimeLeft : number
+    #root : string
 
     constructor(config?: { 
         root : string,
@@ -14,12 +15,13 @@ class Toaster {
         this.#startTop = 20
         this.#defaultTimeLeft = 4
         const rootID = config?.root || `toast-container`;
-        if(document.querySelector(`#${rootID}`)) return;
+        this.#root = rootID;
+        if(window.document.querySelector(`#${rootID}`)) return;
         var self = this;
-        var root = document.createElement('div');
+        var root = window.document.createElement('div');
 		root.id = rootID;
-		document.body.appendChild(root);
-        this.#container = document.querySelector(`#${rootID}`)       
+		window.document.body.appendChild(root);
+        this.#container = window.document.querySelector(`#${rootID}`)       
     }
 
     show = (
@@ -57,8 +59,8 @@ class Toaster {
         var self = this;
         var tout = null,
         ID = 'toast-' + nanoid(),
-        toast = document.createElement('div'),
-        toastBG = document.createElement('div');
+        toast = window.document.createElement('div'),
+        toastBG = window.document.createElement('div');
         
         toast.id = ID;
         toast.style.backgroundColor = `#111`
@@ -76,7 +78,7 @@ class Toaster {
 
         toast.innerHTML = config.message || `You haven't passed "message" in this toast`;
 
-        self.#container.appendChild(toast);
+        (self.#container || window.document.querySelector(`#${self.#root}`)).appendChild(toast);
 
         self.arrangeToasts()
         .then(() => {

package/src/context/AppProvider.tsx

@@ -7,6 +7,7 @@ import React, {
 import PropTypes from 'prop-types'
 import AppContext from './AppContext'
 import AppTheme from './store/theme'
+import AppLang from './store/lang'
 
 let isMounted = true;
 export const STORE_KEY = `__zuzjs`
@@ -32,7 +33,8 @@ const rootReducer = (state, action ) => ({
 const AppProvider = ({ 
     children, 
     initialState = {}, 
-    theme = {} 
+    theme = {},
+    lang = {}
 }) => {
 
 
@@ -46,7 +48,8 @@ const AppProvider = ({
     const rootState = useMemo(() => ({ 
         ...defaultState,
         ...initialState,
-        theme: new AppTheme({ theme }).get()
+        theme: new AppTheme({ theme }).get(),
+        lang: new AppLang({ lang }).get(),
     }), [initialState])
 
     const [state, _dispatch] = useReducer(rootReducer, rootState);
@@ -89,13 +92,15 @@ const AppProvider = ({
 
 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)
 }
 
 export default AppProvider

package/src/context/store/lang.tsx

@@ -0,0 +1,26 @@
+class AppLang {
+
+    #mode;
+    #listen;
+    #lang;
+
+    constructor(_conf){
+        const conf = _conf || {}
+        this.#listen = "listen" in conf ? conf.listen : (mod) => { console.log(`Lang switched to ${mod}`); };
+        this.#mode = conf.mode || "en";
+        this.#lang = {
+            //CORE
+            tag: "en",
+            ...( "lang" in conf ? {...conf.lang} : {})
+        };
+    }
+
+    get = () => {
+        let self = this;
+        return self.#lang
+    }
+
+
+}
+
+export default AppLang

package/src/context/store/theme.tsx

@@ -31,19 +31,20 @@ class AppTheme {
 
     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(self.#mode === "light"){
-            return self.#lightTheme;
-        }else if(self.#mode === "dark"){
-            return self.#darkTheme;
+        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(self.#mode === "light"){
+                return self.#lightTheme;
+            }else if(self.#mode === "dark"){
+                return self.#darkTheme;
+            }
         }
     }
 

package/src/core/defaultTheme.ts

@@ -67,19 +67,20 @@ class AppTheme {
 
     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(self.#mode === "light"){
-            return self.#lightTheme;
-        }else if(self.#mode === "dark"){
-            return self.#darkTheme;
+        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(self.#mode === "light"){
+                return self.#lightTheme;
+            }else if(self.#mode === "dark"){
+                return self.#darkTheme;
+            }
         }
     }
 

package/src/core/index.ts

@@ -78,7 +78,7 @@ const randstr = function(len? : number){
 	return text;    
 }
 
-const setCookie = (key : string, value : any, expiry? : number)  => Cookies.set(key, value, { expires: expiry || 7 })
+const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
 
 const getCookie = (key : string) => Cookies.get(key) || null;
 
@@ -254,6 +254,30 @@ const getUriParams = () => {
 
 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): Promise<void> => {
+  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
+  })
+}
+
 export {
     addProps,
     addScript,
@@ -266,6 +290,7 @@ export {
     isEmail,
     isIPv4,
     isUrl,
+    imgPromiseFactory,
     randstr,
     setCSSVar,
     getCookie,
@@ -280,6 +305,7 @@ export {
     rgb2hex,
     generateModalRoutes, 
     generatePreservedRoutes, 
-    generateRegularRoutes
+    generateRegularRoutes,
+    getHostname
 }
 

package/src/hooks/index.tsx

@@ -5,4 +5,4 @@ export { default as useDispatch } from './useDispatch'
 export { default as useResizeObserver } from './useResizeObserver'
 export { default as useDevice } from './useDevice'
 export { default as useToast } from './useToast'
-// export { default as useRouter } from './useRouter'
+export { default as useLang } from './useLang'

package/src/hooks/useImage.tsx

@@ -1,58 +1,84 @@
-import React, { useRef, useLayoutEffect, useState } from 'react'
+import React, {useState} from 'react'
+import { imgPromiseFactory } from '../core'
 
-const useImage = (url, crossOrigin, referrerpolicy) => {
-    
-    const statusRef = useRef('loading')
-    const imageRef = useRef<HTMLImageElement>();
+export type useImageProps = {
+    srcList: string | string[]
+    imgPromise?: (...args: any[]) => Promise<void>
+    useSuspense?: boolean
+}
+
+const removeBlankArrayElements = (a) => a.filter((x) => x)
+const stringToArray = (x) => (Array.isArray(x) ? x : [x])
+const cache = {}
 
-    const [_, setStateToken] = useState(0);
+// 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)
+        })
+      }
+  
+      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 oldUrl = useRef();
-    const oldCrossOrigin = useRef();
-    const oldReferrerPolicy = useRef();
+const useImage = ({
+    srcList,
+    imgPromise = imgPromiseFactory({decode: true}),
+    useSuspense = true,
+} : useImageProps) : {src: string | undefined; isLoading: boolean; error: any} => {
 
-    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;
+    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,
+        }
     }
 
-    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);
-            };
-
-        },
-        [url, crossOrigin, referrerpolicy]
-    );
-
-    return [imageRef.current, statusRef.current];
+    // 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] = {...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] = {...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}
+
 }
 
 export default useImage;

package/src/hooks/useLang.tsx

@@ -0,0 +1,9 @@
+import { useContext, useEffect } from 'react'
+import AppContext from '../context'
+
+const useLang = (mod = 'en') => {
+    const state = useContext(AppContext)
+    return state['lang'] || {};
+}
+
+export default useLang

package/src/index.tsx

@@ -4,6 +4,8 @@ import { Provider, createSlice } from './context'
 export * from './core/index';
 export * from './hooks/index';
 
+export { Link } from "react-router-dom"
+
 export { default as App } from './comps/app'
 export { default as Box } from './comps/box'
 export { default as Button } from './comps/button'

package/src/scss/props.scss

@@ -57,4 +57,14 @@ $colors: 'fff','111','222','333','444','555','666','777','888','999';
     @if $i % 2 == 0 {
         .s#{$i} { font-size: #{$i}px; }
     }
+}
+
+/*
+    BoldSize
+    It will generate .b400 { font-weight: 400; } from '400'
+*/
+$bsizes: 100,200,300,400,500,600,700,800,900;
+.bold{ font-weight: bold; }
+@each $n in $bsizes{
+    .b#{$n} { font-weight: #{$n}; }
 }