@cronocode/react-box 1.6.9 → 1.7.1

package/box.js

@@ -0,0 +1 @@
+import "./components/dox.js";

package/components/baseSvg.d.ts

@@ -1,2 +1,19 @@
-import DoxSvg from './doxSvg';
-export default DoxSvg;
+/// <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/baseSvg.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { D as n } from "./dox.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

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

package/components/{checkbox.mjs → 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.mjs";
-import { O as a } from "../utils.mjs";
-import l from "./flex.mjs";
-import { c as d } from "../box.module.css.mjs";
-import "../theme.mjs";
+import { D as t } from "./dox.js";
+import { O as a } from "../utils.js";
+import { F as l } from "./flex.js";
+import { c as d } from "../box.module.css.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

@@ -0,0 +1,32 @@
+import { jsx as i, Fragment as m, jsxs as c } from "react/jsx-runtime";
+import { D as t } from "./dox.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.mjs → dox.js}

@@ -1,6 +1,6 @@
-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.mjs";
-import { useTheme as G } from "../theme.mjs";
+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";
 var e;
 ((a) => {
   ((r) => {
@@ -13,56 +13,56 @@ var e;
     }
     r.svg = n;
   })(a.ClassName || (a.ClassName = {})), ((r) => {
-    function m(u, t) {
-      return `${t / 4}rem`;
+    function m(u, i) {
+      return `${i / 4}rem`;
     }
     r.rem = m;
-    function n(u, t) {
-      return `${t}px`;
+    function n(u, i) {
+      return `${i}px`;
     }
     r.px = n;
-    function l(u, t) {
-      const [o, v] = t.split("/");
+    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});`;
+      return (i, o) => `var(--${u}${o});`;
     }
     r.svgVariables = z;
-    function x(u, t) {
-      return `repeat(${t},minmax(0,1fr))`;
+    function x(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}`;
+    function f(u, i) {
+      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
     r.gridColumn = f;
-    function h(u, t) {
-      return `${t}ms`;
+    function h(u, i) {
+      return `${i}ms`;
     }
     r.ms = h;
-    function V(u, t) {
-      return `${t}deg`;
+    function V(u, i) {
+      return `${i}deg`;
     }
     r.rotate = V;
-    function b(u, t) {
-      return t === "xAxis" ? "-1 1" : "1 -1";
+    function b(u, i) {
+      return i === "xAxis" ? "-1 1" : "1 -1";
     }
     r.flip = b;
   })(a.Value || (a.Value = {}));
@@ -229,7 +229,7 @@ const R = {
 }, H = {
   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,46 +870,46 @@ const R = {
   }
 };
 Object.keys(C).forEach((a) => {
-  i[a] = C[a];
+  t[a] = C[a];
 });
 Object.keys(R).forEach((a) => {
-  i[a] = R[a], i[a].isThemeStyle = !0;
+  t[a] = R[a], t[a].isThemeStyle = !0;
 });
 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);
+  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" }
+}, U = Object.keys(t), X = Object.keys(y);
 q.forEach((a) => {
   U.forEach((r) => {
-    i[`${r}${a}`] = { ...i[r] }, i[`${r}${a}`].pseudoSuffix = a;
+    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;
   });
@@ -923,16 +923,16 @@ 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();
+`, m = new M(), n = Object.keys(t), l = b();
   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);
+  const g = n.reduce((u, i) => (u[i] = /* @__PURE__ */ new Set(), u), {});
+  function z(u, i) {
+    if (u in t)
+      return f(u, i);
     if (u in H)
       return H[u].className;
     if (u in C)
-      return f(u, t);
+      return f(u, i);
   }
   a.get = z;
   function x() {
@@ -943,37 +943,37 @@ a,ul{all: unset;}
     }
   }
   a.flush = x;
-  function f(u, t) {
+  function f(u, i) {
     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}`;
+    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)}`;
   }
-  function h(u, t) {
+  function h(u, i) {
     return Object.entries(g).filter(([v]) => {
       var c;
-      return ((c = i[v]) == null ? void 0 : c.pseudoSuffix) === t;
+      return ((c = t[v]) == null ? void 0 : c.pseudoSuffix) === i;
     }).reduce((v, [c, E]) => (E.forEach((k) => {
       var T;
       const p = V(c, k), N = `.${f(c, k)}`;
       let S = [];
-      t ? t === "H" ? S = [
+      i ? i === "H" ? S = [
         ...o(`${N}:hover`, p),
         ...o(`.${H.hover.className}:hover>${N}`, p)
-      ] : t === "F" ? S = [
+      ] : i === "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("");
+      ] : 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}}`);
     }), v), u);
     function o(v, c) {
       return c.formatSelector ? c.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 V(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() {
     const u = "crono-styles", o = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
@@ -981,7 +981,7 @@ a,ul{all: unset;}
     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 : _;
+const Y = typeof window < "u" && typeof window.document < "u", J = Y ? I : D;
 function Q(a, r) {
   const m = G(a);
   return J(w.flush, [a]), j(() => {
@@ -1004,7 +1004,7 @@ function Z(a, 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);
+const le = _(Z);
 export {
-  le as default
+  le as D
 };

package/components/flex.js

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

package/components/form.js

@@ -0,0 +1,15 @@
+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 { 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

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

package/components/{radioButton.mjs → radioButton.js}

@@ -1,8 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "./dox.mjs";
-import { O as i } from "../utils.mjs";
-import "../theme.mjs";
+import { D as a } from "./dox.js";
+import { O as i } from "../utils.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

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { D as n } from "./dox.js";
+import { O as s } from "../utils.js";
+const m = [
+  "name",
+  "onInput",
+  "onChange",
+  "placeholder",
+  "disabled",
+  "value",
+  "defaultValue",
+  "rows",
+  "cols",
+  "autoFocus",
+  "maxLength",
+  "minLength",
+  "readOnly",
+  "required"
+];
+function p(t, e) {
+  const o = s.buildProps(t, m);
+  return /* @__PURE__ */ r(n, { ref: e, tag: "textarea", component: "textarea", ...o });
+}
+const d = a(p);
+export {
+  d as t
+};

package/components/textbox.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { D as a } from "./dox.js";
+import { O as p } from "../utils.js";
+const s = [
+  "name",
+  "onInput",
+  "onChange",
+  "type",
+  "placeholder",
+  "disabled",
+  "defaultValue",
+  "autoFocus",
+  "readOnly",
+  "required",
+  "value",
+  "pattern"
+];
+function u(o, t) {
+  const e = p.buildProps(o, s);
+  return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
+}
+const c = n(u);
+export {
+  c as t
+};

package/components/tooltip.js

@@ -0,0 +1,63 @@
+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";
+const i = 2;
+function y(f) {
+  const { onPositionChange: c } = f, s = D(null), [t, p] = E(), m = g(), 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 L(() => {
+    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 {
+  y as T
+};

package/package.json

@@ -1,33 +1,28 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.6.9",
-  "main": "./box.cjs",
-  "module": "./box.mjs",
+  "version": "1.7.1",
+  "main": "./box.js",
+  "module": "./box.js",
   "types": "./box.d.ts",
   "exports": {
     ".": {
-      "import": "./box.mjs",
-      "require": "./box.cjs",
+      "import": "./box.js",
+      "require": "./box.js",
       "types": "./box.d.ts"
     },
     "./style.css": "./style.css",
     "./theme": {
-      "import": "./theme.mjs",
-      "require": "./theme.cjs",
+      "import": "./theme.js",
+      "require": "./theme.js",
       "types": "./theme.d.ts"
     },
     "./types": {
       "types": "./types.d.ts"
     },
     "./components/*": {
-      "import": "./components/*.mjs",
-      "require": "./components/*.cjs",
+      "import": "./components/*.js",
+      "require": "./components/*.js",
       "types": "./components/*.d.ts"
-    },
-    "./plugins": {
-      "import": "./plugins.mjs",
-      "require": "./plugins.cjs",
-      "types": "./plugins.d.ts"
     }
   },
   "scripts": {

package/theme.d.ts

@@ -20,8 +20,20 @@ export interface ThemeSetup {
     checkbox?: ThemeComponentStyles;
     radioButton?: ThemeComponentStyles;
 }
+interface BoxAugmentedProps {
+    colors: Record<string, string>;
+    shadows: Record<string, string>;
+    backgrounds: Record<string, string>;
+}
 declare namespace Theme {
     function setup(styles: ThemeSetup): void;
+    function setupAugmentedProps(props: BoxAugmentedProps, options?: {
+        namespacePath?: string;
+    }): {
+        variables: string;
+        themeCss: string;
+        boxDts: string;
+    };
 }
 export default Theme;
 type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;