@cronocode/react-box 1.3.3 → 1.3.5

package/baseSvg.module.css.mjs

@@ -1,4 +1,4 @@
-const t = { base: "cGQ", rotate0: "cGR", rotateH0: "cGS", hovertrue: "_h", rotate90: "cGT", rotateH90: "cGU", rotate180: "cGV", rotateH180: "cGW", rotate270: "cGX", rotateH270: "cGY", flipxAxis: "cGZ", flipHxAxis: "cG0", flipyAxis: "cG1", flipHyAxis: "cG2", rotateF0: "cG3", focustrue: "_f", rotateF90: "cG4", rotateF180: "cG5", rotateF270: "cG6", flipFxAxis: "cG7", flipFyAxis: "cG8", rotateA0: "cG9", rotateA90: "cHa", rotateA180: "cHb", rotateA270: "cHc", flipAxAxis: "cHd", flipAyAxis: "cHe" };
+const t = { base: "bDG", rotate0: "bDH", rotateH0: "bDI", hovertrue: "_h", rotate90: "bDJ", rotateH90: "bDK", rotate180: "bDL", rotateH180: "bDM", rotate270: "bDN", rotateH270: "bDO", flipxAxis: "bDP", flipHxAxis: "bDQ", flipyAxis: "bDR", flipHyAxis: "bDS", rotateF0: "bDT", focustrue: "_f", rotateF90: "bDU", rotateF180: "bDV", rotateF270: "bDW", flipFxAxis: "bDX", flipFyAxis: "bDY", rotateA0: "bDZ", rotateA90: "bD0", rotateA180: "bD1", rotateA270: "bD2", flipAxAxis: "bD3", flipAyAxis: "bD4" };
 export {
   t as c
 };

package/box.mjs

@@ -1,22 +1,54 @@
-import $, { forwardRef as b, useState as E } from "react";
-import { c } from "./box.module.css.mjs";
-import { C as T, a as n } from "./utils/utils.mjs";
-import { useTheme as g } from "./theme.mjs";
-function j(r, f) {
-  const { tag: p, children: i, props: d, className: l, style: m } = r, e = l ? T.classNames(c.box, l) : [c.box], x = g(r);
-  Object.entries(x).forEach(([s, o]) => {
-    const a = c[s + o];
-    a ? e.push(a) : s in n && e.push(`${n[s]}${o}`);
-  }), Object.entries(r).forEach(([s, o]) => {
-    const a = c[s + o];
-    a ? e.push(a) : s in n && e.push(`${n[s]}${o}`);
-  });
-  const t = { ...d, className: e.join(" ") };
-  m && (t.style = m), f && (t.ref = f);
-  const [N, u] = E(!1), h = typeof i == "function";
-  return h && (t.onMouseEnter = () => u(!0), t.onMouseLeave = () => u(!1)), $.createElement(p || "div", t, h ? i({ isHover: N }) : i);
+import T, { forwardRef as j, useMemo as C, useState as N } from "react";
+import { c as m } from "./box.module.css.mjs";
+import { C as y, a as p } from "./utils/utils.mjs";
+import { useTheme as B } from "./theme.mjs";
+function P(t, e) {
+  const { tag: s, children: o, props: n, className: c, style: l } = t, h = B(t), x = C(() => {
+    const a = c ? y.classNames(m.box, c) : [m.box], H = { ...u(h), ...u(t) };
+    return Object.entries(H).forEach(([i, b]) => {
+      const g = m[i + b];
+      g ? a.push(g) : i in p && a.push(`${p[i]}${b}`);
+    }), a.join(" ");
+  }, [t]), r = { ...n, className: x };
+  l && (r.style = l), e && (r.ref = e);
+  const [$, d] = N(!1), f = typeof o == "function";
+  return f && (r.onMouseEnter = () => d(!0), r.onMouseLeave = () => d(!1)), T.createElement(s || "div", r, f ? o({ isHover: $ }) : o);
+}
+const z = j(P), R = {
+  m: "margin",
+  mx: "marginHorizontal",
+  my: "marginVertical",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  p: "padding",
+  px: "paddingHorizontal",
+  py: "paddingVertical",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  b: "border",
+  bx: "borderHorizontal",
+  by: "borderVertical",
+  bt: "borderTop",
+  br: "borderRight",
+  bb: "borderBottom",
+  bl: "borderLeft",
+  bg: "background",
+  jc: "justifyContent",
+  ai: "alignItems",
+  ac: "alignContent",
+  d: "flexDirection"
+}, v = Object.entries(R).reduce((t, [e, s]) => (t[e] = s, t[`${e}H`] = `${s}H`, t[`${e}F`] = `${s}F`, t[`${e}A`] = `${s}A`, t), {});
+function u(t) {
+  const e = { ...t };
+  return Object.keys(e).forEach((o) => {
+    const n = v[o];
+    n && (n in e || (e[n] = e[o]), delete e[o]);
+  }), e;
 }
-const A = b(j);
 export {
-  A as default
+  z as default
 };