@zuzjs/ui 0.5.3 → 0.5.5

package/dist/funs/css.js

@@ -1,8 +1,9 @@
 import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
-import { cssAnimationCurves, cssDirect, cssProps, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
+import { cssAnimationCurves, cssDirect, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
+import pc from "picocolors";
 class CSS {
     cx;
     cache;
@@ -26,6 +27,7 @@ class CSS {
     _cli;
     DIRECT_VALUES;
     PROPS_VALUES;
+    _currentFile;
     constructor(options) {
         const opts = options || {};
         this._cli = false;
@@ -38,14 +40,15 @@ class CSS {
             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)`,
+            ph: `(max-width: 599px)`, /* Extra Small Devices (Phones) */
+            sm: `(min-width: 600px) and (max-width: 767px)`, /* Small Devices (Tablets) */
+            md: `(min-width: 768px) and (max-width: 991px)`, /* Medium Devices (Small Laptops) */
+            lg: `(min-width: 992px) and (max-width: 1199px)`, /* Large Devices (Laptops and Desktops) */
+            xl: `(min-width: 1200px)`, /* Extra Large Devices (Large Desktops) */
         };
         this.cx = [];
         this.cache = {};
+        this._currentFile = `?`;
         this.unit = opts.unit || `px`;
         this.seperator = `__@@__`;
         this.hashids = new Hashids(__SALT, 5);
@@ -58,9 +61,9 @@ class CSS {
             `flex`, `opacity`, `z-index`, `zIndex`, `color`, `line-height`, `anim`, `scale`, `saturate`
         ];
         this.keysWithoutCommaToSpace = [
-            `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`,
+            `transform`, `translate`, `color`, `background`, `background-color`, `backgroundColor`, `backgroundImage`, `background-image`,
             `border`, `border-bottom`, `border-top`, `border-left`, `border-right`,
-            `grid-template-rows`, `grid-template-columns`
+            `grid-template-rows`, `grid-template-columns`, `clip-path`, `clipPath`,
         ];
         this.propCounter = {};
         this.ids = [];
@@ -77,6 +80,7 @@ class CSS {
                 arr.push(cssDirect[k].replace(/\s+/g, ``));
             return arr;
         }, []);
+        // extendGlobals()
     }
     buildMediaQueries(queries) {
         const self = this;
@@ -92,7 +96,9 @@ class CSS {
     styleSheet(cache, pseudo = ``) {
         const self = this;
         const scss = [];
+        // console.log(cache)
         const build = (key, value) => {
+            // console.log(`build`, key, value)
             const __build = (_key, _value) => {
                 let _css = `${self.pseudoList.includes(`@${_key}`) ? `&:` : `.`}${_key}{`;
                 if (`object` == typeof _value) {
@@ -114,6 +120,7 @@ class CSS {
             let css = ``;
             if (`object` == typeof value && Object.keys(value)[0] in this.mediaQueries) {
                 const mq = Object.keys(value)[0];
+                // css += `@media screen and ${this.mediaQueries[mq]}{`
                 let __css = `.${key}{`;
                 const _value = value[mq];
                 for (const prop in _value) {
@@ -128,6 +135,8 @@ class CSS {
                 this._mediaQueries[mq] = this._mediaQueries[mq] || [];
                 this._mediaQueries[mq].push(__css);
             }
+            // else if ( key in self.mediaQueries ){
+            // }
             else {
                 css += __build(key, value);
             }
@@ -151,7 +160,9 @@ class CSS {
                 }
             }
         }
-        return scss.join(`\n`);
+        return scss
+            .filter(x => x.trim() != `.{}`)
+            .join(`\n`);
     }
     _styleSheet(cache) {
         const self = this;
@@ -179,9 +190,11 @@ class CSS {
                 for (const prop in value) {
                     if (`string` === typeof value[prop]) {
                         _extend.push(`.${prop}`);
+                        // _extend.push(self.buildCache[prop])
                     }
                 }
                 if (_extend.length > 0)
+                    // css += _extend.join(``)
                     css += `@extend ${_extend.join(`, `)};`;
                 for (const prop in value) {
                     if (`object` === typeof value[prop]) {
@@ -192,6 +205,9 @@ class CSS {
             css += `}`;
             return css;
         };
+        /**
+         * Build Master Keys
+         */
         for (const key in cache) {
             if (key == FIELNAME_KEY) {
                 scss.push(`/**\n* @file ${cache[key]}\n*/`);
@@ -199,17 +215,24 @@ class CSS {
             }
             extractMasterKeys(key, cache[key]);
         }
+        /**
+         * Extract LINE_KEY
+         */
         for (const key in cache) {
             if (key.startsWith(LINE_KEY)) {
                 scss.push(cache[key]);
                 delete cache[key];
             }
         }
+        /**
+         * Build Extends
+         */
         for (const key in cache) {
             if (`object` == typeof cache[key]) {
                 scss.push(build(key, cache[key]));
             }
         }
+        // scss.push(self.classLine)
         return scss.join(`\n`);
     }
     cleanKey(key) {
@@ -232,6 +255,7 @@ class CSS {
             const __k = self.cleanKey(_k);
             if (`object` == typeof cache[_k]) {
                 const _d = oid(_k, cache[_k]);
+                // console.log(_d)
                 let _indices = 0;
                 for (let i = 0; i < _d.length; i++) {
                     _indices += self.chars.indexOf(_d.charAt(i));
@@ -255,6 +279,7 @@ class CSS {
         return _;
     }
     makeUnit(k, v) {
+        // console.log(`unit`, k, v)
         if (k == `rotate`) {
             return `deg`;
         }
@@ -264,7 +289,26 @@ class CSS {
             return ``;
         return this.unit;
     }
+    makeColor(v) {
+        if (v.charAt(0) == `#`) {
+            v = v.substring(1);
+        }
+        if (v.charAt(0) == `$`) {
+            return `var(--${v.replace(`$`, ``)})`;
+        }
+        if (/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(`#${v}`) ||
+            /^#([0-9A-F]{3}){1,2}$/i.test(`#${v}`)) {
+            return `#${v}`;
+        }
+        else if (v.includes(`rgb`) || v.includes(`rgba`)) {
+            return v.replace(`[`, `(`).replace(`]`, `)`);
+        }
+        else
+            return v.trim();
+    }
     makeValue(k, v) {
+        // const hasGradient = v.includes(`gradient`)
+        const self = this;
         if (k in this.PROPS) {
             const key = this.PROPS[k];
             let value;
@@ -272,18 +316,54 @@ class CSS {
             let hasImportant = v.charAt(v.length - 1) == `!`;
             v = hasImportant ? v.slice(0, -1) : v;
             let important = hasImportant ? ` !important` : ``;
-            if (v.charAt(0) == `$`) {
+            let isGradient = v.startsWith(`gradient`) || v.startsWith(`linear-gradient`) || v.startsWith(`radial-gradient`);
+            /**
+             * Gradients
+             */
+            if (isGradient) {
+                if (v.startsWith(`gradient`)) {
+                    v = `linear-${v}`;
+                }
+                //linear-gradient-to-bottom-blue-green
+                const [_gtype, _xyz, _gto, _gdeg, ..._colors] = v.split(`-`);
+                // const _gdegree = _gdeg.isNumber() ? `${_gdeg}deg` : `to ${_gto}`
+                const _gdegree = /^[+-]?\d+(\.\d+)?$/.test(_gdeg) ? `${_gdeg}deg` : `to ${_gdeg}`;
+                const _gcolors = _colors.reduce((arr, val) => {
+                    arr.push(self.makeColor(val));
+                    return arr;
+                }, []).join(`, `);
+                switch (_gtype) {
+                    case `linear`:
+                        value = `linear-gradient(${_gdegree}, ${_gcolors})`;
+                        break;
+                    case `radial`:
+                        // value = `radial-gradient(${_gparts[1]})`
+                        break;
+                    default:
+                        value = v;
+                        break;
+                }
+            }
+            /**
+             * Variable
+             */
+            else if (v.charAt(0) == `$`) {
                 value = `var(--${v.replace(`$`, ``)})`;
             }
             else if (v.trim() == `transparent`) {
                 value = `rgba(0,0,0,0)`;
             }
+            /**
+             * border
+             */
             else if ([`border`, `borderBottom`, `borderTop`, `borderLeft`, `borderRight`].includes(k)) {
                 const _parts = [];
+                // console.log(`--border`, key, v)
                 if (v.match(this.rgbaRegex)) {
                     _parts.push(v.match(this.rgbaRegex)[0].replace(`[`, `(`).replace(`]`, `)`));
                     v = v.replace(this.rgbaRegex, ``).trim().replace(`,,`, `,`);
                 }
+                // console.log(`-border`, key, v, _parts)
                 v.split(`,`).map((p) => {
                     if (p.includes(`rgb`) || p.includes(`rgba`) || isColor(`#${p}`) || p.startsWith(`$`)) {
                         if (p.includes(`rgb`) || p.includes(`rgba`)) {
@@ -305,8 +385,13 @@ class CSS {
                     }
                 });
                 value = _parts.join(` `);
+                // console.log(`border`, value)             
             }
+            /**
+             * Color
+             */
             else if ([`color`, `bg`, `background`, `background-color`, `backgroundColor`].includes(key)) {
+                // else if ( [`color`].includes( key  ) ){
                 if (v.charAt(0) == `#`) {
                     v = v.substring(1);
                 }
@@ -320,9 +405,15 @@ class CSS {
                 else
                     value = v.trim();
             }
+            /**
+             * FontWeight
+             */
             else if (key == `font-weight`) {
                 value = v;
             }
+            /**
+             * value with brackets like calc(), var() should be passed as calc[value]
+             */
             else if (v.match(/\[(.*?)\]/g)) {
                 try {
                     const vs = v.match(/\[(.*?)\]/g)[0].slice(1, -1);
@@ -332,16 +423,22 @@ class CSS {
                 catch (e) { }
             }
             else {
+                // ${v.charAt(0) == `$` ? `var(--${v.substring(1)})` : v}
+                // if ( key.includes(`padding`) ) console.log(`->padding`, v)
                 if (v.includes(`,`)) {
+                    // console.log(`vwithcomma`, v)
                     let __v = [];
                     v.split(`,`).map((_) => {
                         if (_.charAt(0) == `#`) {
                             _ = _.substring(1);
                         }
+                        //Variable
                         if (_.startsWith(`$`)) {
                             __v.push(`var(--${_.substring(1)})`);
                         }
-                        else if (isColor(`#${_}`)) {
+                        //Color
+                        else if (cssPropsWithColor.includes(_) && isColor(`#${_}`)) {
+                            // else if ( isColor(_) ){
                             if (_.includes(`rgb`) || _.includes(`rgba`)) {
                                 __v.push(_.replace(`[`, `(`).replace(`]`, `)`));
                             }
@@ -350,19 +447,28 @@ class CSS {
                             }
                         }
                         else {
+                            // console.log(`comma`, key, v, this.makeUnit(key, v))
                             __v.push(`${_}${this.makeUnit(key, _)}`);
                         }
                     });
                     value = __v.join(` `);
+                    // console.log(key, value)
+                    // if( k == `shadow` || k == `box-shadow` ) console.log(value)
                 }
                 else
                     value = `${v}${this.makeUnit(key, v)}`;
             }
             if (!value)
                 return ``;
+            // if ( key == `clip` || key == `clip-path` ) console.log(`makevalue`, key, value)
+            // if ( key.includes(`border`) ) console.log(`--border`, `${key}: ${value}${important};`)
             value = value.includes(`,`) && !this.keysWithoutCommaToSpace.includes(key) ? value.replace(`,`, ` `) : value;
+            // if ( key.includes(`padding`) ) console.log(`->padding`, `${key}: ${value}${important};`)
             if (key == `content`)
                 value = `"${value}"`;
+            // if ( key == `extend` ){
+            //     value = value.split(`,`).reduce((acc: string[], v: string) => acc.push(`${v.startsWith(`.`) ? `` : `.`}${v}`) && acc, []).join(`,`)
+            // }
             return `${key}: ${value}${important};`;
         }
         return ``;
@@ -379,7 +485,9 @@ class CSS {
         const md = md5(_out);
         let _ = [];
         const _mi = (_k, _v) => {
+            // console.log(_k, _v, Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k)))
             let i = Math.abs(self.DIRECT_KEYS.indexOf(_k)) + Math.abs(self.PROPS_VALUES.indexOf(_k));
+            // _k in self.DIRECT ? self.DIRECT_KEYS.indexOf(_k) : _k in self.PROPS_VALUES ? self.PROPS_VALUES.indexOf(_k) : 0
             _.push(i);
             const nums = _v.match(/[0-9]/g);
             if (nums) {
@@ -400,8 +508,11 @@ class CSS {
         const ok = _ok.trim();
         const ov = _ov ? _ov.trim() : v;
         if (ov == ``) {
-            throw new TypeError(`${ok} value is empty.`);
+            console.log(pc.yellow(`[${self._currentFile}]`), pc.cyan(k), pc.red(`value is empty.`));
+            return ``;
+            // throw new TypeError()
         }
+        /**Prefix */
         let _cp = ok.charAt(0);
         if (self.PROPS[ok]?.indexOf("-") > -1) {
             _cp = "";
@@ -424,6 +535,9 @@ class CSS {
                 word = word.replace(/\s+/g, ``);
             if (word == ``)
                 return;
+            if (word[word.length - 1] == `:`) {
+                word = word.slice(0, -1);
+            }
             const _kw = word in self.propCounter ? ++self.propCounter[word] : self.propCounter[word] = 1;
             if (isLevel) {
                 levels.push(`${word}${self.seperator}${_kw}`);
@@ -451,15 +565,23 @@ class CSS {
                 processWord();
             }
             else {
+                //SKIPABLE
+                // if([`(`].includes(char) && level == 0 ){
+                //     //DON'T ADD
+                // }
                 if ([`&`].includes(char)) {
                     isLevel = true;
                 }
+                //Level Start
                 else if ([`(`].includes(char) && isLevel) {
                     processWord();
                 }
+                //Level End
                 else if ([`)`].includes(char)) {
                     processWord();
+                    // console.log(`before->`, levels)
                     levels.splice(-1, 1);
+                    // console.log(`after->`, levels)
                     isLevel = false;
                 }
                 else {
@@ -498,8 +620,10 @@ class CSS {
                     if (key in self.PROPS) {
                         const _out = self.makeValue(key, _val);
                         const _id = self.makeID(key, _val + pseudo, _out);
+                        // console.log(`props`, _k, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
+                        // console.log(`_build`, key, _val, _id, _out)
                         if (_mediaQuery) {
                             self.mediaQueries[_mediaQuery].push({ [_id]: _out });
                             return {};
@@ -511,6 +635,9 @@ class CSS {
                         const important = hasImportant ? ` !important` : ``;
                         let val = hasImportant ? _val.slice(0, -1) : _val;
                         var _out = ``;
+                        // if ( key == `ratio` ){
+                        //     console.log(`RatioFound`, key, val)
+                        // }
                         if (key == `extend`) {
                             val = val.split(`,`).reduce((acc, v) => {
                                 acc.push(`${v.startsWith(`.`) ? `` : `.`}${v.trim()}`);
@@ -530,6 +657,8 @@ class CSS {
                                 const [_duration, ..._rest] = val.split(`,`);
                                 let rest = _rest.join(",").trim();
                                 duration = _duration;
+                                // if ( rest.includes(`],`) ){
+                                // }
                                 if (rest.includes(`[`) && rest.includes(`]`)) {
                                     for (const curv in cssAnimationCurves) {
                                         if (rest.startsWith(curv)) {
@@ -546,11 +675,14 @@ class CSS {
                             _out = _out.replace(`;`, `${important};`);
                         }
                         else {
+                            // const __value = `${val}${key == `extend` ? `` : self.makeUnit(key, val)}`
                             const __value = `${val}${self.IGNORE.includes(key) ? `` : self.makeUnit(key, val)}`;
                             _out = self.DIRECT[key].includes(`__VALUE__`) ?
                                 self.DIRECT[key].replace(/__VALUE__/g, __value).replace(`;`, `${important};`) : self.DIRECT[key];
                         }
+                        // console.log(`_build`, key, _val)
                         const _id = self.makeID(key, key + pseudo, _out);
+                        // console.log(`_buildid`, key, _id)
                         if (pseudo == ``)
                             self.cx.push(_id);
                         if (_mediaQuery) {
@@ -563,6 +695,7 @@ class CSS {
                 else if (_k in self.DIRECT) {
                     const _out = self.DIRECT[_k];
                     const _id = self.makeID(_k, _k + pseudo, _out);
+                    // console.log(_k, _id)
                     if (pseudo == ``)
                         self.cx.push(_id);
                     if (_mediaQuery) {
@@ -573,6 +706,7 @@ class CSS {
                 }
                 else if (_k.trim().match(/^[a-zA-Z0-9\-]+$/g)) {
                     self.cx.push(_k.trim());
+                    // self.cx.push(`--${_k.trim()}`)
                 }
                 return {};
             };
@@ -589,15 +723,18 @@ class CSS {
                 return out;
             };
             const _built = build(self.lexer(line));
+            // console.log(line, _built)
+            // console.log(line, self.lexer(line))
             self.cache = { ...self.cache, ..._built };
         }
     }
-    Build(css, cli = false) {
+    Build(css, cli = false, ff = ``) {
         let self = this;
         self._cli = cli;
         self.cx = [];
         self.cache = {};
         self._mediaQueries = {};
+        self._currentFile = ff;
         if (undefined == css)
             return {
                 cx: self.cx,
@@ -612,13 +749,31 @@ class CSS {
                 self.processLine(line);
             });
         });
+        // console.log(self.deepClean(self.cache))
+        // const _ = cli ? {
+        //     cx: [],
+        //     sheet: self.styleSheet(self.deepClean(self.cache))
+        // } : {
+        //     cx: self.cx,
+        //     sheet: ``
+        // }
         const _cleaned = self.deepClean(self.cache);
         const _stylesheet = self.styleSheet(_cleaned);
+        // const _mediaQueries : dynamicObject = {}
+        // if ( !cli ){
+        //     console.log(css, self.cx, self.styleSheet(_cleaned))
+        // }
+        // console.log(`[${cli}]`, self.cx)
+        // console.log(`[${cli}]`, self.cache)
+        // console.log(`[${cli}]`, _cleaned)
+        // console.log(_stylesheet)
+        // console.log(self._mediaQueries)
         const _ = {
             cx: self.cx,
             sheet: _stylesheet,
             mediaQuery: self._mediaQueries
         };
+        // console.log(css, _)
         return _;
     }
 }
@@ -647,6 +802,7 @@ export const buildWithStyles = (source) => {
         if (_transform.length > 0) {
             _.transform = _transform.join(` `);
         }
+        // console.log(_, _transform)
     }
     return _;
 };
@@ -654,11 +810,23 @@ export const getAnimationCurve = (curve) => {
     if (!curve)
         return `linear`;
     switch (curve.toUpperCase()) {
+        case TRANSITION_CURVES.Bounce:
+            return `var(--bounce)`;
+            // return `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 )`
+            break;
         case TRANSITION_CURVES.Spring:
-            return `cubic-bezier(0.2, -0.36, 0, 1.46)`;
+            // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
+            return `var(--spring)`;
             break;
         case TRANSITION_CURVES.EaseInOut:
-            return `cubic-bezier(0.42, 0, 0.58, 1)`;
+            // return `cubic-bezier(0.42, 0, 0.58, 1)`
+            return `ease-in-out`;
             break;
         default:
             return `linear`;

package/dist/funs/events.js

@@ -4,6 +4,7 @@ class Events {
         this._events = [];
     }
     addEvent(event, fun, context) {
+        // console.log(`addEvent`, context)
         const evt = this._events.find(x => x.event == event);
         if (!evt) {
             return this._events.push({ event: event, listeners: [fun], context });
@@ -27,8 +28,10 @@ class Events {
     emit(event, ...args) {
         const evt = this._events.find(x => x.event == event);
         if (evt) {
+            // console.log(evt)
             evt.listeners.forEach((f) => {
                 try {
+                    // f(args)
                     f.apply(evt.context || self, args);
                 }
                 catch (e) {

package/dist/funs/index.d.ts

@@ -1,6 +1,7 @@
 import CSS from './css.js';
 import { dynamicObject, sortOptions } from "../types/index.js";
 import { FormatNumberParams } from "../types/interfaces.js";
+import { KeyCode } from "../types/enums.js";
 export declare const __SALT: string;
 export declare const FIELNAME_KEY = "__FILENAME__";
 export declare const LINE_KEY = "__LINE__";
@@ -41,4 +42,9 @@ export declare const arrayRand: (arr: any[]) => any;
 export declare const formatNumber: ({ number, locale, style, decimal, currency }: FormatNumberParams) => string;
 export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
+/**
+ * Borrowed from https://github.com/bubkoo/natsort
+ * So we don't have to install a package for this
+ */
 export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
+export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;

package/dist/funs/index.js

@@ -19,12 +19,17 @@ export const numberInRange = (min, max) => {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 };
 export const toLowerCase = String.prototype.toLocaleLowerCase || String.prototype.toLowerCase;
+// Hex color regex (#RGB, #RRGGBB)
 export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
+// export const hexColorRegex3 = /^#([A-Fa-f0-9]{3}){1,2}$/;
+// RGBA color regex (rgba(255, 255, 255, 1))
 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*))?\)$/;
+// HSL color regex (hsl(360, 100%, 100%))
 export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
 export const isHexColor = (color) => hexColorRegex.test(color);
 export const isRgbaColor = (color) => rgbaColorRegex.test(color);
 export const isHslColor = (color) => hslColorRegex.test(color);
+// Function to validate a color string
 export const isColor = (color) => colorNames.includes(color) || isHexColor(color) || isRgbaColor(color) || isHslColor(color);
 export const isUrl = (u) => {
     let url;
@@ -41,11 +46,15 @@ export const isIPv4 = (ipaddress) => {
     return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
 };
 export const isNumber = (v) => /\d+(\.\d+)?$/g.test(v);
+// Convert hex to rgba
 export const hexToRgba = (hex, alpha = 1) => {
+    // Remove the hash symbol if present
     hex = hex.replace(/^#/, '');
+    // If shorthand hex (#RGB), expand it to full form (#RRGGBB)
     if (hex.length === 3) {
         hex = hex.split('').map(char => char + char).join('');
     }
+    // Convert to integer values for RGB
     const bigint = parseInt(hex, 16);
     const r = (bigint >> 16) & 255;
     const g = (bigint >> 8) & 255;
@@ -67,6 +76,10 @@ export const cleanProps = (props, withProps = []) => {
     _extras.map(x => x in _props && delete _props[x]);
     return _props;
 };
+// export const withZuz = (cx : string | string[]) : string => {
+//     console.log(cx)
+//     return ``
+// }
 export const withZuz = (cx) => css().Build([[`string` == typeof cx ? cx : cx.join(` `)]]).cx.join(` `);
 export const setDeep = (object, path, value, seperator = `.`) => {
     const _path = path.split(seperator);
@@ -77,6 +90,7 @@ export const setDeep = (object, path, value, seperator = `.`) => {
     if (!object.hasOwnProperty(base)) {
         object[base] = {};
     }
+    // Determine if there is still layers to traverse
     value = _path.length <= 1 ? value : setDeep(object[base], _path.slice(1).join(seperator), value, seperator);
     return {
         ...object,
@@ -213,7 +227,7 @@ export const copyToClipboard = (text) => {
         return new Promise((resolve, reject) => {
             const textarea = document.createElement("textarea");
             textarea.value = text;
-            textarea.style.position = "fixed";
+            textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
             document.body.appendChild(textarea);
             textarea.focus();
             textarea.select();
@@ -222,12 +236,17 @@ export const copyToClipboard = (text) => {
                 resolve(`Copied to clipboard`);
             }
             catch (err) {
+                // console.error("Fallback: Oops, unable to copy", err);
                 reject(err);
             }
             document.body.removeChild(textarea);
         });
     }
 };
+/**
+ * Borrowed from https://github.com/bubkoo/natsort
+ * So we don't have to install a package for this
+ */
 export const natsort = (options = {
     direction: SORT.Asc,
     caseSensitive: false,
@@ -235,10 +254,14 @@ export const natsort = (options = {
     const ore = /^0/;
     const sre = /\s+/g;
     const tre = /^\s+|\s+$/g;
+    // unicode
     const ure = /[^\x00-\x80]/;
+    // hex
     const hre = /^0x[0-9a-f]+$/i;
+    // numeric
     const nre = /(0x[\da-fA-F]+|(^[\+\-]?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?(?=\D|\s|$))|\d+)/g;
-    const dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/;
+    // datetime
+    const dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/; // tslint:disable-line
     const GREATER = options.direction == SORT.Desc ? -1 : 1;
     const SMALLER = -GREATER;
     const _normalize = !options.caseSensitive
@@ -270,12 +293,14 @@ export const natsort = (options = {
         }
         const aArr = _tokenize(aa);
         const bArr = _tokenize(bb);
+        // hex or date detection
         const aHex = aa.match(hre);
         const bHex = bb.match(hre);
         const av = (aHex && bHex) ? parseInt(aHex[0], 16) : (aArr.length !== 1 && Date.parse(aa));
         const bv = (aHex && bHex)
             ? parseInt(bHex[0], 16)
             : av && bb.match(dre) && Date.parse(bb) || null;
+        // try and sort Hex codes or Dates
         if (bv) {
             if (av === bv) {
                 return 0;
@@ -289,6 +314,7 @@ export const natsort = (options = {
         }
         const al = aArr.length;
         const bl = bArr.length;
+        // handle numeric strings and default strings
         for (let i = 0, l = Math.max(al, bl); i < l; i += 1) {
             const af = _parse(aArr[i] || '', al);
             const bf = _parse(bArr[i] || '', bl);
@@ -323,3 +349,11 @@ export const natsort = (options = {
         return 0;
     };
 };
+export const bindKey = (key, fun, element) => {
+    const handleKeydown = (event) => {
+        if (key === event.keyCode) {
+            fun();
+        }
+    };
+    (element || document.documentElement).addEventListener('keydown', handleKeydown);
+};