@telegraph/style-engine 0.1.1 → 0.1.2

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.
Files changed (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.mjs +46 -304
  5. package/dist/esm/index.mjs.map +1 -1
  6. package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map +1 -1
  7. package/dist/types/hooks/useStyleEngine.d.ts +3 -1
  8. package/dist/types/hooks/useStyleEngine.d.ts.map +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @telegraph/style-engine
2
2
 
3
+ ## 0.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#377](https://github.com/knocklabs/telegraph/pull/377) [`094cb1c`](https://github.com/knocklabs/telegraph/commit/094cb1cb32ab65f5c985cf5497997ec955ff3b89) Thanks [@kylemcd](https://github.com/kylemcd)! - fix read-only warning that occurs in dev mode
8
+
3
9
  ## 0.1.1
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 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;
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"),s=require("react"),v=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:p,stylePropsFn:e})=>{const a=s.useMemo(()=>p,[p]),g=s.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]),r=s.useMemo(()=>e(g.styleProps),[g.styleProps,e]);return{styleProps:g.styleProps,componentProps:g.componentProps,styleClassName:r}},M={conditions:{sm:{"@media":`screen and (min-width: ${v.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${v.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${v.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${v.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${v.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},$=({currentValueOfCssVar:p="0 0 0 0",value:e,direction:a})=>{const[g,r,c,n]=p.split(" "),t={top:g,right:r,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=p=>{const{cssVars:e}=p;if(!(p!=null&&p.props)||Object.keys(p.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:a={},...g}=p.props,r=a,c={};let n=!1;return Object.keys(g).forEach(t=>{const h=t,l=h,i=e==null?void 0:e[l];if(!i){Object.assign(c,{[h]:g[h]});return}const b=g==null?void 0:g[h];if(!b){Object.assign(r,{[h]:g[h]});return}const u=i.value.replace("VARIABLE",b),o=i.cssVar;if(i.interactive&&(n=!0),i.direction){const w=r==null?void 0:r[o],f=$({currentValueOfCssVar:w,value:u,direction:i.direction});Object.assign(r,{[o]:f});return}r!=null&&r[o]&&(r==null||delete r[o]),Object.assign(r,{[o]:u})}),{styleProp:r,otherProps:c,interactive:n}},N=p=>s.useMemo(()=>k(p),[p]);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 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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"}
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 // If there is already a value for the css var, delete it\n // so the new value can be assigned. This prevents the\n // \"read-only\" warning we sometimes see in dev mode\n if (styleProp?.[cssVarName]) {\n delete styleProp?.[cssVarName];\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\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":["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,356 +1,98 @@
1
1
  import { globalStyle as B, keyframes as D, style as K } from "@vanilla-extract/css";
2
2
  import { recipe as Y } from "@vanilla-extract/recipes";
3
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
- transparent: "var(--tgph-transparent)",
8
- white: "var(--tgph-white)",
9
- black: "var(--tgph-black)",
10
- "surface-1": "var(--tgph-surface-1)",
11
- "surface-2": "var(--tgph-surface-2)",
12
- "alpha-white-1": "var(--tgph-alpha-white-1)",
13
- "alpha-white-2": "var(--tgph-alpha-white-2)",
14
- "alpha-white-3": "var(--tgph-alpha-white-3)",
15
- "alpha-white-4": "var(--tgph-alpha-white-4)",
16
- "alpha-white-5": "var(--tgph-alpha-white-5)",
17
- "alpha-white-6": "var(--tgph-alpha-white-6)",
18
- "alpha-white-7": "var(--tgph-alpha-white-7)",
19
- "alpha-white-8": "var(--tgph-alpha-white-8)",
20
- "alpha-white-9": "var(--tgph-alpha-white-9)",
21
- "alpha-white-10": "var(--tgph-alpha-white-10)",
22
- "alpha-white-11": "var(--tgph-alpha-white-11)",
23
- "alpha-white-12": "var(--tgph-alpha-white-12)",
24
- "alpha-black-1": "var(--tgph-alpha-black-1)",
25
- "alpha-black-2": "var(--tgph-alpha-black-2)",
26
- "alpha-black-3": "var(--tgph-alpha-black-3)",
27
- "alpha-black-4": "var(--tgph-alpha-black-4)",
28
- "alpha-black-5": "var(--tgph-alpha-black-5)",
29
- "alpha-black-6": "var(--tgph-alpha-black-6)",
30
- "alpha-black-7": "var(--tgph-alpha-black-7)",
31
- "alpha-black-8": "var(--tgph-alpha-black-8)",
32
- "alpha-black-9": "var(--tgph-alpha-black-9)",
33
- "alpha-black-10": "var(--tgph-alpha-black-10)",
34
- "alpha-black-11": "var(--tgph-alpha-black-11)",
35
- "alpha-black-12": "var(--tgph-alpha-black-12)",
36
- "gray-1": "var(--tgph-gray-1)",
37
- "gray-2": "var(--tgph-gray-2)",
38
- "gray-3": "var(--tgph-gray-3)",
39
- "gray-4": "var(--tgph-gray-4)",
40
- "gray-5": "var(--tgph-gray-5)",
41
- "gray-6": "var(--tgph-gray-6)",
42
- "gray-7": "var(--tgph-gray-7)",
43
- "gray-8": "var(--tgph-gray-8)",
44
- "gray-9": "var(--tgph-gray-9)",
45
- "gray-10": "var(--tgph-gray-10)",
46
- "gray-11": "var(--tgph-gray-11)",
47
- "gray-12": "var(--tgph-gray-12)",
48
- "beige-1": "var(--tgph-beige-1)",
49
- "beige-2": "var(--tgph-beige-2)",
50
- "beige-3": "var(--tgph-beige-3)",
51
- "beige-4": "var(--tgph-beige-4)",
52
- "beige-5": "var(--tgph-beige-5)",
53
- "beige-6": "var(--tgph-beige-6)",
54
- "beige-7": "var(--tgph-beige-7)",
55
- "beige-8": "var(--tgph-beige-8)",
56
- "beige-9": "var(--tgph-beige-9)",
57
- "beige-10": "var(--tgph-beige-10)",
58
- "beige-11": "var(--tgph-beige-11)",
59
- "beige-12": "var(--tgph-beige-12)",
60
- "accent-1": "var(--tgph-accent-1)",
61
- "accent-2": "var(--tgph-accent-2)",
62
- "accent-3": "var(--tgph-accent-3)",
63
- "accent-4": "var(--tgph-accent-4)",
64
- "accent-5": "var(--tgph-accent-5)",
65
- "accent-6": "var(--tgph-accent-6)",
66
- "accent-7": "var(--tgph-accent-7)",
67
- "accent-8": "var(--tgph-accent-8)",
68
- "accent-9": "var(--tgph-accent-9)",
69
- "accent-10": "var(--tgph-accent-10)",
70
- "accent-11": "var(--tgph-accent-11)",
71
- "accent-12": "var(--tgph-accent-12)",
72
- "green-1": "var(--tgph-green-1)",
73
- "green-2": "var(--tgph-green-2)",
74
- "green-3": "var(--tgph-green-3)",
75
- "green-4": "var(--tgph-green-4)",
76
- "green-5": "var(--tgph-green-5)",
77
- "green-6": "var(--tgph-green-6)",
78
- "green-7": "var(--tgph-green-7)",
79
- "green-8": "var(--tgph-green-8)",
80
- "green-9": "var(--tgph-green-9)",
81
- "green-10": "var(--tgph-green-10)",
82
- "green-11": "var(--tgph-green-11)",
83
- "green-12": "var(--tgph-green-12)",
84
- "yellow-1": "var(--tgph-yellow-1)",
85
- "yellow-2": "var(--tgph-yellow-2)",
86
- "yellow-3": "var(--tgph-yellow-3)",
87
- "yellow-4": "var(--tgph-yellow-4)",
88
- "yellow-5": "var(--tgph-yellow-5)",
89
- "yellow-6": "var(--tgph-yellow-6)",
90
- "yellow-7": "var(--tgph-yellow-7)",
91
- "yellow-8": "var(--tgph-yellow-8)",
92
- "yellow-9": "var(--tgph-yellow-9)",
93
- "yellow-10": "var(--tgph-yellow-10)",
94
- "yellow-11": "var(--tgph-yellow-11)",
95
- "yellow-12": "var(--tgph-yellow-12)",
96
- "blue-1": "var(--tgph-blue-1)",
97
- "blue-2": "var(--tgph-blue-2)",
98
- "blue-3": "var(--tgph-blue-3)",
99
- "blue-4": "var(--tgph-blue-4)",
100
- "blue-5": "var(--tgph-blue-5)",
101
- "blue-6": "var(--tgph-blue-6)",
102
- "blue-7": "var(--tgph-blue-7)",
103
- "blue-8": "var(--tgph-blue-8)",
104
- "blue-9": "var(--tgph-blue-9)",
105
- "blue-10": "var(--tgph-blue-10)",
106
- "blue-11": "var(--tgph-blue-11)",
107
- "blue-12": "var(--tgph-blue-12)",
108
- "red-1": "var(--tgph-red-1)",
109
- "red-2": "var(--tgph-red-2)",
110
- "red-3": "var(--tgph-red-3)",
111
- "red-4": "var(--tgph-red-4)",
112
- "red-5": "var(--tgph-red-5)",
113
- "red-6": "var(--tgph-red-6)",
114
- "red-7": "var(--tgph-red-7)",
115
- "red-8": "var(--tgph-red-8)",
116
- "red-9": "var(--tgph-red-9)",
117
- "red-10": "var(--tgph-red-10)",
118
- "red-11": "var(--tgph-red-11)",
119
- "red-12": "var(--tgph-red-12)",
120
- "purple-1": "var(--tgph-purple-1)",
121
- "purple-2": "var(--tgph-purple-2)",
122
- "purple-3": "var(--tgph-purple-3)",
123
- "purple-4": "var(--tgph-purple-4)",
124
- "purple-5": "var(--tgph-purple-5)",
125
- "purple-6": "var(--tgph-purple-6)",
126
- "purple-7": "var(--tgph-purple-7)",
127
- "purple-8": "var(--tgph-purple-8)",
128
- "purple-9": "var(--tgph-purple-9)",
129
- "purple-10": "var(--tgph-purple-10)",
130
- "purple-11": "var(--tgph-purple-11)",
131
- "purple-12": "var(--tgph-purple-12)"
132
- }, k = {
133
- 0: "var(--tgph-rounded-0)",
134
- 1: "var(--tgph-rounded-1)",
135
- 2: "var(--tgph-rounded-2)",
136
- 3: "var(--tgph-rounded-3)",
137
- 4: "var(--tgph-rounded-4)",
138
- 5: "var(--tgph-rounded-5)",
139
- 6: "var(--tgph-rounded-6)",
140
- full: "var(--tgph-rounded-full)"
141
- }, m = {
142
- 0: "var(--tgph-shadow-0)",
143
- 1: "var(--tgph-shadow-1)",
144
- 2: "var(--tgph-shadow-2)",
145
- 3: "var(--tgph-shadow-3)",
146
- inner: "var(--tgph-shadow-inner)"
147
- }, f = {
148
- 0: "var(--tgph-spacing-0)",
149
- 1: "var(--tgph-spacing-1)",
150
- 2: "var(--tgph-spacing-2)",
151
- 3: "var(--tgph-spacing-3)",
152
- 4: "var(--tgph-spacing-4)",
153
- 5: "var(--tgph-spacing-5)",
154
- 6: "var(--tgph-spacing-6)",
155
- 7: "var(--tgph-spacing-7)",
156
- 8: "var(--tgph-spacing-8)",
157
- 9: "var(--tgph-spacing-9)",
158
- 10: "var(--tgph-spacing-10)",
159
- 11: "var(--tgph-spacing-11)",
160
- 12: "var(--tgph-spacing-12)",
161
- 14: "var(--tgph-spacing-14)",
162
- 16: "var(--tgph-spacing-16)",
163
- 20: "var(--tgph-spacing-20)",
164
- 24: "var(--tgph-spacing-24)",
165
- 28: "var(--tgph-spacing-28)",
166
- 32: "var(--tgph-spacing-32)",
167
- 36: "var(--tgph-spacing-36)",
168
- 40: "var(--tgph-spacing-40)",
169
- 44: "var(--tgph-spacing-44)",
170
- 48: "var(--tgph-spacing-48)",
171
- 52: "var(--tgph-spacing-52)",
172
- 56: "var(--tgph-spacing-56)",
173
- 60: "var(--tgph-spacing-60)",
174
- 64: "var(--tgph-spacing-64)",
175
- 72: "var(--tgph-spacing-72)",
176
- 80: "var(--tgph-spacing-80)",
177
- 96: "var(--tgph-spacing-96)",
178
- 140: "var(--tgph-spacing-140)",
179
- 160: "var(--tgph-spacing-160)",
180
- px: "var(--tgph-spacing-px)",
181
- full: "var(--tgph-spacing-full)",
182
- auto: "var(--tgph-spacing-auto)"
183
- }, x = {
184
- sans: "var(--tgph-family-sans)",
185
- mono: "var(--tgph-family-mono)"
186
- }, I = {
187
- 0: "var(--tgph-leading-0)",
188
- 1: "var(--tgph-leading-1)",
189
- 2: "var(--tgph-leading-2)",
190
- 3: "var(--tgph-leading-3)",
191
- 4: "var(--tgph-leading-4)",
192
- 5: "var(--tgph-leading-5)",
193
- 6: "var(--tgph-leading-6)",
194
- 7: "var(--tgph-leading-7)",
195
- 8: "var(--tgph-leading-8)",
196
- 9: "var(--tgph-leading-9)",
197
- "code-0": "var(--tgph-leading-code-0)",
198
- "code-1": "var(--tgph-leading-code-1)",
199
- "code-2": "var(--tgph-leading-code-2)",
200
- "code-3": "var(--tgph-leading-code-3)",
201
- "code-4": "var(--tgph-leading-code-4)",
202
- "code-5": "var(--tgph-leading-code-5)",
203
- "code-6": "var(--tgph-leading-code-6)",
204
- "code-7": "var(--tgph-leading-code-7)",
205
- "code-8": "var(--tgph-leading-code-8)",
206
- "code-9": "var(--tgph-leading-code-9)"
207
- }, P = {
208
- 0: "var(--tgph-tracking-0)",
209
- 1: "var(--tgph-tracking-1)",
210
- 2: "var(--tgph-tracking-2)",
211
- 3: "var(--tgph-tracking-3)",
212
- 4: "var(--tgph-tracking-4)",
213
- 5: "var(--tgph-tracking-5)",
214
- 6: "var(--tgph-tracking-6)",
215
- 7: "var(--tgph-tracking-7)",
216
- 8: "var(--tgph-tracking-8)",
217
- 9: "var(--tgph-tracking-9)"
218
- }, z = {
219
- 0: "var(--tgph-text-0)",
220
- 1: "var(--tgph-text-1)",
221
- 2: "var(--tgph-text-2)",
222
- 3: "var(--tgph-text-3)",
223
- 4: "var(--tgph-text-4)",
224
- 5: "var(--tgph-text-5)",
225
- 6: "var(--tgph-text-6)",
226
- 7: "var(--tgph-text-7)",
227
- 8: "var(--tgph-text-8)",
228
- 9: "var(--tgph-text-9)",
229
- "code-0": "var(--tgph-text-code-0)",
230
- "code-1": "var(--tgph-text-code-1)",
231
- "code-2": "var(--tgph-text-code-2)",
232
- "code-4": "var(--tgph-text-code-4)",
233
- "code-5": "var(--tgph-text-code-5)",
234
- "code-6": "var(--tgph-text-code-6)",
235
- "code-7": "var(--tgph-text-code-7)",
236
- "code-8": "var(--tgph-text-code-8)",
237
- "code-9": "var(--tgph-text-code-9)"
238
- }, V = {
239
- regular: "var(--tgph-weight-regular)",
240
- medium: "var(--tgph-weight-medium)",
241
- "semi-bold": "var(--tgph-weight-semi-bold)"
242
- }, O = {
243
- sm: "var(--tgph-breakpoint-sm)",
244
- md: "var(--tgph-breakpoint-md)",
245
- lg: "var(--tgph-breakpoint-lg)",
246
- xl: "var(--tgph-breakpoint-xl)",
247
- "2xl": "var(--tgph-breakpoint-2xl)"
248
- }, S = {
249
- hidden: "var(--tgph-zIndex-hidden)",
250
- base: "var(--tgph-zIndex-base)",
251
- auto: "var(--tgph-zIndex-auto)",
252
- dropdown: "var(--tgph-zIndex-dropdown)",
253
- sticky: "var(--tgph-zIndex-sticky)",
254
- banner: "var(--tgph-zIndex-banner)",
255
- overlay: "var(--tgph-zIndex-overlay)",
256
- modal: "var(--tgph-zIndex-modal)",
257
- popover: "var(--tgph-zIndex-popover)",
258
- skipLink: "var(--tgph-zIndex-skipLink)",
259
- toast: "var(--tgph-zIndex-toast)",
260
- tooltip: "var(--tgph-zIndex-tooltip)"
261
- }, L = {
262
- "border-style": {
263
- solid: "var(--tgph-border-style-solid)",
264
- dashed: "var(--tgph-border-style-dashed)"
265
- },
4
+ import s from "react";
5
+ import i from "@telegraph/tokens";
6
+ const 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)" }, m = { 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)", 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)" }, x = { 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)" }, 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)" }, P = { 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)" }, L = {
7
+ "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
266
8
  color: w,
267
9
  rounded: k,
268
10
  shadow: m,
269
11
  spacing: f,
270
12
  family: x,
271
13
  leading: I,
272
- tracking: P,
14
+ tracking: V,
273
15
  text: z,
274
- weight: V,
275
- breakpoint: O,
276
- zIndex: S
16
+ weight: O,
17
+ breakpoint: S,
18
+ zIndex: P
277
19
  }, M = ({
278
- props: r,
20
+ props: p,
279
21
  stylePropsFn: a
280
22
  }) => {
281
- const e = i.useMemo(() => r, [r]), p = i.useMemo(() => {
282
- const o = a.properties, n = {}, t = {};
23
+ const e = s.useMemo(() => p, [p]), g = s.useMemo(() => {
24
+ const v = a.properties, n = {}, t = {};
283
25
  return e ? (Object.keys(e).forEach((h) => {
284
26
  const l = h;
285
- o.has(l) && Object.assign(n, {
27
+ v.has(l) && Object.assign(n, {
286
28
  [l]: e[l]
287
- }), o.has(l) || Object.assign(t, {
29
+ }), v.has(l) || Object.assign(t, {
288
30
  [l]: e[l]
289
31
  });
290
32
  }), { 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]);
33
+ }, [e, a == null ? void 0 : a.properties]), r = s.useMemo(() => a(g.styleProps), [g.styleProps, a]);
292
34
  return {
293
- styleProps: p.styleProps,
294
- componentProps: p.componentProps,
295
- styleClassName: g
35
+ styleProps: g.styleProps,
36
+ componentProps: g.componentProps,
37
+ styleClassName: r
296
38
  };
297
39
  }, R = {
298
40
  conditions: {
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})` },
41
+ sm: { "@media": `screen and (min-width: ${i.tokens.breakpoint.sm})` },
42
+ md: { "@media": `screen and (min-width: ${i.tokens.breakpoint.md})` },
43
+ lg: { "@media": `screen and (min-width: ${i.tokens.breakpoint.lg})` },
44
+ xl: { "@media": `screen and (min-width: ${i.tokens.breakpoint.xl})` },
303
45
  "2xl": {
304
- "@media": `screen and (min-width: ${c.tokens.breakpoint["2xl"]})`
46
+ "@media": `screen and (min-width: ${i.tokens.breakpoint["2xl"]})`
305
47
  }
306
48
  },
307
49
  defaultCondition: "sm",
308
50
  responsiveArray: ["sm", "md", "lg", "xl", "2xl"]
309
51
  }, j = ({
310
- currentValueOfCssVar: r = "0 0 0 0",
52
+ currentValueOfCssVar: p = "0 0 0 0",
311
53
  value: a,
312
54
  direction: e
313
55
  }) => {
314
- const [p, g, o, n] = r.split(" "), t = {
315
- top: p,
316
- right: g,
317
- bottom: o,
56
+ const [g, r, v, n] = p.split(" "), t = {
57
+ top: g,
58
+ right: r,
59
+ bottom: v,
318
60
  left: n
319
61
  };
320
62
  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
- if (!(r != null && r.props) || Object.keys(r.props).length === 0)
63
+ }, E = (p) => {
64
+ const { cssVars: a } = p;
65
+ if (!(p != null && p.props) || Object.keys(p.props).length === 0)
324
66
  return { styleProp: {}, otherProps: {}, interactive: !1 };
325
- const { style: e = {}, ...p } = r.props, g = e, o = {};
67
+ const { style: e = {}, ...g } = p.props, r = e, v = {};
326
68
  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] });
69
+ return Object.keys(g).forEach((t) => {
70
+ const h = t, l = h, c = a == null ? void 0 : a[l];
71
+ if (!c) {
72
+ Object.assign(v, { [h]: g[h] });
331
73
  return;
332
74
  }
333
- const d = p == null ? void 0 : p[h];
75
+ const d = g == null ? void 0 : g[h];
334
76
  if (!d) {
335
- Object.assign(g, { [h]: p[h] });
77
+ Object.assign(r, { [h]: g[h] });
336
78
  return;
337
79
  }
338
- const b = v.value.replace(
80
+ const b = c.value.replace(
339
81
  "VARIABLE",
340
82
  d
341
- ), s = v.cssVar;
342
- if (v.interactive && (n = !0), v.direction) {
343
- const u = g == null ? void 0 : g[s], y = j({
83
+ ), o = c.cssVar;
84
+ if (c.interactive && (n = !0), c.direction) {
85
+ const u = r == null ? void 0 : r[o], y = j({
344
86
  currentValueOfCssVar: u,
345
87
  value: b,
346
- direction: v.direction
88
+ direction: c.direction
347
89
  });
348
- Object.assign(g, { [s]: y });
90
+ Object.assign(r, { [o]: y });
349
91
  return;
350
92
  }
351
- Object.assign(g, { [s]: b });
352
- }), { styleProp: g, otherProps: o, interactive: n };
353
- }, A = (r) => i.useMemo(() => E(r), [r]);
93
+ r != null && r[o] && (r == null || delete r[o]), Object.assign(r, { [o]: b });
94
+ }), { styleProp: r, otherProps: v, interactive: n };
95
+ }, A = (p) => s.useMemo(() => E(p), [p]);
354
96
  export {
355
97
  R as RESPONSIVE_STYLE_PROPS,
356
98
  G as createStyleProps,
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 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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"}
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 // If there is already a value for the css var, delete it\n // so the new value can be assigned. This prevents the\n // \"read-only\" warning we sometimes see in dev mode\n if (styleProp?.[cssVarName]) {\n delete styleProp?.[cssVarName];\n }\n\n Object.assign(styleProp, { [cssVarName]: mappedValueOfCssVar });\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":["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/types/helpers/getStyleProp/getStyleProp.d.ts.map CHANGED
@@ -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;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"}
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;CAwEtB,CAAC"}
package/dist/types/hooks/useStyleEngine.d.ts CHANGED
@@ -1,8 +1,10 @@
1
- import { CssVarsPropObject, getStyleProp } from '../helpers/getStyleProp';
1
+ import { CssVarProp, getStyleProp } from '../helpers/getStyleProp';
2
2
 
3
+ type CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;
3
4
  export declare const useStyleEngine: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: Parameters<typeof getStyleProp<CssVars, Props>>[0]) => {
4
5
  styleProp: object | { [key in CssVars[keyof CssVars]["cssVar"]]: string; };
5
6
  otherProps: object | Omit<{ [key_1 in keyof Props]: Props[key_1]; }, keyof CssVars>;
6
7
  interactive: boolean;
7
8
  };
9
+ export {};
8
10
  //# sourceMappingURL=useStyleEngine.d.ts.map
package/dist/types/hooks/useStyleEngine.d.ts.map CHANGED
@@ -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;;;;CAG3D,CAAC"}
1
+ {"version":3,"file":"useStyleEngine.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleEngine.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAExE,KAAK,iBAAiB,CAAC,OAAO,IAAI,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpE,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.1",
3
+ "version": "0.1.2",
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",
@@ -47,7 +47,7 @@
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.3.1",
49
49
  "typescript": "^5.5.4",
50
- "vite": "^5.4.7"
50
+ "vite": "^6.0.11"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "react": "^18.2.0",