@zuzjs/ui 0.5.7 → 0.5.9

package/dist/comps/Alert/index.d.ts

@@ -0,0 +1,11 @@
+import { AlertHandler } from "./types";
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+} & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/comps/Alert/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+import { ALERT } from "../../types/enums";
+import Box from "../Box";
+import SVGIcons from "../svgicons";
+import Text from "../Text";
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Text, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
+});
+export default Alert;

package/dist/comps/Alert/types.d.ts

@@ -0,0 +1,13 @@
+import { ALERT } from "../../types/enums";
+import { BoxProps } from "../Box";
+export type AlertProps = BoxProps & {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+};
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}

package/dist/comps/Alert/types.js

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

package/dist/comps/Box/index.js

@@ -3,9 +3,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useBase } from "../../hooks";
 const Box = forwardRef((props, ref) => {
-    const { style, ...pops } = props;
+    const { style, withEditor, ...pops } = props;
     const { style: _style, className, rest } = useBase(pops);
-    return _jsx("div", { ref: ref, className: className, style: {
+    const handleInternalClick = (e) => {
+        // if ( withEditor && isBrowser ) {
+        //     // window.dispatchEvent(new CustomEvent(`ZUZ_COMP_SELECTED`, {
+        //     //     detail: {
+        //     //         compName: 'Box',
+        //     //         target: e.target,
+        //     //         props
+        //     //     }
+        //     // }))
+        // }
+    };
+    return _jsx("div", { ref: ref, onClick: handleInternalClick, className: `${className} ${withEditor ? `--with-zuz-editor` : ``}`.trim(), style: {
             ..._style,
             ...(style || {})
         }, ...rest });

package/dist/comps/Button/index.js

@@ -7,6 +7,6 @@ import Span from '../Span';
 const Button = forwardRef((props, ref) => {
     const { icon, children, withLabel, ...pops } = props;
     const { style, className, rest } = useBase(pops);
-    return _jsxs("button", { className: `${className} flex aic ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx(Icon, { name: `icon-${icon}` }), withLabel === true ? _jsx(Span, { children: children }) : children] });
+    return _jsxs("button", { className: `${className} flex aic jcc ${icon ? `ico-btn` : ``}`, style: style, ref: ref, ...rest, children: [icon && _jsx(Icon, { name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] });
 });
 export default Button;

package/dist/comps/CheckBox/index.d.ts

@@ -1,7 +1,8 @@
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
 import { CheckboxHandler } from "./types";
 declare const CheckBox: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
     type?: CHECKBOX;
+    size?: Size;
     onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default CheckBox;

package/dist/comps/CheckBox/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
 import Label from "../Label";
 import Input from "../Input";
 import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
-    const { name, required, type, value, checked: defaultCheck, onChange, ...pops } = props;
+    const { name, required, type, value, size, checked: defaultCheck, onChange, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -26,7 +26,7 @@ const CheckBox = forwardRef((props, ref) => {
             _setChecked(!checked);
         }
     }));
-    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), ...pops, children: [(!type || type == CHECKBOX.Default) && SVGIcons.check, _jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} --${size || Size.Default} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), ...pops, children: [(!type || type == CHECKBOX.Default) && SVGIcons.check, _jsx(Input, { ...{}, ref: bRef, defaultChecked: checked, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
                     onChange && onChange(e.target.checked, value || `cb`);
                     _setChecked(e.target.checked);
                 } })] });

package/dist/comps/CheckBox/types.d.ts

@@ -1,9 +1,25 @@
 import { Props } from "../../types";
-import { CHECKBOX } from "../../types/enums";
+import { CHECKBOX, Size } from "../../types/enums";
+/**
+ * Props for the CheckBox component.
+ *
+ * @typedef {Object} CheckBoxProps
+ * @property {CHECKBOX} [type] - The type of the checkbox.
+ * @property {Size} [size] - The size of the checkbox.
+ * @property {(checked: boolean, value: string | number | readonly string[]) => void} [onChange] - Callback function triggered when the checkbox state changes.
+ */
 export type CheckBoxProps = Props<"input"> & {
     type?: CHECKBOX;
+    size?: Size;
     onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
 };
+/**
+ * Interface for handling checkbox state.
+ *
+ * @interface CheckboxHandler
+ * @property {(mode: boolean, triggerChange?: boolean) => void} setChecked - Sets the checked state of the checkbox.
+ * @property {(triggerChange?: boolean) => void} toggle - Toggles the checked state of the checkbox.
+ */
 export interface CheckboxHandler {
     setChecked: (mode: boolean, triggerChange?: boolean) => void;
     toggle: (triggerChange?: boolean) => void;

package/dist/comps/ContextMenu/index.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from "../Box";
-import { ContextMenuHandler } from "./types";
+import { ContextItem, ContextMenuHandler } from "./types";
 declare const ContextMenu: import("react").ForwardRefExoticComponent<BoxProps & {
-    items: import("./types").ContextItem[];
+    items?: ContextItem[];
 } & import("react").RefAttributes<ContextMenuHandler>>;
 export default ContextMenu;

package/dist/comps/ContextMenu/index.js

@@ -4,13 +4,13 @@ import Box from "../Box";
 import { useBase } from "../../hooks";
 import MenuItem from "./item";
 const ContextMenu = forwardRef((props, ref) => {
-    const { as, items, ...pops } = props;
+    const { as, items: _items, ...pops } = props;
     const { className, style, rest } = useBase(pops);
     const [visible, setVisible] = useState(false);
     const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [items, setItems] = useState(_items || []);
     useImperativeHandle(ref, () => ({
-        show: (e) => {
-            // console.log(e)
+        show: (e, menuItems) => {
             if (e instanceof MouseEvent) {
                 setPosition({ x: e.clientX, y: e.clientY });
             }
@@ -21,11 +21,15 @@ const ContextMenu = forwardRef((props, ref) => {
                 const { clientX: x, clientY: y } = e;
                 setPosition({ x, y });
             }
+            if (menuItems) {
+                setItems(menuItems);
+            }
             setVisible(true);
         },
         hide: (e) => setVisible(false),
     }));
-    useEffect(() => { }, [visible, position]);
+    useEffect(() => {
+    }, [visible, position, items]);
     if (!visible)
         return null;
     return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), style: {

package/dist/comps/ContextMenu/types.d.ts

@@ -5,16 +5,17 @@ export interface ContextItem {
     icon?: string;
     iconColor?: string;
     className?: string;
+    enabled?: boolean;
     onSelect: () => void;
 }
 export type ContextMenuProps = BoxProps & {
-    items: ContextItem[];
+    items?: ContextItem[];
 };
 export type MenuItemProps = ContextItem & {
     index: number;
     className: string;
 };
 export interface ContextMenuHandler {
-    show: (e: MouseEvent | TouchEvent) => void;
+    show: (e: MouseEvent | TouchEvent, items?: ContextItem[]) => void;
     hide: (e: MouseEvent | TouchEvent) => void;
 }

package/dist/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/comps/Editor/Timeline/index.js

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

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

@@ -5,7 +5,7 @@ declare const Select: import("react").ForwardRefExoticComponent<BoxProps & {
     required?: FORMVALIDATION;
     options: Option[];
     label?: string;
-    selected?: Option;
+    selected?: string | Option;
     search?: boolean;
     onChange?: (v: Option) => void;
     searchPlaceholder?: string;

package/dist/comps/Select/index.js

@@ -10,7 +10,9 @@ import Input from "../Input";
 import OptionItem from "./optionItem";
 const Select = forwardRef((props, ref) => {
     const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
-    const [value, setValue] = useState(selected || options[0]);
+    const [value, setValue] = useState(selected ?
+        typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
+        : options[0]);
     const [choosing, setChoosing] = useState(false);
     const [query, setQuery] = useState(null);
     const _ref = useRef(null);
@@ -37,7 +39,7 @@ const Select = forwardRef((props, ref) => {
             setQuery(null);
         }
     }, [choosing]);
-    return _jsxs(Box, { className: `--select rel`, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, ref: _ref, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
+    return _jsxs(Box, { className: `--select rel`, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, ref: _ref, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { y: 5, opacity: 0 },
@@ -47,9 +49,11 @@ const Select = forwardRef((props, ref) => {
                 }, children: [withSearch && _jsx(Input, { ref: _search, onChange: (e) => {
                             setQuery(e.target.value == `` ? null : e.target.value);
                         }, className: `--select-search`, placeholder: searchPlaceholder || `Search...` }), (query == null ? options : options.filter((o) => {
-                        return `string` == typeof o ?
-                            o.toLowerCase().includes(query.toLowerCase())
-                            : o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
+                        // return 
+                        // `string` == typeof o ? 
+                        // o.toLowerCase().includes(query.toLowerCase()) 
+                        // : 
+                        return o.label.toLowerCase().includes(query.toLowerCase()) || o.value.toLowerCase().includes(query.toLowerCase());
                     }))
                         .map((o) => _jsx(OptionItem, { updateValue: updateValue, value: value, o: o }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
 });

package/dist/comps/Select/types.d.ts

@@ -1,21 +1,22 @@
+import { FormEventHandler } from "react";
 import { FORMVALIDATION } from "../../types/enums";
 import { BoxProps } from "../Box";
 /**
- * Represents an option object with a label and value.
+ * Represents an option which can be either a string or an OptionObject.
  */
-export interface OptionObject {
+export type Option = {
     label: string;
     value: string;
-}
+};
+/**
+ * Represents an option object with a label and value.
+ */
+export type Value = FormEventHandler<HTMLDivElement> & Option;
 export interface OptionItemProps {
     updateValue: (o: Option) => void;
     o: Option;
     value: Option;
 }
-/**
- * Represents an option which can be either a string or an OptionObject.
- */
-export type Option = string | OptionObject;
 /**
  * Props for the Select component.
  */
@@ -35,7 +36,7 @@ export type SelectProps = BoxProps & {
     /**
      * The currently selected option.
      */
-    selected?: Option;
+    selected?: string | Option;
     /**
      * Enables the search functionality within the select dropdown.
      */