@cronocode/react-box 1.6.6 → 1.6.8

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/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.6",
+  "version": "1.6.8",
   "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 @@
-"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;
-    }
-
-    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(`
-`)+`
-`,boxDts:p}}exports.boxTheme=u;
+"use strict";

package/plugins.mjs

@@ -1,220 +1 @@
-function u(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 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;
-    }
-
-    interface SvgProps {
-      fill?: ColorType;
-      fillH?: ColorType;
-      fillF?: ColorType;
-      fillA?: ColorType;
-      stroke?: ColorType;
-      strokeH?: ColorType;
-      strokeF?: ColorType;
-      strokeA?: ColorType;
-    }
-  }
-}
-`;
-  return {
-    themeCss: [l.join(`
-`), ...c, ...i, ...h].join(`
-`) + `
-`,
-    boxDts: p
-  };
-}
-export {
-  u as boxTheme
-};