@cronocode/react-box 1.6.9 → 1.7.0

package/box.js

@@ -0,0 +1,7 @@
+import r from "./components/dox.js";
+import "react";
+import "./utils.js";
+import "./theme.js";
+export {
+  r as default
+};

package/components/baseSvg.js

@@ -0,0 +1,6 @@
+import "./doxSvg.js";
+import "react/jsx-runtime";
+import "react";
+import "./dox.js";
+import "../utils.js";
+import "../theme.js";

package/components/{button.mjs → button.js}

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import m from "./dox.mjs";
-import { O as p } from "../utils.mjs";
-import "../theme.mjs";
+import m from "./dox.js";
+import { O as p } from "../utils.js";
+import "../theme.js";
 const s = ["type", "onClick", "disabled"];
 function e(o, t) {
   const r = p.buildProps(o, s);

package/components/{checkbox.mjs → checkbox.js}

@@ -1,10 +1,10 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import t from "./dox.mjs";
-import { O as a } from "../utils.mjs";
-import l from "./flex.mjs";
-import { c as d } from "../box.module.css.mjs";
-import "../theme.mjs";
+import t from "./dox.js";
+import { O as a } from "../utils.js";
+import l from "./flex.js";
+import { c as d } from "../box.module.css.js";
+import "../theme.js";
 const p = [
   "name",
   "onInput",

package/components/dataGrid.js

@@ -0,0 +1,5 @@
+import "react/jsx-runtime";
+import "./dox.js";
+import "react";
+import "../utils.js";
+import "../theme.js";

package/components/{dox.mjs → dox.js}

@@ -1,6 +1,6 @@
 import O, { useMemo as j, useLayoutEffect as I, useEffect as _, forwardRef as D, useState as P } from "react";
-import { I as M, C as W } from "../utils.mjs";
-import { useTheme as G } from "../theme.mjs";
+import { I as M, C as W } from "../utils.js";
+import { useTheme as G } from "../theme.js";
 var e;
 ((a) => {
   ((r) => {

package/components/{doxSvg.mjs → doxSvg.js}

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import g from "./dox.mjs";
-import "../utils.mjs";
-import "../theme.mjs";
+import g from "./dox.js";
+import "../utils.js";
+import "../theme.js";
 function n(o, r) {
   const { viewBox: t = "0 0 24 24", width: p = "1.5rem", height: i, props: m, ...s } = o;
   return /* @__PURE__ */ e(

package/components/{flex.mjs → flex.js}

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import n from "./dox.mjs";
-import "../utils.mjs";
-import "../theme.mjs";
+import n from "./dox.js";
+import "../utils.js";
+import "../theme.js";
 function l(o, r) {
   const { inline: t, ...e } = o;
   return /* @__PURE__ */ i(n, { ref: r, display: t ? "inline-flex" : "flex", ...e });

package/components/form.js

@@ -0,0 +1,5 @@
+import "react/jsx-runtime";
+import "react";
+import "./dox.js";
+import "../utils.js";
+import "../theme.js";

package/components/{grid.mjs → grid.js}

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import p from "./dox.mjs";
-import "../utils.mjs";
-import "../theme.mjs";
+import p from "./dox.js";
+import "../utils.js";
+import "../theme.js";
 function f(r, i) {
   const { inline: o, ...t } = r;
   return /* @__PURE__ */ m(p, { ref: i, display: o ? "inline-grid" : "grid", ...t });

package/components/{radioButton.mjs → radioButton.js}

@@ -1,8 +1,8 @@
 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.mjs";
-import "../theme.mjs";
+import a from "./dox.js";
+import { O as i } from "../utils.js";
+import "../theme.js";
 const d = [
   "name",
   "onInput",

package/components/{textarea.mjs → textarea.js}

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import n from "./dox.mjs";
-import { O as m } from "../utils.mjs";
-import "../theme.mjs";
+import n from "./dox.js";
+import { O as m } from "../utils.js";
+import "../theme.js";
 const s = [
   "name",
   "onInput",

package/components/{textbox.mjs → textbox.js}

@@ -1,8 +1,8 @@
 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.mjs";
-import "../theme.mjs";
+import a from "./dox.js";
+import { O as p } from "../utils.js";
+import "../theme.js";
 const i = [
   "name",
   "onInput",

package/components/tooltip.js

@@ -0,0 +1,6 @@
+import "react/jsx-runtime";
+import "react-dom";
+import "./dox.js";
+import "react";
+import "../utils.js";
+import "../theme.js";

package/package.json

@@ -1,33 +1,28 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.6.9",
-  "main": "./box.cjs",
-  "module": "./box.mjs",
+  "version": "1.7.0",
+  "main": "./box.js",
+  "module": "./box.js",
   "types": "./box.d.ts",
   "exports": {
     ".": {
-      "import": "./box.mjs",
-      "require": "./box.cjs",
+      "import": "./box.js",
+      "require": "./box.js",
       "types": "./box.d.ts"
     },
     "./style.css": "./style.css",
     "./theme": {
-      "import": "./theme.mjs",
-      "require": "./theme.cjs",
+      "import": "./theme.js",
+      "require": "./theme.js",
       "types": "./theme.d.ts"
     },
     "./types": {
       "types": "./types.d.ts"
     },
     "./components/*": {
-      "import": "./components/*.mjs",
-      "require": "./components/*.cjs",
+      "import": "./components/*.js",
+      "require": "./components/*.js",
       "types": "./components/*.d.ts"
-    },
-    "./plugins": {
-      "import": "./plugins.mjs",
-      "require": "./plugins.cjs",
-      "types": "./plugins.d.ts"
     }
   },
   "scripts": {

package/theme.d.ts

@@ -20,8 +20,20 @@ export interface ThemeSetup {
     checkbox?: ThemeComponentStyles;
     radioButton?: ThemeComponentStyles;
 }
+interface BoxAugmentedProps {
+    colors: Record<string, string>;
+    shadows: Record<string, string>;
+    backgrounds: Record<string, string>;
+}
 declare namespace Theme {
     function setup(styles: ThemeSetup): void;
+    function setupAugmentedProps(props: BoxAugmentedProps, options?: {
+        namespacePath?: string;
+    }): {
+        variables: string;
+        themeCss: string;
+        boxDts: string;
+    };
 }
 export default Theme;
 type ReservedComponentName = Exclude<string, keyof Omit<ThemeSetup, 'components'>>;

package/{plugins.mjs → theme.js}

@@ -1,12 +1,61 @@
-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 $ = Object.keys(r.colors).map((o) => `
+import { useMemo as g } from "react";
+const $ = {
+  button: {
+    styles: {
+      display: "inline-block",
+      p: 3,
+      cursor: "pointer",
+      b: 1,
+      borderRadius: 1
+    },
+    disabled: {
+      cursor: "default"
+    }
+  },
+  checkbox: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      p: 2
+    }
+  },
+  radioButton: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      p: 2
+    }
+  },
+  textbox: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      borderRadius: 1,
+      p: 3
+    }
+  },
+  textarea: {
+    styles: {
+      display: "inline-block",
+      b: 1,
+      borderRadius: 1
+    }
+  }
+};
+let _ = $;
+var u;
+((h) => {
+  function d(r) {
+    _ = r, i();
+  }
+  h.setup = d;
+  function b(r, e) {
+    const t = Object.entries(r.colors).map(([o, c]) => `--color${o}: ${c};`).join(`
+  `), l = Object.entries(r.shadows).map(([o, c]) => `--shadow${o}: ${c};`).join(`
+  `), n = Object.entries(r.backgrounds).map(([o, c]) => `--background${o}: ${c};`).join(`
+  `), s = [":root {"];
+    t && s.push(`  ${t}`), l && s.push(`  ${l}`), n && s.push(`  ${n}`), s.push("}");
+    const a = Object.keys(r.colors).map((o) => `
   .color_${o},
   .color_h_${o}:hover,
   ._h:hover>.color_h_${o} {
@@ -125,7 +174,7 @@ var c;
     line {
       stroke: var(--color${o});
     }
-  }`), s = Object.keys(r.shadows).map((o) => `
+  }`), y = Object.keys(r.shadows).map((o) => `
   .shadow_${o},
   .shadow_h_${o}:hover,
   ._h:hover>.shadow_h_${o} {
@@ -139,7 +188,7 @@ var c;
   
   .shadow_a_${o}:active {
     box-shadow: var(--shadow${o});
-  }`), b = Object.keys(r.backgrounds).map((o) => `
+  }`), f = Object.keys(r.backgrounds).map((o) => `
   .bg_${o},
   .bg_h_${o}:hover,
   ._h:hover>.bg_h_${o} {
@@ -153,12 +202,14 @@ var c;
   
   .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';
+  }`), p = [...a, ...y, ...f].join(`
+`) + `
+`, C = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), v = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), k = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), T = `import '@cronocode/react-box';
   
-  declare module '@cronocode/react-box/types' {
-    type ColorType = ${p};
-    type BackgroundType = ${u};
-    type ShadowType = ${C};
+  declare module '${(e == null ? void 0 : e.namespacePath) ?? "@cronocode/react-box/types"}' {
+    type ColorType = ${C};
+    type BackgroundType = ${v};
+    type ShadowType = ${k};
   
     namespace Augmented {
       interface BoxProps {
@@ -170,10 +221,6 @@ var c;
         bgColorH?: ColorType;
         bgColorF?: ColorType;
         bgColorA?: ColorType;
-        backgroundColor?: ColorType;
-        backgroundColorH?: ColorType;
-        backgroundColorF?: ColorType;
-        backgroundColorA?: ColorType;
         borderColor?: ColorType;
         borderColorH?: ColorType;
         borderColorF?: ColorType;
@@ -182,10 +229,6 @@ var c;
         outlineColorH?: ColorType;
         outlineColorF?: ColorType;
         outlineColorA?: ColorType;
-        bg?: BackgroundType;
-        bgH?: BackgroundType;
-        bgF?: BackgroundType;
-        bgA?: BackgroundType;
         background?: BackgroundType;
         backgroundH?: BackgroundType;
         backgroundF?: BackgroundType;
@@ -210,12 +253,33 @@ var c;
   }
   `;
     return {
-      themeCss: [l.join(`
-`), ...$, ...s, ...b].join(`
-`) + `
-`,
-      boxDts: d
+      variables: s.join(`
+`),
+      themeCss: p,
+      boxDts: T
     };
   }
-  i.boxTheme = h;
-})(c || (c = {}));
+  h.setupAugmentedProps = b;
+  function i() {
+    Object.keys($).forEach((e) => {
+      const t = _[e], l = $[e];
+      t ? (t.styles = { ...l.styles, ...t.styles }, t.disabled && l.disabled && (t.disabled = { ...l.disabled, ...t.disabled })) : _[e] = $[e];
+    });
+  }
+})(u || (u = {}));
+function j(h) {
+  const { clean: d, disabled: b, theme: i, component: r } = h;
+  return g(() => {
+    var l, n, s;
+    if (d)
+      return;
+    let e = _[r] ?? ((l = _.components) == null ? void 0 : l[r]);
+    if (!e)
+      return;
+    let t = i ? { ...e.styles, ...(n = e.themes) == null ? void 0 : n[i].styles } : e.styles;
+    return b ? i ? { ...t, ...e.disabled, ...(s = e.themes) == null ? void 0 : s[i].disabled } : { ...t, ...e.disabled } : t;
+  }, [r, d, b, i]);
+}
+export {
+  j as useTheme
+};

package/box.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/dox.cjs");require("react");require("./utils.cjs");require("./theme.cjs");exports.default=e.default;

package/box.mjs

@@ -1,7 +0,0 @@
-import r from "./components/dox.mjs";
-import "react";
-import "./utils.mjs";
-import "./theme.mjs";
-export {
-  r as default
-};