@cronocode/react-box 2.0.0 → 2.0.2

package/README.md

@@ -68,9 +68,99 @@ import Textbox from "@cronocode/react-box/components/textbox";
 import Tooltip from "@cronocode/react-box/components/tooltip";
 ```
 
-## Theme variables
+## Extend props
+
+1. It is possible to extend some props like `color`, `background`, `backgroundImage` and `shadow`
+
+```JS
+function themePlugin() {
+  return {
+    name: 'themePlugin',
+    configResolved() {
+      const result = Theme.setupAugmentedProps({
+        colors: {
+          primary: '#445566'
+        },
+        backgroundImages: {
+          gradient: 'linear-gradient(to right, #77A1D3 0%, #79CBCA  51%, #77A1D3  100%)'
+        },
+        shadows: {
+          1: '0 4px 10px rgb(224 224 224 / 52%)',
+        }
+      });
+
+      fs.writeFileSync('./src/box-theme.generated.css', result.variables);
+      fs.writeFileSync('./src/box.generated.d.ts', result.boxDts);
+    },
+  }
+}
+
+```
+
+2. Add this plugin to your build tool
+
+Vitejs
+
+```JS
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [..., themePlugin()],
+})
+```
+
+3. Include `box-theme.generated.css` in your root file
+
+```JS
+import './box-theme.generated.css';
+```
+
+## Theme for components
+
+In the project root file (main.tsx) use `Theme.setup`
+
+```JS
+import Theme from '@cronocode/react-box/theme';
 
+Theme.setup({
+  button: {
+    styles: {
+      px: 4
+    },
+    themes: {
+      mytheme: {
+        px: 8
+      }
+    }
+  },
+  ...
+})
 ```
+
+All styles will be applied to Button component
+
+```JS
+import Button from '@cronocode/react-box/components/button';
+
+function MyComponent() {
+  return <Button>Click me</Button>
+}
+```
+
+or is possible to use Button with specific theme
+
+```JS
+import Button from '@cronocode/react-box/components/button';
+
+function MyComponent() {
+  return <Button theme="mytheme">Click me</Button>
+}
+```
+
+## Theme variables
+
+In CSS file is possible to override default values for:
+
+```CSS
   --borderColor: black;
   --outlineColor: black;
   --lineHeight: 1.2;

package/box.cjs

@@ -1 +1 @@
-"use strict";const s=require("react"),u=require("./core.cjs");function g(t,a){const{tag:n="div",children:o,props:f,className:d,style:c,disabled:r}=t,y=u.useStyles(t,n==="svg"),m=s.useMemo(()=>u.classNames(y,d).join(" "),[t]),e={...f,className:m,disabled:Array.isArray(r)?r[0]:r};c&&(e.style=c),a&&(e.ref=a);const[v,l]=s.useState(!1),i=typeof o=="function";return i&&(e.onMouseEnter=()=>l(!0),e.onMouseLeave=()=>l(!1)),s.createElement(n,e,i?o({isHover:v}):o)}const N=s.forwardRef(g);module.exports=N;
+"use strict";const s=require("react"),u=require("./core.cjs");function g(t,r){const{tag:n="div",children:o,props:f,className:d,style:c,disabled:a}=t,y=u.useStyles(t,n==="svg"),m=s.useMemo(()=>u.classNames(y,d).join(" "),[t]),e={...f,className:m,disabled:Array.isArray(a)?a[0]:a};c&&(e.style=c),r&&(e.ref=r);const[v,l]=s.useState(!1),i=typeof o=="function";return i&&(e.onMouseEnter=()=>l(!0),e.onMouseLeave=()=>l(!1)),s.createElement(n,e,i?o({isHover:v}):o)}const N=s.forwardRef(g);module.exports=N;

package/box.mjs

@@ -1,12 +1,12 @@
 import y, { forwardRef as v, useMemo as g, useState as p } from "react";
 import { u as N, c as x } from "./core.mjs";
 function H(s, o) {
-  const { tag: r = "div", children: t, props: i, className: u, style: n, disabled: a } = s, f = N(s, r === "svg"), m = g(() => x(f, u).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(a) ? a[0] : a };
+  const { tag: r = "div", children: t, props: i, className: f, style: n, disabled: a } = s, u = N(s, r === "svg"), m = g(() => x(u, f).join(" "), [s]), e = { ...i, className: m, disabled: Array.isArray(a) ? a[0] : a };
   n && (e.style = n), o && (e.ref = o);
   const [d, l] = p(!1), c = typeof t == "function";
   return c && (e.onMouseEnter = () => l(!0), e.onMouseLeave = () => l(!1)), y.createElement(r, e, c ? t({ isHover: d }) : t);
 }
-const $ = v(H);
+const b = v(H);
 export {
-  $ as default
+  b as default
 };

package/components/baseSvg.cjs

@@ -1 +1 @@
-"use strict";const g=require("react/jsx-runtime"),p=require("react"),u=require("../box.cjs");function c(r,e){const{viewBox:s="0 0 24 24",width:t="1.5rem",height:o,props:n,...i}=r;return g.jsx(u,{tag:"svg",ref:e,props:{...n,viewBox:s,width:t,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...i})}const w=p.forwardRef(c);module.exports=w;
+"use strict";const c=require("react/jsx-runtime"),g=require("react"),p=require("../box.cjs");function u(s,e){const{viewBox:r="0 0 24 24",width:t="1.5rem",height:o,props:n,...i}=s;return c.jsx(p,{tag:"svg",ref:e,props:{...n,viewBox:r,width:t,height:o,xmlns:"http://www.w3.org/2000/svg",fill:"none"},...i})}const w=g.forwardRef(u);module.exports=w;

package/components/button.cjs

@@ -1 +1 @@
-"use strict";const n=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),u=require("../utils.cjs"),c=["type","onClick"];function i(t,o){const e=u.ObjectUtils.buildProps(t,c);return n.jsx(s,{ref:o,tag:"button",component:"button",...e})}const b=r.forwardRef(i);module.exports=b;
+"use strict";const e=require("react/jsx-runtime"),r=require("react"),s=require("../box.cjs"),u=require("../utils.cjs"),c=["type","onClick"];function i(t,o){const n=u.ObjectUtils.buildProps(t,c);return e.jsx(s,{ref:o,tag:"button",component:"button",...n})}const b=r.forwardRef(i);module.exports=b;

package/components/checkbox.cjs

@@ -1 +1 @@
-"use strict";const u=require("react/jsx-runtime"),t=require("react"),s=require("../box.cjs"),i=require("../utils.cjs"),a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,c){const{indeterminate:r}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(c,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!r)},[e,r]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;
+"use strict";const u=require("react/jsx-runtime"),t=require("react"),s=require("../box.cjs"),i=require("../utils.cjs"),a=["name","onInput","onChange","autoFocus","readOnly","required","value","checked","defaultChecked"];function d(n,r){const{indeterminate:c}=n,o=i.ObjectUtils.buildProps(n,a,{type:"checkbox"}),e=t.useRef(null);return t.useImperativeHandle(r,()=>e.current),t.useEffect(()=>{e.current&&(e.current.indeterminate=!!c)},[e,c]),u.jsx(s,{tag:"input",ref:e,component:"checkbox",...o})}const f=t.forwardRef(d);module.exports=f;

package/components/flex.cjs

@@ -1 +1 @@
-"use strict";const i=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");function u(e,r){const{inline:n,...s}=e;return i.jsx(o,{ref:r,display:n?"inline-flex":"flex",...s})}const x=t.forwardRef(u);module.exports=x;
+"use strict";const t=require("react/jsx-runtime"),i=require("react"),o=require("../box.cjs");function c(e,r){const{inline:n,...s}=e;return t.jsx(o,{ref:r,display:n?"inline-flex":"flex",...s})}const x=i.forwardRef(c);module.exports=x;

package/components/form.cjs

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

package/components/grid.cjs

@@ -1 +1 @@
-"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");function u(r,e){const{inline:i,...n}=r;return s.jsx(o,{ref:e,display:i?"inline-grid":"grid",...n})}const c=t.forwardRef(u);module.exports=c;
+"use strict";const s=require("react/jsx-runtime"),t=require("react"),o=require("../box.cjs");function c(r,e){const{inline:i,...n}=r;return s.jsx(o,{ref:e,display:i?"inline-grid":"grid",...n})}const u=t.forwardRef(c);module.exports=u;

package/components/radioButton.cjs

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

package/components/textbox.cjs

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

package/components/tooltip.cjs

@@ -1 +1 @@
-"use strict";const l=require("react/jsx-runtime"),h=require("react-dom"),f=require("../box.cjs"),s=require("react");function v(){return s.useMemo(()=>{const i="crono-box";let r=document.getElementById(i);return r||(r=document.createElement("div"),r.id=i,document.body.appendChild(r)),r},[])}const a=2;function x(i){const{onPositionChange:r}=i,u=s.useRef(null),[e,p]=s.useState(),m=v(),w=s.useCallback((o,t)=>{const n=c=>{c.target.contains(o)&&t(o)};return document.addEventListener("scroll",n,{capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},[e]),b=s.useCallback((o,t)=>{const n=c=>{t(o)};return window.addEventListener("resize",n,{capture:!0}),()=>{window.removeEventListener("resize",n,{capture:!0})}},[e]),d=s.useCallback(o=>{const t=o.getBoundingClientRect(),n=Math.round((t.top+window.scrollY)*a)/a,c=Math.round((t.left+window.scrollX)*a)/a;((e==null?void 0:e.top)!==n||(e==null?void 0:e.left)!==c)&&(r==null||r({top:n,left:c}),p({top:n,left:c,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(u.current){d(u.current);const o=w(u.current,d),t=b(u.current,d);return()=>{o(),t()}}},[e]),l.jsxs(l.Fragment,{children:[l.jsx(f,{ref:u}),e&&h.createPortal(l.jsx(f,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:l.jsx(f,{position:"absolute",width:"fit",...i})}),m)]})}module.exports=x;
+"use strict";const u=require("react/jsx-runtime"),h=require("react-dom"),f=require("../box.cjs"),s=require("react");function v(){return s.useMemo(()=>{const i="crono-box";let r=document.getElementById(i);return r||(r=document.createElement("div"),r.id=i,document.body.appendChild(r)),r},[])}const a=2;function x(i){const{onPositionChange:r}=i,l=s.useRef(null),[e,p]=s.useState(),m=v(),w=s.useCallback((o,t)=>{const n=c=>{c.target.contains(o)&&t(o)};return document.addEventListener("scroll",n,{capture:!0}),()=>{document.removeEventListener("scroll",n,{capture:!0})}},[e]),b=s.useCallback((o,t)=>{const n=c=>{t(o)};return window.addEventListener("resize",n,{capture:!0}),()=>{window.removeEventListener("resize",n,{capture:!0})}},[e]),d=s.useCallback(o=>{const t=o.getBoundingClientRect(),n=Math.round((t.top+window.scrollY)*a)/a,c=Math.round((t.left+window.scrollX)*a)/a;((e==null?void 0:e.top)!==n||(e==null?void 0:e.left)!==c)&&(r==null||r({top:n,left:c}),p({top:n,left:c,width:t.width>0?t.width:void 0}))},[e]);return s.useLayoutEffect(()=>{if(l.current){d(l.current);const o=w(l.current,d),t=b(l.current,d);return()=>{o(),t()}}},[e]),u.jsxs(u.Fragment,{children:[u.jsx(f,{ref:l}),e&&h.createPortal(u.jsx(f,{position:"absolute",top:0,left:0,transition:"none",style:{transform:`translate(${e.left}px,${e.top}px)`,width:e.width},children:u.jsx(f,{position:"absolute",width:"fit",...i})}),m)]})}module.exports=x;