@zuzjs/ui 0.5.7 → 0.5.8

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/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.
      */

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

@@ -0,0 +1,21 @@
+import { BoxProps } from "../Box";
+import { SLIDER } from "../../types/enums";
+export type SliderProps = BoxProps & {
+    type?: SLIDER;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    roundValue?: boolean;
+    onChange?: (value: number) => void;
+};
+declare const Slider: import("react").ForwardRefExoticComponent<BoxProps & {
+    type?: SLIDER;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    roundValue?: boolean;
+    onChange?: (value: number) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Slider;

package/dist/comps/Slider/index.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import Box from "../Box";
+import { SLIDER } from "../../types/enums";
+import { useBase } from "../../hooks";
+import Input from "../Input";
+import Text from "../Text";
+const Slider = forwardRef((props, ref) => {
+    const { type, value: _value, min: _min, max: _max, step: _step, onChange, roundValue, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const step = useRef(_step || 0.01).current;
+    const min = useRef(_min || 0).current;
+    const max = useRef(_max || 1).current;
+    const value = useRef(_value || 0).current;
+    const input = useRef(null);
+    const slider = useRef(null);
+    const knob = useRef(null);
+    const fill = useRef(null);
+    const track = useRef(null);
+    const text = useRef(null);
+    const percent = (value, min, max) => ((value - min) / (max - min)) * 100;
+    const handleInput = (e) => {
+        if (slider.current) {
+            const value = parseFloat(e.currentTarget.value);
+            const percentage = percent(value, parseFloat(e.currentTarget.min), parseFloat(e.currentTarget.max));
+            slider.current.style.setProperty(`--value`, `${percentage}`);
+            slider.current.setAttribute(`data-value`, `${value}`);
+            onChange && onChange(roundValue ? +value.toFixed(2) : value);
+        }
+    };
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const [startValue, setStartValue] = useState(0);
+    const handleMouseDown = (e) => {
+        setIsDragging(true);
+        setStartX(e.clientX);
+        setStartValue(slider.current ? parseFloat(slider.current.getAttribute(`data-value`)) : 0);
+        document.body.style.cursor = `ew-resize`;
+    };
+    const handleMouseMove = (e) => {
+        if (isDragging) {
+            const deltaX = e.clientX - startX;
+            const newValue = Math.max(min, Math.min(startValue + deltaX * step, max)); // Adjust sensitivity as needed
+            if (slider.current) {
+                slider.current.setAttribute(`data-value`, `${newValue}`);
+                text.current.textContent = roundValue ? newValue.toFixed(2) : newValue.toString();
+                onChange && onChange(roundValue ? +newValue.toFixed(2) : newValue);
+            }
+        }
+    };
+    const handleMouseUp = () => {
+        setIsDragging(false);
+        document.body.style.cursor = `auto`;
+    };
+    useEffect(() => {
+        if (slider.current) {
+            slider.current
+                .style
+                .setProperty(`--value`, input.current ?
+                `${percent(parseFloat(input.current.value), parseFloat(input.current.min), parseFloat(input.current.max))}`
+                : value.toString());
+        }
+    }, []);
+    useEffect(() => {
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+        else {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging]);
+    return _jsx(Box, { ref: slider, "data-value": value || 0, className: `--slider --${type || SLIDER.Default} flex rel ${className}`.trim(), style: { ...style }, children: SLIDER.Text === type ? _jsx(_Fragment, { children: _jsx(Text, { ref: text, onMouseDown: handleMouseDown, className: `--slider-text`, children: value || 0 }) }) : _jsxs(_Fragment, { children: [_jsx(Box, { ref: track, className: `--slider-track abs fill` }), _jsx(Box, { ref: knob, className: `--slider-knob abs` }), _jsx(Input, { ref: input, onInput: handleInput, className: `abs fill`, tabIndex: 0, type: type || SLIDER.Default, defaultValue: value || 0, step: step, max: max, min: min })] }) });
+});
+export default Slider;

package/dist/comps/Text/index.js

@@ -1,17 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 import Span from '../Span';
 const Text = forwardRef((props, ref) => {
     const { h, html, children, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     const Tag = `h${props.h || 1}`;
-    return createElement(Tag, {
-        ref,
-        style,
-        className,
-        ...rest
-    }, html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children);
+    return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });
 export default Text;

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

@@ -0,0 +1,4 @@
+import { BoxProps } from '../Box';
+export type ToolTipProps = BoxProps & {};
+declare const ToolTip: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ToolTip;

package/dist/comps/Tooltip/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { useBase } from '../../hooks';
+import Box from '../Box';
+import Text from '../Text';
+import { TRANSITION_CURVES } from '../../types/enums';
+const ToolTip = forwardRef((props, ref) => {
+    const { title, children, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    const [hovered, setHovered] = useState(false);
+    return _jsxs(Box, { className: `--with-tooltip rel`, onMouseEnter: e => setHovered(true), onMouseLeave: e => setHovered(false), children: [_jsx(Box, { className: `--tooltip abs ${className}`.trim(), animate: {
+                    from: { opacity: 0, x: `-50%`, y: -5 },
+                    to: { opacity: 1, x: `-50%`, y: 0 },
+                    curve: TRANSITION_CURVES.EaseInOut,
+                    when: hovered
+                }, children: _jsx(Text, { className: `--text rel`, children: title }) }), children] });
+});
+export default ToolTip;

package/dist/comps/index.d.ts

@@ -13,6 +13,11 @@ export * from './ContextMenu/types';
 export { type CoverProps, default as Cover } from './Cover';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
+/**Editor */
+export { default as ZuzBuilder } from './Editor';
+export { default as TimeLine } from './Editor/Timeline';
+export * from './Editor/types';
+export { default as withEditor } from './Editor/withEditor';
 export { type FormProps, default as Form } from './Form';
 export { type IconProps, default as Icon } from './Icon';
 export { type ImageProps, default as Image } from './Image';
@@ -29,6 +34,7 @@ export * from './Segmented/types';
 export { default as Select } from './Select';
 export * from './Select/types';
 export { type SheetProps, default as Sheet } from './Sheet';
+export { type SliderProps, default as Slider } from './Slider';
 export { type SpanProps, default as Span } from './Span';
 export { type SpinnerProps, default as Spinner } from './Spinner';
 export { default as Switch } from './Switch';
@@ -37,5 +43,6 @@ export * from './TabView/types';
 export { type TextProps, default as Text } from './Text';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
+export { type ToolTipProps, default as ToolTip } from './Tooltip';
 export { default as TreeView } from './Treeview';
 export * from './Treeview/types';