@zuzjs/ui 0.7.4 → 0.7.6

package/dist/cjs/src/comps/Editor/Timeline/prop.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cssWithKeys } from "../../../funs/stylesheet";
+import { SLIDER } from "../../../types/enums";
+import Box from "../../Box";
+import Button from "../../Button";
+import Select from "../../Select";
+import Slider from "../../Slider";
+import SVGIcons from "../../svgicons";
+import Text from "../../Text";
+const Prop = (props) => {
+    const { meta, onChange, addKeyframe } = props;
+    const [k, u] = Object.keys(meta);
+    const [unit, setUnit] = useState(meta.unit);
+    const [value, setValue] = useState(meta[k]);
+    const handleChange = (e) => {
+        onChange({
+            [k]: e || value,
+            unit: unit
+        });
+    };
+    return _jsxs(Box, { className: `--sub-prop flex aic`, children: [_jsx(Button, { onClick: e => addKeyframe(), className: `--add-key`, children: SVGIcons.addKey }), _jsx(Text, { className: `--plbl`, children: cssWithKeys[k] }), _jsxs(Box, { className: `--value flex aic jce`, children: [_jsx(Slider, { onChange: e => handleChange(e), min: -100, max: 100, step: 1, roundValue: true, type: SLIDER.Text }), _jsx(Select, { onChange: (v) => {
+                            setUnit(v.value);
+                            handleChange((+v.value));
+                        }, selected: meta.unit, options: [
+                            { label: `px`, value: `px` },
+                            { label: `vw`, value: `vw` },
+                            { label: `vh`, value: `vh` },
+                            { label: `%`, value: `%` },
+                            { label: `deg`, value: `deg` },
+                        ] })] })] });
+};
+export default Prop;

package/dist/cjs/src/comps/Editor/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EditorHandler } from './types';
+declare const Editor: React.ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof import("../..").ZuzProps> & React.RefAttributes<EditorHandler>>;
+export default Editor;

package/dist/cjs/src/comps/Editor/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef } from 'react';
+import { EditorMode } from './types';
+import Box from '../Box';
+const Editor = forwardRef((props, ref) => {
+    const [mode, setMode] = React.useState(EditorMode.Select);
+    return _jsx(Box, { as: `--ui-builder rel` });
+});
+export default Editor;

package/dist/cjs/src/comps/Editor/selectionBox.d.ts

@@ -0,0 +1,4 @@
+import './styles.scss';
+import { SelectionProps } from './types';
+declare const SelectionBox: (props: SelectionProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectionBox;

package/dist/cjs/src/comps/Editor/selectionBox.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SelectionBox.tsx
+import { useState, useCallback } from 'react';
+import './styles.scss';
+const SelectionBox = (props) => {
+    const [rect, setRect] = useState(props || { x: 10, y: 10, width: 200, height: 150 });
+    const handleMouseDown = useCallback((e, position) => {
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startWidth = rect.width;
+        const startHeight = rect.height;
+        const handleMouseMove = (moveEvent) => {
+            const deltaX = moveEvent.clientX - startX;
+            const deltaY = moveEvent.clientY - startY;
+            setRect((prevRect) => {
+                let newWidth = startWidth;
+                let newHeight = startHeight;
+                if (position.includes('right')) {
+                    newWidth = startWidth + deltaX;
+                }
+                else if (position.includes('left')) {
+                    newWidth = startWidth - deltaX;
+                    prevRect.x += deltaX;
+                }
+                if (position.includes('bottom')) {
+                    newHeight = startHeight + deltaY;
+                }
+                else if (position.includes('top')) {
+                    newHeight = startHeight - deltaY;
+                    prevRect.y += deltaY;
+                }
+                return {
+                    ...prevRect,
+                    width: newWidth,
+                    height: newHeight,
+                };
+            });
+        };
+        const handleMouseUp = () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+    }, [rect]);
+    return (_jsxs("svg", { className: "selection-box", width: "100%", height: "100%", children: [_jsx("rect", { className: "selection-rect", x: rect.x, y: rect.y, width: rect.width, height: rect.height }), _jsx("circle", { className: "handle", cx: rect.x, cy: rect.y, r: "5", onMouseDown: (e) => handleMouseDown(e, 'top-left') }), _jsx("circle", { className: "handle", cx: rect.x + rect.width / 2, cy: rect.y, r: "5", onMouseDown: (e) => handleMouseDown(e, 'top') }), _jsx("circle", { className: "handle", cx: rect.x + rect.width, cy: rect.y, r: "5", onMouseDown: (e) => handleMouseDown(e, 'top-right') }), _jsx("circle", { className: "handle", cx: rect.x, cy: rect.y + rect.height / 2, r: "5", onMouseDown: (e) => handleMouseDown(e, 'left') }), _jsx("circle", { className: "handle", cx: rect.x + rect.width, cy: rect.y + rect.height / 2, r: "5", onMouseDown: (e) => handleMouseDown(e, 'right') }), _jsx("circle", { className: "handle", cx: rect.x, cy: rect.y + rect.height, r: "5", onMouseDown: (e) => handleMouseDown(e, 'bottom-left') }), _jsx("circle", { className: "handle", cx: rect.x + rect.width / 2, cy: rect.y + rect.height, r: "5", onMouseDown: (e) => handleMouseDown(e, 'bottom') }), _jsx("circle", { className: "handle", cx: rect.x + rect.width, cy: rect.y + rect.height, r: "5", onMouseDown: (e) => handleMouseDown(e, 'bottom-right') })] }));
+};
+export default SelectionBox;

package/dist/cjs/src/comps/Editor/types.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from "react";
+import { cssShortKey, Props } from "../../types";
+export declare enum EditorMode {
+    Select = "SELECT",
+    Move = "MOVE",
+    Rotate = "ROTATE",
+    Scale = "SCALE",
+    Animation = "ANIMATION",
+    Keyframe = "KEYFRAMING",
+    Play = "PLAY"
+}
+export declare enum LayerType {
+    Meta = "META",
+    Track = "TRACK"
+}
+export type LayerProps = {
+    index: number;
+    meta: TimeLineLayer;
+    selected: boolean;
+    onSelect: (layer: TimeLineLayer) => void;
+};
+export type TimeLineLayer = {
+    src: RefObject<HTMLElement>;
+    label?: string;
+};
+export type TimeLineProps = {
+    layers: TimeLineLayer[];
+};
+export type StyleItem = {
+    [key in cssShortKey]?: string | number;
+} & {
+    unit: string;
+};
+export type PropProps = {
+    meta: StyleItem;
+    onChange: (v: StyleItem) => void;
+    addKeyframe: () => void;
+};
+export interface KeyFrame {
+    stamp: number;
+    props: StyleItem[];
+}
+export interface WithEditorProps {
+    withEditor?: boolean;
+}
+export type EditorProps = Props<`div`> & {};
+export interface EditorHandler {
+    show: () => void;
+}
+export interface BuilderStore {
+    mode: EditorMode;
+}
+export type SelectionProps = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/dist/cjs/src/comps/Editor/types.js

@@ -0,0 +1,15 @@
+export var EditorMode;
+(function (EditorMode) {
+    EditorMode["Select"] = "SELECT";
+    EditorMode["Move"] = "MOVE";
+    EditorMode["Rotate"] = "ROTATE";
+    EditorMode["Scale"] = "SCALE";
+    EditorMode["Animation"] = "ANIMATION";
+    EditorMode["Keyframe"] = "KEYFRAMING";
+    EditorMode["Play"] = "PLAY";
+})(EditorMode || (EditorMode = {}));
+export var LayerType;
+(function (LayerType) {
+    LayerType["Meta"] = "META";
+    LayerType["Track"] = "TRACK";
+})(LayerType || (LayerType = {}));

package/dist/cjs/src/comps/Editor/withEditor.d.ts

@@ -0,0 +1,3 @@
+import { EditorHandler, WithEditorProps } from "./types";
+declare const withEditor: <P extends object>(Component: React.ComponentType<P>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P & WithEditorProps> & import("react").RefAttributes<EditorHandler>>;
+export default withEditor;

package/dist/cjs/src/comps/Editor/withEditor.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Editor from ".";
+const withEditor = (Component) => {
+    return forwardRef((props, ref) => {
+        const { withEditor, ...rest } = props;
+        if (withEditor) {
+            return _jsx(Editor, { ref: ref, children: _jsx(Component, { ...rest }) });
+        }
+        return _jsx(Component, { ref: ref, ...rest });
+    });
+};
+export default withEditor;

package/dist/cjs/src/comps/Fab/index.d.ts

@@ -0,0 +1,7 @@
+import SVGIcons from "../svgicons";
+import { Position } from "../../types/enums";
+declare const Fab: import("react").ForwardRefExoticComponent<Omit<import("..").ButtonProps, "icon"> & {
+    icon?: string | keyof typeof SVGIcons;
+    position?: `${Position.Top | Position.Bottom}${Position.Left | Position.Right}`;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Fab;

package/dist/cjs/src/comps/Fab/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Button from "../Button";
+import SVGIcons from "../svgicons";
+import { Size } from "../../types/enums";
+const Fab = forwardRef((props, ref) => {
+    const { icon, size, position } = props;
+    return _jsx(Button, { className: `--fab fixed --${size || Size.Large} --${position || `bottomright`}`, children: icon || SVGIcons.plus });
+});
+export default Fab;

package/dist/cjs/src/comps/Fab/types.d.ts

@@ -0,0 +1,7 @@
+import { Position } from "../../types/enums";
+import { ButtonProps } from "../Button/types";
+import SVGIcons from "../svgicons";
+export type FabProps = Omit<ButtonProps, `icon`> & {
+    icon?: string | keyof typeof SVGIcons;
+    position?: `${Position.Top | Position.Bottom}${Position.Left | Position.Right}`;
+};

package/dist/cjs/src/comps/Fab/types.js

@@ -0,0 +1 @@
+export {};

package/dist/cjs/src/comps/Filters/index.d.ts

@@ -0,0 +1,7 @@
+import { FILTER } from "../../types/enums";
+export type FilterProps = {
+    names?: FILTER[];
+    strength?: number;
+};
+declare const Filters: (props: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export default Filters;

package/dist/cjs/src/comps/Filters/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { FILTER } from "../../types/enums";
+const Filters = (props) => {
+    const { names, strength } = props;
+    const filters = {
+        [FILTER.Gooey]: (force) => _jsxs("filter", { id: "gooey", children: [_jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: force || 10, result: "blur" }), _jsx("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), _jsx("feBlend", { in: "SourceGraphic", in2: "goo" })] }, `filter-${FILTER.Gooey}`)
+    };
+    useEffect(() => { }, [names]);
+    return _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", children: _jsx("defs", { children: (names || [FILTER.Gooey]).map(name => filters[name](strength)) }) });
+};
+export default Filters;

package/dist/cjs/src/comps/Form/index.d.ts

@@ -0,0 +1,85 @@
+import { BoxProps } from "../Box";
+import { dynamicObject } from "../../types";
+import { SheetHandler } from "../Sheet";
+import { SPINNER } from "../../types/enums";
+export type FormProps = BoxProps & {
+    /** 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?: dynamicObject;
+    /** Spinner properties for loading indicator */
+    spinner?: SPINNER;
+    /** 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;
+    } | SheetHandler;
+    resetOnSuccess?: boolean;
+};
+/**
+ * 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;
+}
+/**
+ * {@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<BoxProps & {
+    /** 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?: dynamicObject;
+    /** Spinner properties for loading indicator */
+    spinner?: SPINNER;
+    /** 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;
+    } | SheetHandler;
+    resetOnSuccess?: boolean;
+} & import("react").RefAttributes<FormHandler>>;
+export default Form;

package/dist/cjs/src/comps/Form/index.js

@@ -0,0 +1,267 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, startTransition, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import Sheet, { isSheetHandler } from "../Sheet";
+import Cover from "../Cover";
+import { FORMVALIDATION, SHEET } from "../../types/enums";
+import { addPropsToChildren, 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 { name, cover, spinner, errors, action, children, withData, beforeSubmit, onSubmit, onError, onSuccess, resetOnSuccess, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const [loading, setLoading] = useState(false);
+    const innerRef = useRef(null);
+    const sheet = useRef(null);
+    const submit = 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]);
+    const _getFields = (el) => {
+        return {
+            name: el.name || el.getAttribute(`name`) || el.getAttribute(`data-name`),
+            required: el.required ? true
+                : el.getAttribute(`data-required`) ? el.getAttribute(`data-required`) == `true` : false,
+            with: el.with || el.getAttribute(`with`)
+        };
+    };
+    const _getPinValue = (el) => {
+        const _pin = [];
+        el.querySelectorAll(`.--input`).forEach((input) => {
+            _pin.push(input.value);
+        });
+        return _pin.join('');
+    };
+    /**
+     * 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) => {
+        const { name: _name, required: _required, with: _with } = _getFields(el);
+        if (_required) {
+            /**
+             * @internal
+             * Required field validation */
+            if (el.type == `checkbox` && el.checked == false) {
+                return false;
+            }
+            if (el.classList.contains(`--otp`)) {
+                const _pin = _getPinValue(el);
+                if (_pin == `` || _pin.length < parseInt(el.getAttribute(`data-size`))) {
+                    return false;
+                }
+            }
+            if (el.classList.contains(`--select`) && el.querySelector(`button.--selected`).dataset.value == `-1`) {
+                return false;
+            }
+            if (el.value == ``)
+                return false;
+        }
+        /**
+         * @internal
+         * Additional validation based on `with` attribute
+         */
+        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;
+    }, [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;
+        let _errorMsg = null;
+        Array.from(_nodes(`[name]`))
+            .forEach((el) => {
+            const { name: _name, required: _required, with: _with } = _getFields(el);
+            let valid = true;
+            if (_required || _with)
+                valid = _validate(el);
+            data[_name] = {
+                valid: valid,
+                value: el.type == `checkbox` ? el.checked == true ? el.value : false
+                    : el.classList.contains(`--otp`) ? _getPinValue(el)
+                        : el.classList.contains(`--select`) ? el.querySelector(`button.--selected`).dataset.value : el.value
+            };
+            payload[_name] = el.type == `checkbox` ? el.checked == true ? true : false
+                : el.classList.contains(`--otp`) ? _getPinValue(el)
+                    : el.classList.contains(`--select`) ? el.querySelector(`button.--selected`).dataset.value : el.value;
+            if (!valid) {
+                if (_error == null && errors) {
+                    _error = el;
+                    _errorMsg = errors[_name];
+                }
+                el.classList.add(`input-with-error`);
+            }
+            else
+                el.classList.remove(`input-with-error`);
+        });
+        if (_error) {
+            const _nxt = _error;
+            if (_nxt.classList.contains(`--otp`)) {
+                for (const i of Array.from(_nxt.querySelectorAll(`.--input`))) {
+                    const input = i;
+                    if (input.value == ``) {
+                        input.focus();
+                        break;
+                    }
+                }
+            }
+            else
+                _nxt.focus();
+        }
+        return {
+            error: _error != null,
+            errorMsg: _errorMsg || `Fix errors to continue...`,
+            data, payload
+        };
+    }, [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.error(errorMsg);
+        }
+        else if (action) {
+            // If `action` is defined, submit the form data to the specified endpoint
+            startTransition(async () => {
+                beforeSubmit && beforeSubmit(payload);
+                if (isSheetHandler(cover)) {
+                    cover.setLoading(true);
+                }
+                else
+                    setLoading(true);
+                sheet.current.hide();
+                // submit.current?.setState(ButtonState.Loading)
+                withPost(action, { ...payload, ...(withData || {}) })
+                    .then(_resp => {
+                    const resp = _resp;
+                    // submit.current?.reset()
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
+                    if (resetOnSuccess) {
+                        Array.from(_nodes(`[name]`)).forEach((el) => {
+                            if (el instanceof HTMLInputElement)
+                                el.value = ``;
+                        });
+                    }
+                    if (onSuccess)
+                        onSuccess(resp);
+                    else {
+                        sheet.current.hide();
+                        sheet.current.success(resp.message || `Redirecting..`);
+                    }
+                })
+                    .catch(err => {
+                    // console.warn(`Error occurred while submitting form`, err)
+                    if (isSheetHandler(cover)) {
+                        cover.setLoading(false);
+                    }
+                    else
+                        setLoading(false);
+                    // submit.current?.reset()
+                    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);
+        }
+    }, [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.warn(`You should add at least 1 button with type=\`SUBMIT\``);
+        }
+        else {
+            _submit.forEach(el => {
+                el.addEventListener(`click`, _onSubmit);
+            });
+        }
+    }, [innerRef.current]);
+    const buildChildren = useMemo(() => addPropsToChildren(children, child => child.props.type == `submit`, { ref: submit }), [children]);
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            if (mod) {
+                sheet.current.hide();
+            }
+            setLoading(mod);
+        },
+        showError(errorMsg) {
+            sheet.current.error(errorMsg, 4);
+        },
+        hideError() {
+            sheet.current.hide();
+        },
+        init() {
+            _init();
+        }
+    }));
+    useEffect(_init, []);
+    return _jsxs(Box, { ref: innerRef, style: style, className: `--form flex rel ${className} ${name ? `--form-${name.replace(/\s+/g, `-`)}` : ``}`, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], children: [_jsx(Sheet, { ref: sheet, as: `--sheet-form` }), !isSheetHandler(cover) && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, spinner: spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff`, when: loading }), buildChildren] });
+});
+export default Form;

package/dist/cjs/src/comps/Icon/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+import { Size } from "../../types/enums";
+export type IconProps = Omit<BoxProps, `name`> & {
+    name: string | ReactNode;
+    pathCount?: number;
+    size?: Size;
+};
+declare const Icon: import("react").ForwardRefExoticComponent<Omit<BoxProps, "name"> & {
+    name: string | ReactNode;
+    pathCount?: number;
+    size?: Size;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Icon;

package/dist/cjs/src/comps/Icon/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import Span from "../Span";
+import { Size } from "../../types/enums";
+const Icon = forwardRef((props, ref) => {
+    const { name, pathCount, size, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsx("div", { style: style, className: `icon-${name} --icon --${size || Size.Default} ${className}`.trim(), ref: ref, ...rest, children: Array(pathCount || 0).fill(0).map((p, i) => _jsx(Span, { className: `path${i + 1}` }, `${name}-layer-${i}`)) });
+});
+export default Icon;

package/dist/cjs/src/comps/Image/index.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../../types';
+export type ImageProps = Props<`img`> & {};
+declare const Image: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../..").ZuzProps> & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/cjs/src/comps/Image/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+const Image = forwardRef((props, ref) => {
+    const { style, className, rest } = useBase(props);
+    if (!rest.src || rest.src == ``)
+        return null;
+    return _jsx("img", { ref: ref, style: style, className: `${className} flex`, ...rest });
+});
+export default Image;