@zuzjs/ui 0.4.1 → 0.4.3

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 } 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 ${curve || `linear`} ${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: hexToRgba(color || `#ffffff`, .9)
-        }, as: as, ...rest, children: [_jsx(Spinner, { ...spinner }), _jsx(With, { tag: `h1`, className: `label`, children: message || `loading` })] }));
+    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/dialog.js

@@ -0,0 +1 @@
+"use strict";

package/dist/comps/form.d.ts

@@ -16,5 +16,8 @@ export interface FormProps {
         message?: string;
     };
 }
-declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export interface FormHandler {
+    setLoading: (mode: boolean) => void;
+}
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<FormHandler>>;
 export default Form;

package/dist/comps/form.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState, useTransition } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useTransition } from "react";
 import With from "./base";
 import { isEmail, withPost } from "../funs";
 import Sheet from "./sheet";
@@ -134,7 +134,15 @@ const Form = forwardRef((props, ref) => {
             });
         }
     };
+    useImperativeHandle(ref, () => ({
+        setLoading(mod) {
+            setLoading(mod);
+        },
+        showError(errorMsg) {
+            sheet.current.show(errorMsg, 4, SHEET.Error);
+        }
+    }));
     useEffect(_init, []);
-    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover.message || `working`, ...{ spinner, color: cover.color || `#ffffff` } }), children] });
+    return _jsxs(With, { as: as, className: `rel`, ref: _ref, propsToRemove: [`withData`, `action`, `onSubmit`, `onSuccess`, `onError`], ...rest, children: [_jsx(Sheet, { ref: sheet }), loading && _jsx(Cover, { message: cover ? cover.message || undefined : `working`, ...{ spinner, color: cover ? `color` in cover ? cover.color : `#ffffff` : `#ffffff` } }), children] });
 });
 export default Form;

package/dist/comps/select.d.ts

@@ -0,0 +1,18 @@
+import { animationProps } from "./base";
+import { FORMVALIDATION } from "../types/enums";
+import { dynamicObject } from "../types";
+export interface SelectProps {
+    as?: string;
+    name?: string;
+    animate?: animationProps;
+    required?: FORMVALIDATION;
+    options: dynamicObject[];
+    label?: string;
+    defaultValue?: string | dynamicObject;
+    onChange?: (v: string | dynamicObject) => void;
+}
+export interface SelectHandler {
+    onChange?: (v: string | dynamicObject) => void;
+}
+declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<SelectHandler>>;
+export default Select;

package/dist/comps/select.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import With from "./base";
+import { uuid } from "../funs";
+const chevronExpand = () => _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", className: "bi bi-chevron-expand", viewBox: "0 0 16 16", children: _jsx("path", { fillRule: "evenodd", d: "M3.646 9.146a.5.5 0 01.708 0L8 12.793l3.646-3.647a.5.5 0 01.708.708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 010-.708zm0-2.292a.5.5 0 00.708 0L8 3.207l3.646 3.647a.5.5 0 00.708-.708l-4-4a.5.5 0 00-.708 0l-4 4a.5.5 0 000 .708z" }) });
+const Select = forwardRef((props, ref) => {
+    const { as, options, name, label, defaultValue, onChange, ...rest } = props;
+    const _ref = useRef(null);
+    const _id = useMemo(() => name || uuid(), []);
+    const [choosing, setChoosing] = useState(false);
+    const [value, setValue] = useState(defaultValue || options[0]);
+    const updateValue = (o) => {
+        setValue(o);
+        onChange && onChange(o);
+    };
+    useEffect(() => {
+        document.body.addEventListener(`click`, (e) => {
+            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: {
+                    pointerEvents: choosing ? `auto` : `none`,
+                }, animate: {
+                    from: { height: 0, opacity: 0 },
+                    to: { height: `auto`, opacity: 1 },
+                    when: choosing,
+                    curve: `spring`,
+                    duration: .4
+                }, children: options.map((o) => _jsx(With, { onClick: (e) => updateValue(o), className: value && (`string` == typeof o ? o : o.value) == (`string` == typeof value ? value : value.value) ? `selected` : ``, tag: `button`, children: `string` == typeof o ? o : o.label }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`)) })] });
+});
+export default Select;

package/dist/comps/sheet.d.ts

@@ -7,8 +7,13 @@ export interface SheetProps {
     title?: string;
     message?: string | ReactNode;
 }
+export interface SheetActionHandler {
+    label: string;
+    handler: () => void;
+}
 export interface SheetHandler {
-    show: (message: string, duration?: number, type?: SHEET) => void;
+    showDialog: (title: string | ReactNode, message: string | ReactNode, action?: SheetActionHandler, onShow?: () => void) => void;
+    show: (message: string | ReactNode, duration?: number, type?: SHEET) => void;
     hide: () => void;
 }
 declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<SheetHandler>>;

package/dist/comps/sheet.js

@@ -1,18 +1,26 @@
 "use client";
-import { jsx as _jsx } 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, () => ({
-        show(message, duration, type) {
+        setLoading(mode) {
+            setLoading(mode);
+        },
+        showDialog(title, message, action, onShow) {
             if (_sheetTimeout) {
                 clearTimeout(_sheetTimeout);
                 if (_sheetWobbleTimeout) {
@@ -25,6 +33,33 @@ const Sheet = forwardRef((props, ref) => {
                     _sheetWobbleTimeout = null;
                 }, 500);
             }
+            setErrorType(SHEET.Dialog);
+            setMsg(message);
+            setTitle(title);
+            if (action)
+                setAction(action);
+            setVisible(true);
+            setTimeout(() => onShow ? onShow() : () => { }, 1000);
+        },
+        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`);
+                    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);
+            }
             _sheetTimeout = setTimeout(() => {
                 setVisible(false);
                 _sheetTimeout = null;
@@ -40,6 +75,27 @@ const Sheet = forwardRef((props, ref) => {
     }));
     useEffect(() => {
     }, []);
-    return _jsx(With, { as: as, className: `zuz-sheet toast-${_errorType.toLowerCase()} zuz-toast${visible ? ` is-visible` : ``} fixed`.trim(), ...rest, ref: divRef, children: msg == `` ? `Lorem ipsum dolor sit amet, consectetur adipiscing...` : msg });
+    return _jsxs(_Fragment, { children: [_errorType == SHEET.Dialog && _jsx(With, { className: `zuz-sheet-overlay fixed fill`, animate: {
+                    from: { y: `-100vh`, opacity: 0 },
+                    to: { y: 0, opacity: 1 },
+                    when: visible,
+                    duration: 0.1,
+                } }), _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,
+                    duration: 0.3,
+                    delay: 0.1,
+                    curve: `spring`
+                } : {
+                    from: { scale: 0, x: `-50%`, y: `-10vh`, opacity: 0 },
+                    to: { scale: 1, x: `-50%`, y: 0, opacity: 1 },
+                    when: visible,
+                    duration: 0.3,
+                    delay: 0.1,
+                    curve: `spring`
+                }, 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,7 +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 | 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 _;
     }
@@ -523,3 +607,34 @@ export const buildWithStyles = (source) => {
     }
     return _;
 };
+export const getAnimationCurve = (curve) => {
+    if (!curve)
+        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 to ? { ..._from, ..._to } : from ? _from : _to;
+};

package/dist/funs/index.d.ts

@@ -6,6 +6,8 @@ export declare const LINE_KEY = "__LINE__";
 export declare const toHash: (n: number, len?: number) => string;
 export declare const fromHash: (n: string) => number;
 export declare const css: () => CSS;
+export declare const uuid: (len?: number) => string;
+export declare const numberInRange: (min: number, max: number) => number;
 export declare const hexColorRegex: RegExp;
 export declare const rgbaColorRegex: RegExp;
 export declare const hslColorRegex: RegExp;
@@ -25,3 +27,8 @@ 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;
+};

package/dist/funs/index.js

@@ -3,6 +3,8 @@ import CSS from './css.js';
 import axios from "axios";
 import { colorNames } from "./colors.js";
 import Hashids from "hashids";
+import { nanoid } from "nanoid";
+import Cookies from "js-cookie";
 let __css;
 export const __SALT = `zuzjs-ui`;
 export const FIELNAME_KEY = `__FILENAME__`;
@@ -10,6 +12,10 @@ export const LINE_KEY = `__LINE__`;
 export const toHash = (n, len = 6) => new Hashids(__SALT, len).encode(n);
 export const fromHash = (n) => Number(new Hashids(__SALT).decode(n));
 export const css = () => __css ? __css : __css = new CSS();
+export const uuid = (len) => nanoid(len);
+export const numberInRange = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
 export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
 export const rgbaColorRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*((0|1|0?\.\d+)\s*))?\)$/;
 export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
@@ -103,7 +109,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',
@@ -125,6 +134,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,
@@ -143,3 +153,13 @@ 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
+    };
+};

package/dist/funs/stylesheet.js

@@ -267,6 +267,7 @@ export const cssDirect = {
     "rel": "position:relative;",
     "abs": "position:absolute;",
     "fixed": "position:fixed;",
+    "sticky": "position:sticky;",
     "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
     "tdn": "text-decoration:none;",
     "tdu": "text-decoration:underline;",
@@ -283,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

@@ -6,8 +6,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

@@ -6,8 +6,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 @@
-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}: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}.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-sheet{top:0px;left:50%;transform:translate(-50%, -10vh);z-index:2147483647;transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.zuz-sheet.is-visible{transform:translate(-50%, 0vh)}.zuz-sheet.is-visible.wobble{transform:translate(-50%, 10px);transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.zuz-toast{top:-20px;border-radius:0px 0px 5px 5px;padding:25px 15px 5px 15px;font-size:14px}.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)}
+*,*::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)}

package/dist/types/enums.d.ts

@@ -12,8 +12,19 @@ export declare enum FORMVALIDATION {
     MatchField = "MATCHFIELD"
 }
 export declare enum SHEET {
+    Dialog = "DIALOG",
     Default = "DEFAULT",
     Error = "ERROR",
     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

@@ -16,8 +16,21 @@ export var FORMVALIDATION;
 })(FORMVALIDATION || (FORMVALIDATION = {}));
 export var SHEET;
 (function (SHEET) {
+    SHEET["Dialog"] = "DIALOG";
     SHEET["Default"] = "DEFAULT";
     SHEET["Error"] = "ERROR";
     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.1",
+    "version": "0.4.3",
     "keywords": [
         "react",
         "zuz",
@@ -37,6 +37,7 @@
         "chokidar": "^3.6.0",
         "commander": "^12.1.0",
         "hashids": "^2.3.0",
+        "js-cookie": "^3.0.5",
         "md5": "^2.3.0",
         "nanoid": "^5.0.7",
         "picocolors": "^1.0.1",