@zuzjs/ui 0.7.4 → 0.7.6

package/dist/cjs/src/comps/Avatar/types.d.ts

@@ -0,0 +1,13 @@
+import { Props } from "../../types";
+import { AVATAR, Variant } from "../../types/enums";
+export type AvatarProps = Props<"img"> & {
+    type?: AVATAR;
+    size?: number;
+    variant?: Variant;
+    src?: string;
+    color?: 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 {
+}

package/dist/cjs/src/comps/Avatar/types.js

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

package/dist/cjs/src/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/cjs/src/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/cjs/src/comps/Button/index.d.ts

@@ -0,0 +1,13 @@
+import { ButtonState } from './types';
+import { Size, SPINNER } from '../../types/enums';
+declare const Button: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof import("../..").ZuzProps> & {
+    icon?: string;
+    iconSize?: Size;
+    withLabel?: boolean;
+    spinner?: SPINNER;
+    state?: ButtonState;
+    size?: Size;
+    variant?: Size | import("../..").Variant;
+    reset?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/dist/cjs/src/comps/Button/index.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useBase } from '../../hooks';
+import Icon from '../Icon';
+import Span from '../Span';
+import { ButtonState } from './types';
+import Spinner from '../Spinner';
+import { Size, SPINNER } from '../../types/enums';
+const Button = forwardRef((props, ref) => {
+    const { reset, size, variant, icon, iconSize, children, withLabel, spinner, state, disabled, ...pops } = props;
+    const { style, className, rest } = useBase(pops);
+    return _jsxs("button", { className: `--button ${variant ? `--${variant}` : ``} ${size ? `--${size}` : ``} flex aic ${!reset ? `jcc` : ``} ${icon ? `ico-btn` : ``} ${className}`.trim(), style: style, ref: ref, disabled: state == ButtonState.Loading || props.skeleton?.enabled || disabled, ...rest, children: [state == ButtonState.Loading && _jsx(Spinner, { size: Size.Small, type: spinner || SPINNER.Simple }), (!state || state == ButtonState.Normal) && _jsxs(_Fragment, { children: [icon && _jsx(Icon, { size: iconSize, name: icon }), withLabel === true ? _jsx(Span, { children: children }) : children] })] });
+});
+export default Button;

package/dist/cjs/src/comps/Button/types.d.ts

@@ -0,0 +1,23 @@
+import { Props } from "../../types";
+import { Size, SPINNER, Variant } from "../../types/enums";
+export type ButtonProps = Props<`button`> & {
+    icon?: string;
+    iconSize?: Size;
+    withLabel?: boolean;
+    spinner?: SPINNER;
+    state?: ButtonState;
+    /**
+     * @deprecated "Use `variant` instead. `size` will be removed in the next major release."
+     */
+    size?: Size;
+    variant?: Size | Variant;
+    reset?: boolean;
+};
+export interface ButtonHandler extends HTMLButtonElement {
+    reset: () => void;
+    setState: (mod: ButtonState) => void;
+}
+export declare enum ButtonState {
+    Loading = "loading",
+    Normal = "normal"
+}

package/dist/cjs/src/comps/Button/types.js

@@ -0,0 +1,5 @@
+export var ButtonState;
+(function (ButtonState) {
+    ButtonState["Loading"] = "loading";
+    ButtonState["Normal"] = "normal";
+})(ButtonState || (ButtonState = {}));

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

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

package/dist/cjs/src/comps/CheckBox/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { CHECKBOX, Variant } 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, size, variant, checked: defaultCheck, onSwitch, ...pops } = props;
+    const [checked, _setChecked] = useState(defaultCheck || false);
+    const bRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setChecked(mod, triggerChange = true) {
+            _setChecked(mod);
+            if (bRef.current) {
+                bRef.current.checked = mod;
+            }
+            if (triggerChange && onSwitch)
+                onSwitch(mod, value || `cb`);
+        },
+        toggle(triggerChange = true) {
+            if (bRef.current)
+                bRef.current.checked = !checked;
+            if (triggerChange && onSwitch)
+                onSwitch && onSwitch(!checked, value || `cb`);
+            _setChecked(!checked);
+        }
+    }));
+    return _jsxs(Label, { className: `--${(type || CHECKBOX.Default).toLowerCase()} ${!type || type == CHECKBOX.Default ? `--checkbox` : `--switch`} --${(variant || size) || Variant.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) => {
+                    onSwitch && onSwitch(e.target.checked, value || `cb`);
+                    _setChecked(e.target.checked);
+                } })] });
+});
+export default CheckBox;

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

@@ -0,0 +1,27 @@
+import { Props } from "../../types";
+import { CHECKBOX, Size, Variant } 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;
+    variant?: Variant;
+    onSwitch?: (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/cjs/src/comps/CheckBox/types.js

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

package/dist/cjs/src/comps/ColorScheme/index.d.ts

@@ -0,0 +1,4 @@
+import { SegmentProps } from "../Segmented/types";
+import { ColorScheme } from "../../hooks/useColorScheme";
+declare const ColorScheme: import("react").ForwardRefExoticComponent<Omit<SegmentProps, "items"> & import("react").RefAttributes<HTMLDivElement>>;
+export default ColorScheme;

package/dist/cjs/src/comps/ColorScheme/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import Segmented from "../Segmented";
+import SVGIcons from "../svgicons";
+import { useColorScheme } from "../../hooks/useColorScheme";
+const ColorScheme = forwardRef((props, ref) => {
+    const { colorScheme, setColorScheme } = useColorScheme();
+    const items = useMemo(() => [
+        { tag: `light`, index: 0, label: "", icon: SVGIcons.colorSchemeLight },
+        { tag: `system`, index: 1, label: "", icon: SVGIcons.colorSchemeSystem },
+        { tag: `dark`, index: 2, label: "", icon: SVGIcons.colorSchemeDark },
+    ], []);
+    const selected = useMemo(() => [`light`, `system`, `dark`].indexOf(colorScheme), [colorScheme]);
+    return selected == -1 ? null : _jsx(Segmented, { className: `--color-scheme`, onSwitch: ({ tag }) => {
+            setColorScheme(tag);
+        }, selected: selected, items: items, ...props });
+});
+export default ColorScheme;

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

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

package/dist/cjs/src/comps/ContextMenu/index.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import Box from "../Box";
+import { useAnchorPosition, useBase } from "../../hooks";
+import MenuItem from "./item";
+import { TRANSITION_CURVES } from "../../types/enums";
+// import { dynamicObject } from "../../types";
+const ContextMenu = forwardRef((props, ref) => {
+    const { as, offsetX, offsetY, parent, items: _items, ...pops } = props;
+    const { className, style, rest } = useBase(pops);
+    const event = useRef(undefined);
+    const [visible, setVisible] = useState(false);
+    // const [_position, setPosition] = useState<{ x: number, y: number } | null>(null);
+    // const [_parent, setParent] = useState<{ x: number, y: number, width: number, height: number } | null>(null);
+    const [items, setItems] = useState(_items || []);
+    const { position, targetRef } = useAnchorPosition(parent, event.current, { offsetX, offsetY });
+    useImperativeHandle(ref, () => ({
+        show: (e, menuItems) => {
+            if (!parent)
+                event.current = e;
+            if (menuItems) {
+                setItems(menuItems);
+            }
+            setVisible(true);
+        },
+        hide: (e) => setVisible(false),
+    }));
+    return _jsx(Box, { className: `--contextmenu abs flex cols ${className}`.trim(), "aria-hidden": !visible, style: {
+            ...style,
+            top: position.top,
+            left: position.left
+        }, animate: {
+            from: { opacity: 0, y: 20 },
+            to: { opacity: 1, y: 0 },
+            curve: TRANSITION_CURVES.EaseInOut,
+            duration: 0.05,
+            when: visible
+        }, ref: targetRef, ...rest, children: items.map((item, index) => _jsx(MenuItem, { ...{ ...item, index } }, `context-${item.label.toLowerCase()}-${index}`)) });
+});
+export default ContextMenu;

package/dist/cjs/src/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/cjs/src/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, { reset: true, onClick: e => onSelect(), className: `--item ${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/cjs/src/comps/ContextMenu/types.d.ts

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

package/dist/cjs/src/comps/ContextMenu/types.js

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

package/dist/cjs/src/comps/CookiesConsent/index.d.ts

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

package/dist/cjs/src/comps/CookiesConsent/index.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import Box from "../Box";
+import Text from "../Text";
+import Button from "../Button";
+import { Position, TRANSITION_CURVES } from "../../types/enums";
+const CookiesConsent = forwardRef((props, ref) => {
+    const [accepted, setAccepted] = useState(`wait`);
+    const { title, message, acceptLabel, rejectLabel, position } = props;
+    const handleAction = async (action) => {
+        setAccepted(action == 1 ? `accepted` : `rejected`);
+        localStorage.setItem('--ccnt', String(action));
+    };
+    useEffect(() => {
+        const action = localStorage.getItem('--ccnt');
+        setAccepted(action ? action == `1` ? `accepted` : `rejected` : `pending`);
+    }, []);
+    return _jsxs(Box, { animate: {
+            from: { x: -1000 },
+            to: { x: 0 },
+            when: accepted == `pending`,
+            curve: TRANSITION_CURVES.EaseInOut,
+            duration: 0.5,
+            delay: accepted == `accepted` ? 0 : 3
+        }, as: `--cookie-consent --${accepted} --${position || Position.Left} flex cols`, children: [_jsx(Text, { as: `--title`, children: title || `This site uses cookies` }), _jsx(Text, { as: `--message`, children: message || `We and selected third parties use cookies (or similar technologies) for technical purposes, to enhance and analyze site usage, to support our marketing efforts` }), _jsxs(Box, { as: `--footer flex aic`, children: [_jsx(Button, { onClick: e => handleAction(1), as: `--accept`, children: acceptLabel || `Accept All` }), _jsx(Button, { onClick: e => handleAction(0), as: `--reject`, children: rejectLabel || `Cancel` })] })] });
+});
+export default CookiesConsent;

package/dist/cjs/src/comps/CookiesConsent/types.d.ts

@@ -0,0 +1,8 @@
+import { Position } from "../../types/enums";
+export type CookieConsentProps = {
+    title?: string;
+    message?: string;
+    acceptLabel?: string;
+    rejectLabel?: string;
+    position?: Position;
+};

package/dist/cjs/src/comps/CookiesConsent/types.js

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

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

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

package/dist/cjs/src/comps/Cover/index.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+import { SPINNER } from "../../types/enums";
+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, { type: spinner || SPINNER.Simple }), !hideMessage && _jsx(Text, { className: `--label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] });
+});
+export default Cover;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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