@cronocode/react-box 1.7.2 → 1.7.3

package/box.d.ts

@@ -1,21 +1,16 @@
 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]>;
+import { BoxStyleProps, ExtractElementFromTag } from './core/types';
+import { ClassNameType } from './core/classNames';
 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 {
+interface Props<TTag extends keyof React.JSX.IntrinsicElements> extends BoxStyleProps {
     children?: React.ReactNode | ((props: {
         isHover: boolean;
     }) => React.ReactNode);
     tag?: TTag;
     props?: TagPropsType<TTag>;
-    className?: ClassNameUtils.ClassNameType;
+    className?: 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;
+declare const _default: <TTag extends keyof React.JSX.IntrinsicElements = "div">(props: Props<TTag> & React.RefAttributes<ExtractElementFromTag<TTag>>) => React.ReactNode;
 export default _default;
-declare const flushStyles: typeof StylesContext.flush;
-export { flushStyles };

package/box.js

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

package/components/baseSvg.d.ts

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

package/components/baseSvg.js

@@ -1,19 +1,20 @@
-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,
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import g from "../box.js";
+import "../core.js";
+function n(o, r) {
+  const { viewBox: t = "0 0 24 24", width: s = "1.5rem", height: p, props: e, ...i } = o;
+  return /* @__PURE__ */ m(
+    g,
     {
       tag: "svg",
       ref: r,
-      props: { ...e, viewBox: s, width: t, height: p, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
-      ...g
+      props: { ...e, viewBox: t, width: s, height: p, xmlns: "http://www.w3.org/2000/svg", fill: "none" },
+      ...i
     }
   );
 }
-const x = m(a);
+const h = f(n);
 export {
-  x as b
+  h as default
 };

package/components/button.js

@@ -1,13 +1,14 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { B as p } from "../box.js";
+import { forwardRef as p } from "react";
+import s from "../box.js";
 import { O as i } from "../utils.js";
+import "../core.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 });
+  return /* @__PURE__ */ n(s, { ref: t, tag: "button", component: "button", ...r });
 }
-const u = s(e);
+const d = p(e);
 export {
-  u as b
+  d as default
 };

package/components/checkbox.js

@@ -1,10 +1,10 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { B as t } from "../box.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import 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";
-const p = [
+import d from "./flex.js";
+import "../core.js";
+const l = [
   "name",
   "onInput",
   "onChange",
@@ -16,14 +16,14 @@ const p = [
   "checked",
   "defaultChecked"
 ];
-function m(o, r) {
-  const { native: n } = o, i = a.buildProps(o, p, { type: "checkbox" });
-  return /* @__PURE__ */ s(l, { inline: !0, position: "relative", children: [
+function p(o, r) {
+  const { native: n } = o, i = a.buildProps(o, l, { type: "checkbox" });
+  return /* @__PURE__ */ c(d, { inline: !0, position: "relative", children: [
     /* @__PURE__ */ e(t, { ref: r, tag: "input", component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
-    !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" }) }) }) })
+    !n && /* @__PURE__ */ e(t, { position: "absolute", pointerEvents: "none", 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" }) }) }) })
   ] });
 }
-const b = c(m);
+const v = s(p);
 export {
-  b as c
+  v as default
 };

package/components/dataGrid.js

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

package/components/flex.js

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

package/components/form.js

@@ -1,15 +1,16 @@
-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 { jsx as i } from "react/jsx-runtime";
+import { useRef as p, useCallback as u } from "react";
+import a 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) => {
+import "../core.js";
+function S(o) {
+  const { onSubmit: m, props: n } = o, r = p(null), e = u((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 });
+  }, []), s = { ...n, onSubmit: e, ref: r };
+  return /* @__PURE__ */ i(a, { tag: "form", ...o, props: s });
 }
 export {
-  x as F
+  S as default
 };

package/components/grid.js

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

package/components/radioButton.js

@@ -1,7 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { B as a } from "../box.js";
+import a from "../box.js";
 import { O as i } from "../utils.js";
+import "../core.js";
 const d = [
   "name",
   "onInput",
@@ -14,11 +15,11 @@ const d = [
   "checked",
   "defaultChecked"
 ];
-function s(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 f = n(s);
+const l = n(u);
 export {
-  f as r
+  l as default
 };

package/components/textarea.js

@@ -1,7 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import { B as n } from "../box.js";
+import n from "../box.js";
 import { O as s } from "../utils.js";
+import "../core.js";
 const m = [
   "name",
   "onInput",
@@ -22,7 +23,7 @@ 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);
+const f = a(p);
 export {
-  d as t
+  f as default
 };

package/components/textbox.js

@@ -1,7 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { B as a } from "../box.js";
+import a from "../box.js";
 import { O as p } from "../utils.js";
+import "../core.js";
 const s = [
   "name",
   "onInput",
@@ -20,7 +21,7 @@ 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);
+const x = n(u);
 export {
-  c as t
+  x as default
 };

package/components/tooltip.js

@@ -1,57 +1,64 @@
-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);
+import { jsxs as v, Fragment as b, jsx as a } from "react/jsx-runtime";
+import { createPortal as x } from "react-dom";
+import d from "../box.js";
+import { useMemo as E, useRef as C, useState as g, useCallback as f, useLayoutEffect as L } from "react";
+import "../core.js";
+function y() {
+  return E(() => {
+    const i = "crono-box";
+    let r = document.getElementById(i);
+    return r || (r = document.createElement("div"), r.id = i, document.body.appendChild(r)), r;
+  }, []);
+}
+const l = 2;
+function R(i) {
+  const { onPositionChange: r } = i, c = C(null), [t, p] = g(), m = y(), w = f(
+    (n, e) => {
+      const o = (s) => {
+        s.target.contains(n) && e(n);
       };
-      return document.addEventListener("scroll", r, { capture: !0 }), () => {
-        document.removeEventListener("scroll", r, { capture: !0 });
+      return document.addEventListener("scroll", o, { capture: !0 }), () => {
+        document.removeEventListener("scroll", o, { capture: !0 });
       };
     },
     [t]
-  ), h = d(
-    (o, e) => {
-      const r = (n) => {
-        e(o);
+  ), h = f(
+    (n, e) => {
+      const o = (s) => {
+        e(n);
       };
-      return window.addEventListener("resize", r, { capture: !0 }), () => {
-        window.removeEventListener("resize", r, { capture: !0 });
+      return window.addEventListener("resize", o, { capture: !0 }), () => {
+        window.removeEventListener("resize", o, { 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 }));
+  ), u = f(
+    (n) => {
+      const e = n.getBoundingClientRect(), o = Math.round((e.top + window.scrollY) * l) / l, s = Math.round((e.left + window.scrollX) * l) / l;
+      ((t == null ? void 0 : t.top) !== o || (t == null ? void 0 : t.left) !== s) && (r == null || r({ top: o, left: s }), p({ top: o, left: s, 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 L(() => {
+    if (c.current) {
+      u(c.current);
+      const n = w(c.current, u), e = h(c.current, u);
       return () => {
-        o(), e();
+        n(), e();
       };
     }
-  }, [t]), /* @__PURE__ */ v(x, { children: [
-    /* @__PURE__ */ a(u, { ref: s }),
-    t && b(
+  }, [t]), /* @__PURE__ */ v(b, { children: [
+    /* @__PURE__ */ a(d, { ref: c }),
+    t && x(
       /* @__PURE__ */ a(
-        u,
+        d,
         {
           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 })
+          children: /* @__PURE__ */ a(d, { position: "absolute", width: "fit", ...i })
         }
       ),
       m
@@ -59,5 +66,5 @@ function j(f) {
   ] });
 }
 export {
-  j as T
+  R as default
 };