@zuzjs/ui 0.2.4 → 0.2.6

package/README.md

@@ -0,0 +1 @@
+# zuzjs

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement } from 'react';
+import { createContext, useEffect, useMemo, useReducer, useCallback, useContext, forwardRef, useRef, useState, useLayoutEffect, useDebugValue, cloneElement, useImperativeHandle, createElement, Component as Component$1, Children as Children$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import Children from 'react-children-utilities';
@@ -59,16 +59,16 @@ class AppTheme {
         _AppTheme_darkTheme.set(this, void 0);
         this.get = () => {
             let self = this;
-            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "auto") {
-                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-                    __classPrivateFieldSet(self, _AppTheme_mode, event.matches ? "dark" : "light", "f");
-                    __classPrivateFieldGet(self, _AppTheme_listen, "f").call(self, __classPrivateFieldGet(self, _AppTheme_mode, "f"));
-                });
-                return window.matchMedia &&
-                    window.matchMedia('(prefers-color-scheme: dark)').matches ?
-                    __classPrivateFieldGet(self, _AppTheme_darkTheme, "f") : __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
-            }
-            else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
+            // if(self.#mode === "auto"){
+            //     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            //         self.#mode = event.matches ? "dark" : "light";
+            //         self.#listen(self.#mode);
+            //     });
+            //     return window.matchMedia && 
+            //         window.matchMedia('(prefers-color-scheme: dark)').matches ? 
+            //         self.#darkTheme : self.#lightTheme;
+            // }else 
+            if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "light") {
                 return __classPrivateFieldGet(self, _AppTheme_lightTheme, "f");
             }
             else if (__classPrivateFieldGet(self, _AppTheme_mode, "f") === "dark") {
@@ -251,6 +251,7 @@ const cssProps = {
     "@charset": "@charset",
     "clear": "clear",
     "clip": "clip",
+    "clipPath": "clip-path",
     "color": "color",
     "columnCount": "column-count",
     "columnFill": "column-fill",
@@ -555,12 +556,12 @@ const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
 };
 
 const Input = forwardRef((props, ref) => {
-    const { as, accept, multiple, onChange, type, tag, placeholder, name, form, touched, onSubmit, defaultValue } = props;
+    const { as, accept, multiple, onChange, onKeyUp, type, tag, placeholder, name, form, touched, onSubmit, defaultValue, fref } = props;
     const dispatch = useDispatch(STORE_FORM_KEY);
     const { forms } = useStore(state => state[STORE_FORM_KEY], false);
     let Tag = tag || 'input';
     const El = Tag;
-    const _ref = useRef();
+    const _ref = fref || useRef();
     const _defaultCSS = `width: 100%;border-radius: var(--radius-base);padding-left: 4px;padding-right: 4px;border-style: solid;border-width: 1px;border-color: var(--colors-gray-200);`;
     return (jsx(ClassNames, { children: ({ css, cx }) => jsx(El, { type: type || `text`, placeholder: placeholder || undefined, name: name || nanoid(), multiple: type == 'file' ? multiple : undefined, accept: accept || `*`, className: `${as ? `${as} ` : ``}f ${cx(css `${_defaultCSS}${buildCSS(props)}&:hover {${buildCSS(props.hover || {})}} &:focus {${buildCSS(props.focus || {})}}`)}`, ref: _ref, defaultValue: defaultValue || ``, onKeyUp: (e) => {
                 let k = e['keyCode'] || ['which'];
@@ -572,7 +573,7 @@ const Input = forwardRef((props, ref) => {
                     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);
+                onChange && onChange(val == "" ? null : val);
             }, onBlur: e => {
             }, onFocus: e => touched == false && dispatch(UPDATE_FORM_FIELD(form || 'orphan', `touched`, true, forms)) }) }));
 });
@@ -909,6 +910,79 @@ const Button = forwardRef((props, ref) => {
         } }));
 });
 
+const patterns = {
+    route: [/^.*\/src\/pages\/|\.(jsx|tsx)$/g, ''],
+    splat: [/\[\.{3}\w+\]/g, '*'],
+    param: [/\[([^\]]+)\]/g, ':$1'],
+    slash: [/^index$|\./g, '/'],
+    optional: [/^-(:?[\w-]+)/, '$1?'],
+};
+const generatePreservedRoutes = (files) => {
+    return Object.keys(files).reduce((routes, key) => {
+        const path = key.replace(...patterns.route);
+        return Object.assign(Object.assign({}, routes), { [path]: files[key] });
+    }, {});
+};
+const generateRegularRoutes = (files, buildRoute) => {
+    const filteredRoutes = Object.keys(files).filter((key) => !key.includes('/_') || /_layout\.(jsx|tsx)$/.test(key));
+    return filteredRoutes.reduce((routes, key) => {
+        const module = files[key];
+        const route = Object.assign({ id: key.replace(...patterns.route) }, buildRoute(module, key));
+        const segments = key
+            .replace(...patterns.route)
+            .replace(...patterns.splat)
+            .replace(...patterns.param)
+            .split('/')
+            .filter(Boolean);
+        segments.reduce((parent, segment, index) => {
+            var _a, _b;
+            const path = segment.replace(...patterns.slash).replace(...patterns.optional);
+            const root = index === 0;
+            const leaf = index === segments.length - 1 && segments.length > 1;
+            const node = !root && !leaf;
+            const layout = segment === '_layout';
+            const group = /\(\w+\)/.test(path);
+            const insert = /^\w|\//.test(path) ? 'unshift' : 'push';
+            if (root) {
+                const last = segments.length === 1;
+                if (last) {
+                    routes.push(Object.assign({ path }, route));
+                    return parent;
+                }
+            }
+            if (root || node) {
+                const current = root ? routes : parent.children;
+                const found = current === null || current === void 0 ? void 0 : current.find((route) => { var _a, _b; return route.path === path || ((_b = (_a = route.id) === null || _a === void 0 ? void 0 : _a.split('@')) === null || _b === void 0 ? void 0 : _b[0]) === path; });
+                const props = group ? ((route === null || route === void 0 ? void 0 : route.component) ? { id: path, path: '/' } : { id: path }) : { path };
+                if (found)
+                    (_a = found.children) !== null && _a !== void 0 ? _a : (found.children = []);
+                else
+                    current === null || current === void 0 ? void 0 : current[insert](Object.assign(Object.assign({}, props), { children: [] }));
+                return found || (current === null || current === void 0 ? void 0 : current[insert === 'unshift' ? 0 : current.length - 1]);
+            }
+            if (layout) {
+                return Object.assign(parent, Object.assign(Object.assign({}, route), { id: `${parent.id || parent.path}@${route.id}` }));
+            }
+            if (leaf) {
+                (_b = parent === null || parent === void 0 ? void 0 : parent.children) === null || _b === void 0 ? void 0 : _b[insert]((route === null || route === void 0 ? void 0 : route.index) ? route : Object.assign({ path }, route));
+            }
+            return parent;
+        }, {});
+        return routes;
+    }, []);
+};
+const generateModalRoutes = (files) => {
+    return Object.keys(files).reduce((modals, key) => {
+        var _a;
+        const path = key
+            .replace(...patterns.route)
+            .replace(/\+|\(\w+\)\//g, '')
+            .replace(/(\/)?index/g, '')
+            .replace(/\./g, '/');
+        return Object.assign(Object.assign({}, modals), { [`/${path}`]: (_a = files[key]) === null || _a === void 0 ? void 0 : _a.default });
+    }, {});
+};
+
 const makeCSSValue = (k, v, o) => {
     let ignore = cssPropsIgnore.indexOf(o) == -1;
     if (k in cssPropsDirect && ignore == true) {
@@ -1269,6 +1343,131 @@ const Image = forwardRef((props, ref) => {
     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 DEFAULT_COLUMNS = 2;
+class Masonry extends Component$1 {
+    constructor(props) {
+        super(props);
+        this._lastRecalculateAnimationFrame = window.requestAnimationFrame(() => {
+            this.reCalculateColumnCount();
+        });
+        // Correct scope for when methods are accessed externally
+        this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this);
+        this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this);
+        // default state
+        let columnCount;
+        if (this.props && this.props.breakpointCols.default) {
+            columnCount = this.props.breakpointCols.default;
+        }
+        else {
+            columnCount = parseInt(this.props.breakpointCols) || DEFAULT_COLUMNS;
+        }
+        this.state = {
+            columnCount
+        };
+    }
+    componentDidMount() {
+        this.reCalculateColumnCount();
+        // window may not be available in some environments
+        if (window) {
+            window.addEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+    componentDidUpdate() {
+        this.reCalculateColumnCount();
+    }
+    componentWillUnmount() {
+        if (window) {
+            window.removeEventListener('resize', this.reCalculateColumnCountDebounce);
+        }
+    }
+    reCalculateColumnCountDebounce() {
+        if (!window || !window.requestAnimationFrame) { // IE10+
+            this.reCalculateColumnCount();
+            return;
+        }
+        if (window.cancelAnimationFrame) { // IE10+
+            window.cancelAnimationFrame(this._lastRecalculateAnimationFrame);
+        }
+    }
+    reCalculateColumnCount() {
+        const windowWidth = window && window.innerWidth || Infinity;
+        let breakpointColsObject = this.props.breakpointCols;
+        // Allow passing a single number to `breakpointCols` instead of an object
+        if (typeof breakpointColsObject !== 'object') {
+            breakpointColsObject = {
+                default: parseInt(breakpointColsObject) || DEFAULT_COLUMNS
+            };
+        }
+        let matchedBreakpoint = Infinity;
+        let columns = breakpointColsObject.default || DEFAULT_COLUMNS;
+        for (let breakpoint in breakpointColsObject) {
+            const optBreakpoint = parseInt(breakpoint);
+            const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint;
+            if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
+                matchedBreakpoint = optBreakpoint;
+                columns = breakpointColsObject[breakpoint];
+            }
+        }
+        columns = Math.max(1, parseInt(columns) || 1);
+        if (this.state.columnCount !== columns) {
+            this.setState({
+                columnCount: columns
+            });
+            this.props.onChange && this.props.onChange({ columns: columns });
+        }
+    }
+    itemsInColumns() {
+        const currentColumnCount = this.state.columnCount;
+        const itemsInColumns = new Array(currentColumnCount);
+        // Force children to be handled as an array
+        const items = Children$1.toArray(this.props.children);
+        for (let i = 0; i < items.length; i++) {
+            const columnIndex = i % currentColumnCount;
+            if (!itemsInColumns[columnIndex]) {
+                itemsInColumns[columnIndex] = [];
+            }
+            itemsInColumns[columnIndex].push(items[i]);
+        }
+        return itemsInColumns;
+    }
+    renderColumns() {
+        const { column, columnAttrs = {}, columnClassName } = this.props;
+        const childrenInColumns = this.itemsInColumns();
+        const columnWidth = `${100 / childrenInColumns.length}%`;
+        let className = columnClassName;
+        if (className && typeof className !== 'string') {
+            this.logDeprecated('The property "columnClassName" requires a string');
+            // This is a deprecated default and will be removed soon.
+            if (typeof className === 'undefined') {
+                className = 'my-masonry-grid_column';
+            }
+        }
+        const columnAttributes = Object.assign(Object.assign(Object.assign({}, column), columnAttrs), { style: Object.assign(Object.assign({}, columnAttrs.style), { width: columnWidth }), className });
+        return childrenInColumns.map((items, i) => {
+            return createElement("div", Object.assign({}, columnAttributes, { key: i }), items);
+        });
+    }
+    logDeprecated(message) {
+        console.error('[Masonry]', message);
+    }
+    render() {
+        const _a = this.props, { 
+        // ignored
+        children, breakpointCols, columnClassName, columnAttrs, column, 
+        // used
+        className } = _a, rest = __rest(_a, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]);
+        let classNameOutput = className;
+        if (typeof className !== 'string') {
+            this.logDeprecated('The property "className" requires a string');
+            // This is a deprecated default and will be removed soon.
+            if (typeof className === 'undefined') {
+                classNameOutput = 'my-masonry-grid';
+            }
+        }
+        return (jsx("div", Object.assign({}, rest, { className: classNameOutput }, { children: this.renderColumns() })));
+    }
+}
+
 const calcPlaceholderStyle = (width, height, duration = 1600) => ({
     backgroundSize: `${parseInt(width.toString()) * 10}px ${height}px`,
     animationDuration: `${(duration / 1000).toFixed(1)}s`,
@@ -1349,4 +1548,4 @@ const Header = forwardRef((props, ref) => {
     return (jsx(Fragment, { children: buildComponent(data) }));
 });
 
-export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, 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 };
+export { App, Component as Block, Box, Button, Checkbox, ContextMenu, Cover, Form, Header, Heading, Icon, Image, Input, Masonry, Placeholder, AppProvider as Provider, Select, Spacer, Spinner, Text, Toaster, Tweet, addProps, addScript, buildCSS, buildFormData, byId, byName, createSlice, el, filterHTMLProps, filterStyleProps, generateModalRoutes, generatePreservedRoutes, generateRegularRoutes, getCookie, getUriParams, grab, isEmail, isIPv4, isUrl, randstr, removeCookie, rgb2hex, setCSSVar, setCookie, shuffleArray, ucfirst, useDevice, useDispatch, useImage, useResizeObserver, useStore, useTheme, useToast, uuid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -34,12 +34,14 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
     "postcss": "^8.4.21",
+    "react-router-dom": "^6.14.2",
     "rimraf": "^4.4.1",
     "rollup": "^3.20.2",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.60.0"
+    "sass": "^1.60.0",
+    "vite-plugin-environment": "^1.1.3"
   }
 }

package/src/actions/index.tsx

@@ -0,0 +1,29 @@
+import { UNDO } from './undo'
+import { REDO } from './redo'
+import { RESET } from './reset'
+
+export const ADD_FORM = (name, fields, forms) => ({
+    forms: {
+        ...forms,
+        [name] : { touched: false, loading: false, ...fields }
+    }
+})
+
+export const UPDATE_FORM_FIELD = (formName, field, value, forms) => {
+    if(forms[formName]){
+        let _forms = {
+            ...forms
+        }
+        _forms[formName][field] = value;
+        return {
+            forms: _forms
+        }
+    }
+    return {}
+}
+
+export {
+    UNDO,
+    REDO,
+    RESET
+}

package/src/actions/redo.tsx

@@ -0,0 +1 @@
+export const REDO = 'REDO';

package/src/actions/reset.tsx

@@ -0,0 +1 @@
+export const RESET = 'RESET';

package/src/actions/undo.tsx

@@ -0,0 +1 @@
+export const UNDO = 'UNDO';

package/src/comps/app.tsx

@@ -0,0 +1,34 @@
+import {
+    forwardRef,
+    useEffect
+} from 'react';
+import { setCSSVar, buildCSS } from '../core'
+import { Provider } from '../context'
+import { ClassNames } from '@emotion/react'
+import { useStore } from '../hooks'
+
+const AppMain = forwardRef((props : { [ key: string ] : any }, ref) => {
+
+    // const { dispatch } = useStore()
+
+    // if("theme" in props && !theme){
+    //     dispatch(setTheme(props.theme));
+    // }
+
+    return (
+        <ClassNames>
+            {({ css, cx }) => <main className={`${props.as ? props.as : `zuz-app`} ${cx(css`${buildCSS(props)} &:hover {${buildCSS(props.hover || {})}} &:active {${buildCSS(props.active || {})}}`)}`}>{props.children}</main>}
+        </ClassNames>
+    )
+})
+
+const App = forwardRef((props : { [ key: string ] : any }, ref) => {
+
+    return (
+        <Provider>
+            <AppMain />
+        </Provider>
+    )
+})
+
+export default App

package/src/comps/box.tsx

@@ -0,0 +1,23 @@
+import {
+    forwardRef,
+    useEffect
+} from 'react';
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+
+const Box = forwardRef((props : { [ key: string ] : any }, ref) => {
+
+    const _noClick = () => {}
+
+    return (
+        <ClassNames>
+            {({ css, cx }) => <div 
+                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}>{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}</div>}
+        </ClassNames>
+    )
+})
+
+export default Box;

package/src/comps/button.tsx

@@ -0,0 +1,45 @@
+import React, { 
+  forwardRef,
+  LegacyRef
+} from 'react';
+import { ClassNames } from '@emotion/react'
+import { 
+  buildCSS,
+  filterStyleProps
+} from '../core'
+import { useStore } from '../hooks'
+import { STORE_FORM_KEY } from '../context/AppProvider'
+const Button = forwardRef((props: { [ key: string ] : any }, ref : LegacyRef<HTMLButtonElement>) => {
+
+  const { forms } = useStore(state => state[STORE_FORM_KEY], false);
+  const _otherProps = {}  
+  if(props.html){
+      _otherProps['dangerouslySetInnerHTML'] = { __html: props.html }
+  }
+
+  return (
+    <ClassNames>
+        {({ css, cx }) => {
+          return (
+            <button
+              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} >{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : props.children}</button>
+          )
+      }}
+    </ClassNames>
+  )
+})
+
+export default Button;

package/src/comps/checkbox.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types'
+import { nanoid } from 'nanoid'
+import Box from './box'
+import Button from './button'
+import useTheme from '../hooks/useTheme'
+import useDispatch from '../hooks/useDispatch'
+import useStore from '../hooks/useStore'
+import { STORE_FORM_KEY } from '../context/AppProvider'
+import {
+    UPDATE_FORM_FIELD
+} from '../actions'
+import { ClassNames } from '@emotion/react'
+
+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 (
+        <ClassNames>
+            {({ css, cx }) => <>
+                <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`}
+                />
+                <label 
+                    className={`${as ? `${as} ` : ``}f ${cx(css`${defaultCSS}`)}`} 
+                    htmlFor={`zuz${_name}`} /> 
+            </>}
+        </ClassNames>
+        // <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>
+    );
+}
+
+export default Checkbox;

package/src/comps/component.tsx

@@ -0,0 +1,32 @@
+import React, {
+    forwardRef
+} from 'react';
+import styled from '@emotion/styled'
+import { css } from '@emotion/react'
+import { 
+    buildCSS,
+    filterHTMLProps
+} from '../core'
+
+// const CoreBlock = styled.section`display: block;`
+// const buildComponent = (props: any) => Block.withComponent(props.for || `div`)`${buildCSS(props)}`
+
+const Component = forwardRef((props: any, ref: any) => {
+
+    const Tag = props.for;
+    const Block = (
+        typeof props.for == 'string' ?
+        styled[props.for || `div`] : Tag
+    )`${buildCSS(props)}`;
+    // const Block = styled.`${buildCSS(props)}`;
+    // const Block = CoreBlock.withComponent(props.for)`background: red`
+    // console.log(props)
+    // console.log(Styles)
+    
+
+    // return <button>{props.children}</button>
+    return <Block className={props.as || ``} {...filterHTMLProps(props)} />
+
+})
+
+export default Component;

package/src/comps/contextmenu.tsx

@@ -0,0 +1,43 @@
+import {
+    FC,
+    LegacyRef,
+    forwardRef,
+    useRef,
+    SyntheticEvent,
+} from 'react';
+import Box from './box'
+import Button from './button'
+
+const ContextMenu = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+
+    const {
+        as,
+        size,
+        color,
+        hover,
+        pos,
+        items
+    } = props;
+
+    return (
+        <Box 
+            hover={hover || {}}
+            flex
+            fixed
+            top={pos?.y || 0}
+            left={pos?.x || 0}
+            bref={ref}
+            as={`contextmenu-${as}`}
+            ai={`c`}
+            jc={`c`}
+            size={size || 24}
+            color={color || `#111111`}
+        >
+            {items && items.map((m, i) => <Button 
+                key={`cm-${i}-${m.id}`} 
+                onClick={m.on ? m.on : () => {}}>{m.label}</Button>)}
+        </Box>
+    )
+})
+
+export default ContextMenu;

package/src/comps/cover.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Box from './box'
+import Spinner from './spinner'
+import Heading from './heading'
+import PropTypes from 'prop-types'
+
+const Cover = (props) => {
+
+    return (
+        <Box key={`cover-cloud`} abs fill 
+            bgFilter={props.backdrop ? `saturate(${props.backdrop.saturate}%) blur(${props.backdrop.blur}px)` : undefined}
+            zIndex={`2`} 
+            bg={props.bg}>
+            <Box key={`cover-shadow`} abs abc aic jcc flex dir={`cols`} gap={20}>
+                <Spinner key={`cover-spinner`} />
+                {props.label && <Heading key={`cover-label`} size={16} as={`f`} opacity={0.7}>{props.label}</Heading>}
+            </Box>
+        </Box>
+    );
+}
+
+Cover.defaultProps = {
+    bg: `rgba(0,0,0,0.5)`,
+    backdrop: { saturate: 80, blur: 10 },
+    label: null
+}
+
+Cover.propTypes = {
+    bg: PropTypes.string,
+    backdrop: PropTypes.object,
+    label: PropTypes.string,
+}
+
+export default Cover;