@zuzjs/ui 0.4.3 → 0.4.5

package/dist/comps/animate.d.ts

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

package/dist/comps/animate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import With from "./base";
+const Animate = forwardRef((props, ref) => {
+    const { as, ...rest } = props;
+    return _jsx(With, { as: as, ...rest, ref: ref });
+});
+export default Animate;

package/dist/comps/cover.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import With from "./base";
 import Spinner from "./spinner";
 const Cover = forwardRef((props, ref) => {
-    const { spinner, message, color, as, ...rest } = props;
+    const { spinner, message, color, as, when, ...rest } = props;
     if (`when` in props && props.when == false) {
         return null;
     }

package/dist/comps/select.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import With from "./base";
 import { uuid } from "../funs";
@@ -19,7 +19,7 @@ const Select = forwardRef((props, ref) => {
             setChoosing(false);
         });
     }, []);
-    return _jsxs(_Fragment, { 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.value : 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, { 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: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { height: 0, opacity: 0 },

package/dist/comps/sheet.js

@@ -41,6 +41,15 @@ const Sheet = forwardRef((props, ref) => {
             setVisible(true);
             setTimeout(() => onShow ? onShow() : () => { }, 1000);
         },
+        error(message, duration) {
+            this.show(message, duration, SHEET.Error);
+        },
+        warn(message, duration) {
+            this.show(message, duration, SHEET.Warn);
+        },
+        success(message, duration) {
+            this.show(message, duration, SHEET.Success);
+        },
         show(message, duration, type) {
             if (_sheetTimeout) {
                 clearTimeout(_sheetTimeout);

package/dist/funs/css.d.ts

@@ -19,6 +19,11 @@ declare class CSS {
     mediaQueries: dynamicObject;
     _mediaQueries: dynamicObject;
     _mediaQueriesLabels: dynamicObject;
+    PROPS_KEYS: string[];
+    DIRECT_KEYS: string[];
+    _cli: boolean;
+    DIRECT_VALUES: string[];
+    PROPS_VALUES: string[];
     constructor(options?: dynamicObject | undefined);
     buildMediaQueries(queries: dynamicObject): string;
     styleSheet(cache: dynamicObject, pseudo?: string): string;
@@ -28,7 +33,8 @@ declare class CSS {
     makeUnit(k: string, v: any): any;
     makeValue(k: string, v: any): string;
     calcIndexes(str: string): string;
-    mmakeID(k: string, v: string, _out: string): string;
+    makeID2(k: string, v: string, _out: string): string;
+    makeID3(k: string, v: string, _out: string): string;
     makeID(k: string, v: string, _out: string): string;
     lexer(line: string): dynamicObject;
     processLine(line: string): void;

package/dist/funs/css.js

@@ -2,6 +2,7 @@ import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep
 import { cssAnimationCurves, cssDirect, cssProps, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
+import md5 from "md5";
 class CSS {
     cx;
     cache;
@@ -20,8 +21,14 @@ class CSS {
     mediaQueries;
     _mediaQueries;
     _mediaQueriesLabels;
+    PROPS_KEYS;
+    DIRECT_KEYS;
+    _cli;
+    DIRECT_VALUES;
+    PROPS_VALUES;
     constructor(options) {
         const opts = options || {};
+        this._cli = false;
         this._mediaQueries = {};
         this._mediaQueriesLabels = {
             ph: `Extra Small Devices (Phones)`,
@@ -42,7 +49,7 @@ class CSS {
         this.unit = opts.unit || `px`;
         this.seperator = `__@@__`;
         this.hashids = new Hashids(__SALT, 5);
-        this.chars = "#@_-[]{}();:^/!^&*+='\"`,.~abcdefghijklmnopqrstuvwxyz0123456789";
+        this.chars = "#@_-[]{}();:^/!^&*+='\"`,.~%abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
         this.rgbaRegex = /\b\w+\[\d+,\d+,\d+(?:,\d+)?\]/g;
         this.pseudoList = [
             "@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"
@@ -58,7 +65,18 @@ class CSS {
         this.propCounter = {};
         this.ids = [];
         this.PROPS = cssProps;
+        this.PROPS_KEYS = Object.keys(cssProps);
+        this.PROPS_VALUES = this.PROPS_KEYS.reduce((arr, k) => {
+            arr.push(cssProps[k]);
+            return arr;
+        }, []);
         this.DIRECT = cssDirect;
+        this.DIRECT_KEYS = Object.keys(cssDirect);
+        this.DIRECT_VALUES = this.DIRECT_KEYS.reduce((arr, k) => {
+            if (!cssDirect[k].includes(`__VALUE__`))
+                arr.push(cssDirect[k].replace(/\s+/g, ``));
+            return arr;
+        }, []);
     }
     buildMediaQueries(queries) {
         const self = this;
@@ -345,15 +363,76 @@ class CSS {
         }
         return _indices.join(``);
     }
-    mmakeID(k, v, _out) {
-        const cs = [];
-        const out = this.calcIndexes(k) + this.calcIndexes(v) + this.calcIndexes(_out);
-        console.log(this.hashids.encode(out));
-        cs.push(out.charAt(0).match(/\d+/g) ? `z` : ``, out);
-        return cs.join(``);
+    makeID2(k, v, _out) {
+        const self = this;
+        let _ = [];
+        const out = _out.replace(/\s+/g, ``).trim();
+        const _mi = (_k, _v) => {
+            let i = Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k));
+            _.push(i);
+            const nums = _v.match(/[0-9]/g);
+            if (nums) {
+                let ii = Math.abs(+nums.join(``));
+                _.push(ii);
+                i += ii;
+            }
+            const abc = _v.match(/[a-zA-Z,/-\[\]]/g);
+            if (abc) {
+                const ai = abc.reduce((acc, char) => acc + self.chars.indexOf(char), 0);
+                _.push(ai);
+                i += ai;
+            }
+            return i;
+        };
+        const [_ok, _ov] = out.split(`:`);
+        const ok = _ok.trim();
+        const ov = _ov.trim();
+        let _cp = ok.charAt(0);
+        if (self.PROPS[ok]?.indexOf("-") > -1) {
+            _cp = "";
+            self.PROPS[ok].split("-").map((c) => _cp += c.charAt(0));
+        }
+        const io = self.DIRECT_VALUES.includes(out) ? self.DIRECT_VALUES.indexOf(out) : _mi(ok, ov);
+        const id = `${_cp}${self.hashids.encode(io, _mi(k, v))}`;
+        return id;
+    }
+    makeID3(k, v, _out) {
+        const self = this;
+        const md = md5(_out);
+        let _ = [];
+        const _mi = (_k, _v) => {
+            let i = Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k));
+            _.push(i);
+            const nums = _v.match(/[0-9]/g);
+            if (nums) {
+                let ii = Math.abs(+nums.join(``));
+                _.push(ii);
+                i += ii;
+            }
+            const abc = _v.match(/[a-zA-Z,/-\[\]]/g);
+            if (abc) {
+                const ai = abc.reduce((acc, char) => acc + self.chars.indexOf(char), 0);
+                _.push(ai);
+                i += ai;
+            }
+            return i;
+        };
+        const out = _out.replace(/\s+/g, ``).trim();
+        const [_ok, _ov] = out.split(`:`);
+        const ok = _ok.trim();
+        const ov = _ov.trim();
+        let _cp = ok.charAt(0);
+        if (self.PROPS[ok]?.indexOf("-") > -1) {
+            _cp = "";
+            self.PROPS[ok].split("-").map((c) => _cp += c.charAt(0));
+        }
+        const io = self.DIRECT_VALUES.includes(out) ? self.DIRECT_VALUES.indexOf(out) : _mi(ok, ov);
+        const ai = md.split(``).reduce((acc, char) => acc + self.chars.indexOf(char), 0);
+        return `${_cp}${self.hashids.encode(io, ai)}`;
     }
     makeID(k, v, _out) {
         const self = this;
+        return self.makeID3(k, v, _out);
         const _css = _out.toString().replace(/;|:|\s/g, "");
         let _indices = 0;
         for (let i = 0; i < _css.length; i++) {
@@ -479,6 +558,7 @@ class CSS {
                         }
                         else if (key == `ratio`) {
                             _out = self.DIRECT[key].replace(`__VALUE__`, val.replace(`,`, `/`));
+                            _out = _out.replace(`;`, `${important};`);
                         }
                         else if (key == `anim`) {
                             let delay = `0s`;
@@ -502,6 +582,7 @@ class CSS {
                                 .replace(`__VALUE__`, duration)
                                 .replace(`__CURVE__`, curve)
                                 .replace(`__DELAY__`, delay);
+                            _out = _out.replace(`;`, `${important};`);
                         }
                         else {
                             const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`;
@@ -552,6 +633,7 @@ class CSS {
     }
     Build(css, cli = false) {
         let self = this;
+        self._cli = cli;
         self.cx = [];
         self.cache = {};
         self._mediaQueries = {};

package/dist/funs/index.d.ts

@@ -32,3 +32,8 @@ export declare const useDevice: () => {
     isTablet: boolean;
     isDesktop: boolean;
 };
+export declare const withTime: (fun: (...args: any[]) => any) => {
+    result: any;
+    executionTime: number;
+};
+export declare const time: (stamp?: number, format?: string) => string;

package/dist/funs/index.js

@@ -5,6 +5,7 @@ import { colorNames } from "./colors.js";
 import Hashids from "hashids";
 import { nanoid } from "nanoid";
 import Cookies from "js-cookie";
+import moment from "moment";
 let __css;
 export const __SALT = `zuzjs-ui`;
 export const FIELNAME_KEY = `__FILENAME__`;
@@ -163,3 +164,17 @@ export const useDevice = () => {
         isDesktop: !mobile && !tablet
     };
 };
+export const withTime = (fun) => {
+    const start = new Date().getTime();
+    const result = fun();
+    const end = new Date().getTime();
+    return {
+        result,
+        executionTime: end - start
+    };
+};
+export const time = (stamp, format) => {
+    return stamp ?
+        moment.unix(+stamp / 1000).format(format || `YYYY-MM-DD HH:mm:ss`)
+        : moment().format(format || `YYYY-MM-DD HH:mm:ss`);
+};

package/dist/funs/stylesheet.js

@@ -277,9 +277,9 @@ export const cssDirect = {
     "pv": "padding-top:__VALUE__;padding-bottom:__VALUE__;",
     "mh": "margin-left:__VALUE__;margin-right:__VALUE__;",
     "mv": "margin-top:__VALUE__;margin-bottom:__VALUE__;",
-    "translate": "transform:translate(__VALUE__);",
-    "translateX": "transform:translateX(__VALUE__);",
-    "translateY": "transform:translateY(__VALUE__);",
+    "translate": "transform: translate(__VALUE__);",
+    "translateX": "transform: translateX(__VALUE__);",
+    "translateY": "transform: translateY(__VALUE__);",
     "rotate": "transform: rotate(__VALUE__);",
     "scale": "transform: scale(__VALUE__);",
     "anim": "transition: all __VALUE__ __CURVE__ __DELAY__;",

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useMounted } from './useMounted';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export { default as useMounted } from './useMounted';

package/dist/hooks/useMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useMounted: (delay?: number) => boolean;
+export default useMounted;

package/dist/hooks/useMounted.js

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+const useMounted = (delay = 100) => {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => setMounted(true), delay);
+        return () => clearTimeout(timer);
+    }, [delay]);
+    return mounted;
+};
+export default useMounted;

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { withZuz as css } from './funs';
+export * from "./funs";
+export * from "./hooks";
 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

@@ -1,4 +1,6 @@
 export { withZuz as css } from './funs';
+export * from "./funs";
+export * from "./hooks";
 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}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}[popover]{margin:0;padding:0;border:0}:root{--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;--dialog-bg: #fff;--dialog-radius: 10px;--dialog-padding: 10px;--dialog-title-font-size: 16px;--dialog-closer-font-size: 36px;--dialog-closer-hover: rgba(255,255,255,0.2)}.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}.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}.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:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;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:#ff4747;color:#fff;top:10px}.zuz-sheet.toast-success{background:#23ac28;color:#fff;top:10px}.zuz-sheet.toast-warn{background:#ffba00;top:10px}.zuz-sheet.toast-dialog{background:var(--dialog-bg);border-radius:var(--dialog-radius);padding:var(--dialog-padding);overflow:hidden}.zuz-sheet .zuz-sheet-head{margin-bottom:20px}.zuz-sheet .zuz-sheet-head .zuz-sheet-title{flex:1;font-size:var(--dialog-title-font-size);opacity:.5;text-align:center;padding:0px 45px}.zuz-sheet .zuz-sheet-head .zuz-sheet-dot{flex:1}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--dialog-closer-font-size);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:.35;top:50%;right:0px;transform:translateY(-50%)}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer:hover{background:var(--dialog-closer-hover);opacity:1}.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)}.zuz-select{gap:5px;background:var(--select);border-radius:var(--select-radius)}.zuz-select .zuz-selected{flex:1}.zuz-select-options{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)}
+*,*::before,*::after{box-sizing:border-box}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}[popover]{margin:0;padding:0;border:0}:root{--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;--dialog-bg: #fff;--dialog-radius: 10px;--dialog-padding: 10px;--dialog-title-font-size: 16px;--dialog-closer-font-size: 36px;--dialog-closer-hover: rgba(255,255,255,0.2);--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}.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}.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:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;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(--dialog-bg);border-radius:var(--dialog-radius);padding:var(--dialog-padding);overflow:hidden}.zuz-sheet .zuz-sheet-head{margin-bottom:20px}.zuz-sheet .zuz-sheet-head .zuz-sheet-title{flex:1;font-size:var(--dialog-title-font-size);opacity:.5;text-align:center;padding:0px 45px}.zuz-sheet .zuz-sheet-head .zuz-sheet-dot{flex:1}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer{width:32px;height:32px;cursor:pointer;font-size:var(--dialog-closer-font-size);background:rgba(0,0,0,0);border:0px;line-height:0;padding:0px;font-weight:normal;border-radius:20px;opacity:.35;top:50%;right:0px;transform:translateY(-50%)}.zuz-sheet .zuz-sheet-head .zuz-sheet-closer:hover{background:var(--dialog-closer-hover);opacity:1}.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)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.3",
+    "version": "0.4.5",
     "keywords": [
         "react",
         "zuz",
@@ -18,8 +18,7 @@
     },
     "exports": {
         ".": "./dist/index.js",
-        "./styles": "./dist/styles.css",
-        "./funs": "./dist/funs/index.js"
+        "./styles": "./dist/styles.css"
     },
     "files": [
         "dist"
@@ -33,12 +32,14 @@
         "node": ">=18.17.0"
     },
     "dependencies": {
+        "@types/md5": "^2.3.5",
         "axios": "^1.7.6",
         "chokidar": "^3.6.0",
         "commander": "^12.1.0",
         "hashids": "^2.3.0",
         "js-cookie": "^3.0.5",
         "md5": "^2.3.0",
+        "moment": "^2.30.1",
         "nanoid": "^5.0.7",
         "picocolors": "^1.0.1",
         "react": "19.0.0-beta-26f2496093-20240514",