@tapuz/tpz 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,15 @@
+var a=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var d=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},m=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of f(e))!s.call(t,n)&&n!==r&&a(t,n,{get:()=>e[n],enumerable:!(o=z(e,n))||o.enumerable});return t};var c=t=>m(a({},"__esModule",{value:!0}),t);var v={};d(v,{DesignSystemProvider:()=>u});module.exports=c(v);var i=require("react"),l="https://tapuz.io/api/tokens",b=`
+.tpz-hd-fam { font-family: var(--tpz-heading-family, inherit); }
+.tpz-h, .tpz-h1 { font-size: var(--tpz-h1-size, 2rem); font-weight: var(--tpz-h1-weight, 700); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h2 { font-size: var(--tpz-h2-size, 1.5rem); font-weight: var(--tpz-h2-weight, 700); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h3 { font-size: var(--tpz-h3-size, 1.25rem); font-weight: var(--tpz-h3-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h4 { font-size: var(--tpz-h4-size, 1.1rem); font-weight: var(--tpz-h4-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h5 { font-size: var(--tpz-h5-size, 1rem); font-weight: var(--tpz-h5-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-bd, .tpz-bdy-fnt { font-family: var(--tpz-body-family, inherit); font-weight: var(--tpz-body-weight, 400); font-size: var(--tpz-body-size, 1rem); }
+.tpz-btn-sty, .tpz-btn-styl { border-radius: var(--tpz-button-border-radius, 4px); font-size: var(--tpz-button-font-size-base, 1rem); font-weight: var(--tpz-button-font-weight, 500); cursor: pointer; }
+.tpz-btn-shd { box-shadow: 0 var(--tpz-button-shadow-distance, 4px) var(--tpz-button-shadow-blur, 8px) var(--tpz-button-shadow-color, rgba(0,0,0,0.2)); }
+.tpz-frm-inp { background-color: var(--tpz-form-input-background, transparent); border-color: var(--tpz-form-input-border-color, currentColor); border-width: var(--tpz-form-input-border-width, 1px); border-style: var(--tpz-form-input-border-style, solid); border-radius: var(--tpz-form-input-border-radius, 4px); }
+`;function h(t,e){let r=document.getElementById(t);r||(r=document.createElement("style"),r.id=t,document.head.appendChild(r)),r.textContent=e}function p(t){let e=Object.entries(t).map(([r,o])=>`  --tpz-${r}: ${o};`).join(`
+`);h("__tpz_tokens",`:root {
+${e}
+}`)}function u({apiKey:t,children:e,apiUrl:r}){return(0,i.useEffect)(()=>{h("__tpz_base",b)},[]),(0,i.useEffect)(()=>{if(!t)return;let o=`__tpz_${t}`;try{let n=localStorage.getItem(o);n&&p(JSON.parse(n))}catch{}fetch(`${r||l}?key=${encodeURIComponent(t)}`).then(n=>n.json()).then(({tokens:n})=>{if(!(!n||typeof n!="object")){p(n);try{localStorage.setItem(o,JSON.stringify(n))}catch{}}}).catch(()=>{})},[t,r]),(0,i.createElement)(i.Fragment,null,e)}

package/dist/index.esm.js

@@ -0,0 +1,15 @@
+import{useEffect as i,Fragment as h,createElement as z}from"react";var f="https://tapuz.io/api/tokens",s=`
+.tpz-hd-fam { font-family: var(--tpz-heading-family, inherit); }
+.tpz-h, .tpz-h1 { font-size: var(--tpz-h1-size, 2rem); font-weight: var(--tpz-h1-weight, 700); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h2 { font-size: var(--tpz-h2-size, 1.5rem); font-weight: var(--tpz-h2-weight, 700); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h3 { font-size: var(--tpz-h3-size, 1.25rem); font-weight: var(--tpz-h3-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h4 { font-size: var(--tpz-h4-size, 1.1rem); font-weight: var(--tpz-h4-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-h5 { font-size: var(--tpz-h5-size, 1rem); font-weight: var(--tpz-h5-weight, 600); font-family: var(--tpz-heading-family, inherit); }
+.tpz-bd, .tpz-bdy-fnt { font-family: var(--tpz-body-family, inherit); font-weight: var(--tpz-body-weight, 400); font-size: var(--tpz-body-size, 1rem); }
+.tpz-btn-sty, .tpz-btn-styl { border-radius: var(--tpz-button-border-radius, 4px); font-size: var(--tpz-button-font-size-base, 1rem); font-weight: var(--tpz-button-font-weight, 500); cursor: pointer; }
+.tpz-btn-shd { box-shadow: 0 var(--tpz-button-shadow-distance, 4px) var(--tpz-button-shadow-blur, 8px) var(--tpz-button-shadow-color, rgba(0,0,0,0.2)); }
+.tpz-frm-inp { background-color: var(--tpz-form-input-background, transparent); border-color: var(--tpz-form-input-border-color, currentColor); border-width: var(--tpz-form-input-border-width, 1px); border-style: var(--tpz-form-input-border-style, solid); border-radius: var(--tpz-form-input-border-radius, 4px); }
+`;function p(e,n){let t=document.getElementById(e);t||(t=document.createElement("style"),t.id=e,document.head.appendChild(t)),t.textContent=n}function a(e){let n=Object.entries(e).map(([t,o])=>`  --tpz-${t}: ${o};`).join(`
+`);p("__tpz_tokens",`:root {
+${n}
+}`)}function m({apiKey:e,children:n,apiUrl:t}){return i(()=>{p("__tpz_base",s)},[]),i(()=>{if(!e)return;let o=`__tpz_${e}`;try{let r=localStorage.getItem(o);r&&a(JSON.parse(r))}catch{}fetch(`${t||f}?key=${encodeURIComponent(e)}`).then(r=>r.json()).then(({tokens:r})=>{if(!(!r||typeof r!="object")){a(r);try{localStorage.setItem(o,JSON.stringify(r))}catch{}}}).catch(()=>{})},[e,t]),z(h,null,n)}export{m as DesignSystemProvider};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@tapuz/tpz",
+  "version": "0.1.0",
+  "description": "Token-powered design system provider for React",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node build.js",
+    "dev": "node build.js --watch"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "esbuild": "^0.20.0"
+  },
+  "license": "MIT"
+}