@zuzjs/ui 0.7.4 → 0.7.6

package/dist/esm/src/comps/Drawer/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+import { DrawerHandler } from "./types";
+import { DRAWER_SIDE } from "../../types/enums";
+declare const Drawer: import("react").ForwardRefExoticComponent<BoxProps & {
+    as?: string;
+    speed?: number;
+    from?: DRAWER_SIDE;
+    children?: string | ReactNode | ReactNode[];
+    prerender?: boolean;
+} & import("react").RefAttributes<DrawerHandler>>;
+export default Drawer;

package/dist/esm/src/comps/Drawer/index.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import Overlay from "../Overlay";
+import Box from "../Box";
+import { bindKey } from "../../funs";
+import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
+const Drawer = forwardRef((props, ref) => {
+    const { as, from, speed, children, prerender, ...pops } = props;
+    const [render, setRender] = useState(undefined == prerender ? true : prerender);
+    const [visible, setVisible] = useState(false);
+    const divRef = useRef(null);
+    const [content, setContent] = useState(children);
+    useEffect(() => {
+        setContent(children);
+    }, [children]);
+    useEffect(() => {
+        bindKey(KeyCode.Escape, () => visible && setVisible(false));
+    }, []);
+    const style = useMemo(() => {
+        switch (from) {
+            case DRAWER_SIDE.Left:
+                return { from: { x: `-100vh` }, to: { x: 0 } };
+            case DRAWER_SIDE.Right:
+                return { from: { x: `100vh` }, to: { x: 0 } };
+            case DRAWER_SIDE.Top:
+                return { from: { y: `-100vh` }, to: { y: 0 } };
+            case DRAWER_SIDE.Bottom:
+                return { from: { y: `100vh` }, to: { y: 0 } };
+            default:
+                return { from: { x: `-100vh` }, to: { x: 0 } };
+        }
+    }, []);
+    useImperativeHandle(ref, () => ({
+        open(child) {
+            if (child)
+                setContent(child);
+            setVisible(true);
+        },
+        close() {
+            setVisible(false);
+        }
+    }));
+    return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
+                    if (visible) {
+                        setVisible(false);
+                    }
+                }, when: visible }), _jsxs(Box, { ref: divRef, className: `--drawer flex cols --${from ? from.toLowerCase() : `left`} fixed`, animate: {
+                    from: { ...style.from, opacity: 0 },
+                    to: { ...style.to, opacity: 1 },
+                    when: visible,
+                    curve: TRANSITION_CURVES.EaseInOut,
+                    duration: speed || .5,
+                }, ...pops, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
+});
+export default Drawer;

package/dist/esm/src/comps/Drawer/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { DRAWER_SIDE } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type DrawerProps = BoxProps & {
+    as?: string;
+    speed?: number;
+    from?: DRAWER_SIDE;
+    children?: string | ReactNode | ReactNode[];
+    prerender?: boolean;
+};
+export interface DrawerHandler {
+    open: (child?: string | ReactNode | ReactNode[]) => void;
+    close: () => void;
+}

package/dist/esm/src/comps/Drawer/types.js

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

package/dist/esm/src/comps/Editor/Timeline/index.d.ts

@@ -0,0 +1,3 @@
+import { TimeLineProps } from "../types";
+declare const Timeline: import("react").ForwardRefExoticComponent<TimeLineProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Timeline;

package/dist/esm/src/comps/Editor/Timeline/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import Box from "../../Box";
+import Button from "../../Button";
+import SVGIcons from "../../svgicons";
+import Text from "../../Text";
+import Layer from "./layer";
+import Slider from "../../Slider";
+import { DRAG_DIRECTION, SLIDER } from "../../../types/enums";
+import ToolTip from "../../Tooltip";
+const Timeline = forwardRef((props, ref) => {
+    const { layers } = props;
+    const [selected, setSelected] = useState([]);
+    const [duration, setDuration] = useState(1);
+    const sideBar = useRef(null);
+    const cursorLimit = useRef({ left: 0, right: 0, snap: 1 });
+    const onLayerSelect = (layer) => {
+        const { src } = layer;
+        if (src) {
+            const { width, height, x, y } = src.current.getBoundingClientRect();
+            src.current.classList.add(`--with-timeline`);
+        }
+        if (selected.includes(layer)) {
+            setSelected(selected.filter(a => a !== layer));
+        }
+        else {
+            setSelected([...selected, layer]);
+        }
+    };
+    const buildTimelineStamps = (step = 0.1) => {
+        const stamps = [];
+        for (let i = 0; i < duration; i += step) {
+            stamps.push(_jsx(Text, { className: `--stmp`, children: i.toFixed(1) }, `tstmp-${i}`));
+        }
+        return stamps;
+    };
+    useEffect(() => {
+        if (sideBar.current) {
+            const w = document.querySelector(`.--head .--track .--stamps .--stmp`).getBoundingClientRect().width;
+            cursorLimit.current = {
+                left: 0, //sideBar.current.offsetLeft,
+                right: window.innerWidth - sideBar.current.offsetWidth - 10,
+                snap: w
+            };
+        }
+    }, [duration]);
+    // console.log(cursorLimit.current)
+    return _jsxs(Box, { className: `--timeline fixed flex`, children: [_jsxs(Box, { className: `--layers flex cols`, children: [_jsxs(Box, { className: `--layer --head flex aic`, children: [_jsxs(Box, { ref: sideBar, className: `--meta flex aic jcc`, children: [_jsxs(Box, { className: `--buns flex aic`, children: [_jsx(Button, { className: `--pbtn`, children: SVGIcons.prev }), _jsx(Button, { className: `--pbtn`, children: SVGIcons.play }), _jsx(Button, { className: `--pbtn`, children: SVGIcons.next })] }), _jsxs(Box, { className: `--bus flex aic`, children: [_jsx(ToolTip, { title: `Duration`, children: _jsxs(Box, { className: `--choose-time flex aic jcc`, children: [_jsx(Slider, { onChange: e => setDuration(e), value: 1, type: SLIDER.Text, min: 1, max: 10, step: 1 }), _jsx(Text, { className: `--duration`, children: "s" })] }) }), _jsx(ToolTip, { title: `Add Style`, children: _jsx(Button, { className: `--pbtn`, children: SVGIcons.add }) })] })] }), _jsx(Box, { className: `--track flex aic`, children: _jsx(Box, { as: `--stamps flex aic`, children: buildTimelineStamps() }) })] }), layers && layers.length > 0 && layers.map((a, i) => _jsx(Layer, { meta: a, index: i + 1, selected: selected.includes(a), onSelect: onLayerSelect }, `layer-track-${i}`))] }), _jsx(Box, { draggable: true, dragOptions: {
+                    direction: DRAG_DIRECTION.x,
+                    snap: cursorLimit.current.snap,
+                    limits: {
+                        left: cursorLimit.current.left,
+                        right: cursorLimit.current.right
+                    }
+                }, className: `--cursor abs` })] });
+});
+export default Timeline;

package/dist/esm/src/comps/Editor/Timeline/layer.d.ts

@@ -0,0 +1,3 @@
+import { LayerProps } from "../types";
+declare const Layer: (props: LayerProps) => import("react/jsx-runtime").JSX.Element;
+export default Layer;

package/dist/esm/src/comps/Editor/Timeline/layer.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import Box from "../../Box";
+import Button from "../../Button";
+import SVGIcons from "../../svgicons";
+import Text from "../../Text";
+import Prop from "./prop";
+import { cssWithKeys } from "../../../funs/stylesheet";
+const Layer = (props) => {
+    const { meta, index, onSelect } = props;
+    const { src, label } = meta;
+    const style = useRef([
+        { x: 0, unit: 'px' },
+        { y: 0, unit: 'px' },
+        { z: 0, unit: 'px' },
+        { rx: 0, unit: 'deg' },
+        { ry: 0, unit: 'deg' },
+        { rz: 0, unit: 'deg' },
+    ]);
+    const [expanded, setExpanded] = useState(false);
+    const [keyframes, setKeyframes] = useState([]);
+    const applyStyle = (source) => {
+        if (src.current) {
+            const _transform = [];
+            const list = source || style.current;
+            list.forEach((c, i) => {
+                const [k, u] = Object.keys(c);
+                // _css.makeUnit(k, c[k as cssShortKey])
+                _transform.push(`${cssWithKeys[k]}(${c[k]}${c.unit})`);
+            });
+            src.current.style.transform = _transform.join(' ');
+        }
+    };
+    const updateStyle = (meta) => {
+        const [key] = Object.keys(meta);
+        // console.log(key, meta)
+        const newList = style.current.map(item => {
+            if (key in item) {
+                return meta; //{ ...item, [key]: meta[key as cssShortKey] };
+            }
+            return item;
+        });
+        if (!newList.some(item => key in item)) {
+            newList.push(meta);
+        }
+        style.current = newList;
+        // console.log(style.current)
+        applyStyle(newList);
+    };
+    const addKeyframe = () => {
+        setKeyframes([
+            ...keyframes,
+            {
+                stamp: 0,
+                props: style.current
+            }
+        ]);
+        console.log(keyframes);
+    };
+    // const updateStyleDebounced = useDebounce(updateStyle, 100)
+    useEffect(() => {
+        applyStyle();
+        setTimeout(() => setExpanded(true), 200);
+    }, []);
+    return _jsxs(Box, { onClick: e => onSelect(meta), className: `--layer flex aic`, children: [_jsxs(Box, { className: `--meta flex cols`, children: [_jsxs(Box, { className: `--prop flex aic`, children: [_jsx(Button, { onClick: e => setExpanded(!expanded), className: `--chevron`, children: expanded ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsx(Box, { className: `--icon` }), _jsx(Text, { className: `--label bold`, children: label || `Layer ${index}` })] }), expanded && style.current.map((a, i) => _jsx(Prop, { onChange: v => updateStyle(v), addKeyframe: addKeyframe, meta: a }, `layer-${a}-${i}`))] }), _jsxs(Box, { className: `--track flex cols`, children: [_jsx(Box, { className: `--bar` }), expanded && Object.keys(style.current).map((a, i) => _jsx(Box, { className: `--bar --sub` }, `bar-style-${a}-${i}`))] })] });
+};
+export default Layer;

package/dist/esm/src/comps/Editor/Timeline/prop.d.ts

@@ -0,0 +1,3 @@
+import { PropProps } from "../types";
+declare const Prop: (props: PropProps) => import("react/jsx-runtime").JSX.Element;
+export default Prop;

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/src/comps/Fab/types.js

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

package/dist/esm/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/esm/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/esm/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;