@cronocode/react-box 1.3.3 → 1.3.5

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/flex.d.ts

@@ -1,17 +1,4 @@
 import Box from '../box';
-import { Activated, Focused, Hovered } from '../types';
 type BoxProps = React.ComponentProps<typeof Box>;
-interface FlexStylesShortCuts {
-    wrap?: BoxProps['flexWrap'];
-    jc?: BoxProps['justifyContent'];
-    ai?: BoxProps['alignItems'];
-    ac?: BoxProps['alignContent'];
-    d?: BoxProps['flexDirection'];
-    grow?: BoxProps['flexGrow'];
-    shrink?: BoxProps['flexShrink'];
-    as?: BoxProps['alignSelf'];
-    js?: BoxProps['justifySelf'];
-}
-type Props = BoxProps & FlexStylesShortCuts & Hovered<FlexStylesShortCuts> & Focused<FlexStylesShortCuts> & Activated<FlexStylesShortCuts>;
-export default function Flex(props: Props): JSX.Element;
+export default function Flex(props: BoxProps): JSX.Element;
 export {};

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.5",
   "main": "./box.mjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",