@zuzjs/ui 0.2.4 → 0.2.5

package/README.md

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

package/dist/index.js

@@ -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, 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) {
@@ -1349,4 +1423,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, 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.5",
   "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;

package/src/comps/form.tsx

@@ -0,0 +1,89 @@
+import {
+    Ref,
+    LegacyRef,
+    forwardRef,
+    useState,
+    createElement,
+    useEffect,
+    useImperativeHandle
+} from 'react';
+import PropTypes from 'prop-types'
+import Box from './box'
+import Cover from './cover'
+import { addProps } from '../core'
+import useDispatch from '../hooks/useDispatch'
+import useStore from '../hooks/useStore'
+import { STORE_FORM_KEY, STORE_DEFAUTLS } from '../context/AppProvider'
+import { nanoid } from 'nanoid'
+import {
+    ADD_FORM,
+    UPDATE_FORM_FIELD
+} from '../actions'
+
+const Form = forwardRef((props : { [ key: string ] : any }, ref : Ref<any>) => {
+
+    const { 
+        name, 
+        children,
+        onSubmit,
+        cover,
+        debug
+    } = props;
+    
+    const [_html, setHTML] = useState(null);
+    const [_loading, setLoading] = useState(debug?.loading || false);
+    const dispatch = useDispatch(STORE_FORM_KEY)
+    const { forms } = useStore(state => state[STORE_FORM_KEY], false)
+
+    const buildFields = () => {
+        return addProps(children, { form : name, touched: undefined, loading: undefined, onSubmit: onSubmit ? onSubmit : () => console.log(`onSubmit Missing`) })
+    }
+
+    const update = (e : object) => Object.keys(e).map(k => {
+        dispatch( UPDATE_FORM_FIELD( name || 'orphan', k, e[k], forms ) )
+        if(k == 'loading') setLoading(e[k])
+    }) 
+
+    const get = (k : string) => forms[name][k] || null
+
+    useImperativeHandle(ref, () => ({
+        update,
+        get 
+    }))
+
+    useEffect(() => {
+        let f = buildFields();
+        setHTML(f.children);
+        if(!forms[name]){
+            dispatch(ADD_FORM(name, f.fields, forms))
+        }
+    }, [children, forms[name]?.loading])
+
+    return createElement(
+        Box,
+        {
+            rel: true,
+            ...props,
+            as: name
+        },
+        [
+            _loading? <Cover key={`form-${name}-cover`} backdrop={cover?.filter || { saturate: 80, blur: 10 }} bg={cover?.bg || `rgba(0,0,0,0.5)`} /> : null,
+            _html
+        ]
+    )    
+
+})
+
+Form.defaultProps = {
+    name: 'form1',
+    onSubmit: () => { console.log(`onSubmit not provided`) }
+}
+
+Form.propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+    onSubmit: PropTypes.func.isRequired
+}
+
+
+export default Form

package/src/comps/heading.tsx

@@ -0,0 +1,31 @@
+import {
+  FC,
+  LegacyRef,
+  forwardRef,
+  HTMLAttributes
+} from 'react';
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+
+const Heading = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+
+  const {
+      children,
+      as,
+      h
+  } = props;
+
+  let Tag : string = `h${h || 1}`;
+  const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
+  
+  return (
+      <ClassNames>
+          {({ css, cx }) => <HeadingTag
+              className={`${as ? `${as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+              ref={ref} 
+              >{props.html ? <span dangerouslySetInnerHTML={{ __html: props.html }} /> : children}</HeadingTag>}
+      </ClassNames>
+  )
+})
+
+export default Heading;

package/src/comps/icon.tsx

@@ -0,0 +1,36 @@
+import {
+    FC,
+    LegacyRef,
+    forwardRef,
+    useRef,
+    SyntheticEvent,
+} from 'react';
+import Box from './box'
+
+const Icon = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLHeadingElement>) => {
+
+    const {
+        as,
+        path,
+        size,
+        color,
+        hover
+    } = props;
+
+    return (
+        <Box 
+            hover={hover || {}}
+            flex
+            bref={ref}
+            as={`icon-${as}`}
+            ai={`c`}
+            jc={`c`}
+            size={size || 24}
+            color={color || `#111111`}
+        >
+            {path && Array(path).fill(undefined).map((p : any, i : any) => <span key={`ico-${as}-${i}`} className={`path${i+1}`} />)}
+        </Box>
+    )
+})
+
+export default Icon;

package/src/comps/image.tsx

@@ -0,0 +1,26 @@
+import {
+    forwardRef,
+    LegacyRef
+} from 'react'
+import { ClassNames } from '@emotion/react'
+import { buildCSS } from '../core'
+import useImage from '../hooks/useImage'
+import Box from './box'
+
+const Image = forwardRef((props : { [ key: string ] : any }, ref : LegacyRef<HTMLImageElement>) => {
+
+    const [photo, status] = useImage(props.src, 'anonymous', 'origin');
+    
+    return (
+        <ClassNames>
+            {({ css, cx }) => <picture className={cx(css`${buildCSS({ flex: true })}`)}>
+                {status == 'loading' && <Box className={`${props.as ? `${props.as} ` : ``}${cx(css`background: #eee;${buildCSS(props)}`)}`} />}
+                {status == 'loaded' && <img src={props.src}
+                className={`${props.as ? `${props.as} ` : ``}${cx(css`${buildCSS(props)}`)}`} 
+                ref={ref} />}
+            </picture>}
+        </ClassNames>
+    )
+})
+
+export default Image;