@cronocode/react-box 1.6.8 → 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/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/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/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/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/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/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/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/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/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.8",
-  "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/theme.js

@@ -0,0 +1,285 @@
+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} {
+    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});
+    }
+  }`), y = 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});
+  }`), f = 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 = [...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 '${(e == null ? void 0 : e.namespacePath) ?? "@cronocode/react-box/types"}' {
+    type ColorType = ${C};
+    type BackgroundType = ${v};
+    type ShadowType = ${k};
+  
+    namespace Augmented {
+      interface BoxProps {
+        color?: ColorType;
+        colorH?: ColorType;
+        colorF?: ColorType;
+        colorA?: ColorType;
+        bgColor?: ColorType;
+        bgColorH?: ColorType;
+        bgColorF?: ColorType;
+        bgColorA?: ColorType;
+        borderColor?: ColorType;
+        borderColorH?: ColorType;
+        borderColorF?: ColorType;
+        borderColorA?: ColorType;
+        outlineColor?: ColorType;
+        outlineColorH?: ColorType;
+        outlineColorF?: ColorType;
+        outlineColorA?: ColorType;
+        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 {
+      variables: s.join(`
+`),
+      themeCss: p,
+      boxDts: T
+    };
+  }
+  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/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/utils.mjs";
-import "./theme.mjs";
-export {
-  r as default
-};