@cronocode/react-box 1.6.7 → 1.6.9

package/components/radioButton.mjs

@@ -1,7 +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/utils.mjs";
+import { O as i } from "../utils.mjs";
 import "../theme.mjs";
 const d = [
   "name",
@@ -15,11 +15,8 @@ const d = [
   "checked",
   "defaultChecked"
 ];
-function u(o, t) {
+function p(o, t) {
   const r = i.buildProps(o, d, { type: "radio" });
   return /* @__PURE__ */ e(a, { ref: t, tag: "input", component: "radioButton", ...r });
 }
-const l = n(u);
-export {
-  l as default
-};
+n(p);

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("./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;
+"use strict";const n=require("react/jsx-runtime"),o=require("react"),a=require("./dox.cjs"),s=require("../utils.cjs");require("../theme.cjs");const u=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function c(e,t){const r=s.ObjectUtils.buildProps(e,u);return n.jsx(a.default,{ref:t,tag:"textarea",component:"textarea",...r})}o.forwardRef(c);

package/components/textarea.mjs

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

package/components/textbox.cjs

@@ -1 +1 @@
-"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;
+"use strict";const o=require("react/jsx-runtime"),r=require("react"),u=require("./dox.cjs"),s=require("../utils.cjs");require("../theme.cjs");const a=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function c(e,t){const n=s.ObjectUtils.buildProps(e,a);return o.jsx(u.default,{ref:t,tag:"input",component:"textbox",...n})}r.forwardRef(c);

package/components/textbox.mjs

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

package/components/tooltip.cjs

@@ -1 +1 @@
-"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;
+"use strict";require("react/jsx-runtime");require("react-dom");require("./dox.cjs");require("react");require("../utils.cjs");require("../theme.cjs");

package/components/tooltip.d.ts

@@ -6,5 +6,5 @@ interface Props extends React.ComponentProps<typeof Box> {
         left: number;
     }): void;
 }
-export default function Tooltip(props: Props): JSX.Element;
+export default function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/tooltip.mjs

@@ -1,64 +1,6 @@
-import { jsxs as v, Fragment as x, jsx as a } from "react/jsx-runtime";
-import { createPortal as b } from "react-dom";
-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 "react/jsx-runtime";
+import "react-dom";
+import "./dox.mjs";
+import "react";
+import "../utils.mjs";
 import "../theme.mjs";
-const i = 2;
-function M(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);
-      };
-      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 g(() => {
-    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 {
-  M as default
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.6.7",
+  "version": "1.6.9",
   "main": "./box.cjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",
@@ -59,26 +59,26 @@
     "@cronocode/identity-factory": "^0.0.6"
   },
   "devDependencies": {
-    "@rollup/pluginutils": "^5.0.2",
-    "@types/node": "^18.15.7",
-    "@types/postcss-mixins": "^9.0.0",
+    "@rollup/pluginutils": "^5.1.0",
+    "@types/node": "^20.11.5",
+    "@types/postcss-mixins": "^9.0.5",
     "@types/prismjs": "^1.26.3",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^3.1.0",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
     "postcss-each": "^1.1.0",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^2.8.7",
+    "prettier": "^3.2.4",
     "prismjs": "^1.29.0",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.16.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-plugin-dts": "^2.1.0"
+    "react-router-dom": "^6.21.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-dts": "^3.7.1"
   }
 }

package/plugins.cjs

@@ -1,209 +1,209 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(r){const _=Object.entries(r.colors).map(([o,l])=>`--color${o}: ${l};`).join(`
-  `),t=Object.entries(r.shadows).map(([o,l])=>`--shadow${o}: ${l};`).join(`
-  `),n=Object.entries(r.backgrounds).map(([o,l])=>`--background${o}: ${l};`).join(`
-  `),e=[":root {"];_&&e.push(`  ${_}`),t&&e.push(`  ${t}`),n&&e.push(`  ${n}`),e.push("}");const c=Object.keys(r.colors).map(o=>`
-.color_${o},
-.color_h_${o}:hover,
-._h:hover>.color_h_${o} {
-  color: var(--color${o});
-}
-
-.color_f_${o}:focus-within,
-._f:focus-within>.color_f_${o} {
-  color: var(--color${o});
-}
-
-.color_a_${o}:active {
-  color: var(--color${o});
-}
-
-.bgColor_${o},
-.bgColor_h_${o}:hover,
-._h:hover>.bgColor_h_${o} {
-  background-color: var(--color${o});
-}
-
-.bgColor_f_${o}:focus-within,
-._f:focus-within>.bgColor_f_${o} {
-  background-color: var(--color${o});
-}
-
-.bgColor_a_${o}:active {
-  background-color: var(--color${o});
-}
-
-.borderColor_${o},
-.borderColor_h_${o}:hover,
-._h:hover>.borderColor_h_${o} {
-  border-color: var(--color${o});
-}
-
-.borderColor_f_${o}:focus-within,
-._f:focus-within>.borderColor_f_${o} {
-  border-color: var(--color${o});
-}
-
-.borderColor_a_${o}:active {
-  border-color: var(--color${o});
-}
-
-.outlineColor_${o},
-.outlineColor_h_${o}:hover,
-._h:hover>.outlineColor_h_${o} {
-  outline-color: var(--color${o});
-}
-
-.outlineColor_f_${o}:focus-within,
-._f:focus-within>.outlineColor_f_${o} {
-  outline-color: var(--color${o});
-}
-
-.outlineColor_a_${o}:active {
-  outline-color: var(--color${o});
-}
-
-.fill_${o},
-.fill_h_${o}:hover,
-._h:hover>.fill_h_${o} {
-  path,
-  circle,
-  rect,
-  line {
-    fill: var(--color${o});
-  }
-}
-
-.fill_f_${o}:focus-within,
-._f:focus-within>.fill_f_${o} {
-  path,
-  circle,
-  rect,
-  line {
-    fill: var(--color${o});
-  }
-}
-
-.fill_a_${o}:active {
-  path,
-  circle,
-  rect,
-  line {
-    fill: var(--color${o});
-  }
-}
-
-.stroke_${o},
-.stroke_h_${o}:hover,
-._h:hover>.stroke_h_${o} {
-  path,
-  circle,
-  rect,
-  line {
-    stroke: var(--color${o});
-  }
-}
-
-.stroke_f_${o}:focus-within,
-._f:focus-within>.stroke_f_${o} {
-  path,
-  circle,
-  rect,
-  line {
-    stroke: var(--color${o});
-  }
-}
-
-.stroke_a_${o}:active {
-  path,
-  circle,
-  rect,
-  line {
-    stroke: var(--color${o});
-  }
-}`),i=Object.keys(r.shadows).map(o=>`
-.shadow_${o},
-.shadow_h_${o}:hover,
-._h:hover>.shadow_h_${o} {
-  box-shadow: var(--shadow${o});
-}
-
-.shadow_f_${o}:focus-within,
-._f:focus-within>.shadow_f_${o} {
-  box-shadow: var(--shadow${o});
-}
-
-.shadow_a_${o}:active {
-  box-shadow: var(--shadow${o});
-}`),h=Object.keys(r.backgrounds).map(o=>`
-.bg_${o},
-.bg_h_${o}:hover,
-._h:hover>.bg_h_${o} {
-  background: var(--background${o});
-}
-
-.bg_f_${o}:focus-within,
-._f:focus-within>.bg_f_${o} {
-  background: var(--background${o});
-}
-
-.bg_a_${o}:active {
-  background: var(--background${o});
-}`),$=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),s=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),b=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import '@cronocode/react-box';
-
-declare module '@cronocode/react-box/types' {
-  type ColorType = ${$};
-  type BackgroundType = ${s};
-  type ShadowType = ${b};
-
-  namespace Augmented {
-    interface BoxProps {
-      color?: ColorType;
-      colorH?: ColorType;
-      colorF?: ColorType;
-      colorA?: ColorType;
-      bgColor?: ColorType;
-      bgColorH?: ColorType;
-      bgColorF?: ColorType;
-      bgColorA?: ColorType;
-      backgroundColor?: ColorType;
-      backgroundColorH?: ColorType;
-      backgroundColorF?: ColorType;
-      backgroundColorA?: ColorType;
-      borderColor?: ColorType;
-      borderColorH?: ColorType;
-      borderColorF?: ColorType;
-      borderColorA?: ColorType;
-      outlineColor?: ColorType;
-      outlineColorH?: ColorType;
-      outlineColorF?: ColorType;
-      outlineColorA?: ColorType;
-      bg?: BackgroundType;
-      bgH?: BackgroundType;
-      bgF?: BackgroundType;
-      bgA?: BackgroundType;
-      background?: BackgroundType;
-      backgroundH?: BackgroundType;
-      backgroundF?: BackgroundType;
-      backgroundA?: BackgroundType;
-      shadow?: ShadowType;
-      shadowH?: ShadowType;
-      shadowF?: ShadowType;
-      shadowA?: ShadowType;
+"use strict";var c;(i=>{function h(r){const _=Object.entries(r.colors).map(([o,e])=>`--color${o}: ${e};`).join(`
+  `),t=Object.entries(r.shadows).map(([o,e])=>`--shadow${o}: ${e};`).join(`
+  `),n=Object.entries(r.backgrounds).map(([o,e])=>`--background${o}: ${e};`).join(`
+  `),l=[":root {"];_&&l.push(`  ${_}`),t&&l.push(`  ${t}`),n&&l.push(`  ${n}`),l.push("}");const s=Object.keys(r.colors).map(o=>`
+  .color_${o},
+  .color_h_${o}:hover,
+  ._h:hover>.color_h_${o} {
+    color: var(--color${o});
+  }
+  
+  .color_f_${o}:focus-within,
+  ._f:focus-within>.color_f_${o} {
+    color: var(--color${o});
+  }
+  
+  .color_a_${o}:active {
+    color: var(--color${o});
+  }
+  
+  .bgColor_${o},
+  .bgColor_h_${o}:hover,
+  ._h:hover>.bgColor_h_${o} {
+    background-color: var(--color${o});
+  }
+  
+  .bgColor_f_${o}:focus-within,
+  ._f:focus-within>.bgColor_f_${o} {
+    background-color: var(--color${o});
+  }
+  
+  .bgColor_a_${o}:active {
+    background-color: var(--color${o});
+  }
+  
+  .borderColor_${o},
+  .borderColor_h_${o}:hover,
+  ._h:hover>.borderColor_h_${o} {
+    border-color: var(--color${o});
+  }
+  
+  .borderColor_f_${o}:focus-within,
+  ._f:focus-within>.borderColor_f_${o} {
+    border-color: var(--color${o});
+  }
+  
+  .borderColor_a_${o}:active {
+    border-color: var(--color${o});
+  }
+  
+  .outlineColor_${o},
+  .outlineColor_h_${o}:hover,
+  ._h:hover>.outlineColor_h_${o} {
+    outline-color: var(--color${o});
+  }
+  
+  .outlineColor_f_${o}:focus-within,
+  ._f:focus-within>.outlineColor_f_${o} {
+    outline-color: var(--color${o});
+  }
+  
+  .outlineColor_a_${o}:active {
+    outline-color: var(--color${o});
+  }
+  
+  .fill_${o},
+  .fill_h_${o}:hover,
+  ._h:hover>.fill_h_${o} {
+    path,
+    circle,
+    rect,
+    line {
+      fill: var(--color${o});
+    }
+  }
+  
+  .fill_f_${o}:focus-within,
+  ._f:focus-within>.fill_f_${o} {
+    path,
+    circle,
+    rect,
+    line {
+      fill: var(--color${o});
+    }
+  }
+  
+  .fill_a_${o}:active {
+    path,
+    circle,
+    rect,
+    line {
+      fill: var(--color${o});
+    }
+  }
+  
+  .stroke_${o},
+  .stroke_h_${o}:hover,
+  ._h:hover>.stroke_h_${o} {
+    path,
+    circle,
+    rect,
+    line {
+      stroke: var(--color${o});
+    }
+  }
+  
+  .stroke_f_${o}:focus-within,
+  ._f:focus-within>.stroke_f_${o} {
+    path,
+    circle,
+    rect,
+    line {
+      stroke: var(--color${o});
     }
-
-    interface SvgProps {
-      fill?: ColorType;
-      fillH?: ColorType;
-      fillF?: ColorType;
-      fillA?: ColorType;
-      stroke?: ColorType;
-      strokeH?: ColorType;
-      strokeF?: ColorType;
-      strokeA?: ColorType;
+  }
+  
+  .stroke_a_${o}:active {
+    path,
+    circle,
+    rect,
+    line {
+      stroke: var(--color${o});
+    }
+  }`),$=Object.keys(r.shadows).map(o=>`
+  .shadow_${o},
+  .shadow_h_${o}:hover,
+  ._h:hover>.shadow_h_${o} {
+    box-shadow: var(--shadow${o});
+  }
+  
+  .shadow_f_${o}:focus-within,
+  ._f:focus-within>.shadow_f_${o} {
+    box-shadow: var(--shadow${o});
+  }
+  
+  .shadow_a_${o}:active {
+    box-shadow: var(--shadow${o});
+  }`),b=Object.keys(r.backgrounds).map(o=>`
+  .bg_${o},
+  .bg_h_${o}:hover,
+  ._h:hover>.bg_h_${o} {
+    background: var(--background${o});
+  }
+  
+  .bg_f_${o}:focus-within,
+  ._f:focus-within>.bg_f_${o} {
+    background: var(--background${o});
+  }
+  
+  .bg_a_${o}:active {
+    background: var(--background${o});
+  }`),p=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),u=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),C=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),d=`import '@cronocode/react-box';
+  
+  declare module '@cronocode/react-box/types' {
+    type ColorType = ${p};
+    type BackgroundType = ${u};
+    type ShadowType = ${C};
+  
+    namespace Augmented {
+      interface BoxProps {
+        color?: ColorType;
+        colorH?: ColorType;
+        colorF?: ColorType;
+        colorA?: ColorType;
+        bgColor?: ColorType;
+        bgColorH?: ColorType;
+        bgColorF?: ColorType;
+        bgColorA?: ColorType;
+        backgroundColor?: ColorType;
+        backgroundColorH?: ColorType;
+        backgroundColorF?: ColorType;
+        backgroundColorA?: ColorType;
+        borderColor?: ColorType;
+        borderColorH?: ColorType;
+        borderColorF?: ColorType;
+        borderColorA?: ColorType;
+        outlineColor?: ColorType;
+        outlineColorH?: ColorType;
+        outlineColorF?: ColorType;
+        outlineColorA?: ColorType;
+        bg?: BackgroundType;
+        bgH?: BackgroundType;
+        bgF?: BackgroundType;
+        bgA?: BackgroundType;
+        background?: BackgroundType;
+        backgroundH?: BackgroundType;
+        backgroundF?: BackgroundType;
+        backgroundA?: BackgroundType;
+        shadow?: ShadowType;
+        shadowH?: ShadowType;
+        shadowF?: ShadowType;
+        shadowA?: ShadowType;
+      }
+  
+      interface SvgProps {
+        fill?: ColorType;
+        fillH?: ColorType;
+        fillF?: ColorType;
+        fillA?: ColorType;
+        stroke?: ColorType;
+        strokeH?: ColorType;
+        strokeF?: ColorType;
+        strokeA?: ColorType;
+      }
     }
   }
-}
-`;return{themeCss:[e.join(`
-`),...c,...i,...h].join(`
+  `;return{themeCss:[l.join(`
+`),...s,...$,...b].join(`
 `)+`
-`,boxDts:p}}exports.boxTheme=u;
+`,boxDts:d}}i.boxTheme=h})(c||(c={}));

package/plugins.d.ts

@@ -1,2 +1,13 @@
-import { boxTheme } from './plugins/box-theme';
-export { boxTheme };
+interface BoxThemeOptions {
+    colors: Record<string, string>;
+    shadows: Record<string, string>;
+    backgrounds: Record<string, string>;
+}
+interface BoxThemeResources {
+    themeCss: string;
+    boxDts: string;
+}
+declare namespace Plugins {
+    function boxTheme(options: BoxThemeOptions): BoxThemeResources;
+}
+export default Plugins;