@cronocode/react-box 1.3.3 → 1.3.4

package/box.mjs

@@ -1,22 +1,20 @@
-import $, { forwardRef as b, useState as E } from "react";
-import { c } from "./box.module.css.mjs";
-import { C as T, a as n } from "./utils/utils.mjs";
-import { useTheme as g } from "./theme.mjs";
-function j(r, f) {
-  const { tag: p, children: i, props: d, className: l, style: m } = r, e = l ? T.classNames(c.box, l) : [c.box], x = g(r);
-  Object.entries(x).forEach(([s, o]) => {
-    const a = c[s + o];
-    a ? e.push(a) : s in n && e.push(`${n[s]}${o}`);
-  }), Object.entries(r).forEach(([s, o]) => {
-    const a = c[s + o];
-    a ? e.push(a) : s in n && e.push(`${n[s]}${o}`);
-  });
-  const t = { ...d, className: e.join(" ") };
-  m && (t.style = m), f && (t.ref = f);
-  const [N, u] = E(!1), h = typeof i == "function";
-  return h && (t.onMouseEnter = () => u(!0), t.onMouseLeave = () => u(!1)), $.createElement(p || "div", t, h ? i({ isHover: N }) : i);
+import b, { forwardRef as g, useMemo as E, useState as H } from "react";
+import { c as n } from "./box.module.css.mjs";
+import { C as M, a as d } from "./utils/utils.mjs";
+import { useTheme as P } from "./theme.mjs";
+function S(e, r) {
+  const { tag: h, children: t, props: p, className: c, style: l } = e, N = P(e), x = E(() => {
+    const o = c ? M.classNames(n.box, c) : [n.box], C = { ...N, ...e };
+    return Object.entries(C).forEach(([a, i]) => {
+      const u = n[a + i];
+      u ? o.push(u) : a in d && o.push(`${d[a]}${i}`);
+    }), o.join(" ");
+  }, [e]), s = { ...p, className: x };
+  l && (s.style = l), r && (s.ref = r);
+  const [v, m] = H(!1), f = typeof t == "function";
+  return f && (s.onMouseEnter = () => m(!0), s.onMouseLeave = () => m(!1)), b.createElement(h || "div", s, f ? t({ isHover: v }) : t);
 }
-const A = b(j);
+const y = g(S);
 export {
-  A as default
+  y as default
 };

package/components/button.mjs

@@ -1,15 +1,15 @@
 import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import p from "../box.mjs";
-import { O as e } from "../utils/utils.mjs";
+import { forwardRef as p } from "react";
+import i from "../box.mjs";
+import { O as m } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
 import "../theme.mjs";
 const s = ["type", "onClick", "disabled"];
-function m(o, t) {
-  const r = e.buildProps(o, s);
-  return /* @__PURE__ */ n(p, { ref: t, tag: "button", inline: !0, cursor: "pointer", component: "button", ...r });
+function e(o, t) {
+  const r = m.buildProps(o, s);
+  return /* @__PURE__ */ n(i, { ref: t, tag: "button", component: "button", ...r });
 }
-const d = i(m);
+const l = p(e);
 export {
-  d as default
+  l as default
 };

package/components/checkbox.mjs

@@ -20,7 +20,7 @@ const p = [
 function m(o, r) {
   const { native: n } = o, i = a.buildProps(o, p, { type: "checkbox" });
   return /* @__PURE__ */ c(l, { inline: !0, position: "relative", children: [
-    /* @__PURE__ */ e(t, { ref: r, tag: "input", inline: !0, b: 1, p: 2, component: "checkbox", ...i, appearance: n ? void 0 : "none" }),
+    /* @__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" }) }) }) })
   ] });
 }

package/components/radioButton.d.ts

@@ -16,7 +16,6 @@ interface Props extends Omit<BoxProps, 'props'> {
     required?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    native?: boolean;
 }
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/components/radioButton.mjs

@@ -1,10 +1,10 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import i from "../box.mjs";
-import { O as d } from "../utils/utils.mjs";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import a from "../box.mjs";
+import { O as i } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
 import "../theme.mjs";
-const p = [
+const d = [
   "name",
   "onInput",
   "onChange",
@@ -16,11 +16,11 @@ const p = [
   "checked",
   "defaultChecked"
 ];
-function u(o, t) {
-  const { native: e } = o, n = d.buildProps(o, p, { type: "radio" });
-  return /* @__PURE__ */ r(i, { ref: t, tag: "input", inline: !0, b: 1, p: 2, component: "radioButton", ...n, appearance: e ? void 0 : "none" });
+function p(o, t) {
+  const r = i.buildProps(o, d, { type: "radio" });
+  return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-const B = a(u);
+const B = n(p);
 export {
   B as default
 };

package/components/textarea.mjs

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

package/components/textbox.mjs

@@ -18,11 +18,11 @@ const i = [
   "value",
   "pattern"
 ];
-function u(t, o) {
-  const e = p.buildProps(t, i);
-  return /* @__PURE__ */ r(a, { ref: o, tag: "input", inline: !0, component: "textbox", ...e });
+function m(o, t) {
+  const e = p.buildProps(o, i);
+  return /* @__PURE__ */ r(a, { ref: t, tag: "input", component: "textbox", ...e });
 }
-const c = n(u);
+const c = n(m);
 export {
   c as default
 };

package/components/tooltip.mjs

@@ -1,49 +1,57 @@
 import { jsxs as x, Fragment as b, jsx as a } from "react/jsx-runtime";
 import { createPortal as E } from "react-dom";
-import p from "../box.mjs";
-import { useRef as L, useState as z, useCallback as l, useLayoutEffect as g } from "react";
+import f from "../box.mjs";
+import { useRef as L, useState as z, useCallback as c, useLayoutEffect as g } from "react";
 import { u as C } from "../utils/utils.mjs";
 import "../box.module.css.mjs";
 import "../theme.mjs";
-function P(c) {
-  const { children: d, onPositionChange: n } = c, e = L(null), [s, f] = z(), m = C(), w = l((r, t) => {
-    const o = (u) => {
-      u.target.contains(r) && t();
-    };
-    return document.addEventListener("scroll", o, { capture: !0 }), () => {
-      document.removeEventListener("scroll", o, { capture: !0 });
-    };
-  }, []), v = l((r, t) => {
-    const o = (u) => {
-      t();
-    };
-    return window.addEventListener("resize", o, { capture: !0 }), () => {
-      window.removeEventListener("resize", o, { capture: !0 });
-    };
-  }, []), i = l((r) => () => {
-    const t = r.getBoundingClientRect();
-    f({ top: t.top + window.scrollY, left: t.left + window.scrollX }), n == null || n({ top: t.top + window.scrollY, left: t.left + window.scrollX });
-  }, []);
+function P(i) {
+  const { children: p, onPositionChange: s } = i, n = L(null), [t, d] = z(), m = C(), w = c(
+    (e, r) => {
+      const o = (u) => {
+        u.target.contains(e) && r();
+      };
+      return document.addEventListener("scroll", o, { capture: !0 }), () => {
+        document.removeEventListener("scroll", o, { capture: !0 });
+      };
+    },
+    [t]
+  ), v = c(
+    (e, r) => {
+      const o = (u) => {
+        r();
+      };
+      return window.addEventListener("resize", o, { capture: !0 }), () => {
+        window.removeEventListener("resize", o, { capture: !0 });
+      };
+    },
+    [t]
+  ), l = c(() => {
+    if (n.current) {
+      const e = n.current.getBoundingClientRect(), r = e.top + window.scrollY, o = e.left + window.scrollX;
+      ((t == null ? void 0 : t.top) !== r || (t == null ? void 0 : t.left) !== o) && (s == null || s({ top: r, left: o }), d({ top: e.top + window.scrollY, left: e.left + window.scrollX }));
+    }
+  }, [t]);
   return g(() => {
-    if (e.current) {
-      i(e.current)();
-      const r = w(e.current, i(e.current)), t = v(e.current, i(e.current));
+    if (n.current) {
+      l();
+      const e = w(n.current, l), r = v(n.current, l);
       return () => {
-        r(), t();
+        e(), r();
       };
     }
-  }, []), /* @__PURE__ */ x(b, { children: [
-    /* @__PURE__ */ a(p, { ref: e, position: "absolute", top: 0, left: 0, ...c, children: void 0 }),
-    s && E(
+  }, [t]), /* @__PURE__ */ x(b, { children: [
+    /* @__PURE__ */ a(f, { ref: n, position: "absolute", top: 0, left: 0, ...i, children: void 0 }),
+    t && E(
       /* @__PURE__ */ a(
-        p,
+        f,
         {
           position: "absolute",
           top: 0,
           left: 0,
           transition: "none",
-          style: { transform: `translate(${s.left}px,${s.top}px)` },
-          children: d
+          style: { transform: `translate(${t.left}px,${t.top}px)` },
+          children: p
         }
       ),
       m

package/package.json

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

package/theme.mjs

@@ -1,27 +1,77 @@
-import { useMemo as c } from "react";
-let m = {};
+import { useMemo as y } from "react";
+const r = {
+  button: {
+    styles: {
+      inline: !0,
+      p: 3,
+      cursor: "pointer",
+      b: 1,
+      borderRadius: 1
+    },
+    disabled: {
+      cursor: "default"
+    }
+  },
+  checkbox: {
+    styles: {
+      inline: !0,
+      b: 1,
+      p: 2
+    }
+  },
+  radioButton: {
+    styles: {
+      inline: !0,
+      b: 1,
+      p: 2
+    }
+  },
+  textbox: {
+    styles: {
+      inline: !0,
+      b: 1,
+      borderRadius: 1,
+      p: 3
+    }
+  },
+  textarea: {
+    styles: {
+      inline: !0,
+      b: 1,
+      borderRadius: 1
+    }
+  }
+};
+let n = r;
 var u;
-((l) => {
-  function s(n) {
-    m = n;
+((d) => {
+  function o(t) {
+    n = t, i();
+  }
+  d.setup = o;
+  function i() {
+    Object.keys(r).forEach((s) => {
+      console.log(s);
+      const e = n[s], l = r[s];
+      e ? (e.styles = { ...l.styles, ...e.styles }, console.log(e.styles), e.disabled && l.disabled && (e.disabled = { ...l.disabled, ...e.disabled })) : n[s] = r[s];
+    });
   }
-  l.setup = s;
 })(u || (u = {}));
-const h = u;
-function p(l) {
-  const { clean: s, disabled: n, theme: t, component: o } = l;
-  return c(() => {
-    var i, d, a;
-    if (s)
+const m = u;
+function p(d) {
+  const { clean: o, disabled: i, theme: t, component: s } = d;
+  return y(() => {
+    var a, b, c;
+    if (o)
       return {};
-    let e = m[o] ?? ((i = m.components) == null ? void 0 : i[o]);
+    let e = n[s] ?? ((a = n.components) == null ? void 0 : a[s]);
     if (!e)
       return {};
-    let r = t ? { ...e.styles, ...(d = e.themes) == null ? void 0 : d[t].styles } : e.styles;
-    return n ? t ? { ...r, ...e.disabled, ...(a = e.themes) == null ? void 0 : a[t].disabled } : { ...r, ...e.disabled } : r;
-  }, [o, s, n, t]);
+    let l = t ? { ...e.styles, ...(b = e.themes) == null ? void 0 : b[t].styles } : e.styles;
+    return i ? t ? { ...l, ...e.disabled, ...(c = e.themes) == null ? void 0 : c[t].disabled } : { ...l, ...e.disabled } : l;
+  }, [s, o, i, t]);
 }
 export {
-  h as default,
+  m as default,
   p as useTheme
 };