@cronocode/react-box 1.6.2 → 1.6.3

package/components/dox.mjs

@@ -1,57 +1,73 @@
-import E, { useLayoutEffect as B, useMemo as T, forwardRef as O, useState as I } from "react";
-import { I as A, C as F } from "../utils/utils.mjs";
-import { useTheme as _ } from "../theme.mjs";
+import F, { useLayoutEffect as I, useMemo as E, forwardRef as _, useState as D } from "react";
+import { I as P, C as M } from "../utils/utils.mjs";
+import { useTheme as W } from "../theme.mjs";
 var e;
 ((a) => {
-  ((u) => {
-    function c(n, m) {
-      return `${n}${m.replace("/", "-")}`;
+  ((r) => {
+    function n(o, d) {
+      return `${o}${d.replace("/", "-")}`;
     }
-    u.fraction = c;
-  })(a.ClassName || (a.ClassName = {})), ((u) => {
-    function c(o, i) {
-      return `${i / 4}rem`;
+    r.fraction = n;
+    function v(o) {
+      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
     }
-    u.rem = c;
-    function n(o, i) {
-      return `${i}px`;
+    r.svg = v;
+  })(a.ClassName || (a.ClassName = {})), ((r) => {
+    function n(u, l) {
+      return `${l / 4}rem`;
     }
-    u.px = n;
-    function m(o, i) {
-      const [V, t] = i.split("/");
-      return `${+V / +t * 100}%`;
+    r.rem = n;
+    function v(u, l) {
+      return `${l}px`;
     }
-    u.fraction = m;
-    function g(o, i) {
-      switch (i) {
+    r.px = v;
+    function o(u, l) {
+      const [i, c] = l.split("/");
+      return `${+i / +c * 100}%`;
+    }
+    r.fraction = o;
+    function d(u, l) {
+      switch (l) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return o.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return i;
+          return l;
       }
     }
-    u.widthHeight = g;
-    function h(o) {
-      return (i, V) => `var(--${o}${V});`;
+    r.widthHeight = d;
+    function g(u) {
+      return (l, i) => `var(--${u}${i});`;
+    }
+    r.variables = g;
+    function y(u) {
+      return (l, i) => `var(--${u}${i});`;
+    }
+    r.svgVariables = y;
+    function x(u, l) {
+      return `repeat(${l},minmax(0,1fr))`;
+    }
+    r.gridColumns = x;
+    function f(u, l) {
+      return l === "full-row" ? "1/-1" : `span ${l}/span ${l}`;
     }
-    u.variables = h;
-    function N(o, i) {
-      return `repeat(${i},minmax(0,1fr))`;
+    r.gridColumn = f;
+    function h(u, l) {
+      return `${l}ms`;
     }
-    u.gridColumns = N;
-    function z(o, i) {
-      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
+    r.ms = h;
+    function V(u, l) {
+      return `${l}deg`;
     }
-    u.gridColumn = z;
-    function d(o, i) {
-      return `${i}ms`;
+    r.rotate = V;
+    function b(u, l) {
+      return l === "xAxis" ? "-1 1" : "1 -1";
     }
-    u.ms = d;
+    r.flip = b;
   })(a.Value || (a.Value = {}));
 })(e || (e = {}));
-const D = ["H", "F", "A"];
+const G = ["H", "F", "A"];
 var s;
 ((a) => {
   a.positiveSizes = [
@@ -192,17 +208,28 @@ var s;
     "11/12"
   ], a.widthHeightValues = ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"], a.alignSelf = ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
 })(s || (s = {}));
-const H = {
+const R = {
   shadow: { cssNames: ["box-shadow"], formatValue: e.Value.variables("shadow") },
   background: { cssNames: ["background"], formatValue: e.Value.variables("background") },
   color: { cssNames: ["color"], formatValue: e.Value.variables("color") },
   bgColor: { cssNames: ["background-color"], formatValue: e.Value.variables("color") },
   borderColor: { cssNames: ["border-color"], formatValue: e.Value.variables("color") },
   outlineColor: { cssNames: ["outline-color"], formatValue: e.Value.variables("color") }
-}, S = {
+}, j = {
+  fill: {
+    cssNames: ["fill"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  },
+  stroke: {
+    cssNames: ["stroke"],
+    formatValue: e.Value.svgVariables("color"),
+    formatSelector: e.ClassName.svg
+  }
+}, $ = {
   hover: { className: "_h" },
   focus: { className: "_f" }
-}, l = {
+}, t = {
   display: {
     cssNames: ["display"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
@@ -221,8 +248,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   minWidth: {
@@ -231,8 +258,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   maxWidth: {
@@ -241,8 +268,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   height: {
@@ -251,8 +278,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   minHeight: {
@@ -261,8 +288,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   maxHeight: {
@@ -271,8 +298,8 @@ const H = {
     values2: { values: s.positiveSizes, formatValue: e.Value.rem },
     values3: {
       values: s.widthHeightFractions,
-      formatValue: e.Value.fraction,
-      formatClassName: e.ClassName.fraction
+      formatValue: e.Value.fraction
+      // formatClassName: DoxStylesFormatters.ClassName.fraction,
     }
   },
   position: {
@@ -822,122 +849,155 @@ const H = {
     values2: { values: [] },
     values3: { values: [] }
   }
+}, C = {
+  rotate: {
+    cssNames: ["rotate"],
+    values1: { values: [0, 90, 180, 270, -90, -180, -270], formatValue: e.Value.rotate },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
+  flip: {
+    cssNames: ["scale"],
+    values1: { values: ["xAxis", "yAxis"], formatValue: e.Value.flip },
+    values2: { values: [] },
+    values3: { values: [] }
+  }
 };
-Object.keys(H).forEach((a) => {
-  l[a] = H[a], l[a].isThemeStyle = !0;
+Object.keys(C).forEach((a) => {
+  t[a] = C[a];
 });
-const b = {
-  m: { ...l.margin, key: "margin" },
-  mx: { ...l.marginHorizontal, key: "marginHorizontal" },
-  my: { ...l.marginVertical, key: "marginVertical" },
-  mt: { ...l.marginTop, key: "marginTop" },
-  mr: { ...l.marginRight, key: "marginRight" },
-  mb: { ...l.marginBottom, key: "marginBottom" },
-  ml: { ...l.marginLeft, key: "marginLeft" },
-  p: { ...l.padding, key: "padding" },
-  px: { ...l.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...l.paddingVertical, key: "paddingVertical" },
-  pt: { ...l.paddingTop, key: "paddingTop" },
-  pr: { ...l.paddingRight, key: "paddingRight" },
-  pb: { ...l.paddingBottom, key: "paddingBottom" },
-  pl: { ...l.paddingLeft, key: "paddingLeft" },
-  b: { ...l.border, key: "border" },
-  bx: { ...l.borderHorizontal, key: "borderHorizontal" },
-  by: { ...l.borderVertical, key: "borderVertical" },
-  bt: { ...l.borderTop, key: "borderTop" },
-  br: { ...l.borderRight, key: "borderRight" },
-  bb: { ...l.borderBottom, key: "borderBottom" },
-  bl: { ...l.borderLeft, key: "borderLeft" },
-  jc: { ...l.justifyContent, key: "justifyContent" },
-  ai: { ...l.alignItems, key: "alignItems" },
-  ac: { ...l.alignContent, key: "alignContent" },
-  d: { ...l.flexDirection, key: "flexDirection" }
-}, P = Object.keys(l), M = Object.keys(b);
-D.forEach((a) => {
-  P.forEach((u) => {
-    l[`${u}${a}`] = { ...l[u] }, l[`${u}${a}`].pseudoSuffix = a;
-  }), M.forEach((u) => {
-    b[`${u}${a}`] = { ...b[u], key: `${b[u].key}${a}` }, b[`${u}${a}`].pseudoSuffix = a;
+Object.keys(R).forEach((a) => {
+  t[a] = R[a], t[a].isThemeStyle = !0;
+});
+Object.keys(j).forEach((a) => {
+  t[a] = j[a], t[a].isThemeStyle = !0;
+});
+const z = {
+  w: { ...t.width, key: "width" },
+  h: { ...t.height, key: "height" },
+  m: { ...t.margin, key: "margin" },
+  mx: { ...t.marginHorizontal, key: "marginHorizontal" },
+  my: { ...t.marginVertical, key: "marginVertical" },
+  mt: { ...t.marginTop, key: "marginTop" },
+  mr: { ...t.marginRight, key: "marginRight" },
+  mb: { ...t.marginBottom, key: "marginBottom" },
+  ml: { ...t.marginLeft, key: "marginLeft" },
+  p: { ...t.padding, key: "padding" },
+  px: { ...t.paddingHorizontal, key: "paddingHorizontal" },
+  py: { ...t.paddingVertical, key: "paddingVertical" },
+  pt: { ...t.paddingTop, key: "paddingTop" },
+  pr: { ...t.paddingRight, key: "paddingRight" },
+  pb: { ...t.paddingBottom, key: "paddingBottom" },
+  pl: { ...t.paddingLeft, key: "paddingLeft" },
+  b: { ...t.border, key: "border" },
+  bx: { ...t.borderHorizontal, key: "borderHorizontal" },
+  by: { ...t.borderVertical, key: "borderVertical" },
+  bt: { ...t.borderTop, key: "borderTop" },
+  br: { ...t.borderRight, key: "borderRight" },
+  bb: { ...t.borderBottom, key: "borderBottom" },
+  bl: { ...t.borderLeft, key: "borderLeft" },
+  jc: { ...t.justifyContent, key: "justifyContent" },
+  ai: { ...t.alignItems, key: "alignItems" },
+  ac: { ...t.alignContent, key: "alignContent" },
+  d: { ...t.flexDirection, key: "flexDirection" }
+}, q = Object.keys(t), U = Object.keys(z);
+G.forEach((a) => {
+  q.forEach((r) => {
+    t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
+  }), U.forEach((r) => {
+    z[`${r}${a}`] = { ...z[r], key: `${z[r].key}${a}` }, z[`${r}${a}`].pseudoSuffix = a;
   });
 });
 var w;
 ((a) => {
   a.doxClassName = "_dox", a.svgClassName = "_svg";
-  const u = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
+  const r = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;#crono-box {position: absolute;top: 0;left: 0;height: 0;}}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
 .${a.doxClassName}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
-.${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);path,circle,rect,line {transition: all var(--svgTransitionTime);}}
-`, c = new A(), n = [...Object.keys(l), ...Object.keys(H)], m = V();
-  let g = !1;
-  const h = n.reduce((t, r) => (t[r] = /* @__PURE__ */ new Set(), t), {});
-  function N(t, r) {
-    if (t in l)
-      return d(t, r);
-    if (t in S)
-      return S[t].className;
+.${a.svgClassName}{width: 1.5rem;transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
+`, n = new P(), v = Object.keys(t), o = b();
+  let d = !1;
+  const g = v.reduce((u, l) => (u[l] = /* @__PURE__ */ new Set(), u), {});
+  function y(u, l) {
+    if (u in t)
+      return f(u, l);
+    if (u in $)
+      return $[u].className;
+    if (u in C)
+      return f(u, l);
   }
-  a.get = N;
-  function z() {
-    if (g) {
+  a.get = y;
+  function x() {
+    if (d) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let t = o([u]);
-      t = o(t, "H"), t = o(t, "F"), t = o(t, "A"), m.innerHTML = t.join(""), g = !1;
+      let u = h([r]);
+      u = h(u, "H"), u = h(u, "F"), u = h(u, "A"), o.innerHTML = u.join(""), d = !1;
     }
   }
-  a.flush = z;
-  function d(t, r) {
-    var y;
-    h[t].has(r) || (g = !0, h[t].add(r));
-    const v = i(t, r), f = ((y = v.formatClassName) == null ? void 0 : y.call(v, t, r)) ?? `${t}${r}`;
-    return `-${c.getIdentity(f)}`;
+  a.flush = x;
+  function f(u, l) {
+    var m;
+    g[u].has(l) || (d = !0, g[u].add(l));
+    const i = V(u, l), c = ((m = i.formatClassName) == null ? void 0 : m.call(i, u, l)) ?? `${u}${l}`;
+    return `-${n.getIdentity(c)}`;
   }
-  function o(t, r) {
-    return Object.entries(h).filter(([v]) => {
-      var f;
-      return ((f = l[v]) == null ? void 0 : f.pseudoSuffix) === r;
-    }).reduce((v, [f, y]) => (y.forEach((x) => {
-      var $;
-      let p = d(f, x);
-      r === "H" && (p = `${p}:hover,.${S.hover.className}:hover>.${p}`), r === "F" && (p = `${p}:focus-within,.${S.focus.className}:focus-within>.${p}`), r === "A" && (p = `${p}:active`);
-      const C = i(f, x), R = (($ = C.formatValue) == null ? void 0 : $.call(C, f, x)) ?? x, j = l[f].cssNames.map((L) => `${L}:${R};`).join("");
-      v.push(`.${p}{${j}}`);
-    }), v), t);
+  function h(u, l) {
+    return Object.entries(g).filter(([c]) => {
+      var m;
+      return ((m = t[c]) == null ? void 0 : m.pseudoSuffix) === l;
+    }).reduce((c, [m, L]) => (L.forEach((k) => {
+      var T;
+      const p = V(m, k), N = `.${f(m, k)}`;
+      let S = [];
+      l ? l === "H" ? S = [
+        ...i(`${N}:hover`, p),
+        ...i(`.${$.hover.className}:hover>${N}`, p)
+      ] : l === "F" ? S = [
+        ...i(`${N}:focus-within`, p),
+        ...i(`.${$.focus.className}:focus-within>${N}`, p)
+      ] : l === "A" && (S = i(`${N}:active`, p)) : S = i(N, p);
+      const A = ((T = p.formatValue) == null ? void 0 : T.call(p, m, k)) ?? k, B = t[m].cssNames.map((O) => `${O}:${A};`).join("");
+      c.push(`${S.join(",")}{${B}}`);
+    }), c), u);
+    function i(c, m) {
+      return m.formatSelector ? m.formatSelector(c) : [c];
+    }
   }
-  function i(t, r) {
-    const v = l[t];
-    return v.isThemeStyle ? v : v.values1.values.includes(r) ? v.values1 : v.values2.values.includes(r) ? v.values2 : v.values3;
+  function V(u, l) {
+    const i = t[u];
+    return i.isThemeStyle ? i : i.values1.values.includes(l) ? i.values1 : i.values2.values.includes(l) ? i.values2 : i.values3;
   }
-  function V() {
-    const t = "crono-styles";
-    let r = document.getElementById(t);
-    return r || (r = document.createElement("style"), r.setAttribute("id", t), r.setAttribute("type", "text/css"), document.head.insertBefore(r, document.head.firstChild)), r;
+  function b() {
+    const u = "crono-styles";
+    let l = document.getElementById(u);
+    return l || (l = document.createElement("style"), l.setAttribute("id", u), l.setAttribute("type", "text/css"), document.head.insertBefore(l, document.head.firstChild)), l;
   }
 })(w || (w = {}));
-function W(a) {
-  const u = _(a);
-  return B(w.flush, [a]), T(() => {
-    const c = [w.doxClassName], n = u ? { ...k(u), ...k(a) } : k(a);
-    return Object.entries(n).forEach(([m, g]) => {
-      c.push(w.get(m, g));
-    }), c;
-  }, [a, u]);
+function X(a, r) {
+  const n = W(a);
+  return I(w.flush, [a]), E(() => {
+    const v = [r ? w.svgClassName : w.doxClassName], o = n ? { ...H(n), ...H(a) } : H(a);
+    return Object.entries(o).forEach(([d, g]) => {
+      v.push(w.get(d, g));
+    }), v;
+  }, [a, n]);
 }
-function k(a) {
-  const u = { ...a };
-  return Object.keys(u).forEach((n) => {
-    const m = b[n];
-    m && (m.key in u || (u[m.key] = u[n]), delete u[n]);
-  }), u;
+function H(a) {
+  const r = { ...a };
+  return Object.keys(r).forEach((v) => {
+    const o = z[v];
+    o && (o.key in r || (r[o.key] = r[v]), delete r[v]);
+  }), r;
 }
-function G(a, u) {
-  const { tag: c, children: n, props: m, className: g, style: h } = a, N = W(a), z = T(() => F.classNames(g, N).join(" "), [a]), d = { ...m, className: z };
-  h && (d.style = h), u && (d.ref = u);
-  const [o, i] = I(!1), V = typeof n == "function";
-  return V && (d.onMouseEnter = () => i(!0), d.onMouseLeave = () => i(!1)), E.createElement(c || "div", d, V ? n({ isHover: o }) : n);
+function Y(a, r) {
+  const { tag: n, children: v, props: o, className: d, style: g } = a, y = X(a, n === "svg"), x = E(() => M.classNames(d, y).join(" "), [a]), f = { ...o, className: x };
+  g && (f.style = g), r && (f.ref = r);
+  const [h, V] = D(!1), b = typeof v == "function";
+  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), F.createElement(n || "div", f, b ? v({ isHover: h }) : v);
 }
-const J = O(G);
+const ee = _(Y);
 export {
-  J as default
+  ee as default
 };

package/package.json

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