@zuzjs/ui 0.3.4 → 0.3.5

package/dist/ui.js

@@ -4,6 +4,7 @@ import Cookies from 'js-cookie';
 import axios from 'axios';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import Link from 'next/link';
 import Children from 'react-children-utilities';
 import PropTypes from 'prop-types';
 
@@ -582,6 +583,24 @@ const Heading = forwardRef((props, ref) => {
     return jsx(HeadingTag, Object.assign({ className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
 });
 
+const Icon = forwardRef((props, ref) => {
+    const _styles = withStyle(Object.assign(Object.assign({}, props), { as: `icon-${props.as}`, size: props.size || 16 }));
+    return jsx("span", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
+});
+
+function Crumb({ items, size }) {
+    const list = [];
+    {
+        items.map((n, i) => {
+            const h = jsx(Heading, { flex: true, size: size || 24, children: n.label }, `hc-${i}-${n.label.replace(/\s/g, '-')}`);
+            list.push(n.href ? jsx(Link, { href: n.href, className: `tdn tdnh`, children: h }, `crumb-${i}-${n.label.replace(/\s/g, '-')}`) : h);
+            if (i < items.length - 1)
+                list.push(jsx(Icon, { as: `chevron_right`, size: size || 24 }, `chev-${i}-${n.label.replace(/\s/g, '-')}`));
+        });
+    }
+    return (jsx(Box, { flex: true, aic: true, gap: 15, children: list }));
+}
+
 const Input = forwardRef((props, ref) => {
     let Tag = props.tag || 'input';
     const El = Tag;
@@ -639,11 +658,6 @@ const Form = (props) => {
         }, children: jsx(Box, Object.assign({}, _props, { children: props.children })) });
 };
 
-const Icon = forwardRef((props, ref) => {
-    const _styles = withStyle(Object.assign(Object.assign({}, props), { as: `icon-${props.as}`, size: props.size || 16 }));
-    return jsx("span", Object.assign({ ref: props.ref || ref, className: _styles }, cleanProps(props), { children: props.html ? jsx("span", { dangerouslySetInnerHTML: { __html: props.html } }) : props.children }));
-});
-
 const Spinner = (props) => {
     const { size, w, h, color, radius, anim } = props;
     return jsx(Box, { w: size || 50, rel: true, zIndex: `1`, userSelect: `none`, h: size || 50, as: `zuz-spinner`, anim: (anim || 2).toString(), flex: true, aic: true, jcc: true, children: jsx(Box, { as: `zuz-loader`, r: radius || 4, w: w || 30, h: h || 6, bg: color || `#111` }) });
@@ -662,4 +676,4 @@ const Select = forwardRef((props, ref) => {
     return jsx("select", Object.assign({ className: _styles }, cleanProps(props), { onChange: e => { props.onChange && props.onChange(e); }, children: props.options && props.options.map(o => jsx("option", { value: o.value, children: o.label }, `${props.id || props.as || props.name}-option-${o.value}`)) }));
 });
 
-export { Box, Button, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };
+export { Box, Button, Crumb, Form, Heading, Icon, Input, Select, Spinner, Stylesheet, buildCSS, buildFormData, cleanProps, formatBytes, formatSeconds, getCookie, getStylesheet, isEmail, makeCSSValue, removeCookie, setCookie, uuid, withRest, withStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -40,6 +40,7 @@
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.69.5"
+    "sass": "^1.69.5",
+    "next": "14.0.4"
   }
 }

package/src/comps/box.tsx

@@ -1,24 +0,0 @@
-import { 
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle,
-    getStylesheet
-} from "../core";
-
-const Box = forwardRef(( props: { [ key: string ] : any }, ref) => {
-
-    const _styles = withStyle(props)
-
-    return <div
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-        {/* {getStylesheet().join("")} */}
-    </div>
-
-});
-
-export default Box

package/src/comps/button.tsx

@@ -1,23 +0,0 @@
-import { 
-    LegacyRef,
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Button = forwardRef(( props: { [ key: string ] : any }, ref : LegacyRef<HTMLButtonElement>) => {
-
-    const _styles = withStyle(props)
-
-    return <button
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-    </button>
-
-});
-
-export default Button

package/src/comps/crumb.tsx

@@ -1,9 +0,0 @@
-import Box from './box'
-
-const Icon = (props: any) => {
-
-    return <Box as={`icon-${props.as}`} size={props.size || 16} />
-
-}
-
-export default Icon

package/src/comps/form.tsx

@@ -1,58 +0,0 @@
-import Box from './box'
-import { buildFormData, isEmail } from '../core'
-// import { useEffect, useState } from 'react'
-import Children from 'react-children-utilities'
-
-const Form = (props: any) => {
-
-    const _props = { ...props }
-    delete _props['children']
-    const formName = `form-${props.name}`
-    const fields = []
-    
-    const validateForm = () => {
-        const _data = buildFormData(document.querySelector(`form[name="${formName}"]`))
-        const data = []
-        _data.map(f => {
-            const id = Object.keys(f)[0]
-            const field = fields.find(x => x.name == id)
-            if(field){
-                const value = decodeURIComponent(f[id])
-                let valid = 'should' in field ? field.value != "" : true
-                if('should' in field){
-                    switch(field.should){
-                        case "email":
-                            valid = isEmail(value)
-                            break;
-                    }
-                }
-                data.push({ name: field.name, value: value, valid: valid })
-            }
-        })
-        if(props.onSubmit){
-            props.onSubmit({ validation: !data.find(x => x.valid == false), data: data })
-        }
-    }
-
-    Children.deepMap(props.children, c => {
-        if(c['props'].name && !fields.find(x => x.name == c['props'].name)){
-            let xyz = { name: c['props'].name, touched: false }
-            if('should' in c['props']){
-                xyz['should'] = c['props'].should
-            }
-            fields.push(xyz)
-        }
-        return null
-    })    
-    
-    return <form name={formName} method={props.method || undefined} onSubmit={e => {
-        e.preventDefault(); e.stopPropagation();
-        validateForm()
-    }} >
-        <Box {..._props}>
-            {props.children}
-        </Box>
-    </form>
-}
-
-export default Form

package/src/comps/heading.tsx

@@ -1,25 +0,0 @@
-import { 
-    LegacyRef,
-    forwardRef 
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Heading = forwardRef(( props: { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
-
-    const _styles = withStyle(props)
-
-    const Tag : string = `h${props.h || 1}`;
-    const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
-
-    return <HeadingTag
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-    </HeadingTag>
-
-});
-
-export default Heading

package/src/comps/icon.tsx

@@ -1,24 +0,0 @@
-import { 
-    forwardRef
-} from "react";
-import { 
-    cleanProps, 
-    withStyle,
-    getStylesheet
-} from "../core";
-
-const Icon = forwardRef(( props: { [ key: string ] : any }, ref) => {
-
-    const _styles = withStyle({ ...props, as: `icon-${props.as}`, size: props.size || 16 })
-
-    return <span
-        ref={props.ref || ref}
-        className={_styles}
-        { ...cleanProps(props) }>
-        {props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}
-        {/* {getStylesheet().join("")} */}
-    </span>
-
-});
-
-export default Icon

package/src/comps/input.tsx

@@ -1,24 +0,0 @@
-import { 
-    Ref,
-    forwardRef 
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Input = forwardRef(( props: { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
-
-    let Tag : string = props.tag || 'input';
-    const El = Tag as `textarea` | `input`
-    const _styles = withStyle(props)
-
-    return <El 
-        className={_styles}
-        onChange={e => { props.onChange && props.onChange(e) }}
-        { ...cleanProps(props) }
-    />
-
-})
-
-export default Input

package/src/comps/select.tsx

@@ -1,23 +0,0 @@
-import { 
-    Ref,
-    forwardRef 
-} from "react";
-import { 
-    cleanProps, 
-    withStyle 
-} from "../core";
-
-const Select = forwardRef(( props: { [ key: string ] : any }, ref : Ref<HTMLTextAreaElement|HTMLInputElement>) => {
-
-    const _styles = withStyle(props)
-
-    return <select
-        className={_styles}
-        { ...cleanProps(props) }
-        onChange={e => { props.onChange && props.onChange(e) }}>
-        {props.options && props.options.map(o => <option key={`${props.id || props.as || props.name}-option-${o.value}`} value={o.value}>{o.label}</option>)}
-    </select>
-
-})
-
-export default Select

package/src/comps/spinner.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import Box from './box'
-import PropTypes from 'prop-types'
-
-const Spinner = (props : any) => {
-    
-    const { size, w, h, color, radius, anim } = props
-
-    return <Box w={size || 50} rel zIndex={`1`} userSelect={`none`} h={size || 50} as={`zuz-spinner`} anim={(anim || 2).toString()} flex aic jcc>
-        <Box as={`zuz-loader`} r={radius || 4} w={w || 30} h={h || 6} bg={color || `#111`} />
-    </Box>
-
-}
-
-Spinner.propTypes = {
-    size: PropTypes.number,
-    w: PropTypes.number,
-    h: PropTypes.number,
-    radius: PropTypes.number,
-    color: PropTypes.string,    
-    anim: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-}
-
-export default Spinner;

package/src/comps/stylesheet.tsx

@@ -1,5 +0,0 @@
-import { getStylesheet } from "../core";
-
-const Stylesheet = (props: any) => <style className={props.id || undefined}>{getStylesheet().join("")}</style>
-
-export default Stylesheet

package/src/context/AppContext.tsx

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-const AppContext = createContext({});
-export default AppContext;

package/src/context/AppProvider.tsx

@@ -1,69 +0,0 @@
-import {
-    useCallback,
-    useEffect,
-    useMemo,
-    useReducer
-} from 'react'
-import AppContext from './AppContext'
-
-let isMounted = true;
-export const STORE_KEY = `__zuzjs`
-export const STORE_FORM_KEY = `${STORE_KEY}forms`
-export const STORE_DEFAUTLS = [`${STORE_KEY}base`, `${STORE_KEY}forms`]
-
-const defaultState = {
-    [`${STORE_KEY}base`] : {
-        debug: true,
-        loading: false,
-        _tmp: Math.random()
-    },
-    [STORE_FORM_KEY] : {
-        forms: {}
-    }
-}
-
-const rootReducer = (state, action ) => ({
-    ...state,
-    ...action.payload
-})
-
-const AppProvider = ({ 
-    children, 
-    initialState = {}
-}) => {
-
-    useEffect(() => {
-        isMounted = true;
-        return () => {
-            isMounted = false;
-        }
-    }, [])
-
-    const rootState = useMemo(() => ({ 
-        ...defaultState,
-        ...initialState
-    }), [initialState])
-
-    const [state, _dispatch] = useReducer(rootReducer, rootState);
-
-    const dispatch = useCallback((args) => {
-        if (isMounted) {
-          _dispatch({ ...args });
-        }
-      },
-      [_dispatch],
-  );
-
-    const providedValue = useMemo(
-        () => ({
-            ...state,
-            dispatch
-        }),
-        [state]
-    )
-
-    return <AppContext.Provider value={providedValue}>{children}</AppContext.Provider>
-
-}
-
-export default AppProvider

package/src/context/createSlice.tsx

@@ -1,16 +0,0 @@
-const createSlice = ({
-    name,
-    initialState,
-    reducers
-}) => {
-
-    return {
-        name,
-        reducer: reducers,
-        actions: reducers,
-        state: initialState
-    }
-
-}
-
-export default createSlice;

package/src/context/index.tsx

@@ -1,5 +0,0 @@
-import AppContext from './AppContext'
-
-export default AppContext;
-export { default as Provider } from './AppProvider';
-export { default as createSlice } from './createSlice';

package/src/core/css.ts

@@ -1 +0,0 @@
-export default {}

package/src/core/index.tsx

@@ -1,241 +0,0 @@
-import Hashids from "hashids"
-import { nanoid } from "nanoid"
-import StyleCache from './css'
-import Cookies from 'js-cookie'
-import axios from 'axios'
-import {
-    cssColors,
-    cssProps, cssPropsDirect, cssPropsIgnore, cssPropsVals
-} from "./styles"
-
-const _Hashids = new Hashids('', 4)
-const _Alphabets = "#abcdefghijklmnopqrstuvwxyz0123456789"
-
-export const setCookie = (key : string, value : any, expiry? : number, host? : string)  => Cookies.set(key, value, { expires: expiry || 7, domain: host || window.location.host })
-
-export const getCookie = (key : string) => key == `` ? Cookies.get() : Cookies.get(key) || null;
-
-export const removeCookie = (key : string) => Cookies.remove(key)
-
-export const uuid = (len=11) => nanoid(len)
-
-export const makeCSSValue = (k: any, v: any, o: any) => { 
-    let ignore = cssPropsIgnore.indexOf(o) == -1
-    if(k in cssPropsDirect && ignore == true){
-        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};`;
-}
-
-export const cleanProps = (props: {}, del=true) : {} => {
-    const ignore = [`as`, `hover`, `bref`, `tag`,`onSubmit`,`method`,`should`,`options`,`required`]
-    let items = { ...props }
-    Object.keys(props).map(k => {
-        if(k in cssProps || ignore.indexOf(k) > -1){
-            if(del)
-                delete items[k]
-            else
-                items[k] = undefined
-        }
-    })
-    return items
-}
-
-export const buildCSS = (k : any, v : any) => {
-	if(k in cssProps){
-		return makeCSSValue(cssProps[k], v, k)
-	}
-	return ``
-}
-
-const _withStyle = (props, pseudo=``) : string => {
-	if(!props) return ``
-	let cx = [props.className || props.as || ``]
-	const propRegexp = /\#|px|\(|\)|-|\s/g
-    Object.keys(props).map(k => {
-        if(k != 'children' && k in cssProps){
-            const _css = buildCSS(k, props[k]).toString().replace(/;|:|\s/g, "")           
-            let _indices = 0
-            for(let i = 0; i < _css.length; i++){ _indices += _Alphabets.indexOf(_css.charAt(i)) }            
-            let _cp = k.substring(0, 1);
-            if(cssProps[k].indexOf("-") > -1){
-                _cp = "";
-                cssProps[k].split("-").map(c => _cp += c.substring(0, 1))
-            }
-			if(props[k].toString().indexOf("-") > -1){
-				props[k].toString().split("-").map(c => _cp += c.substring(0, 1))
-			}
-            const _id = `${_cp}${_Hashids.encode(cssProps[k].length + _indices + (isNaN(parseInt(props[k])) ? 0 : parseInt(props[k])))}`   
-            // const _id = `${_cp}${cssProps[k]}-${props[k]}`   
-            cx.push(_id)
-            StyleCache[_id + pseudo] = buildCSS(k, props[k])
-        }
-    })
-    return cx.join(" ").trim()
-}
-
-export const withStyle = ( props ) : string => {
-	const style = [_withStyle(props)]
-	if("hover" in props){
-		style.push(_withStyle(props.hover, `:hover`))
-	}
-	if("before" in props){
-		style.push(_withStyle(props.hover, `:before`))
-	}
-	if("after" in props){
-		style.push(_withStyle(props.hover, `:after`))
-	}
-	return style.join(style.length > 1 ? " " : "")
-}
-
-export const getStylesheet = () => Object.keys(StyleCache).map(ck => StyleCache[ck] != "" ? `.${ck}{${StyleCache[ck]}}` : `__`).filter(x => x != `__`)
-
-export const isEmail = (e : string) => {
-	let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
-	return reg.test(e);
-}
-
-export const buildFormData = form => {
-	if (!form || form.nodeName !== "FORM") {
-		return;
-	}
-	var i, j, q = [];
-	for (i = form.elements.length - 1; i >= 0; i = i - 1) {
-		if (form.elements[i].name === "") {
-			continue;
-		}
-		switch (form.elements[i].nodeName) {
-		case 'INPUT':
-			switch (form.elements[i].type) {
-			case 'text':
-			case 'hidden':
-			case 'password':
-			case 'button':
-			case 'reset':
-			case 'submit':
-                q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			case 'checkbox':
-			case 'radio':
-				if (form.elements[i].checked) {
-					q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				}						
-				break;
-			case 'file':
-				break;
-			}
-			break;			 
-		case 'TEXTAREA':
-			q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-			break;
-		case 'SELECT':
-			switch (form.elements[i].type) {
-			case 'select-one':
-				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			case 'select-multiple':
-				for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
-					if (form.elements[i].options[j].selected) {
-						q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].options[j].value) });
-					}
-				}
-				break;
-			}
-			break;
-		case 'BUTTON':
-			switch (form.elements[i].type) {
-			case 'reset':
-			case 'submit':
-			case 'button':
-				q.push({ [form.elements[i].name] : encodeURIComponent(form.elements[i].value) });
-				break;
-			}
-			break;
-		}
-	}
-	return q //return q.join("&");
-}
-
-export const withRest = async (uri : string, data : object, timeout : number = 60, fd : object = null, progress? : Function, bearer : string = `__ha`) => {
-    var Bearer = getCookie(bearer) || `${uuid(8)}^${uuid(8)}`;
-	var isWindow = typeof window !== 'undefined' 
-    var cancelToken = null
-    if(isWindow){
-        window['__grabToken'] = axios.CancelToken.source();
-        cancelToken = window['__grabToken'].token
-    }
-    if(fd){
-        return new Promise((resolve, reject) => {
-            axios({
-                method: "post",
-                url: uri,
-                data: buildFormData(data),
-                timeout: 1000 * timeout,
-                cancelToken: cancelToken,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                onUploadProgress: ev => {
-                    //TODO: Add progress                    
-                }
-            })
-            .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,
-            {
-                ...Cookies.get(),
-                ...data,
-                __poken: new Date().getTime() / 1000
-            },
-            {
-                timeout: 1000 * timeout,
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${Bearer}`
-                },
-                cancelToken: cancelToken
-            }
-        )
-        .then(resp => {
-            if(resp.data && "kind" in resp.data){
-                resolve(resp.data)
-            }else{
-                reject(resp.data)
-            }            
-        })
-        .catch(err => reject(err));
-    })
-}
-
-export const formatBytes = bytes => {
-	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-	if (bytes == 0) return '0 Byte';
-	var i = Math.floor(Math.log(bytes) / Math.log(1024)),
-	nx = bytes / Math.pow(1024, i);
-	return  nx.toFixed(2) + ' ' + sizes[i];
-}
-
-export const formatSeconds = (n: number): string => {
-    let d = new Date(n * 1000).toISOString().slice(11, 19)
-    return d.indexOf("00:") > -1 ? d.replace("00:", "") : d
-}

package/src/core/styles.ts

@@ -1,379 +0,0 @@
-const cssProps : { [key: string] : any } = {
-    "ac": "align-content",
-    "alignContent": "align-content",
-    
-    "aic": "aic",
-    "ais": "ais",
-    "aie": "aie",
-    "nous": "nous",
-    "nope": "nope",
-    "ai": "align-items",
-    "alignItems": "align-items",
-    
-    "ass": "ass",
-    "asc": "asc",
-    "ase": "ase",
-    "alignSelf": "align-self",
-    "all": "all",
-    "animation": "animation",
-    "animationDelay": "animation-delay",
-    "animationDirection": "animation-direction",
-    "animationDuration": "animation-duration",
-    "animationFillMode": "animation-fill-mode",
-    "animationIterationCount": "animation-iteration-count",
-    "animationName": "animation-name",
-    "animationPlayState": "animation-play-state",
-    "animationTimingFunction": "animation-timing-function",
-    "backfaceVisibility": "backface-visibility",
-    "backgroundAttachment": "background-attachment",
-    "backgroundBlendMode": "background-blend-mode",
-    "backgroundClip": "background-clip",
-
-    "bg": "background",
-    "background": "background",
-    "bgc": "background-color",
-    "bgColor": "background-color",
-    "backgroundColor": "background-color",
-    
-    "backgroundImage": "background-image",
-    "backgroundOrigin": "background-origin",
-    "backgroundPosition": "background-position",
-    "backgroundRepeat": "background-repeat",
-    "backgroundSize": "background-size",
-    "border": "border",
-    "borderBottom": "border-bottom",
-    "borderBottomColor": "border-bottom-color",
-    "borderBottomStyle": "border-bottom-style",
-    "borderBottomWidth": "border-bottom-width",
-    "borderCollapse": "border-collapse",
-    "borderColor": "border-color",
-    "borderImage": "border-image",
-    "borderImageOutset": "border-image-outset",
-    "borderImageRepeat": "border-image-repeat",
-    "borderImageSlice": "border-image-slice",
-    "borderImageSource": "border-image-source",
-    "borderImageWidth": "border-image-width",
-    "borderLeft": "border-left",
-    "borderLeftColor": "border-left-color",
-    "borderLeftStyle": "border-left-style",
-    "borderLeftWidth": "border-left-width",
-    
-    //Radius
-    "r": "border-radius",
-    "br": "border-radius",
-    "borderRadius": "border-radius",
-    "brtl": "border-top-left-radius",
-    "borderTopLeftRadius": "border-top-left-radius",
-    "brtr": "border-top-right-radius",
-    "borderTopRightRadius": "border-top-right-radius",
-    "brbl": "border-bottom-left-radius",
-    "borderBottomLeftRadius": "border-bottom-left-radius",
-    "brbr": "border-bottom-right-radius",
-    "borderBottomRightRadius": "border-bottom-right-radius",
-
-    "borderRight": "border-right",
-    "borderRightColor": "border-right-color",
-    "borderRightStyle": "border-right-style",
-    "borderRightWidth": "border-right-width",
-    "borderSpacing": "border-spacing",
-    "borderStyle": "border-style",
-    "borderTop": "border-top",
-    "borderTopColor": "border-top-color",
-    
-    "borderTopStyle": "border-top-style",
-    "borderTopWidth": "border-top-width",
-    "borderWidth": "border-width",
-    "bottom": "bottom",
-    "boxDecorationBreak": "box-decoration-break",
-    "boxShadow": "box-shadow",
-    "boxSizing": "box-sizing",
-    "captionSide": "caption-side",
-    "caretColor": "caret-color",
-    "@charset": "@charset",
-    "clear": "clear",
-    "clip": "clip",
-    "clipPath": "clip-path",
-    "color": "color",
-    "columnCount": "column-count",
-    "columnFill": "column-fill",
-    "columnGap": "column-gap",
-    "colGap": "column-gap",
-    "columnRule": "column-rule",
-    "columnRuleColor": "column-rule-color",
-    "columnRuleStyle": "column-rule-style",
-    "columnRuleWidth": "column-rule-width",
-    "columnSpan": "column-span",
-    "columnWidth": "column-width",
-    "colW": "column-width",
-    "columns": "columns",
-    "content": "content",
-    "counterIncrement": "counter-increment",
-    "counterReset": "counter-reset",
-    "cursor": "cursor",
-    "pointer": "pointer",
-    "direction": "direction",
-    "display": "display",
-    "emptyCells": "empty-cells",
-    "filter": "filter",
-    "flex": "flex",
-    "flexBasis": "flex-basis",
-    "dir": "flex-direction",
-    "flexDirection": "flex-direction",
-    "flexFlow": "flex-flow",
-    "flexGrow": "flex-grow",
-    "flexShrink": "flex-shrink",
-    "flexWrap": "flex-wrap",
-    "float": "float",
-    "font": "font",
-    "fontFamily": "font-family",
-    "fontKerning": "font-kerning",
-    "size": "font-size",
-    "fontSize": "font-size",
-    "fontSizeAdjust": "font-size-adjust",
-    "fontStretch": "font-stretch",
-    "fontStyle": "font-style",
-    "fontVariant": "font-variant",
-    "bold": "bold",
-    "b900": "b900",
-    "b800": "b800",
-    "b700": "b700",
-    "fontWeight": "font-weight",
-    "gap" : "gap",
-    "grid": "grid",
-    "gridArea": "grid-area",
-    "gridAutoColumns": "grid-auto-columns",
-    "gridAutoFlow": "grid-auto-flow",
-    "gridAutoRows": "grid-auto-rows",
-    "gridColumn": "grid-column",
-    "gridColumnEnd": "grid-column-end",
-    "gridColumnGap": "grid-column-gap",
-    "gridColumnStart": "grid-column-start",
-    "gridGap": "grid-gap",
-    "gridRow": "grid-row",
-    "gridRowEnd": "grid-row-end",
-    "gridRowGap": "grid-row-gap",
-    "gridRowStart": "grid-row-start",
-    "gridTemplate": "grid-template",
-    "gridTemplateAreas": "grid-template-areas",
-    "gridTemplateColumns": "grid-template-columns",
-    "gridTemplateRows": "grid-template-rows",
-    "hangingPunctuation": "hanging-punctuation",
-    "hyphens": "hyphens",
-    "isolation": "isolation",
-    "jcc": "jcc",
-    "jcs": "jcs",
-    "jce": "jce",
-    "jc": "justify-content",
-    "justifyContent": "justify-content",
-    "left": "left",
-    "letterSpacing": "letter-spacing",
-    "lineHeight": "line-height",
-    "listStyle": "list-style",
-    "listStyleImage": "list-style-image",
-    "listStylePosition": "list-style-position",
-    "listStyleType": "list-style-type",
-    "aspectRatio": "aspect-ratio",
-    //Margin
-    "m": "margin",
-    "margin": "margin",
-    "mb": "margin-bottom",
-    "marginBottom": "margin-bottom",
-    "ml": "margin-left",
-    "marginLeft": "margin-left",
-    "mr": "margin-right",
-    "marginRight": "margin-right",
-    "mt": "margin-top",
-    "marginTop": "margin-top",
-    
-    
-    //Height
-    "h": "height",
-    "height": "height",
-    "minH": "min-height",
-    "minHeight": "min-height",
-    "maxH": "max-height",
-    "maxHeight": "max-height",
-    
-    //Width
-    "w": "width",
-    "width": "width",
-    "minW": "min-width",
-    "minWidth": "min-width",
-    "maxW": "max-width",
-    "maxWidth": "max-width",
-    
-    "mixBlendMode": "mix-blend-mode",
-    "objectFit": "object-fit",
-    "objectPosition": "object-position",
-    "opacity": "opacity",
-    "order": "order",
-    "outline": "outline",
-    "outlineColor": "outline-color",
-    "outlineOffset": "outline-offset",
-    "outlineStyle": "outline-style",
-    "outlineWidth": "outline-width",
-    "overflow": "overflow",
-    "overflowX": "overflow-x",
-    "overflowY": "overflow-y",
-    
-
-    "p": "padding",
-    "padding": "padding",
-    "pb": "padding-bottom",
-    "paddingBottom": "padding-bottom",
-    "pl": "padding-left",
-    "paddingLeft": "padding-left",
-    "pr": "padding-right",
-    "paddingRight": "padding-right",
-    "pt": "padding-top",
-    "paddingTop": "padding-top",
-    
-    "pageBreakAfter": "page-break-after",
-    "pageBreakBefore": "page-break-before",
-    "pageBreakInside": "page-break-inside",
-    "perspective": "perspective",
-    "perspectiveOrigin": "perspective-origin",
-    "pointerEvents": "pointer-events",
-    
-    "rel":"rel",
-    "abs":"abs",
-    "fixed":"fixed",
-    "sticky":"sticky",
-    "pos": "position",
-    "position": "position",
-    
-    "quotes": "quotes",
-    "resize": "resize",
-    "right": "right",
-    "scrollBehavior": "scroll-behavior",
-    "tabSize": "tab-size",
-    "tableLayout": "table-layout",
-    
-    "align" : "text-align",
-    "textAlign": "text-align",
-    "textAlignLast": "text-align-last",
-    
-    "tdh": "tdh", //text-decoration: underline on hover
-    "td": "text-decoration",
-    "textDecoration": "text-decoration",
-    "textDecorationColor": "text-decoration-color",
-    "textDecorationLine": "text-decoration-line",
-    "textDecorationStyle": "text-decoration-style",
-    "textIndent": "text-indent",
-    "textJustify": "text-justify",
-    "textOverflow": "text-overflow",
-    "textShadow": "text-shadow",
-    "textTransform": "text-transform",
-    "top": "top",
-    
-    "transform": "transform",
-    "transform(2D)": "transform(2D)",
-    "transformOrigin(twoValue syntax)": "transform-origin(two-value syntax)",
-    "transformStyle": "transform-style",
-    "transition": "transition",
-    "transitionDelay": "transition-delay",
-    "transitionDuration": "transition-duration",
-    "transitionProperty": "transition-property",
-    "transitionTimingFunction": "transition-timing-function",
-    "unicodeBidi": "unicode-bidi",
-    "userSelect": "user-select",
-    "verticalAlign": "vertical-align",
-    "visibility": "visibility",
-    "weight" : "flex",
-    "whiteSpace": "white-space",
-    "ws": "white-space",
-    "wordBreak": "word-break",
-    "wordSpacing": "word-spacing",
-    "wrap": "wrap",
-    "textWrap": "textWrap",
-    "wordWrap": "word-wrap",
-    "writingMode": "writing-mode",
-    "zIndex": "z-index",
-    "backdropFilter": "backdrop-filter",
-    "bgFilter": "backdrop-filter",
-
-    //Custom
-    "anim" : "anim",
-    "fill" : "fill",
-    "abc" : "abc",
-    "fb" : "fb",
-    "ph" : "ph",
-    "pv" : "pv",
-    "mv" : "mv",
-    "mh" : "mh"
-}
-
-const cssPropsVals : { [key: string] : any } = {
-    //Colors
-    "primary" : 'var(--primary-color)',
-    "c" : "center",
-    //Flex Directions
-    "cols" : "column",
-    "colsr" : "column-reverse",
-    "rows" : "row",
-    "rowsr" : "row-reverse",
-    //Positions
-    "rel" : "relative",
-    "abs" : "absolute",
-}
-
-const cssPropsDirect : { [key : string] : any } = {
-    'rel' : 'position: relative;',
-    'fixed' : 'position: fixed;',
-    'abs' : 'position: absolute;',
-    'sticky' : 'position: sticky;',
-    'flex' : 'display: flex;',
-    'fwrap' : 'flex-wrap: wrap;',
-    'aic' : 'align-items: center;',
-    'ais' : 'align-items: flex-start;',
-    'aie' : 'align-items: flex-end;',
-    'ass' : 'align-self: flex-start;',
-    'asc' : 'align-self: center;',
-    'ase' : 'align-self: flex-end;',
-    'jcc' : 'justify-content: center;',
-    'jcs' : 'justify-content: flex-start;',
-    'jce' : 'justify-content: flex-end;',
-    'grid' : 'display: grid;',
-    'fill' : 'top: 0px;left: 0px;right: 0px;bottom: 0px;',
-    'abc' : 'top: 50%;left: 50%;transform: translate(-50%, -50%);',
-    'block' : 'display: block;',
-    'bold' : "font-weight: bold;",
-    'b900' : "font-weight: 900;",
-    'b800' : "font-weight: 800;",
-    'b700' : "font-weight: 700;",
-    'wrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'textWrap' : "word-wrap: break-word;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 99%;",
-    'pointer' : "cursor: pointer;",
-    'fb' : 'font-family: var(--primary-font-bold);',
-    'ph' : 'padding-left: __VALUE__;padding-right: __VALUE__;',
-    'pv' : 'padding-bottom: __VALUE__;padding-top: __VALUE__;',
-    'mv' : 'margin-bottom: __VALUE__;margin-top: __VALUE__;',
-    'mh' : 'margin-left: __VALUE__;margin-right: __VALUE__;',
-    'anim' : 'transition:all __VALUE__s linear 0s;',
-    'nous' : 'user-select: none;',
-    'nope' : 'pointer-events: none;',
-    'tdn' : 'text-decoration: none;',
-    'aspectRatio' : 'aspect-ratio: __VALUE__;'
-}
-
-const cssPropsIgnore : string[] = [
-    'weight', `opacity`
-]
-
-const _cssColors : string[] = [ `white`, `black`, `gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `cyan`, `purple`, `pink`, `linkedin`, `facebook`, `messenger`, `whatsapp`, `twitter`, `telegram`  ]
-const _cssColorsRange : string[] = [ `50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`  ]
-let cssColors : string[] = []
-
-if(cssColors.length == 0){
-    _cssColors.map(c => {
-        _cssColorsRange.map(r => cssColors.push(`${c}.${r}`));
-    });
-}
-
-export { 
-    cssPropsDirect,
-    cssProps,
-    cssPropsVals,
-    cssPropsIgnore,
-    cssColors
-}

package/src/hooks/index.tsx

@@ -1,2 +0,0 @@
-export { default as useStore } from './useStore'
-export { default as useDispatch } from './useDispatch'

package/src/hooks/useDispatch.tsx

@@ -1,37 +0,0 @@
-import { useContext } from 'react'
-import AppContext from '../context'
-
-const useDispatch = (key? : string) => {
-    
-    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 {
-            ...prevState,
-            ...nextState
-        }
-    }
-
-    if(key){
-        return (payload = {}) => {
-
-            dispatch({
-                action: key,
-                payload: {
-                    [key] : prepareState(state[key], payload)
-                }
-            });
-        }
-    }
-
-    return dispatch;
-}
-
-export default useDispatch

package/src/hooks/useStore.tsx

@@ -1,25 +0,0 @@
-import { useContext } from 'react'
-import AppContext from '../context'
-import { STORE_KEY } from '../context/AppProvider'
-
-const useStore = (callback? : any, withFilter = true) => {
-    
-    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
-}
-
-export default useStore

package/src/hooks.tsx

@@ -1,8 +0,0 @@
-import { Provider, createSlice } from './context'
-
-export * from './hooks/index';
-
-export { 
-    Provider,
-    createSlice
-}

package/src/scss/mixins.scss

@@ -1,3 +0,0 @@
-@mixin anim($duration: 0.3s) {
-    transition: all $duration linear 0s;
-}

package/src/scss/props.scss

@@ -1,92 +0,0 @@
-*, *:before, *:after{
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin: 0;padding: 0;}
-table{border-collapse: collapse; border-spacing: 0;}
-fieldset, img {border: 0}
-address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal}
-ol, ul, li{list-style: none;}
-caption, th{text-align: left;}
-h1, h2, h3, h4, h5, h6{font-size: 100%; font-weight: normal;}
-div, img, button, input, textarea, select{outline: none}
-strong{font-weight: bold}
-em{font-style: italic;}
-a img{border: none;}
-
-button{cursor: pointer;}
-.grid{ display: grid; }
-.fixed{ 
-    position: fixed; 
-    &.fill{
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-    }
-}
-.rel{ position: relative; }
-.abs{ 
-    position: absolute; 
-    &.abc{
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-    &.fill{
-        top: 0px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-    }
-}
-
-.sticky{ position: sticky; }
-.block{display: block;}
-.iblock{display: inline-block;}
-.tdnh, .tdn{ text-decoration: none; }
-.tdnh:hover, .tdh:hover{ text-decoration: underline; }
-
-.flex{
-    display: flex;
-    &.ass{align-self: flex-start;}
-    &.asc{align-self: center;}
-    &.ase{align-self: flex-end;}
-    &.ais{align-items: flex-start;}
-    &.aic{align-items: center;}
-    &.aie{align-items: flex-end;}
-    &.jcs{justify-content: flex-start;}
-    &.jcc{justify-content: center;}
-    &.jce{justify-content: flex-end;}
-    &.col{flex-direction: column;}
-}
-
-/*
-    COLORS
-    It will generate .cfff { color: #fff; } from 'fff'
-*/
-$colors: 'fff','111','222','333','444','555','666','777','888','999';
-@each $n in $colors{
-    .c#{$n} { color: unquote("#"+#{$n}); }
-}
-
-/*
-    FONT SIZES
-    It will generate .s10 { font-size: 12px; } from '12'
-*/
-@for $i from 10 through 72 {
-    @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}; }
-}

package/src/scss/styles.scss

@@ -1,103 +0,0 @@
-@import './mixins.scss';
-@import './props.scss';
-
-@keyframes rotate-loop {
-    from {
-      -ms-transform: rotate(0deg);
-      -moz-transform: rotate(0deg);
-      -webkit-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -ms-transform: rotate(360deg);
-      -moz-transform: rotate(360deg);
-      -webkit-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-}
-
-.zuz-spinner{
-    .zuz-loader{
-        animation: rotate-loop 0.5s linear infinite;
-    }
-}
-
-.button{
-    border: 0px; 
-}
-
-.zuz-checkbox{
-    opacity: 0; // hides checkbox
-    position: absolute;
-    & + label {
-        position: relative;
-        display: inline-block;
-        user-select: none;
-        transition: .4s ease;
-        height: 26px;
-        width: 44px;
-        border-radius: 60px;
-        background: #eee;
-        &:before {
-            content: "";
-            position: absolute;
-            display: block;
-            transition: .2s cubic-bezier(.24, 0, .5, 1);
-            height: 26px;
-            width: 44px;
-            top: 0;
-            left: 0;
-            border-radius: 30px;
-        }
-        &:after {
-            content: "";
-            position: absolute;
-            display: block;
-            transition: .35s cubic-bezier(.54, 1.60, .5, 1);
-            background: #fff;
-            height: 22px;
-            width: 22px;
-            top: 2px;
-            left: 2px;
-            border-radius: 60px;
-        }
-    }
-    &:checked {
-        & + label:before {
-          background: green; // Active Color
-          transition: width .2s cubic-bezier(0, 0, 0, .1);
-        }
-        & + label:after {
-          left: 20px;
-        }
-    }
-}
-
-.zuz-contextmenu{
-    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, .45);
-    backdrop-filter: blur(20px);
-    button{
-        border: 0px;
-        text-align: left;
-        padding: 4px 6px;
-        background: rgba(0, 0, 0, 0);
-        cursor: pointer;
-        color: #fff;
-        border-radius: 4px;
-        &:hover{
-            background: #5183ff;
-        }
-    }
-    .line{
-        height: 1px;
-        background: rgba(255,255,255,0.25);
-        margin: 4px 6px;
-    }
-}

package/src/ui.tsx

@@ -1,13 +0,0 @@
-import './scss/styles.scss'
-
-export * from "./core"
-
-export { default as Stylesheet } from "./comps/stylesheet"
-export { default as Box } from "./comps/box"
-export { default as Heading } from "./comps/heading"
-export { default as Input } from "./comps/input"
-export { default as Button } from "./comps/button"
-export { default as Form } from "./comps/form"
-export { default as Icon } from "./comps/icon"
-export { default as Spinner } from "./comps/spinner"
-export { default as Select } from "./comps/select"