@cronocode/react-box 1.7.1 → 1.7.2

package/box.d.ts

@@ -1,2 +1,21 @@
-import Dox from './components/dox';
-export default Dox;
+import React, { RefAttributes } from 'react';
+import ClassNameUtils from './utils/className/classNameUtils';
+import { DoxStyleProps } from './components/dox/doxStyles';
+import { StylesContext } from './components/dox/stylesContext';
+type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
+type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
+type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
+type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
+interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends DoxStyleProps {
+    children?: React.ReactNode | ((props: {
+        isHover: boolean;
+    }) => React.ReactNode);
+    tag?: TTag;
+    props?: TagPropsType<TTag>;
+    className?: ClassNameUtils.ClassNameType;
+    style?: React.ComponentProps<TTag>['style'];
+}
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementType<React.JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
+export default _default;
+declare const flushStyles: typeof StylesContext.flush;
+export { flushStyles };

package/box.js

@@ -1 +1,14 @@
-import "./components/dox.js";
+import y, { forwardRef as N, useMemo as v, useState as S } from "react";
+import { C as p } from "./utils.js";
+import { u as C, S as d } from "./components/dox.js";
+function g(e, o) {
+  const { tag: a = "div", children: t, props: c, className: f, style: n } = e, m = C(e, a === "svg"), u = v(() => p.classNames(f, m).join(" "), [e]), s = { ...c, className: u };
+  n && (s.style = n), o && (s.ref = o);
+  const [i, l] = S(!1), r = typeof t == "function";
+  return r && (s.onMouseEnter = () => l(!0), s.onMouseLeave = () => l(!1)), y.createElement(a, s, r ? t({ isHover: i }) : t);
+}
+const M = N(g), { flush: E } = d;
+export {
+  M as B,
+  E as f
+};

package/components/baseSvg.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import Dox from './dox';
+import Box from '../box';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxSvgStyles } from './dox/doxStyles';
-type SvgTagProps = Required<React.ComponentProps<typeof Dox<'svg'>>>['props'];
+type SvgTagProps = Required<React.ComponentProps<typeof Box<'svg'>>>['props'];
 type DoxSvgTagProps = Omit<SvgTagProps, 'viewBox' | 'width' | 'height'>;
 interface Props extends DoxSvgStyles {
     children?: React.ReactNode | ((props: {

package/components/baseSvg.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { D as n } from "./dox.js";
+import { B as n } from "../box.js";
 function a(o, r) {
   const { viewBox: s = "0 0 24 24", width: t = "1.5rem", height: p, props: e, ...g } = o;
   return /* @__PURE__ */ i(

package/components/button.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { D as p } from "./dox.js";
+import { B as p } from "../box.js";
 import { O as i } from "../utils.js";
 const m = ["type", "onClick", "disabled"];
 function e(o, t) {

package/components/checkbox.js

@@ -1,6 +1,6 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { D as t } from "./dox.js";
+import { B as t } from "../box.js";
 import { O as a } from "../utils.js";
 import { F as l } from "./flex.js";
 import { c as d } from "../box.module.css.js";

package/components/dataGrid.js

@@ -1,5 +1,5 @@
 import { jsx as i, Fragment as m, jsxs as c } from "react/jsx-runtime";
-import { D as t } from "./dox.js";
+import { B as t } from "../box.js";
 function u(n) {
   if (!(n != null && n.length))
     return {

package/components/dox.js

@@ -1,26 +1,26 @@
-import O, { useMemo as j, useLayoutEffect as I, useEffect as D, forwardRef as _, useState as P } from "react";
-import { I as M, C as W } from "../utils.js";
-import { u as G } from "../theme.js";
+import { useMemo as L, useLayoutEffect as O, useEffect as I } from "react";
+import { I as _ } from "../utils.js";
+import { u as D } from "../theme.js";
 var e;
 ((a) => {
   ((r) => {
-    function m(l, d) {
+    function c(l, d) {
       return `${l}${d.replace("/", "-")}`;
     }
-    r.fraction = m;
-    function n(l) {
+    r.fraction = c;
+    function m(l) {
       return [`${l} path`, `${l} circle`, `${l} rect`, `${l} line`];
     }
-    r.svg = n;
+    r.svg = m;
   })(a.ClassName || (a.ClassName = {})), ((r) => {
-    function m(u, i) {
+    function c(u, i) {
       return `${i / 4}rem`;
     }
-    r.rem = m;
-    function n(u, i) {
+    r.rem = c;
+    function m(u, i) {
       return `${i}px`;
     }
-    r.px = n;
+    r.px = m;
     function l(u, i) {
       const [o, v] = i.split("/");
       return `${+o / +v * 100}%`;
@@ -41,33 +41,33 @@ var e;
       return (i, o) => `var(--${u}${o});`;
     }
     r.variables = g;
-    function z(u) {
+    function S(u) {
       return (i, o) => `var(--${u}${o});`;
     }
-    r.svgVariables = z;
-    function x(u, i) {
+    r.svgVariables = S;
+    function k(u, i) {
       return `repeat(${i},minmax(0,1fr))`;
     }
-    r.gridColumns = x;
-    function f(u, i) {
+    r.gridColumns = k;
+    function N(u, i) {
       return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
-    r.gridColumn = f;
-    function h(u, i) {
+    r.gridColumn = N;
+    function p(u, i) {
       return `${i}ms`;
     }
-    r.ms = h;
-    function V(u, i) {
+    r.ms = p;
+    function y(u, i) {
       return `${i}deg`;
     }
-    r.rotate = V;
-    function b(u, i) {
+    r.rotate = y;
+    function $(u, i) {
       return i === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = b;
+    r.flip = $;
   })(a.Value || (a.Value = {}));
 })(e || (e = {}));
-const q = ["H", "F", "A"];
+const W = ["H", "F", "A"];
 var s;
 ((a) => {
   a.positiveSizes = [
@@ -208,14 +208,14 @@ 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 R = {
+const A = {
   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") }
-}, A = {
+}, R = {
   fill: {
     cssNames: ["fill"],
     formatValue: e.Value.svgVariables("color"),
@@ -226,7 +226,7 @@ const R = {
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, H = {
+}, x = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 }, t = {
@@ -872,13 +872,13 @@ const R = {
 Object.keys(C).forEach((a) => {
   t[a] = C[a];
 });
-Object.keys(R).forEach((a) => {
-  t[a] = R[a], t[a].isThemeStyle = !0;
-});
 Object.keys(A).forEach((a) => {
   t[a] = A[a], t[a].isThemeStyle = !0;
 });
-const y = {
+Object.keys(R).forEach((a) => {
+  t[a] = R[a], t[a].isThemeStyle = !0;
+});
+const V = {
   w: { ...t.width, key: "width" },
   h: { ...t.height, key: "height" },
   m: { ...t.margin, key: "margin" },
@@ -906,15 +906,15 @@ const y = {
   ai: { ...t.alignItems, key: "alignItems" },
   ac: { ...t.alignContent, key: "alignContent" },
   d: { ...t.flexDirection, key: "flexDirection" }
-}, U = Object.keys(t), X = Object.keys(y);
-q.forEach((a) => {
-  U.forEach((r) => {
+}, G = Object.keys(t), P = Object.keys(V);
+W.forEach((a) => {
+  G.forEach((r) => {
     t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
-  }), X.forEach((r) => {
-    y[`${r}${a}`] = { ...y[r], key: `${y[r].key}${a}` }, y[`${r}${a}`].pseudoSuffix = a;
+  }), P.forEach((r) => {
+    V[`${r}${a}`] = { ...V[r], key: `${V[r].key}${a}` }, V[`${r}${a}`].pseudoSuffix = a;
   });
 });
-var w;
+var b;
 ((a) => {
   a.doxClassName = "_dox", a.svgClassName = "_svg";
   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;}}
@@ -923,88 +923,82 @@ 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}{transition: all var(--svgTransitionTime);}.${a.svgClassName} path,.${a.svgClassName} circle,.${a.svgClassName} rect,.${a.svgClassName} line {transition: all var(--svgTransitionTime);}
-`, m = new M(), n = Object.keys(t), l = b();
+`, c = new _(), m = Object.keys(t), l = $();
   let d = !1;
-  const g = n.reduce((u, i) => (u[i] = /* @__PURE__ */ new Set(), u), {});
-  function z(u, i) {
+  const g = m.reduce((u, i) => (u[i] = /* @__PURE__ */ new Set(), u), {});
+  function S(u, i) {
     if (u in t)
-      return f(u, i);
-    if (u in H)
-      return H[u].className;
+      return N(u, i);
+    if (u in x)
+      return x[u].className;
     if (u in C)
-      return f(u, i);
+      return N(u, i);
   }
-  a.get = z;
-  function x() {
+  a.get = S;
+  function k() {
     if (d) {
       console.info("%c💬Flush Dox Styles", "color: #00ffff");
-      let u = h([r]);
-      u = h(u, "H"), u = h(u, "F"), u = h(u, "A"), l.innerHTML = u.join(""), d = !1;
+      let u = p([r]);
+      u = p(u, "H"), u = p(u, "F"), u = p(u, "A"), l.innerHTML = u.join(""), d = !1;
     }
   }
-  a.flush = x;
-  function f(u, i) {
-    var c;
+  a.flush = k;
+  function N(u, i) {
+    var n;
     g[u].has(i) || (d = !0, g[u].add(i));
-    const o = V(u, i), v = ((c = o.formatClassName) == null ? void 0 : c.call(o, u, i)) ?? `${u}${i}`;
-    return `-${m.getIdentity(v)}`;
+    const o = y(u, i), v = ((n = o.formatClassName) == null ? void 0 : n.call(o, u, i)) ?? `${u}${i}`;
+    return `-${c.getIdentity(v)}`;
   }
-  function h(u, i) {
+  function p(u, i) {
     return Object.entries(g).filter(([v]) => {
-      var c;
-      return ((c = t[v]) == null ? void 0 : c.pseudoSuffix) === i;
-    }).reduce((v, [c, E]) => (E.forEach((k) => {
+      var n;
+      return ((n = t[v]) == null ? void 0 : n.pseudoSuffix) === i;
+    }).reduce((v, [n, j]) => (j.forEach((z) => {
       var T;
-      const p = V(c, k), N = `.${f(c, k)}`;
-      let S = [];
-      i ? i === "H" ? S = [
-        ...o(`${N}:hover`, p),
-        ...o(`.${H.hover.className}:hover>${N}`, p)
-      ] : i === "F" ? S = [
-        ...o(`${N}:focus-within`, p),
-        ...o(`.${H.focus.className}:focus-within>${N}`, p)
-      ] : i === "A" && (S = o(`${N}:active`, p)) : S = o(N, p);
-      const F = ((T = p.formatValue) == null ? void 0 : T.call(p, c, k)) ?? k, B = t[c].cssNames.map((L) => `${L}:${F};`).join("");
-      v.push(`${S.join(",")}{${B}}`);
+      const f = y(n, z), h = `.${N(n, z)}`;
+      let w = [];
+      i ? i === "H" ? w = [
+        ...o(`${h}:hover`, f),
+        ...o(`.${x.hover.className}:hover>${h}`, f)
+      ] : i === "F" ? w = [
+        ...o(`${h}:focus-within`, f),
+        ...o(`.${x.focus.className}:focus-within>${h}`, f)
+      ] : i === "A" && (w = o(`${h}:active`, f)) : w = o(h, f);
+      const F = ((T = f.formatValue) == null ? void 0 : T.call(f, n, z)) ?? z, B = t[n].cssNames.map((E) => `${E}:${F};`).join("");
+      v.push(`${w.join(",")}{${B}}`);
     }), v), u);
-    function o(v, c) {
-      return c.formatSelector ? c.formatSelector(v) : [v];
+    function o(v, n) {
+      return n.formatSelector ? n.formatSelector(v) : [v];
     }
   }
-  function V(u, i) {
+  function y(u, i) {
     const o = t[u];
     return o.isThemeStyle ? o : o.values1.values.includes(i) ? o.values1 : o.values2.values.includes(i) ? o.values2 : o.values3;
   }
-  function b() {
+  function $() {
     const u = "crono-styles", o = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
     let v = o.getElementById(u);
     return v || (v = o.createElement("style"), v.setAttribute("id", u), v.setAttribute("type", "text/css"), o.head.insertBefore(v, o.head.firstChild)), v;
   }
-})(w || (w = {}));
-const Y = typeof window < "u" && typeof window.document < "u", J = Y ? I : D;
+})(b || (b = {}));
+const q = typeof window < "u" && typeof window.document < "u", M = q ? O : I;
 function Q(a, r) {
-  const m = G(a);
-  return J(w.flush, [a]), j(() => {
-    const n = [r ? w.svgClassName : w.doxClassName], l = m ? { ...$(m), ...$(a) } : $(a);
+  const c = D(a);
+  return M(b.flush, [a]), L(() => {
+    const m = [r ? b.svgClassName : b.doxClassName], l = c ? { ...H(c), ...H(a) } : H(a);
     return "inline" in l && (l.display === "block" ? l.display = "inline-block" : l.display === "flex" ? l.display = "inline-flex" : l.display === "grid" && (l.display = "inline-grid"), delete l.inline), "inlineH" in l && (l.displayH === "block" ? l.displayH = "inline-block" : l.displayH === "flex" ? l.displayH = "inline-flex" : l.displayH === "grid" && (l.displayH = "inline-grid"), delete l.inlineH), "inlineF" in l && (l.displayF === "block" ? l.displayF = "inline-block" : l.displayF === "flex" ? l.displayF = "inline-flex" : l.displayF === "grid" && (l.displayF = "inline-grid"), delete l.inlineF), "inlineA" in l && (l.displayA === "block" ? l.displayA = "inline-block" : l.displayA === "flex" ? l.displayA = "inline-flex" : l.displayA === "grid" && (l.displayA = "inline-grid"), delete l.inlineA), Object.entries(l).forEach(([d, g]) => {
-      n.push(w.get(d, g));
-    }), n;
-  }, [a, m]);
+      m.push(b.get(d, g));
+    }), m;
+  }, [a, c]);
 }
-function $(a) {
+function H(a) {
   const r = { ...a };
-  return Object.keys(r).forEach((n) => {
-    const l = y[n];
-    l && (l.key in r || (r[l.key] = r[n]), delete r[n]);
+  return Object.keys(r).forEach((m) => {
+    const l = V[m];
+    l && (l.key in r || (r[l.key] = r[m]), delete r[m]);
   }), r;
 }
-function Z(a, r) {
-  const { tag: m = "div", children: n, props: l, className: d, style: g } = a, z = Q(a, m === "svg"), x = j(() => W.classNames(d, z).join(" "), [a]), f = { ...l, className: x };
-  g && (f.style = g), r && (f.ref = r);
-  const [h, V] = P(!1), b = typeof n == "function";
-  return b && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), O.createElement(m, f, b ? n({ isHover: h }) : n);
-}
-const le = _(Z);
 export {
-  le as D
+  b as S,
+  Q as u
 };

package/components/flex.js

@@ -1,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as t } from "react";
-import { D as f } from "./dox.js";
+import { B as f } from "../box.js";
 function s(o, r) {
   const { inline: e, ...i } = o;
   return /* @__PURE__ */ n(f, { ref: r, display: e ? "inline-flex" : "flex", ...i });

package/components/form.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
 import { useRef as i, useCallback as p } from "react";
-import { D as u } from "./dox.js";
+import { B as u } from "../box.js";
 import { F as c } from "../utils.js";
 function x(o) {
   const { onSubmit: m, props: n } = o, r = i(null), s = p((t) => {

package/components/grid.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import { D as d } from "./dox.js";
+import { B as d } from "../box.js";
 function e(r, i) {
   const { inline: o, ...n } = r;
   return /* @__PURE__ */ t(d, { ref: i, display: o ? "inline-grid" : "grid", ...n });

package/components/radioButton.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { D as a } from "./dox.js";
+import { B as a } from "../box.js";
 import { O as i } from "../utils.js";
 const d = [
   "name",

package/components/textarea.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import { D as n } from "./dox.js";
+import { B as n } from "../box.js";
 import { O as s } from "../utils.js";
 const m = [
   "name",

package/components/textbox.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { D as a } from "./dox.js";
+import { B as a } from "../box.js";
 import { O as p } from "../utils.js";
 const s = [
   "name",

package/components/tooltip.js

@@ -1,11 +1,11 @@
 import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
 import { createPortal as b } from "react-dom";
-import { D as u } from "./dox.js";
-import { useRef as D, useState as E, useCallback as d, useLayoutEffect as L } from "react";
-import { u as g } from "../utils.js";
+import { B as u } from "../box.js";
+import { useRef as E, useState as L, useCallback as d, useLayoutEffect as g } from "react";
+import { u as z } from "../utils.js";
 const i = 2;
-function y(f) {
-  const { onPositionChange: c } = f, s = D(null), [t, p] = E(), m = g(), w = d(
+function j(f) {
+  const { onPositionChange: c } = f, s = E(null), [t, p] = L(), m = z(), w = d(
     (o, e) => {
       const r = (n) => {
         n.target.contains(o) && e(o);
@@ -32,7 +32,7 @@ function y(f) {
     },
     [t]
   );
-  return L(() => {
+  return g(() => {
     if (s.current) {
       l(s.current);
       const o = w(s.current, l), e = h(s.current, l);
@@ -59,5 +59,5 @@ function y(f) {
   ] });
 }
 export {
-  y as T
+  j as T
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "main": "./box.js",
   "module": "./box.js",
   "types": "./box.d.ts",

package/components/dox.d.ts

@@ -1,21 +0,0 @@
-import React, { RefAttributes } from 'react';
-import ClassNameUtils from '../utils/className/classNameUtils';
-import { DoxStyleProps } from './dox/doxStyles';
-import { StylesContext } from './dox/stylesContext';
-type ExtractElementType<T> = T extends React.DetailedHTMLProps<React.HTMLAttributes<infer E>, infer E> ? E : T extends React.SVGProps<infer E> ? E : never;
-type ExtractElementFromTag<T extends keyof React.JSX.IntrinsicElements> = ExtractElementType<React.JSX.IntrinsicElements[T]>;
-type AllProps<TTag extends keyof React.JSX.IntrinsicElements> = React.ComponentProps<TTag>;
-type TagPropsType<TTag extends keyof React.JSX.IntrinsicElements> = Omit<AllProps<TTag>, 'className' | 'style' | 'ref'>;
-interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends DoxStyleProps {
-    children?: React.ReactNode | ((props: {
-        isHover: boolean;
-    }) => React.ReactNode);
-    tag?: TTag;
-    props?: TagPropsType<TTag>;
-    className?: ClassNameUtils.ClassNameType;
-    style?: React.ComponentProps<TTag>['style'];
-}
-declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementType<React.JSX.IntrinsicElements[TTag]>>) => React.ReactNode;
-export default _default;
-declare const flushStyles: typeof StylesContext.flush;
-export { flushStyles };