@zuzjs/ui 0.5.3 → 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;
 };
@@ -85,17 +97,24 @@ const rebuildAll = () => {
     if (files.length > 0) {
         const as = [];
         if (options.file) {
-            const r = rebuild(files.filter(f => f.endsWith(options.file))[0]);
+            const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
             if (r && r.length > 0) {
-                as.push(cssBuilder.Build([r], true).sheet);
+                // 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) {
-                    const _built = cssBuilder.Build([r], true);
+                    // 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 => {
                         if (!mediaQueries[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/alert.d.ts

@@ -0,0 +1,15 @@
+import { BaseProps } from "../types/interfaces";
+import { ALERT } from "../types/enums";
+export interface AlertProps {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+}
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & BaseProps & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/comps/alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ALERT } from "../types/enums";
+import With from "./base";
+const Icons = {
+    [ALERT.Info]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M21.56 10.738l-1.35-1.58c-.25-.3-.46-.86-.46-1.26v-1.7c0-1.06-.87-1.93-1.93-1.93h-1.7c-.4 0-.97-.21-1.27-.46l-1.58-1.35c-.69-.59-1.82-.59-2.51 0l-1.6 1.35c-.3.25-.86.46-1.26.46H6.17c-1.06 0-1.93.87-1.93 1.93v1.7c0 .39-.2.95-.45 1.25l-1.35 1.59c-.58.7-.58 1.82 0 2.5l1.35 1.59c.25.29.45.86.45 1.25v1.71c0 1.06.87 1.93 1.93 1.93h1.74c.39 0 .96.21 1.26.46l1.58 1.35c.69.59 1.82.59 2.51 0l1.58-1.35c.3-.25.86-.46 1.26-.46h1.7c1.06 0 1.93-.87 1.93-1.93v-1.7c0-.4.21-.96.46-1.26l1.35-1.58c.61-.68.61-1.81.02-2.51zm-10.31-2.61c0-.41.34-.75.75-.75s.75.34.75.75v4.83c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-4.83zm.75 8.74c-.55 0-1-.45-1-1s.44-1 1-1c.55 0 1 .45 1 1s-.44 1-1 1z" }) }),
+    [ALERT.Warning]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M19.51 5.85l-5.94-3.43c-.97-.56-2.17-.56-3.15 0L4.49 5.85a3.15 3.15 0 00-1.57 2.73v6.84c0 1.12.6 2.16 1.57 2.73l5.94 3.43c.97.56 2.17.56 3.15 0l5.94-3.43a3.15 3.15 0 001.57-2.73V8.58a3.192 3.192 0 00-1.58-2.73zm-8.26 1.9c0-.41.34-.75.75-.75s.75.34.75.75V13c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.75zm1.67 8.88c-.05.12-.12.23-.21.33a.99.99 0 01-1.09.21c-.13-.05-.23-.12-.33-.21-.09-.1-.16-.21-.22-.33a.986.986 0 01-.07-.38c0-.26.1-.52.29-.71.1-.09.2-.16.33-.21.37-.16.81-.07 1.09.21.09.1.16.2.21.33.05.12.08.25.08.38s-.03.26-.08.38z" }) }),
+    [ALERT.Error]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+    [ALERT.Success]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })
+};
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...rest } = props;
+    return _jsxs(With, { className: `--alert --${(type || ALERT.Info).toLowerCase()} flex aic`, ...rest, children: [_jsx(With, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && Icons[type || ALERT.Info] }), _jsxs(With, { className: `--meta flex cols`, tag: `h1`, children: [_jsx(With, { className: `--title ${message ? `--tm` : ``}`, tag: `h1`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(With, { className: `--message`, tag: `h2`, children: message })] })] });
+});
+export default Alert;

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/avatar.d.ts

@@ -0,0 +1,13 @@
+import { BaseProps } from "../types/interfaces";
+import { AVATAR } from "../types/enums";
+export interface AvatarProps {
+    type?: AVATAR;
+    size?: number;
+    src: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+}
+export interface AvatarHandler {
+}
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & BaseProps & import("react").RefAttributes<AvatarHandler>>;
+export default Avatar;

package/dist/comps/avatar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AVATAR } from "../types/enums";
+import With from "./base";
+import { useImage } from "../hooks";
+const Avatar = forwardRef((props, ref) => {
+    const { src, size, type, crossOrigin, referrerPolicy, ...rest } = props;
+    const [img, imgStatus, imgError] = useImage(src, crossOrigin, referrerPolicy);
+    return _jsx(With, { tag: `img`, src: img, style: size ? { width: size, height: size } : {}, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, className: `--avatar --${(type || AVATAR.Circle).toLowerCase()}`, ...rest });
+});
+export default Avatar;

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/drawer.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
-import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { bindKey } from "../funs";
 const Drawer = forwardRef((props, ref) => {
     const { as, from, speed, children, prerender, ...rest } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
@@ -11,6 +12,9 @@ const Drawer = forwardRef((props, ref) => {
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        bindKey(KeyCode.Escape, () => visible && setVisible(false));
+    }, []);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:

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;