@zuzjs/ui 0.4.4 → 0.4.5

package/dist/comps/animate.d.ts

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

package/dist/comps/animate.js

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

package/dist/funs/css.d.ts

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

package/dist/funs/css.js

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

package/dist/funs/stylesheet.js

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

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useMounted.d.ts

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

package/dist/hooks/useMounted.js

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

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
+export * from "./hooks";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";

package/dist/index.js

@@ -1,5 +1,6 @@
 export { withZuz as css } from './funs';
 export * from "./funs";
+export * from "./hooks";
 export { default as Box } from "./comps/box";
 export { default as Button } from "./comps/button";
 export { default as CheckBox } from "./comps/checkbox";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.4",
+    "version": "0.4.5",
     "keywords": [
         "react",
         "zuz",
@@ -32,6 +32,7 @@
         "node": ">=18.17.0"
     },
     "dependencies": {
+        "@types/md5": "^2.3.5",
         "axios": "^1.7.6",
         "chokidar": "^3.6.0",
         "commander": "^12.1.0",