@zuzjs/ui 0.5.3 → 0.5.4

package/dist/bin.js

@@ -85,9 +85,9 @@ const rebuildAll = () => {
     if (files.length > 0) {
         const as = [];
         if (options.file) {
-            const r = rebuild(files.filter(f => f.endsWith(options.file))[0]);
+            const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
             if (r && r.length > 0) {
-                as.push(cssBuilder.Build([r], true).sheet);
+                as.push(cssBuilder.Build([r], true, options.file).sheet);
             }
         }
         else {
@@ -95,7 +95,7 @@ const rebuildAll = () => {
             files.map(f => {
                 const r = rebuild(f);
                 if (r && r.length > 0) {
-                    const _built = cssBuilder.Build([r], true);
+                    const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
                     as.push(_built.sheet);
                     Object.keys(_built.mediaQuery).map(mq => {
                         if (!mediaQueries[mq])

package/dist/comps/alert.d.ts

@@ -0,0 +1,15 @@
+import { BaseProps } from "../types/interfaces";
+import { ALERT } from "../types/enums";
+export interface AlertProps {
+    type?: ALERT;
+    icon?: string;
+    iconSize?: number;
+    message?: string;
+    title: string;
+}
+export interface AlertHandler {
+    open: () => void;
+    close: () => void;
+}
+declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & BaseProps & import("react").RefAttributes<AlertHandler>>;
+export default Alert;

package/dist/comps/alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ALERT } from "../types/enums";
+import With from "./base";
+const Icons = {
+    [ALERT.Info]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M21.56 10.738l-1.35-1.58c-.25-.3-.46-.86-.46-1.26v-1.7c0-1.06-.87-1.93-1.93-1.93h-1.7c-.4 0-.97-.21-1.27-.46l-1.58-1.35c-.69-.59-1.82-.59-2.51 0l-1.6 1.35c-.3.25-.86.46-1.26.46H6.17c-1.06 0-1.93.87-1.93 1.93v1.7c0 .39-.2.95-.45 1.25l-1.35 1.59c-.58.7-.58 1.82 0 2.5l1.35 1.59c.25.29.45.86.45 1.25v1.71c0 1.06.87 1.93 1.93 1.93h1.74c.39 0 .96.21 1.26.46l1.58 1.35c.69.59 1.82.59 2.51 0l1.58-1.35c.3-.25.86-.46 1.26-.46h1.7c1.06 0 1.93-.87 1.93-1.93v-1.7c0-.4.21-.96.46-1.26l1.35-1.58c.61-.68.61-1.81.02-2.51zm-10.31-2.61c0-.41.34-.75.75-.75s.75.34.75.75v4.83c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-4.83zm.75 8.74c-.55 0-1-.45-1-1s.44-1 1-1c.55 0 1 .45 1 1s-.44 1-1 1z" }) }),
+    [ALERT.Warning]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fill: "#292D32", d: "M19.51 5.85l-5.94-3.43c-.97-.56-2.17-.56-3.15 0L4.49 5.85a3.15 3.15 0 00-1.57 2.73v6.84c0 1.12.6 2.16 1.57 2.73l5.94 3.43c.97.56 2.17.56 3.15 0l5.94-3.43a3.15 3.15 0 001.57-2.73V8.58a3.192 3.192 0 00-1.58-2.73zm-8.26 1.9c0-.41.34-.75.75-.75s.75.34.75.75V13c0 .41-.34.75-.75.75s-.75-.34-.75-.75V7.75zm1.67 8.88c-.05.12-.12.23-.21.33a.99.99 0 01-1.09.21c-.13-.05-.23-.12-.33-.21-.09-.1-.16-.21-.22-.33a.986.986 0 01-.07-.38c0-.26.1-.52.29-.71.1-.09.2-.16.33-.21.37-.16.81-.07 1.09.21.09.1.16.2.21.33.05.12.08.25.08.38s-.03.26-.08.38z" }) }),
+    [ALERT.Error]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+    [ALERT.Success]: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) })
+};
+const Alert = forwardRef((props, ref) => {
+    const { type, icon, title, message, iconSize, ...rest } = props;
+    return _jsxs(With, { className: `--alert --${(type || ALERT.Info).toLowerCase()} flex aic`, ...rest, children: [_jsx(With, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { width: iconSize, height: iconSize } : {}, children: !icon && Icons[type || ALERT.Info] }), _jsxs(With, { className: `--meta flex cols`, tag: `h1`, children: [_jsx(With, { className: `--title ${message ? `--tm` : ``}`, tag: `h1`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(With, { className: `--message`, tag: `h2`, children: message })] })] });
+});
+export default Alert;

package/dist/comps/avatar.d.ts

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

package/dist/comps/avatar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AVATAR } from "../types/enums";
+import With from "./base";
+import { useImage } from "../hooks";
+const Avatar = forwardRef((props, ref) => {
+    const { src, size, type, crossOrigin, referrerPolicy, ...rest } = props;
+    const [img, imgStatus, imgError] = useImage(src, crossOrigin, referrerPolicy);
+    return _jsx(With, { tag: `img`, src: img, style: size ? { width: size, height: size } : {}, crossOrigin: crossOrigin, referrerPolicy: referrerPolicy, className: `--avatar --${(type || AVATAR.Circle).toLowerCase()}`, ...rest });
+});
+export default Avatar;

package/dist/comps/drawer.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import With from "./base";
-import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { DRAWER_SIDE, KeyCode, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+import { bindKey } from "../funs";
 const Drawer = forwardRef((props, ref) => {
     const { as, from, speed, children, prerender, ...rest } = props;
     const [render, setRender] = useState(undefined == prerender ? true : prerender);
@@ -11,6 +12,9 @@ const Drawer = forwardRef((props, ref) => {
     useEffect(() => {
         setContent(children);
     }, [children]);
+    useEffect(() => {
+        bindKey(KeyCode.Escape, () => visible && setVisible(false));
+    }, []);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:

package/dist/funs/css.d.ts

@@ -24,6 +24,7 @@ declare class CSS {
     _cli: boolean;
     DIRECT_VALUES: string[];
     PROPS_VALUES: string[];
+    _currentFile: string;
     constructor(options?: dynamicObject | undefined);
     buildMediaQueries(queries: dynamicObject): string;
     styleSheet(cache: dynamicObject, pseudo?: string): string;
@@ -31,12 +32,13 @@ declare class CSS {
     cleanKey(key: string): string;
     deepClean(cache: dynamicObject, level?: number): dynamicObject;
     makeUnit(k: string, v: any): any;
+    makeColor(v: string): string;
     makeValue(k: string, v: any): string;
     calcIndexes(str: string): string;
     makeID(k: string, v: string, _out: string): string;
     lexer(line: string): dynamicObject;
     processLine(line: string): void;
-    Build(css: string | string[][], cli?: boolean): {
+    Build(css: string | string[][], cli?: boolean, ff?: string): {
         cx: string[];
         sheet: string;
         mediaQuery: dynamicObject;

package/dist/funs/css.js

@@ -1,8 +1,9 @@
 import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
-import { cssAnimationCurves, cssDirect, cssProps, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
+import { cssAnimationCurves, cssDirect, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
+import pc from "picocolors";
 class CSS {
     cx;
     cache;
@@ -26,6 +27,7 @@ class CSS {
     _cli;
     DIRECT_VALUES;
     PROPS_VALUES;
+    _currentFile;
     constructor(options) {
         const opts = options || {};
         this._cli = false;
@@ -46,6 +48,7 @@ class CSS {
         };
         this.cx = [];
         this.cache = {};
+        this._currentFile = `?`;
         this.unit = opts.unit || `px`;
         this.seperator = `__@@__`;
         this.hashids = new Hashids(__SALT, 5);
@@ -151,7 +154,9 @@ class CSS {
                 }
             }
         }
-        return scss.join(`\n`);
+        return scss
+            .filter(x => x.trim() != `.{}`)
+            .join(`\n`);
     }
     _styleSheet(cache) {
         const self = this;
@@ -264,7 +269,25 @@ class CSS {
             return ``;
         return this.unit;
     }
+    makeColor(v) {
+        if (v.charAt(0) == `#`) {
+            v = v.substring(1);
+        }
+        if (v.charAt(0) == `$`) {
+            return `var(--${v.replace(`$`, ``)})`;
+        }
+        if (/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(`#${v}`) ||
+            /^#([0-9A-F]{3}){1,2}$/i.test(`#${v}`)) {
+            return `#${v}`;
+        }
+        else if (v.includes(`rgb`) || v.includes(`rgba`)) {
+            return v.replace(`[`, `(`).replace(`]`, `)`);
+        }
+        else
+            return v.trim();
+    }
     makeValue(k, v) {
+        const self = this;
         if (k in this.PROPS) {
             const key = this.PROPS[k];
             let value;
@@ -272,7 +295,28 @@ class CSS {
             let hasImportant = v.charAt(v.length - 1) == `!`;
             v = hasImportant ? v.slice(0, -1) : v;
             let important = hasImportant ? ` !important` : ``;
-            if (v.charAt(0) == `$`) {
+            if (v.startsWith(`gradient`) || v.startsWith(`linear-gradient`) || v.startsWith(`radial-gradient`)) {
+                if (v.startsWith(`gradient`)) {
+                    v = `linear-${v}`;
+                }
+                const [_gtype, _xyz, _gto, _gdeg, ..._colors] = v.split(`-`);
+                const _gdegree = /^[+-]?\d+(\.\d+)?$/.test(_gdeg) ? `${_gdeg}deg` : `to ${_gdeg}`;
+                const _gcolors = _colors.reduce((arr, val) => {
+                    arr.push(self.makeColor(val));
+                    return arr;
+                }, []).join(`, `);
+                switch (_gtype) {
+                    case `linear`:
+                        value = `linear-gradient(${_gdegree}, ${_gcolors})`;
+                        break;
+                    case `radial`:
+                        break;
+                    default:
+                        value = v;
+                        break;
+                }
+            }
+            else if (v.charAt(0) == `$`) {
                 value = `var(--${v.replace(`$`, ``)})`;
             }
             else if (v.trim() == `transparent`) {
@@ -341,7 +385,7 @@ class CSS {
                         if (_.startsWith(`$`)) {
                             __v.push(`var(--${_.substring(1)})`);
                         }
-                        else if (isColor(`#${_}`)) {
+                        else if (cssPropsWithColor.includes(_) && isColor(`#${_}`)) {
                             if (_.includes(`rgb`) || _.includes(`rgba`)) {
                                 __v.push(_.replace(`[`, `(`).replace(`]`, `)`));
                             }
@@ -400,7 +444,8 @@ class CSS {
         const ok = _ok.trim();
         const ov = _ov ? _ov.trim() : v;
         if (ov == ``) {
-            throw new TypeError(`${ok} value is empty.`);
+            console.log(pc.yellow(`[${self._currentFile}]`), pc.cyan(k), pc.red(`value is empty.`));
+            return ``;
         }
         let _cp = ok.charAt(0);
         if (self.PROPS[ok]?.indexOf("-") > -1) {
@@ -424,6 +469,9 @@ class CSS {
                 word = word.replace(/\s+/g, ``);
             if (word == ``)
                 return;
+            if (word[word.length - 1] == `:`) {
+                word = word.slice(0, -1);
+            }
             const _kw = word in self.propCounter ? ++self.propCounter[word] : self.propCounter[word] = 1;
             if (isLevel) {
                 levels.push(`${word}${self.seperator}${_kw}`);
@@ -592,12 +640,13 @@ class CSS {
             self.cache = { ...self.cache, ..._built };
         }
     }
-    Build(css, cli = false) {
+    Build(css, cli = false, ff = ``) {
         let self = this;
         self._cli = cli;
         self.cx = [];
         self.cache = {};
         self._mediaQueries = {};
+        self._currentFile = ff;
         if (undefined == css)
             return {
                 cx: self.cx,
@@ -654,6 +703,15 @@ export const getAnimationCurve = (curve) => {
     if (!curve)
         return `linear`;
     switch (curve.toUpperCase()) {
+        case TRANSITION_CURVES.Bounce:
+            return `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 )`;
+            break;
         case TRANSITION_CURVES.Spring:
             return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
             break;

package/dist/funs/index.d.ts

@@ -1,6 +1,7 @@
 import CSS from './css.js';
 import { dynamicObject, sortOptions } from "../types/index.js";
 import { FormatNumberParams } from "../types/interfaces.js";
+import { KeyCode } from "../types/enums.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
 export declare const LINE_KEY = "__LINE__";
@@ -42,3 +43,4 @@ export declare const formatNumber: ({ number, locale, style, decimal, currency }
 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;
+export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;

package/dist/funs/index.js

@@ -323,3 +323,11 @@ export const natsort = (options = {
         return 0;
     };
 };
+export const bindKey = (key, fun, element) => {
+    const handleKeydown = (event) => {
+        if (key === event.keyCode) {
+            fun();
+        }
+    };
+    (element || document.documentElement).addEventListener('keydown', handleKeydown);
+};

package/dist/funs/stylesheet.d.ts

@@ -1,6 +1,7 @@
 import { dynamicObject } from "../types";
 export declare const cssProps: dynamicObject;
 export declare const cssDirect: dynamicObject;
+export declare const cssPropsWithColor: string[];
 export declare const cssAnimationCurves: dynamicObject;
 export declare const cssAnimationFunctions: dynamicObject;
 export declare const cssTransformKeys: string[];

package/dist/funs/stylesheet.js

@@ -23,6 +23,7 @@ export const cssProps = {
     "backgroundAttachment": "background-attachment",
     "backgroundBlendMode": "background-blend-mode",
     "backgroundClip": "background-clip",
+    "bg-clip": "background-clip",
     "border": "border",
     "borderBottom": "border-bottom",
     "borderBottomColor": "border-bottom-color",
@@ -302,6 +303,56 @@ export const cssDirect = {
     "space-pre": "white-space: pre;",
     "text-wrap": "width: 98%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;",
 };
+export const cssPropsWithColor = [
+    "color",
+    "background",
+    "border",
+    "border-color",
+    "border-top-color",
+    "border-right-color",
+    "border-bottom-color",
+    "border-left-color",
+    "outline-color",
+    "text-decoration-color",
+    "text-shadow",
+    "box-shadow",
+    "fill",
+    "stroke",
+    "stop-color",
+    "caret-color",
+    "column-rule-color",
+    "text-emphasis-color",
+    "accent-color",
+    "border-block-color",
+    "border-inline-color",
+    "column-fill",
+    "marker",
+    "scrollbar-color",
+    "outline-offset-color",
+    "backgroundColor",
+    "borderColor",
+    "borderTopColor",
+    "borderRightColor",
+    "borderBottomColor",
+    "borderLeftColor",
+    "outlineColor",
+    "textDecorationColor",
+    "textShadow",
+    "boxShadow",
+    "fill",
+    "stroke",
+    "stopColor",
+    "caretColor",
+    "columnRuleColor",
+    "textEmphasisColor",
+    "accentColor",
+    "borderBlockColor",
+    "borderInlineColor",
+    "columnFill",
+    "marker",
+    "scrollbarColor",
+    "outlineOffsetColor",
+];
 export const cssAnimationCurves = {
     ease: 'ease',
     in: 'ease-in',

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useImage } from './useImage';
 export { default as useMounted } from './useMounted';
 export { default as useWindowFocus } from './useWindowFocus';
 export { default as useResizeObserver } from './useResizeObserver';

package/dist/hooks/index.js

@@ -1,5 +1,6 @@
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useImage } from './useImage';
 export { default as useMounted } from './useMounted';
 export { default as useWindowFocus } from './useWindowFocus';
 export { default as useResizeObserver } from './useResizeObserver';

package/dist/hooks/useImage.d.ts

@@ -0,0 +1,2 @@
+declare const useImage: (url: 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") => any[];
+export default useImage;

package/dist/hooks/useImage.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from "react";
+const useImage = (url, crossOrigin, referrerPolicy) => {
+    const img = useRef(null);
+    const [state, setState] = useState({ loaded: false, error: null });
+    useEffect(() => {
+        if (url) {
+            var _img = new Image();
+            crossOrigin && (_img.crossOrigin = crossOrigin);
+            referrerPolicy && (_img.referrerPolicy = referrerPolicy);
+            _img.onload = () => {
+                img.current = _img;
+                setState({ loaded: true, error: null });
+            };
+            _img.onerror = () => {
+                setState({ loaded: false, error: `Failed to load image at ${url}` });
+            };
+            _img.src = url;
+        }
+    }, []);
+    return [img.current ? img.current.src : ``, state.loaded, state.error];
+};
+export default useImage;

package/dist/hooks/useKeyBind.d.ts

@@ -0,0 +1,3 @@
+import { KeyCode } from "../types/enums";
+declare const useKeyBind: (key: KeyCode, fun: () => void) => void;
+export default useKeyBind;

package/dist/hooks/useKeyBind.js

@@ -0,0 +1,3 @@
+const useKeyBind = (key, fun) => {
+};
+export default useKeyBind;

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export * from "./funs";
 export * from "./hooks";
 export * from "./types/enums";
 export { default as PubSub } from "./funs/events";
+export { default as Alert } from "./comps/alert";
+export { default as Avatar } from "./comps/avatar";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";

package/dist/index.js

@@ -3,6 +3,8 @@ export * from "./funs";
 export * from "./hooks";
 export * from "./types/enums";
 export { default as PubSub } from "./funs/events";
+export { default as Alert } from "./comps/alert";
+export { default as Avatar } from "./comps/avatar";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";

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-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}
+*,*::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;--zuz-shadow: 0px 0px 0px 1px #d4d4d4, 0px 0px 6px #ccc;--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;--drawer-shadow: var(--zuz-shadow);--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-shadow: var(--zuz-shadow);--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: var(--zuz-shadow);--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;--alert-error: #ffd4d4;--alert-error-color: #ae1313;--alert-info: #bee3f8;--alert-info-color: #2b6cb0;--alert-warning: #feebc8;--alert-warning-color: #c05621;--alert-success: #c6f6d5;--alert-success-color: #2f855a;--alert-padding: 12px;--alert-radius: 10px;--alert-gap: 10px;--avatar-bg: #fff}.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}button .b-label:empty{display:none}.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);box-shadow:var(--sheet-shadow)}.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);box-shadow:var(--select-shadow)}.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);box-shadow:var(--select-options-shadow)}.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);border:var(--drawer-border);box-shadow:var(--drawer-shadow);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}.--alert{padding:var(--alert-padding);border-radius:var(--alert-radius);gap:var(--alert-gap)}.--alert .--icon{width:20px;height:20px}.--alert .--meta{gap:2px}.--alert .--meta .--title.--tm{font-weight:bold}.--alert.--info{background:var(--alert-info);color:var(--alert-info-color)}.--alert.--info path{fill:var(--alert-info-color)}.--alert.--warning{background:var(--alert-warning);color:var(--alert-warning-color)}.--alert.--warning path{fill:var(--alert-warning-color)}.--alert.--error{background:var(--alert-error);color:var(--alert-error-color)}.--alert.--error path{fill:var(--alert-error-color)}.--alert.--success{background:var(--alert-success);color:var(--alert-success-color)}.--alert.--success path{fill:var(--alert-success-color)}.--avatar{background:var(--avatar-bg)}.--avatar.--circle{border-radius:50%}

package/dist/types/enums.d.ts

@@ -25,7 +25,8 @@ export declare enum SHEET_ACTION_POSITION {
 }
 export declare enum TRANSITION_CURVES {
     Spring = "SPRING",
-    EaseInOut = "EASEINOUT"
+    EaseInOut = "EASEINOUT",
+    Bounce = "BOUNCE"
 }
 export declare enum TRANSITIONS {
     FadeIn = "FADE_IN",
@@ -72,3 +73,111 @@ export declare enum SKELETON {
     Default = "DEFAULT",
     Circle = "CIRCLE"
 }
+export declare enum ALERT {
+    Success = "SUCCESS",
+    Error = "ERROR",
+    Warning = "WARNING",
+    Info = "INFO"
+}
+export declare enum AVATAR {
+    Circle = "CIRCLE",
+    Square = "SQUARE"
+}
+export declare enum KeyCode {
+    Backspace = 8,
+    Tab = 9,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    PauseBreak = 19,
+    CapsLock = 20,
+    Escape = 27,
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+    ArrowLeft = 37,
+    ArrowUp = 38,
+    ArrowRight = 39,
+    ArrowDown = 40,
+    Insert = 45,
+    Delete = 46,
+    Digit0 = 48,
+    Digit1 = 49,
+    Digit2 = 50,
+    Digit3 = 51,
+    Digit4 = 52,
+    Digit5 = 53,
+    Digit6 = 54,
+    Digit7 = 55,
+    Digit8 = 56,
+    Digit9 = 57,
+    KeyA = 65,
+    KeyB = 66,
+    KeyC = 67,
+    KeyD = 68,
+    KeyE = 69,
+    KeyF = 70,
+    KeyG = 71,
+    KeyH = 72,
+    KeyI = 73,
+    KeyJ = 74,
+    KeyK = 75,
+    KeyL = 76,
+    KeyM = 77,
+    KeyN = 78,
+    KeyO = 79,
+    KeyP = 80,
+    KeyQ = 81,
+    KeyR = 82,
+    KeyS = 83,
+    KeyT = 84,
+    KeyU = 85,
+    KeyV = 86,
+    KeyW = 87,
+    KeyX = 88,
+    KeyY = 89,
+    KeyZ = 90,
+    Numpad0 = 96,
+    Numpad1 = 97,
+    Numpad2 = 98,
+    Numpad3 = 99,
+    Numpad4 = 100,
+    Numpad5 = 101,
+    Numpad6 = 102,
+    Numpad7 = 103,
+    Numpad8 = 104,
+    Numpad9 = 105,
+    NumpadMultiply = 106,
+    NumpadAdd = 107,
+    NumpadSubtract = 109,
+    NumpadDecimal = 110,
+    NumpadDivide = 111,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    NumLock = 144,
+    ScrollLock = 145,
+    Semicolon = 186,
+    Equal = 187,
+    Comma = 188,
+    Minus = 189,
+    Period = 190,
+    Slash = 191,
+    Backquote = 192,
+    BracketLeft = 219,
+    Backslash = 220,
+    BracketRight = 221,
+    Quote = 222
+}

package/dist/types/enums.js

@@ -32,6 +32,7 @@ export var TRANSITION_CURVES;
 (function (TRANSITION_CURVES) {
     TRANSITION_CURVES["Spring"] = "SPRING";
     TRANSITION_CURVES["EaseInOut"] = "EASEINOUT";
+    TRANSITION_CURVES["Bounce"] = "BOUNCE";
 })(TRANSITION_CURVES || (TRANSITION_CURVES = {}));
 export var TRANSITIONS;
 (function (TRANSITIONS) {
@@ -86,3 +87,114 @@ export var SKELETON;
     SKELETON["Default"] = "DEFAULT";
     SKELETON["Circle"] = "CIRCLE";
 })(SKELETON || (SKELETON = {}));
+export var ALERT;
+(function (ALERT) {
+    ALERT["Success"] = "SUCCESS";
+    ALERT["Error"] = "ERROR";
+    ALERT["Warning"] = "WARNING";
+    ALERT["Info"] = "INFO";
+})(ALERT || (ALERT = {}));
+export var AVATAR;
+(function (AVATAR) {
+    AVATAR["Circle"] = "CIRCLE";
+    AVATAR["Square"] = "SQUARE";
+})(AVATAR || (AVATAR = {}));
+export var KeyCode;
+(function (KeyCode) {
+    KeyCode[KeyCode["Backspace"] = 8] = "Backspace";
+    KeyCode[KeyCode["Tab"] = 9] = "Tab";
+    KeyCode[KeyCode["Enter"] = 13] = "Enter";
+    KeyCode[KeyCode["Shift"] = 16] = "Shift";
+    KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
+    KeyCode[KeyCode["Alt"] = 18] = "Alt";
+    KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
+    KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
+    KeyCode[KeyCode["Escape"] = 27] = "Escape";
+    KeyCode[KeyCode["Space"] = 32] = "Space";
+    KeyCode[KeyCode["PageUp"] = 33] = "PageUp";
+    KeyCode[KeyCode["PageDown"] = 34] = "PageDown";
+    KeyCode[KeyCode["End"] = 35] = "End";
+    KeyCode[KeyCode["Home"] = 36] = "Home";
+    KeyCode[KeyCode["ArrowLeft"] = 37] = "ArrowLeft";
+    KeyCode[KeyCode["ArrowUp"] = 38] = "ArrowUp";
+    KeyCode[KeyCode["ArrowRight"] = 39] = "ArrowRight";
+    KeyCode[KeyCode["ArrowDown"] = 40] = "ArrowDown";
+    KeyCode[KeyCode["Insert"] = 45] = "Insert";
+    KeyCode[KeyCode["Delete"] = 46] = "Delete";
+    KeyCode[KeyCode["Digit0"] = 48] = "Digit0";
+    KeyCode[KeyCode["Digit1"] = 49] = "Digit1";
+    KeyCode[KeyCode["Digit2"] = 50] = "Digit2";
+    KeyCode[KeyCode["Digit3"] = 51] = "Digit3";
+    KeyCode[KeyCode["Digit4"] = 52] = "Digit4";
+    KeyCode[KeyCode["Digit5"] = 53] = "Digit5";
+    KeyCode[KeyCode["Digit6"] = 54] = "Digit6";
+    KeyCode[KeyCode["Digit7"] = 55] = "Digit7";
+    KeyCode[KeyCode["Digit8"] = 56] = "Digit8";
+    KeyCode[KeyCode["Digit9"] = 57] = "Digit9";
+    KeyCode[KeyCode["KeyA"] = 65] = "KeyA";
+    KeyCode[KeyCode["KeyB"] = 66] = "KeyB";
+    KeyCode[KeyCode["KeyC"] = 67] = "KeyC";
+    KeyCode[KeyCode["KeyD"] = 68] = "KeyD";
+    KeyCode[KeyCode["KeyE"] = 69] = "KeyE";
+    KeyCode[KeyCode["KeyF"] = 70] = "KeyF";
+    KeyCode[KeyCode["KeyG"] = 71] = "KeyG";
+    KeyCode[KeyCode["KeyH"] = 72] = "KeyH";
+    KeyCode[KeyCode["KeyI"] = 73] = "KeyI";
+    KeyCode[KeyCode["KeyJ"] = 74] = "KeyJ";
+    KeyCode[KeyCode["KeyK"] = 75] = "KeyK";
+    KeyCode[KeyCode["KeyL"] = 76] = "KeyL";
+    KeyCode[KeyCode["KeyM"] = 77] = "KeyM";
+    KeyCode[KeyCode["KeyN"] = 78] = "KeyN";
+    KeyCode[KeyCode["KeyO"] = 79] = "KeyO";
+    KeyCode[KeyCode["KeyP"] = 80] = "KeyP";
+    KeyCode[KeyCode["KeyQ"] = 81] = "KeyQ";
+    KeyCode[KeyCode["KeyR"] = 82] = "KeyR";
+    KeyCode[KeyCode["KeyS"] = 83] = "KeyS";
+    KeyCode[KeyCode["KeyT"] = 84] = "KeyT";
+    KeyCode[KeyCode["KeyU"] = 85] = "KeyU";
+    KeyCode[KeyCode["KeyV"] = 86] = "KeyV";
+    KeyCode[KeyCode["KeyW"] = 87] = "KeyW";
+    KeyCode[KeyCode["KeyX"] = 88] = "KeyX";
+    KeyCode[KeyCode["KeyY"] = 89] = "KeyY";
+    KeyCode[KeyCode["KeyZ"] = 90] = "KeyZ";
+    KeyCode[KeyCode["Numpad0"] = 96] = "Numpad0";
+    KeyCode[KeyCode["Numpad1"] = 97] = "Numpad1";
+    KeyCode[KeyCode["Numpad2"] = 98] = "Numpad2";
+    KeyCode[KeyCode["Numpad3"] = 99] = "Numpad3";
+    KeyCode[KeyCode["Numpad4"] = 100] = "Numpad4";
+    KeyCode[KeyCode["Numpad5"] = 101] = "Numpad5";
+    KeyCode[KeyCode["Numpad6"] = 102] = "Numpad6";
+    KeyCode[KeyCode["Numpad7"] = 103] = "Numpad7";
+    KeyCode[KeyCode["Numpad8"] = 104] = "Numpad8";
+    KeyCode[KeyCode["Numpad9"] = 105] = "Numpad9";
+    KeyCode[KeyCode["NumpadMultiply"] = 106] = "NumpadMultiply";
+    KeyCode[KeyCode["NumpadAdd"] = 107] = "NumpadAdd";
+    KeyCode[KeyCode["NumpadSubtract"] = 109] = "NumpadSubtract";
+    KeyCode[KeyCode["NumpadDecimal"] = 110] = "NumpadDecimal";
+    KeyCode[KeyCode["NumpadDivide"] = 111] = "NumpadDivide";
+    KeyCode[KeyCode["F1"] = 112] = "F1";
+    KeyCode[KeyCode["F2"] = 113] = "F2";
+    KeyCode[KeyCode["F3"] = 114] = "F3";
+    KeyCode[KeyCode["F4"] = 115] = "F4";
+    KeyCode[KeyCode["F5"] = 116] = "F5";
+    KeyCode[KeyCode["F6"] = 117] = "F6";
+    KeyCode[KeyCode["F7"] = 118] = "F7";
+    KeyCode[KeyCode["F8"] = 119] = "F8";
+    KeyCode[KeyCode["F9"] = 120] = "F9";
+    KeyCode[KeyCode["F10"] = 121] = "F10";
+    KeyCode[KeyCode["F11"] = 122] = "F11";
+    KeyCode[KeyCode["F12"] = 123] = "F12";
+    KeyCode[KeyCode["NumLock"] = 144] = "NumLock";
+    KeyCode[KeyCode["ScrollLock"] = 145] = "ScrollLock";
+    KeyCode[KeyCode["Semicolon"] = 186] = "Semicolon";
+    KeyCode[KeyCode["Equal"] = 187] = "Equal";
+    KeyCode[KeyCode["Comma"] = 188] = "Comma";
+    KeyCode[KeyCode["Minus"] = 189] = "Minus";
+    KeyCode[KeyCode["Period"] = 190] = "Period";
+    KeyCode[KeyCode["Slash"] = 191] = "Slash";
+    KeyCode[KeyCode["Backquote"] = 192] = "Backquote";
+    KeyCode[KeyCode["BracketLeft"] = 219] = "BracketLeft";
+    KeyCode[KeyCode["Backslash"] = 220] = "Backslash";
+    KeyCode[KeyCode["BracketRight"] = 221] = "BracketRight";
+    KeyCode[KeyCode["Quote"] = 222] = "Quote";
+})(KeyCode || (KeyCode = {}));

package/dist/types/index.d.ts

@@ -28,3 +28,6 @@ export type sortOptions = {
     direction?: SORT;
     caseSensitive?: boolean;
 };
+export type KeyBindings = {
+    [key: string]: () => void;
+};

package/package.json

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