@zuzjs/ui 0.4.2 → 0.4.4

package/README.md

@@ -0,0 +1 @@
+# zuzjs-ui

package/dist/bin.js

@@ -91,12 +91,23 @@ const rebuildAll = () => {
             }
         }
         else {
+            const mediaQueries = {};
             files.map(f => {
                 const r = rebuild(f);
                 if (r && r.length > 0) {
-                    as.push(cssBuilder.Build([r], true).sheet);
+                    const _built = cssBuilder.Build([r], true);
+                    as.push(_built.sheet);
+                    Object.keys(_built.mediaQuery).map(mq => {
+                        if (!mediaQueries[mq])
+                            mediaQueries[mq] = [];
+                        mediaQueries[mq] = [
+                            ...mediaQueries[mq],
+                            ..._built.mediaQuery[mq]
+                        ];
+                    });
                 }
             });
+            as.push(cssBuilder.buildMediaQueries(mediaQueries));
         }
         const sheet = as.join(`\n`);
         if (!fs.existsSync(path.join(process.cwd(), `src`, `app`, `css`))) {

package/dist/comps/base.d.ts

@@ -1,12 +1,14 @@
 import { ComponentPropsWithoutRef, ElementType } from "react";
 import { dynamicObject } from "../types";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 export interface animationProps {
+    transition?: TRANSITIONS;
     from?: dynamicObject;
     to?: dynamicObject;
     when?: boolean;
     duration?: number;
     delay?: number;
-    curve?: string;
+    curve?: string | TRANSITION_CURVES;
 }
 interface BaseProps<T extends ElementType> {
     tag?: T;

package/dist/comps/base.js

@@ -1,23 +1,23 @@
 import { createElement, forwardRef } from "react";
 import { css, cleanProps } from "../funs";
-import { buildWithStyles, getAnimationCurve } from "../funs/css";
+import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
 const With = forwardRef(({ tag, as, animate, className, propsToRemove, style, ...rest }, ref) => {
     const Comp = tag || 'div';
     let cx = [];
     if (as) {
         cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
     }
-    const { from, to, when, duration, delay, curve } = animate || {};
+    const { transition, from, to, when, duration, delay, curve } = animate || {};
     let _style = {};
-    const _transition = from && to ? { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` } : {};
+    const _transition = transition || (from && to) ? { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` } : {};
     if (undefined === when) {
-        _style = { ...from, ...to };
+        _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
     }
     else if (true === when) {
-        _style = { ...(to || {}) };
+        _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
     }
     else {
-        _style = from || {};
+        _style = transition ? getAnimationTransition(transition, false, true) : from || {};
     }
     return createElement(Comp, {
         style: {

package/dist/comps/cover.d.ts

@@ -8,6 +8,7 @@ export interface CoverProps extends ComponentPropsWithoutRef<`div`> {
     color?: string;
     as?: string;
     animate?: animationProps;
+    when?: boolean;
 }
 declare const Cover: import("react").ForwardRefExoticComponent<CoverProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Cover;

package/dist/comps/cover.js

@@ -2,11 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import With from "./base";
 import Spinner from "./spinner";
-import { hexToRgba } from "../funs";
 const Cover = forwardRef((props, ref) => {
-    const { spinner, message, color, as, ...rest } = props;
-    return (_jsxs(With, { className: `zuz-cover flex aic jcc cols abs fill`, ref: ref, style: {
-            backgroundColor: color ? !color.startsWith(`#`) ? hexToRgba(color, .9) : color : hexToRgba(color || `#ffffff`, .9)
-        }, as: as, ...rest, children: [_jsx(Spinner, { ...spinner }), _jsx(With, { tag: `h1`, className: `label`, children: message || `loading` })] }));
+    const { spinner, message, color, as, when, ...rest } = props;
+    if (`when` in props && props.when == false) {
+        return null;
+    }
+    return (_jsxs(With, { className: `zuz-cover flex aic jcc cols abs fillx nope nous`, ref: ref, style: {
+            backgroundColor: `var(--cover-bg)`
+        }, as: as, ...rest, children: [_jsx(Spinner, { ...{
+                    ...spinner
+                } }), _jsx(With, { tag: `h1`, className: `label`, style: { color: `var(--cover-label)` }, children: message || `loading` })] }));
 });
 export default Cover;

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.d.ts

@@ -7,8 +7,12 @@ export interface SheetProps {
     title?: string;
     message?: string | ReactNode;
 }
+export interface SheetActionHandler {
+    label: string;
+    handler: () => void;
+}
 export interface SheetHandler {
-    showDialog: (message: string | ReactNode, onShow: () => void) => void;
+    showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler, onShow?: () => void) => void;
     show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
     hide: () => void;
 }

package/dist/comps/sheet.js

@@ -1,18 +1,26 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import With from "./base";
 import { SHEET } from "../types/enums";
+import Cover from "./cover";
 let _sheetTimeout = null;
 let _sheetWobbleTimeout = null;
 const Sheet = forwardRef((props, ref) => {
     const { as, ...rest } = props;
     const [visible, setVisible] = useState(false);
+    const [title, setTitle] = useState(``);
     const [msg, setMsg] = useState(``);
+    const [action, setAction] = useState(null);
     const [_errorType, setErrorType] = useState(SHEET.Default);
+    const [loading, setLoading] = useState(false);
     const divRef = useRef(null);
+    const lastTransform = useRef(null);
     useImperativeHandle(ref, () => ({
-        showDialog(message, onShow) {
+        setLoading(mode) {
+            setLoading(mode);
+        },
+        showDialog(title, message, action, onShow) {
             if (_sheetTimeout) {
                 clearTimeout(_sheetTimeout);
                 if (_sheetWobbleTimeout) {
@@ -27,19 +35,37 @@ const Sheet = forwardRef((props, ref) => {
             }
             setErrorType(SHEET.Dialog);
             setMsg(message);
+            setTitle(title);
+            if (action)
+                setAction(action);
             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);
                 if (_sheetWobbleTimeout) {
                     clearTimeout(_sheetWobbleTimeout);
                 }
+                lastTransform.current = divRef.current.style.transform;
+                divRef.current.style.transform = ``;
                 divRef.current.classList.remove(`wobble`);
-                setTimeout(() => divRef.current.classList.add(`wobble`), 50);
+                setTimeout(() => {
+                    divRef.current.classList.add(`wobble`);
+                    divRef.current.style.transform = `${lastTransform.current} scale(.9)`.trim();
+                }, 50);
                 _sheetWobbleTimeout = setTimeout(() => {
                     divRef.current.classList.remove(`wobble`);
+                    divRef.current.style.transform = lastTransform.current || ``;
                     _sheetWobbleTimeout = null;
                 }, 500);
             }
@@ -63,7 +89,7 @@ const Sheet = forwardRef((props, ref) => {
                     to: { y: 0, opacity: 1 },
                     when: visible,
                     duration: 0.1,
-                } }), _jsx(With, { animate: _errorType == SHEET.Dialog ? {
+                } }), _jsxs(With, { animate: _errorType == SHEET.Dialog ? {
                     from: { scale: 0, x: `-50%`, y: `-50%`, opacity: 0 },
                     to: { scale: 1, x: `-50%`, y: `-50%`, opacity: 1 },
                     when: visible,
@@ -77,6 +103,8 @@ const Sheet = forwardRef((props, ref) => {
                     duration: 0.3,
                     delay: 0.1,
                     curve: `spring`
-                }, as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: visible && msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg })] });
+                }, as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} fixed`.trim(), ...rest, ref: divRef, children: [_errorType == SHEET.Dialog && _jsx(Cover, { ...({
+                            when: loading,
+                        }) }), _errorType == SHEET.Dialog && _jsxs(With, { className: `zuz-sheet-head flex aic rel`, children: [_jsx(With, { className: `zuz-sheet-${title ? `title` : `dot`}`, children: title || `` }), _jsx(With, { tag: `button`, onClick: (e) => setVisible(false), className: `zuz-sheet-closer abs`, children: "\u00D7" })] }), visible && msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg] })] });
 });
 export default Sheet;

package/dist/comps/spinner.js

@@ -7,8 +7,8 @@ const Spinner = forwardRef((props, ref) => {
     const { as, type, width, speed, size, color, background, foreground, ...rest } = props;
     const defaultColor = `#000000`;
     const buildSimple = () => {
-        const c = hexToRgba(color || defaultColor);
-        const bg = hexToRgba(color || defaultColor, .3);
+        const c = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor);
+        const bg = color && color.startsWith(`var`) ? color : hexToRgba(color || defaultColor, .3);
         const pops = {
             width: size || 50,
             height: size || 50,

package/dist/funs/css.d.ts

@@ -1,5 +1,6 @@
 import { dynamicObject } from "../types";
 import Hashids from "hashids";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 declare class CSS {
     cx: string[];
     cache: dynamicObject;
@@ -15,7 +16,11 @@ declare class CSS {
     seperator: string;
     pseudoList: string[];
     ids: string[];
+    mediaQueries: dynamicObject;
+    _mediaQueries: dynamicObject;
+    _mediaQueriesLabels: dynamicObject;
     constructor(options?: dynamicObject | undefined);
+    buildMediaQueries(queries: dynamicObject): string;
     styleSheet(cache: dynamicObject, pseudo?: string): string;
     _styleSheet(cache: dynamicObject): string;
     cleanKey(key: string): string;
@@ -30,8 +35,10 @@ declare class CSS {
     Build(css: string | string[][], cli?: boolean): {
         cx: string[];
         sheet: string;
+        mediaQuery: dynamicObject;
     };
 }
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
-export declare const getAnimationCurve: (curve?: string) => string;
+export declare const getAnimationCurve: (curve?: string | TRANSITION_CURVES) => string;
+export declare const getAnimationTransition: (transition: TRANSITIONS, to?: boolean, from?: boolean) => dynamicObject;

package/dist/funs/css.js

@@ -1,6 +1,7 @@
 import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
 import { cssAnimationCurves, cssDirect, cssProps, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 class CSS {
     cx;
     cache;
@@ -16,8 +17,26 @@ class CSS {
     seperator;
     pseudoList;
     ids;
+    mediaQueries;
+    _mediaQueries;
+    _mediaQueriesLabels;
     constructor(options) {
         const opts = options || {};
+        this._mediaQueries = {};
+        this._mediaQueriesLabels = {
+            ph: `Extra Small Devices (Phones)`,
+            sm: `Small Devices (Tablets)`,
+            md: `Medium Devices (Small Laptops)`,
+            lg: `Large Devices (Laptops and Desktops)`,
+            xl: `Extra Large Devices (Large Desktops)`,
+        };
+        this.mediaQueries = {
+            ph: `(max-width: 599px)`,
+            sm: `(min-width: 600px) and (max-width: 767px)`,
+            md: `(min-width: 768px) and (max-width: 991px)`,
+            lg: `(min-width: 992px) and (max-width: 1199px)`,
+            xl: `(min-width: 1200px)`,
+        };
         this.cx = [];
         this.cache = {};
         this.unit = opts.unit || `px`;
@@ -41,25 +60,59 @@ class CSS {
         this.PROPS = cssProps;
         this.DIRECT = cssDirect;
     }
+    buildMediaQueries(queries) {
+        const self = this;
+        const scss = [`\n`];
+        Object.keys(queries).forEach((key) => {
+            scss.push(`/**\n*${self._mediaQueriesLabels[key]}\n*/`);
+            scss.push(`@media screen and ${self.mediaQueries[key]}{`);
+            scss.push(queries[key].join(`\n`));
+            scss.push(`}`);
+        });
+        return scss.join(`\n`);
+    }
     styleSheet(cache, pseudo = ``) {
         const self = this;
         const scss = [];
         const build = (key, value) => {
-            let css = `${self.pseudoList.includes(`@${key}`) ? `&:` : `.`}${key}{`;
-            if (`object` == typeof value) {
-                for (const prop in value) {
-                    if (`object` == typeof value[prop]) {
-                        css += build(prop, value[prop]);
+            const __build = (_key, _value) => {
+                let _css = `${self.pseudoList.includes(`@${_key}`) ? `&:` : `.`}${_key}{`;
+                if (`object` == typeof _value) {
+                    for (const prop in _value) {
+                        if (`object` == typeof _value[prop]) {
+                            _css += __build(prop, _value[prop]);
+                        }
+                        else {
+                            _css += _value[prop];
+                        }
+                    }
+                }
+                else {
+                    _css += _value;
+                }
+                _css += `}`;
+                return _css;
+            };
+            let css = ``;
+            if (`object` == typeof value && Object.keys(value)[0] in this.mediaQueries) {
+                const mq = Object.keys(value)[0];
+                let __css = `.${key}{`;
+                const _value = value[mq];
+                for (const prop in _value) {
+                    if (`object` == typeof _value[prop]) {
+                        __css += __build(prop, _value[prop]);
                     }
                     else {
-                        css += value[prop];
+                        __css += _value[prop];
                     }
                 }
+                __css += `}`;
+                this._mediaQueries[mq] = this._mediaQueries[mq] || [];
+                this._mediaQueries[mq].push(__css);
             }
             else {
-                css += value;
+                css += __build(key, value);
             }
-            css += `}`;
             return css;
         };
         for (const key in cache) {
@@ -168,7 +221,8 @@ class CSS {
                 const _id = `z${self.hashids.encode(_indices)}`;
                 if (!_[_id]) {
                     const cleaned = self.deepClean(cache[_k], level + 1);
-                    if (level == 0 && self.pseudoList.includes(`@${__k}`)) {
+                    if (level == 0 &&
+                        (self.pseudoList.includes(`@${__k}`) || __k in self.mediaQueries)) {
                         self.cx.push(_id);
                         _[_id] = { [__k]: cleaned };
                     }
@@ -388,6 +442,17 @@ class CSS {
         }
         else {
             const value = (_k, pseudo = ``) => {
+                let _mediaQuery = null;
+                if (_k.includes(`@`)) {
+                    const [_x, _y] = _k.split(`@`);
+                    _k = _x;
+                    _mediaQuery = _y;
+                    if (_y.includes(`:`)) {
+                        const [_a, _b] = _y.split(`:`);
+                        _k = `${_x}:${_b}`;
+                        _mediaQuery = _a;
+                    }
+                }
                 if (_k.includes(`:`)) {
                     const [key, _val] = _k.split(`:`);
                     if (key in self.PROPS) {
@@ -395,6 +460,10 @@ class CSS {
                         const _id = self.makeID(key, _val + pseudo, _out);
                         if (pseudo == ``)
                             self.cx.push(_id);
+                        if (_mediaQuery) {
+                            self.mediaQueries[_mediaQuery].push({ [_id]: _out });
+                            return {};
+                        }
                         return { [_id]: _out };
                     }
                     else if (key in self.DIRECT) {
@@ -408,6 +477,9 @@ class CSS {
                                 return acc;
                             }, []).join(`,`);
                         }
+                        else if (key == `ratio`) {
+                            _out = self.DIRECT[key].replace(`__VALUE__`, val.replace(`,`, `/`));
+                        }
                         else if (key == `anim`) {
                             let delay = `0s`;
                             let curve = `linear`;
@@ -439,6 +511,10 @@ class CSS {
                         const _id = self.makeID(key, key + pseudo, _out);
                         if (pseudo == ``)
                             self.cx.push(_id);
+                        if (_mediaQuery) {
+                            self.mediaQueries[_mediaQuery].push({ [_id]: _out });
+                            return {};
+                        }
                         return { [_id]: _out };
                     }
                 }
@@ -447,6 +523,10 @@ class CSS {
                     const _id = self.makeID(_k, _k + pseudo, _out);
                     if (pseudo == ``)
                         self.cx.push(_id);
+                    if (_mediaQuery) {
+                        self.mediaQueries[_mediaQuery].push({ [_id]: _out });
+                        return {};
+                    }
                     return { [_id]: _out };
                 }
                 else if (_k.trim().match(/^[a-zA-Z0-9\-]+$/g)) {
@@ -474,10 +554,12 @@ class CSS {
         let self = this;
         self.cx = [];
         self.cache = {};
+        self._mediaQueries = {};
         if (undefined == css)
             return {
                 cx: self.cx,
-                sheet: ``
+                sheet: ``,
+                mediaQuery: {}
             };
         if (`string` == typeof css) {
             css = [[css]];
@@ -488,9 +570,11 @@ class CSS {
             });
         });
         const _cleaned = self.deepClean(self.cache);
+        const _stylesheet = self.styleSheet(_cleaned);
         const _ = {
             cx: self.cx,
-            sheet: self.styleSheet(_cleaned)
+            sheet: _stylesheet,
+            mediaQuery: self._mediaQueries
         };
         return _;
     }
@@ -526,15 +610,31 @@ export const buildWithStyles = (source) => {
 export const getAnimationCurve = (curve) => {
     if (!curve)
         return `linear`;
-    const _curves = [`spring`];
-    if (_curves.includes(curve)) {
-        switch (curve) {
-            case "spring":
-                return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
-                break;
-            default:
-                return `linear`;
-        }
+    switch (curve.toUpperCase()) {
+        case TRANSITION_CURVES.Spring:
+            return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
+            break;
+        default:
+            return `linear`;
+    }
+};
+export const getAnimationTransition = (transition, to, from) => {
+    let _from, _to;
+    switch (transition) {
+        case TRANSITIONS.SlideInLeft:
+        case TRANSITIONS.SlideInRight:
+            _from = { x: transition == TRANSITIONS.SlideInLeft ? -20 : 20, opacity: 0 };
+            _to = { x: 0, opacity: 1 };
+            break;
+        case TRANSITIONS.SlideInTop:
+        case TRANSITIONS.SlideInBottom:
+            _from = { y: transition == TRANSITIONS.SlideInTop ? -20 : 20, opacity: 0 };
+            _to = { y: 0, opacity: 1 };
+            break;
+        case TRANSITIONS.ScaleIn:
+            _from = { scale: 0, opacity: 0 };
+            _to = { scale: 1, opacity: 1 };
+            break;
     }
-    return curve;
+    return to ? { ..._from, ..._to } : from ? _from : _to;
 };

package/dist/funs/index.d.ts

@@ -27,3 +27,13 @@ export declare const setDeep: (object: dynamicObject, path: string, value: any,
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
 export declare const extendGlobals: () => void;
 export declare const withPost: (uri: string, data: dynamicObject, timeout?: number, fd?: dynamicObject) => Promise<unknown>;
+export declare const useDevice: () => {
+    isMobile: boolean;
+    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

@@ -4,6 +4,8 @@ import axios from "axios";
 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__`;
@@ -108,7 +110,10 @@ export const withPost = async (uri, data, timeout = 60, fd = {}) => {
             axios({
                 method: 'post',
                 url: uri,
-                data: data,
+                data: {
+                    ...data,
+                    ...Cookies.get(),
+                },
                 timeout: timeout * 1000,
                 headers: {
                     'Content-Type': 'multipart/form-data',
@@ -130,6 +135,7 @@ export const withPost = async (uri, data, timeout = 60, fd = {}) => {
     return new Promise((resolve, reject) => {
         axios.post(uri, {
             ...data,
+            ...Cookies.get(),
             __stmp: new Date().getTime() / 1000
         }, {
             timeout: 1000 * timeout,
@@ -148,3 +154,27 @@ export const withPost = async (uri, data, timeout = 60, fd = {}) => {
             .catch(err => reject(err));
     });
 };
+export const useDevice = () => {
+    const userAgent = navigator.userAgent;
+    const mobile = /Mobi|Android/i.test(userAgent);
+    const tablet = /Tablet|iPad/i.test(userAgent);
+    return {
+        isMobile: mobile,
+        isTablet: tablet,
+        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

@@ -284,6 +284,10 @@ export const cssDirect = {
     "scale": "transform: scale(__VALUE__);",
     "anim": "transition: all __VALUE__ __CURVE__ __DELAY__;",
     "hide": "display: none;",
+    "block": "display: block;",
+    "inlineblock": "display: inline-block;",
+    "blur": "filter: blur(__VALUE__);",
+    "ratio": "aspect-ratio: __VALUE__;",
 };
 export const cssAnimationCurves = {
     ease: 'ease',

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { withZuz as css } from './funs';
+export * from "./funs";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
@@ -6,9 +7,11 @@ export { default as ContextMenu } from "./comps/contextmenu";
 export { default as Cover } from "./comps/cover";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
+export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
+export { SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { withZuz as css } from './funs';
+export * from "./funs";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
@@ -6,9 +7,11 @@ export { default as ContextMenu } from "./comps/contextmenu";
 export { default as Cover } from "./comps/cover";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
+export { default as Text } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
 export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
 export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";
+export { SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";

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}.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}.rel{position:relative}.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{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.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff;top:-20px}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.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/dist/types/enums.d.ts

@@ -18,3 +18,13 @@ export declare enum SHEET {
     Success = "SUCCESS",
     Warn = "WARN"
 }
+export declare enum TRANSITION_CURVES {
+    Spring = "SPRING"
+}
+export declare enum TRANSITIONS {
+    ScaleIn = "SCALE_IN",
+    SlideInTop = "SLIDE_FROM_TOP",
+    SlideInRight = "SLIDE_FROM_RIGHT",
+    SlideInBottom = "SLIDE_FROM_BOTTOM",
+    SlideInLeft = "SLIDE_FROM_LEFT"
+}

package/dist/types/enums.js

@@ -22,3 +22,15 @@ export var SHEET;
     SHEET["Success"] = "SUCCESS";
     SHEET["Warn"] = "WARN";
 })(SHEET || (SHEET = {}));
+export var TRANSITION_CURVES;
+(function (TRANSITION_CURVES) {
+    TRANSITION_CURVES["Spring"] = "SPRING";
+})(TRANSITION_CURVES || (TRANSITION_CURVES = {}));
+export var TRANSITIONS;
+(function (TRANSITIONS) {
+    TRANSITIONS["ScaleIn"] = "SCALE_IN";
+    TRANSITIONS["SlideInTop"] = "SLIDE_FROM_TOP";
+    TRANSITIONS["SlideInRight"] = "SLIDE_FROM_RIGHT";
+    TRANSITIONS["SlideInBottom"] = "SLIDE_FROM_BOTTOM";
+    TRANSITIONS["SlideInLeft"] = "SLIDE_FROM_LEFT";
+})(TRANSITIONS || (TRANSITIONS = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.2",
+    "version": "0.4.4",
     "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"
@@ -37,7 +36,9 @@
         "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",