@cronocode/react-box 1.7.0 → 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,7 +1,14 @@
-import r from "./components/dox.js";
-import "react";
-import "./utils.js";
-import "./theme.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 {
-  r as default
+  M as B,
+  E as f
 };

package/components/baseSvg.d.ts

@@ -1,2 +1,19 @@
-import DoxSvg from './doxSvg';
-export default DoxSvg;
+/// <reference types="react" />
+import Box from '../box';
+import ClassNameUtils from '../utils/className/classNameUtils';
+import { DoxSvgStyles } from './dox/doxStyles';
+type SvgTagProps = Required<React.ComponentProps<typeof Box<'svg'>>>['props'];
+type DoxSvgTagProps = Omit<SvgTagProps, 'viewBox' | 'width' | 'height'>;
+interface Props extends DoxSvgStyles {
+    children?: React.ReactNode | ((props: {
+        isHover: boolean;
+    }) => React.ReactNode);
+    props?: DoxSvgTagProps;
+    style?: React.ComponentProps<'svg'>['style'];
+    className?: ClassNameUtils.ClassNameType;
+    viewBox?: string;
+    width?: string;
+    height?: string;
+}
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+export default _default;

package/components/baseSvg.js

@@ -1,6 +1,19 @@
-import "./doxSvg.js";
-import "react/jsx-runtime";
-import "react";
-import "./dox.js";
-import "../utils.js";
-import "../theme.js";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+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(
+    n,
+    {
+      tag: "svg",
+      ref: r,
+      props: { ...e, viewBox: s, width: t, height: p, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
+      ...g
+    }
+  );
+}
+const x = m(a);
+export {
+  x as b
+};

package/components/button.js

@@ -1,11 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import m from "./dox.js";
-import { O as p } from "../utils.js";
-import "../theme.js";
-const s = ["type", "onClick", "disabled"];
+import { forwardRef as s } from "react";
+import { B as p } from "../box.js";
+import { O as i } from "../utils.js";
+const m = ["type", "onClick", "disabled"];
 function e(o, t) {
-  const r = p.buildProps(o, s);
-  return /* @__PURE__ */ n(m, { ref: t, tag: "button", component: "button", ...r });
+  const r = i.buildProps(o, m);
+  return /* @__PURE__ */ n(p, { ref: t, tag: "button", component: "button", ...r });
 }
-i(e);
+const u = s(e);
+export {
+  u as b
+};

package/components/checkbox.js

@@ -1,10 +1,9 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import t from "./dox.js";
+import { B as t } from "../box.js";
 import { O as a } from "../utils.js";
-import l from "./flex.js";
+import { F as l } from "./flex.js";
 import { c as d } from "../box.module.css.js";
-import "../theme.js";
 const p = [
   "name",
   "onInput",
@@ -24,4 +23,7 @@ function m(o, r) {
     !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", className: d._checkedIcon, children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ e("path", { stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", d: "M6 10.15L8.5 13 14 7" }) }) }) })
   ] });
 }
-c(m);
+const b = c(m);
+export {
+  b as c
+};

package/components/dataGrid.js

@@ -1,5 +1,32 @@
-import "react/jsx-runtime";
-import "./dox.js";
-import "react";
-import "../utils.js";
-import "../theme.js";
+import { jsx as i, Fragment as m, jsxs as c } from "react/jsx-runtime";
+import { B as t } from "../box.js";
+function u(n) {
+  if (!(n != null && n.length))
+    return {
+      rows: [],
+      columns: []
+    };
+  const s = Object.keys(n[0]);
+  return {
+    rows: n.map((r) => ({
+      dataRow: r,
+      cells: s.map((e) => ({
+        key: e,
+        value: r[e]
+      }))
+    })),
+    columns: s.map((r) => ({
+      key: r
+    }))
+  };
+}
+function d(n) {
+  const { data: s } = n, r = u(s);
+  return /* @__PURE__ */ i(t, { display: "grid", b: 1, borderRadius: 1, children: r.columns.length === 0 ? /* @__PURE__ */ i(m, { children: "empty grid" }) : /* @__PURE__ */ c(m, { children: [
+    r.columns.map((e, o) => /* @__PURE__ */ i(t, { style: { gridColumn: o + 1 }, children: e.key.toString() }, e.key.toString())),
+    r.rows.map((e, o) => e.cells.map((l) => /* @__PURE__ */ i(t, { children: l.value }, l.key.toString() + o)))
+  ] }) });
+}
+export {
+  d as D
+};

package/components/dox.js

@@ -1,73 +1,73 @@
-import O, { useMemo as j, useLayoutEffect as I, useEffect as _, forwardRef as D, useState as P } from "react";
-import { I as M, C as W } from "../utils.js";
-import { useTheme 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, t) {
-      return `${t / 4}rem`;
+    function c(u, i) {
+      return `${i / 4}rem`;
     }
-    r.rem = m;
-    function n(u, t) {
-      return `${t}px`;
+    r.rem = c;
+    function m(u, i) {
+      return `${i}px`;
     }
-    r.px = n;
-    function l(u, t) {
-      const [o, v] = t.split("/");
+    r.px = m;
+    function l(u, i) {
+      const [o, v] = i.split("/");
       return `${+o / +v * 100}%`;
     }
     r.fraction = l;
-    function d(u, t) {
-      switch (t) {
+    function d(u, i) {
+      switch (i) {
         case "fit":
           return "100%";
         case "fit-screen":
           return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return t;
+          return i;
       }
     }
     r.widthHeight = d;
     function g(u) {
-      return (t, o) => `var(--${u}${o});`;
+      return (i, o) => `var(--${u}${o});`;
     }
     r.variables = g;
-    function z(u) {
-      return (t, o) => `var(--${u}${o});`;
+    function S(u) {
+      return (i, o) => `var(--${u}${o});`;
     }
-    r.svgVariables = z;
-    function x(u, t) {
-      return `repeat(${t},minmax(0,1fr))`;
+    r.svgVariables = S;
+    function k(u, i) {
+      return `repeat(${i},minmax(0,1fr))`;
     }
-    r.gridColumns = x;
-    function f(u, t) {
-      return t === "full-row" ? "1/-1" : `span ${t}/span ${t}`;
+    r.gridColumns = k;
+    function N(u, i) {
+      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
-    r.gridColumn = f;
-    function h(u, t) {
-      return `${t}ms`;
+    r.gridColumn = N;
+    function p(u, i) {
+      return `${i}ms`;
     }
-    r.ms = h;
-    function V(u, t) {
-      return `${t}deg`;
+    r.ms = p;
+    function y(u, i) {
+      return `${i}deg`;
     }
-    r.rotate = V;
-    function b(u, t) {
-      return t === "xAxis" ? "-1 1" : "1 -1";
+    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,10 +226,10 @@ const R = {
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, H = {
+}, x = {
   hover: { className: "_h" },
   focus: { className: "_f" }
-}, i = {
+}, t = {
   display: {
     cssNames: ["display"],
     values1: { values: ["none", "block", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "contents"] },
@@ -870,51 +870,51 @@ const R = {
   }
 };
 Object.keys(C).forEach((a) => {
-  i[a] = C[a];
-});
-Object.keys(R).forEach((a) => {
-  i[a] = R[a], i[a].isThemeStyle = !0;
+  t[a] = C[a];
 });
 Object.keys(A).forEach((a) => {
-  i[a] = A[a], i[a].isThemeStyle = !0;
+  t[a] = A[a], t[a].isThemeStyle = !0;
 });
-const y = {
-  w: { ...i.width, key: "width" },
-  h: { ...i.height, key: "height" },
-  m: { ...i.margin, key: "margin" },
-  mx: { ...i.marginHorizontal, key: "marginHorizontal" },
-  my: { ...i.marginVertical, key: "marginVertical" },
-  mt: { ...i.marginTop, key: "marginTop" },
-  mr: { ...i.marginRight, key: "marginRight" },
-  mb: { ...i.marginBottom, key: "marginBottom" },
-  ml: { ...i.marginLeft, key: "marginLeft" },
-  p: { ...i.padding, key: "padding" },
-  px: { ...i.paddingHorizontal, key: "paddingHorizontal" },
-  py: { ...i.paddingVertical, key: "paddingVertical" },
-  pt: { ...i.paddingTop, key: "paddingTop" },
-  pr: { ...i.paddingRight, key: "paddingRight" },
-  pb: { ...i.paddingBottom, key: "paddingBottom" },
-  pl: { ...i.paddingLeft, key: "paddingLeft" },
-  b: { ...i.border, key: "border" },
-  bx: { ...i.borderHorizontal, key: "borderHorizontal" },
-  by: { ...i.borderVertical, key: "borderVertical" },
-  bt: { ...i.borderTop, key: "borderTop" },
-  br: { ...i.borderRight, key: "borderRight" },
-  bb: { ...i.borderBottom, key: "borderBottom" },
-  bl: { ...i.borderLeft, key: "borderLeft" },
-  jc: { ...i.justifyContent, key: "justifyContent" },
-  ai: { ...i.alignItems, key: "alignItems" },
-  ac: { ...i.alignContent, key: "alignContent" },
-  d: { ...i.flexDirection, key: "flexDirection" }
-}, U = Object.keys(i), X = Object.keys(y);
-q.forEach((a) => {
-  U.forEach((r) => {
-    i[`${r}${a}`] = { ...i[r] }, i[`${r}${a}`].pseudoSuffix = a;
-  }), X.forEach((r) => {
-    y[`${r}${a}`] = { ...y[r], key: `${y[r].key}${a}` }, y[`${r}${a}`].pseudoSuffix = a;
+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" },
+  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" }
+}, G = Object.keys(t), P = Object.keys(V);
+W.forEach((a) => {
+  G.forEach((r) => {
+    t[`${r}${a}`] = { ...t[r] }, t[`${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(i), l = b();
+`, c = new _(), m = Object.keys(t), l = $();
   let d = !1;
-  const g = n.reduce((u, t) => (u[t] = /* @__PURE__ */ new Set(), u), {});
-  function z(u, t) {
-    if (u in i)
-      return f(u, t);
-    if (u in H)
-      return H[u].className;
+  const g = m.reduce((u, i) => (u[i] = /* @__PURE__ */ new Set(), u), {});
+  function S(u, i) {
+    if (u in t)
+      return N(u, i);
+    if (u in x)
+      return x[u].className;
     if (u in C)
-      return f(u, t);
+      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, t) {
-    var c;
-    g[u].has(t) || (d = !0, g[u].add(t));
-    const o = V(u, t), v = ((c = o.formatClassName) == null ? void 0 : c.call(o, u, t)) ?? `${u}${t}`;
-    return `-${m.getIdentity(v)}`;
+  a.flush = k;
+  function N(u, i) {
+    var n;
+    g[u].has(i) || (d = !0, g[u].add(i));
+    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, t) {
+  function p(u, i) {
     return Object.entries(g).filter(([v]) => {
-      var c;
-      return ((c = i[v]) == null ? void 0 : c.pseudoSuffix) === t;
-    }).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 = [];
-      t ? t === "H" ? S = [
-        ...o(`${N}:hover`, p),
-        ...o(`.${H.hover.className}:hover>${N}`, p)
-      ] : t === "F" ? S = [
-        ...o(`${N}:focus-within`, p),
-        ...o(`.${H.focus.className}:focus-within>${N}`, p)
-      ] : t === "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 = i[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, t) {
-    const o = i[u];
-    return o.isThemeStyle ? o : o.values1.values.includes(t) ? o.values1 : o.values2.values.includes(t) ? o.values2 : o.values3;
+  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 : _;
+})(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 = D(Z);
 export {
-  le as default
+  b as S,
+  Q as u
 };

package/components/flex.js

@@ -1,13 +1,11 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import n from "./dox.js";
-import "../utils.js";
-import "../theme.js";
-function l(o, r) {
-  const { inline: t, ...e } = o;
-  return /* @__PURE__ */ i(n, { ref: r, display: t ? "inline-flex" : "flex", ...e });
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+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 });
 }
-const c = f(l);
+const p = t(s);
 export {
-  c as default
+  p as F
 };

package/components/form.js

@@ -1,5 +1,15 @@
-import "react/jsx-runtime";
-import "react";
-import "./dox.js";
-import "../utils.js";
-import "../theme.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as i, useCallback as p } from "react";
+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) => {
+    t.preventDefault();
+    const f = c.getFormEntries(r.current);
+    m(f, t);
+  }, []), e = { ...n, onSubmit: s, ref: r };
+  return /* @__PURE__ */ a(u, { tag: "form", ...o, props: e });
+}
+export {
+  x as F
+};

package/components/grid.js

@@ -1,10 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import p from "./dox.js";
-import "../utils.js";
-import "../theme.js";
-function f(r, i) {
-  const { inline: o, ...t } = r;
-  return /* @__PURE__ */ m(p, { ref: i, display: o ? "inline-grid" : "grid", ...t });
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+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 });
 }
-n(f);
+const a = s(e);
+export {
+  a as g
+};

package/components/radioButton.js

@@ -1,8 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "./dox.js";
+import { B as a } from "../box.js";
 import { O as i } from "../utils.js";
-import "../theme.js";
 const d = [
   "name",
   "onInput",
@@ -15,8 +14,11 @@ const d = [
   "checked",
   "defaultChecked"
 ];
-function p(o, t) {
+function s(o, t) {
   const r = i.buildProps(o, d, { type: "radio" });
   return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-n(p);
+const f = n(s);
+export {
+  f as r
+};

package/components/textarea.js

@@ -1,9 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import n from "./dox.js";
-import { O as m } from "../utils.js";
-import "../theme.js";
-const s = [
+import { B as n } from "../box.js";
+import { O as s } from "../utils.js";
+const m = [
   "name",
   "onInput",
   "onChange",
@@ -19,8 +18,11 @@ const s = [
   "readOnly",
   "required"
 ];
-function i(o, e) {
-  const r = m.buildProps(o, s);
-  return /* @__PURE__ */ t(n, { ref: e, tag: "textarea", component: "textarea", ...r });
+function p(t, e) {
+  const o = s.buildProps(t, m);
+  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", ...o });
 }
-a(i);
+const d = a(p);
+export {
+  d as t
+};

package/components/textbox.js

@@ -1,9 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "./dox.js";
+import { B as a } from "../box.js";
 import { O as p } from "../utils.js";
-import "../theme.js";
-const i = [
+const s = [
   "name",
   "onInput",
   "onChange",
@@ -17,8 +16,11 @@ const i = [
   "value",
   "pattern"
 ];
-function m(o, t) {
-  const r = p.buildProps(o, i);
-  return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "textbox", ...r });
+function u(o, t) {
+  const e = p.buildProps(o, s);
+  return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
 }
-n(m);
+const c = n(u);
+export {
+  c as t
+};

package/components/tooltip.js

@@ -1,6 +1,63 @@
-import "react/jsx-runtime";
-import "react-dom";
-import "./dox.js";
-import "react";
-import "../utils.js";
-import "../theme.js";
+import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
+import { createPortal as b } from "react-dom";
+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 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);
+      };
+      return document.addEventListener("scroll", r, { capture: !0 }), () => {
+        document.removeEventListener("scroll", r, { capture: !0 });
+      };
+    },
+    [t]
+  ), h = d(
+    (o, e) => {
+      const r = (n) => {
+        e(o);
+      };
+      return window.addEventListener("resize", r, { capture: !0 }), () => {
+        window.removeEventListener("resize", r, { capture: !0 });
+      };
+    },
+    [t]
+  ), l = d(
+    (o) => {
+      const e = o.getBoundingClientRect(), r = Math.round((e.top + window.scrollY) * i) / i, n = Math.round((e.left + window.scrollX) * i) / i;
+      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== n) && (c == null || c({ top: r, left: n }), p({ top: r, left: n, width: e.width > 0 ? e.width : void 0 }));
+    },
+    [t]
+  );
+  return g(() => {
+    if (s.current) {
+      l(s.current);
+      const o = w(s.current, l), e = h(s.current, l);
+      return () => {
+        o(), e();
+      };
+    }
+  }, [t]), /* @__PURE__ */ v(x, { children: [
+    /* @__PURE__ */ a(u, { ref: s }),
+    t && b(
+      /* @__PURE__ */ a(
+        u,
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transition: "none",
+          style: { transform: `translate(${t.left}px,${t.top}px)`, width: t.width },
+          children: /* @__PURE__ */ a(u, { position: "absolute", width: "fit", ...f })
+        }
+      ),
+      m
+    )
+  ] });
+}
+export {
+  j as T
+};

package/package.json

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

package/theme.js

@@ -1,5 +1,5 @@
 import { useMemo as g } from "react";
-const $ = {
+const b = {
   button: {
     styles: {
       display: "inline-block",
@@ -42,14 +42,14 @@ const $ = {
     }
   }
 };
-let _ = $;
+let _ = b;
 var u;
 ((h) => {
   function d(r) {
     _ = r, i();
   }
   h.setup = d;
-  function b(r, e) {
+  function $(r, e) {
     const t = Object.entries(r.colors).map(([o, c]) => `--color${o}: ${c};`).join(`
   `), l = Object.entries(r.shadows).map(([o, c]) => `--shadow${o}: ${c};`).join(`
   `), n = Object.entries(r.backgrounds).map(([o, c]) => `--background${o}: ${c};`).join(`
@@ -259,16 +259,17 @@ var u;
       boxDts: T
     };
   }
-  h.setupAugmentedProps = b;
+  h.setupAugmentedProps = $;
   function i() {
-    Object.keys($).forEach((e) => {
-      const t = _[e], l = $[e];
-      t ? (t.styles = { ...l.styles, ...t.styles }, t.disabled && l.disabled && (t.disabled = { ...l.disabled, ...t.disabled })) : _[e] = $[e];
+    Object.keys(b).forEach((e) => {
+      const t = _[e], l = b[e];
+      t ? (t.styles = { ...l.styles, ...t.styles }, t.disabled && l.disabled && (t.disabled = { ...l.disabled, ...t.disabled })) : _[e] = b[e];
     });
   }
 })(u || (u = {}));
-function j(h) {
-  const { clean: d, disabled: b, theme: i, component: r } = h;
+const j = u;
+function x(h) {
+  const { clean: d, disabled: $, theme: i, component: r } = h;
   return g(() => {
     var l, n, s;
     if (d)
@@ -277,9 +278,10 @@ function j(h) {
     if (!e)
       return;
     let t = i ? { ...e.styles, ...(n = e.themes) == null ? void 0 : n[i].styles } : e.styles;
-    return b ? i ? { ...t, ...e.disabled, ...(s = e.themes) == null ? void 0 : s[i].disabled } : { ...t, ...e.disabled } : t;
-  }, [r, d, b, i]);
+    return $ ? i ? { ...t, ...e.disabled, ...(s = e.themes) == null ? void 0 : s[i].disabled } : { ...t, ...e.disabled } : t;
+  }, [r, d, $, i]);
 }
 export {
-  j as useTheme
+  j as T,
+  x as u
 };

package/utils.js

@@ -1,14 +1,14 @@
-import "react";
-var a;
-((u) => {
-  function i(...c) {
-    return c.reduce((s, n) => n ? typeof n == "string" ? (s.push(n), s) : Array.isArray(n) ? (s.push(...i(...n)), s) : (Object.entries(n).forEach(([r, e]) => {
-      e && s.push(r);
-    }), s) : s, []);
+import { useMemo as x } from "react";
+var p;
+((c) => {
+  function i(...u) {
+    return u.reduce((n, o) => o ? typeof o == "string" ? (n.push(o), n) : Array.isArray(o) ? (n.push(...i(...o)), n) : (Object.entries(o).forEach(([r, e]) => {
+      e && n.push(r);
+    }), n) : n, []);
   }
-  u.classNames = i;
-})(a || (a = {}));
-const y = a;
+  c.classNames = i;
+})(p || (p = {}));
+const y = p;
 class I {
   constructor() {
     this._index = 0, this._cache = {};
@@ -17,81 +17,91 @@ class I {
     return this._cache[i] || (this._cache[i] = this.getByIndex(this._index++)), this._cache[i];
   }
   getByIndex(i) {
-    const { first: c, next: s } = x, n = i - c.length;
-    if (n < 0)
-      return c[i];
-    const r = Math.floor(n / s.length), e = n - r * s.length;
-    return this.getByIndex(r) + s[e];
+    const { first: u, next: n } = m, o = i - u.length;
+    if (o < 0)
+      return u[i];
+    const r = Math.floor(o / n.length), e = o - r * n.length;
+    return this.getByIndex(r) + n[e];
   }
 }
-const x = {
+const m = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
 var l;
-((u) => {
-  function i(s, ...n) {
-    const r = { ...s }, e = {};
-    return n.forEach((t) => {
+((c) => {
+  function i(n, ...o) {
+    const r = { ...n }, e = {};
+    return o.forEach((t) => {
       t in r && (e[t] = r[t], delete r[t]);
     }), [e, r];
   }
-  u.moveToTagProps = i;
-  function c(s, n, r) {
-    const e = { ...s }, t = e.props || {};
-    return n.forEach((o) => {
-      if (o in e) {
-        if (t[o] = e[o], o === "disabled")
+  c.moveToTagProps = i;
+  function u(n, o, r) {
+    const e = { ...n }, t = e.props || {};
+    return o.forEach((s) => {
+      if (s in e) {
+        if (t[s] = e[s], s === "disabled")
           return;
-        delete e[o];
+        delete e[s];
       }
-    }), r && Object.entries(r).forEach(([o, f]) => {
-      t[o] = f;
+    }), r && Object.entries(r).forEach(([s, f]) => {
+      t[s] = f;
     }), e.props = t, e;
   }
-  u.buildProps = c;
+  c.buildProps = u;
 })(l || (l = {}));
-const P = l;
+const E = l;
 var g;
-((u) => {
-  function i(s) {
-    const n = Array.from(s.elements).reduce((r, e) => {
+((c) => {
+  function i(n) {
+    const o = Array.from(n.elements).reduce((r, e) => {
       const t = e.name;
       return t && (r[t] || (r[t] = []), r[t].push(e)), r;
     }, {});
-    return Object.entries(n).reduce((r, [e, t]) => {
+    return Object.entries(o).reduce((r, [e, t]) => {
       if (t.length === 1) {
-        const o = t[0];
-        c(r, e, o.type === "checkbox" || o.type === "radio" ? o.checked : o.value);
+        const s = t[0];
+        u(r, e, s.type === "checkbox" || s.type === "radio" ? s.checked : s.value);
       } else {
-        const o = t.reduce((f, h) => (h.type === "checkbox" || h.type === "radio" ? h.checked && f.push(h.value) : f.push(h.value), f), []);
-        c(r, e, o);
+        const s = t.reduce((f, d) => (d.type === "checkbox" || d.type === "radio" ? d.checked && f.push(d.value) : f.push(d.value), f), []);
+        u(r, e, s);
       }
       return r;
     }, {});
   }
-  u.getFormEntries = i;
-  function c(s, n, r) {
-    if (n.includes(".")) {
-      const e = n.split(".");
-      let t = s;
-      e.forEach((o, f) => {
+  c.getFormEntries = i;
+  function u(n, o, r) {
+    if (o.includes(".")) {
+      const e = o.split(".");
+      let t = n;
+      e.forEach((s, f) => {
         if (e.length > f + 1) {
-          const h = o.match(/^(.+)\[(\d)\]$/);
-          if (h) {
-            const [, p, d] = h;
-            t[p] = t[p] || [], t[p][d] = t[p][d] || {}, t = t[p][d];
+          const d = s.match(/^(.+)\[(\d)\]$/);
+          if (d) {
+            const [, h, a] = d;
+            t[h] = t[h] || [], t[h][a] = t[h][a] || {}, t = t[h][a];
           } else
-            t[o] = t[o] || {}, t = t[o];
+            t[s] = t[s] || {}, t = t[s];
         } else
-          t[o] = r;
+          t[s] = r;
       });
     } else
-      s[n] = r;
+      n[o] = r;
   }
 })(g || (g = {}));
+const P = g;
+function v() {
+  return x(() => {
+    const c = "crono-box";
+    let i = document.getElementById(c);
+    return i || (i = document.createElement("div"), i.id = c, document.body.appendChild(i)), i;
+  }, []);
+}
 export {
   y as C,
+  P as F,
   I,
-  P as O
+  E as O,
+  v as u
 };

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 };

package/components/doxSvg.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import Dox from './dox';
-import ClassNameUtils from '../utils/className/classNameUtils';
-import { DoxSvgStyles } from './dox/doxStyles';
-type SvgTagProps = Required<React.ComponentProps<typeof Dox<'svg'>>>['props'];
-type DoxSvgTagProps = Omit<SvgTagProps, 'viewBox' | 'width' | 'height'>;
-interface Props extends DoxSvgStyles {
-    children?: React.ReactNode | ((props: {
-        isHover: boolean;
-    }) => React.ReactNode);
-    props?: DoxSvgTagProps;
-    style?: React.ComponentProps<'svg'>['style'];
-    className?: ClassNameUtils.ClassNameType;
-    viewBox?: string;
-    width?: string;
-    height?: string;
-}
-declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
-export default _default;

package/components/doxSvg.js

@@ -1,18 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import g from "./dox.js";
-import "../utils.js";
-import "../theme.js";
-function n(o, r) {
-  const { viewBox: t = "0 0 24 24", width: p = "1.5rem", height: i, props: m, ...s } = o;
-  return /* @__PURE__ */ e(
-    g,
-    {
-      tag: "svg",
-      ref: r,
-      props: { ...m, viewBox: t, width: p, height: i, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
-      ...s
-    }
-  );
-}
-f(n);