@cronocode/react-box 1.6.4 → 1.6.6

package/components/dox.mjs

@@ -1,73 +1,73 @@
-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";
+import F, { useMemo as E, useLayoutEffect as I, useEffect as _, forwardRef as D, useState as P } from "react";
+import { I as M, C as W } from "../utils/utils.mjs";
+import { useTheme as G } from "../theme.mjs";
 var e;
 ((a) => {
   ((r) => {
-    function n(o, d) {
-      return `${o}${d.replace("/", "-")}`;
+    function m(v, d) {
+      return `${v}${d.replace("/", "-")}`;
     }
-    r.fraction = n;
-    function v(o) {
-      return [`${o} path`, `${o} circle`, `${o} rect`, `${o} line`];
+    r.fraction = m;
+    function n(v) {
+      return [`${v} path`, `${v} circle`, `${v} rect`, `${v} line`];
     }
-    r.svg = v;
+    r.svg = n;
   })(a.ClassName || (a.ClassName = {})), ((r) => {
-    function n(u, l) {
-      return `${l / 4}rem`;
+    function m(l, u) {
+      return `${u / 4}rem`;
     }
-    r.rem = n;
-    function v(u, l) {
-      return `${l}px`;
+    r.rem = m;
+    function n(l, u) {
+      return `${u}px`;
     }
-    r.px = v;
-    function o(u, l) {
-      const [i, c] = l.split("/");
-      return `${+i / +c * 100}%`;
+    r.px = n;
+    function v(l, u) {
+      const [i, o] = u.split("/");
+      return `${+i / +o * 100}%`;
     }
-    r.fraction = o;
-    function d(u, l) {
-      switch (l) {
+    r.fraction = v;
+    function d(l, u) {
+      switch (u) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return u.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return l.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return l;
+          return u;
       }
     }
     r.widthHeight = d;
-    function g(u) {
-      return (l, i) => `var(--${u}${i});`;
+    function g(l) {
+      return (u, i) => `var(--${l}${i});`;
     }
     r.variables = g;
-    function y(u) {
-      return (l, i) => `var(--${u}${i});`;
+    function y(l) {
+      return (u, i) => `var(--${l}${i});`;
     }
     r.svgVariables = y;
-    function x(u, l) {
-      return `repeat(${l},minmax(0,1fr))`;
+    function x(l, u) {
+      return `repeat(${u},minmax(0,1fr))`;
     }
     r.gridColumns = x;
-    function f(u, l) {
-      return l === "full-row" ? "1/-1" : `span ${l}/span ${l}`;
+    function f(l, u) {
+      return u === "full-row" ? "1/-1" : `span ${u}/span ${u}`;
     }
     r.gridColumn = f;
-    function h(u, l) {
-      return `${l}ms`;
+    function h(l, u) {
+      return `${u}ms`;
     }
     r.ms = h;
-    function V(u, l) {
-      return `${l}deg`;
+    function V(l, u) {
+      return `${u}deg`;
     }
     r.rotate = V;
-    function b(u, l) {
-      return l === "xAxis" ? "-1 1" : "1 -1";
+    function N(l, u) {
+      return u === "xAxis" ? "-1 1" : "1 -1";
     }
-    r.flip = b;
+    r.flip = N;
   })(a.Value || (a.Value = {}));
 })(e || (e = {}));
-const G = ["H", "F", "A"];
+const q = ["H", "F", "A"];
 var s;
 ((a) => {
   a.positiveSizes = [
@@ -226,7 +226,7 @@ const R = {
     formatValue: e.Value.svgVariables("color"),
     formatSelector: e.ClassName.svg
   }
-}, k = {
+}, $ = {
   hover: { className: "_h" },
   focus: { className: "_f" }
 }, t = {
@@ -236,6 +236,12 @@ const R = {
     values2: { values: [] },
     values3: { values: [] }
   },
+  inline: {
+    cssNames: ["display"],
+    values1: { values: [!0], formatValue: () => "inline-block" },
+    values2: { values: [] },
+    values3: { values: [] }
+  },
   boxSizing: {
     cssNames: ["box-sizing"],
     values1: { values: ["border-box", "content-box"] },
@@ -900,15 +906,15 @@ const z = {
   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) => {
+}, U = Object.keys(t), X = Object.keys(z);
+q.forEach((a) => {
+  U.forEach((r) => {
     t[`${r}${a}`] = { ...t[r] }, t[`${r}${a}`].pseudoSuffix = a;
-  }), U.forEach((r) => {
+  }), X.forEach((r) => {
     z[`${r}${a}`] = { ...z[r], key: `${z[r].key}${a}` }, z[`${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;}}
@@ -916,88 +922,90 @@ 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);}.${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();
+.${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), v = N();
   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 k)
-      return k[u].className;
-    if (u in C)
-      return f(u, l);
+  const g = n.reduce((l, u) => (l[u] = /* @__PURE__ */ new Set(), l), {});
+  function y(l, u) {
+    if (l in t)
+      return f(l, u);
+    if (l in $)
+      return $[l].className;
+    if (l in C)
+      return f(l, u);
   }
   a.get = y;
   function x() {
     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"), o.innerHTML = u.join(""), d = !1;
+      let l = h([r]);
+      l = h(l, "H"), l = h(l, "F"), l = h(l, "A"), v.innerHTML = l.join(""), d = !1;
     }
   }
   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 f(l, u) {
+    var c;
+    g[l].has(u) || (d = !0, g[l].add(u));
+    const i = V(l, u), o = ((c = i.formatClassName) == null ? void 0 : c.call(i, l, u)) ?? `${l}${u}`;
+    return `-${m.getIdentity(o)}`;
   }
-  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(($) => {
+  function h(l, u) {
+    return Object.entries(g).filter(([o]) => {
+      var c;
+      return ((c = t[o]) == null ? void 0 : c.pseudoSuffix) === u;
+    }).reduce((o, [c, B]) => (B.forEach((k) => {
       var T;
-      const p = V(m, $), N = `.${f(m, $)}`;
+      const p = V(c, k), w = `.${f(c, k)}`;
       let S = [];
-      l ? l === "H" ? S = [
-        ...i(`${N}:hover`, p),
-        ...i(`.${k.hover.className}:hover>${N}`, p)
-      ] : l === "F" ? S = [
-        ...i(`${N}:focus-within`, p),
-        ...i(`.${k.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, $)) ?? $, 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];
+      u ? u === "H" ? S = [
+        ...i(`${w}:hover`, p),
+        ...i(`.${$.hover.className}:hover>${w}`, p)
+      ] : u === "F" ? S = [
+        ...i(`${w}:focus-within`, p),
+        ...i(`.${$.focus.className}:focus-within>${w}`, p)
+      ] : u === "A" && (S = i(`${w}:active`, p)) : S = i(w, p);
+      const L = ((T = p.formatValue) == null ? void 0 : T.call(p, c, k)) ?? k, A = t[c].cssNames.map((O) => `${O}:${L};`).join("");
+      o.push(`${S.join(",")}{${A}}`);
+    }), o), l);
+    function i(o, c) {
+      return c.formatSelector ? c.formatSelector(o) : [o];
     }
   }
-  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(l, u) {
+    const i = t[l];
+    return i.isThemeStyle ? i : i.values1.values.includes(u) ? i.values1 : i.values2.values.includes(u) ? i.values2 : i.values3;
   }
-  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;
+  function N() {
+    const l = "crono-styles", i = typeof window < "u" && typeof window.document < "u" ? window.document : global.document;
+    let o = i.getElementById(l);
+    return o || (o = i.createElement("style"), o.setAttribute("id", l), o.setAttribute("type", "text/css"), i.head.insertBefore(o, i.head.firstChild)), o;
   }
-})(w || (w = {}));
-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]);
+})(b || (b = {}));
+const Y = typeof window < "u" && typeof window.document < "u", J = Y ? I : _;
+function Q(a, r) {
+  const m = G(a);
+  return J(b.flush, [a]), E(() => {
+    const n = [r ? b.svgClassName : b.doxClassName], v = m ? { ...H(m), ...H(a) } : H(a);
+    return Object.entries(v).forEach(([d, g]) => {
+      n.push(b.get(d, g));
+    }), n;
+  }, [a, m]);
 }
 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]);
+  return Object.keys(r).forEach((n) => {
+    const v = z[n];
+    v && (v.key in r || (r[v.key] = r[n]), delete r[n]);
   }), r;
 }
-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 };
+function Z(a, r) {
+  const { tag: m = "div", children: n, props: v, className: d, style: g } = a, y = Q(a, m === "svg"), x = E(() => W.classNames(d, y).join(" "), [a]), f = { ...v, 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 [h, V] = P(!1), N = typeof n == "function";
+  return N && (f.onMouseEnter = () => V(!0), f.onMouseLeave = () => V(!1)), F.createElement(m, f, N ? n({ isHover: h }) : n);
 }
-const ee = _(Y);
+const le = D(Z), { flush: ue } = b;
 export {
-  ee as default
+  le as default,
+  ue as flushStyles
 };

package/components/doxSvg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("./dox.cjs");require("react");require("../utils/utils.cjs");require("../theme.cjs");function g(e){const{props:t,style:r,width:s,height:o,viewBox:i="0 0 24 24",className:u}=e;return n.jsx(l.default,{tag:"svg",className:u,...e,props:{...t,viewBox:i,xmlns:"http://www.w3.org/2000/svg",fill:"none"},style:{...r,width:s,height:o}})}exports.default=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("react"),c=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function a(e,r){const{viewBox:t="0 0 24 24",width:o="1.5rem",height:s,props:i,...n}=e;return u.jsx(c.default,{tag:"svg",ref:r,props:{...i,viewBox:t,width:o,height:s,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...n})}const l=g.forwardRef(a);exports.default=l;

package/components/doxSvg.d.ts

@@ -1,19 +1,18 @@
-import React from 'react';
+import Dox from './dox';
 import ClassNameUtils from '../utils/className/classNameUtils';
 import { DoxSvgStyles } from './dox/doxStyles';
-type AllSvgProps = React.SVGProps<SVGElement>;
-type SvgPropsType = Omit<AllSvgProps, 'className' | 'style' | 'width' | 'height'>;
-type SvgStyleType = Omit<React.CSSProperties, 'width' | 'height'>;
+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?: SvgPropsType;
-    style?: SvgStyleType;
+    props?: DoxSvgTagProps;
+    style?: React.ComponentProps<'svg'>['style'];
     className?: ClassNameUtils.ClassNameType;
     viewBox?: string;
     width?: string;
     height?: string;
 }
-export default function DoxSvg(props: Props): JSX.Element;
-export {};
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<SVGSVGElement>>;
+export default _default;

package/components/doxSvg.mjs

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

package/components/flex.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs");require("../box.module.css.cjs");require("../utils/utils.cjs");require("../theme.cjs");function l(e,r){const{inline:t}=e;return i.jsx(u.default,{ref:r,display:t?"inline-flex":"flex",...e})}const o=n.forwardRef(l);exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),u=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function l(e,r){const{inline:t,...i}=e;return n.jsx(u.default,{ref:r,display:t?"inline-flex":"flex",...i})}const s=o.forwardRef(l);exports.default=s;

package/components/flex.d.ts

@@ -1,4 +1,5 @@
+import { RefAttributes } from 'react';
 import Box from '../box';
-type BoxProps<TTag extends keyof React.ReactHTML> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof import("react").ReactHTML = "div">(props: BoxProps<TTag>) => JSX.Element;
+type BoxProps<TTag extends keyof JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
+declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
 export default _default;

package/components/flex.mjs

@@ -1,14 +1,13 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import f from "../box.mjs";
-import "../box.module.css.mjs";
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import n from "./dox.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
-function m(o, r) {
-  const { inline: i } = o;
-  return /* @__PURE__ */ t(f, { ref: r, display: i ? "inline-flex" : "flex", ...o });
+function l(o, r) {
+  const { inline: t, ...e } = o;
+  return /* @__PURE__ */ i(n, { ref: r, display: t ? "inline-flex" : "flex", ...e });
 }
-const c = e(m);
+const c = f(l);
 export {
   c as default
 };

package/components/form.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs"),f=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");function m(e){const{onSubmit:n,props:u}=e,r=o.useRef(null),s=o.useCallback(t=>{t.preventDefault();const c=f.FormUtils.getFormEntries(r.current);n(c,t)},[]),i={...u,onSubmit:s,ref:r};return l.jsx(a.default,{tag:"form",...e,props:i})}exports.default=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),o=require("react"),a=require("./dox.cjs"),f=require("../utils/utils.cjs");require("../theme.cjs");function m(e){const{onSubmit:n,props:u}=e,t=o.useRef(null),s=o.useCallback(r=>{r.preventDefault();const c=f.FormUtils.getFormEntries(t.current);n(c,r)},[]),i={...u,onSubmit:s,ref:t};return l.jsx(a.default,{tag:"form",...e,props:i})}exports.default=m;

package/components/form.mjs

@@ -1,10 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useRef as p, useCallback as u } from "react";
-import a from "../box.mjs";
+import a from "./dox.mjs";
 import { F as c } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
 import "../theme.mjs";
-function d(o) {
+function S(o) {
   const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
     t.preventDefault();
     const f = c.getFormEntries(r.current);
@@ -13,5 +12,5 @@ function d(o) {
   return /* @__PURE__ */ i(a, { tag: "form", ...o, props: s });
 }
 export {
-  d as default
+  S as default
 };

package/components/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs");require("../box.module.css.cjs");require("../utils/utils.cjs");require("../theme.cjs");function o(e,r){const{inline:i}=e;return t.jsx(u.default,{ref:r,display:i?"inline-grid":"grid",...e})}const d=n.forwardRef(o);exports.default=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),u=require("./dox.cjs");require("../utils/utils.cjs");require("../theme.cjs");function s(e,r){const{inline:i,...t}=e;return n.jsx(u.default,{ref:r,display:i?"inline-grid":"grid",...t})}const d=o.forwardRef(s);exports.default=d;

package/components/grid.d.ts

@@ -1,4 +1,5 @@
+import { RefAttributes } from 'react';
 import Box from '../box';
-type BoxProps<TTag extends keyof React.ReactHTML> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
-declare const _default: <TTag extends keyof import("react").ReactHTML = "div">(props: BoxProps<TTag>) => JSX.Element;
+type BoxProps<TTag extends keyof JSX.IntrinsicElements = 'div'> = Omit<React.ComponentProps<typeof Box<TTag>>, 'ref'>;
+declare const _default: <TTag extends keyof JSX.IntrinsicElements = "div">(props: BoxProps<TTag> & RefAttributes<ExtractElementType<JSX.IntrinsicElements[TTag]>>) => JSX.Element;
 export default _default;

package/components/grid.mjs

@@ -1,12 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import n from "../box.mjs";
-import "../box.module.css.mjs";
+import p from "./dox.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
 function d(r, i) {
-  const { inline: o } = r;
-  return /* @__PURE__ */ t(n, { ref: i, display: o ? "inline-grid" : "grid", ...r });
+  const { inline: o, ...t } = r;
+  return /* @__PURE__ */ n(p, { ref: i, display: o ? "inline-grid" : "grid", ...t });
 }
 const c = m(d);
 export {

package/components/radioButton.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),i=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const a=["name","onInput","onChange","disabled","value","autoFocus","readOnly","required","checked","defaultChecked"];function s(e,t){const o=i.ObjectUtils.buildProps(e,a,{type:"radio"});return r.jsx(u.default,{ref:t,tag:"input",component:"radioButton",...o})}const c=n.forwardRef(s);exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("./dox.cjs"),i=require("../utils/utils.cjs");require("../theme.cjs");const a=["name","onInput","onChange","disabled","value","autoFocus","readOnly","required","checked","defaultChecked"];function d(e,t){const o=i.ObjectUtils.buildProps(e,a,{type:"radio"});return r.jsx(u.default,{ref:t,tag:"input",component:"radioButton",...o})}const s=n.forwardRef(d);exports.default=s;

package/components/radioButton.mjs

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

package/components/textarea.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),n=require("../box.cjs"),u=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const s=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function i(e,t){const r=u.ObjectUtils.buildProps(e,s);return a.jsx(n.default,{ref:t,tag:"textarea",component:"textarea",...r})}const c=o.forwardRef(i);exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),n=require("./dox.cjs"),u=require("../utils/utils.cjs");require("../theme.cjs");const s=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function c(e,t){const r=u.ObjectUtils.buildProps(e,s);return a.jsx(n.default,{ref:t,tag:"textarea",component:"textarea",...r})}const i=o.forwardRef(c);exports.default=i;

package/components/textarea.mjs

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

package/components/textbox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs"),a=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const s=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(e,t){const r=a.ObjectUtils.buildProps(e,s);return o.jsx(u.default,{ref:t,tag:"input",component:"textbox",...r})}const c=n.forwardRef(i);exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("./dox.cjs"),a=require("../utils/utils.cjs");require("../theme.cjs");const s=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(e,t){const o=a.ObjectUtils.buildProps(e,s);return r.jsx(u.default,{ref:t,tag:"input",component:"textbox",...o})}const c=n.forwardRef(i);exports.default=c;

package/components/textbox.mjs

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

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),v=require("react-dom"),d=require("../box.cjs"),s=require("react"),h=require("../utils/utils.cjs");require("../box.module.css.cjs");require("../theme.cjs");const u=2;function x(f){const{onPositionChange:l}=f,i=s.useRef(null),[e,p]=s.useState(),w=h.usePortalContainer(),b=s.useCallback((n,t)=>{const r=o=>{o.target.contains(n)&&t(n)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[e]),m=s.useCallback((n,t)=>{const r=o=>{t(n)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[e]),a=s.useCallback(n=>{const t=n.getBoundingClientRect(),r=Math.round((t.top+window.scrollY)*u)/u,o=Math.round((t.left+window.scrollX)*u)/u;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==o)&&(l==null||l({top:r,left:o}),p({top:r,left:o,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=b(i.current,a),t=m(i.current,a);return()=>{n(),t()}}},[e]),c.jsxs(c.Fragment,{children:[c.jsx(d.default,{ref:i}),e&&v.createPortal(c.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:c.jsx(d.default,{position:"absolute",width:"fit",...f})}),w)]})}exports.default=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("react-dom"),d=require("./dox.cjs"),s=require("react"),h=require("../utils/utils.cjs");require("../theme.cjs");const l=2;function x(f){const{onPositionChange:u}=f,i=s.useRef(null),[e,p]=s.useState(),w=h.usePortalContainer(),m=s.useCallback((n,t)=>{const r=o=>{o.target.contains(n)&&t(n)};return document.addEventListener("scroll",r,{capture:!0}),()=>{document.removeEventListener("scroll",r,{capture:!0})}},[e]),v=s.useCallback((n,t)=>{const r=o=>{t(n)};return window.addEventListener("resize",r,{capture:!0}),()=>{window.removeEventListener("resize",r,{capture:!0})}},[e]),a=s.useCallback(n=>{const t=n.getBoundingClientRect(),r=Math.round((t.top+window.scrollY)*l)/l,o=Math.round((t.left+window.scrollX)*l)/l;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==o)&&(u==null||u({top:r,left:o}),p({top:r,left:o,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(i.current){a(i.current);const n=m(i.current,a),t=v(i.current,a);return()=>{n(),t()}}},[e]),c.jsxs(c.Fragment,{children:[c.jsx(d.default,{ref:i}),e&&b.createPortal(c.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:c.jsx(d.default,{position:"absolute",width:"fit",...f})}),w)]})}exports.default=x;

package/components/tooltip.mjs

@@ -1,9 +1,8 @@
 import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
 import { createPortal as b } from "react-dom";
-import u from "../box.mjs";
+import u from "./dox.mjs";
 import { useRef as E, useState as L, useCallback as d, useLayoutEffect as g } from "react";
 import { u as z } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
 import "../theme.mjs";
 const i = 2;
 function M(f) {

package/package.json

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