@cronocode/react-box 1.5.8 → 1.5.9

package/components/dox.mjs

@@ -1,7 +1,7 @@
-import E, { useEffect as I, useMemo as j, forwardRef as O, useState as A } from "react";
-import { I as D, C as W } from "../utils/utils.mjs";
-import { useTheme as _ } from "../theme.mjs";
-const F = ["H", "F", "A"], t = [
+import O, { useEffect as A, useMemo as L, forwardRef as D, useState as F } from "react";
+import { I as _, C as M } from "../utils/utils.mjs";
+import { useTheme as W } from "../theme.mjs";
+const G = ["H", "F", "A"], t = [
   0,
   1,
   2,
@@ -53,7 +53,7 @@ const F = ["H", "F", "A"], t = [
   92,
   96,
   100
-], M = [
+], P = [
   -1,
   -2,
   -3,
@@ -99,47 +99,74 @@ const F = ["H", "F", "A"], t = [
   -92,
   -96,
   -100
-], r = [...t, ...M], T = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], $ = ["auto", "hidden", "scroll", "visible"];
+], v = [...t, ...P], j = ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"], R = ["auto", "hidden", "scroll", "visible"], x = [
+  "1/2",
+  "1/3",
+  "2/3",
+  "1/4",
+  "2/4",
+  "3/4",
+  "1/5",
+  "2/5",
+  "3/5",
+  "4/5",
+  "1/6",
+  "2/6",
+  "3/6",
+  "4/6",
+  "5/6",
+  "1/12",
+  "2/12",
+  "3/12",
+  "4/12",
+  "5/12",
+  "6/12",
+  "7/12",
+  "8/12",
+  "9/12",
+  "10/12",
+  "11/12"
+], y = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
 var e;
 ((s) => {
-  function l(d, n) {
-    return `${n / 4}rem`;
+  function u(c, i) {
+    return `${i / 4}rem`;
   }
-  s.rem = l;
-  function c(d, n) {
-    return `${n}px`;
+  s.rem = u;
+  function d(c, i) {
+    return `${i}px`;
   }
-  s.px = c;
-  function m(d, n) {
-    const [i, b] = n.split("/");
-    return `${+i / +b * 100}%`;
+  s.px = d;
+  function m(c, i) {
+    const [b, n] = i.split("/");
+    return `${+b / +n * 100}%`;
   }
   s.fraction = m;
-  function g(d, n) {
-    switch (n) {
+  function g(c, i) {
+    switch (i) {
       case "fit":
         return "100%";
       case "fit-screen":
-        return d.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+        return c.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
       default:
-        return n;
+        return i;
     }
   }
-  s.heightWidth = g;
-  function p(d) {
-    return (n, i) => `var(--${d}${i});`;
+  s.widthHeight = g;
+  function p(c) {
+    return (i, b) => `var(--${c}${b});`;
   }
   s.variables = p;
 })(e || (e = {}));
-var C;
+var h;
 ((s) => {
-  function l(c, m) {
-    return `${c}${m.replace("/", "-")}`;
+  function u(d, m) {
+    return `${d}${m.replace("/", "-")}`;
   }
-  s.fraction = l;
-})(C || (C = {}));
-const R = {
-  shadow: { cssNames: ["shadow"], formatValue: e.variables("shadow") },
+  s.fraction = u;
+})(h || (h = {}));
+const S = {
+  shadow: { cssNames: ["box-shadow"], formatValue: e.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.variables("background") },
   color: { cssNames: ["color"], formatValue: e.variables("color") },
   bgColor: { cssNames: ["background-color"], formatValue: e.variables("color") },
@@ -160,43 +187,39 @@ const R = {
   },
   width: {
     cssNames: ["width"],
-    values1: {
-      values: ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"],
-      formatValue: e.heightWidth
-    },
+    values1: { values: y, formatValue: e.widthHeight },
     values2: { values: t, formatValue: e.rem },
-    values3: {
-      values: [
-        "1/2",
-        "1/3",
-        "2/3",
-        "1/4",
-        "2/4",
-        "3/4",
-        "1/5",
-        "2/5",
-        "3/5",
-        "4/5",
-        "1/6",
-        "2/6",
-        "3/6",
-        "4/6",
-        "5/6",
-        "1/12",
-        "2/12",
-        "3/12",
-        "4/12",
-        "5/12",
-        "6/12",
-        "7/12",
-        "8/12",
-        "9/12",
-        "10/12",
-        "11/12"
-      ],
-      formatValue: e.fraction,
-      formatClassName: C.fraction
-    }
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  minWidth: {
+    cssNames: ["min-width"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  maxWidth: {
+    cssNames: ["max-width"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  height: {
+    cssNames: ["height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  minHeight: {
+    cssNames: ["min-height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
+  },
+  maxHeight: {
+    cssNames: ["max-height"],
+    values1: { values: y, formatValue: e.widthHeight },
+    values2: { values: t, formatValue: e.rem },
+    values3: { values: x, formatValue: e.fraction, formatClassName: h.fraction }
   },
   position: {
     cssNames: ["position"],
@@ -206,115 +229,115 @@ const R = {
   },
   top: {
     cssNames: ["top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   right: {
     cssNames: ["right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   bottom: {
     cssNames: ["bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   left: {
     cssNames: ["left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   inset: {
     cssNames: ["inset"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   margin: {
     cssNames: ["margin"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginHorizontal: {
     cssNames: ["margin-inline"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginVertical: {
     cssNames: ["margin-block"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginTop: {
     cssNames: ["margin-top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginRight: {
     cssNames: ["margin-right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginBottom: {
     cssNames: ["margin-bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   marginLeft: {
     cssNames: ["margin-left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: ["auto"] },
     values3: { values: [] }
   },
   padding: {
     cssNames: ["padding"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingHorizontal: {
     cssNames: ["padding-inline"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingVertical: {
     cssNames: ["padding-block"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingTop: {
     cssNames: ["padding-top"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingRight: {
     cssNames: ["padding-right"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingBottom: {
     cssNames: ["padding-bottom"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
   paddingLeft: {
     cssNames: ["padding-left"],
-    values1: { values: r, formatValue: e.rem },
+    values1: { values: v, formatValue: e.rem },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -326,43 +349,43 @@ const R = {
   },
   borderHorizontal: {
     cssNames: ["border-inline-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderVertical: {
     cssNames: ["border-block-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderTop: {
     cssNames: ["border-top-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderRight: {
     cssNames: ["border-right-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderBottom: {
     cssNames: ["border-bottom-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderLeft: {
     cssNames: ["border-left-width"],
-    values1: { values: r, formatValue: e.px },
+    values1: { values: v, formatValue: e.px },
     values2: { values: [] },
     values3: { values: [] }
   },
   borderStyle: {
     cssNames: ["border-style"],
-    values1: { values: T },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -475,19 +498,19 @@ const R = {
   },
   overflow: {
     cssNames: ["overflow"],
-    values1: { values: $ },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowX: {
     cssNames: ["overflow-x"],
-    values1: { values: $ },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
   overflowY: {
     cssNames: ["overflow-y"],
-    values1: { values: $ },
+    values1: { values: R },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -646,7 +669,7 @@ const R = {
     values2: { values: [] },
     values3: { values: [] }
   },
-  flexSelf: {
+  alignSelf: {
     cssNames: ["align-self"],
     values1: { values: ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] },
     values2: { values: [] },
@@ -660,25 +683,25 @@ const R = {
   },
   gridColumns: {
     cssNames: ["grid-template-columns"],
-    values1: { values: t, formatValue: (s, l) => `repeat(${l},minmax(0,1fr))` },
+    values1: { values: t, formatValue: (s, u) => `repeat(${u},minmax(0,1fr))` },
     values2: { values: [] },
     values3: { values: [] }
   },
   colSpan: {
     cssNames: ["grid-column"],
-    values1: { values: t, formatValue: (s, l) => `span ${l}/span ${l}` },
-    values2: { values: ["full-row"], formatValue: (s, l) => "1/-1" },
+    values1: { values: t, formatValue: (s, u) => `span ${u}/span ${u}` },
+    values2: { values: ["full-row"], formatValue: (s, u) => "1/-1" },
     values3: { values: [] }
   },
   colStart: {
     cssNames: ["grid-column-start"],
-    values1: { values: t, formatValue: (s, l) => `${l}` },
+    values1: { values: t, formatValue: (s, u) => `${u}` },
     values2: { values: [] },
     values3: { values: [] }
   },
   colEnd: {
     cssNames: ["grid-column-end"],
-    values1: { values: t, formatValue: (s, l) => `${l}` },
+    values1: { values: t, formatValue: (s, u) => `${u}` },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -690,7 +713,7 @@ const R = {
   },
   outlineStyle: {
     cssNames: ["outline-style"],
-    values1: { values: T },
+    values1: { values: j },
     values2: { values: [] },
     values3: { values: [] }
   },
@@ -710,7 +733,7 @@ const R = {
     cssNames: ["transition-duration"],
     values1: {
       values: [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1e3],
-      formatValue: (s, l) => `${l}ms`
+      formatValue: (s, u) => `${u}ms`
     },
     values2: { values: [] },
     values3: { values: [] }
@@ -746,10 +769,10 @@ const R = {
     values3: { values: [] }
   }
 };
-Object.keys(R).forEach((s) => {
-  a[s] = R[s], a[s].isThemeStyle = !0;
+Object.keys(S).forEach((s) => {
+  a[s] = S[s], a[s].isThemeStyle = !0;
 });
-const h = {
+const V = {
   m: { ...a.margin, key: "margin" },
   mx: { ...a.marginHorizontal, key: "marginHorizontal" },
   my: { ...a.marginVertical, key: "marginVertical" },
@@ -775,80 +798,80 @@ const h = {
   ai: { ...a.alignItems, key: "alignItems" },
   ac: { ...a.alignContent, key: "alignContent" },
   d: { ...a.flexDirection, key: "flexDirection" }
-}, G = Object.keys(a), P = Object.keys(h);
-F.forEach((s) => {
-  G.forEach((l) => {
-    a[`${l}${s}`] = { ...a[l] }, a[`${l}${s}`].pseudoSuffix = s;
-  }), P.forEach((l) => {
-    h[`${l}${s}`] = { ...h[l], key: `${h[l].key}${s}` }, h[`${l}${s}`].pseudoSuffix = s;
+}, q = Object.keys(a), U = Object.keys(V);
+G.forEach((s) => {
+  q.forEach((u) => {
+    a[`${u}${s}`] = { ...a[u] }, a[`${u}${s}`].pseudoSuffix = s;
+  }), U.forEach((u) => {
+    V[`${u}${s}`] = { ...V[u], key: `${V[u].key}${s}` }, V[`${u}${s}`].pseudoSuffix = s;
   });
 });
-var x;
+var w;
 ((s) => {
-  const l = new D(), c = [...Object.keys(a), ...Object.keys(R)], m = V();
+  const u = new _(), d = [...Object.keys(a), ...Object.keys(S)], m = z();
   let g = !1;
-  const p = c.reduce((v, u) => (v[u] = /* @__PURE__ */ new Set(), v), {});
+  const p = d.reduce((r, l) => (r[l] = /* @__PURE__ */ new Set(), r), {});
   s.doxClassName = "_dox";
-  function d(v, u) {
-    if (v in a)
-      return i(v, u);
-    if (v in h)
-      return i(h[v].key, u);
+  function c(r, l) {
+    if (r in a)
+      return b(r, l);
+    if (r in V)
+      return b(V[r].key, l);
   }
-  s.get = d;
-  function n() {
+  s.get = c;
+  function i() {
     if (g) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      const v = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
-      let u = b([v]);
-      u = b(u, "H"), u = b(u, "F"), u = b(u, "A"), m.innerHTML = u.join(""), g = !1;
+      const r = `.${s.doxClassName}{display: block;border: 0 solid black;outline: 0px solid black;margin: 0;padding: 0;background-color: initial;transition: all 250ms;box-sizing: border-box;font-family: inherit;font-size: inherit;}`;
+      let l = n([r]);
+      l = n(l, "H"), l = n(l, "F"), l = n(l, "A"), m.innerHTML = l.join(""), g = !1;
     }
   }
-  s.flush = n;
-  function i(v, u) {
-    var w;
-    p[v].has(u) || (g = !0, p[v].add(u));
-    const o = y(v, u), f = ((w = o.formatClassName) == null ? void 0 : w.call(o, v, u)) ?? `${v}${u}`;
-    return `-${l.getIdentity(f)}`;
+  s.flush = i;
+  function b(r, l) {
+    var $;
+    p[r].has(l) || (g = !0, p[r].add(l));
+    const o = k(r, l), f = (($ = o.formatClassName) == null ? void 0 : $.call(o, r, l)) ?? `${r}${l}`;
+    return `-${u.getIdentity(f)}`;
   }
-  function b(v, u) {
+  function n(r, l) {
     return Object.entries(p).filter(([o]) => {
       var f;
-      return ((f = a[o]) == null ? void 0 : f.pseudoSuffix) === u;
-    }).reduce((o, [f, w]) => (w.forEach((k) => {
-      var S;
-      let N = i(f, k);
-      u === "H" && (N = `${N}:hover`), u === "F" && (N = `${N}:focus-within`), u === "A" && (N = `${N}:active`);
-      const z = y(f, k), H = ((S = z.formatValue) == null ? void 0 : S.call(z, f, k)) ?? k, L = a[f].cssNames.map((B) => `${B}:${H};`).join("");
-      o.push(`.${N}{${L}}`);
-    }), o), v);
+      return ((f = a[o]) == null ? void 0 : f.pseudoSuffix) === l;
+    }).reduce((o, [f, $]) => ($.forEach((H) => {
+      var T;
+      let N = b(f, H);
+      l === "H" && (N = `${N}:hover`), l === "F" && (N = `${N}:focus-within`), l === "A" && (N = `${N}:active`);
+      const C = k(f, H), B = ((T = C.formatValue) == null ? void 0 : T.call(C, f, H)) ?? H, E = a[f].cssNames.map((I) => `${I}:${B};`).join("");
+      o.push(`.${N}{${E}}`);
+    }), o), r);
   }
-  function y(v, u) {
-    const o = a[v];
-    return o.isThemeStyle ? o : o.values1.values.includes(u) ? o.values1 : o.values2.values.includes(u) ? o.values2 : o.values3;
+  function k(r, l) {
+    const o = a[r];
+    return o.isThemeStyle ? o : o.values1.values.includes(l) ? o.values1 : o.values2.values.includes(l) ? o.values2 : o.values3;
   }
-  function V() {
-    const v = "crono-styles";
-    let u = document.getElementById(v);
-    return u || (u = document.createElement("style"), u.setAttribute("id", v), u.setAttribute("type", "text/css"), document.head.insertBefore(u, document.head.firstChild)), u;
+  function z() {
+    const r = "crono-styles";
+    let l = document.getElementById(r);
+    return l || (l = document.createElement("style"), l.setAttribute("id", r), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
   }
-})(x || (x = {}));
-function q(s) {
-  const l = _(s);
-  return I(x.flush, [s]), j(() => {
-    const c = [x.doxClassName], m = l ? { ...l, ...s } : s;
+})(w || (w = {}));
+function X(s) {
+  const u = W(s);
+  return A(w.flush, [s]), L(() => {
+    const d = [w.doxClassName], m = u ? { ...u, ...s } : s;
     return Object.entries(m).forEach(([g, p]) => {
-      c.push(x.get(g, p));
-    }), c;
-  }, [s, l]);
+      d.push(w.get(g, p));
+    }), d;
+  }, [s, u]);
 }
-function U(s, l) {
-  const { tag: c, children: m, props: g, className: p } = s, d = q(s), n = j(() => W.classNames(p, d).join(" "), [s]), i = { ...g, className: n };
-  l && (i.ref = l);
-  const [b, y] = A(!1), V = typeof m == "function";
-  return V && (i.onMouseEnter = () => y(!0), i.onMouseLeave = () => y(!1)), E.createElement(c || "div", i, V ? m({ isHover: b }) : m);
+function Y(s, u) {
+  const { tag: d, children: m, props: g, className: p, style: c } = s, i = X(s), b = L(() => M.classNames(p, i).join(" "), [s]), n = { ...g, className: b };
+  c && (n.style = c), u && (n.ref = u);
+  const [k, z] = F(!1), r = typeof m == "function";
+  return r && (n.onMouseEnter = () => z(!0), n.onMouseLeave = () => z(!1)), O.createElement(d || "div", n, r ? m({ isHover: k }) : m);
 }
-const Z = O(U);
+const ee = D(Y);
 export {
-  Z as default
+  ee as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "main": "./box.cjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",