@zuzjs/ui 0.4.5 → 0.4.7

package/dist/comps/drawer.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { DRAWER_SIDE } from "../types/enums";
+export interface DrawerProps {
+    as?: string;
+    speed?: number;
+    from?: DRAWER_SIDE;
+    children: string | ReactNode | ReactNode[];
+}
+export interface DrawerHandler {
+    open: () => void;
+    close: () => void;
+}
+declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<DrawerHandler>>;
+export default Drawer;

package/dist/comps/drawer.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "react";
+import With from "./base";
+import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
+const Drawer = forwardRef((props, ref) => {
+    const { as, from, speed, children, ...rest } = props;
+    const [visible, setVisible] = useState(false);
+    const divRef = useRef(null);
+    const style = useMemo(() => {
+        switch (from) {
+            case DRAWER_SIDE.Left:
+                return { from: { x: `-100vh` }, to: { x: 0 } };
+            case DRAWER_SIDE.Right:
+                return { from: { x: `100vh` }, to: { x: 0 } };
+            case DRAWER_SIDE.Top:
+                return { from: { y: `-100vh` }, to: { y: 0 } };
+            case DRAWER_SIDE.Bottom:
+                return { from: { y: `100vh` }, to: { y: 0 } };
+            default:
+                return { from: { x: `-100vh` }, to: { x: 0 } };
+        }
+    }, []);
+    useImperativeHandle(ref, () => ({
+        open() {
+            setVisible(true);
+        },
+        close() {
+            setVisible(false);
+        }
+    }));
+    return _jsxs(_Fragment, { children: [_jsx(With, { className: `zuz-overlay fixed fill`, onClick: (e) => {
+                    if (visible) {
+                        setVisible(false);
+                    }
+                }, "aria-hidden": !visible, animate: {
+                    transition: TRANSITIONS.FadeIn,
+                    when: visible,
+                } }), _jsxs(With, { ref: divRef, as: as, className: `zuz-drawer flex cols drawer-${from ? from.toLowerCase() : `left`} fixed`, animate: {
+                    from: { ...style.from, opacity: 0 },
+                    to: { ...style.to, opacity: 1 },
+                    when: visible,
+                    curve: TRANSITION_CURVES.EaseInOut,
+                    duration: speed || .5,
+                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, children] })] });
+});
+export default Drawer;

package/dist/comps/textwheel.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { animationProps } from "./base";
+declare const TextWheel: React.ForwardRefExoticComponent<{
+    as?: string;
+    direction?: `up` | `down`;
+    value: number | string;
+    color?: string;
+    animate?: animationProps;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TextWheel;

package/dist/comps/textwheel.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import With from "./base";
+const TextWheel = forwardRef((props, ref) => {
+    const { as, value, color, direction, ...rest } = props;
+    return _jsxs(With, { className: `text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: ref, ...rest, children: [value.toString().split('').map((char, index) => {
+                if (isNaN(parseInt(char, 10))) {
+                    return _jsx(With, { tag: `span`, className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
+                }
+                return _jsx(With, { tag: `span`, "data-value": char, className: `wheel-char grid ${index > char.toString().split('').length - 3 ? 'wheel-fraction' : ''}`.trim(), children: _jsxs(With, { tag: `span`, className: `wheel-char-track wheel-track-${direction || `down`} grid`, style: {
+                            '--v': char
+                        }, children: [_jsx(With, { tag: `span`, children: !direction || direction == `down` ? 0 : 9 }), (!direction || direction == `down` ?
+                                [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
+                                : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).map((val, indx) => {
+                                return _jsx(With, { tag: `span`, children: val }, `${index}--${indx}`);
+                            }), _jsx(With, { tag: `span`, children: !direction || direction == `down` ? 9 : 0 })] }) }, `wheel-char-${index}`);
+            }), color && _jsx(With, { className: `abs fill`, style: {
+                    zIndex: 1,
+                    background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
+                } })] });
+});
+export default TextWheel;

package/dist/funs/css.d.ts

@@ -34,7 +34,6 @@ declare class CSS {
     makeValue(k: string, v: any): string;
     calcIndexes(str: 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

@@ -364,39 +364,6 @@ class CSS {
         return _indices.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 _ = [];
@@ -421,6 +388,9 @@ class CSS {
         const [_ok, _ov] = out.split(`:`);
         const ok = _ok.trim();
         const ov = _ov.trim();
+        if (ov == ``) {
+            throw new TypeError(`${ok} value is empty.`);
+        }
         let _cp = ok.charAt(0);
         if (self.PROPS[ok]?.indexOf("-") > -1) {
             _cp = "";
@@ -432,7 +402,7 @@ class CSS {
     }
     makeID(k, v, _out) {
         const self = this;
-        return self.makeID3(k, v, _out);
+        return self.makeID2(k, v, _out);
         const _css = _out.toString().replace(/;|:|\s/g, "");
         let _indices = 0;
         for (let i = 0; i < _css.length; i++) {
@@ -696,6 +666,9 @@ export const getAnimationCurve = (curve) => {
         case TRANSITION_CURVES.Spring:
             return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
             break;
+        case TRANSITION_CURVES.EaseInOut:
+            return `cubic-bezier(0.42, 0, 0.58, 1)`;
+            break;
         default:
             return `linear`;
     }
@@ -717,6 +690,10 @@ export const getAnimationTransition = (transition, to, from) => {
             _from = { scale: 0, opacity: 0 };
             _to = { scale: 1, opacity: 1 };
             break;
+        case TRANSITIONS.FadeIn:
+            _from = { opacity: 0 };
+            _to = { opacity: 1 };
+            break;
     }
     return to ? { ..._from, ..._to } : from ? _from : _to;
 };

package/dist/funs/events.d.ts

@@ -0,0 +1,14 @@
+export interface Event {
+    event: String | Symbol;
+    listeners: (() => void)[];
+}
+declare class Events {
+    _events: Event[];
+    constructor();
+    addEvent(event: String | Symbol, fun: (...args: any[]) => void): number | undefined;
+    removeEvent(event: String | Symbol, fun: (...args: any[]) => void): void;
+    on(event: String | Symbol, fun: (...args: any[]) => void): number | undefined;
+    off(event: String | Symbol, fun: (...args: any[]) => void): void;
+    emit(event: String | Symbol, ...args: any[]): void;
+}
+export default Events;

package/dist/funs/events.js

@@ -0,0 +1,41 @@
+class Events {
+    _events;
+    constructor() {
+        this._events = [];
+    }
+    addEvent(event, fun) {
+        const evt = this._events.find(x => x.event == event);
+        if (!evt) {
+            return this._events.push({ event: event, listeners: [fun] });
+        }
+        if (!evt.listeners.find(x => x == fun)) {
+            evt.listeners.push(fun);
+        }
+    }
+    removeEvent(event, fun) {
+        const evt = this._events.find(x => x.event == event);
+        if (evt) {
+            evt.listeners = evt.listeners.filter(x => x != fun);
+        }
+    }
+    on(event, fun) {
+        return this.addEvent(event, fun);
+    }
+    off(event, fun) {
+        this.removeEvent(event, fun);
+    }
+    emit(event, ...args) {
+        const self = this;
+        const evt = this._events.find(x => x.event == event);
+        if (evt) {
+            evt.listeners.forEach((f) => {
+                try {
+                    f.apply(self, args);
+                }
+                catch (e) {
+                }
+            });
+        }
+    }
+}
+export default Events;

package/dist/funs/index.d.ts

@@ -1,5 +1,6 @@
 import CSS from './css.js';
 import { dynamicObject } from "../types/index.js";
+import { FormatNumberParams } from "../types/interfaces.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
 export declare const LINE_KEY = "__LINE__";
@@ -27,13 +28,10 @@ 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;
+export declare const arrayRand: (arr: any[]) => any;
+export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;

package/dist/funs/index.js

@@ -154,16 +154,6 @@ 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();
@@ -178,3 +168,25 @@ export const time = (stamp, format) => {
         moment.unix(+stamp / 1000).format(format || `YYYY-MM-DD HH:mm:ss`)
         : moment().format(format || `YYYY-MM-DD HH:mm:ss`);
 };
+export const arrayRand = (arr) => arr[Math.floor(Math.random() * arr.length)];
+export const formatNumber = ({ number, locale = 'en-US', style = `decimal`, decimal = 2, currency }) => {
+    if (style === 'currency' && !currency) {
+        throw new TypeError('Currency code is required with currency style.');
+    }
+    if (currency) {
+        const { code, style: currencyStyle, symbol } = currency;
+        const out = new Intl.NumberFormat(locale, {
+            style: `currency`,
+            currency: code,
+            currencyDisplay: currencyStyle,
+            minimumFractionDigits: +number % 1 > 0 ? decimal : 0,
+            maximumFractionDigits: +number % 1 > 0 ? decimal : 0
+        }).format(+number);
+        return symbol ? out.replace(new RegExp(`\\${code}`, 'g'), symbol) : out;
+    }
+    return new Intl.NumberFormat(locale, {
+        style,
+        minimumFractionDigits: +number % 1 > 0 ? 2 : 0,
+        maximumFractionDigits: +number % 1 > 0 ? 2 : 0
+    }).format(+number);
+};

package/dist/funs/stylesheet.js

@@ -288,6 +288,13 @@ export const cssDirect = {
     "inlineblock": "display: inline-block;",
     "blur": "filter: blur(__VALUE__);",
     "ratio": "aspect-ratio: __VALUE__;",
+    "center-h": "left: 50%;transform: translateX(-50%);",
+    "center-v": "top: 50%;transform: translateY(-50%);",
+    "no-overflow": "overflow: hidden;",
+    "overflow-x": "overflow-x: auto;",
+    "overflow-y": "overflow-x: auto;",
+    "space-pre": "white-space: pre;",
+    "text-wrap": "width: 98%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;",
 };
 export const cssAnimationCurves = {
     ease: 'ease',

package/dist/hooks/index.d.ts

@@ -1 +1,4 @@
+export { default as useDevice } from './useDevice';
+export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
+export * from './usePubSub';

package/dist/hooks/index.js

@@ -1 +1,4 @@
+export { default as useDevice } from './useDevice';
+export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
+export * from './usePubSub';

package/dist/hooks/useDevice.d.ts

@@ -0,0 +1,7 @@
+import { Dimensions } from './useDimensions';
+declare const useDevice: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+} & Dimensions;
+export default useDevice;

package/dist/hooks/useDevice.js

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import useDimensions from './useDimensions';
+const useDevice = () => {
+    const userAgent = navigator.userAgent;
+    const mobile = /Mobi|Android/i.test(userAgent);
+    const tablet = /Tablet|iPad/i.test(userAgent);
+    const dims = useDimensions();
+    useEffect(() => {
+    }, []);
+    return {
+        isMobile: mobile,
+        isTablet: tablet,
+        isDesktop: !mobile && !tablet,
+        ...dims
+    };
+};
+export default useDevice;

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface Dimensions {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    x: number;
+    y: number;
+}
+declare const useDimensions: (el?: HTMLElement | ReactNode) => Dimensions;
+export default useDimensions;

package/dist/hooks/useDimensions.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+const useDimensions = (el) => {
+    const [dims, setDims] = useState({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0
+    });
+    const update = () => {
+        if (el) {
+            const { width, height, top, left, bottom, right, x, y } = el.getBoundingClientRect();
+            setDims({
+                width,
+                height,
+                top,
+                left,
+                bottom,
+                right,
+                x,
+                y
+            });
+        }
+        else {
+            setDims({
+                width: window.innerWidth,
+                height: window.innerHeight,
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                x: 0,
+                y: 0
+            });
+        }
+    };
+    useEffect(() => {
+        update();
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, []);
+    return dims;
+};
+export default useDimensions;

package/dist/hooks/usePub.js

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

package/dist/hooks/usePubSub.d.ts

@@ -0,0 +1,3 @@
+declare const useSub: (event: String | Symbol, fun: () => void) => () => void;
+declare const usePub: () => (event: String | Symbol) => void;
+export { useSub, usePub };

package/dist/hooks/usePubSub.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import Events from "../funs/events";
+const events = new Events();
+const useSub = (event, fun) => {
+    const unsubscribe = () => {
+        events.off(event, fun);
+    };
+    useEffect(() => {
+        events.on(event, fun);
+        return;
+    }, []);
+    return unsubscribe;
+};
+const usePub = () => {
+    return (event) => {
+        events.emit(event);
+    };
+};
+export { useSub, usePub };

package/dist/hooks/useSub.d.ts

@@ -0,0 +1,3 @@
+declare const useSub: (event: String | Symbol, fun: () => void) => () => void;
+declare const usePub: () => void;
+export { useSub, usePub };

package/dist/hooks/useSub.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import Events from "../funs/events";
+const events = new Events();
+const useSub = (event, fun) => {
+    const unsubscribe = () => {
+        events.off(event, fun);
+    };
+    useEffect(() => {
+        events.on(event, fun);
+        return;
+    }, []);
+    return unsubscribe;
+};
+const usePub = () => {
+    return;
+};
+export { useSub, usePub };

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
 export * from "./hooks";
+export { default as PubSub } from "./funs/events";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
 export { default as ContextMenu } from "./comps/contextmenu";
 export { default as Cover } from "./comps/cover";
+export { default as Drawer } from "./comps/drawer";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
 export { default as Text } from "./comps/heading";
@@ -15,4 +17,5 @@ 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";
+export { default as TextWheel } from "./comps/textwheel";
+export { DRAWER_SIDE, SHEET, FORMVALIDATION, FORMVALIDATION_STYLE, SPINNER, TRANSITIONS, TRANSITION_CURVES } from "./types/enums";

package/dist/index.js

@@ -1,11 +1,13 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
 export * from "./hooks";
+export { default as PubSub } from "./funs/events";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";
 export { default as ContextMenu } from "./comps/contextmenu";
 export { default as Cover } from "./comps/cover";
+export { default as Drawer } from "./comps/drawer";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
 export { default as Text } from "./comps/heading";
@@ -15,4 +17,5 @@ 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";
+export { default as TextWheel } from "./comps/textwheel";
+export { DRAWER_SIDE, 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;--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)}
+*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}[aria-hidden=true]{user-select:none;pointer-events:none}[popover]{margin:0;padding:0;border:0}:root{--basic: ease;--back: linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%, -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%, 0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%, 1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%, 1.0419 84.36%, 1.0059 95.49%, 1 );--expo: linear( 0, 0.0053 17.18%, 0.0195 26.59%, 0.0326 30.31%, 0.0506 33.48%, 0.0744 36.25%, 0.1046 38.71%, 0.1798 42.62%, 0.2846 45.93%, 0.3991 48.37%, 0.6358 52.29%, 0.765 55.45%, 0.8622 59.3%, 0.8986 61.51%, 0.9279 63.97%, 0.9481 66.34%, 0.9641 69.01%, 0.9856 75.57%, 0.9957 84.37%, 1 );--sine: linear( 0, 0.007 5.35%, 0.0282 10.75%, 0.0638 16.26%, 0.1144 21.96%, 0.1833 28.16%, 0.2717 34.9%, 0.6868 62.19%, 0.775 68.54%, 0.8457 74.3%, 0.9141 81.07%, 0.9621 87.52%, 0.9905 93.8%, 1 );--power: linear( 0, 0.0012 14.95%, 0.0089 22.36%, 0.0297 28.43%, 0.0668 33.43%, 0.0979 36.08%, 0.1363 38.55%, 0.2373 43.07%, 0.3675 47.01%, 0.5984 52.15%, 0.7121 55.23%, 0.8192 59.21%, 0.898 63.62%, 0.9297 66.23%, 0.9546 69.06%, 0.9733 72.17%, 0.9864 75.67%, 0.9982 83.73%, 1 );--circ: linear( -0, 0.0033 5.75%, 0.0132 11.43%, 0.0296 16.95%, 0.0522 22.25%, 0.0808 27.25%, 0.1149 31.89%, 0.1542 36.11%, 0.1981 39.85%, 0.2779 44.79%, 0.3654 48.15%, 0.4422 49.66%, 0.5807 50.66%, 0.6769 53.24%, 0.7253 55.37%, 0.7714 58.01%, 0.8142 61.11%, 0.8536 64.65%, 0.9158 72.23%, 0.9619 80.87%, 0.9904 90.25%, 1 );--bounce: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657, 0.7539, 0.75, 0.7539, 0.7657, 0.7852, 0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532, 0.9414, 0.9375, 0.9414, 0.9531, 0.9726, 1, 0.9883, 0.9844, 0.9883, 1 );--elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 );--ease: var(--back);--text-wheel-speed: 2;--text-wheel-transition: translate calc(var(--text-wheel-speed) * 1s) var(--ease);--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;--zuz-overlay: rgba(0, 0, 0, 0.7);--zuz-overlay-blur: 0;--drawer-color: #fff;--drawer-handle-color: #ccc;--drawer-radius-v: 0px;--drawer-radius-h: 0px}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.fillx{top:-10px;left:-10px;bottom:-10px;right:-10px}.grid{display:grid}.nope{pointer-events:none}.nous{user-select:none}.rel{position:relative}.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.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)}.zuz-overlay{background:var(--zuz-overlay);z-index:2147483645;backdrop-filter:blur(var(--zuz-overlay-blur))}.drawer-h,.zuz-drawer.drawer-right,.zuz-drawer.drawer-left{min-width:320px;max-width:90vw;top:0px;bottom:0px;border-radius:var(--drawer-radius-h)}.drawer-v,.zuz-drawer.drawer-bottom,.zuz-drawer.drawer-top{min-height:10vh;max-height:90vh;left:0px;right:0px;border-radius:var(--drawer-radius-v)}.zuz-drawer{background:var(--drawer-color);z-index:2147483646;overflow-x:hidden;overflow-y:auto}.zuz-drawer.drawer-left{left:0px}.zuz-drawer.drawer-right{right:0px}.zuz-drawer.drawer-top{top:0px}.zuz-drawer.drawer-bottom{bottom:0px}.zuz-drawer .drawer-handle{width:100px;height:6px;border-radius:10px;background:var(--drawer-handle-color);margin:12px auto 0px auto}.text-wheel{transform-style:flat}.text-wheel .wheel-char{font-variant:tabular-nums;overflow:hidden;height:1lh}.text-wheel .wheel-char .wheel-char-track{transition:var(--text-wheel-transition)}.text-wheel .wheel-char .wheel-char-track.wheel-track-down{translate:0 calc((10 - var(--v))*-1lh)}.text-wheel .wheel-char .wheel-char-track.wheel-track-up{translate:0 calc((var(--v) + 1)*-1lh)}.text-wheel .wheel-char .wheel-char-track span{height:1lh;transition:opacity .5s}

package/dist/types/enums.d.ts

@@ -19,12 +19,20 @@ export declare enum SHEET {
     Warn = "WARN"
 }
 export declare enum TRANSITION_CURVES {
-    Spring = "SPRING"
+    Spring = "SPRING",
+    EaseInOut = "EASEINOUT"
 }
 export declare enum TRANSITIONS {
+    FadeIn = "FADE_IN",
     ScaleIn = "SCALE_IN",
     SlideInTop = "SLIDE_FROM_TOP",
     SlideInRight = "SLIDE_FROM_RIGHT",
     SlideInBottom = "SLIDE_FROM_BOTTOM",
     SlideInLeft = "SLIDE_FROM_LEFT"
 }
+export declare enum DRAWER_SIDE {
+    Left = "LEFT",
+    Right = "RIGHT",
+    Top = "TOP",
+    Bottom = "BOTTOM"
+}

package/dist/types/enums.js

@@ -25,12 +25,21 @@ export var SHEET;
 export var TRANSITION_CURVES;
 (function (TRANSITION_CURVES) {
     TRANSITION_CURVES["Spring"] = "SPRING";
+    TRANSITION_CURVES["EaseInOut"] = "EASEINOUT";
 })(TRANSITION_CURVES || (TRANSITION_CURVES = {}));
 export var TRANSITIONS;
 (function (TRANSITIONS) {
+    TRANSITIONS["FadeIn"] = "FADE_IN";
     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 = {}));
+export var DRAWER_SIDE;
+(function (DRAWER_SIDE) {
+    DRAWER_SIDE["Left"] = "LEFT";
+    DRAWER_SIDE["Right"] = "RIGHT";
+    DRAWER_SIDE["Top"] = "TOP";
+    DRAWER_SIDE["Bottom"] = "BOTTOM";
+})(DRAWER_SIDE || (DRAWER_SIDE = {}));

package/dist/types/interfaces.d.ts

@@ -1,4 +1,15 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
+export interface FormatNumberParams {
+    number: number | string;
+    locale: string;
+    style?: `decimal` | `currency` | `percent`;
+    decimal?: number;
+    currency?: {
+        code: string;
+        style: `symbol` | `code` | `name`;
+        symbol?: string;
+    };
+}
 export interface UIProps<T extends HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T> {
     [key: string]: any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.5",
+    "version": "0.4.7",
     "keywords": [
         "react",
         "zuz",
@@ -18,6 +18,7 @@
     },
     "exports": {
         ".": "./dist/index.js",
+        "./hooks": "./dist/hooks/index.js",
         "./styles": "./dist/styles.css"
     },
     "files": [