@zuzjs/ui 0.5.6 → 0.5.8

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

@@ -0,0 +1,6 @@
+import { AccordionHandler } from "./types";
+declare const Accordion: import("react").ForwardRefExoticComponent<import("../Box").BoxProps & {
+    message?: string;
+    title: string | import("react").ReactNode | import("react").ReactNode[];
+} & import("react").RefAttributes<AccordionHandler>>;
+export default Accordion;

package/dist/comps/Accordion/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import Box from "../Box";
+import Text from "../Text";
+import SVGIcons from "../svgicons";
+import Button from "../Button";
+const Accordion = forwardRef((props, ref) => {
+    const { title, message, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    return _jsxs(Box, { className: `--accordion flex cols`, ...rest, children: [_jsxs(Button, { onClick: (e) => setVisible(!visible), className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(Text, { className: `--label flex`, children: title }), _jsx(Box, { className: `--arrow flex`, children: visible ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), visible && _jsx(Box, { className: `--detail`, children: message })] });
+});
+export default Accordion;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export type AccordionProps = BoxProps & {
+    message?: string;
+    title: string | ReactNode | ReactNode[];
+};
+export interface AccordionHandler {
+    open: () => void;
+    close: () => void;
+}

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

@@ -0,0 +1,21 @@
+import { BoxProps } from "../Box";
+import { ActionBarHandler } from "./types";
+/**
+ * ActionBar renders a list of buttons with tooltips.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
+ *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
+ * ];
+ *
+ * <ActionBar items={items} />
+ * ```
+ */
+declare const ActionBar: import("react").ForwardRefExoticComponent<BoxProps & {
+    selected?: number | string;
+    onSwitch?: (tag: string) => void;
+    items: import("./types").ActionBarItem[];
+} & import("react").RefAttributes<ActionBarHandler>>;
+export default ActionBar;

package/dist/comps/Actionbar/index.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import ActionItem from "./item";
+/**
+ * ActionBar renders a list of buttons with tooltips.
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
+ *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
+ * ];
+ *
+ * <ActionBar items={items} />
+ * ```
+ */
+const ActionBar = forwardRef((props, ref) => {
+    const { items, name, selected, ...pops } = props;
+    const self = useRef(null);
+    const [_selected, setSelected] = useState(selected || items[0].tag || 0);
+    const track = useCallback(({ x, y }) => {
+        if (self.current) {
+            const bounds = self.current.getBoundingClientRect();
+            document.documentElement.style.setProperty(`--tip-x`, `${x - bounds.left}`);
+            document.documentElement.style.setProperty(`--tip-y`, `${y - bounds.top}`);
+            document.documentElement.style.setProperty(`--tip-s`, `1`);
+        }
+    }, []);
+    const tear = useCallback(() => {
+        if (self.current) {
+            self.current.removeEventListener(`pointerleave`, tear);
+            self.current.removeEventListener(`pointermove`, track);
+            document.documentElement.style.setProperty(`--tip-s`, `0`);
+        }
+    }, []);
+    const initTrack = useCallback(() => {
+        if (self.current) {
+            self.current.addEventListener(`pointerleave`, tear);
+            self.current.addEventListener(`pointermove`, track);
+        }
+    }, []);
+    useEffect(() => {
+        if (self.current) {
+            document.documentElement.style.setProperty(`--tip-w`, items.reduce((longest, item) => {
+                return item.label.length > longest.length ? item.label : longest;
+            }, '').length.toString());
+            document.documentElement.style.setProperty(`--tip-s`, `0`);
+            document.documentElement.style.setProperty(`--tip-l`, `${items.length}`);
+            self.current?.addEventListener(`pointerenter`, initTrack);
+        }
+    }, []);
+    const { className, style, rest } = useBase(pops);
+    return _jsxs(Box, { ref: self, style: style, className: `--actionbar rel flex aic ${className}`.trim(), ...rest, children: [items.map((item, index) => _jsx(ActionItem, { selected: _selected === item.tag || selected == index, ...item, idx: index }, `actionbar-action-${item.label.toLowerCase().replace(/\s+/g, `-`)}`)), _jsx(Box, { className: `--tip abs`, children: _jsx(Box, { className: `--track flex aic`, children: items.map(({ label }) => _jsx(Box, { className: `--lb`, children: label }, `tool-tip-${label.toLowerCase().replace(/\s+/g, `-`)}`)) }) })] });
+});
+export default ActionBar;

package/dist/comps/Actionbar/item.d.ts

@@ -0,0 +1,6 @@
+import { ActionBarItem } from './types';
+declare const ActionItem: ({ label, icon, onClick, idx, selected }: ActionBarItem & {
+    idx: number;
+    selected?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ActionItem;

package/dist/comps/Actionbar/item.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../Button';
+import Icon from '../Icon';
+const ActionItem = ({ label, icon, onClick, idx, selected }) => {
+    return _jsx(Button, { onClick: onClick, onMouseMove: e => document.documentElement.style.setProperty(`--tip-m`, `${idx}`), className: `--action ${selected ? `--selected` : ``} aic jcc rel`.trim(), children: typeof icon == `string` ? _jsx(Icon, { name: icon }) : icon });
+};
+export default ActionItem;

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { BoxProps } from "../Box";
+export interface ActionBarHandler {
+    show: () => void;
+}
+/**
+ * Represents an item in the ActionBar.
+ */
+export interface ActionBarItem {
+    /** Specific tag for action item */
+    tag?: string;
+    /** The label of the action item */
+    label: string;
+    /** The icon to display for the action item */
+    icon: ReactNode;
+    /** The callback function to execute when the action item is clicked */
+    onClick: () => void;
+}
+/**
+ * Props for the ActionBar component.
+ */
+export type ActionBarProps = BoxProps & {
+    /** The index of the initially selected action item */
+    selected?: number | string;
+    /** Callback function to execute when an action item is clicked */
+    onSwitch?: (tag: string) => void;
+    /** Array of action items to display in the ActionBar */
+    items: ActionBarItem[];
+};

package/dist/comps/Actionbar/types.js

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

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

@@ -0,0 +1,19 @@
+import { AVATAR } from "../../types/enums";
+import { Props } from "../../types";
+export type AvatarProps = Props<"img"> & {
+    type?: AVATAR;
+    size?: number;
+    src: string;
+    crossOrigin?: 'anonymous' | 'use-credentials';
+    referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+};
+export interface AvatarHandler {
+}
+declare const Avatar: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    type?: AVATAR;
+    size?: number;
+    src: string;
+    crossOrigin?: "anonymous" | "use-credentials";
+    referrerPolicy?: "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url";
+} & import("react").RefAttributes<AvatarHandler>>;
+export default Avatar;

package/dist/comps/Avatar/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import { AVATAR } from "../../types/enums";
+import { useBase, useImage } from "../../hooks";
+import Image from "../Image";
+import Box from "../Box";
+const Avatar = forwardRef((props, ref) => {
+    const { src, size, type, crossOrigin, referrerPolicy, animate, as, ...pops } = props;
+    const [img, imgStatus, imgError] = useImage(src, crossOrigin, referrerPolicy);
+    const { className, style, rest } = useBase({ animate, as });
+    useEffect(() => {
+        if (type == AVATAR.Square && !document.getElementById('squareRadiusClipPath')) {
+            const svgNS = "http://www.w3.org/2000/svg";
+            const svg = document.createElementNS(svgNS, "svg");
+            svg.setAttribute("width", "0");
+            svg.setAttribute("height", "0");
+            const defs = document.createElementNS(svgNS, "defs");
+            const clipPath = document.createElementNS(svgNS, "clipPath");
+            clipPath.setAttribute("id", "squareRadiusClipPath");
+            clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
+            const path = document.createElementNS(svgNS, "path");
+            path.setAttribute("d", "M0.986 0.347C0.951 0.11 0.777 -0.002 0.5 0C0.223 -0.002 0.049 0.11 0.014 0.347C0.005 0.404 0 0.452 0 0.5C0 0.548 0.005 0.596 0.014 0.653C0.049 0.89 0.223 1.002 0.5 1C0.777 1.002 0.951 0.89 0.986 0.653C0.995 0.596 1 0.548 1 0.5C1 0.452 0.995 0.404 0.986 0.347Z");
+            clipPath.appendChild(path);
+            defs.appendChild(clipPath);
+            svg.appendChild(defs);
+            document.body.appendChild(svg);
+        }
+    }, []);
+    return _jsx(Box, { className: `--avatar --${(type || AVATAR.Circle).toLowerCase()} rel ${className}`.trim(), style: {
+            width: size || `auto`,
+            height: `auto`,
+            ...style,
+        }, ...rest, children: _jsx(Image, { src: img, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, ...pops }) });
+});
+export default Avatar;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { Props } from "../../types";
+export interface BoxProps extends Partial<Props<`div`>> {
+    name?: string;
+}
+declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
+export default Box;

package/dist/comps/Box/index.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useBase } from "../../hooks";
+const Box = forwardRef((props, ref) => {
+    const { style, withEditor, ...pops } = props;
+    const { style: _style, className, rest } = useBase(pops);
+    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 });
+});
+export default Box;

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

@@ -0,0 +1,10 @@
+import { Props } from '../../types';
+export type ButtonProps = Props<`button`> & {
+    icon?: string;
+    withLabel?: boolean;
+};
+declare const Button: import("react").ForwardRefExoticComponent<import("../../types").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof import("../../types").ZuzProps> & {
+    icon?: string;
+    withLabel?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/comps/Button/index.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+import Icon from '../Icon';
+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] });
+});
+export default Button;

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

@@ -0,0 +1,7 @@
+import { CHECKBOX } 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;
+    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+} & import("react").RefAttributes<CheckboxHandler>>;
+export default CheckBox;

package/dist/comps/{checkbox.js → CheckBox/index.js}

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
-import With from "./base";
-import { CHECKBOX } from "../types/enums";
-// const CheckBox = forwardRef<HTMLButtonElement, { as?: string, type?: CHECKBOX, animate?: animationProps } & ComponentPropsWithoutRef<`input`>>((props, ref) => {
+import { CHECKBOX } from "../../types/enums";
+import Label from "../Label";
+import Input from "../Input";
+import SVGIcons from "../svgicons";
 const CheckBox = forwardRef((props, ref) => {
-    const { as, name, required, type, value, checked: defaultCheck, onChange, ...rest } = props;
+    const { name, required, type, value, checked: defaultCheck, onChange, ...pops } = props;
     const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -25,10 +26,10 @@ const CheckBox = forwardRef((props, ref) => {
             _setChecked(!checked);
         }
     }));
-    return _jsx(With, { tag: `label`, className: `${type == CHECKBOX.Default ? `checkbox icon-check` : `zuz-checkbox`} flex aic jcc ${checked ? `is-checked` : ``} rel`.trim(), as: as, ...rest, children: _jsx(With, { tag: `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);
-            } }) });
+    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) => {
+                    onChange && onChange(e.target.checked, value || `cb`);
+                    _setChecked(e.target.checked);
+                } })] });
 });
 // import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref, useState } from "react";
 // import { cleanProps, css } from "../funs";

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

@@ -0,0 +1,10 @@
+import { Props } from "../../types";
+import { CHECKBOX } from "../../types/enums";
+export type CheckBoxProps = Props<"input"> & {
+    type?: CHECKBOX;
+    onChange?: (checked: boolean, value: string | number | readonly string[]) => void;
+};
+export interface CheckboxHandler {
+    setChecked: (mode: boolean, triggerChange?: boolean) => void;
+    toggle: (triggerChange?: boolean) => void;
+}

package/dist/comps/CheckBox/types.js

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

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

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

package/dist/comps/ContextMenu/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import MenuItem from "./item";
+const ContextMenu = forwardRef((props, ref) => {
+    const { as, items, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    useImperativeHandle(ref, () => ({
+        show: (e) => {
+            // console.log(e)
+            if (e instanceof MouseEvent) {
+                setPosition({ x: e.clientX, y: e.clientY });
+            }
+            else if (e instanceof TouchEvent && e.touches.length > 0) {
+                setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+            }
+            else {
+                const { clientX: x, clientY: y } = e;
+                setPosition({ x, y });
+            }
+            setVisible(true);
+        },
+        hide: (e) => setVisible(false),
+    }));
+    useEffect(() => { }, [visible, position]);
+    if (!visible)
+        return null;
+    return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), style: {
+            ...style,
+            top: position.y,
+            left: position.x
+        }, ...rest, children: items.map((item, index) => _jsx(MenuItem, { ...{ ...item, index } }, `context-${item.label.toLowerCase()}-${index}`)) });
+});
+export default ContextMenu;

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

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

package/dist/comps/ContextMenu/item.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "../Box";
+import Button from "../Button";
+import Icon from "../Icon";
+import Text from "../Text";
+const MenuItem = (props) => {
+    const { label, labelColor, icon, iconColor, index, className, onSelect } = props;
+    return label == `-` ? _jsx(Box, { className: `--line` })
+        : _jsxs(Button, { onClick: e => onSelect(), className: `--item flex aic ${className}`.trim(), children: [_jsx(Icon, { name: icon, className: `--ico`, style: iconColor ? { color: iconColor } : {} }), _jsx(Text, { className: `--lbl flex aic`, style: labelColor ? { color: labelColor } : {}, children: label })] });
+};
+export default MenuItem;

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

@@ -0,0 +1,20 @@
+import { BoxProps } from "../Box";
+export interface ContextItem {
+    label: string;
+    labelColor?: string;
+    icon?: string;
+    iconColor?: string;
+    className?: string;
+    onSelect: () => void;
+}
+export type ContextMenuProps = BoxProps & {
+    items: ContextItem[];
+};
+export type MenuItemProps = ContextItem & {
+    index: number;
+    className: string;
+};
+export interface ContextMenuHandler {
+    show: (e: MouseEvent | TouchEvent) => void;
+    hide: (e: MouseEvent | TouchEvent) => void;
+}

package/dist/comps/ContextMenu/types.js

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

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

@@ -0,0 +1,17 @@
+import { BoxProps } from "../Box";
+import { SpinnerProps } from "../Spinner";
+export type CoverProps = BoxProps & {
+    message?: string;
+    spinner?: SpinnerProps;
+    color?: string;
+    when?: boolean;
+    hideMessage?: boolean;
+};
+declare const Cover: import("react").ForwardRefExoticComponent<BoxProps & {
+    message?: string;
+    spinner?: SpinnerProps;
+    color?: string;
+    when?: boolean;
+    hideMessage?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default Cover;

package/dist/comps/Cover/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { useBase } from "../../hooks";
+import Spinner from "../Spinner";
+import Text from "../Text";
+const Cover = forwardRef((props, ref) => {
+    const { message, spinner, color, when, hideMessage, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    if (`when` in props && props.when == false) {
+        return null;
+    }
+    return _jsxs(Box, { className: `--cover flex aic jcc cols abs fillx nope nous`, style: {
+            ...style,
+            backgroundColor: `var(--cover-bg)`
+        }, ...rest, children: [_jsx(Spinner, { ...spinner }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+});
+export default Cover;

package/dist/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/comps/{drawer.js → Drawer/index.js}

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import With from "./base";
-import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
-import { bindKey } from "../funs";
+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, ...rest } = props;
+    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);
@@ -39,19 +40,16 @@ const Drawer = forwardRef((props, ref) => {
             setVisible(false);
         }
     }));
-    return _jsxs(_Fragment, { children: [_jsx(With, { className: `zuz-overlay fixed fill`, onClick: (e) => {
+    return _jsxs(_Fragment, { children: [_jsx(Overlay, { onClick: (e) => {
                     if (visible) {
                         setVisible(false);
                     }
-                }, "aria-hidden": !visible, animate: {
-                    transition: TRANSITIONS.FadeIn,
-                    when: visible,
-                } }), _jsxs(With, { ref: divRef, as: as, className: `zuz-drawer flex cols drawer-${from ? from.toLowerCase() : `left`} fixed`, animate: {
+                }, 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,
-                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, render ? content : visible ? content : null] })] });
+                }, ...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/comps/{drawer.d.ts → Drawer/types.d.ts}

@@ -1,15 +1,14 @@
 import { ReactNode } from "react";
-import { DRAWER_SIDE } from "../types/enums";
-export interface DrawerProps {
+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;
 }
-declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<DrawerHandler>>;
-export default Drawer;

package/dist/comps/Drawer/types.js

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

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;