@cronocode/react-box 1.4.0 → 1.4.2

package/components/baseSvg.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),o=require("../utils/utils.cjs.js"),n=require("../baseSvg.module.css.cjs.js");function w(l){const{children:s,props:v,className:c,style:m,viewBox:h,width:d,height:S}=l,e=c?o.ClassNameUtils.classNames(c,n.classes.base):[n.classes.base];Object.entries(l).forEach(([a,u])=>{const f=n.classes[a+u];f?e.push(f):a in o.themeSvgClasses&&e.push(`${o.themeSvgClasses[a]}${u}`)});const t={...v,style:{...m,width:d,height:S},className:e.join(" "),viewBox:h||"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"none"},[p,i]=g.useState(!1),r=typeof s=="function";return r&&(t.onMouseEnter=()=>i(!0),t.onMouseLeave=()=>i(!1)),g.createElement("svg",t,r?s({isHover:p}):s)}exports.default=w;

package/components/{baseSvg.mjs → baseSvg.es.js}

@@ -1,6 +1,6 @@
 import d, { useState as N } from "react";
-import { C as x, t as m } from "../utils/utils.mjs";
-import { c as a } from "../baseSvg.module.css.mjs";
+import { C as x, t as m } from "../utils/utils.es.js";
+import { c as a } from "../baseSvg.module.css.es.js";
 function C(n) {
   const { children: s, props: p, className: r, style: h, viewBox: u, width: v, height: g } = n, e = r ? x.classNames(r, a.base) : [a.base];
   Object.entries(n).forEach(([o, l]) => {

package/components/button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs.js"),s=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");const i=["type","onClick","disabled"];function c(t,e){const o=s.ObjectUtils.buildProps(t,i);return r.jsx(u.default,{ref:e,tag:"button",component:"button",...o})}const l=n.forwardRef(c);exports.default=l;

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

@@ -1,9 +1,9 @@
 import { jsx as n } from "react/jsx-runtime";
 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";
+import i from "../box.es.js";
+import { O as m } from "../utils/utils.es.js";
+import "../box.module.css.es.js";
+import "../theme.es.js";
 const s = ["type", "onClick", "disabled"];
 function e(o, t) {
   const r = m.buildProps(o, s);

package/components/checkbox.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),t=require("../box.cjs.js"),i=require("../utils/utils.cjs.js"),u=require("./flex.cjs.js"),l=require("../box.module.css.cjs.js");require("../theme.cjs.js");const a=["name","onInput","onChange","disabled","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,s){const{native:o}=n,r=i.ObjectUtils.buildProps(n,a,{type:"checkbox"});return e.jsxs(u.default,{inline:!0,position:"relative",children:[e.jsx(t.default,{ref:s,tag:"input",component:"checkbox",...r,appearance:o?void 0:"none"}),!o&&e.jsx(t.default,{position:"absolute",pointerEvents:"none",className:l.classes._checkedIcon,children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",viewBox:"0 0 20 20",children:e.jsx("g",{fill:"none",fillRule:"evenodd",children:e.jsx("path",{stroke:"#000",strokeLinecap:"round",strokeLinejoin:"round",d:"M6 10.15L8.5 13 14 7"})})})})]})}const x=c.forwardRef(d);exports.default=x;

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

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

package/components/dataGrid.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../box.cjs.js");require("react");require("../box.module.css.cjs.js");require("../utils/utils.cjs.js");require("../theme.cjs.js");function o(r){if(!(r!=null&&r.length))return{rows:[],columns:[]};const t=Object.keys(r[0]);return{rows:r.map(e=>({dataRow:e,cells:t.map(n=>({key:n,value:e[n]}))})),columns:t.map(e=>({key:e}))}}function c(r){const{data:t}=r,e=o(t);return e.columns.length===0?i.jsx(u.default,{display:"grid",children:"empty grid"}):i.jsxs(u.default,{display:"grid",children:[e.columns.map((n,s)=>i.jsx(u.default,{style:{gridColumn:s+1},children:n.key.toString()},n.key.toString())),e.rows.map((n,s)=>n.cells.map(l=>i.jsx(u.default,{children:l.value},l.key.toString()+s)))]})}exports.default=c;

package/components/{dataGrid.mjs → dataGrid.es.js}

@@ -1,9 +1,9 @@
 import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import t from "../box.mjs";
+import t from "../box.es.js";
 import "react";
-import "../box.module.css.mjs";
-import "../utils/utils.mjs";
-import "../theme.mjs";
+import "../box.module.css.es.js";
+import "../utils/utils.es.js";
+import "../theme.es.js";
 function p(i) {
   if (!(i != null && i.length))
     return {

package/components/flex.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs.js");require("../box.module.css.cjs.js");require("../utils/utils.cjs.js");require("../theme.cjs.js");function l(e,r){const{inline:t}=e;return i.jsx(u.default,{ref:r,display:t?"inline-flex":"flex",...e})}const o=n.forwardRef(l);exports.default=o;

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

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

package/components/form.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),o=require("react"),a=require("../box.cjs.js"),f=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");function m(e){const{onSubmit:n,props:u}=e,r=o.useRef(null),s=o.useCallback(t=>{t.preventDefault();const c=f.FormUtils.getFormEntries(r.current);n(c,t)},[]),i={...u,onSubmit:s,ref:r};return l.jsx(a.default,{tag:"form",...e,props:i})}exports.default=m;

package/components/{form.mjs → form.es.js}

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useRef as p, useCallback as u } from "react";
-import a from "../box.mjs";
-import { F as c } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
-import "../theme.mjs";
+import a from "../box.es.js";
+import { F as c } from "../utils/utils.es.js";
+import "../box.module.css.es.js";
+import "../theme.es.js";
 function d(o) {
   const { onSubmit: m, props: n } = o, r = p(null), e = u((t) => {
     t.preventDefault();

package/components/radioButton.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs.js"),i=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");const a=["name","onInput","onChange","disabled","value","autoFocus","readOnly","required","checked","defaultChecked"];function s(e,t){const o=i.ObjectUtils.buildProps(e,a,{type:"radio"});return r.jsx(u.default,{ref:t,tag:"input",component:"radioButton",...o})}const c=n.forwardRef(s);exports.default=c;

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

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

package/components/textarea.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),n=require("../box.cjs.js"),u=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");const s=["name","onInput","onChange","placeholder","disabled","value","defaultValue","rows","cols","autoFocus","maxLength","minLength","readOnly","required"];function i(e,t){const r=u.ObjectUtils.buildProps(e,s);return a.jsx(n.default,{ref:t,tag:"textarea",component:"textarea",...r})}const c=o.forwardRef(i);exports.default=c;

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

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
-import n from "../box.mjs";
-import { O as m } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
-import "../theme.mjs";
+import n from "../box.es.js";
+import { O as m } from "../utils/utils.es.js";
+import "../box.module.css.es.js";
+import "../theme.es.js";
 const s = [
   "name",
   "onInput",

package/components/textbox.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("react"),u=require("../box.cjs.js"),a=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");const s=["name","onInput","onChange","type","placeholder","disabled","defaultValue","autoFocus","readOnly","required","value","pattern"];function i(e,t){const r=a.ObjectUtils.buildProps(e,s);return o.jsx(u.default,{ref:t,tag:"input",component:"textbox",...r})}const c=n.forwardRef(i);exports.default=c;

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

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import a from "../box.mjs";
-import { O as p } from "../utils/utils.mjs";
-import "../box.module.css.mjs";
-import "../theme.mjs";
+import a from "../box.es.js";
+import { O as p } from "../utils/utils.es.js";
+import "../box.module.css.es.js";
+import "../theme.es.js";
 const i = [
   "name",
   "onInput",

package/components/tooltip.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),v=require("react-dom"),d=require("../box.cjs.js"),s=require("react"),q=require("../utils/utils.cjs.js");require("../box.module.css.cjs.js");require("../theme.cjs.js");function x(u){const{children:f,onPositionChange:c}=u,o=s.useRef(null),[e,p]=s.useState(),w=q.usePortalContainer(),b=s.useCallback((t,r)=>{const n=a=>{a.target.contains(t)&&r()};return document.addEventListener("scroll",n,{capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},[e]),m=s.useCallback((t,r)=>{const n=a=>{r()};return window.addEventListener("resize",n,{capture:!0}),()=>{window.removeEventListener("resize",n,{capture:!0})}},[e]),i=s.useCallback(()=>{if(o.current){const t=o.current.getBoundingClientRect(),r=t.top+window.scrollY,n=t.left+window.scrollX;((e==null?void 0:e.top)!==r||(e==null?void 0:e.left)!==n)&&(c==null||c({top:r,left:n}),p({top:t.top+window.scrollY,left:t.left+window.scrollX}))}},[e]);return s.useLayoutEffect(()=>{if(o.current){i();const t=b(o.current,i),r=m(o.current,i);return()=>{t(),r()}}},[e]),l.jsxs(l.Fragment,{children:[l.jsx(d.default,{ref:o,position:"absolute",top:0,left:0,...u,children:void 0}),e&&v.createPortal(l.jsx(d.default,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`},children:f}),w)]})}exports.default=x;

package/components/{tooltip.mjs → tooltip.es.js}

@@ -1,10 +1,10 @@
 import { jsxs as x, Fragment as b, jsx as a } from "react/jsx-runtime";
 import { createPortal as E } from "react-dom";
-import f from "../box.mjs";
+import f from "../box.es.js";
 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";
+import { u as C } from "../utils/utils.es.js";
+import "../box.module.css.es.js";
+import "../theme.es.js";
 function P(i) {
   const { children: p, onPositionChange: s } = i, n = L(null), [t, d] = z(), m = C(), w = c(
     (e, r) => {

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.4.0",
-  "main": "./box.mjs",
-  "module": "./box.mjs",
+  "version": "1.4.2",
+  "main": "./box.cjs.js",
+  "module": "./box.es.js",
   "types": "./box.d.ts",
   "exports": {
     ".": {
-      "import": "./box.mjs",
-      "require": "./box.mjs",
+      "import": "./box.es.js",
+      "require": "./box.cjs.js",
       "types": "./box.d.ts"
     },
     "./style.css": "./style.css",
     "./theme": {
-      "import": "./theme.mjs",
-      "require": "./theme.mjs",
+      "import": "./theme.es.js",
+      "require": "./theme.cjs.js",
       "types": "./theme.d.ts"
     },
     "./components/*": {
-      "import": "./components/*.mjs",
-      "require": "./components/*.mjs",
+      "import": "./components/*.es.js",
+      "require": "./components/*.cjs.js",
       "types": "./components/*.d.ts"
     },
     "./plugins": {
-      "import": "./plugins.mjs",
-      "require": "./plugins.mjs",
+      "import": "./plugins.es.js",
+      "require": "./plugins.cjs.js",
       "types": "./plugins.d.ts"
     }
   },

package/plugins.cjs.js

@@ -0,0 +1,220 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u(r){const _=Object.entries(r.colors).map(([o,e])=>`--color${o}: ${e};`).join(`
+`),n=Object.entries(r.shadows).map(([o,e])=>`--shadow${o}: ${e};`).join(`
+`),i=Object.entries(r.backgrounds).map(([o,e])=>`--background${o}: ${e};`).join(`
+`),s=`:root {
+  ${_}
+  ${n}
+  ${i}
+}`,$=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});
+  }
+}`),h=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});
+}`),l=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),t=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),c=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import '@cronocode/react-box';
+
+declare module '@cronocode/react-box' {
+  type ColorType = ${l};
+  type BackgroundType = ${t};
+  type ShadowType = ${c};
+
+  namespace Augmented {
+    interface Props {
+      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;
+    }
+  }
+}
+`,d=`import '@cronocode/react-box/components/baseSvg';
+
+declare module '@cronocode/react-box/components/baseSvg' {
+  type ColorType = ${l};
+  type BackgroundType = ${t};
+  type ShadowType = ${c};
+
+  namespace Augmented {
+    interface Props {
+      fill?: ColorType;
+      fillH?: ColorType;
+      fillF?: ColorType;
+      fillA?: ColorType;
+      stroke?: ColorType;
+      strokeH?: ColorType;
+      strokeF?: ColorType;
+      strokeA?: ColorType;
+    }
+  }
+}
+`;return{themeCss:[s,...$,...h,...b].join(`
+`),boxDts:p,baseSvgDts:d}}exports.boxTheme=u;

package/plugins.d.ts

@@ -1,11 +1,12 @@
-import { PluginOption } from 'vite';
 interface BoxThemeOptions {
-    cssPath: string;
-    boxDtsPath: string;
-    baseSvgDtsPath: string;
     colors: Record<string, string>;
     shadows: Record<string, string>;
     backgrounds: Record<string, string>;
 }
-export declare function boxTheme(options: BoxThemeOptions): PluginOption;
+interface BoxThemeResources {
+    themeCss: string;
+    boxDts: string;
+    baseSvgDts: string;
+}
+export declare function boxTheme(options: BoxThemeOptions): BoxThemeResources;
 export {};

package/{plugins.mjs → plugins.es.js}

@@ -1,15 +1,12 @@
 function C(r) {
-  return {
-    name: "boxTheme",
-    configResolved(u) {
-      const t = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
-`), _ = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
+  const c = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
+`), n = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
 `), i = Object.entries(r.backgrounds).map(([o, e]) => `--background${o}: ${e};`).join(`
 `), $ = `:root {
-  ${t}
-  ${_}
+  ${c}
+  ${n}
   ${i}
-}`, h = Object.keys(r.colors).map((o) => `
+}`, s = Object.keys(r.colors).map((o) => `
 .color_${o},
 .color_h_${o}:hover,
 ._h:hover>.color_h_${o} {
@@ -128,7 +125,7 @@ function C(r) {
   line {
     stroke: var(--color${o});
   }
-}`), s = Object.keys(r.shadows).map((o) => `
+}`), h = Object.keys(r.shadows).map((o) => `
 .shadow_${o},
 .shadow_h_${o}:hover,
 ._h:hover>.shadow_h_${o} {
@@ -156,12 +153,12 @@ function C(r) {
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`), l = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), c = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), n = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), d = `import '@cronocode/react-box';
+}`), l = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), t = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), _ = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), p = `import '@cronocode/react-box';
 
 declare module '@cronocode/react-box' {
   type ColorType = ${l};
-  type BackgroundType = ${c};
-  type ShadowType = ${n};
+  type BackgroundType = ${t};
+  type ShadowType = ${_};
 
   namespace Augmented {
     interface Props {
@@ -200,12 +197,12 @@ declare module '@cronocode/react-box' {
     }
   }
 }
-`, p = `import '@cronocode/react-box/components/baseSvg';
+`, d = `import '@cronocode/react-box/components/baseSvg';
 
 declare module '@cronocode/react-box/components/baseSvg' {
   type ColorType = ${l};
-  type BackgroundType = ${c};
-  type ShadowType = ${n};
+  type BackgroundType = ${t};
+  type ShadowType = ${_};
 
   namespace Augmented {
     interface Props {
@@ -221,9 +218,11 @@ declare module '@cronocode/react-box/components/baseSvg' {
   }
 }
 `;
-      (void 0)(r.cssPath, [$, ...h, ...s, ...b].join(`
-`)), (void 0)(r.boxDtsPath, d), (void 0)(r.baseSvgDtsPath, p);
-    }
+  return {
+    themeCss: [$, ...s, ...h, ...b].join(`
+`),
+    boxDts: p,
+    baseSvgDts: d
   };
 }
 export {

package/theme.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),o={button:{styles:{inline:!0,p:3,cursor:"pointer",b:1,borderRadius:1},disabled:{cursor:"default"}},checkbox:{styles:{inline:!0,b:1,p:2}},radioButton:{styles:{inline:!0,b:1,p:2}},textbox:{styles:{inline:!0,b:1,borderRadius:1,p:3}},textarea:{styles:{inline:!0,b:1,borderRadius:1}}};let n=o;var d;(u=>{function i(t){n=t,r()}u.setup=i;function r(){Object.keys(o).forEach(s=>{const e=n[s],l=o[s];e?(e.styles={...l.styles,...e.styles},e.disabled&&l.disabled&&(e.disabled={...l.disabled,...e.disabled})):n[s]=o[s]})}})(d||(d={}));const f=d;function m(u){const{clean:i,disabled:r,theme:t,component:s}=u;return y.useMemo(()=>{var a,b,c;if(i)return{};let e=n[s]??((a=n.components)==null?void 0:a[s]);if(!e)return{};let l=t?{...e.styles,...(b=e.themes)==null?void 0:b[t].styles}:e.styles;return r?t?{...l,...e.disabled,...(c=e.themes)==null?void 0:c[t].disabled}:{...l,...e.disabled}:l},[s,i,r,t])}exports.default=f;exports.useTheme=m;

package/utils/utils.cjs.js

@@ -0,0 +1 @@
+"use strict";const h=require("react"),C={hover:"_h",focus:"_f",shadow:"shadow_",shadowH:"shadow_h_",shadowF:"shadow_f_",shadowA:"shadow_a_",background:"bg_",backgroundH:"bg_h_",backgroundF:"bg_f_",backgroundA:"bg_a_",bg:"bg_",bgH:"bg_h_",bgF:"bg_f_",bgA:"bg_a_",color:"color_",colorH:"color_h_",colorF:"color_f_",colorA:"color_a_",backgroundColor:"bgColor_",backgroundColorH:"bgColor_h_",backgroundColorF:"bgColor_f_",backgroundColorA:"bgColor_a_",bgColor:"bgColor_",bgColorH:"bgColor_h_",bgColorF:"bgColor_f_",bgColorA:"bgColor_a_",borderColor:"borderColor_",borderColorH:"borderColor_h_",borderColorF:"borderColor_f_",borderColorA:"borderColor_a_",outlineColor:"outlineColor_",outlineColorH:"outlineColor_h_",outlineColorF:"outlineColor_f_",outlineColorA:"outlineColor_a_"},p={fill:"fill_",fillH:"fill_h_",fillF:"fill_f_",fillA:"fill_a_",stroke:"stroke_",strokeH:"stroke_h_",strokeF:"stroke_f_",strokeA:"stroke_a_"};var b;(i=>{function n(...u){return u.reduce((l,s)=>s?typeof s=="string"?(l.push(s),l):Array.isArray(s)?(l.push(...n(...s)),l):(Object.entries(s).forEach(([r,e])=>{e&&l.push(r)}),l):l,[])}i.classNames=n})(b||(b={}));const F=b;var f;(i=>{function n(l,...s){const r={...l},e={};return s.forEach(o=>{o in r&&(e[o]=r[o],delete r[o])}),[e,r]}i.moveToTagProps=n;function u(l,s,r){const e={...l},o=e.props||{};return s.forEach(t=>{if(t in e){if(o[t]=e[t],t==="disabled")return;delete e[t]}}),r&&Object.entries(r).forEach(([t,c])=>{o[t]=c}),e.props=o,e}i.buildProps=u})(f||(f={}));const m=f;var g;(i=>{function n(l){const s=Array.from(l.elements).reduce((r,e)=>{const o=e.name;return o&&(r[o]||(r[o]=[]),r[o].push(e)),r},{});return Object.entries(s).reduce((r,[e,o])=>{if(o.length===1){const t=o[0];u(r,e,t.type==="checkbox"||t.type==="radio"?t.checked:t.value)}else{const t=o.reduce((c,_)=>(_.type==="checkbox"||_.type==="radio"?_.checked&&c.push(_.value):c.push(_.value),c),[]);u(r,e,t)}return r},{})}i.getFormEntries=n;function u(l,s,r){if(s.includes(".")){const e=s.split(".");let o=l;e.forEach((t,c)=>{if(e.length>c+1){const _=t.match(/^(.+)\[(\d)\]$/);if(_){const[,a,d]=_;o[a]=o[a]||[],o[a][d]=o[a][d]||{},o=o[a][d]}else o[t]=o[t]||{},o=o[t]}else o[t]=r})}else l[s]=r}})(g||(g={}));const k=g;function A(){return h.useMemo(()=>{const i="crono-box";let n=document.getElementById(i);return n||(n=document.createElement("div"),n.id=i,document.body.appendChild(n)),n},[])}exports.ClassNameUtils=F;exports.FormUtils=k;exports.ObjectUtils=m;exports.themeClasses=C;exports.themeSvgClasses=p;exports.usePortalContainer=A;