@telegraph/style-engine 0.1.0 → 0.1.1
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 +10 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +89 -88
- 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/hooks/useStyleEngine.d.ts +1 -0
- package/dist/types/hooks/useStyleEngine.d.ts.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @telegraph/style-engine
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#367](https://github.com/knocklabs/telegraph/pull/367) [`a748be4`](https://github.com/knocklabs/telegraph/commit/a748be4d48b4e26908deaa120389598e185007c6) Thanks [@kylemcd](https://github.com/kylemcd)! - style engine migration
|
|
8
|
+
|
|
9
|
+
- [#368](https://github.com/knocklabs/telegraph/pull/368) [`22ac9d0`](https://github.com/knocklabs/telegraph/commit/22ac9d0ff28ef0966edd31a4016c76d8a7ae91ad) Thanks [@kylemcd](https://github.com/kylemcd)! - motion updates
|
|
10
|
+
|
|
11
|
+
- [#366](https://github.com/knocklabs/telegraph/pull/366) [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8) Thanks [@kylemcd](https://github.com/kylemcd)! - style engine migration
|
|
12
|
+
|
|
3
13
|
## 0.1.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@vanilla-extract/css"),m=require("@vanilla-extract/recipes"),u=require("@vanilla-extract/sprinkles"),i=require("react"),c=require("@telegraph/tokens"),f={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)"},x={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)"},P={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)"},O={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)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},S={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},j={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)"},V={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)"},E={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)"},R={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)"},q={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:f,rounded:x,shadow:P,spacing:O,family:S,leading:j,tracking:I,text:V,weight:z,breakpoint:E,zIndex:R},C=({props:r,stylePropsFn:t})=>{const a=i.useMemo(()=>r,[r]),p=i.useMemo(()=>{const n=t.properties,l={},e={};return a?(Object.keys(a).forEach(o=>{const g=o;n.has(g)&&Object.assign(l,{[g]:a[g]}),n.has(g)||Object.assign(e,{[g]:a[g]})}),{styleProps:l,componentProps:e}):{styleProps:l,componentProps:e}},[a,t==null?void 0:t.properties]),h=i.useMemo(()=>t(p.styleProps),[p.styleProps,t]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:h}},L={conditions:{sm:{"@media":`screen and (min-width: ${c.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${c.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${c.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${c.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${c.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},M=({currentValueOfCssVar:r="0 0 0 0",value:t,direction:a})=>{const[p,h,n,l]=r.split(" "),e={top:p,right:h,bottom:n,left:l};return a==="top"&&(e.top=t),a==="right"&&(e.right=t),a==="bottom"&&(e.bottom=t),a==="left"&&(e.left=t),a==="all"&&(e.top=t,e.right=t,e.bottom=t,e.left=t),a==="x"&&(e.left=t,e.right=t),a==="y"&&(e.top=t,e.bottom=t),a==="side-top"&&(e.top=t,e.right=t),a==="side-bottom"&&(e.bottom=t,e.left=t),a==="side-left"&&(e.top=t,e.left=t),a==="side-right"&&(e.right=t,e.bottom=t),Object.values(e).join(" ")},y=r=>{const{cssVars:t}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{}};const{style:a={},...p}=r.props,h=a,n={};return Object.keys(p).forEach(l=>{const e=l,o=e,g=t==null?void 0:t[o];if(!g){Object.assign(n,{[e]:p[e]});return}const d=p==null?void 0:p[e];if(!d){Object.assign(h,{[e]:p[e]});return}const b=g.value.replace("VARIABLE",d),v=g.cssVar;if(g.direction){const k=h==null?void 0:h[v],w=M({currentValueOfCssVar:k,value:b,direction:g.direction});Object.assign(h,{[v]:w});return}Object.assign(h,{[v]:b})}),{styleProp:h,otherProps:n}},$=r=>i.useMemo(()=>y(r),[r]);Object.defineProperty(exports,"globalStyle",{enumerable:!0,get:()=>s.globalStyle});Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>s.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>s.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>m.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>u.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>u.defineProperties});exports.RESPONSIVE_STYLE_PROPS=L;exports.getStyleProp=y;exports.tokens=q;exports.useStyleEngine=$;exports.useStyleProps=C;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@vanilla-extract/css"),m=require("@vanilla-extract/recipes"),y=require("@vanilla-extract/sprinkles"),v=require("react"),i=require("@telegraph/tokens"),x={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)"},P={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)"},O={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)"},S={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)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},j={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={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)"},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)"},E={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},R={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)"},q={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)"},C={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:x,rounded:P,shadow:O,spacing:S,family:j,leading:I,tracking:V,text:z,weight:E,breakpoint:R,zIndex:q},L=({props:r,stylePropsFn:e})=>{const a=v.useMemo(()=>r,[r]),p=v.useMemo(()=>{const c=e.properties,n={},t={};return a?(Object.keys(a).forEach(h=>{const l=h;c.has(l)&&Object.assign(n,{[l]:a[l]}),c.has(l)||Object.assign(t,{[l]:a[l]})}),{styleProps:n,componentProps:t}):{styleProps:n,componentProps:t}},[a,e==null?void 0:e.properties]),g=v.useMemo(()=>e(p.styleProps),[p.styleProps,e]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:g}},M={conditions:{sm:{"@media":`screen and (min-width: ${i.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${i.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${i.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${i.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${i.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},$=({currentValueOfCssVar:r="0 0 0 0",value:e,direction:a})=>{const[p,g,c,n]=r.split(" "),t={top:p,right:g,bottom:c,left:n};return a==="top"&&(t.top=e),a==="right"&&(t.right=e),a==="bottom"&&(t.bottom=e),a==="left"&&(t.left=e),a==="all"&&(t.top=e,t.right=e,t.bottom=e,t.left=e),a==="x"&&(t.left=e,t.right=e),a==="y"&&(t.top=e,t.bottom=e),a==="side-top"&&(t.top=e,t.right=e),a==="side-bottom"&&(t.bottom=e,t.left=e),a==="side-left"&&(t.top=e,t.left=e),a==="side-right"&&(t.right=e,t.bottom=e),Object.values(t).join(" ")},k=r=>{const{cssVars:e}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:a={},...p}=r.props,g=a,c={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,l=h,o=e==null?void 0:e[l];if(!o){Object.assign(c,{[h]:p[h]});return}const b=p==null?void 0:p[h];if(!b){Object.assign(g,{[h]:p[h]});return}const u=o.value.replace("VARIABLE",b),s=o.cssVar;if(o.interactive&&(n=!0),o.direction){const w=g==null?void 0:g[s],f=$({currentValueOfCssVar:w,value:u,direction:o.direction});Object.assign(g,{[s]:f});return}Object.assign(g,{[s]:u})}),{styleProp:g,otherProps:c,interactive:n}},N=r=>v.useMemo(()=>k(r),[r]);Object.defineProperty(exports,"globalStyle",{enumerable:!0,get:()=>d.globalStyle});Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>d.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>d.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>m.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>y.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>y.defineProperties});exports.RESPONSIVE_STYLE_PROPS=M;exports.getStyleProp=k;exports.tokens=C;exports.useStyleEngine=N;exports.useStyleProps=L;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","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};\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} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {} };\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 const styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\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 (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n Object.assign(styleProp, { [cssVarName]: directionalValue });\n return;\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\n });\n\n return { styleProp, otherProps };\n};\n","import React from \"react\";\n\nimport { type CssVarsPropObject, getStyleProp } from \"../helpers/getStyleProp\";\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":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","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 const 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 Object.assign(styleProp, { [cssVarName]: directionalValue });\n return;\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarsPropObject, getStyleProp } from \"../helpers/getStyleProp\";\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":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { globalStyle as
|
|
2
|
-
import { recipe as
|
|
3
|
-
import { createSprinkles as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
const
|
|
1
|
+
import { globalStyle as B, keyframes as D, style as K } from "@vanilla-extract/css";
|
|
2
|
+
import { recipe as Y } from "@vanilla-extract/recipes";
|
|
3
|
+
import { createSprinkles as G, defineProperties as H } from "@vanilla-extract/sprinkles";
|
|
4
|
+
import i from "react";
|
|
5
|
+
import c from "@telegraph/tokens";
|
|
6
|
+
const w = {
|
|
7
7
|
transparent: "var(--tgph-transparent)",
|
|
8
8
|
white: "var(--tgph-white)",
|
|
9
9
|
black: "var(--tgph-black)",
|
|
@@ -129,7 +129,7 @@ const y = {
|
|
|
129
129
|
"purple-10": "var(--tgph-purple-10)",
|
|
130
130
|
"purple-11": "var(--tgph-purple-11)",
|
|
131
131
|
"purple-12": "var(--tgph-purple-12)"
|
|
132
|
-
},
|
|
132
|
+
}, k = {
|
|
133
133
|
0: "var(--tgph-rounded-0)",
|
|
134
134
|
1: "var(--tgph-rounded-1)",
|
|
135
135
|
2: "var(--tgph-rounded-2)",
|
|
@@ -138,13 +138,13 @@ const y = {
|
|
|
138
138
|
5: "var(--tgph-rounded-5)",
|
|
139
139
|
6: "var(--tgph-rounded-6)",
|
|
140
140
|
full: "var(--tgph-rounded-full)"
|
|
141
|
-
},
|
|
141
|
+
}, m = {
|
|
142
142
|
0: "var(--tgph-shadow-0)",
|
|
143
143
|
1: "var(--tgph-shadow-1)",
|
|
144
144
|
2: "var(--tgph-shadow-2)",
|
|
145
145
|
3: "var(--tgph-shadow-3)",
|
|
146
146
|
inner: "var(--tgph-shadow-inner)"
|
|
147
|
-
},
|
|
147
|
+
}, f = {
|
|
148
148
|
0: "var(--tgph-spacing-0)",
|
|
149
149
|
1: "var(--tgph-spacing-1)",
|
|
150
150
|
2: "var(--tgph-spacing-2)",
|
|
@@ -180,10 +180,10 @@ const y = {
|
|
|
180
180
|
px: "var(--tgph-spacing-px)",
|
|
181
181
|
full: "var(--tgph-spacing-full)",
|
|
182
182
|
auto: "var(--tgph-spacing-auto)"
|
|
183
|
-
},
|
|
183
|
+
}, x = {
|
|
184
184
|
sans: "var(--tgph-family-sans)",
|
|
185
185
|
mono: "var(--tgph-family-mono)"
|
|
186
|
-
},
|
|
186
|
+
}, I = {
|
|
187
187
|
0: "var(--tgph-leading-0)",
|
|
188
188
|
1: "var(--tgph-leading-1)",
|
|
189
189
|
2: "var(--tgph-leading-2)",
|
|
@@ -204,7 +204,7 @@ const y = {
|
|
|
204
204
|
"code-7": "var(--tgph-leading-code-7)",
|
|
205
205
|
"code-8": "var(--tgph-leading-code-8)",
|
|
206
206
|
"code-9": "var(--tgph-leading-code-9)"
|
|
207
|
-
},
|
|
207
|
+
}, P = {
|
|
208
208
|
0: "var(--tgph-tracking-0)",
|
|
209
209
|
1: "var(--tgph-tracking-1)",
|
|
210
210
|
2: "var(--tgph-tracking-2)",
|
|
@@ -215,7 +215,7 @@ const y = {
|
|
|
215
215
|
7: "var(--tgph-tracking-7)",
|
|
216
216
|
8: "var(--tgph-tracking-8)",
|
|
217
217
|
9: "var(--tgph-tracking-9)"
|
|
218
|
-
},
|
|
218
|
+
}, z = {
|
|
219
219
|
0: "var(--tgph-text-0)",
|
|
220
220
|
1: "var(--tgph-text-1)",
|
|
221
221
|
2: "var(--tgph-text-2)",
|
|
@@ -235,17 +235,17 @@ const y = {
|
|
|
235
235
|
"code-7": "var(--tgph-text-code-7)",
|
|
236
236
|
"code-8": "var(--tgph-text-code-8)",
|
|
237
237
|
"code-9": "var(--tgph-text-code-9)"
|
|
238
|
-
},
|
|
238
|
+
}, V = {
|
|
239
239
|
regular: "var(--tgph-weight-regular)",
|
|
240
240
|
medium: "var(--tgph-weight-medium)",
|
|
241
241
|
"semi-bold": "var(--tgph-weight-semi-bold)"
|
|
242
|
-
},
|
|
242
|
+
}, O = {
|
|
243
243
|
sm: "var(--tgph-breakpoint-sm)",
|
|
244
244
|
md: "var(--tgph-breakpoint-md)",
|
|
245
245
|
lg: "var(--tgph-breakpoint-lg)",
|
|
246
246
|
xl: "var(--tgph-breakpoint-xl)",
|
|
247
247
|
"2xl": "var(--tgph-breakpoint-2xl)"
|
|
248
|
-
},
|
|
248
|
+
}, S = {
|
|
249
249
|
hidden: "var(--tgph-zIndex-hidden)",
|
|
250
250
|
base: "var(--tgph-zIndex-base)",
|
|
251
251
|
auto: "var(--tgph-zIndex-auto)",
|
|
@@ -258,109 +258,110 @@ const y = {
|
|
|
258
258
|
skipLink: "var(--tgph-zIndex-skipLink)",
|
|
259
259
|
toast: "var(--tgph-zIndex-toast)",
|
|
260
260
|
tooltip: "var(--tgph-zIndex-tooltip)"
|
|
261
|
-
},
|
|
261
|
+
}, L = {
|
|
262
262
|
"border-style": {
|
|
263
263
|
solid: "var(--tgph-border-style-solid)",
|
|
264
264
|
dashed: "var(--tgph-border-style-dashed)"
|
|
265
265
|
},
|
|
266
|
-
color:
|
|
267
|
-
rounded:
|
|
268
|
-
shadow:
|
|
269
|
-
spacing:
|
|
270
|
-
family:
|
|
271
|
-
leading:
|
|
272
|
-
tracking:
|
|
273
|
-
text:
|
|
274
|
-
weight:
|
|
275
|
-
breakpoint:
|
|
276
|
-
zIndex:
|
|
277
|
-
},
|
|
266
|
+
color: w,
|
|
267
|
+
rounded: k,
|
|
268
|
+
shadow: m,
|
|
269
|
+
spacing: f,
|
|
270
|
+
family: x,
|
|
271
|
+
leading: I,
|
|
272
|
+
tracking: P,
|
|
273
|
+
text: z,
|
|
274
|
+
weight: V,
|
|
275
|
+
breakpoint: O,
|
|
276
|
+
zIndex: S
|
|
277
|
+
}, M = ({
|
|
278
278
|
props: r,
|
|
279
|
-
stylePropsFn:
|
|
279
|
+
stylePropsFn: a
|
|
280
280
|
}) => {
|
|
281
|
-
const e =
|
|
282
|
-
const
|
|
283
|
-
return e ? (Object.keys(e).forEach((
|
|
284
|
-
const
|
|
285
|
-
|
|
286
|
-
[
|
|
287
|
-
}),
|
|
288
|
-
[
|
|
281
|
+
const e = i.useMemo(() => r, [r]), p = i.useMemo(() => {
|
|
282
|
+
const o = a.properties, n = {}, t = {};
|
|
283
|
+
return e ? (Object.keys(e).forEach((h) => {
|
|
284
|
+
const l = h;
|
|
285
|
+
o.has(l) && Object.assign(n, {
|
|
286
|
+
[l]: e[l]
|
|
287
|
+
}), o.has(l) || Object.assign(t, {
|
|
288
|
+
[l]: e[l]
|
|
289
289
|
});
|
|
290
|
-
}), { styleProps:
|
|
291
|
-
}, [e,
|
|
290
|
+
}), { styleProps: n, componentProps: t }) : { styleProps: n, componentProps: t };
|
|
291
|
+
}, [e, a == null ? void 0 : a.properties]), g = i.useMemo(() => a(p.styleProps), [p.styleProps, a]);
|
|
292
292
|
return {
|
|
293
293
|
styleProps: p.styleProps,
|
|
294
294
|
componentProps: p.componentProps,
|
|
295
|
-
styleClassName:
|
|
295
|
+
styleClassName: g
|
|
296
296
|
};
|
|
297
|
-
},
|
|
297
|
+
}, R = {
|
|
298
298
|
conditions: {
|
|
299
|
-
sm: { "@media": `screen and (min-width: ${
|
|
300
|
-
md: { "@media": `screen and (min-width: ${
|
|
301
|
-
lg: { "@media": `screen and (min-width: ${
|
|
302
|
-
xl: { "@media": `screen and (min-width: ${
|
|
299
|
+
sm: { "@media": `screen and (min-width: ${c.tokens.breakpoint.sm})` },
|
|
300
|
+
md: { "@media": `screen and (min-width: ${c.tokens.breakpoint.md})` },
|
|
301
|
+
lg: { "@media": `screen and (min-width: ${c.tokens.breakpoint.lg})` },
|
|
302
|
+
xl: { "@media": `screen and (min-width: ${c.tokens.breakpoint.xl})` },
|
|
303
303
|
"2xl": {
|
|
304
|
-
"@media": `screen and (min-width: ${
|
|
304
|
+
"@media": `screen and (min-width: ${c.tokens.breakpoint["2xl"]})`
|
|
305
305
|
}
|
|
306
306
|
},
|
|
307
307
|
defaultCondition: "sm",
|
|
308
308
|
responsiveArray: ["sm", "md", "lg", "xl", "2xl"]
|
|
309
|
-
},
|
|
309
|
+
}, j = ({
|
|
310
310
|
currentValueOfCssVar: r = "0 0 0 0",
|
|
311
|
-
value:
|
|
311
|
+
value: a,
|
|
312
312
|
direction: e
|
|
313
313
|
}) => {
|
|
314
|
-
const [p,
|
|
314
|
+
const [p, g, o, n] = r.split(" "), t = {
|
|
315
315
|
top: p,
|
|
316
|
-
right:
|
|
317
|
-
bottom:
|
|
318
|
-
left:
|
|
316
|
+
right: g,
|
|
317
|
+
bottom: o,
|
|
318
|
+
left: n
|
|
319
319
|
};
|
|
320
|
-
return e === "top" && (
|
|
321
|
-
},
|
|
322
|
-
const { cssVars:
|
|
320
|
+
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(" ");
|
|
321
|
+
}, E = (r) => {
|
|
322
|
+
const { cssVars: a } = r;
|
|
323
323
|
if (!(r != null && r.props) || Object.keys(r.props).length === 0)
|
|
324
|
-
return { styleProp: {}, otherProps: {} };
|
|
325
|
-
const { style: e = {}, ...p } = r.props,
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
324
|
+
return { styleProp: {}, otherProps: {}, interactive: !1 };
|
|
325
|
+
const { style: e = {}, ...p } = r.props, g = e, o = {};
|
|
326
|
+
let n = !1;
|
|
327
|
+
return Object.keys(p).forEach((t) => {
|
|
328
|
+
const h = t, l = h, v = a == null ? void 0 : a[l];
|
|
329
|
+
if (!v) {
|
|
330
|
+
Object.assign(o, { [h]: p[h] });
|
|
330
331
|
return;
|
|
331
332
|
}
|
|
332
|
-
const
|
|
333
|
-
if (!
|
|
334
|
-
Object.assign(
|
|
333
|
+
const d = p == null ? void 0 : p[h];
|
|
334
|
+
if (!d) {
|
|
335
|
+
Object.assign(g, { [h]: p[h] });
|
|
335
336
|
return;
|
|
336
337
|
}
|
|
337
|
-
const
|
|
338
|
+
const b = v.value.replace(
|
|
338
339
|
"VARIABLE",
|
|
339
|
-
|
|
340
|
-
),
|
|
341
|
-
if (
|
|
342
|
-
const
|
|
343
|
-
currentValueOfCssVar:
|
|
344
|
-
value:
|
|
345
|
-
direction:
|
|
340
|
+
d
|
|
341
|
+
), s = v.cssVar;
|
|
342
|
+
if (v.interactive && (n = !0), v.direction) {
|
|
343
|
+
const u = g == null ? void 0 : g[s], y = j({
|
|
344
|
+
currentValueOfCssVar: u,
|
|
345
|
+
value: b,
|
|
346
|
+
direction: v.direction
|
|
346
347
|
});
|
|
347
|
-
Object.assign(
|
|
348
|
+
Object.assign(g, { [s]: y });
|
|
348
349
|
return;
|
|
349
350
|
}
|
|
350
|
-
Object.assign(
|
|
351
|
-
}), { styleProp:
|
|
352
|
-
},
|
|
351
|
+
Object.assign(g, { [s]: b });
|
|
352
|
+
}), { styleProp: g, otherProps: o, interactive: n };
|
|
353
|
+
}, A = (r) => i.useMemo(() => E(r), [r]);
|
|
353
354
|
export {
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
355
|
+
R as RESPONSIVE_STYLE_PROPS,
|
|
356
|
+
G as createStyleProps,
|
|
357
|
+
H as defineStyleProps,
|
|
358
|
+
E as getStyleProp,
|
|
359
|
+
B as globalStyle,
|
|
360
|
+
D as keyframes,
|
|
361
|
+
K as style,
|
|
362
|
+
L as tokens,
|
|
363
|
+
A as useStyleEngine,
|
|
364
|
+
M as useStyleProps,
|
|
365
|
+
Y as variant
|
|
365
366
|
};
|
|
366
367
|
//# sourceMappingURL=index.mjs.map
|
package/dist/esm/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","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};\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} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {} };\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 const styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\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 (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n Object.assign(styleProp, { [cssVarName]: directionalValue });\n return;\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\n });\n\n return { styleProp, otherProps };\n};\n","import React from \"react\";\n\nimport { type CssVarsPropObject, getStyleProp } from \"../helpers/getStyleProp\";\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":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","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 const 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 Object.assign(styleProp, { [cssVarName]: directionalValue });\n return;\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarsPropObject, getStyleProp } from \"../helpers/getStyleProp\";\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":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ export type CssVarProp = {
|
|
|
3
3
|
cssVar: string;
|
|
4
4
|
value: string;
|
|
5
5
|
direction?: Direction;
|
|
6
|
+
interactive?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> = Record<keyof CssVars, CssVarProp>;
|
|
8
9
|
type CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;
|
|
@@ -21,6 +22,7 @@ type GetStylePropParams<CssVars, Props> = {
|
|
|
21
22
|
export declare const getStyleProp: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: GetStylePropParams<CssVars, Props>) => {
|
|
22
23
|
styleProp: StyleProp<CssVars>;
|
|
23
24
|
otherProps: OtherProps<CssVars, Props>;
|
|
25
|
+
interactive: boolean;
|
|
24
26
|
};
|
|
25
27
|
export {};
|
|
26
28
|
//# sourceMappingURL=getStyleProp.d.ts.map
|
|
@@ -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;CACvB,CAAC;AAoFF,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,UAE7B,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;
|
|
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;AAoFF,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,UAE7B,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;CAiEtB,CAAC"}
|
|
@@ -3,5 +3,6 @@ import { CssVarsPropObject, getStyleProp } from '../helpers/getStyleProp';
|
|
|
3
3
|
export declare const useStyleEngine: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: Parameters<typeof getStyleProp<CssVars, Props>>[0]) => {
|
|
4
4
|
styleProp: object | { [key in CssVars[keyof CssVars]["cssVar"]]: string; };
|
|
5
5
|
otherProps: object | Omit<{ [key_1 in keyof Props]: Props[key_1]; }, keyof CssVars>;
|
|
6
|
+
interactive: boolean;
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=useStyleEngine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE/E,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAE7B,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE/E,eAAO,MAAM,cAAc,GACzB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,UAE7B,UAAU,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;;;;CAG3D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/style-engine",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
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",
|