@wavy/react-ui 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavy/react-ui",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "",
   "license": "MIT",
   "author": "Wavy",
@@ -14,7 +14,8 @@
   "keywords": [
     "wavy-ui",
     "wavy",
-    "ui"
+    "ui",
+    "react"
   ],
   "repository": {
     "type": "git",
@@ -30,12 +31,16 @@
     "build": "tsup && node scripts/build/cloneAssets.ts && npm run bundle-css && npm link",
     "publisher": "npm run build && npm version patch && npm publish"
   },
+  "peerDependencies": {
+    "zod": "^4.2.1",
+    "@wavy/util": "^0.0.11"
+  },
   "devDependencies": {
     "@emotion/styled": "^11.14.1",
     "@types/node": "^24.7.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.3",
-    "@wavy/util": "^0.0.9",
+    "@wavy/util": "^0.0.11",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tsup": "^8.5.0",

package/scripts/public/buildTheme.js

@@ -1,45 +1,46 @@
-#!/usr/bin/env node
-import {upperFirst}from'@wavy/fn';import $ from'path';import {fileURLToPath}from'url';var I=fileURLToPath(import.meta.url),A=$.dirname(I),p=A.split($.sep).filter((r,t,e)=>t<e.length-2).join($.sep);var y="__",j=1e3;function w(r,t=1){let e=r.startsWith("#")?r.slice(1):r;e.length===3&&(e=e.split("").map(n=>n+n).join(""));let o=parseInt(e.substring(0,2),16),a=parseInt(e.substring(2,4),16),s=parseInt(e.substring(4,6),16);return `rgba(${o}, ${a}, ${s}, ${t})`}function k(r){return [...Array.from(Array(9)).flatMap((t,e)=>{let o=e+1;return [`${o}00`,`${o}50`].map(a=>`${r}${y}${a}`)}),r]}function _(r,t){let o=`--${(a=>a.split("").map(s=>s===s.toUpperCase()&&s!==s.toLowerCase()?`-${s.toLowerCase()}`:s).join(""))(r)}`;return t?.wrap?`var(${o})`:o}function F(r,t,e){let o=Object.entries(t);return e?.excludeSeed||o.push(["seed",r]),o}function L(...r){let t=F(...r).map(([o])=>k(o).map(a=>{let{1:s}=a.split(y),n="";return s&&(n=`[${parseInt(s)/j}]`),`"${o}${n}": "${_(a,{wrap:true})}"`})).flat(),e="CssColors";return {filename:e+".ts",content:`
-    const ${e} = Object.freeze({
-      ${t.join(`,
-`)}  
-    })
-
-    export default ${e}
-  `}}function R(r,t,e){let o=(s,n)=>{let g=t.light[s]||n,b=t.dark[s]||n;return k(s).map(i=>{let f=_(i),m=parseFloat(i.replace(/[^0\.0-9]/g,"")),d=m?m/j:1,h=w(g,d),l=w(b,d);return `${f}: light-dark(${h}, ${l})`})};return `
-    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
-    :root {
-      color-scheme: light dark;
-
-      ${F(r,t.light).map(([s,n])=>o(s,n)).flat().join(";")}
-    }
-
-    *,
-    *::before,
-    *::after {
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-      font-family: inherit;
-    }
-
-    body {
-      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-      height: 100vh;
-      width: 100vw;
-      overflow: hidden;
-      background-color: var(--surface);
-      color: var(--on-surface);
-      scrollbar-color: var(--on-surface__750) transparent;
-    }
-
-    #root {
-      --size: 100%;
-      height: var(--size);
-      width: var(--size);
-      overflow: hidden;
-    }
-
-    ${e?.()||""}
+#!/usr/bin/env node
+import {upperFirst}from'@wavy/fn';import $ from'path';import {fileURLToPath}from'url';var I=fileURLToPath(import.meta.url),A=$.dirname(I),p=A.split($.sep).filter((r,t,e)=>t<e.length-2).join($.sep);var y="__",j=1e3;function w(r,t=1){let e=r.startsWith("#")?r.slice(1):r;e.length===3&&(e=e.split("").map(n=>n+n).join(""));let o=parseInt(e.substring(0,2),16),a=parseInt(e.substring(2,4),16),s=parseInt(e.substring(4,6),16);return `rgba(${o}, ${a}, ${s}, ${t})`}function k(r){return [...Array.from(Array(9)).flatMap((t,e)=>{let o=e+1;return [`${o}00`,`${o}50`].map(a=>`${r}${y}${a}`)}),r]}function _(r,t){let o=`--${(a=>a.split("").map(s=>s===s.toUpperCase()&&s!==s.toLowerCase()?`-${s.toLowerCase()}`:s).join(""))(r)}`;return t?.wrap?`var(${o})`:o}function F(r,t,e){let o=Object.entries(t);return e?.excludeSeed||o.push(["seed",r]),o}function L(...r){let t=F(...r).map(([o])=>k(o).map(a=>{let{1:s}=a.split(y),n="";return s&&(n=`[${parseInt(s)/j}]`),`"${o}${n}": "${_(a,{wrap:true})}"`})).flat(),e="CssColors";return {filename:e+".ts",content:`
+    const ${e} = Object.freeze({
+      ${t.join(`,
+`)}  
+    })
+
+    export default ${e}
+  `}}function R(r,t,e){let o=(s,n)=>{let g=t.light[s]||n,b=t.dark[s]||n;return k(s).map(i=>{let f=_(i),m=parseFloat(i.replace(/[^0\.0-9]/g,"")),d=m?m/j:1,h=w(g,d),l=w(b,d);return `${f}: light-dark(${h}, ${l})`})};return `
+    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+    :root {
+      color-scheme: light dark;
+
+      ${F(r,t.light).map(([s,n])=>o(s,n)).flat().join(";")}
+    }
+
+    *,
+    *::before,
+    *::after {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      font-family: inherit;
+    }
+
+    body {
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
+      background-color: var(--surface);
+      color: var(--on-surface);
+      scrollbar-color: var(--on-surface__750) transparent;
+      scrollbar-gutter: stable;
+    }
+
+    #root {
+      --size: 100%;
+      height: var(--size);
+      width: var(--size);
+      overflow: hidden;
+    }
+
+    ${e?.()||""}
 `.replace(/\s+/g," ").trim()}async function N(r){let t=await import('fs/promises'),e=await import('path'),{styles:o}=JSON.parse((await t.readFile(e.join(p,"package.json"))).toString("utf-8"));try{let a=e.join(p,"./external/themes"),s=e.join(p,"./src/css"),n=await t.readdir(a),g=n.map(c=>"--"+c.match(/.*?(?=\.)/)?.[0]),b=process.argv.splice(2),i=r?.flag||b.find(c=>g.includes(c));if(!i)return console.log(`Please select a theme using one of these flags: [${g.join(", ")}]`);let f=n.find(c=>c.includes(i.replace(/[^a-zA-Z]/g,"")));if(!f)return console.log(`Failed to map ${i} to a filename in [${n.join(", ")}].`);let m=await t.readFile(e.join(a,f)),{schemes:d,seed:h}=JSON.parse(m.toString("utf-8")),{dark:l,light:u}=d;u.themelessSurface="#FFF",u.themelessOnSurface="#000",l.themelessSurface="#000",l.themelessOnSurface="#FFF";let{filename:x,content:z}=L(h,u);r?.loadCssRefInLocalPackage&&await t.writeFile(e.join(s,"resources",x),z),await t.writeFile(e.join(p,o),R(h,{light:u,dark:l},r?.injectStyles));let C={green:"\u{1F7E9}",purple:"\u{1F7EA}"},v=i.toLowerCase().replace(/[^a-z]/g,"");console.log(`${C[v]||""} ${upperFirst(v)} theme loaded! \u2728`.trim());}catch(a){console.error(a);}}export{N as buildWavyTheme};

package/scripts/public/bundleCss.js

@@ -1,47 +1,48 @@
 #!/usr/bin/env node
-import $ from'fs/promises';import b from'path';import {fileURLToPath}from'url';import {upperFirst}from'@wavy/fn';var O=fileURLToPath(import.meta.url),D=b.dirname(O),l=D.split(b.sep).filter((t,r,e)=>r<e.length-2).join(b.sep);var S="__",F=1e3;function j(t,r=1){let e=t.startsWith("#")?t.slice(1):t;e.length===3&&(e=e.split("").map(i=>i+i).join(""));let s=parseInt(e.substring(0,2),16),n=parseInt(e.substring(2,4),16),o=parseInt(e.substring(4,6),16);return `rgba(${s}, ${n}, ${o}, ${r})`}function k(t){return [...Array.from(Array(9)).flatMap((r,e)=>{let s=e+1;return [`${s}00`,`${s}50`].map(n=>`${t}${S}${n}`)}),t]}function _(t,r){let s=`--${(n=>n.split("").map(o=>o===o.toUpperCase()&&o!==o.toLowerCase()?`-${o.toLowerCase()}`:o).join(""))(t)}`;return r?.wrap?`var(${s})`:s}function C(t,r,e){let s=Object.entries(r);return e?.excludeSeed||s.push(["seed",t]),s}function W(...t){let r=C(...t).map(([s])=>k(s).map(n=>{let{1:o}=n.split(S),i="";return o&&(i=`[${parseInt(o)/F}]`),`"${s}${i}": "${_(n,{wrap:true})}"`})).flat(),e="CssColors";return {filename:e+".ts",content:`
-    const ${e} = Object.freeze({
-      ${r.join(`,
-`)}  
-    })
-
-    export default ${e}
-  `}}function H(t,r,e){let s=(o,i)=>{let f=r.light[o]||i,v=r.dark[o]||i;return k(o).map(a=>{let p=_(a),d=parseFloat(a.replace(/[^0\.0-9]/g,"")),m=d?d/F:1,u=j(f,m),c=j(v,m);return `${p}: light-dark(${u}, ${c})`})};return `
-    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
-    :root {
-      color-scheme: light dark;
-
-      ${C(t,r.light).map(([o,i])=>s(o,i)).flat().join(";")}
-    }
-
-    *,
-    *::before,
-    *::after {
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-      font-family: inherit;
-    }
-
-    body {
-      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-      height: 100vh;
-      width: 100vw;
-      overflow: hidden;
-      background-color: var(--surface);
-      color: var(--on-surface);
-      scrollbar-color: var(--on-surface__750) transparent;
-    }
-
-    #root {
-      --size: 100%;
-      height: var(--size);
-      width: var(--size);
-      overflow: hidden;
-    }
-
-    ${e?.()||""}
-`.replace(/\s+/g," ").trim()}async function x(t){let r=await import('fs/promises'),e=await import('path'),{styles:s}=JSON.parse((await r.readFile(e.join(l,"package.json"))).toString("utf-8"));try{let n=e.join(l,"./external/themes"),o=e.join(l,"./src/css"),i=await r.readdir(n),f=i.map(g=>"--"+g.match(/.*?(?=\.)/)?.[0]),v=process.argv.splice(2),a=t?.flag||v.find(g=>f.includes(g));if(!a)return console.log(`Please select a theme using one of these flags: [${f.join(", ")}]`);let p=i.find(g=>g.includes(a.replace(/[^a-zA-Z]/g,"")));if(!p)return console.log(`Failed to map ${a} to a filename in [${i.join(", ")}].`);let d=await r.readFile(e.join(n,p)),{schemes:m,seed:u}=JSON.parse(d.toString("utf-8")),{dark:c,light:h}=m;h.themelessSurface="#FFF",h.themelessOnSurface="#000",c.themelessSurface="#000",c.themelessOnSurface="#FFF";let{filename:I,content:R}=W(u,h);t?.loadCssRefInLocalPackage&&await r.writeFile(e.join(o,"resources",I),R),await r.writeFile(e.join(l,s),H(u,{light:h,dark:c},t?.injectStyles));let T={green:"\u{1F7E9}",purple:"\u{1F7EA}"},y=a.toLowerCase().replace(/[^a-z]/g,"");console.log(`${T[y]||""} ${upperFirst(y)} theme loaded! \u2728`.trim());}catch(n){console.error(n);}}var A=(t,r)=>t.map(e=>b.join(r,e)),z=(t,r)=>{let e=t.filter(s=>!b.extname(s));return r?A(e,r):e},P=(t,r)=>{let e=t.filter(s=>s.includes(".css"));return r?A(e,r):e};async function J(t){console.log("\u{1F916} Preparing CSS file scan...");let e=await $.readdir(t),s=z(e,t),n=P(e,t);try{for(let o of s)e=await $.readdir(o),s.push(...z(e,o)),n.push(...P(e,o));}catch(o){throw console.log("Failed to resolve the items found: ",{folders:s,cssFiles:n,items:e}),o}console.log("\u26A1 CSS file scan complete!"),n.length===0?console.log("0 CSS files found...",`
-Aborting bundler...`):(console.log("\u{1F916} Resolving file contents..."),n=await Promise.all(n.map(async o=>(await $.readFile(o)).toString("utf-8").trim())),console.log("\u26A1 File contents resolved!",`
+import $ from'fs/promises';import b from'path';import {fileURLToPath}from'url';import {upperFirst}from'@wavy/fn';var O=fileURLToPath(import.meta.url),D=b.dirname(O),l=D.split(b.sep).filter((t,r,e)=>r<e.length-2).join(b.sep);var S="__",F=1e3;function j(t,r=1){let e=t.startsWith("#")?t.slice(1):t;e.length===3&&(e=e.split("").map(i=>i+i).join(""));let o=parseInt(e.substring(0,2),16),n=parseInt(e.substring(2,4),16),s=parseInt(e.substring(4,6),16);return `rgba(${o}, ${n}, ${s}, ${r})`}function k(t){return [...Array.from(Array(9)).flatMap((r,e)=>{let o=e+1;return [`${o}00`,`${o}50`].map(n=>`${t}${S}${n}`)}),t]}function _(t,r){let o=`--${(n=>n.split("").map(s=>s===s.toUpperCase()&&s!==s.toLowerCase()?`-${s.toLowerCase()}`:s).join(""))(t)}`;return r?.wrap?`var(${o})`:o}function C(t,r,e){let o=Object.entries(r);return e?.excludeSeed||o.push(["seed",t]),o}function W(...t){let r=C(...t).map(([o])=>k(o).map(n=>{let{1:s}=n.split(S),i="";return s&&(i=`[${parseInt(s)/F}]`),`"${o}${i}": "${_(n,{wrap:true})}"`})).flat(),e="CssColors";return {filename:e+".ts",content:`
+    const ${e} = Object.freeze({
+      ${r.join(`,
+`)}  
+    })
+
+    export default ${e}
+  `}}function H(t,r,e){let o=(s,i)=>{let f=r.light[s]||i,v=r.dark[s]||i;return k(s).map(a=>{let p=_(a),d=parseFloat(a.replace(/[^0\.0-9]/g,"")),m=d?d/F:1,u=j(f,m),c=j(v,m);return `${p}: light-dark(${u}, ${c})`})};return `
+    @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+    :root {
+      color-scheme: light dark;
+
+      ${C(t,r.light).map(([s,i])=>o(s,i)).flat().join(";")}
+    }
+
+    *,
+    *::before,
+    *::after {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      font-family: inherit;
+    }
+
+    body {
+      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
+      background-color: var(--surface);
+      color: var(--on-surface);
+      scrollbar-color: var(--on-surface__750) transparent;
+      scrollbar-gutter: stable;
+    }
+
+    #root {
+      --size: 100%;
+      height: var(--size);
+      width: var(--size);
+      overflow: hidden;
+    }
+
+    ${e?.()||""}
+`.replace(/\s+/g," ").trim()}async function x(t){let r=await import('fs/promises'),e=await import('path'),{styles:o}=JSON.parse((await r.readFile(e.join(l,"package.json"))).toString("utf-8"));try{let n=e.join(l,"./external/themes"),s=e.join(l,"./src/css"),i=await r.readdir(n),f=i.map(g=>"--"+g.match(/.*?(?=\.)/)?.[0]),v=process.argv.splice(2),a=t?.flag||v.find(g=>f.includes(g));if(!a)return console.log(`Please select a theme using one of these flags: [${f.join(", ")}]`);let p=i.find(g=>g.includes(a.replace(/[^a-zA-Z]/g,"")));if(!p)return console.log(`Failed to map ${a} to a filename in [${i.join(", ")}].`);let d=await r.readFile(e.join(n,p)),{schemes:m,seed:u}=JSON.parse(d.toString("utf-8")),{dark:c,light:h}=m;h.themelessSurface="#FFF",h.themelessOnSurface="#000",c.themelessSurface="#000",c.themelessOnSurface="#FFF";let{filename:I,content:R}=W(u,h);t?.loadCssRefInLocalPackage&&await r.writeFile(e.join(s,"resources",I),R),await r.writeFile(e.join(l,o),H(u,{light:h,dark:c},t?.injectStyles));let T={green:"\u{1F7E9}",purple:"\u{1F7EA}"},y=a.toLowerCase().replace(/[^a-z]/g,"");console.log(`${T[y]||""} ${upperFirst(y)} theme loaded! \u2728`.trim());}catch(n){console.error(n);}}var A=(t,r)=>t.map(e=>b.join(r,e)),z=(t,r)=>{let e=t.filter(o=>!b.extname(o));return r?A(e,r):e},P=(t,r)=>{let e=t.filter(o=>o.includes(".css"));return r?A(e,r):e};async function J(t){console.log("\u{1F916} Preparing CSS file scan...");let e=await $.readdir(t),o=z(e,t),n=P(e,t);try{for(let s of o)e=await $.readdir(s),o.push(...z(e,s)),n.push(...P(e,s));}catch(s){throw console.log("Failed to resolve the items found: ",{folders:o,cssFiles:n,items:e}),s}console.log("\u26A1 CSS file scan complete!"),n.length===0?console.log("0 CSS files found...",`
+Aborting bundler...`):(console.log("\u{1F916} Resolving file contents..."),n=await Promise.all(n.map(async s=>(await $.readFile(s)).toString("utf-8").trim())),console.log("\u26A1 File contents resolved!",`
 \u{1F916} Preparing bundler...`),await x({injectStyles:()=>n.join(" ")}),console.log("\u2728 Successfully bundled css files! \u2728"));}J(b.join(l,"src"));