@zuzjs/ui 0.5.4 → 0.5.5

package/dist/bin.js

@@ -13,6 +13,7 @@ program
     .option(`-f, --file <char>`);
 program.parse();
 const options = program.opts();
+// extendGlobals()
 const getAllFiles = (dir, extn, files, result, regex) => {
     files = files || readdirSync(dir);
     result = result || [];
@@ -54,6 +55,7 @@ const rebuild = (f) => {
                     }
                     return arr;
                 }, []).join(` `);
+                // 
             }
             if (v2.startsWith(`[`) && v2.endsWith(`]`))
                 v2 = v2.slice(1, -1);
@@ -62,19 +64,29 @@ const rebuild = (f) => {
         if (matches && matches.length > 0) {
             matches.map((m) => {
                 let v2;
+                // m = m.replace(/\s+|\n/gm, ` `)
                 if (type == `as`) {
                     const [x, v1] = m.split(/as\s*=/);
                     v2 = makeV2(v1);
                 }
                 else if (type == `css`) {
                     const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
+                    // console.log(v1)
                     v2 = makeV2(v1.trim());
                 }
+                // console.log(`v2 ->`, `"${v2}"`)
                 list.push(v2);
             });
         }
     };
+    /**
+     * match as={?}
+     */
+    // processMatch(raw.match(/as\s*=\s*\{([^{}]|{([^{}]|{[^{}]*})*})*\}/g), `as`)
     processMatch(raw.match(/as\s*=\s*(?:\{([^{}]|{([^{}]|{[^{}]*})*})*\}|'([^']*)'|"([^"]*)")/g), `as`);
+    /**
+     * match css()
+     */
     processMatch(raw.match(/css\(\s*(?:\[\s*([\s\S]*?)\s*\]|\s*`([\s\S]*?)`)\s*\)/g), `css`);
     return list;
 };
@@ -87,14 +99,21 @@ const rebuildAll = () => {
         if (options.file) {
             const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
             if (r && r.length > 0) {
+                // console.log(r)
                 as.push(cssBuilder.Build([r], true, options.file).sheet);
+                // as.push(r)
             }
         }
         else {
             const mediaQueries = {};
             files.map(f => {
+                // if ( f.endsWith(`header.jsx`) ){
                 const r = rebuild(f);
                 if (r && r.length > 0) {
+                    // as.push(cssBuilder.Build([r], true).sheet)
+                    // as.push( f.endsWith(`header.jsx`) ?
+                    //  `.header{${cssBuilder.Build([r], true).sheet}}`
+                    //  : cssBuilder.Build([r], true).sheet)
                     const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
                     as.push(_built.sheet);
                     Object.keys(_built.mediaQuery).map(mq => {
@@ -105,14 +124,21 @@ const rebuildAll = () => {
                             ..._built.mediaQuery[mq]
                         ];
                     });
+                    // as.push(new CSS().Build([[r]], true).sheet)
                 }
+                // }
+                // as.push(r)
             });
             as.push(cssBuilder.buildMediaQueries(mediaQueries));
         }
+        // console.log(as)
+        // const { sheet } = new CSS().Build(as, true)
+        // 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/accordion.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { BaseProps } from "../types/interfaces";
+export interface AccordionProps {
+    message?: string;
+    title: string | ReactNode | ReactNode[];
+}
+export interface AccordionHandler {
+    open: () => void;
+    close: () => void;
+}
+declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & BaseProps & import("react").RefAttributes<AccordionHandler>>;
+export default Accordion;

package/dist/comps/accordion.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import With from "./base";
+const Icons = {
+    ArrowDown: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M17.919 8.18H6.079c-.96 0-1.44 1.16-.76 1.84l5.18 5.18c.83.83 2.18.83 3.01 0l1.97-1.97 3.21-3.21c.67-.68.19-1.84-.77-1.84z" }) }),
+    ArrowUp: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: _jsx("path", { fill: "#292D32", d: "M18.68 13.978l-3.21-3.21-1.96-1.97a2.13 2.13 0 00-3.01 0l-5.18 5.18c-.68.68-.19 1.84.76 1.84h11.84c.96 0 1.44-1.16.76-1.84z" }) })
+};
+const Accordion = forwardRef((props, ref) => {
+    const { title, message, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    return _jsxs(With, { className: `--accordion flex cols`, ...rest, children: [_jsxs(With, { onClick: (e) => setVisible(!visible), tag: `button`, className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(With, { tag: `h1`, className: `--label flex`, children: title }), _jsx(With, { className: `--arrow flex`, children: visible ? Icons.ArrowUp : Icons.ArrowDown })] }), visible && _jsx(With, { className: `--detail`, children: message })] });
+});
+export default Accordion;

package/dist/comps/animate.d.ts

@@ -1,4 +1,4 @@
-import { animationProps } from "./base";
+import { animationProps } from "../types/interfaces";
 declare const Animate: import("react").ForwardRefExoticComponent<{
     as?: string;
     animate?: animationProps;

package/dist/comps/base.d.ts

@@ -1,16 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
-import { dynamicObject } from "../types";
-import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
-import { Skeleton } from "../types/interfaces";
-export interface animationProps {
-    transition?: TRANSITIONS;
-    from?: dynamicObject;
-    to?: dynamicObject;
-    when?: boolean;
-    duration?: number;
-    delay?: number;
-    curve?: string | TRANSITION_CURVES;
-}
+import { SHIMMER } from "../types/enums";
+import { animationProps, Skeleton } from "../types/interfaces";
 interface BaseProps<T extends ElementType> {
     tag?: T;
     as?: string | string[];
@@ -18,7 +8,8 @@ interface BaseProps<T extends ElementType> {
     className?: string;
     propsToRemove?: string[];
     skeleton?: Skeleton;
+    shimmer?: SHIMMER;
 }
-export type Props<T extends ElementType> = BaseProps<T> & ComponentPropsWithoutRef<T>;
+export type Props<T extends ElementType> = BaseProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>;
 declare const With: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<Element>>;
 export default With;

package/dist/comps/base.js

@@ -45,7 +45,7 @@ const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, sk
     else {
         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
-    const { children, ...restProps } = cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]);
+    const { children, shimmer, ...restProps } = cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]);
     return createElement(Comp, {
         style: {
             ...buildWithStyles(_style),
@@ -56,7 +56,8 @@ const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, sk
         className: [
             className,
             ...cx,
-            skeleton?.enabled ? `--skeleton` : ``
+            skeleton?.enabled ? `--skeleton` : ``,
+            shimmer ? `--shimmer --${shimmer.toLowerCase()}` : ``,
         ].join(' ').trim(),
         children: skeleton?.enabled ? ` `.repeat(6)
             : children,

package/dist/comps/box.d.ts

@@ -1,3 +1,3 @@
-import { BaseProps } from "../types/interfaces";
-declare const Box: import("react").ForwardRefExoticComponent<BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { Props } from "./useBase/base.types";
+declare const Box: import("react").ForwardRefExoticComponent<Props<"div"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/box.js

@@ -1,8 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import With from "./base";
+import useBase from "./useBase";
 const Box = forwardRef((props, ref) => {
-    const { as, ...rest } = props;
-    return _jsx(With, { as: as, ...rest, ref: ref });
+    const { className, style, rest } = useBase(props);
+    return _jsx("div", { ref: ref, className: className, style: style, ...rest });
 });
+// export interface BoxProps extends Props<'div'> {}
+// const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref ) => {
+//     const { as, children, className, ...rest } = props
+//     return <With className={className} as={as} {...rest} ref={ref}>
+//         {children}
+//     </With>
+// });
 export default Box;

package/dist/comps/button.d.ts

@@ -1,8 +1,6 @@
-import { animationProps } from "./base";
-export interface ButtonProps {
-    as?: string;
-    animate?: animationProps;
+import { Props } from "./useBase/base.types";
+export interface ButtonProps extends Props<`button`> {
     icon?: string;
 }
-declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/comps/button.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import With from "./base";
+// import With, { Props } from "./base";
+import useBase from "./useBase";
 const Button = forwardRef((props, ref) => {
-    const { as, icon, ...rest } = props;
-    return _jsxs(With, { tag: `button`, as: as, className: `flex aic ${icon ? `ico-btn` : ``}`.trim(), ...rest, ref: ref, children: [icon && _jsx(With, { className: `icon-${icon}` }), _jsx(With, { tag: `span`, className: `b-label`, children: props.children })] });
+    const { icon, children, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsxs("button", { className: `${className} flex aic ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx("div", { ...{ className: `icon-${icon}` } }), _jsx("span", { ...{ className: `b-label` }, children: children })] });
 });
+// const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref ) => {
+//     const { as, icon, ...rest } = props;
+//     return <With tag={`button`} as={as} className={`flex aic ${icon ? `ico-btn` : ``}`.trim()} {...rest} ref={ref}>
+//         {icon && <With className={`icon-${icon}`} />}
+//         <With tag={`span`} className={`b-label`}>{props.children}</With>
+//     </With>
+// });
 export default Button;

package/dist/comps/checkbox.d.ts

@@ -1,5 +1,5 @@
-import { animationProps } from "./base";
 import { CHECKBOX } from "../types/enums";
+import { animationProps } from "../types/interfaces";
 export interface CheckboxProps {
     as?: string;
     type?: CHECKBOX;

package/dist/comps/checkbox.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
 import { CHECKBOX } from "../types/enums";
+// const CheckBox = forwardRef<HTMLButtonElement, { as?: string, type?: CHECKBOX, animate?: animationProps } & ComponentPropsWithoutRef<`input`>>((props, ref) => {
 const CheckBox = forwardRef((props, ref) => {
     const { as, name, required, type, value, checked: defaultCheck, onChange, ...rest } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
@@ -29,4 +30,22 @@ const CheckBox = forwardRef((props, ref) => {
                 _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,4 +1,4 @@
-import { animationProps } from "./base";
+import { animationProps } from "../types/interfaces";
 export interface ContextMenuItem {
     label: string;
     labelColor?: string;

package/dist/comps/cover.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from "react";
-import { animationProps } from "./base";
 import { SpinnerProps } from "./spinner";
+import { animationProps } from "../types/interfaces";
 export interface CoverProps extends ComponentPropsWithoutRef<`div`> {
     tag?: string;
     message?: string;

package/dist/comps/cover.js

@@ -12,5 +12,20 @@ const Cover = forwardRef((props, ref) => {
         }, as: as, ...rest, children: [_jsx(Spinner, { ...{
                     ...spinner
                 } }), !hideMessage && _jsx(With, { tag: `h1`, className: `label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] }));
+    // return (
+    //     <With 
+    //         className={`zuz-cover flex aic jcc cols abs fill nope nous`}
+    //         ref={ref} 
+    //         style={{
+    //             backgroundColor: color ? !color.startsWith(`#`) ? hexToRgba(color, .9) : color : hexToRgba(color || `var(--cover)`, .9)
+    //         }}    
+    //         as={as}
+    //         {...rest} 
+    //     >
+    //         {<Spinner {...spinner} />}
+    //         {<With tag={`h1`} className={`label`}>{message || `loading`}</With>}
+    //         {/* {message && <With tag={`h1`} className={`label`}>{message}</With>} */}
+    //     </With>
+    // );
 });
 export default Cover;

package/dist/comps/editor.js

@@ -12,6 +12,9 @@ const ComponentEditor = forwardRef((props, ref) => {
     const { title, attrs, element } = props;
     const mounted = useMounted(500);
     const getVariable = (v) => {
+        // console.log(element!.current)
+        // const elm = document.querySelector(element!);
+        // return getComputedStyle(document.querySelector(element)!).getPropertyValue(`--${v}`).trim()
         const a = getComputedStyle(document.querySelector(element)).getPropertyValue(`--${v}`).trim();
         const b = getComputedStyle(document.body).getPropertyValue(`--${v}`).trim();
         const d = getComputedStyle(document.documentElement).getPropertyValue(`--${v}`).trim();
@@ -25,19 +28,23 @@ const ComponentEditor = forwardRef((props, ref) => {
     };
     const rangeSlider = (k, value, min, max, step, unit) => {
         return _jsxs(_Fragment, { children: [_jsx(With, { tag: `input`, type: `range`, defaultValue: value, min: min, max: max, step: step, name: `editor-prop-range-${k}`, onChange: (e) => {
+                        // document.body.style.setProperty(`--${k}`,`${e.currentTarget.value}${unit || ``}`);
                         document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}${unit || ``}`);
                         document.querySelector(`input[name="editor-prop-num-${k}"]`).value = e.currentTarget.value;
                     } }), _jsx(With, { tag: `input`, type: `number`, name: `editor-prop-num-${k}`, defaultValue: value, min: min, max: max, onChange: (e) => {
                         document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}${unit || ``}`);
+                        // document.body.style.setProperty(`--${k}`,`${e.currentTarget.value}${unit || ``}`);
                         document.querySelector(`input[name="editor-prop-range-${k}"]`).value = e.currentTarget.value;
                     } })] });
     };
     const colorPicker = (k, value) => {
         return _jsxs(_Fragment, { children: [_jsx(With, { tag: `input`, type: `color`, defaultValue: expandHex(value.toString()), name: `editor-prop-color-${k}`, onChange: (e) => {
+                        // document.body.style.setProperty(`--${k}`, e.currentTarget.value);
                         document.querySelector(element).style.setProperty(`--${k}`, e.currentTarget.value);
                         document.querySelector(`input[name="editor-prop-num-${k}"]`).value = e.currentTarget.value;
                     } }), _jsx(With, { tag: `input`, name: `editor-prop-num-${k}`, defaultValue: expandHex(value.toString()), onChange: (e) => {
                         document.querySelector(element).style.setProperty(`--${k}`, `${e.currentTarget.value}`);
+                        // document.body.style.setProperty(`--${k}`,`${e.currentTarget.value}px`);
                         document.querySelector(`input[name="editor-prop-color-${k}"]`).value = e.currentTarget.value;
                     } })] });
     };
@@ -67,7 +74,7 @@ const ComponentEditor = forwardRef((props, ref) => {
                 c.push(`--${k}: ${value == `auto` ? type == `range` ? parseFloat(getVariable(k)) : getVariable(k) : value}${unit || ``};`);
             }
         });
-        return c;
+        return c; //.join(`\n`)
     };
     if (!mounted)
         return null;

package/dist/comps/form.d.ts

@@ -1,24 +1,54 @@
-import { animationProps } from "./base";
+import { Props } from "./useBase/base.types";
 import { SpinnerProps } from "./spinner";
 import { dynamicObject } from "../types";
-export interface FormProps {
-    as?: string;
-    animate?: animationProps;
+/**
+ * `FormProps` defines properties for the `Form` component, including action handlers,
+ * spinner, and error handling configuration.
+ */
+export interface FormProps extends Props<`div`> {
+    /** Name of form, will be appended to --form-{name} in className
+     * whitespace will be replaced with dash (-)
+    */
+    name?: string;
+    /** The URL to which the form data is submitted */
     action?: string;
+    /** List of error messages for form validation */
     errors?: string[];
+    /** Spinner properties for loading indicator */
     spinner?: SpinnerProps;
+    /** Additional data to include with form submission */
     withData?: dynamicObject;
+    /** Handler function called on form submission with validated form data */
     onSubmit?: (data: FormData | dynamicObject) => void;
+    /** Callback triggered upon successful form submission */
     onSuccess?: (data: dynamicObject) => void;
+    /** Callback triggered when form submission encounters an error */
     onError?: (error: any) => void;
+    /** Cover properties to display loading or processing message */
     cover?: {
+        /** Background color of the loading cover */
         color?: string;
+        /** Message displayed during loading */
         message?: string;
     };
 }
+/**
+ * Exposes control methods for the Form component, such as setting loading states or hiding errors.
+ */
 export interface FormHandler {
+    /** Sets the loading state of the form */
     setLoading: (mode: boolean) => void;
+    /** Hides any currently displayed error message */
     hideError: () => void;
 }
-declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
+/**
+ * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
+ * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
+ *
+ * The component also provides an interface for controlling loading and error states from a parent component using {@link FormHandler}.
+ *
+ * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
+ * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
+ */
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -1,21 +1,46 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
-import With from "./base";
-import { isEmail, withPost } from "../funs";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import Box from "./box";
+import useBase from "./useBase";
 import Sheet from "./sheet";
-import { FORMVALIDATION, SHEET } from "../types/enums";
 import Cover from "./cover";
+import { FORMVALIDATION, SHEET } from "../types/enums";
+import { isEmail, withPost } from "../funs";
+/**
+ * {@link Form} is a controlled component designed to handle form data submission, validation, and display of loading or error states.
+ * It allows for optional server-side submission through an action endpoint and customizable success/error handling callbacks.
+ *
+ * The component also provides an interface for controlling loading and error states from a parent component using {@link FormHandler}.
+ *
+ * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
+ * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
+ */
 const Form = forwardRef((props, ref) => {
-    const { as, spinner, action, errors, cover, children, withData, onSuccess, onSubmit, onError, ...rest } = props;
+    const { name, cover, spinner, errors, action, children, withData, onSubmit, onError, onSuccess, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
     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) => {
+    const innerRef = useRef(null);
+    /**
+     * Utility function to select multiple DOM elements within the form based on a CSS query.
+     * @param query - CSS selector to match elements inside the form.
+     */
+    const _nodes = useCallback((query) => {
+        if (innerRef.current)
+            return innerRef.current.querySelectorAll(query);
+        return [];
+    }, [innerRef.current]);
+    /**
+     * Validates form fields based on their type and custom attributes.
+     *
+     * @param el - The element to validate.
+     * @returns Whether the element meets the required validation criteria.
+     */
+    const _validate = useCallback((el) => {
         if (el.required) {
+            /**
+             * @internal
+             * Required field validation */
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
@@ -25,6 +50,10 @@ const Form = forwardRef((props, ref) => {
             if (el.value == ``)
                 return false;
         }
+        /**
+         * @internal
+         * Additional validation based on `with` attribute
+         */
         if (el.getAttribute(`with`)) {
             let _with = el.getAttribute(`with`);
             if (_with.includes(`@`)) {
@@ -50,7 +79,7 @@ const Form = forwardRef((props, ref) => {
                     const _el = document.querySelector(`[name=${field.trim()}]`);
                     if (!_el)
                         return false;
-                    console.log(`matching`, _el.name, _el.value, el.name, el.value);
+                    // console.log(`matching`, _el.name, _el.value, el.name, el.value)                    
                     if (_el && _el.value != el.value) {
                         return false;
                     }
@@ -60,8 +89,13 @@ const Form = forwardRef((props, ref) => {
             }
         }
         return true;
-    };
-    const _buildFormData = () => {
+    }, [innerRef.current]);
+    /**
+     * Constructs the form data and validates the fields.
+     *
+     * @returns Form data object along with validation status and error information.
+     */
+    const _buildFormData = useCallback(() => {
         const data = {};
         const payload = {};
         let _error = null;
@@ -93,13 +127,17 @@ const Form = forwardRef((props, ref) => {
             errorMsg: _errorMsg || `Fix errors to continue...`,
             data, payload
         };
-    };
-    const _onSubmit = () => {
+    }, [innerRef.current]);
+    /**
+     * Handler for form submission that validates and processes the form data.
+     */
+    const _onSubmit = useCallback(() => {
         const { error, errorMsg, payload } = _buildFormData();
         if (error) {
             sheet.current.show(errorMsg, 4, SHEET.Error);
         }
         else if (action) {
+            // If `action` is defined, submit the form data to the specified endpoint
             startTransition(async () => {
                 setLoading(true);
                 sheet.current.hide();
@@ -125,18 +163,21 @@ const Form = forwardRef((props, ref) => {
         else {
             onSubmit && onSubmit(payload);
         }
-    };
-    const _init = () => {
+    }, [action, sheet.current, innerRef.current]);
+    /**
+     * Initializes the form by adding click event listeners to submit buttons.
+     */
+    const _init = useCallback(() => {
         const _submit = _nodes(`[type=submit]`);
         if (!_submit || _submit.length == 0) {
-            console.error(`You should add at least 1 button with type=\`SUBMIT\``);
+            console.warn(`You should add at least 1 button with type=\`SUBMIT\``);
         }
         else {
             _submit.forEach(el => {
                 el.addEventListener(`click`, _onSubmit);
             });
         }
-    };
+    }, [innerRef.current]);
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
             if (mod) {
@@ -152,6 +193,11 @@ const Form = forwardRef((props, ref) => {
         }
     }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
+    return _jsxs(Box, { ...{
+            className: `${className} rel --form${name ? `-${name.replace(/\s+/g, `-`)}` : ``}`,
+            style,
+            propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`],
+            ...rest
+        }, ref: innerRef, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

package/dist/comps/heading.js

@@ -7,4 +7,17 @@ const Heading = forwardRef((props, ref) => {
             props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : props.children
             : null });
 });
+// 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,7 +1,6 @@
-import { animationProps } from "./base";
-declare const Icon: import("react").ForwardRefExoticComponent<{
+import { Props } from "./useBase/base.types";
+export interface IconProps extends Props<`div`> {
     name: string;
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+}
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/comps/icon.js

@@ -1,8 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import With from "./base";
+// import With, { Props } from "./base";
+import Box from "./box";
+import useBase from "./useBase";
 const Icon = forwardRef((props, ref) => {
-    const { as, name, ...rest } = props;
-    return _jsx(With, { className: `icon-${name}`, as: as, ...rest, ref: ref });
+    const { name, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx(Box, { ...{
+            className: `${className} icon-${name}`,
+            style,
+            ...rest
+        } });
+    // return <With 
+    //     className={`icon-${name}`}
+    //     as={as} 
+    //     {...rest} 
+    //     ref={ref} />
 });
 export default Icon;

package/dist/comps/image.d.ts

@@ -1,5 +1,5 @@
-import { animationProps } from "./base";
 import React from "react";
+import { animationProps } from "../types/interfaces";
 interface ImageProps {
     width: string | number;
     height: string | number;