@zuzjs/ui 0.3.7 → 0.3.9

package/dist/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/bin.js

@@ -0,0 +1,107 @@
+#!/usr/bin/env node
+import fs, { readdirSync, statSync } from "fs";
+import { program } from "commander";
+import chokidar from 'chokidar';
+import path from "path";
+import CSS from "./funs/css.js";
+import pc from "picocolors";
+program
+    .option(`-d, --debug`)
+    .option(`-v, --version`)
+    .option(`-root, --root <char>`);
+program.parse();
+const options = program.opts();
+const getAllFiles = (dir, extn, files, result, regex) => {
+    files = files || readdirSync(dir);
+    result = result || [];
+    regex = regex || new RegExp(`\\${extn}$`);
+    for (let i = 0; i < files.length; i++) {
+        let file = path.join(dir, files[i]);
+        if (statSync(file).isDirectory()) {
+            try {
+                result = getAllFiles(file, extn, readdirSync(file), result, regex);
+            }
+            catch (error) {
+                continue;
+            }
+        }
+        else {
+            if (regex.test(file)) {
+                result.push(file);
+            }
+        }
+    }
+    return result;
+};
+const rebuild = (f) => {
+    const raw = fs.readFileSync(f, `utf8`);
+    const list = [];
+    const processMatch = (matches, type) => {
+        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);
+                }
+                else if (type == `css`) {
+                    const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
+                    v2 = v1.trim().slice(1, -1);
+                }
+                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`);
+    return list;
+};
+const rebuildAll = () => {
+    console.log(pc.gray(`○ Building Zuz CSS`));
+    const files = getAllFiles(process.cwd(), `.jsx`);
+    if (files.length > 0) {
+        const as = [];
+        files.map(f => {
+            const filter = null;
+            if (filter && f.endsWith(filter)) {
+                const r = rebuild(f);
+                if (r && r.length > 0)
+                    as.push(r);
+            }
+            else {
+                const r = rebuild(f);
+                if (r && r.length > 0)
+                    as.push(r);
+            }
+        });
+        const { sheet } = new CSS().Build(as);
+        // console.log(cache)
+        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+`
+        });
+        console.log(pc.green(`✓ Zuz CSS Generated`));
+    }
+};
+const watcher = chokidar.watch([
+    `${path.resolve(`./`)}/**/*.jsx`
+], {
+    ignored: (p) => p.includes(`/dist`) || p.includes('node_modules'),
+    persistent: true
+});
+watcher.on(`change`, rebuildAll);

package/dist/comps/base.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+interface BaseProps<T extends ElementType> {
+    tag?: T;
+    as?: string;
+    className?: string;
+    propsToRemove?: string[];
+}
+export type Props<T extends ElementType> = BaseProps<T> & ComponentPropsWithoutRef<T>;
+declare const With: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
+export default With;

package/dist/comps/base.js

@@ -0,0 +1,12 @@
+import { createElement, forwardRef } from "react";
+import { css, cleanProps } from "../funs";
+const With = forwardRef(({ tag, as, className, propsToRemove, ...rest }, ref) => {
+    const Comp = tag || 'div';
+    const { cx } = new css().Build(as || []);
+    return createElement(Comp, {
+        className: [className, ...cx].join(' ').trim(),
+        ...cleanProps(rest, propsToRemove || []),
+        ref
+    });
+});
+export default With;

package/dist/comps/box.d.ts

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

package/dist/comps/box.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+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

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

package/dist/comps/button.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+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

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

package/dist/comps/checkbox.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import With from "./base";
+const CheckBox = forwardRef((props, ref) => {
+    const { as, name, required, ...rest } = props;
+    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/cover.d.ts

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

package/dist/comps/cover.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+import Spinner from "./spinner";
+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)
+        }, 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/form.d.ts

@@ -0,0 +1,18 @@
+import { SpinnerProps } from "./spinner";
+import { dynamicObject } from "../types";
+export interface FormProps {
+    as?: string;
+    action?: string;
+    errors?: string[];
+    spinner?: SpinnerProps;
+    withData?: dynamicObject;
+    onSubmit?: (data: FormData | dynamicObject) => void;
+    onSuccess?: (data: dynamicObject) => void;
+    onError?: (error: any) => void;
+    cover?: {
+        color?: string;
+        message?: string;
+    };
+}
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Form;

package/dist/comps/form.js

@@ -0,0 +1,287 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState, useTransition } from "react";
+import With from "./base";
+import { isEmail, withPost } from "../funs";
+import Sheet from "./sheet";
+import { FORMVALIDATION, SHEET } from "../types/enums";
+import Cover from "./cover";
+const Form = forwardRef((props, ref) => {
+    const { as, spinner, action, errors, cover, children, withData, onSuccess, onSubmit, onError, ...rest } = props;
+    const [loading, setLoading] = useState(false);
+    const [isLoading, startTransition] = useTransition();
+    const [sheetType, setSheetType] = useState(SHEET.Default);
+    const sheet = useRef(null);
+    const _ref = useRef(null);
+    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;
+            }
+            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(`[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 = () => {
+        const data = {};
+        const payload = {};
+        let _error = null;
+        let _errorMsg = null;
+        Array.from(_nodes(`[name]`))
+            .forEach((el) => {
+            let valid = true;
+            if (el.required || el.with)
+                valid = _validate(el);
+            data[el.name] = {
+                valid: valid,
+                value: el.value
+            };
+            payload[el.name] = el.value;
+            if (!valid) {
+                if (_error == null && errors) {
+                    _error = el;
+                    _errorMsg = errors[el.name];
+                }
+                el.classList.add(`input-with-error`);
+            }
+            else
+                el.classList.remove(`input-with-error`);
+        });
+        if (_error)
+            _error.focus();
+        return {
+            error: _error != null,
+            errorMsg: _errorMsg || `Fix errors to continue...`,
+            data, payload
+        };
+    };
+    const _onSubmit = () => {
+        const { error, errorMsg, payload } = _buildFormData();
+        if (error) {
+            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();
+                withPost(action, { ...payload, ...(withData || {}) })
+                    .then(_resp => {
+                    const resp = _resp;
+                    setLoading(false);
+                    if (onSuccess)
+                        onSuccess(resp);
+                    else
+                        sheet.current.hide();
+                    sheet.current.show(resp.message || `Redirecting..`, 4, SHEET.Success);
+                })
+                    .catch(err => {
+                    setLoading(false);
+                    if (onError)
+                        onError(err);
+                    else
+                        sheet.current.show(err.message || `We cannot process your request at this time.`, 4, SHEET.Error);
+                });
+            });
+        }
+        else {
+            onSubmit && onSubmit(payload);
+        }
+    };
+    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.addEventListener(`click`, _onSubmit);
+            });
+        }
+    };
+    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] });
+});
+// 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

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

package/dist/comps/heading.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+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

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

package/dist/comps/icon.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+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/input.d.ts

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

package/dist/comps/input.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+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;