@zuzjs/ui 0.4.0 → 0.4.2

package/dist/bin.js

@@ -5,6 +5,7 @@ import chokidar from 'chokidar';
 import path from "path";
 import CSS from "./funs/css.js";
 import pc from "picocolors";
+import { FIELNAME_KEY } from "./funs/index.js";
 program
     .option(`-d, --debug`)
     .option(`-v, --version`)
@@ -36,61 +37,71 @@ const getAllFiles = (dir, extn, files, result, regex) => {
 };
 const rebuild = (f) => {
     const raw = fs.readFileSync(f, `utf8`);
-    const list = [];
+    let _filePath = path.relative(process.cwd(), f);
+    if (!_filePath.startsWith(`/`))
+        _filePath = `/${_filePath}`;
+    const list = [`${FIELNAME_KEY}:${_filePath}`];
     const processMatch = (matches, type) => {
+        const makeV2 = (v1) => {
+            let v2 = v1
+                .trim()
+                .slice(1, -1);
+            if (v2.includes(`\n`)) {
+                v2 = v2.split(`\n`).reduce((arr, v) => {
+                    if (v.trim() != ``) {
+                        v = v.trim().endsWith(`,`) ? v.slice(0, -1) : v;
+                        arr.push(v.trim());
+                    }
+                    return arr;
+                }, []).join(` `);
+            }
+            if (v2.startsWith(`[`) && v2.endsWith(`]`))
+                v2 = v2.slice(1, -1);
+            return v2.trim();
+        };
         if (matches && matches.length > 0) {
             matches.map((m) => {
                 let v2;
                 if (type == `as`) {
                     const [x, v1] = m.split(/as\s*=/);
-                    v2 = v1.trim().slice(1, -1);
+                    v2 = makeV2(v1);
                 }
                 else if (type == `css`) {
                     const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
-                    v2 = v1.trim().slice(1, -1);
+                    v2 = makeV2(v1.trim());
                 }
                 list.push(v2);
-                // console.log(type, v2)
-                // const _ = v2!.match(/\w+:\$?\w+|\$?\w+/g)
-                // if(_){
-                //     _.map((n:string) => !list.includes(n) && list.push(n))
-                // }
             });
         }
     };
-    /**
-     * match as={?}
-     */
-    processMatch(raw.match(/as\s*=\s*\{([^{}]|{([^{}]|{[^{}]*})*})*\}/g), `as`);
-    /**
-     * match css()
-     */
-    processMatch(raw.match(/css\(\s*`([^`]*?([$&]{[^}]*})?[^`]*)*`\s*\)/g), `css`);
+    processMatch(raw.match(/as\s*=\s*(?:\{([^{}]|{([^{}]|{[^{}]*})*})*\}|'([^']*)'|"([^"]*)")/g), `as`);
+    processMatch(raw.match(/css\(\s*(?:\[\s*([\s\S]*?)\s*\]|\s*`([\s\S]*?)`)\s*\)/g), `css`);
     return list;
 };
 const rebuildAll = () => {
     console.log(pc.gray(`○ Building Zuz CSS`));
+    const cssBuilder = new CSS();
     const files = getAllFiles(process.cwd(), `.jsx`);
     if (files.length > 0) {
         const as = [];
         if (options.file) {
             const r = rebuild(files.filter(f => f.endsWith(options.file))[0]);
-            if (r && r.length > 0)
-                as.push(r);
+            if (r && r.length > 0) {
+                as.push(cssBuilder.Build([r], true).sheet);
+            }
         }
         else {
             files.map(f => {
                 const r = rebuild(f);
-                if (r && r.length > 0)
-                    as.push(r);
+                if (r && r.length > 0) {
+                    as.push(cssBuilder.Build([r], true).sheet);
+                }
             });
         }
-        const { sheet } = new CSS().Build(as);
-        // console.log(cache)
+        const sheet = as.join(`\n`);
         if (!fs.existsSync(path.join(process.cwd(), `src`, `app`, `css`))) {
             fs.mkdirSync(path.join(process.cwd(), `src`, `app`, `css`));
         }
-        // console.log(sheet)
         fs.writeFileSync(path.join(process.cwd(), `src`, `app`, `css`, `zuz.scss`), sheet, {
             encoding: `utf8`,
             flag: `w+`

package/dist/comps/base.d.ts

@@ -1,9 +1,19 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
+import { dynamicObject } from "../types";
+export interface animationProps {
+    from?: dynamicObject;
+    to?: dynamicObject;
+    when?: boolean;
+    duration?: number;
+    delay?: number;
+    curve?: string;
+}
 interface BaseProps<T extends ElementType> {
     tag?: T;
-    as?: string;
+    as?: string | string[];
     className?: string;
     propsToRemove?: string[];
+    animate?: animationProps;
 }
 export type Props<T extends ElementType> = BaseProps<T> & ComponentPropsWithoutRef<T>;
 declare const With: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<Element>>;

package/dist/comps/base.js

@@ -1,10 +1,30 @@
 import { createElement, forwardRef } from "react";
 import { css, cleanProps } from "../funs";
-const With = forwardRef(({ tag, as, className, propsToRemove, ...rest }, ref) => {
+import { buildWithStyles, getAnimationCurve } from "../funs/css";
+const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ...rest }, ref) => {
     const Comp = tag || 'div';
-    const { cx } = css().Build(as || []);
-    // console.log(cx)
+    let cx = [];
+    if (as) {
+        cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
+    }
+    const { from, to, when, duration, delay, curve } = animate || {};
+    let _style = {};
+    const _transition = from && to ? { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` } : {};
+    if (undefined === when) {
+        _style = { ...from, ...to };
+    }
+    else if (true === when) {
+        _style = { ...(to || {}) };
+    }
+    else {
+        _style = from || {};
+    }
     return createElement(Comp, {
+        style: {
+            ...buildWithStyles(_style),
+            ..._transition,
+            ...style
+        },
         className: [className, ...cx].join(' ').trim(),
         ...cleanProps(rest, propsToRemove || []),
         ref

package/dist/comps/box.d.ts

@@ -1,4 +1,6 @@
+import { animationProps } from "./base";
 declare const Box: import("react").ForwardRefExoticComponent<{
     as?: string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/box.js

@@ -5,11 +5,4 @@ const Box = forwardRef((props, ref) => {
     const { as, ...rest } = props;
     return _jsx(With, { as: as, ...rest, ref: ref });
 });
-// const Box = ( props : UIProps<HTMLDivElement> ) => {
-// const { cx } = css.Build(props.as)
-// return <div 
-//     ref={props.ref}
-//     className={cx.join(` `)}
-//     {...(cleanProps(props) as UIProps<HTMLDivElement>)}>{props.children}</div>
-// }
 export default Box;

package/dist/comps/button.d.ts

@@ -1,4 +1,6 @@
+import { animationProps } from "./base";
 declare const Button: import("react").ForwardRefExoticComponent<{
     as?: string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/comps/button.js

@@ -5,15 +5,4 @@ const Button = forwardRef((props, ref) => {
     const { as, ...rest } = props;
     return _jsx(With, { tag: `button`, as: as, ...rest, ref: ref });
 });
-// import { Ref } from "react";
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const Button = ( props: UIProps<HTMLButtonElement> ) => {
-//     const { as, ref, children } = props
-//     const { cx } = css.Build(as)
-//     return <button
-//         ref={ref}
-//         className={cx.join(` `)}
-//         {...(cleanProps(props) as UIProps<HTMLButtonElement>)}>{children}</button>
-// }
 export default Button;

package/dist/comps/checkbox.d.ts

@@ -1,4 +1,6 @@
+import { animationProps } from "./base";
 declare const CheckBox: import("react").ForwardRefExoticComponent<{
     as?: string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 export default CheckBox;

package/dist/comps/checkbox.js

@@ -7,22 +7,4 @@ const CheckBox = forwardRef((props, ref) => {
     const [checked, setChecked] = useState(props.checked || false);
     return _jsx(With, { tag: `label`, className: `zuz-checkbox${checked ? ` is-checked` : ``} rel`, as: as, ...rest, children: _jsx(With, { tag: `input`, ref: ref, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => setChecked(e.target.checked) }) });
 });
-// import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref, useState } from "react";
-// import { cleanProps, css } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const CheckBox = ( props : UIProps<HTMLInputElement> ) => {
-//     const { cx } = css.Build(props.as)
-//     const [ checked, setChecked ] = useState(props.checked || false)
-//     return <label { ...({
-//         className: `zuz-checkbox${checked ? ` is-checked` : ``} rel${cx.length > 0 ? ` ` + cx.join(` `) : ``}`
-//     }) as UIProps<HTMLLabelElement>}>
-//         <input type='checkbox' 
-//             ref={props.ref}
-//             onChange={e => {
-//                 setChecked(e.target.checked)
-//             }}
-//             className={`abs`}
-//             {...(cleanProps(props) as UIProps<HTMLInputElement>)} />
-//     </label>
-// }
 export default CheckBox;

package/dist/comps/contextmenu.d.ts

@@ -1,10 +1,15 @@
+import { animationProps } from "./base";
 export interface ContextMenuItem {
     label: string;
+    labelColor?: string;
     icon?: string;
-    action: () => void;
+    iconColor?: string;
+    className?: string;
+    onSelect: () => void;
 }
 declare const ContextMenu: import("react").ForwardRefExoticComponent<{
     as?: string;
     items: ContextMenuItem[];
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default ContextMenu;

package/dist/comps/contextmenu.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import With from "./base";
 const ContextMenu = forwardRef((props, ref) => {
     const { as, items, ...rest } = props;
-    return _jsx(With, { as: as, ...rest, ref: ref });
+    return _jsx(With, { as: as, className: `zuz-context-menu abs flex cols`, ...rest, ref: ref, children: items.map((item, index) => item.label == `-` ? _jsx(With, { as: `context-line` }, `${index}-line`) :
+            _jsxs(With, { onClick: item.onSelect, as: `button`, className: `context-menu-item flex aic ${item.className || ``}`.trim(), children: [_jsx(With, { as: `div`, className: `ico icon-${item.icon}`.trim(), style: item.iconColor ? { color: item.iconColor } : {} }), _jsx(With, { as: `h1`, className: `flex aic`, style: item.labelColor ? { color: item.labelColor } : {}, children: item.label })] }, `item-${item.label.replace(/\s/g, `-`)}-${index}`)) });
 });
 export default ContextMenu;

package/dist/comps/cover.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from "react";
+import { animationProps } from "./base";
 import { SpinnerProps } from "./spinner";
 export interface CoverProps extends ComponentPropsWithoutRef<`div`> {
     tag?: string;
@@ -6,6 +7,7 @@ export interface CoverProps extends ComponentPropsWithoutRef<`div`> {
     spinner?: SpinnerProps;
     color?: string;
     as?: string;
+    animate?: animationProps;
 }
 declare const Cover: import("react").ForwardRefExoticComponent<CoverProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Cover;

package/dist/comps/cover.js

@@ -6,31 +6,7 @@ import { hexToRgba } from "../funs";
 const Cover = forwardRef((props, ref) => {
     const { spinner, message, color, as, ...rest } = props;
     return (_jsxs(With, { className: `zuz-cover flex aic jcc cols abs fill`, ref: ref, style: {
-            backgroundColor: hexToRgba(color || `#ffffff`, .9)
+            backgroundColor: color ? !color.startsWith(`#`) ? hexToRgba(color, .9) : color : hexToRgba(color || `#ffffff`, .9)
         }, as: as, ...rest, children: [_jsx(Spinner, { ...spinner }), _jsx(With, { tag: `h1`, className: `label`, children: message || `loading` })] }));
 });
-// import { ReactNode } from "react";
-// import { css, cleanProps, hexToRgba } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// import Spinner, { SpinnerProps } from "./spinner";
-// import Heading from "./heading";
-// export interface CoverProps extends UIProps<HTMLDivElement> {
-//     spinner?: SpinnerProps
-// }
-// const Cover = ( props : CoverProps ) => {
-//     const { cx } = css.Build(props.as)
-//     return <div 
-//         ref={props.ref}
-//         style={{
-//             backgroundColor: hexToRgba(props.color || `#ffffff`, .9)
-//         }}
-//         className={`zuz-cover flex aic jcc abs fill ${cx.join(` `)}`.trim()}
-//         {...(cleanProps(props) as UIProps<HTMLDivElement>)}>
-//             {<Spinner {...( props.spinner || {} as SpinnerProps) } />}
-//             {/* <span></span> */}
-//             {/* {<Heading>{props.message}</Heading>} */}
-//             {/* {props.message ? <Heading>{props.message}</Heading> : null} */}
-//             {/* { ...({} as HTMLHeadingElement) } */}
-//         </div>
-// }
 export default Cover;

package/dist/comps/dialog.js

@@ -0,0 +1 @@
+"use strict";

package/dist/comps/form.d.ts

@@ -1,7 +1,9 @@
+import { animationProps } from "./base";
 import { SpinnerProps } from "./spinner";
 import { dynamicObject } from "../types";
 export interface FormProps {
     as?: string;
+    animate?: animationProps;
     action?: string;
     errors?: string[];
     spinner?: SpinnerProps;
@@ -14,5 +16,8 @@ export interface FormProps {
         message?: string;
     };
 }
-declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface FormHandler {
+    setLoading: (mode: boolean) => void;
+}
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState, useTransition } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
 import With from "./base";
 import { isEmail, withPost } from "../funs";
 import Sheet from "./sheet";
@@ -16,7 +16,6 @@ const Form = forwardRef((props, ref) => {
     const _nodes = (query) => _ref.current.querySelectorAll(query);
     const _validate = (el) => {
         if (el.required) {
-            // console.log(el.type, el.checked)
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
@@ -98,10 +97,6 @@ const Form = forwardRef((props, ref) => {
             sheet.current.show(errorMsg, 4, SHEET.Error);
         }
         else if (action) {
-            /**
-             * We have action so
-             * submit to rest api manually
-             */
             startTransition(async () => {
                 setLoading(true);
                 sheet.current.hide();
@@ -139,149 +134,15 @@ const Form = forwardRef((props, ref) => {
             });
         }
     };
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            setLoading(mod);
+        },
+        showError(errorMsg) {
+            sheet.current.show(errorMsg, 4, SHEET.Error);
+        }
+    }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover.message || `working`, ...{ spinner, color: cover.color || `#ffffff` } }), children] });
+    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
-// import { RefObject, useEffect, useRef, useState } from "react";
-// import { css, cleanProps, isEmail } from "../funs";
-// import { dynamicObject, FormInputs } from "../types";
-// import { UIProps } from "../types/interfaces";
-// import Cover, { CoverProps } from "./cover";
-// import { SpinnerProps } from "./spinner";
-// import { FORMVALIDATION, SHEET } from "../types/enums";
-// import Sheet, { SheetHandler, SheetProps } from "./sheet";
-// const Form = ( props : UIProps<HTMLDivElement> ) => {
-//     const { as, ref, errors, at, cover, spinner, onSubmit, onSuccess, onError, children } = props
-//     const { cx } = css.Build(as)
-//     const [ loading, setLoading ] = useState(false)
-//     const [ sheetType, setSheetType ] = useState(SHEET.Default)
-//     const sheet = useRef<SheetHandler>(null)
-//     const _ref = useRef(ref || null) 
-//     const _nodes = ( query: string ) => (_ref as unknown as RefObject<HTMLDivElement>).current.querySelectorAll(query)
-//     const _init = () => {
-//         const _submit = _nodes(`[type=submit]`)
-//         if ( !_submit || _submit.length == 0 ) {
-//             console.error(`You should add at least 1 button with type=\`SUBMIT\``)
-//         }
-//         else {
-//             _submit.forEach(el => {
-//                 (el as HTMLButtonElement).addEventListener(`click`, _onSubmit)
-//             })
-//         }
-//     }
-//     const _validate = ( el: any ) : boolean => {
-//         if ( el.required ){
-//             if ( el.type == `checkbox` && el.checked == false ){
-//                 return false
-//             }
-//             else if ( el.value == `` )
-//                 return false     
-//         }
-//         if ( el.getAttribute(`with`) ){
-//             let _with = el.getAttribute(`with`)
-//             if ( _with.includes(`@`) ){
-//                 _with = _with.split(`@`)[0]
-//                 if ( _with == `match` ){
-//                     _with = FORMVALIDATION.MatchField
-//                 }
-//             }
-//             switch ( _with.toUpperCase() ){
-//                 case FORMVALIDATION.Email:
-//                     return isEmail(el.value)
-//                     break;
-//                 case FORMVALIDATION.Uri:
-//                     console.log(`Add FORMVALIDATION.Uri`)
-//                     return false
-//                     break;
-//                 case FORMVALIDATION.Password:
-//                     console.log(`Add FORMVALIDATION.Password`)
-//                     return false
-//                     break;
-//                 case FORMVALIDATION.MatchField:
-//                     const [ __, field ] = el.getAttribute(`with`).split(`@`)
-//                     const _el = document.querySelector<FormInputs>(`[name=${field.trim()}]`)
-//                     if ( !_el ) return false
-//                     console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
-//                     if ( _el && _el.value != el.value ){
-//                         return false
-//                     }
-//                     break;
-//                 default:
-//                     return true
-//             }
-//         }
-//         return true;
-//     }
-//     const _buildFormData = (  ) : {
-//         error: boolean,
-//         errorMsg: string,
-//         data: FormData | dynamicObject
-//     } => {
-//         const data : dynamicObject = {}
-//         let _error: HTMLElement | null = null
-//         let _errorMsg: HTMLElement | string | null = null
-//         Array.from(_nodes(`[name]`))
-//             .forEach((el : any) => {
-//                 let valid = true
-//                 if ( el.required || el.with )
-//                     valid = _validate(el)
-//                 data[el.name] = {
-//                     valid: valid,
-//                     value: el.value
-//                 }
-//                 if ( !valid ){
-//                     if ( _error == null ){
-//                         _error = el
-//                         _errorMsg = errors[el.name]
-//                     }
-//                     el.classList.add(`input-with-error`)
-//                 }else
-//                     el.classList.remove(`input-with-error`)            
-//             })
-//         if ( _error )
-//             (_error as HTMLElement).focus()
-//         return {
-//             error: _error != null,
-//             errorMsg: _errorMsg || `Fix errors to continue...`,
-//             data
-//         }
-//     }
-//     const _onSubmit = ( ) => {
-//         const data = _buildFormData()
-//         if ( data.error ){
-//             sheet.current!.show(data.errorMsg, 4, SHEET.Error)
-//         }
-//         else{
-//             setLoading(true)
-//         }
-//         // if ( props.onSubmit ) {
-//         //     // if ( data ){
-//         //     //     if ( props.onPost )
-//         //     //         props.onPost( data )
-//         //     //     else
-//         //     //         props.onGet! ( data )
-//         //     // }
-//         // }
-//         // else {
-//         //     console.warn(`onSubmit missing for this form.`)
-//         // }
-//     }
-//     useEffect(() => {
-//         _init()
-//     }, [])
-//     return <div 
-//         ref={_ref as unknown as RefObject<HTMLDivElement>}
-//         className={`rel ${cx.join(` `)}`.trim()}
-//         {...(cleanProps(props, [`withData`, `at`, `onSubmit`, `onSuccess`, `onError`]) as UIProps<HTMLDivElement>)}>
-//             {/**
-//              * Sheet
-//              */}
-//             <Sheet ref={sheet} />
-//             {/**
-//              * Cover Loader
-//              */}
-//             { loading && <Cover {...{ spinner, color: cover || `#ffffff` } as CoverProps} /> }
-//             {children}
-//         </div>
-// }
 export default Form;

package/dist/comps/heading.d.ts

@@ -1,7 +1,9 @@
 import { ReactNode } from "react";
+import { animationProps } from "./base";
 declare const Heading: import("react").ForwardRefExoticComponent<{
     as?: string;
     h?: number | string;
     html?: ReactNode | string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Heading;

package/dist/comps/heading.js

@@ -5,17 +5,4 @@ const Heading = forwardRef((props, ref) => {
     const { as, h, html, children, ...rest } = props;
     return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : children });
 });
-// import { Ref } from "react"
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const Heading = ( props: UIProps<HTMLHeadingElement> ) => {
-//     const { children, ref, h, html } = props
-//     let Tag : string = `h${h || 1}`;
-//     const HeadingTag = Tag as `h1` | `h2` | `h3` | `h4` | `h5` | `h6`
-//     const { cx } = css.Build(props.as)
-//     return <HeadingTag 
-//         ref={ref} 
-//         className={cx.join(` `)}
-//         {...(cleanProps(props) as UIProps<HTMLHeadingElement>)}>{props.html ? <span { ...({dangerouslySetInnerHTML:{ __html: html }}) as UIProps<HTMLSpanElement>} />  : children}</HeadingTag>
-// }
 export default Heading;

package/dist/comps/icon.d.ts

@@ -1,5 +1,7 @@
+import { animationProps } from "./base";
 declare const Icon: import("react").ForwardRefExoticComponent<{
     name: string;
     as?: string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/comps/icon.js

@@ -5,14 +5,4 @@ const Icon = forwardRef((props, ref) => {
     const { as, name, ...rest } = props;
     return _jsx(With, { className: `icon-${name}`, as: as, ...rest, ref: ref });
 });
-// import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from "react";
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// const Icon = ( props : UIProps<HTMLDivElement> ) => {
-//     const { cx } = css.Build(props.as)
-//     return <div 
-//         ref={props.ref}
-//         className={`icon-${props.name}${cx.length > 0 ? ` ` + cx.join(` `) : ``}`}
-//         {...(cleanProps(props) as UIProps<HTMLDivElement>)}>{props.children}</div>
-// }
 export default Icon;

package/dist/comps/image.d.ts

@@ -0,0 +1,13 @@
+import { animationProps } from "./base";
+import React from "react";
+interface ImageProps {
+    width: string | number;
+    height: string | number;
+    as?: string;
+    animate?: animationProps;
+    src: string;
+    alt: string;
+    crossover?: boolean;
+}
+declare const Image: React.ForwardRefExoticComponent<ImageProps & Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Image;

package/dist/comps/image.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+const Image = forwardRef((props, ref) => {
+    const { as, width, height, ...rest } = props;
+    return _jsx(With, { tag: `img`, as: as, ...rest, ref: ref });
+});
+export default Image;

package/dist/comps/input.d.ts

@@ -1,6 +1,8 @@
+import { animationProps } from "./base";
 import { FORMVALIDATION } from "../types/enums";
 declare const Input: import("react").ForwardRefExoticComponent<{
     required?: FORMVALIDATION;
     as?: string;
+    animate?: animationProps;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Input;

package/dist/comps/input.js

@@ -5,19 +5,4 @@ const Input = forwardRef((props, ref) => {
     const { as, ...rest } = props;
     return _jsx(With, { tag: `input`, as: as, ...rest, ref: ref });
 });
-// import { DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref } from "react";
-// import { css, cleanProps } from "../funs";
-// import { UIProps } from "../types/interfaces";
-// import { FORMVALIDATION } from "../types/enums";
-// export interface InputProps extends UIProps<HTMLInputElement> {
-//     required?: FORMVALIDATION
-// }
-// const Input = ( props : InputProps ) => {
-//     const { cx } = css.Build(props.as)
-//     // console.log(`inputing...`)
-//     return <input 
-//         ref={props.ref}
-//         className={cx.join(` `)}
-//         {...(cleanProps(props) as UIProps<HTMLInputElement>)} />
-// }
 export default Input;