@zuzjs/ui 0.2.0 → 0.2.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, cloneElement, useContext, useRef, useState, useLayoutEffect, useDebugValue, forwardRef, useImperativeHandle, createElement } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import Children from 'react-children-utilities';
 import Cookies from 'js-cookie';
@@ -448,7 +448,9 @@ const cssPropsVals = {
     "c": "center",
     //Flex Directions
     "cols": "column",
+    "colsr": "column-reverse",
     "rows": "row",
+    "rowsr": "row-reverse",
     //Positions
     "rel": "relative",
     "abs": "absolute",
@@ -459,6 +461,7 @@ const cssPropsDirect = {
     'abs': 'position: absolute;',
     'sticky': 'position: sticky;',
     'flex': 'display: flex;',
+    'fwrap': 'flex-wrap: wrap;',
     'aic': 'align-items: center;',
     'ass': 'align-self: flex-start;',
     'asc': 'align-self: center;',
@@ -492,176 +495,105 @@ if (cssColors.length == 0) {
     });
 }
 
-const makeCSSValue = (k, v, o) => {
-    let ignore = cssPropsIgnore.indexOf(o) == -1;
-    if (k in cssPropsDirect && ignore == true) {
-        // return cssPropsDirect[k];
-        return cssPropsDirect[k].indexOf(`__VALUE__`) > -1 ?
-            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`)
-            : cssPropsDirect[k];
-    }
-    let unit = "number" == typeof v && ignore ? `px` : ``;
-    if (cssColors.indexOf(v) > -1) {
-        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
-        unit = ``;
-    }
-    else if (v in cssPropsVals) {
-        v = cssPropsVals[v];
+const useDispatch = (key) => {
+    const state = useContext(AppContext);
+    const dispatch = state['dispatch'];
+    const prepareState = (prevState, nextState) => {
+        const nextKeys = Object.keys(nextState);
+        nextKeys.map(k => {
+            if (prevState[k] !== nextState[k]) {
+                prevState[k] = nextState[k];
+            }
+        });
+        return Object.assign(Object.assign({}, prevState), nextState);
+    };
+    if (key) {
+        return (payload = {}) => {
+            dispatch({
+                action: key,
+                payload: {
+                    [key]: prepareState(state[key], payload)
+                }
+            });
+        };
     }
-    return `${k}:${v}${unit};`;
-};
-const buildCSS = (props) => {
-    let css = ``;
-    Object.keys(props).map(k => {
-        css += k in cssProps ? makeCSSValue(cssProps[k], props[k], k) : '';
-    });
-    return css;
-};
-const setCSSVar = (key, val) => {
-    document.documentElement.style.setProperty(`--${key}`, val);
+    return dispatch;
 };
-const isUrl = (u) => {
-    let url;
-    try {
-        url = new URL(u);
+
+const useStore = (callback, withFilter = true) => {
+    // if(withInititalState){
+    //     return useContext(AppContext)    
+    // }
+    let _state = useContext(AppContext);
+    let state = withFilter ? {} : _state;
+    if (withFilter) {
+        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`, `${STORE_KEY}forms`];
+        Object.keys(_state).map(k => {
+            if (filters.indexOf(k) == -1) {
+                state[k] = _state[k];
+            }
+        });
     }
-    catch (_) {
-        return false;
+    if ("function" == typeof callback) {
+        return callback(state);
     }
-    return url.protocol === 'http:' || url.protocol === 'https:';
-};
-const isEmail = (e) => {
-    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
-    return reg.test(e);
-};
-const isIPv4 = (ipaddress) => {
-    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
+    return state;
 };
-const randstr = function (len) {
-    var text = "";
-    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    len = len || 10;
-    for (var i = 0; i < len; i++) {
-        text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+const ADD_FORM = (name, fields, forms) => ({
+    forms: Object.assign(Object.assign({}, forms), { [name]: Object.assign({ touched: false, loading: false }, fields) })
+});
+const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
+    if (forms[formName]) {
+        let _forms = Object.assign({}, forms);
+        _forms[formName][field] = value;
+        return {
+            forms: _forms
+        };
     }
-    return text;
-};
-const setCookie = (key, value, expiry) => Cookies.set(key, value, { expires: expiry || 7 });
-const getCookie = (key) => Cookies.get(key) || null;
-const removeCookie = (key) => Cookies.remove(key);
-const buildFormData = (data) => {
-    var formData = new FormData();
-    var _data = Cookies.get();
-    Object.keys(_data).map(k => formData.append(k, _data[k]));
-    Object.keys(data).filter(x => x != 'files').map(k => formData.append(k, data[k]));
-    if ('files' in data)
-        [data['files']].map((f) => formData.append('files[]', f));
-    return formData;
+    return {};
 };
-const grab = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
-    window['__grabToken'] = axios.CancelToken.source();
-    if (fd) {
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: window['__grabToken'].token,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress
-                    // if(progress) progress(ev.)
-                }
-            })
-                .then(resp => {
-                if (resp.data && "kind" in resp.data) {
-                    resolve(resp.data);
-                }
-                else {
-                    reject(resp.data);
+
+const Input = forwardRef((props, ref) => {
+    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue } = 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 = 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) => {
+                let k = e['keyCode'] || ['which'];
+                if (El != 'textarea' && k == 13 && form && onSubmit) {
+                    onSubmit(forms[form]);
                 }
-            })
-                .catch(err => reject(err));
-        });
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(uri, Object.assign(Object.assign(Object.assign({}, Cookies.get()), data), { __ustmp: new Date().getTime() / 1000 }), {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${Bearer}`
-            },
-            cancelToken: window['__grabToken'].token
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => reject(err));
-    });
-};
-const el = (e) => document.querySelector(e);
-const byName = (e) => document.querySelector(`*[name="${e}"]`);
-const byId = (e) => document.getElementById(e);
-const addProps = (children, prop) => {
-    let form = {};
-    let child = Children.deepMap(children, c => {
-        if (c['props'] && !form[c['props'].name]) {
-            form[c['props'].name] = c['props'].value || null;
-        }
-        return cloneElement(c, prop);
-    });
-    return {
-        children: child,
-        fields: form
-    };
-};
-const ucfirst = (str) => {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-};
-const filterStyleProps = (props) => {
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {};
-    css.filter(x => pks.includes(x));
-    // .map(k => filter[k] = props[k].toString());
-    return filter;
-    // const allowed = Object.keys(props);
-    // let allowed = Object.keys(cssProps);
-    // return Object.keys(props)
-    //         .filter( k => allowed.includes(k))
-    //         .reduce( (o, k) => {
-    //             // console.log(o)
-    //             console.log(k, props[k])
-    //             // o[k] = props[k].toString();
-    //             // return o;
-    //         })
-    // return [props].filter( row => (
-    //     Object.keys(row)
-    //         .map(key => css.includes(key))
-    // ));
-};
-const filterHTMLProps = (props) => {
-    const pks = Object.keys(props);
-    const css = Object.keys(cssProps);
-    let filter = {};
-    pks.filter(x => {
-        if (x != `for` && !css.includes(x)) {
-            filter[x] = props[x];
-        }
-    });
-    return filter;
-};
-const uuid = () => nanoid();
+            }, onChange: e => {
+                let val = type == 'file' ?
+                    e.currentTarget.files
+                    : e.currentTarget.value;
+                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
+                onChange && onChange(e.target.value == "" ? null : e.target.value);
+            }, onBlur: e => {
+            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
+});
+
+const Select = forwardRef((props, ref) => {
+    const { as, onChange, name, form, touched, options, defaultValue } = props;
+    const _ref = useRef();
+    const dispatch = useDispatch(STORE_FORM_KEY);
+    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
+    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);`;
+    useEffect(() => {
+        var _a;
+        dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, defaultValue && defaultValue != null && defaultValue != "" && defaultValue != undefined ? defaultValue : ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.value) || '-1', forms)));
+    }, []);
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", Object.assign({ onChange: e => {
+                let val = e.currentTarget.value;
+                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val, forms)));
+                onChange && onChange(val);
+            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)), onBlur: e => {
+            }, name: name || nanoid(), className: `${as ? as : ``} ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`, ref: _ref }, { children: options === null || options === void 0 ? void 0 : options.map(o => jsx("option", Object.assign({ value: o.value }, { children: o.label }), `select-${name}-option-${o.value}`)) })) }));
+});
 
 const useTheme = (mod = 'auto') => {
     const state = useContext(AppContext);
@@ -689,69 +621,24 @@ const useImage = (url, crossOrigin, referrerpolicy) => {
         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];
-};
-
-const useStore = (callback, withFilter = true) => {
-    // if(withInititalState){
-    //     return useContext(AppContext)    
-    // }
-    let _state = useContext(AppContext);
-    let state = withFilter ? {} : _state;
-    if (withFilter) {
-        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`, `${STORE_KEY}forms`];
-        Object.keys(_state).map(k => {
-            if (filters.indexOf(k) == -1) {
-                state[k] = _state[k];
-            }
-        });
-    }
-    if ("function" == typeof callback) {
-        return callback(state);
-    }
-    return state;
-};
-
-const useDispatch = (key) => {
-    const state = useContext(AppContext);
-    const dispatch = state['dispatch'];
-    const prepareState = (prevState, nextState) => {
-        const nextKeys = Object.keys(nextState);
-        nextKeys.map(k => {
-            if (prevState[k] !== nextState[k]) {
-                prevState[k] = nextState[k];
-            }
-        });
-        return Object.assign(Object.assign({}, prevState), nextState);
-    };
-    if (key) {
-        return (payload = {}) => {
-            dispatch({
-                action: key,
-                payload: {
-                    [key]: prepareState(state[key], payload)
-                }
-            });
+            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);
         };
-    }
-    return dispatch;
+    }, [url, crossOrigin, referrerpolicy]);
+    return [imageRef.current, statusRef.current];
 };
 
 /** External Dependencies */
@@ -889,119 +776,346 @@ const useDevice = (config, defaultBreakpoint, hydrateInitial = true) => {
                 list.addEventListener('change', handleChange);
             }
             else {
-                list.addListener(handleChange);
+                list.addListener(handleChange);
+            }
+            /** Map the unsubscribers array to a list of unsubscriber methods */
+            return () => {
+                if (supportsNewEventListeners) {
+                    list.removeEventListener('change', handleChange);
+                }
+                else {
+                    list.removeListener(handleChange);
+                }
+            };
+        });
+        /** Return a function that when called, will call all unsubscribers */
+        return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
+    }, [mediaQueries, updateBreakpoint]);
+    /** Print a nice debug value for React Devtools */
+    useDebugValue(currentBreakpoint, (c) => typeof c.breakpoint === 'string'
+        ? `${c.breakpoint} (${c.minWidth} ≤ x${c.maxWidth ? ` < ${c.maxWidth + 1}` : ''})`
+        : '');
+    return currentBreakpoint;
+};
+
+var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft;
+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);
+        this.show = (message, duration) => {
+            let self = this;
+            self.toast({
+                message: message,
+                duration: duration
+            });
+        };
+        __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}`))
+            return;
+        var root = document.createElement('div');
+        root.id = rootID;
+        document.body.appendChild(root);
+        __classPrivateFieldSet(this, _Toaster_container, document.querySelector(`#${rootID}`), "f");
+    }
+    dismiss(ID) {
+        let self = this;
+        __classPrivateFieldGet(self, _Toaster_tout, "f") && clearTimeout(__classPrivateFieldGet(self, _Toaster_tout, "f"));
+        setTimeout(() => {
+            let tost = document.querySelector(`#${ID}`);
+            tost && tost.classList.remove("visible");
+            // tost && tost.classList.add("hidden");			
+            setTimeout(() => {
+                try {
+                    document.getElementById(ID).parentNode.removeChild(document.getElementById(ID));
+                }
+                catch (e) { }
+                self.arrangeToasts();
+            }, 200);
+        }, 200);
+    }
+    toast(config) {
+        var self = this;
+        var ID = 'toast-' + nanoid(), toast = document.createElement('div'); document.createElement('div');
+        toast.id = ID;
+        toast.style.backgroundColor = `#111`;
+        toast.style.color = `#fff`;
+        toast.style.transform = `translate(-50%, -300px) scale(0.5)`;
+        toast.style.position = `fixed`;
+        toast.style.padding = `6px 12px`;
+        toast.style.fontSize = `14px`;
+        toast.style.left = `50%`;
+        toast.style.maxWidth = `95%`;
+        toast.style.zIndex = `2147483647`;
+        toast.classList.add('zuz-toast');
+        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);
+        self.arrangeToasts()
+            .then(() => {
+            setTimeout(() => {
+                let tost = document.querySelector("#" + ID);
+                tost.classList.add("showing");
+                setTimeout(() => self.dismiss(ID), ((config === null || config === void 0 ? void 0 : config.duration) == undefined ? __classPrivateFieldGet(self, _Toaster_defaultTimeLeft, "f") : (config === null || config === void 0 ? void 0 : config.duration) == -1 ? 86400 : config === null || config === void 0 ? void 0 : config.duration) * 1000);
+                setTimeout(() => {
+                    let tost = document.querySelector("#" + ID);
+                    tost.classList.remove("showing");
+                    tost.classList.add("visible");
+                }, 200);
+            }, 10);
+        });
+    }
+    arrangeToasts() {
+        var self = this, top = __classPrivateFieldGet(self, _Toaster_startTop, "f");
+        return new Promise((resolve, reject) => {
+            var toasts = document.querySelectorAll(".zuz-toast"), i = toasts.length;
+            while (i--) {
+                toasts[i]['style'].top = `${top}px`;
+                top += parseInt(getComputedStyle(toasts[i]).height.replace('px', '')) + 6;
+            }
+            resolve(null);
+        });
+    }
+}
+_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap();
+
+const useToast = () => {
+    const toaster = useMemo(() => new Toaster(), []);
+    return toaster;
+};
+
+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 `
+                padding: 5px 10px;
+                border-radius: 2px;
+                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onClick: e => {
+                    if (props.form && props.type && props.type == 'submit') {
+                        props.onSubmit(forms[props.form]);
+                    }
+                    else {
+                        props.onClick ? props.onClick(e) : () => console.warn('onClick Missing');
+                    }
+                }, disabled: props.disabled || false }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children })));
+        } }));
+});
+
+const makeCSSValue = (k, v, o) => {
+    let ignore = cssPropsIgnore.indexOf(o) == -1;
+    if (k in cssPropsDirect && ignore == true) {
+        // return cssPropsDirect[k];
+        return cssPropsDirect[k].indexOf(`__VALUE__`) > -1 ?
+            cssPropsDirect[k].replaceAll(`__VALUE__`, `${v}${"number" == typeof v ? `px` : ``}`)
+            : cssPropsDirect[k];
+    }
+    let unit = "number" == typeof v && ignore ? `px` : ``;
+    if (cssColors.indexOf(v) > -1) {
+        v = `var(--colors-${v.replaceAll(`.`, `-`)})`;
+        unit = ``;
+    }
+    else if (v in cssPropsVals) {
+        v = cssPropsVals[v];
+    }
+    return `${k}:${v}${unit};`;
+};
+const buildCSS = (props) => {
+    let css = ``;
+    Object.keys(props).map(k => {
+        css += k in cssProps ? makeCSSValue(cssProps[k], props[k], k) : '';
+    });
+    return css;
+};
+const setCSSVar = (key, val) => {
+    document.documentElement.style.setProperty(`--${key}`, val);
+};
+const isUrl = (u) => {
+    let url;
+    try {
+        url = new URL(u);
+    }
+    catch (_) {
+        return false;
+    }
+    return url.protocol === 'http:' || url.protocol === 'https:';
+};
+const isEmail = (e) => {
+    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+    return reg.test(e);
+};
+const isIPv4 = (ipaddress) => {
+    return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
+};
+const randstr = function (len) {
+    var text = "";
+    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    len = len || 10;
+    for (var i = 0; i < len; i++) {
+        text += possible.charAt(Math.floor(Math.random() * possible.length));
+    }
+    return text;
+};
+const setCookie = (key, value, expiry) => Cookies.set(key, value, { expires: expiry || 7 });
+const getCookie = (key) => Cookies.get(key) || null;
+const removeCookie = (key) => Cookies.remove(key);
+const buildFormData = (data) => {
+    var formData = new FormData();
+    var _data = Cookies.get();
+    Object.keys(_data).map(k => formData.append(k, _data[k]));
+    Object.keys(data).filter(x => x != 'files').map(k => formData.append(k, data[k]));
+    if ('files' in data)
+        [data['files']].map((f) => formData.append('files[]', f));
+    return formData;
+};
+const grab = async (uri, data, timeout = 60, fd = null, progress, bearer = `__ha`) => {
+    var Bearer = getCookie(bearer) || `${randstr(8)}^${randstr(8)}`;
+    window['__grabToken'] = axios.CancelToken.source();
+    if (fd) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: "post",
+                url: uri,
+                data: buildFormData(data),
+                timeout: 1000 * timeout,
+                cancelToken: window['__grabToken'].token,
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                    'Authorization': `Bearer ${Bearer}`
+                },
+                onUploadProgress: ev => {
+                    //TODO: Add progress
+                    // if(progress) progress(ev.)
+                }
+            })
+                .then(resp => {
+                if (resp.data && "kind" in resp.data) {
+                    resolve(resp.data);
+                }
+                else {
+                    reject(resp.data);
+                }
+            })
+                .catch(err => reject(err));
+        });
+    }
+    return new Promise((resolve, reject) => {
+        axios.post(uri, Object.assign(Object.assign(Object.assign({}, Cookies.get()), data), { __ustmp: new Date().getTime() / 1000 }), {
+            timeout: 1000 * timeout,
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${Bearer}`
+            },
+            cancelToken: window['__grabToken'].token
+        })
+            .then(resp => {
+            if (resp.data && "kind" in resp.data) {
+                resolve(resp.data);
+            }
+            else {
+                reject(resp.data);
             }
-            /** Map the unsubscribers array to a list of unsubscriber methods */
-            return () => {
-                if (supportsNewEventListeners) {
-                    list.removeEventListener('change', handleChange);
-                }
-                else {
-                    list.removeListener(handleChange);
-                }
-            };
-        });
-        /** Return a function that when called, will call all unsubscribers */
-        return () => unsubscribers.forEach((unsubscriber) => unsubscriber());
-    }, [mediaQueries, updateBreakpoint]);
-    /** Print a nice debug value for React Devtools */
-    useDebugValue(currentBreakpoint, (c) => typeof c.breakpoint === 'string'
-        ? `${c.breakpoint} (${c.minWidth} ≤ x${c.maxWidth ? ` < ${c.maxWidth + 1}` : ''})`
-        : '');
-    return currentBreakpoint;
+        })
+            .catch(err => reject(err));
+    });
 };
-
-var _Toaster_container, _Toaster_startTop, _Toaster_tout, _Toaster_defaultTimeLeft;
-class Toaster {
-    // #toast: Function;
-    // show : Function;
-    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);
-        this.show = (message, duration) => {
-            let self = this;
-            self.toast({
-                message: message,
-                duration: duration
-            });
-        };
-        __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}`))
-            return;
-        var root = document.createElement('div');
-        root.id = rootID;
-        document.body.appendChild(root);
-        __classPrivateFieldSet(this, _Toaster_container, document.querySelector(`#${rootID}`), "f");
-    }
-    dismiss(ID) {
-        let self = this;
-        __classPrivateFieldGet(self, _Toaster_tout, "f") && clearTimeout(__classPrivateFieldGet(self, _Toaster_tout, "f"));
-        setTimeout(() => {
-            let tost = document.querySelector(`#${ID}`);
-            tost && tost.classList.remove("visible");
-            // tost && tost.classList.add("hidden");			
-            setTimeout(() => {
-                try {
-                    document.getElementById(ID).parentNode.removeChild(document.getElementById(ID));
-                }
-                catch (e) { }
-                self.arrangeToasts();
-            }, 200);
-        }, 200);
+const el = (e) => document.querySelector(e);
+const byName = (e) => document.querySelector(`*[name="${e}"]`);
+const byId = (e) => document.getElementById(e);
+const addProps = (children, prop) => {
+    let form = {};
+    let allowedFields = [Input, Select, Button];
+    let child = Children.deepMap(children, c => {
+        if (allowedFields.indexOf(c['type']) > -1 && c['props'] && !form[c['props'].name]) {
+            form[c['props'].name] = c['props'].value || null;
+        }
+        let Clone = cloneElement(c, prop);
+        return Clone;
+    });
+    return {
+        children: child,
+        fields: form
+    };
+};
+const ucfirst = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+const filterStyleProps = (props) => {
+    const pks = Object.keys(props);
+    const css = Object.keys(cssProps);
+    let filter = {};
+    css.filter(x => pks.includes(x));
+    // .map(k => filter[k] = props[k].toString());
+    return filter;
+    // const allowed = Object.keys(props);
+    // let allowed = Object.keys(cssProps);
+    // return Object.keys(props)
+    //         .filter( k => allowed.includes(k))
+    //         .reduce( (o, k) => {
+    //             // console.log(o)
+    //             console.log(k, props[k])
+    //             // o[k] = props[k].toString();
+    //             // return o;
+    //         })
+    // return [props].filter( row => (
+    //     Object.keys(row)
+    //         .map(key => css.includes(key))
+    // ));
+};
+const filterHTMLProps = (props) => {
+    const pks = Object.keys(props);
+    const css = Object.keys(cssProps);
+    let filter = {};
+    pks.filter(x => {
+        if (x != `for` && !css.includes(x)) {
+            filter[x] = props[x];
+        }
+    });
+    return filter;
+};
+const uuid = () => nanoid();
+const addScript = (src, callback) => {
+    var s = document.createElement('script');
+    s.setAttribute('src', src);
+    s.addEventListener('load', callback, false);
+    document.body.appendChild(s);
+};
+const shuffleArray = array => {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
     }
-    toast(config) {
-        var self = this;
-        var ID = 'toast-' + nanoid(), toast = document.createElement('div'); document.createElement('div');
-        toast.id = ID;
-        toast.style.backgroundColor = `#111`;
-        toast.style.color = `#fff`;
-        toast.style.transform = `translate(-50%, -300px) scale(0.5)`;
-        toast.style.position = `fixed`;
-        toast.style.padding = `6px 12px`;
-        toast.style.fontSize = `16px`;
-        toast.style.left = `50%`;
-        toast.style.zIndex = `2147483647`;
-        toast.classList.add('zuz-toast');
-        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);
-        self.arrangeToasts()
-            .then(() => {
-            setTimeout(() => {
-                let tost = document.querySelector("#" + ID);
-                tost.classList.add("showing");
-                setTimeout(() => self.dismiss(ID), ((config === null || config === void 0 ? void 0 : config.duration) == undefined ? __classPrivateFieldGet(self, _Toaster_defaultTimeLeft, "f") : (config === null || config === void 0 ? void 0 : config.duration) == -1 ? 86400 : config === null || config === void 0 ? void 0 : config.duration) * 1000);
-                setTimeout(() => {
-                    let tost = document.querySelector("#" + ID);
-                    tost.classList.remove("showing");
-                    tost.classList.add("visible");
-                }, 200);
-            }, 10);
-        });
+    return array;
+};
+const getUriParams = () => {
+    var search = location.search.substring(1);
+    if (search == '')
+        return JSON.parse('{}');
+    var xny = {};
+    if ("URLSearchParams" in window) {
+        var items = new URLSearchParams(search);
+        for (const [k, v] of items) {
+            xny[k] = v || ``;
+        }
     }
-    arrangeToasts() {
-        var self = this, top = __classPrivateFieldGet(self, _Toaster_startTop, "f");
-        return new Promise((resolve, reject) => {
-            var toasts = document.querySelectorAll(".zuz-toast"), i = toasts.length;
-            while (i--) {
-                toasts[i]['style'].top = `${top}px`;
-                top += parseInt(getComputedStyle(toasts[i]).height.replace('px', '')) + 6;
-            }
-            resolve(null);
-        });
+    else {
+        try {
+            xny = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
+        }
+        catch (e) {
+            xny = {};
+        }
     }
-}
-_Toaster_container = new WeakMap(), _Toaster_startTop = new WeakMap(), _Toaster_tout = new WeakMap(), _Toaster_defaultTimeLeft = new WeakMap();
-
-const useToast = () => {
-    const toaster = useMemo(() => new Toaster(), []);
-    return toaster;
+    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 AppMain = forwardRef((props, ref) => {
     // const { dispatch } = useStore()
@@ -1019,26 +1133,6 @@ const Box = forwardRef((props, ref) => {
     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 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 `
-                padding: 5px 10px;
-                border-radius: 2px;
-                ${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`, ref: ref, onClick: e => {
-                    if (props.form && props.type && props.type == 'submit') {
-                        props.onSubmit(forms[props.form]);
-                    }
-                    else {
-                        props.onClick ? props.onClick(e) : () => console.warn('onClick Missing');
-                    }
-                }, disabled: props.disabled || false }, { 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) => {
@@ -1053,6 +1147,37 @@ const Component = forwardRef((props, ref) => {
     return jsx(Block, Object.assign({ className: props.as || `` }, filterHTMLProps(props)));
 });
 
+function Checkbox(props) {
+    const { checked, as, name, form, touched, onChange } = props;
+    const [_checked, setChecked] = useState(checked || false);
+    const theme = useTheme();
+    const dispatch = useDispatch(STORE_FORM_KEY);
+    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
+    const switchCheck = useCallback(() => {
+        let nextVal = !_checked;
+        onChange && onChange(nextVal);
+        setChecked(nextVal);
+        dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, nextVal, forms)));
+    }, [_checked]);
+    const defaultCSS = `cursor: pointer;&:before {
+        background: ${!_checked ? `transparent` : theme.color} !important;
+    }`;
+    const _name = useMemo(() => name || nanoid(), [name]);
+    return (jsx(ClassNames, { children: ({ css, cx }) => jsxs(Fragment, { children: [jsx("input", { onChange: switchCheck, id: `zuz${_name}`, 
+                    // className={`${_checked ? 'y' : 'n'} ${as ? ` ${as} ` : ``}f ${cx(css`opacity: 0;position: absolute;&:checked {${defaultCSSChecked}}`)}`} 
+                    className: `zuz-checkbox`, name: _name, type: `checkbox`, value: `checked` }), jsx("label", { className: `${as ? `${as} ` : ``}f ${cx(css `${defaultCSS}`)}`, htmlFor: `zuz${_name}` })] }) })
+    // <Button 
+    //     overflow={`hidden`}
+    //     name={name || nanoid()}
+    //     onClick={switchCheck} 
+    //     w={38} h={22} r={20} bg={`#ddd`} rel>
+    //     <Box w={38} h={22} anim={`0.2`} abs top={0} r={20} left={0} transform={`translateX(${_checked ? 0 : -16}px)`} bg={theme.color}>
+    //         <Box w={18} h={18} abs right={2} top={2} bg={`#fff`} r={20} boxShadow={`0px 0px 0px 5px ${_checked ? theme.color : `#ddd`}`} />
+    //     </Box>
+    // </Button>
+    );
+}
+
 const Spinner = (props) => {
     return (jsxs(Box, Object.assign({ rel: true, w: props.size, h: props.size, zIndex: `1`, useSelect: `none` }, { children: [jsx(Box, { abs: true, as: `spinner rotating`, animationDirection: `reverse`, animationDuration: typeof props.s1 == `string` ? props.s1 : `${props.s1}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.2 }), jsx(Box, { abs: true, as: `spinner rotating`, animationDuration: typeof props.s2 == `string` ? props.s2 : `${props.s2}s`, w: props.size, r: props.radius, h: props.size, bg: props.color, opacity: 0.5 })] })));
 };
@@ -1079,7 +1204,7 @@ const Heading = forwardRef((props, ref) => {
 });
 
 const Cover = (props) => {
-    return (jsx(Box, Object.assign({ abs: true, fill: true, bgFilter: props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined, zIndex: 2, bg: props.bg }, { children: jsxs(Box, Object.assign({ abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20 }, { children: [jsx(Spinner, {}), props.label && jsx(Heading, Object.assign({ size: 16, as: `f`, opacity: 0.7 }, { children: props.label }))] })) })));
+    return (jsx(Box, Object.assign({ abs: true, fill: true, bgFilter: props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined, zIndex: `2`, bg: props.bg }, { children: jsxs(Box, Object.assign({ abs: true, abc: true, aic: true, jcc: true, flex: true, dir: `cols`, gap: 20 }, { children: [jsx(Spinner, {}, `cover-spinner`), props.label && jsx(Heading, Object.assign({ size: 16, as: `f`, opacity: 0.7 }, { children: props.label }), `cover-label`)] }), `cover-shadow`) }), `cover-cloud`));
 };
 Cover.defaultProps = {
     bg: `rgba(0,0,0,0.5)`,
@@ -1092,21 +1217,8 @@ Cover.propTypes = {
     label: PropTypes.string,
 };
 
-const ADD_FORM = (name, fields, forms) => ({
-    forms: Object.assign(Object.assign({}, forms), { [name]: Object.assign({ touched: false, loading: false }, fields) })
-});
-const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
-    if (forms[formName]) {
-        let _forms = Object.assign({}, forms);
-        _forms[formName][field] = value;
-        return {
-            forms: _forms
-        };
-    }
-    return {};
-};
-
 const Form = forwardRef((props, ref) => {
+    var _a;
     const { name, children, onSubmit, cover, debug } = props;
     const [_html, setHTML] = useState(null);
     const [_loading, setLoading] = useState((debug === null || debug === void 0 ? void 0 : debug.loading) || false);
@@ -1131,9 +1243,9 @@ const Form = forwardRef((props, ref) => {
             setHTML(f.children);
             dispatch(ADD_FORM(name, f.fields, forms));
         }
-    }, [children]);
+    }, [children, (_a = forms[name]) === null || _a === void 0 ? void 0 : _a.loading]);
     return createElement(Box, Object.assign(Object.assign({ rel: true }, props), { as: name }), [
-        _loading ? jsx(Cover, { backdrop: (cover === null || cover === void 0 ? void 0 : cover.filter) || { saturate: 80, blur: 10 }, bg: (cover === null || cover === void 0 ? void 0 : cover.bg) || `rgba(0,0,0,0.5)` }) : null,
+        _loading ? jsx(Cover, { backdrop: (cover === null || cover === void 0 ? void 0 : cover.filter) || { saturate: 80, blur: 10 }, bg: (cover === null || cover === void 0 ? void 0 : cover.bg) || `rgba(0,0,0,0.5)` }, `form-${name}-cover`) : null,
         _html
     ]);
 });
@@ -1152,36 +1264,13 @@ 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 Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue } = 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 = 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) => {
-                let k = e['keyCode'] || ['which'];
-                if (k == 13 && form && onSubmit) {
-                    onSubmit();
-                }
-            }, onChange: e => {
-                let val = type == 'file' ?
-                    e.currentTarget.files
-                    : e.currentTarget.value;
-                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val == "" ? null : val, forms)));
-                onChange && onChange(e.target.value == "" ? null : e.target.value);
-            }, onBlur: e => {
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
-});
-
 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 calcPlaceholderStyle = (width, height, duration = 1600) => ({
-    backgroundSize: `${width * 10}px ${height}px`,
+    backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
     animationDuration: `${(duration / 1000).toFixed(1)}s`,
 });
 const Placeholder = forwardRef(({ width, height, duration, bg, bgFrom, bgTo }, ref) => {
@@ -1197,24 +1286,6 @@ Placeholder.propTypes = {
     bgTo: PropTypes.string
 };
 
-const Select = forwardRef((props, ref) => {
-    const { as, onChange, name, form, touched, options, defaultValue } = props;
-    const _ref = useRef();
-    const dispatch = useDispatch(STORE_FORM_KEY);
-    const { forms } = useStore(state => state[STORE_FORM_KEY], false);
-    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);`;
-    useEffect(() => {
-        var _a;
-        dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, defaultValue && defaultValue != null && defaultValue != "" && defaultValue != undefined ? defaultValue : ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.value) || '-1', forms)));
-    }, []);
-    return (jsx(ClassNames, { children: ({ css, cx }) => jsx("select", Object.assign({ onChange: e => {
-                let val = e.currentTarget.value;
-                dispatch(dispatch(UPDATE_FORM_FIELD(form || 'orphan', name, val, forms)));
-                onChange && onChange(val);
-            }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)), onBlur: e => {
-            }, name: name || nanoid(), className: `${as ? as : ``} ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}}`)}`, ref: _ref }, { children: options === null || options === void 0 ? void 0 : options.map(o => jsx("option", Object.assign({ value: o.value }, { children: o.label }), `select-${name}-option-${o.value}`)) })) }));
-});
-
 const Spacer = ({ w, h }) => {
     return (jsx(Box, { as: `spacer`, w: w || 0, h: h || 0 }));
 };
@@ -1224,4 +1295,36 @@ const Text = forwardRef((props, ref) => {
     return (jsx(ClassNames, { children: ({ css, cx }) => jsx("p", Object.assign({ className: `${as ? `${as} ` : ``}${cx(css `${buildCSS(props)}`)}`, ref: ref }, { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : children })) }));
 });
 
-export { App, Component as Block, Box, Button, Cover, Form, Heading, Icon, Image, Input, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, addProps, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, getCookie, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, setCSSVar, setCookie, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };
+const Tweet = (props) => {
+    const [rand, setRand] = useState(Math.random());
+    const _tweet = useRef();
+    const renderTweet = () => {
+        const twttr = window['twttr'];
+        twttr.ready().then(({ widgets }) => {
+            const { options, onTweetLoadSuccess, onTweetLoadError } = props;
+            widgets
+                .createTweetEmbed(props.id, _tweet.current, options || {})
+                .then((twitterWidgetElement) => {
+                // this.setState({
+                // isLoading: false
+                // })
+                // onTweetLoadSuccess && onTweetLoadSuccess(twitterWidgetElement)
+            })
+                .catch(() => { });
+        });
+    };
+    useEffect(() => {
+        const twttr = window['twttr'];
+        if (!(twttr && twttr.ready)) {
+            addScript(`https://platform.twitter.com/widgets.js`, renderTweet);
+        }
+        else {
+            renderTweet();
+        }
+    }, []);
+    useEffect(() => {
+    }, [rand]);
+    return (jsx(Box, { as: `tweet`, weight: 1, bref: _tweet }));
+};
+
+export { App, Component as Block, Box, Button, Checkbox, Cover, Form, Heading, Icon, Image, Input, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };

package/dist/styles.css

@@ -105,6 +105,213 @@ button {
   text-decoration: underline;
 }
 
+.flex {
+  display: flex;
+}
+.flex.ass {
+  align-self: flex-start;
+}
+.flex.asc {
+  align-self: center;
+}
+.flex.ase {
+  align-self: flex-end;
+}
+.flex.ais {
+  align-items: flex-start;
+}
+.flex.aic {
+  align-items: center;
+}
+.flex.aie {
+  align-items: flex-end;
+}
+.flex.jcs {
+  justify-content: flex-start;
+}
+.flex.jcc {
+  justify-content: center;
+}
+.flex.jce {
+  justify-content: flex-end;
+}
+
+/*
+    COLORS
+    It will generate .cfff { color: #fff; } from 'fff'
+*/
+.cfff {
+  color: #fff;
+}
+
+.c111 {
+  color: #111;
+}
+
+.c222 {
+  color: #222;
+}
+
+.c333 {
+  color: #333;
+}
+
+.c444 {
+  color: #444;
+}
+
+.c555 {
+  color: #555;
+}
+
+.c666 {
+  color: #666;
+}
+
+.c777 {
+  color: #777;
+}
+
+.c888 {
+  color: #888;
+}
+
+.c999 {
+  color: #999;
+}
+
+/*
+    FONT SIZES
+    It will generate .s10 { font-size: 12px; } from '12'
+*/
+.s10 {
+  font-size: 10px;
+}
+
+.s12 {
+  font-size: 12px;
+}
+
+.s14 {
+  font-size: 14px;
+}
+
+.s16 {
+  font-size: 16px;
+}
+
+.s18 {
+  font-size: 18px;
+}
+
+.s20 {
+  font-size: 20px;
+}
+
+.s22 {
+  font-size: 22px;
+}
+
+.s24 {
+  font-size: 24px;
+}
+
+.s26 {
+  font-size: 26px;
+}
+
+.s28 {
+  font-size: 28px;
+}
+
+.s30 {
+  font-size: 30px;
+}
+
+.s32 {
+  font-size: 32px;
+}
+
+.s34 {
+  font-size: 34px;
+}
+
+.s36 {
+  font-size: 36px;
+}
+
+.s38 {
+  font-size: 38px;
+}
+
+.s40 {
+  font-size: 40px;
+}
+
+.s42 {
+  font-size: 42px;
+}
+
+.s44 {
+  font-size: 44px;
+}
+
+.s46 {
+  font-size: 46px;
+}
+
+.s48 {
+  font-size: 48px;
+}
+
+.s50 {
+  font-size: 50px;
+}
+
+.s52 {
+  font-size: 52px;
+}
+
+.s54 {
+  font-size: 54px;
+}
+
+.s56 {
+  font-size: 56px;
+}
+
+.s58 {
+  font-size: 58px;
+}
+
+.s60 {
+  font-size: 60px;
+}
+
+.s62 {
+  font-size: 62px;
+}
+
+.s64 {
+  font-size: 64px;
+}
+
+.s66 {
+  font-size: 66px;
+}
+
+.s68 {
+  font-size: 68px;
+}
+
+.s70 {
+  font-size: 70px;
+}
+
+.s72 {
+  font-size: 72px;
+}
+
 @-webkit-keyframes rotating /* Safari and Chrome */ {
   from {
     -webkit-transform: rotate(0deg);
@@ -159,4 +366,49 @@ button {
 }
 .zuz-toast.visible {
   transform: translate(-50%, 0px) scale(1) !important;
+}
+
+.zuz-checkbox {
+  opacity: 0;
+  position: absolute;
+}
+.zuz-checkbox + label {
+  position: relative;
+  display: inline-block;
+  user-select: none;
+  transition: 0.4s ease;
+  height: 26px;
+  width: 44px;
+  border-radius: 60px;
+  background: #eee;
+}
+.zuz-checkbox + label:before {
+  content: "";
+  position: absolute;
+  display: block;
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  height: 26px;
+  width: 44px;
+  top: 0;
+  left: 0;
+  border-radius: 30px;
+}
+.zuz-checkbox + label:after {
+  content: "";
+  position: absolute;
+  display: block;
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: #fff;
+  height: 22px;
+  width: 22px;
+  top: 2px;
+  left: 2px;
+  border-radius: 60px;
+}
+.zuz-checkbox:checked + label:before {
+  background: green;
+  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
+}
+.zuz-checkbox:checked + label:after {
+  left: 20px;
 }

package/package.json

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