@zuzjs/ui 0.5.4 → 0.5.6

package/dist/bin.js

@@ -10,9 +10,16 @@ program
     .option(`-d, --debug`)
     .option(`-v, --version`)
     .option(`-root, --root <char>`)
-    .option(`-f, --file <char>`);
+    .option(`-f, --file <char>`)
+    .option(`-lx, --lexer`)
+    .option(`-cx, --classes`)
+    .option(`-ch, --cache`)
+    .option(`-cl, --cleaned`)
+    .option(`-sh, --sheet`)
+    .option(`-mq, --media`);
 program.parse();
 const options = program.opts();
+// extendGlobals()
 const getAllFiles = (dir, extn, files, result, regex) => {
     files = files || readdirSync(dir);
     result = result || [];
@@ -54,6 +61,7 @@ const rebuild = (f) => {
                     }
                     return arr;
                 }, []).join(` `);
+                // 
             }
             if (v2.startsWith(`[`) && v2.endsWith(`]`))
                 v2 = v2.slice(1, -1);
@@ -62,39 +70,56 @@ 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;
 };
 const rebuildAll = () => {
     console.log(pc.gray(`○ Building Zuz CSS`));
-    const cssBuilder = new CSS();
+    const cssBuilder = new CSS({}, options);
     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.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 +130,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,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import With from "./base";
+import SVGIcons from "./svgicons";
+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 ? SVGIcons.ArrowUp : SVGIcons.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,6 @@
-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";
+export interface BoxProps extends Props<'div'> {
+    name?: string;
+}
+declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/box.js

@@ -1,8 +1,12 @@
 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 { style, ...pops } = props;
+    const { className, style: _style, rest } = useBase(pops);
+    return _jsx("div", { ref: ref, className: className, style: {
+            ..._style,
+            ...(style || {})
+        }, ...rest });
 });
 export default Box;

package/dist/comps/button.d.ts

@@ -1,8 +1,7 @@
-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;
+    withLabel?: boolean;
 }
-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,19 @@
 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, withLabel, ...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}` } }), undefined == withLabel || withLabel == true ?
+                _jsx("span", { ...{ className: `b-label` }, children: 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,58 @@
-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 before form submission with validated form data */
+    beforeSubmit?: (data: FormData | dynamicObject) => void;
+    /** 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;
+    /** Resets the form to its initial state */
+    init: () => 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;