@zuzjs/ui 0.5.1 → 0.5.3

package/dist/comps/base.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { dynamicObject } from "../types";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { Skeleton } from "../types/interfaces";
 export interface animationProps {
     transition?: TRANSITIONS;
     from?: dynamicObject;
@@ -13,9 +14,10 @@ export interface animationProps {
 interface BaseProps<T extends ElementType> {
     tag?: T;
     as?: string | string[];
+    animate?: animationProps;
     className?: string;
     propsToRemove?: string[];
-    animate?: animationProps;
+    skeleton?: Skeleton;
 }
 export type Props<T extends ElementType> = BaseProps<T> & ComponentPropsWithoutRef<T>;
 declare const With: import("react").ForwardRefExoticComponent<Omit<Props<ElementType>, "ref"> & import("react").RefAttributes<Element>>;

package/dist/comps/base.js

@@ -1,7 +1,33 @@
 import { createElement, forwardRef } from "react";
 import { css, cleanProps } from "../funs";
 import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ...rest }, ref) => {
+const buildSkeletonStyle = (s) => {
+    const makeValue = (v, unit = `px`) => {
+        return v ?
+            `string` == typeof v ? v : `${v}${unit}`
+            : `inherit`;
+    };
+    const style = {};
+    if (s.radius) {
+        style.borderRadius = makeValue(s.radius);
+    }
+    if (s.size) {
+        style.width = style.minWidth = style.maxWidth = style.height = style.minHeight = style.maxHeight = makeValue(s.size);
+    }
+    else if (s.width || s.height) {
+        if (s.width) {
+            style.width = style.minWidth = style.maxWidth = makeValue(s.width);
+        }
+        if (s.height) {
+            style.height = style.minHeight = style.maxHeight = makeValue(s.height);
+        }
+    }
+    else {
+        style.minWidth = style.minHeight = `100%`;
+    }
+    return style;
+};
+const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, skeleton, ...rest }, ref) => {
     const Comp = tag || 'div';
     let cx = [];
     if (as) {
@@ -19,14 +45,22 @@ const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ..
     else {
         _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
+    const { children, ...restProps } = cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]);
     return createElement(Comp, {
         style: {
             ...buildWithStyles(_style),
             ..._transition,
-            ...style
+            ...style,
+            ...(skeleton?.enabled ? buildSkeletonStyle(skeleton) : {})
         },
-        className: [className, ...cx].join(' ').trim(),
-        ...cleanProps(rest, propsToRemove || []),
+        className: [
+            className,
+            ...cx,
+            skeleton?.enabled ? `--skeleton` : ``
+        ].join(' ').trim(),
+        children: skeleton?.enabled ? ` `.repeat(6)
+            : children,
+        ...restProps,
         ref
     });
 });

package/dist/comps/box.d.ts

@@ -1,6 +1,3 @@
-import { animationProps } from "./base";
-declare const Box: import("react").ForwardRefExoticComponent<{
-    as?: string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { BaseProps } from "../types/interfaces";
+declare const Box: import("react").ForwardRefExoticComponent<BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/comps/checkbox.js

@@ -4,8 +4,8 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
 import { CHECKBOX } from "../types/enums";
 const CheckBox = forwardRef((props, ref) => {
-    const { as, name, required, type, value, onChange, ...rest } = props;
-    const [checked, _setChecked] = useState(props.checked || false);
+    const { as, name, required, type, value, checked: defaultCheck, onChange, ...rest } = props;
+    const [checked, _setChecked] = useState(defaultCheck || false);
     const bRef = useRef(null);
     useImperativeHandle(ref, () => ({
         setChecked(mod, triggerChange = true) {
@@ -24,7 +24,7 @@ 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, value: value || `cb`, type: `checkbox`, className: `abs`, name: name, required: required || false, onChange: (e) => {
+    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);
             } }) });

package/dist/comps/contextmenu.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import With from "./base";
 const ContextMenu = forwardRef((props, ref) => {
     const { as, items, ...rest } = props;
-    return _jsx(With, { as: as, className: `zuz-context-menu abs flex cols`, ...rest, ref: ref, children: items.map((item, index) => item.label == `-` ? _jsx(With, { as: `context-line` }, `${index}-line`) :
+    return _jsx(With, { as: as, className: `context-menu abs flex cols`, ...rest, ref: ref, children: items.map((item, index) => item.label == `-` ? _jsx(With, { as: `context-line` }, `${index}-line`) :
             _jsxs(With, { onClick: item.onSelect, as: `button`, className: `context-menu-item flex aic ${item.className || ``}`.trim(), children: [_jsx(With, { as: `div`, className: `ico icon-${item.icon}`.trim(), style: item.iconColor ? { color: item.iconColor } : {} }), _jsx(With, { as: `h1`, className: `flex aic`, style: item.labelColor ? { color: item.labelColor } : {}, children: item.label })] }, `item-${item.label.replace(/\s/g, `-`)}-${index}`)) });
 });
 export default ContextMenu;

package/dist/comps/form.d.ts

@@ -18,6 +18,7 @@ export interface FormProps {
 }
 export interface FormHandler {
     setLoading: (mode: boolean) => void;
+    hideError: () => void;
 }
 declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -19,6 +19,9 @@ const Form = forwardRef((props, ref) => {
             if (el.type == `checkbox` && el.checked == false) {
                 return false;
             }
+            if (el.classList.contains(`--select`) && el.dataset.value == `-1`) {
+                return false;
+            }
             if (el.value == ``)
                 return false;
         }
@@ -70,9 +73,9 @@ const Form = forwardRef((props, ref) => {
                 valid = _validate(el);
             data[el.name] = {
                 valid: valid,
-                value: el.value
+                value: el.classList.contains(`--select`) ? el.dataset.value : el.value
             };
-            payload[el.name] = el.value;
+            payload[el.name] = el.classList.contains(`--select`) ? el.dataset.value : el.value;
             if (!valid) {
                 if (_error == null && errors) {
                     _error = el;
@@ -136,13 +139,19 @@ const Form = forwardRef((props, ref) => {
     };
     useImperativeHandle(ref, () => ({
         setLoading(mod) {
+            if (mod) {
+                sheet.current.hide();
+            }
             setLoading(mod);
         },
         showError(errorMsg) {
             sheet.current.show(errorMsg, 4, SHEET.Error);
+        },
+        hideError() {
+            sheet.current.hide();
         }
     }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
+    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet, as: `toast-form` }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

package/dist/comps/heading.d.ts

@@ -1,9 +1,7 @@
 import { ReactNode } from "react";
-import { animationProps } from "./base";
+import { BaseProps } from "../types/interfaces";
 declare const Heading: import("react").ForwardRefExoticComponent<{
-    as?: string;
     h?: number | string;
     html?: ReactNode | string;
-    animate?: animationProps;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+} & BaseProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Heading;

package/dist/comps/heading.js

@@ -2,7 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import With from "./base";
 const Heading = forwardRef((props, ref) => {
-    const { as, h, html, children, ...rest } = props;
-    return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : children });
+    const { as, h, html, ...rest } = props;
+    return _jsx(With, { tag: `h${h || 1}`, as: as, ref: ref, ...rest, children: props.children ?
+            props.html ? _jsx("span", { ...({ dangerouslySetInnerHTML: { __html: html } }) }) : props.children
+            : null });
 });
 export default Heading;

package/dist/comps/progressbar.d.ts

@@ -0,0 +1,11 @@
+import { BaseProps } from "../types/interfaces";
+import { PROGRESS } from "../types/enums";
+export interface ProgressBarProps {
+    progress: number;
+    type?: PROGRESS;
+}
+export interface ProgressHandler {
+    setWidth?: (w: number) => void;
+}
+declare const ProgressBar: import("react").ForwardRefExoticComponent<ProgressBarProps & BaseProps & import("react").RefAttributes<ProgressHandler>>;
+export default ProgressBar;

package/dist/comps/progressbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import With from "./base";
+const ProgressBar = forwardRef((props, ref) => {
+    const { as } = props;
+    const bar = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setWidth: (progress) => {
+            bar.current.style.width = `${progress * 100}%`;
+        }
+    }), []);
+    return _jsx(With, { className: `--progress flex rel`, as: as, children: _jsx(With, { ref: bar, className: `--bar rel` }) });
+});
+export default ProgressBar;

package/dist/comps/select.js

@@ -19,14 +19,13 @@ const Select = forwardRef((props, ref) => {
             setChoosing(false);
         });
     }, []);
-    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { popovertarget: _id, tag: `button`, as: as, className: `zuz-select rel flex aic`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { popover: "true", id: _id, className: `zuz-select-options abs flex cols`, style: {
+    return _jsxs(With, { className: `zuz-select-wrap rel`, children: [_jsxs(With, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, name: name, tag: `button`, as: as, className: `zuz-select rel flex aic --select`, ref: _ref, onClick: (e) => setChoosing(true), ...rest, children: [_jsx(With, { tag: `h2`, className: `zuz-selected`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), chevronExpand()] }), _jsx(With, { id: _id, className: `zuz-select-options abs flex cols`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
-                    from: { height: 0, opacity: 0 },
-                    to: { height: `auto`, opacity: 1 },
+                    from: { y: 5, opacity: 0 },
+                    to: { y: 0, opacity: 1 },
                     when: choosing,
-                    curve: `spring`,
-                    duration: .4
+                    duration: .05
                 }, children: options.map((o) => _jsx(With, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, tag: `button`, children: `string` == typeof o ? o : o.label }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`)) })] });
 });
 export default Select;

package/dist/comps/sheet.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 import { BaseProps } from "../types/interfaces";
 export interface SheetProps {
     title?: string;
@@ -8,10 +8,13 @@ export interface SheetProps {
     curve?: TRANSITION_CURVES;
     speed?: Number;
     type?: SHEET;
+    actionPosition?: SHEET_ACTION_POSITION;
 }
 export interface SheetActionHandler {
+    key?: string;
     label: string;
-    handler: () => void;
+    handler?: () => void;
+    onClick?: () => void;
 }
 export interface SheetHandler {
     showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler[], onShow?: () => void) => void;

package/dist/comps/sheet.js

@@ -2,22 +2,24 @@
 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 { SHEET, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { SHEET, SHEET_ACTION_POSITION, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 import Cover from "./cover";
 import { animationTransition } from "../funs/css";
-import useComponentEditor from "../hooks/useCompEditor";
 import ComponentEditor from "./editor";
+import { uuid } from "../funs";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
-    const { as, transition, curve, speed, editor, type, ...rest } = props;
-    const _editor = useComponentEditor();
+    const { as, transition, curve, speed, editor, type, actionPosition, ...rest } = props;
+    const sheetID = useMemo(() => uuid(), []);
     const [visible, setVisible] = useState(false);
     const [title, setTitle] = useState(``);
     const [msg, setMsg] = useState(``);
     const [action, setAction] = useState(null);
     const [_errorType, setErrorType] = useState(type || SHEET.Default);
     const [loading, setLoading] = useState(false);
+    const [render, setRender] = useState(true);
+    const _render = useRef(null);
     const divRef = useRef(null);
     const lastTransform = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -41,7 +43,13 @@ const Sheet = forwardRef((props, ref) => {
             setMsg(message);
             setTitle(title);
             if (action)
-                setAction(action);
+                setAction(action.reduce((ar, b) => {
+                    ar.push({
+                        ...b,
+                        key: b.key || uuid()
+                    });
+                    return ar;
+                }, []));
             setVisible(true);
             setTimeout(() => onShow ? onShow() : () => { }, 1000);
         },
@@ -167,17 +175,25 @@ const Sheet = forwardRef((props, ref) => {
         }
     }), []);
     useEffect(() => {
-    }, []);
+        if (_render.current)
+            clearTimeout(_render.current);
+        if (!visible) {
+            _render.current = setTimeout(() => setRender(false), 1000);
+        }
+        else {
+            setRender(true);
+        }
+    }, [visible]);
     if (_errorType == SHEET.Dialog) {
         return _jsxs(_Fragment, { children: [_jsx(With, { "aria-hidden": !visible, className: `zuz-overlay fixed fill`, animate: {
                         transition: TRANSITIONS.FadeIn,
                         when: visible,
                         duration: 0.1,
-                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel`, children: msg }), action && _jsx(With, { className: `sheet-footer flex aic rel`, children: action.map((a, i) => _jsx(With, { onClick: a.handler, tag: `button`, as: `sheet-action-btn`, children: a.label })) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
+                    } }), _jsxs(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_jsx(Cover, { ...({ when: loading }) }), _jsxs(With, { className: `sheet-head flex aic rel`, children: [_jsx(With, { className: `sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `sheet-closer abs`, children: "\u00D7" })] }), _jsx(With, { className: `sheet-body flex aic rel ${action ? `` : `--no-action`}`.trim(), children: render ? msg : null }), action && _jsx(With, { className: `sheet-footer flex aic rel ${actionPosition ? actionPosition == SHEET_ACTION_POSITION.Center ? `jcc` : `` : `jce`}`, children: action.map((a, i) => _jsx(With, { onClick: (e) => a.handler ? a.handler() : a.onClick ? a.onClick() : console.log(`onClick Handler missing`), tag: `button`, as: `sheet-action-btn`, children: a.label }, `sheet-${sheetID}-action-${a.key}`)) })] }), props.editor && visible && _jsx(ComponentEditor, { element: `.zuz-sheet`, title: `Sheet`, attrs: {
                         ...sheetProps,
                         ...(_errorType == SHEET.Dialog ? dialogProps : toastProps)
                     } })] });
     }
-    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
+    return _jsx(With, { animate: buildAnimation(), as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} abs`.trim(), ...rest, ref: divRef, children: visible ? msg : null });
 });
 export default Sheet;

package/dist/comps/tabview.d.ts

@@ -1,14 +1,18 @@
 import { ReactNode } from "react";
 import { BaseProps } from "../types/interfaces";
 export interface Tab {
-    onSelect: (index: number) => void;
-    label: string;
+    onSelect: (tab: Tab, index: number) => void;
+    tag?: string;
+    key?: string;
+    label: string | ReactNode | ReactNode[];
     body: string | ReactNode | ReactNode[];
     render?: boolean;
 }
 export interface TabViewProps {
+    onChange?: (tab: Tab, index: number) => void;
     speed?: number;
     tabs: Tab[];
+    prerender?: boolean;
 }
 export interface TabViewHandler {
     setTab: (index: number) => void;

package/dist/comps/tabview.js

@@ -5,27 +5,37 @@ import { uuid } from "../funs";
 import { useResizeObserver } from "../hooks";
 import ComponentEditor from "./editor";
 const TabView = forwardRef((props, ref) => {
-    const { as, tabs, speed, ...rest } = props;
+    const { as, tabs: _tabs, speed, prerender, onChange, ...rest } = props;
+    const tabs = useMemo(() => _tabs.reduce((ts, t) => {
+        ts.push({
+            ...t,
+            key: t.key || uuid()
+        });
+        return ts;
+    }, []), [_tabs]);
     const tabview = useRef(null);
     const tabViewID = useMemo(() => uuid(), []);
     const [activeTab, setActiveTab] = useState(0);
     const size = useResizeObserver(tabview);
+    const render = useMemo(() => prerender == undefined || prerender == true ? true : false, []);
     const handleTabClick = (index) => {
         setActiveTab(index);
     };
     useEffect(() => {
+        onChange && onChange(tabs[0], 0);
     }, []);
     return _jsxs(_Fragment, { children: [_jsxs(With, { ref: tabview, className: `tabview flex cols`, ...rest, children: [_jsx(With, { className: `tab-head flex aic`, children: tabs.map((tab, index) => _jsx(With, { tag: `button`, className: `tab-label rel ${index === activeTab ? 'active' : ''}`.trim(), onClick: () => {
                                 handleTabClick(index);
-                                tab.onSelect && tab.onSelect(index);
-                            }, children: tab.label }, `tab-label-${tabViewID}-${index}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
+                                tab.onSelect && tab.onSelect(tab, index);
+                                onChange && onChange(tab, index);
+                            }, children: tab.label }, `tab-${tabViewID}-${tab.key}`)) }), _jsx(With, { className: `tab-content rel`, children: _jsx(With, { className: `tabs-track flex aic`, style: { transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)` }, children: tabs.map((tab, index) => {
                                 return _jsx(With, { className: `tab-body rel`, style: {
                                         width: size.width,
                                         minWidth: size.width,
                                         maxWidth: size.width,
                                         opacity: index === activeTab ? 1 : 0,
                                         transition: 'opacity 0.5s ease',
-                                    }, children: tab.body }, `tab-body-${tabViewID}-${index}`);
+                                    }, children: (render || activeTab == index) && tab.body }, `tab-body-${tabViewID}-${tab.key}`);
                             }) }) })] }), props.editor && _jsx(ComponentEditor, { element: `.tabview`, title: `TabView`, attrs: {
                     "@group-Head": {
                         label: "Head",

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import { BaseProps } from "../../types/interfaces";
+export interface TreeNodeIcons {
+    dirOpen: ReactNode;
+    dirClose: ReactNode;
+    arrowOpen: ReactNode;
+    arrowClose: ReactNode;
+}
+export interface TreeViewProps {
+    tag?: string;
+    roots: string[];
+    nodes: TreeNode[];
+    onSelect: (tag: string) => void;
+    icons?: TreeNodeIcons;
+    selected?: string;
+}
+export interface TreeViewHandler {
+    getSelected?: () => String;
+}
+export interface TreeNode {
+    tag: string;
+    label: string;
+    under?: string;
+    selected?: string;
+    expanded?: boolean;
+}
+declare const TreeView: import("react").ForwardRefExoticComponent<TreeViewProps & BaseProps & import("react").RefAttributes<TreeViewHandler>>;
+export default TreeView;

package/dist/comps/treeview/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+import With from "../base";
+import TreeItem from "./item";
+const TreeView = forwardRef((props, ref) => {
+    const { as, nodes, onSelect, tag: treeViewTag, icons, roots, selected: _selected, ...rest } = props;
+    const [selected, setSelected] = useState(_selected);
+    useImperativeHandle(ref, () => ({
+        getSelected: () => selected
+    }), [onSelect]);
+    const handleSelect = (tag) => {
+        setSelected(tag);
+        onSelect && onSelect(tag);
+    };
+    useEffect(() => {
+        if (selected != _selected) {
+            setSelected(_selected);
+        }
+    }, [_selected]);
+    return _jsx(With, { className: `treeview flex cols`, children: nodes
+            .filter(node => roots.includes(node.tag))
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: handleSelect, icons: icons, meta: node, nodes: nodes }, `tree-node-${node.tag}`)) });
+});
+export default TreeView;

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

@@ -0,0 +1,15 @@
+import { TreeNode, TreeNodeIcons } from ".";
+import { BaseProps } from "../../types/interfaces";
+export interface TreeItemProps {
+    treeTag: string;
+    meta: TreeNode;
+    nodes: TreeNode[];
+    onSelect: (tag: string) => void;
+    selected?: String;
+    icons?: TreeNodeIcons;
+}
+export interface TreeItemHandler {
+    onSelect?: (v: TreeNode) => void;
+}
+declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & BaseProps & import("react").RefAttributes<TreeItemHandler>>;
+export default TreeItem;

package/dist/comps/treeview/item.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import With from "../base";
+const TreeItem = forwardRef((props, ref) => {
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
+    const { tag, label, under } = meta;
+    const [isOpen, setIsOpen] = useState(tag == `root`);
+    const toggle = () => {
+        localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
+        setIsOpen(!isOpen);
+    };
+    useEffect(() => {
+        if (tag == `root` && !localStorage.getItem(`--tn${treeTag}-${tag}`)) {
+            localStorage.setItem(`--tn${treeTag}-${tag}`, `1`);
+            setIsOpen(true);
+        }
+        else
+            setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
+    }, []);
+    const _nodes = nodes.filter(x => x.under == tag);
+    return _jsxs(With, { as: `tree-node tree-node-${tag} flex cols`, children: [_jsxs(With, { as: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(With, { tag: `button`, onClick: toggle, className: `--node-aro-btn`, children: _jsx(With, { className: `--node-aro-icon icon-${isOpen ? icons?.arrowOpen : icons?.arrowClose}` }) }), _jsxs(With, { tag: `button`, className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [_jsx(With, { className: `--node-icon icon-${isOpen ? icons?.dirOpen : icons?.dirClose}` }), _jsx(With, { tag: `h1`, className: `--node-label`, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(With, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, meta: node, nodes: nodes }, `tree-node-${node.tag}`)) })] });
+});
+export default TreeItem;

package/dist/funs/css.js

@@ -55,7 +55,7 @@ class CSS {
             "@before", "@after", "@active", "@checked", "@default", "@disabled", "@empty", "@enabled", "@first", "@firstChild", "@firstOfType", "@focus", "@hover", "@indeterminate", "@inRange", "@invalid", "@lastChild", "@lastOfType", "@link", "@not", "@nthChild", "@nthLastChild", "@nthLastOfType", "@nthOfType", "@onlyChild", "@onlyOfType", "@optional", "@outOfRange", "@readOnly", "@readWrite", "@required", "@root", "@scope", "@target", "@valid", "@visited"
         ];
         this.IGNORE = [
-            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`
+            `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`
         ];
         this.keysWithoutCommaToSpace = [
             `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
@@ -546,7 +546,7 @@ class CSS {
                             _out = _out.replace(`;`, `${important};`);
                         }
                         else {
-                            const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`;
+                            const __value = `${val}${self.IGNORE.includes(key) ? `` : self.makeUnit(key, val)}`;
                             _out = self.DIRECT[key].includes(`__VALUE__`) ?
                                 self.DIRECT[key].replace(/__VALUE__/g, __value).replace(`;`, `${important};`) : self.DIRECT[key];
                         }

package/dist/funs/index.d.ts

@@ -1,5 +1,5 @@
 import CSS from './css.js';
-import { dynamicObject } from "../types/index.js";
+import { dynamicObject, sortOptions } from "../types/index.js";
 import { FormatNumberParams } from "../types/interfaces.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
@@ -9,6 +9,10 @@ export declare const fromHash: (n: string) => number;
 export declare const css: () => CSS;
 export declare const uuid: (len?: number) => string;
 export declare const numberInRange: (min: number, max: number) => number;
+export declare const toLowerCase: {
+    (locales?: string | string[]): string;
+    (locales?: Intl.LocalesArgument): string;
+};
 export declare const hexColorRegex: RegExp;
 export declare const rgbaColorRegex: RegExp;
 export declare const hslColorRegex: RegExp;
@@ -35,4 +39,6 @@ export declare const withTime: (fun: (...args: any[]) => any) => {
 export declare const time: (stamp?: number, format?: string) => string;
 export declare const arrayRand: (arr: any[]) => any;
 export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;
+export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
+export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;

package/dist/funs/index.js

@@ -6,6 +6,7 @@ import Hashids from "hashids";
 import { nanoid } from "nanoid";
 import Cookies from "js-cookie";
 import moment from "moment";
+import { SORT } from "../types/enums.js";
 let __css;
 export const __SALT = `zuzjs-ui`;
 export const FIELNAME_KEY = `__FILENAME__`;
@@ -17,6 +18,7 @@ export const uuid = (len) => nanoid(len);
 export const numberInRange = (min, max) => {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
+export const toLowerCase = String.prototype.toLocaleLowerCase || String.prototype.toLowerCase;
 export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
 export const rgbaColorRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*((0|1|0?\.\d+)\s*))?\)$/;
 export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
@@ -59,6 +61,9 @@ export const cleanProps = (props, withProps = []) => {
             delete _props[k];
         }
     });
+    if (`skeleton` in _extras && _extras.skeleton.enabled == true) {
+        delete _props[`children`];
+    }
     _extras.map(x => x in _props && delete _props[x]);
     return _props;
 };
@@ -190,6 +195,16 @@ export const formatNumber = ({ number, locale = 'en-US', style = `decimal`, deci
         maximumFractionDigits: +number % 1 > 0 ? 2 : 0
     }).format(+number);
 };
+export const formatSize = (bytes) => {
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const _bytes = `string` == typeof bytes ? parseFloat(bytes) : bytes;
+    if (_bytes == 0)
+        return '0 Byte';
+    const _i = Math.floor(Math.log(_bytes) / Math.log(1024));
+    const i = `string` == typeof _i ? parseInt(_i) : _i;
+    const nx = _bytes / Math.pow(1024, i);
+    return nx.toFixed(2) + ' ' + sizes[i];
+};
 export const copyToClipboard = (text) => {
     if (navigator.clipboard && navigator.clipboard.writeText) {
         return navigator.clipboard.writeText(text);
@@ -213,3 +228,98 @@ export const copyToClipboard = (text) => {
         });
     }
 };
+export const natsort = (options = {
+    direction: SORT.Asc,
+    caseSensitive: false,
+}) => {
+    const ore = /^0/;
+    const sre = /\s+/g;
+    const tre = /^\s+|\s+$/g;
+    const ure = /[^\x00-\x80]/;
+    const hre = /^0x[0-9a-f]+$/i;
+    const nre = /(0x[\da-fA-F]+|(^[\+\-]?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?(?=\D|\s|$))|\d+)/g;
+    const dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/;
+    const GREATER = options.direction == SORT.Desc ? -1 : 1;
+    const SMALLER = -GREATER;
+    const _normalize = !options.caseSensitive
+        ? (s) => toLowerCase.call(`${s}`).replace(tre, '')
+        : (s) => (`${s}`).replace(tre, '');
+    const _tokenize = (s) => {
+        return s.replace(nre, '\0$1\0')
+            .replace(/\0$/, '')
+            .replace(/^\0/, '')
+            .split('\0');
+    };
+    const _parse = (s, l) => {
+        return (!s.match(ore) || l === 1) &&
+            parseFloat(s)
+            || s.replace(sre, ' ').replace(tre, '')
+            || 0;
+    };
+    return function (a, b) {
+        const aa = _normalize(a);
+        const bb = _normalize(b);
+        if (!aa && !bb) {
+            return 0;
+        }
+        if (!aa && bb) {
+            return SMALLER;
+        }
+        if (aa && !bb) {
+            return GREATER;
+        }
+        const aArr = _tokenize(aa);
+        const bArr = _tokenize(bb);
+        const aHex = aa.match(hre);
+        const bHex = bb.match(hre);
+        const av = (aHex && bHex) ? parseInt(aHex[0], 16) : (aArr.length !== 1 && Date.parse(aa));
+        const bv = (aHex && bHex)
+            ? parseInt(bHex[0], 16)
+            : av && bb.match(dre) && Date.parse(bb) || null;
+        if (bv) {
+            if (av === bv) {
+                return 0;
+            }
+            if (typeof av === 'number' && typeof bv === 'number' && av < bv) {
+                return SMALLER;
+            }
+            if (typeof av === 'number' && av > bv) {
+                return GREATER;
+            }
+        }
+        const al = aArr.length;
+        const bl = bArr.length;
+        for (let i = 0, l = Math.max(al, bl); i < l; i += 1) {
+            const af = _parse(aArr[i] || '', al);
+            const bf = _parse(bArr[i] || '', bl);
+            if (isNaN(af) !== isNaN(bf)) {
+                return isNaN(af) ? GREATER : SMALLER;
+            }
+            if (ure.test(af + bf) && af.localeCompare) {
+                const comp = af.localeCompare(bf);
+                if (comp > 0) {
+                    return GREATER;
+                }
+                if (comp < 0) {
+                    return SMALLER;
+                }
+                if (i === l - 1) {
+                    return 0;
+                }
+            }
+            if (af < bf) {
+                return SMALLER;
+            }
+            if (af > bf) {
+                return GREATER;
+            }
+            if (`${af}` < `${bf}`) {
+                return SMALLER;
+            }
+            if (`${af}` > `${bf}`) {
+                return GREATER;
+            }
+        }
+        return 0;
+    };
+};

package/dist/funs/stylesheet.js

@@ -292,6 +292,7 @@ export const cssDirect = {
     "block": "display: block;",
     "inlineblock": "display: inline-block;",
     "blur": "filter: blur(__VALUE__);",
+    "saturate": "filter: saturate(__VALUE__);",
     "ratio": "aspect-ratio: __VALUE__;",
     "center-h": "left: 50%;transform: translateX(-50%);",
     "center-v": "top: 50%;transform: translateY(-50%);",

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
 export * from "./hooks";
+export * from "./types/enums";
 export { default as PubSub } from "./funs/events";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
@@ -14,9 +15,10 @@ export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as ProgressBar } from "./comps/progressbar";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
 export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
-export { CHECKBOX, DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";
+export { default as TreeView } from "./comps/treeview";

package/dist/index.js

@@ -1,6 +1,7 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
 export * from "./hooks";
+export * from "./types/enums";
 export { default as PubSub } from "./funs/events";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
@@ -14,9 +15,10 @@ export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as ProgressBar } from "./comps/progressbar";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
 export { default as TabView } from "./comps/tabview";
 export { default as TextWheel } from "./comps/textwheel";
-export { CHECKBOX, DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";
+export { default as TreeView } from "./comps/treeview";

package/dist/styles.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--max-z-index: 2147483647;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 17px;--checkbox-radius: 6px;--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--tab-head: #fff;--tab-head-padding: 3px 3px 0px 3px;--tab-head-radius: 6px 6px 0px 0px;--tab: #eee;--tab-active: #ccc;--tab-active-color: #111;--tab-hover: #ddd;--tab-color: #111;--tab-radius: 5px 5px 0px 0px;--tab-padding: 5px 20px;--tab-body: #fff;--tab-body-radius: 0px 5px 5px 5px;--tab-body-padding: 0px;--tab-border: 1px #ddd solid;--sheet-bg: #fff;--sheet-radius: 10px;--sheet-padding: 6px 12px;--sheet-head-padding: 10px;--sheet-body-padding: 10px;--sheet-footer: #ddd;--sheet-footer-padding: 10px;--sheet-action: #222;--sheet-action-color: #fff;--sheet-action-hover: #333;--sheet-action-radius: 7px;--sheet-action-padding: 7px 20px;--sheet-action-font-size: 16px;--sheet-action-font-weight: bold;--sheet-closer-color: #111;--sheet-closer-hover: rgba(255,255,255,0.2);--sheet-closer-opacity: 0.75;--sheet-closer-hover-opacity: 1;--sheet-font-size: 15px;--sheet-title-opacity: 0.75;--sheet-title-font-size: 16px;--sheet-closer-font-size: 36px;--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}.checkbox{height:var(--checkbox-size);width:var(--checkbox-size);cursor:pointer;border:1px var(--checkbox-unchecked) solid;border-radius:var(--checkbox-radius);overflow:hidden}.checkbox input[type=checkbox]{z-index:0;opacity:0}.checkbox:before{font-size:var(--checkbox-check-size);color:var(--checkbox-check-color);opacity:0}.checkbox.is-checked{background-color:var(--checkbox-checked);border:1px var(--checkbox-checked) solid}.checkbox.is-checked:before{opacity:1}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:2147483645;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius);overflow:hidden}.zuz-sheet .sheet-head{padding:var(--sheet-head-padding)}.zuz-sheet .sheet-head .sheet-title{flex:1;font-size:var(--sheet-title-font-size);opacity:var(--sheet-title-opacity);text-align:center;padding:0px 45px;display:flex;align-items:center;justify-content:center}.zuz-sheet .sheet-head .sheet-dot{flex:1}.zuz-sheet .sheet-head .sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--sheet-closer-font-size);color:var(--sheet-closer-color);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:var(--sheet-closer-opacity);top:15px;right:5px;transform:translateY(-50%);font-size:var(--sheet-closer-font-size)}.zuz-sheet .sheet-head .sheet-closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.zuz-sheet .sheet-body{padding:var(--sheet-body-padding)}.zuz-sheet .sheet-footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer)}.zuz-sheet .sheet-footer .sheet-action-btn{background:var(--sheet-action);color:var(--sheet-action-color);border-radius:var(--sheet-action-radius);padding:var(--sheet-action-padding);font-size:var(--sheet-action-font-size);font-weight:var(--sheet-action-font-weight);border:0px}.zuz-sheet .sheet-footer .sheet-action-btn:hover{background:var(--sheet-action-hover)}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}@position-try --zuz-select-bottom{top:anchor(bottom);bottom:unset;margin-block:calc(var(--zuz-select-height) + var(--zuz-select-gap)) 0}.zuz-selectk-wrap{width:100%}.zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;anchor-name:--zuz-select-anchor}.zuz-select:hover{background:var(--select-hover)}.zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-options{--zuz-select-height: 30px;--zuz-select-gap: 0px;position-anchor:--zuz-select-anchor;position-try:most-height --zuz-select-bottom;width:100%;max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}.tabview .tab-head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.tabview .tab-head .tab-label{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color)}.tabview .tab-head .tab-label.active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.tabview .tab-head .tab-label.active:hover{background:var(--tab-active)}.tabview .tab-head .tab-label:hover{background:var(--tab-hover)}.tabview .tab-content{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.tabview .tab-content .tabs-track{transform-style:flat}.tabview .tab-content .tab-body{width:100%;background:var(--tab-body);padding:var(--tab-body-padding)}.comp-editor{top:10px;left:10px;border-radius:10px;z-index:var(--max-z-index)}.comp-editor .pencil{width:40px;height:40px;background:#fff;border-radius:50%;border:0px}.comp-editor .pencil img{width:50%}.comp-editor .pencil span{font-size:36px;color:#111;line-height:.8}.comp-editor .editor-props{background:#fff;border-radius:10px;left:60px;top:10px;width:350px;overflow:hidden;box-shadow:0px 0px 0px 1px #ccc,0px 0px 0px 5px #eaeaea}.comp-editor .editor-props .editor-head{background:#ddd;padding:4px 12px;font-size:14px}.comp-editor .editor-props .editor-head .head-label{flex:1}.comp-editor .editor-props .editor-head .head-action{display:flex;flex:1;gap:5px;align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-head .head-action button{background:#333;border:0px;font-size:12px;color:#fff;font-weight:bold;padding:2px 10px;border-radius:10px}.comp-editor .editor-props .editor-head .head-action button:hover{background:#222}.comp-editor .editor-props .editor-body{padding:12px;max-height:70vh;overflow-x:hidden;overflow-y:auto;gap:5px}.comp-editor .editor-props .editor-body textarea{flex:1 1;width:100%;border:0px;background:#ebebeb;padding:15px;min-height:290px;color:#111;border-radius:10px;resize:none}.comp-editor .editor-props .editor-body .copy{top:20px;right:20px;z-index:2;border-radius:10px;border:0px;padding:3px 10px;background:var(--primary)}.comp-editor .editor-props .editor-body .group{margin-top:10px}.comp-editor .editor-props .editor-body .group .gprops{gap:5px}.comp-editor .editor-props .editor-body .group .glabel{background:#333;align-self:flex-start;font-weight:bold;font-size:12px;border-radius:5px 5px 0px 0px;padding:2px 5px;transform:translateX(5px);color:#f1f1f1}.comp-editor .editor-props .editor-body .gprop,.comp-editor .editor-props .editor-body .prop{flex:1;padding:6px 0px;font-size:13px;background:#f7f7f7;padding:5px 10px;border-radius:5px}.comp-editor .editor-props .editor-body .gprop .pop,.comp-editor .editor-props .editor-body .prop .pop{flex:1;white-space:pre}.comp-editor .editor-props .editor-body .gprop .pop:nth-child(2),.comp-editor .editor-props .editor-body .prop .pop:nth-child(2){align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-body .gprop .pop input,.comp-editor .editor-props .editor-body .prop .pop input{flex:1;width:70px;max-width:70px;min-width:70px;border:0px;background:#777;padding:4px;border-radius:4px;margin-left:5px}.comp-editor .editor-props .editor-body .gprop .pop input[type=color],.comp-editor .editor-props .editor-body .prop .pop input[type=color]{background:rgba(0,0,0,0);border-radius:5px;padding:0px;appearance:none}.comp-editor .editor-props .editor-body .gprop .pop .l-k,.comp-editor .editor-props .editor-body .prop .pop .l-k{font-size:10px;color:#777}
+*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none;cursor:auto}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--max-z-index: 2147483647;--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--checkbox-height: 24px;--checkbox-width: 42px;--checkbox-knob-size: 20px;--checkbox-knob-left: 2px;--checkbox-knob-top: 2px;--checkbox-knob-left-on: 18px;--checkbox-check-color: #fff;--checkbox-check-size: 13px;--checkbox-size: 17px;--checkbox-radius: 6px;--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px;--select-width: auto;--select: #eee;--select-font-size: 16px;--select-hover: #e6e6e6;--select-options: #eee;--select-options-top: 0.1rem;--select-options-padding: 4px;--select-option-color: #111;--select-option-hover: #ddd;--select-selected: #ccc;--select-padding: 6px 8px;--select-radius: 5px;--cover-bg: rgba(255,255,255,0.8);--cover-label: #111;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px;--tab-head: #fff;--tab-head-padding: 3px 3px 0px 3px;--tab-head-radius: 6px 6px 0px 0px;--tab: #eee;--tab-active: #ccc;--tab-active-color: #111;--tab-hover: #ddd;--tab-color: #111;--tab-radius: 5px 5px 0px 0px;--tab-padding: 5px 20px;--tab-body: #fff;--tab-body-radius: 0px 5px 5px 5px;--tab-body-padding: 0px;--tab-border: 1px #ddd solid;--sheet-bg: #fff;--sheet-body: #fff;--sheet-radius: 10px;--sheet-padding: 6px 12px;--sheet-head-padding: 10px;--sheet-body-padding: 10px;--sheet-footer: #ddd;--sheet-footer-padding: 10px;--sheet-action: #222;--sheet-action-color: #fff;--sheet-action-hover: #333;--sheet-action-radius: 7px;--sheet-action-padding: 7px 20px;--sheet-action-font-size: 16px;--sheet-action-font-weight: bold;--sheet-closer-color: #111;--sheet-closer-hover: rgba(255,255,255,0.2);--sheet-closer-opacity: 0.75;--sheet-closer-hover-opacity: 1;--sheet-font-size: 15px;--sheet-title-opacity: 0.75;--sheet-title-font-size: 16px;--sheet-closer-font-size: 36px;--sheet-error: #ff4747;--sheet-warn: #ffba00;--sheet-success: #23ac28;--context-z-index: 99;--context: #fff;--context-border: 0px;--context-radius: 10px;--context-padding: 10px;--context-shadow: 0px 0px 0px 1px #ddd, 0px 0px 0px 3px #eee;--context-seperator: #eee;--context-seperator-height: 1px;--context-seperator-margin: 3px 6px;--context-item-width: 220px;--context-item-padding: 6px 10px;--context-item-gap: 10px;--context-item-font-size: 15px;--context-item-radius: 5px;--context-item-icon-size: 18px;--context-item-hover: #eee;--treeview-gap: 6px;--treenode-gap: 2px;--treenode-arrow-btn-size: 20px;--treenode-arrow-icon-size: 12px;--treenode-arrow-icon-color: #111;--treenode-label-padding: 3px 6px;--treenode-label-radius: 3px 6px;--treenode-label-hover: #f1f1f1;--treenode-label-bg: transparent;--treenode-label-selected-bg: #eee;--treenode-label-selected-color: #111;--treenode-label-icon-color: #111;--treenode-label-icon-size: 15px;--treenode-label-color: #111;--treenode-label-size: 15px;--treenode-label-gap: 6px;--treenode-sub-margin: 20px;--progress-width: 100%;--progress-height: 6px;--progress-radius: 6px;--progress-track: #eee;--progress-bar: #111;--skeleton: #eee;--skeleton-radius: 7px;--shimmer: #ccc;--shimmer-width: 10%;--shimmer-angle: 120deg;--shimmer-speed: 2s;--shimmer-blur: 50px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.aie{align-items:flex-end}.flex.jcc{justify-content:center}.flex.jce{justify-content:flex-end}.flex.jcs{justify-content:flex-start}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.text-wrap,.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}button.ico-btn{gap:5px}button .b-label{flex:1}.checkbox{height:var(--checkbox-size);width:var(--checkbox-size);cursor:pointer;border:1px var(--checkbox-unchecked) solid;border-radius:var(--checkbox-radius);overflow:hidden}.checkbox input[type=checkbox]{z-index:0;opacity:0}.checkbox:before{font-size:var(--checkbox-check-size);color:var(--checkbox-check-color);opacity:0}.checkbox.is-checked{background-color:var(--checkbox-checked);border:1px var(--checkbox-checked) solid}.checkbox.is-checked:before{opacity:1}.zuz-checkbox{height:var(--checkbox-height);width:var(--checkbox-width);cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.zuz-checkbox:before{content:"";position:absolute;height:var(--checkbox-height);width:var(--checkbox-width);background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:var(--checkbox-knob-size);height:var(--checkbox-knob-size);background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:var(--checkbox-knob-top);left:var(--checkbox-knob-left);box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .75s var(--bounce) 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(var(--checkbox-knob-left-on))}@keyframes shimmering{0%{transform:translateX(-100%) rotate(var(--shimmer-angle))}20%{transform:translateX(100%) rotate(var(--shimmer-angle))}100%{transform:translateX(100%) rotate(var(--shimmer-angle))}}.--skeleton{overflow:hidden;border-radius:var(--skeleton-radius);height:1lh;background:var(--skeleton);position:relative}.--skeleton:after{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg, var(--skeleton) 0%, var(--shimmer) 50%, var(--skeleton) 100%);transform:translateX(-100%) rotate(var(--shimmer-angle));animation-name:shimmering;animation-direction:var(--shimmer-direction);animation-duration:var(--shimmer-speed);animation-timing-function:ease-in-out;animation-iteration-count:infinite;filter:blur(var(--shimmer-blur))}.zuz-spinner{animation:spin infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error,.zuz-sheet.toast-default{border-radius:var(--sheet-radius);padding:var(--sheet-padding);font-size:var(--sheet-font-size);white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:2147483645;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.wobble{transform-origin:inherit !important}.zuz-sheet.toast-default{background:#333;color:#fff;top:10px !important}.zuz-sheet.toast-error{background:var(--sheet-error);color:#fff;top:10px}.zuz-sheet.toast-success{background:var(--sheet-success);color:#fff;top:10px}.zuz-sheet.toast-warn{background:var(--sheet-warn);color:#111;top:10px}.zuz-sheet.toast-form{position:absolute !important}.zuz-sheet.toast-dialog{background:var(--sheet-bg);border-radius:var(--sheet-radius)}.zuz-sheet .sheet-head{padding:var(--sheet-head-padding)}.zuz-sheet .sheet-head .sheet-title{flex:1;font-size:var(--sheet-title-font-size);opacity:var(--sheet-title-opacity);text-align:center;padding:0px 45px;display:flex;align-items:center;justify-content:center}.zuz-sheet .sheet-head .sheet-dot{flex:1}.zuz-sheet .sheet-head .sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--sheet-closer-font-size);color:var(--sheet-closer-color);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:var(--sheet-closer-opacity);top:15px;right:5px;transform:translateY(-50%);font-size:var(--sheet-closer-font-size)}.zuz-sheet .sheet-head .sheet-closer:hover{background:var(--sheet-closer-hover);opacity:var(--sheet-closer-hover-opacity)}.zuz-sheet .sheet-body{background:var(--sheet-body);padding:var(--sheet-body-padding)}.zuz-sheet .sheet-body.--no-action{border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer{padding:var(--sheet-footer-padding);background:var(--sheet-footer);border-radius:0px 0px var(--sheet-radius) var(--sheet-radius)}.zuz-sheet .sheet-footer .sheet-action-btn{background:var(--sheet-action);color:var(--sheet-action-color);border-radius:var(--sheet-action-radius);padding:var(--sheet-action-padding);font-size:var(--sheet-action-font-size);font-weight:var(--sheet-action-font-weight);border:0px}.zuz-sheet .sheet-footer .sheet-action-btn:hover{background:var(--sheet-action-hover)}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.context-menu{z-index:var(--context-z-index);background:var(--context);border-radius:var(--context-radius);padding:var(--context-padding);box-shadow:var(--context-shadow)}.context-menu .context-line{height:var(--context-seperator-height);background:var(--context-seperator);margin:var(--context-seperator-margin)}.context-menu .context-menu-item{width:var(--context-item-width);padding:var(--context-item-padding);gap:var(--context-item-gap);cursor:pointer;font-size:var(--context-item-font-size);border-radius:var(--context-item-radius)}.context-menu .context-menu-item .ico{font-size:var(--context-item-icon-size)}.context-menu .context-menu-item:hover{background:var(--context-item-hover)}.zuz-select-wrap{width:var(--select-width);z-index:1}.zuz-select-wrap .zuz-select{width:100%;gap:5px;background:var(--select);border-radius:var(--select-radius);border:0px;padding:12px 15px;font-size:var(--select-font-size)}.zuz-select-wrap .zuz-select:hover{background:var(--select-hover)}.zuz-select-wrap .zuz-select .zuz-selected{flex:1;text-align:left}.zuz-select-wrap .zuz-select-options{backdrop-filter:blur(10px) saturate(0);left:0;top:calc(100% + var(--select-options-top));width:100%;max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:var(--select-options-padding)}.zuz-select-wrap .zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;color:var(--select-option-color);padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-font-size);white-space:pre}.zuz-select-wrap .zuz-select-options button:hover{background:var(--select-option-hover)}.zuz-select-wrap .zuz-select-options button.selected{background:var(--select-selected)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}.tabview .tab-head{gap:1px;background:var(--tab-head);padding:var(--tab-head-padding);border-radius:var(--tab-head-radius)}.tabview .tab-head .tab-label{flex:1;border:0px;background:var(--tab);border-radius:var(--tab-radius);padding:var(--tab-padding);color:var(--tab-color)}.tabview .tab-head .tab-label.active{color:var(--tab-active-color);background:var(--tab-active);transform:translateY(1px)}.tabview .tab-head .tab-label.active:hover{background:var(--tab-active)}.tabview .tab-head .tab-label:hover{background:var(--tab-hover)}.tabview .tab-content{border:var(--tab-border);overflow:hidden;border-radius:var(--tab-body-radius)}.tabview .tab-content .tabs-track{transform-style:flat}.tabview .tab-content .tab-body{width:100%;background:var(--tab-body);padding:var(--tab-body-padding);align-self:baseline}.treeview{gap:var(--treeview-gap)}.treeview .--node{gap:var(--treenode-gap);cursor:pointer}.treeview .--node .--node-aro-btn{width:var(--treenode-arrow-btn-size);height:var(--treenode-arrow-btn-size);border:0px;background:rgba(0,0,0,0);opacity:.6;transition:all .4s linear 0s}.treeview .--node .--node-aro-btn:hover{opacity:1}.treeview .--node .--node-aro-btn .--node-aro-icon{font-size:var(--treenode-arrow-icon-size);color:var(--treenode-arrow-icon-color)}.treeview .--node .--node-meta{background:rgba(0,0,0,0);gap:var(--treenode-label-gap);border:0px}.treeview .--node .--node-meta .--node-icon{font-size:var(--treenode-label-icon-size);color:var(--treenode-label-icon-color)}.treeview .--node .--node-meta .--node-label{background:var(--treenode-label-bg);color:var(--treenode-label-color);font-size:var(--treenode-label-size);padding:var(--treenode-label-padding);border-radius:var(--treenode-label-radius)}.treeview .--node .--node-meta:hover .--node-label{background:var(--treenode-label-hover)}.treeview .--node.--selected .--node-meta .--node-label{background:var(--treenode-label-selected-bg);color:var(--treenode-label-selected-color)}.treeview .--sub-node{margin-top:var(--treeview-gap);gap:var(--treeview-gap);padding-left:var(--treenode-sub-margin)}.--progress{background:var(--progress-track);width:var(--progress-width);height:var(--progress-height);border-radius:var(--progress-radius);overflow:hidden}.--progress .--bar{width:0%;height:var(--progress-heigt);border-radius:var(--progress-radius)}.comp-editor{top:10px;left:10px;border-radius:10px;z-index:var(--max-z-index)}.comp-editor .pencil{width:40px;height:40px;background:#fff;border-radius:50%;border:0px}.comp-editor .pencil img{width:50%}.comp-editor .pencil span{font-size:36px;color:#111;line-height:.8}.comp-editor .editor-props{background:#fff;border-radius:10px;left:60px;top:10px;width:350px;overflow:hidden;box-shadow:0px 0px 0px 1px #ccc,0px 0px 0px 5px #eaeaea}.comp-editor .editor-props .editor-head{background:#ddd;padding:4px 12px;font-size:14px}.comp-editor .editor-props .editor-head .head-label{flex:1}.comp-editor .editor-props .editor-head .head-action{display:flex;flex:1;gap:5px;align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-head .head-action button{background:#333;border:0px;font-size:12px;color:#fff;font-weight:bold;padding:2px 10px;border-radius:10px}.comp-editor .editor-props .editor-head .head-action button:hover{background:#222}.comp-editor .editor-props .editor-body{padding:12px;max-height:70vh;overflow-x:hidden;overflow-y:auto;gap:5px}.comp-editor .editor-props .editor-body textarea{flex:1 1;width:100%;border:0px;background:#ebebeb;padding:15px;min-height:290px;color:#111;border-radius:10px;resize:none}.comp-editor .editor-props .editor-body .copy{top:20px;right:20px;z-index:2;border-radius:10px;border:0px;padding:3px 10px;background:var(--primary)}.comp-editor .editor-props .editor-body .group{margin-top:10px}.comp-editor .editor-props .editor-body .group .gprops{gap:5px}.comp-editor .editor-props .editor-body .group .glabel{background:#333;align-self:flex-start;font-weight:bold;font-size:12px;border-radius:5px 5px 0px 0px;padding:2px 5px;transform:translateX(5px);color:#f1f1f1}.comp-editor .editor-props .editor-body .gprop,.comp-editor .editor-props .editor-body .prop{flex:1;padding:6px 0px;font-size:13px;background:#f7f7f7;padding:5px 10px;border-radius:5px}.comp-editor .editor-props .editor-body .gprop .pop,.comp-editor .editor-props .editor-body .prop .pop{flex:1;white-space:pre}.comp-editor .editor-props .editor-body .gprop .pop:nth-child(2),.comp-editor .editor-props .editor-body .prop .pop:nth-child(2){align-items:flex-end;justify-content:flex-end}.comp-editor .editor-props .editor-body .gprop .pop input,.comp-editor .editor-props .editor-body .prop .pop input{flex:1;width:70px;max-width:70px;min-width:70px;border:0px;background:#777;padding:4px;border-radius:4px;margin-left:5px}.comp-editor .editor-props .editor-body .gprop .pop input[type=color],.comp-editor .editor-props .editor-body .prop .pop input[type=color]{background:rgba(0,0,0,0);border-radius:5px;padding:0px;appearance:none}.comp-editor .editor-props .editor-body .gprop .pop .l-k,.comp-editor .editor-props .editor-body .prop .pop .l-k{font-size:10px;color:#777}

package/dist/types/enums.d.ts

@@ -18,6 +18,11 @@ export declare enum SHEET {
     Success = "SUCCESS",
     Warn = "WARN"
 }
+export declare enum SHEET_ACTION_POSITION {
+    Left = "LEFT",
+    Right = "RIGHT",
+    Center = "CENTER"
+}
 export declare enum TRANSITION_CURVES {
     Spring = "SPRING",
     EaseInOut = "EASEINOUT"
@@ -55,3 +60,15 @@ export declare enum DATATYPE {
     DateTime = "DATETIME",
     File = "FILE"
 }
+export declare enum SORT {
+    Asc = "ASC",
+    Desc = "DESC"
+}
+export declare enum PROGRESS {
+    Bar = "BAR",
+    Ring = "RING"
+}
+export declare enum SKELETON {
+    Default = "DEFAULT",
+    Circle = "CIRCLE"
+}

package/dist/types/enums.js

@@ -22,6 +22,12 @@ export var SHEET;
     SHEET["Success"] = "SUCCESS";
     SHEET["Warn"] = "WARN";
 })(SHEET || (SHEET = {}));
+export var SHEET_ACTION_POSITION;
+(function (SHEET_ACTION_POSITION) {
+    SHEET_ACTION_POSITION["Left"] = "LEFT";
+    SHEET_ACTION_POSITION["Right"] = "RIGHT";
+    SHEET_ACTION_POSITION["Center"] = "CENTER";
+})(SHEET_ACTION_POSITION || (SHEET_ACTION_POSITION = {}));
 export var TRANSITION_CURVES;
 (function (TRANSITION_CURVES) {
     TRANSITION_CURVES["Spring"] = "SPRING";
@@ -65,3 +71,18 @@ export var DATATYPE;
     DATATYPE["DateTime"] = "DATETIME";
     DATATYPE["File"] = "FILE";
 })(DATATYPE || (DATATYPE = {}));
+export var SORT;
+(function (SORT) {
+    SORT["Asc"] = "ASC";
+    SORT["Desc"] = "DESC";
+})(SORT || (SORT = {}));
+export var PROGRESS;
+(function (PROGRESS) {
+    PROGRESS["Bar"] = "BAR";
+    PROGRESS["Ring"] = "RING";
+})(PROGRESS || (PROGRESS = {}));
+export var SKELETON;
+(function (SKELETON) {
+    SKELETON["Default"] = "DEFAULT";
+    SKELETON["Circle"] = "CIRCLE";
+})(SKELETON || (SKELETON = {}));

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import { SORT } from "./enums";
 export type dynamicObject = {
     [x: string]: any;
 };
@@ -23,3 +24,7 @@ declare global {
 export type FormSubmitHandler = (formData: FormData) => void;
 export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 export type zuzProps = `as` | `css` | `hover` | `before` | `after`;
+export type sortOptions = {
+    direction?: SORT;
+    caseSensitive?: boolean;
+};

package/dist/types/interfaces.d.ts

@@ -1,9 +1,19 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { animationProps } from "../comps/base";
+import { SKELETON } from "./enums";
+export interface Skeleton {
+    enabled: boolean;
+    type?: SKELETON;
+    size?: number | string;
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+}
 export interface BaseProps {
     as?: string;
     animate?: animationProps;
     editor?: boolean;
+    skeleton?: Skeleton;
 }
 export interface FormatNumberParams {
     number: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.5.1",
+    "version": "0.5.3",
     "keywords": [
         "react",
         "zuz",