@zuzjs/ui 0.10.6 → 0.10.7

package/dist/esm/comps/Cropper/index.d.ts

@@ -1,8 +0,0 @@
-import { CropHandler, CropShape } from "../..";
-import { BoxProps } from "../Box";
-declare const Cropper: import("react").ForwardRefExoticComponent<BoxProps & {
-    src: string;
-    shape?: CropShape;
-    size?: number;
-} & import("react").RefAttributes<CropHandler>>;
-export default Cropper;

package/dist/esm/comps/Cropper/index.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle } from "react";
-import { CropShape, Slider, useBase, useImageCropper } from "../..";
-import Box from "../Box";
-const Cropper = forwardRef((props, ref) => {
-    const { src, shape, size, ...pops } = props;
-    const { style, className, rest } = useBase(pops);
-    const { canvasRef, crop, setScale, handleMouseDown, handleMouseUp, handleMouseMove } = useImageCropper(src, size || 200, shape || CropShape.Circle);
-    useImperativeHandle(ref, () => ({
-        getCropped() {
-            return crop();
-        },
-        setScale(scale) {
-            setScale(scale);
-        }
-    }));
-    return _jsxs(Box, { as: `--cropper --${shape || CropShape.Circle} ${className}`, style: style, ...rest, children: [_jsx("canvas", { ref: canvasRef, width: size || 200, height: size || 200, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onMouseMove: handleMouseMove }), _jsx(Box, { as: `--cropper-slider`, children: _jsx(Slider, { onChange: num => setScale(num), min: 0, max: 1, step: 0.01, value: 1 }) })] });
-});
-Cropper.displayName = `Zuz.Cropper`;
-export default Cropper;

package/dist/esm/comps/Cropper/types.d.ts

@@ -1,14 +0,0 @@
-import { BoxProps } from "../Box";
-export declare enum CropShape {
-    Circle = "circle",
-    Square = "square"
-}
-export type CropperProps = BoxProps & {
-    src: string;
-    shape?: CropShape;
-    size?: number;
-};
-export interface CropHandler {
-    getCropped: () => string;
-    setScale: (scale: number) => void;
-}

package/dist/esm/comps/Cropper/types.js

@@ -1,5 +0,0 @@
-export var CropShape;
-(function (CropShape) {
-    CropShape["Circle"] = "circle";
-    CropShape["Square"] = "square";
-})(CropShape || (CropShape = {}));

package/dist/esm/comps/Crumb/index.d.ts

@@ -1,5 +0,0 @@
-declare const Crumb: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
-    items: import("./types").CrumbItem[];
-    maxItems?: number;
-} & import("react").RefAttributes<HTMLUListElement | HTMLOListElement>>;
-export default Crumb;

package/dist/esm/comps/Crumb/index.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import Box from "../Box";
-import Button from "../Button";
-import Icon from "../Icon";
-import List from "../List";
-import SVGIcons from "../svgicons";
-import Text from "../Text";
-const Crumb = forwardRef((props, ref) => {
-    const { items: crumbItems, maxItems } = props;
-    const canSlice = useMemo(() => maxItems && maxItems > 0 && crumbItems.length > maxItems - 1, [crumbItems, maxItems]);
-    const items = canSlice ? [
-        ...crumbItems.slice(0, 2),
-        { ID: `.`, label: `...`, icon: `ellipsis`, action: () => { } },
-        ...crumbItems.slice(-maxItems)
-    ] : crumbItems;
-    return _jsx(List, { ref: ref, className: `--crumb flex aic`, direction: `rows`, seperator: _jsx(Box, { as: `--crumb-chevron`, children: SVGIcons.chevronRightOutline }), items: items.map((item, index, _items) => item.ID == `.` ?
-            _jsx(Box, { as: `flex aic gap:3`, children: Array(3).fill(null).map(() => _jsx(Box, { as: `w:4 h:4 bg:$text r:10` }, `--crumb-placeholder-${index}`)) })
-            : _jsxs(Button, { onClick: () => item.action?.(), className: `--crumb-item`, disabled: !_items[index + 1], children: [item.icon && _jsx(Icon, { as: `--crumb-icon`, name: item.icon }), _jsx(Text, { as: `--crumb-label`, children: item.label })] }, `${item.label.replace(/\s+/g, `-`).toLowerCase()}-${index}`)) });
-});
-Crumb.displayName = `Zuz.Crumb`;
-export default Crumb;

package/dist/esm/comps/Crumb/types.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-export type CrumbItem = {
-    ID?: string;
-    label: string;
-    icon?: string | ReactNode;
-    action?: () => void;
-};
-export type CrumbProps = BoxProps & {
-    items: CrumbItem[];
-    maxItems?: number;
-};

package/dist/esm/comps/Crumb/types.js

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

package/dist/esm/comps/DatePicker/index.d.ts

@@ -1,11 +0,0 @@
-declare const DatePicker: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
-    numeric?: boolean;
-    size?: import("../..").Size;
-    variant?: import("../..").Variant;
-    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
-    onConfirm?: (value: string) => void;
-} & {
-    icon?: import("react").ReactNode | string;
-    defaultValue?: Date | null;
-} & import("react").RefAttributes<HTMLInputElement>>;
-export default DatePicker;

package/dist/esm/comps/DatePicker/index.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { format } from "date-fns";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { useBase, usePosition } from "../../hooks";
-import { Position } from "../../types/enums";
-import Box from "../Box";
-import Calendar from "../Calendar";
-import Icon from "../Icon";
-import Span from "../Span";
-import SVGIcons from "../svgicons";
-const DatePicker = forwardRef((props, ref) => {
-    const { icon, defaultValue, value, size, variant, numeric, type, onConfirm, ...pops } = props;
-    const [choosing, setChoosing] = useState(false);
-    const [currentDate, setCurrentDate] = useState(defaultValue || null);
-    const { style, className, rest } = useBase(pops);
-    const _input = useRef(null);
-    const _pop = useRef(null);
-    const { reposition } = usePosition(_pop, { direction: Position.Bottom, offset: 2 });
-    const handleInput = (event) => {
-        if (numeric) {
-            event.currentTarget.value = event.currentTarget.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
-        }
-    };
-    useEffect(() => {
-        const handleClickOutside = (e) => {
-            const target = e.target;
-            const clickedInsideInput = _input.current?.contains(target);
-            const clickedInsidePop = _pop.current?.contains(target);
-            if (!clickedInsideInput && !clickedInsidePop) {
-                setChoosing(false);
-            }
-        };
-        if (choosing) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [choosing]);
-    useEffect(() => {
-        const handleEsc = (e) => {
-            if (e.key === "Escape" && choosing) {
-                setChoosing(false);
-                _input.current?.focus();
-            }
-        };
-        document.addEventListener("keydown", handleEsc);
-        return () => document.removeEventListener("keydown", handleEsc);
-    }, [choosing]);
-    const handleFocus = () => {
-        setChoosing(true);
-    };
-    useEffect(() => {
-        if (choosing) {
-            reposition();
-        }
-    }, [choosing, reposition]);
-    return _jsx(_Fragment, { children: _jsxs(Box, { as: `--date-picker ${variant ? `--${variant}` : ``} rel flex aic ${className}`, "data-value": currentDate ? currentDate.toISOString() : ``, children: [icon ? `string` === typeof icon ? _jsx(Icon, { as: `mr:10 c:#666`, name: icon }) : icon : _jsx(Span, { as: `--date-picker-icon flex aic jcc`, children: SVGIcons.calendar }), _jsx("input", { ref: _input, value: currentDate ? format(currentDate, `EEE, MMM d YYY hh:mm a`) : (value || ``), className: `--input ${variant ? `--${variant}` : ``} flex`.trim(), style: style, onFocus: handleFocus, onInput: handleInput, autoComplete: "new-password", onKeyDown: (e) => {
-                        if (e.key == `Enter`) {
-                            onConfirm?.(e.currentTarget.value);
-                        }
-                    }, ...rest }), _jsx(Box, { "aria-hidden": !choosing, ref: _pop, fx: {
-                        from: { y: 5, opacity: 0 },
-                        to: { y: 0, opacity: 1 },
-                        when: choosing,
-                        duration: .05
-                    }, as: `--date-picker-chooser flex aic ${variant ? `--${variant}` : ``}`, children: _jsx(Calendar, { defaultValue: currentDate, onChange: dt => {
-                            setCurrentDate(dt);
-                            setChoosing(false);
-                        } }) })] }) });
-});
-DatePicker.displayName = `Zuz.DatePicker`;
-export default DatePicker;

package/dist/esm/comps/DatePicker/types.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from "react";
-import { InputProps } from "../Input";
-export type DatePickerProps = InputProps & {
-    icon?: ReactNode | string;
-    defaultValue?: Date | null;
-};

package/dist/esm/comps/DatePicker/types.js

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

package/dist/esm/comps/Dot/index.js

@@ -1 +0,0 @@
-"use strict";

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

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

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

@@ -1,82 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { useBase, useShortcuts } from "../../hooks";
-import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES } from "../../types/enums";
-import Box from "../Box";
-import { layerManager } from "../layer_manager";
-import Overlay from "../Overlay";
-const Drawer = forwardRef((props, ref) => {
-    const { from, speed, children, margin, animation, prerender, onClose, ...pops } = props;
-    const [render, setRender] = useState(undefined == prerender ? true : prerender);
-    const [visible, setVisible] = useState(false);
-    const divRef = useRef(null);
-    const [content, setContent] = useState(children);
-    const { className, style, rest } = useBase(pops);
-    const shortcutsConfig = useMemo(() => [
-        {
-            keys: [KeyCode.Escape],
-            callback: () => {
-                if (layerManager.isTop(closeDrawer))
-                    closeDrawer();
-            }
-        }
-    ], [visible]);
-    useShortcuts(shortcutsConfig);
-    const closeDrawer = useCallback(() => {
-        setVisible(false);
-        onClose?.();
-    }, []);
-    useEffect(() => {
-        setContent(children);
-    }, [children]);
-    useEffect(() => {
-        if (visible) {
-            layerManager.push(closeDrawer);
-        }
-        else {
-            layerManager.pop(closeDrawer);
-        }
-        return () => layerManager.pop(closeDrawer);
-    }, [visible]);
-    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() {
-            closeDrawer();
-        }
-    }));
-    return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
-                    if (visible) {
-                        closeDrawer();
-                    }
-                }, when: visible }), _jsxs(Box, { ref: divRef, style: {
-                    ...style,
-                    ...{ "--m": `${margin || 0}px` }
-                }, "aria-hidden": !visible, className: `--drawer flex cols ${className}  --${from ? from.toLowerCase() : `left`} fixed`, fx: {
-                    from: { ..._style.from, opacity: 0 },
-                    to: { ..._style.to, opacity: 1 },
-                    when: visible,
-                    curve: animation || TRANSITION_CURVES.EaseInOut,
-                    duration: speed || .5,
-                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(Box, { className: `--handle` }) : null, render ? content : visible ? content : null] })] });
-});
-Drawer.displayName = `Zuz.Drawer`;
-export default Drawer;

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

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

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

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

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

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

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

@@ -1,59 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { DRAG_DIRECTION, SLIDER } from "../../../types/enums";
-import Box from "../../Box";
-import Button from "../../Button";
-import Slider from "../../Slider";
-import SVGIcons from "../../svgicons";
-import Text from "../../Text";
-import ToolTip from "../../Tooltip";
-import Layer from "./layer";
-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` })] });
-});
-Timeline.displayName = `Timeline`;
-export default Timeline;

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

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

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

@@ -1,67 +0,0 @@
-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/comps/Editor/Timeline/prop.d.ts

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

package/dist/esm/comps/Editor/Timeline/prop.js

@@ -1,33 +0,0 @@
-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/comps/Editor/index.d.ts

@@ -1,4 +0,0 @@
-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/comps/Editor/index.js

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

package/dist/esm/comps/Editor/selectionBox.d.ts

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

package/dist/esm/comps/Editor/selectionBox.js

@@ -1,48 +0,0 @@
-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/comps/Editor/types.d.ts

@@ -1,58 +0,0 @@
-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;
-};