@telegraph/style-engine 0.1.16 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +65 -41
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/helpers/getStyleProp/getStyleProp.d.ts +2 -0
- package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map +1 -1
- package/dist/types/helpers/getStyleProp/index.d.ts +1 -1
- package/dist/types/helpers/getStyleProp/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/style-engine
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#619](https://github.com/knocklabs/telegraph/pull/619) [`aeb1c2b`](https://github.com/knocklabs/telegraph/commit/aeb1c2bf0db098320ecc960debf7f99ce0bb35d3) Thanks [@kylemcd](https://github.com/kylemcd)! - feat: add support for negative spacing values to the style engine
|
|
8
|
+
|
|
3
9
|
## 0.1.16
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},V={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},I={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},_={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},j={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:V,tracking:I,text:z,weight:O,breakpoint:S,zIndex:_},P=p=>{const a=[];let e="",g=0;for(let r=0;r<p.length;r++){const h=p[r];h==="("?(g++,e+=h):h===")"?(g--,e+=h):h===" "&&g===0?e&&(a.push(e),e=""):e+=h}for(e&&a.push(e);a.length<4;)a.push("0");return[a[0]||"0",a[1]||"0",a[2]||"0",a[3]||"0"]},E=({currentValueOfCssVar:p="0 0 0 0",value:a,direction:e})=>{const[g,r,h,c]=P(p),t={top:g,right:r,bottom:h,left:c};return e==="top"&&(t.top=a),e==="right"&&(t.right=a),e==="bottom"&&(t.bottom=a),e==="left"&&(t.left=a),e==="all"&&(t.top=a,t.right=a,t.bottom=a,t.left=a),e==="x"&&(t.left=a,t.right=a),e==="y"&&(t.top=a,t.bottom=a),e==="side-top"&&(t.top=a,t.right=a),e==="side-bottom"&&(t.bottom=a,t.left=a),e==="side-left"&&(t.top=a,t.left=a),e==="side-right"&&(t.right=a,t.bottom=a),Object.values(t).join(" ")},b=p=>{const{cssVars:a}=p;if(!(p!=null&&p.props)||Object.keys(p.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:e={},...g}=p.props;let r=e;const h={};let c=!1;return Object.keys(g).forEach(t=>{const l=t,u=l,v=a==null?void 0:a[u];if(!v){Object.assign(h,{[l]:g[l]});return}const n=g==null?void 0:g[l];if(!n){Object.assign(r,{[l]:g[l]});return}let i;if(typeof n=="string"&&n.startsWith("-")){const s=n.slice(1);i=`calc(-1 * ${v.value.replace("VARIABLE",s)})`}else i=v.value.replace("VARIABLE",n);const o=v.cssVar;if(v.interactive&&(c=!0),v.direction){const s=r==null?void 0:r[o],d=E({currentValueOfCssVar:s,value:i,direction:v.direction});r={...r,[o]:d};return}r={...r,[o]:i}}),{styleProp:r,otherProps:h,interactive:c}},A=p=>y.useMemo(()=>b(p),[p]);exports.getStyleProp=b;exports.tokens=j;exports.useStyleEngine=A;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"mrQA2BMA,EAAyB,CAAC,CAC9B,qBAAAC,EAAuB,UACvB,MAAAC,EACA,UAAAC,CACF,IAA2B,CACzB,KAAM,CAACC,EAAKC,EAAOC,EAAQC,CAAI,EAAIN,EAAqB,MAAM,GAAG,EAE3DO,EAAY,CAChB,IAAAJ,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,CAAA,EAGF,OAAIJ,IAAc,QAChBK,EAAU,IAAMN,GAGdC,IAAc,UAChBK,EAAU,MAAQN,GAGhBC,IAAc,WAChBK,EAAU,OAASN,GAGjBC,IAAc,SAChBK,EAAU,KAAON,GAGfC,IAAc,QAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,EAClBM,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,MAChBK,EAAU,KAAON,EACjBM,EAAU,MAAQN,GAGhBC,IAAc,MAChBK,EAAU,IAAMN,EAChBM,EAAU,OAASN,GAMjBC,IAAc,aAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,GAGhBC,IAAc,gBAChBK,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,cAChBK,EAAU,IAAMN,EAChBM,EAAU,KAAON,GAGfC,IAAc,eAChBK,EAAU,MAAQN,EAClBM,EAAU,OAASN,GAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG,CAG3D,EA8BaC,EAIXC,GAKG,CACH,KAAM,CAAE,QAAAC,GAAYD,EAEpB,GAAI,EAACA,GAAA,MAAAA,EAAQ,QAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,SAAW,EACzD,MAAO,CAAE,UAAW,CAAA,EAAI,WAAY,CAAA,EAAI,YAAa,EAAA,EAKvD,KAAM,CAAE,MAAAE,EAAQ,CAAA,EAAI,GAAGC,CAAA,EAAUH,EAAO,MAExC,IAAII,EAAgCF,EACpC,MAAMG,EAAyC,CAAA,EAC/C,IAAIC,EAAc,GAElB,cAAO,KAAKH,CAAK,EAAE,QAASI,GAAS,CACnC,MAAMC,EAAMD,EACNE,EAAaD,EACbE,EAAiBT,GAAA,YAAAA,EAAUQ,GAGjC,GAAI,CAACC,EAAgB,CACnB,OAAO,OAAOL,EAAY,CAAE,CAACG,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC/C,MACF,CAEA,MAAMG,EAAoBR,GAAA,YAAAA,EAAQK,GAElC,GAAI,CAACG,EAAmB,CACtB,OAAO,OAAOP,EAAW,CAAE,CAACI,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC9C,MACF,CAGA,MAAMI,EAAsBF,EAAe,MAAM,QAC/C,WACAC,CAAA,EAGIE,EAAaH,EAAe,OAQlC,GAJIA,EAAe,cACjBJ,EAAc,IAGZI,EAAe,UAAW,CAC5B,MAAMnB,EAAuBa,GAAA,YAAAA,EAAYS,GAEnCC,EAAmBxB,EAAuB,CAC9C,qBAAAC,EACA,MAAOqB,EACP,UAAWF,EAAe,SAAA,CAC3B,EAEDN,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGC,CAAA,EAEhB,MACF,CAEAV,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGD,CAAA,CAElB,CAAC,EAEM,CAAE,UAAAR,EAAW,WAAAC,EAAY,YAAAC,CAAA,CAClC,EC3MaS,EAIXf,GAEOgB,EAAM,QAAQ,IAAMjB,EAAaC,CAAM,EAAG,CAACA,CAAM,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n value: string,\n): [string, string, string, string] => {\n const matches: string[] = [];\n let current = \"\";\n let depth = 0;\n\n for (let i = 0; i < value.length; i++) {\n const char = value[i];\n\n if (char === \"(\") {\n depth++;\n current += char;\n } else if (char === \")\") {\n depth--;\n current += char;\n } else if (char === \" \" && depth === 0) {\n // Space at depth 0 means we're between values\n if (current) {\n matches.push(current);\n current = \"\";\n }\n } else {\n current += char;\n }\n }\n\n // Push the last value\n if (current) {\n matches.push(current);\n }\n\n // Ensure we always have 4 values\n while (matches.length < 4) {\n matches.push(\"0\");\n }\n\n return [\n matches[0] || \"0\",\n matches[1] || \"0\",\n matches[2] || \"0\",\n matches[3] || \"0\",\n ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] =\n parseDirectionalValues(currentValueOfCssVar);\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Handle negative spacing values\n let mappedValueOfCssVar: string;\n const isNegative =\n typeof matchingPropValue === \"string\" &&\n matchingPropValue.startsWith(\"-\");\n\n if (isNegative) {\n // Remove the \"-\" prefix to get the actual token key\n const positiveValue = matchingPropValue.slice(1);\n // Replace VARIABLE with the positive token and wrap in calc()\n const positiveVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n positiveValue,\n );\n mappedValueOfCssVar = `calc(-1 * ${positiveVar})`;\n } else {\n // Replace the VARIABLE placeholder with the actual value of the prop\n mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n }\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","positiveValue","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import u from "react";
|
|
2
|
-
const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" },
|
|
2
|
+
const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, V = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, I = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, _ = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, S = {
|
|
3
3
|
"border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
|
|
4
4
|
color: y,
|
|
5
5
|
rounded: w,
|
|
@@ -7,67 +7,91 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
|
|
|
7
7
|
spacing: f,
|
|
8
8
|
family: x,
|
|
9
9
|
leading: m,
|
|
10
|
-
tracking:
|
|
11
|
-
text:
|
|
10
|
+
tracking: V,
|
|
11
|
+
text: I,
|
|
12
12
|
weight: z,
|
|
13
13
|
breakpoint: _,
|
|
14
14
|
zIndex: O
|
|
15
|
-
}, j = ({
|
|
16
|
-
|
|
15
|
+
}, j = (p) => {
|
|
16
|
+
const a = [];
|
|
17
|
+
let e = "", g = 0;
|
|
18
|
+
for (let r = 0; r < p.length; r++) {
|
|
19
|
+
const h = p[r];
|
|
20
|
+
h === "(" ? (g++, e += h) : h === ")" ? (g--, e += h) : h === " " && g === 0 ? e && (a.push(e), e = "") : e += h;
|
|
21
|
+
}
|
|
22
|
+
for (e && a.push(e); a.length < 4; )
|
|
23
|
+
a.push("0");
|
|
24
|
+
return [
|
|
25
|
+
a[0] || "0",
|
|
26
|
+
a[1] || "0",
|
|
27
|
+
a[2] || "0",
|
|
28
|
+
a[3] || "0"
|
|
29
|
+
];
|
|
30
|
+
}, A = ({
|
|
31
|
+
currentValueOfCssVar: p = "0 0 0 0",
|
|
17
32
|
value: a,
|
|
18
|
-
direction:
|
|
33
|
+
direction: e
|
|
19
34
|
}) => {
|
|
20
|
-
const [g,
|
|
35
|
+
const [g, r, h, c] = j(p), t = {
|
|
21
36
|
top: g,
|
|
22
|
-
right:
|
|
23
|
-
bottom:
|
|
24
|
-
left:
|
|
37
|
+
right: r,
|
|
38
|
+
bottom: h,
|
|
39
|
+
left: c
|
|
25
40
|
};
|
|
26
|
-
return
|
|
27
|
-
},
|
|
28
|
-
const { cssVars: a } =
|
|
29
|
-
if (!(
|
|
41
|
+
return e === "top" && (t.top = a), e === "right" && (t.right = a), e === "bottom" && (t.bottom = a), e === "left" && (t.left = a), e === "all" && (t.top = a, t.right = a, t.bottom = a, t.left = a), e === "x" && (t.left = a, t.right = a), e === "y" && (t.top = a, t.bottom = a), e === "side-top" && (t.top = a, t.right = a), e === "side-bottom" && (t.bottom = a, t.left = a), e === "side-left" && (t.top = a, t.left = a), e === "side-right" && (t.right = a, t.bottom = a), Object.values(t).join(" ");
|
|
42
|
+
}, E = (p) => {
|
|
43
|
+
const { cssVars: a } = p;
|
|
44
|
+
if (!(p != null && p.props) || Object.keys(p.props).length === 0)
|
|
30
45
|
return { styleProp: {}, otherProps: {}, interactive: !1 };
|
|
31
|
-
const { style:
|
|
32
|
-
let
|
|
33
|
-
const
|
|
34
|
-
let
|
|
46
|
+
const { style: e = {}, ...g } = p.props;
|
|
47
|
+
let r = e;
|
|
48
|
+
const h = {};
|
|
49
|
+
let c = !1;
|
|
35
50
|
return Object.keys(g).forEach((t) => {
|
|
36
|
-
const
|
|
51
|
+
const l = t, b = l, v = a == null ? void 0 : a[b];
|
|
37
52
|
if (!v) {
|
|
38
|
-
Object.assign(
|
|
53
|
+
Object.assign(h, { [l]: g[l] });
|
|
39
54
|
return;
|
|
40
55
|
}
|
|
41
|
-
const
|
|
42
|
-
if (!
|
|
43
|
-
Object.assign(
|
|
56
|
+
const n = g == null ? void 0 : g[l];
|
|
57
|
+
if (!n) {
|
|
58
|
+
Object.assign(r, { [l]: g[l] });
|
|
44
59
|
return;
|
|
45
60
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
61
|
+
let i;
|
|
62
|
+
if (typeof n == "string" && n.startsWith("-")) {
|
|
63
|
+
const s = n.slice(1);
|
|
64
|
+
i = `calc(-1 * ${v.value.replace(
|
|
65
|
+
"VARIABLE",
|
|
66
|
+
s
|
|
67
|
+
)})`;
|
|
68
|
+
} else
|
|
69
|
+
i = v.value.replace(
|
|
70
|
+
"VARIABLE",
|
|
71
|
+
n
|
|
72
|
+
);
|
|
73
|
+
const o = v.cssVar;
|
|
74
|
+
if (v.interactive && (c = !0), v.direction) {
|
|
75
|
+
const s = r == null ? void 0 : r[o], d = A({
|
|
52
76
|
currentValueOfCssVar: s,
|
|
53
|
-
value:
|
|
77
|
+
value: i,
|
|
54
78
|
direction: v.direction
|
|
55
79
|
});
|
|
56
|
-
|
|
57
|
-
...
|
|
58
|
-
[
|
|
80
|
+
r = {
|
|
81
|
+
...r,
|
|
82
|
+
[o]: d
|
|
59
83
|
};
|
|
60
84
|
return;
|
|
61
85
|
}
|
|
62
|
-
|
|
63
|
-
...
|
|
64
|
-
[
|
|
86
|
+
r = {
|
|
87
|
+
...r,
|
|
88
|
+
[o]: i
|
|
65
89
|
};
|
|
66
|
-
}), { styleProp:
|
|
67
|
-
},
|
|
90
|
+
}), { styleProp: r, otherProps: h, interactive: c };
|
|
91
|
+
}, C = (p) => u.useMemo(() => E(p), [p]);
|
|
68
92
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
93
|
+
E as getStyleProp,
|
|
94
|
+
S as tokens,
|
|
95
|
+
C as useStyleEngine
|
|
72
96
|
};
|
|
73
97
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":";;;;;;;;;;;;;;GA2BMA,IAAyB,CAAC;AAAA,EAC9B,sBAAAC,IAAuB;AAAA,EACvB,OAAAC;AAAA,EACA,WAAAC;AACF,MAA2B;AACzB,QAAM,CAACC,GAAKC,GAAOC,GAAQC,CAAI,IAAIN,EAAqB,MAAM,GAAG,GAE3DO,IAAY;AAAA,IAChB,KAAAJ;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,EAAA;AAGF,SAAIJ,MAAc,UAChBK,EAAU,MAAMN,IAGdC,MAAc,YAChBK,EAAU,QAAQN,IAGhBC,MAAc,aAChBK,EAAU,SAASN,IAGjBC,MAAc,WAChBK,EAAU,OAAON,IAGfC,MAAc,UAChBK,EAAU,MAAMN,GAChBM,EAAU,QAAQN,GAClBM,EAAU,SAASN,GACnBM,EAAU,OAAON,IAGfC,MAAc,QAChBK,EAAU,OAAON,GACjBM,EAAU,QAAQN,IAGhBC,MAAc,QAChBK,EAAU,MAAMN,GAChBM,EAAU,SAASN,IAMjBC,MAAc,eAChBK,EAAU,MAAMN,GAChBM,EAAU,QAAQN,IAGhBC,MAAc,kBAChBK,EAAU,SAASN,GACnBM,EAAU,OAAON,IAGfC,MAAc,gBAChBK,EAAU,MAAMN,GAChBM,EAAU,OAAON,IAGfC,MAAc,iBAChBK,EAAU,QAAQN,GAClBM,EAAU,SAASN,IAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG;AAG3D,GA8BaC,IAAe,CAI1BC,MAKG;AACH,QAAM,EAAE,SAAAC,MAAYD;AAEpB,MAAI,EAACA,KAAA,QAAAA,EAAQ,UAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,WAAW;AACzD,WAAO,EAAE,WAAW,CAAA,GAAI,YAAY,CAAA,GAAI,aAAa,GAAA;AAKvD,QAAM,EAAE,OAAAE,IAAQ,CAAA,GAAI,GAAGC,EAAA,IAAUH,EAAO;AAExC,MAAII,IAAgCF;AACpC,QAAMG,IAAyC,CAAA;AAC/C,MAAIC,IAAc;AAElB,gBAAO,KAAKH,CAAK,EAAE,QAAQ,CAACI,MAAS;AACnC,UAAMC,IAAMD,GACNE,IAAaD,GACbE,IAAiBT,KAAA,gBAAAA,EAAUQ;AAGjC,QAAI,CAACC,GAAgB;AACnB,aAAO,OAAOL,GAAY,EAAE,CAACG,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC/C;AAAA,IACF;AAEA,UAAMG,IAAoBR,KAAA,gBAAAA,EAAQK;AAElC,QAAI,CAACG,GAAmB;AACtB,aAAO,OAAOP,GAAW,EAAE,CAACI,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC9C;AAAA,IACF;AAGA,UAAMI,IAAsBF,EAAe,MAAM;AAAA,MAC/C;AAAA,MACAC;AAAA,IAAA,GAGIE,IAAaH,EAAe;AAQlC,QAJIA,EAAe,gBACjBJ,IAAc,KAGZI,EAAe,WAAW;AAC5B,YAAMnB,IAAuBa,KAAA,gBAAAA,EAAYS,IAEnCC,IAAmBxB,EAAuB;AAAA,QAC9C,sBAAAC;AAAA,QACA,OAAOqB;AAAA,QACP,WAAWF,EAAe;AAAA,MAAA,CAC3B;AAED,MAAAN,IAAY;AAAA,QACV,GAAGA;AAAA,QACH,CAACS,CAAU,GAAGC;AAAA,MAAA;AAEhB;AAAA,IACF;AAEA,IAAAV,IAAY;AAAA,MACV,GAAGA;AAAA,MACH,CAACS,CAAU,GAAGD;AAAA,IAAA;AAAA,EAElB,CAAC,GAEM,EAAE,WAAAR,GAAW,YAAAC,GAAY,aAAAC,EAAA;AAClC,GC3MaS,IAAiB,CAI5Bf,MAEOgB,EAAM,QAAQ,MAAMjB,EAAaC,CAAM,GAAG,CAACA,CAAM,CAAC;"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n value: string,\n): [string, string, string, string] => {\n const matches: string[] = [];\n let current = \"\";\n let depth = 0;\n\n for (let i = 0; i < value.length; i++) {\n const char = value[i];\n\n if (char === \"(\") {\n depth++;\n current += char;\n } else if (char === \")\") {\n depth--;\n current += char;\n } else if (char === \" \" && depth === 0) {\n // Space at depth 0 means we're between values\n if (current) {\n matches.push(current);\n current = \"\";\n }\n } else {\n current += char;\n }\n }\n\n // Push the last value\n if (current) {\n matches.push(current);\n }\n\n // Ensure we always have 4 values\n while (matches.length < 4) {\n matches.push(\"0\");\n }\n\n return [\n matches[0] || \"0\",\n matches[1] || \"0\",\n matches[2] || \"0\",\n matches[3] || \"0\",\n ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] =\n parseDirectionalValues(currentValueOfCssVar);\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Handle negative spacing values\n let mappedValueOfCssVar: string;\n const isNegative =\n typeof matchingPropValue === \"string\" &&\n matchingPropValue.startsWith(\"-\");\n\n if (isNegative) {\n // Remove the \"-\" prefix to get the actual token key\n const positiveValue = matchingPropValue.slice(1);\n // Replace VARIABLE with the positive token and wrap in calc()\n const positiveVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n positiveValue,\n );\n mappedValueOfCssVar = `calc(-1 * ${positiveVar})`;\n } else {\n // Replace the VARIABLE placeholder with the actual value of the prop\n mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n }\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","positiveValue","cssVarName","directionalValue","useStyleEngine","React"],"mappings":";;;;;;;;;;;;;;GAqCMA,IAAyB,CAC7BC,MACqC;AACrC,QAAMC,IAAoB,CAAA;AAC1B,MAAIC,IAAU,IACVC,IAAQ;AAEZ,WAASC,IAAI,GAAGA,IAAIJ,EAAM,QAAQI,KAAK;AACrC,UAAMC,IAAOL,EAAMI,CAAC;AAEpB,IAAIC,MAAS,OACXF,KACAD,KAAWG,KACFA,MAAS,OAClBF,KACAD,KAAWG,KACFA,MAAS,OAAOF,MAAU,IAE/BD,MACFD,EAAQ,KAAKC,CAAO,GACpBA,IAAU,MAGZA,KAAWG;AAAA,EAEf;AAQA,OALIH,KACFD,EAAQ,KAAKC,CAAO,GAIfD,EAAQ,SAAS;AACtB,IAAAA,EAAQ,KAAK,GAAG;AAGlB,SAAO;AAAA,IACLA,EAAQ,CAAC,KAAK;AAAA,IACdA,EAAQ,CAAC,KAAK;AAAA,IACdA,EAAQ,CAAC,KAAK;AAAA,IACdA,EAAQ,CAAC,KAAK;AAAA,EAAA;AAElB,GAGMK,IAAyB,CAAC;AAAA,EAC9B,sBAAAC,IAAuB;AAAA,EACvB,OAAAP;AAAA,EACA,WAAAQ;AACF,MAA2B;AACzB,QAAM,CAACC,GAAKC,GAAOC,GAAQC,CAAI,IAC7Bb,EAAuBQ,CAAoB,GAEvCM,IAAY;AAAA,IAChB,KAAAJ;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,EAAA;AAGF,SAAIJ,MAAc,UAChBK,EAAU,MAAMb,IAGdQ,MAAc,YAChBK,EAAU,QAAQb,IAGhBQ,MAAc,aAChBK,EAAU,SAASb,IAGjBQ,MAAc,WAChBK,EAAU,OAAOb,IAGfQ,MAAc,UAChBK,EAAU,MAAMb,GAChBa,EAAU,QAAQb,GAClBa,EAAU,SAASb,GACnBa,EAAU,OAAOb,IAGfQ,MAAc,QAChBK,EAAU,OAAOb,GACjBa,EAAU,QAAQb,IAGhBQ,MAAc,QAChBK,EAAU,MAAMb,GAChBa,EAAU,SAASb,IAMjBQ,MAAc,eAChBK,EAAU,MAAMb,GAChBa,EAAU,QAAQb,IAGhBQ,MAAc,kBAChBK,EAAU,SAASb,GACnBa,EAAU,OAAOb,IAGfQ,MAAc,gBAChBK,EAAU,MAAMb,GAChBa,EAAU,OAAOb,IAGfQ,MAAc,iBAChBK,EAAU,QAAQb,GAClBa,EAAU,SAASb,IAGG,OAAO,OAAOa,CAAS,EAAE,KAAK,GAAG;AAG3D,GA8BaC,IAAe,CAI1BC,MAKG;AACH,QAAM,EAAE,SAAAC,MAAYD;AAEpB,MAAI,EAACA,KAAA,QAAAA,EAAQ,UAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,WAAW;AACzD,WAAO,EAAE,WAAW,CAAA,GAAI,YAAY,CAAA,GAAI,aAAa,GAAA;AAKvD,QAAM,EAAE,OAAAE,IAAQ,CAAA,GAAI,GAAGC,EAAA,IAAUH,EAAO;AAExC,MAAII,IAAgCF;AACpC,QAAMG,IAAyC,CAAA;AAC/C,MAAIC,IAAc;AAElB,gBAAO,KAAKH,CAAK,EAAE,QAAQ,CAACI,MAAS;AACnC,UAAMC,IAAMD,GACNE,IAAaD,GACbE,IAAiBT,KAAA,gBAAAA,EAAUQ;AAGjC,QAAI,CAACC,GAAgB;AACnB,aAAO,OAAOL,GAAY,EAAE,CAACG,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC/C;AAAA,IACF;AAEA,UAAMG,IAAoBR,KAAA,gBAAAA,EAAQK;AAElC,QAAI,CAACG,GAAmB;AACtB,aAAO,OAAOP,GAAW,EAAE,CAACI,CAAG,GAAGL,EAAMK,CAAG,GAAG;AAC9C;AAAA,IACF;AAGA,QAAII;AAKJ,QAHE,OAAOD,KAAsB,YAC7BA,EAAkB,WAAW,GAAG,GAElB;AAEd,YAAME,IAAgBF,EAAkB,MAAM,CAAC;AAM/C,MAAAC,IAAsB,aAJFF,EAAe,MAAM;AAAA,QACvC;AAAA,QACAG;AAAA,MAAA,CAE4C;AAAA,IAChD;AAEE,MAAAD,IAAsBF,EAAe,MAAM;AAAA,QACzC;AAAA,QACAC;AAAA,MAAA;AAIJ,UAAMG,IAAaJ,EAAe;AAQlC,QAJIA,EAAe,gBACjBJ,IAAc,KAGZI,EAAe,WAAW;AAC5B,YAAMlB,IAAuBY,KAAA,gBAAAA,EAAYU,IAEnCC,IAAmBxB,EAAuB;AAAA,QAC9C,sBAAAC;AAAA,QACA,OAAOoB;AAAA,QACP,WAAWF,EAAe;AAAA,MAAA,CAC3B;AAED,MAAAN,IAAY;AAAA,QACV,GAAGA;AAAA,QACH,CAACU,CAAU,GAAGC;AAAA,MAAA;AAEhB;AAAA,IACF;AAEA,IAAAX,IAAY;AAAA,MACV,GAAGA;AAAA,MACH,CAACU,CAAU,GAAGF;AAAA,IAAA;AAAA,EAElB,CAAC,GAEM,EAAE,WAAAR,GAAW,YAAAC,GAAY,aAAAC,EAAA;AAClC,GCrRaU,IAAiB,CAI5BhB,MAEOiB,EAAM,QAAQ,MAAMlB,EAAaC,CAAM,GAAG,CAACA,CAAM,CAAC;"}
|
|
@@ -5,6 +5,8 @@ export type CssVarProp = {
|
|
|
5
5
|
direction?: Direction;
|
|
6
6
|
interactive?: boolean;
|
|
7
7
|
};
|
|
8
|
+
export type NegativeSpacing<T extends string | number | symbol> = T extends string ? `-${T}` : never;
|
|
9
|
+
export type WithNegativeSpacing<T extends string | number | symbol> = T extends string ? T | `-${T}` : T;
|
|
8
10
|
export type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> = Record<keyof CssVars, CssVarProp>;
|
|
9
11
|
type CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;
|
|
10
12
|
type OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> = Omit<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;
|
|
1
|
+
{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAIF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAC5D,CAAC,SAAS,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC;AAIrC,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAChE,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AAmIrC,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAwFtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,UAAU,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,gBAAgB,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as tokens } from '@telegraph/tokens/css-variables-map';
|
|
2
|
-
export { getStyleProp, type CssVarProp } from './helpers/getStyleProp';
|
|
2
|
+
export { getStyleProp, type CssVarProp, type NegativeSpacing, type WithNegativeSpacing, } from './helpers/getStyleProp';
|
|
3
3
|
export { useStyleEngine } from './hooks/useStyleEngine';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/style-engine",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "A wrappar around vanilla extract to style telegraph",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@telegraph/tokens": "^0.1.2",
|
|
41
|
-
"postcss": "^8.5.
|
|
41
|
+
"postcss": "^8.5.6"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@knocklabs/eslint-config": "^0.0.5",
|
|
@@ -50,10 +50,10 @@
|
|
|
50
50
|
"@types/react": "^19.1.11",
|
|
51
51
|
"eslint": "^8.56.0",
|
|
52
52
|
"globby": "^14.1.0",
|
|
53
|
-
"lightningcss": "^1.30.
|
|
53
|
+
"lightningcss": "^1.30.2",
|
|
54
54
|
"react": "^19.1.1",
|
|
55
55
|
"react-dom": "^19.1.1",
|
|
56
|
-
"typescript": "^5.9.
|
|
56
|
+
"typescript": "^5.9.3",
|
|
57
57
|
"vite": "^6.0.11"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|