@telegraph/style-engine 0.0.4 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) 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 +103 -57
  5. package/dist/esm/index.mjs.map +1 -1
  6. package/dist/types/helpers/getStyleProp/getStyleProp.d.ts +26 -0
  7. package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map +1 -0
  8. package/dist/types/helpers/getStyleProp/index.d.ts +3 -0
  9. package/dist/types/helpers/getStyleProp/index.d.ts.map +1 -0
  10. package/dist/types/hooks/useStyleEngine.d.ts +7 -0
  11. package/dist/types/hooks/useStyleEngine.d.ts.map +1 -0
  12. package/dist/types/hooks/useStyleProps.d.ts +75 -75
  13. package/dist/types/hooks/useStyleProps.d.ts.map +1 -1
  14. package/dist/types/index.d.ts +3 -1
  15. package/dist/types/index.d.ts.map +1 -1
  16. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @telegraph/style-engine
2
2
 
3
+ ## 0.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#351](https://github.com/knocklabs/telegraph/pull/351) [`7ef8fe2`](https://github.com/knocklabs/telegraph/commit/7ef8fe2df51b1f632163918095a5496322277cad) Thanks [@kylemcd](https://github.com/kylemcd)! - create new style-engine and implement it in layout and typography packages
8
+
3
9
  ## 0.0.4
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 c=require("@vanilla-extract/css"),s=require("@vanilla-extract/recipes"),i=require("@vanilla-extract/sprinkles"),l=require("react"),t=require("@telegraph/tokens"),b={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)"},u={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)"},y={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)"},k={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)"},w={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},m={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},x={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)"},f={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)"},P={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},I={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)"},z={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},S={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:b,rounded:u,shadow:y,spacing:k,family:w,leading:m,tracking:x,text:f,weight:P,breakpoint:I,zIndex:z},O=({props:n,stylePropsFn:a})=>{const r=l.useMemo(()=>n,[n]),p=l.useMemo(()=>{const v=a.properties,g={},h={};return r?(Object.keys(r).forEach(d=>{const e=d;v.has(e)&&Object.assign(g,{[e]:r[e]}),v.has(e)||Object.assign(h,{[e]:r[e]})}),{styleProps:g,componentProps:h}):{styleProps:g,componentProps:h}},[r,a==null?void 0:a.properties]),o=l.useMemo(()=>a(p.styleProps),[p.styleProps,a]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:o}},j={conditions:{sm:{"@media":`screen and (min-width: ${t.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${t.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${t.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${t.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${t.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]};Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>c.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>c.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>s.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>i.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>i.defineProperties});exports.RESPONSIVE_STYLE_PROPS=j;exports.tokens=S;exports.useStyleProps=O;
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;
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"],"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"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS"],"mappings":"oqQA0BaA,EAAgB,CAG3B,CACA,MAAAC,EACA,aAAAC,CACF,IAAyD,CAEvD,MAAMC,EAAgBC,EAAM,QAAe,IAAMH,EAAO,CAACA,CAAK,CAAC,EAIzDI,EAAgBD,EAAM,QAAQ,IAAM,CACxC,MAAME,EAAwBJ,EAAa,WAErCK,EAAa,CAAA,EACbC,EAAiB,CAAA,EAGvB,OAAKL,GAEL,OAAO,KAAKA,CAAa,EAAE,QAASM,GAAS,CAC3C,MAAMC,EAAMD,EACRH,EAAsB,IAAII,CAAG,GAC/B,OAAO,OAAOH,EAAY,CACxB,CAACG,CAAG,EAAGP,EAAcO,CAAG,CAAA,CACzB,EAEEJ,EAAsB,IAAII,CAAG,GAChC,OAAO,OAAOF,EAAgB,CAC5B,CAACE,CAAG,EAAGP,EAAcO,CAAG,CAAA,CACzB,CACH,CACD,EAEM,CAAE,WAAAH,EAAY,eAAAC,IAhBM,CAAE,WAAAD,EAAY,eAAAC,CAAe,CAiBvD,EAAA,CAACL,EAAeD,GAAA,YAAAA,EAAc,UAAU,CAAC,EAGtCS,EAAiBP,EAAM,QAAQ,IAC5BF,EAAaG,EAAc,UAAU,EAC3C,CAACA,EAAc,WAAYH,CAAY,CAAC,EAEpC,MAAA,CACL,WAAYG,EAAc,WAC1B,eAAgBA,EAAc,eAC9B,eAAAM,CAAA,CAEJ,ECxEaC,EAAyB,CACpC,WAAY,CACV,GAAI,CAAE,SAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,GAAI,EACpE,GAAI,CAAE,SAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,GAAI,EACpE,GAAI,CAAE,SAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,GAAI,EACpE,GAAI,CAAE,SAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,GAAI,EACpE,MAAO,CACL,SAAU,0BAA0B,EAAE,OAAO,WAAW,KAAK,CAAC,GAChE,CACF,EACA,iBAAkB,KAClB,gBAAiB,CAAC,KAAM,KAAM,KAAM,KAAM,KAAK,CACjD"}
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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"}
package/dist/esm/index.mjs CHANGED
@@ -1,9 +1,9 @@
1
- import { keyframes as j, style as L } from "@vanilla-extract/css";
2
- import { recipe as R } from "@vanilla-extract/recipes";
3
- import { createSprinkles as N, defineProperties as _ } from "@vanilla-extract/sprinkles";
4
- import v from "react";
5
- import t from "@telegraph/tokens";
6
- const o = {
1
+ import { globalStyle as _, keyframes as B, style as D } from "@vanilla-extract/css";
2
+ import { recipe as T } from "@vanilla-extract/recipes";
3
+ import { createSprinkles as q, defineProperties as G } from "@vanilla-extract/sprinkles";
4
+ import c from "react";
5
+ import o from "@telegraph/tokens";
6
+ const y = {
7
7
  transparent: "var(--tgph-transparent)",
8
8
  white: "var(--tgph-white)",
9
9
  black: "var(--tgph-black)",
@@ -129,7 +129,7 @@ const o = {
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
- }, d = {
132
+ }, w = {
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 o = {
138
138
  5: "var(--tgph-rounded-5)",
139
139
  6: "var(--tgph-rounded-6)",
140
140
  full: "var(--tgph-rounded-full)"
141
- }, s = {
141
+ }, k = {
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
- }, b = {
147
+ }, m = {
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 o = {
180
180
  px: "var(--tgph-spacing-px)",
181
181
  full: "var(--tgph-spacing-full)",
182
182
  auto: "var(--tgph-spacing-auto)"
183
- }, u = {
183
+ }, f = {
184
184
  sans: "var(--tgph-family-sans)",
185
185
  mono: "var(--tgph-family-mono)"
186
- }, w = {
186
+ }, x = {
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 o = {
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
- }, y = {
207
+ }, I = {
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 o = {
215
215
  7: "var(--tgph-tracking-7)",
216
216
  8: "var(--tgph-tracking-8)",
217
217
  9: "var(--tgph-tracking-9)"
218
- }, k = {
218
+ }, P = {
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 o = {
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
- }, m = {
238
+ }, z = {
239
239
  regular: "var(--tgph-weight-regular)",
240
240
  medium: "var(--tgph-weight-medium)",
241
241
  "semi-bold": "var(--tgph-weight-semi-bold)"
242
- }, x = {
242
+ }, V = {
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
- }, f = {
248
+ }, O = {
249
249
  hidden: "var(--tgph-zIndex-hidden)",
250
250
  base: "var(--tgph-zIndex-base)",
251
251
  auto: "var(--tgph-zIndex-auto)",
@@ -258,63 +258,109 @@ const o = {
258
258
  skipLink: "var(--tgph-zIndex-skipLink)",
259
259
  toast: "var(--tgph-zIndex-toast)",
260
260
  tooltip: "var(--tgph-zIndex-tooltip)"
261
- }, P = {
261
+ }, $ = {
262
262
  "border-style": {
263
263
  solid: "var(--tgph-border-style-solid)",
264
264
  dashed: "var(--tgph-border-style-dashed)"
265
265
  },
266
- color: o,
267
- rounded: d,
268
- shadow: s,
269
- spacing: b,
270
- family: u,
271
- leading: w,
272
- tracking: y,
273
- text: k,
274
- weight: m,
275
- breakpoint: x,
276
- zIndex: f
277
- }, S = ({
278
- props: l,
279
- stylePropsFn: a
266
+ color: y,
267
+ rounded: w,
268
+ shadow: k,
269
+ spacing: m,
270
+ family: f,
271
+ leading: x,
272
+ tracking: I,
273
+ text: P,
274
+ weight: z,
275
+ breakpoint: V,
276
+ zIndex: O
277
+ }, L = ({
278
+ props: r,
279
+ stylePropsFn: t
280
280
  }) => {
281
- const r = v.useMemo(() => l, [l]), p = v.useMemo(() => {
282
- const n = a.properties, g = {}, h = {};
283
- return r ? (Object.keys(r).forEach((i) => {
284
- const e = i;
285
- n.has(e) && Object.assign(g, {
286
- [e]: r[e]
287
- }), n.has(e) || Object.assign(h, {
288
- [e]: r[e]
281
+ const e = c.useMemo(() => r, [r]), p = c.useMemo(() => {
282
+ const n = t.properties, l = {}, a = {};
283
+ return e ? (Object.keys(e).forEach((v) => {
284
+ const g = v;
285
+ n.has(g) && Object.assign(l, {
286
+ [g]: e[g]
287
+ }), n.has(g) || Object.assign(a, {
288
+ [g]: e[g]
289
289
  });
290
- }), { styleProps: g, componentProps: h }) : { styleProps: g, componentProps: h };
291
- }, [r, a == null ? void 0 : a.properties]), c = v.useMemo(() => a(p.styleProps), [p.styleProps, a]);
290
+ }), { styleProps: l, componentProps: a }) : { styleProps: l, componentProps: a };
291
+ }, [e, t == null ? void 0 : t.properties]), h = c.useMemo(() => t(p.styleProps), [p.styleProps, t]);
292
292
  return {
293
293
  styleProps: p.styleProps,
294
294
  componentProps: p.componentProps,
295
- styleClassName: c
295
+ styleClassName: h
296
296
  };
297
- }, O = {
297
+ }, M = {
298
298
  conditions: {
299
- sm: { "@media": `screen and (min-width: ${t.tokens.breakpoint.sm})` },
300
- md: { "@media": `screen and (min-width: ${t.tokens.breakpoint.md})` },
301
- lg: { "@media": `screen and (min-width: ${t.tokens.breakpoint.lg})` },
302
- xl: { "@media": `screen and (min-width: ${t.tokens.breakpoint.xl})` },
299
+ sm: { "@media": `screen and (min-width: ${o.tokens.breakpoint.sm})` },
300
+ md: { "@media": `screen and (min-width: ${o.tokens.breakpoint.md})` },
301
+ lg: { "@media": `screen and (min-width: ${o.tokens.breakpoint.lg})` },
302
+ xl: { "@media": `screen and (min-width: ${o.tokens.breakpoint.xl})` },
303
303
  "2xl": {
304
- "@media": `screen and (min-width: ${t.tokens.breakpoint["2xl"]})`
304
+ "@media": `screen and (min-width: ${o.tokens.breakpoint["2xl"]})`
305
305
  }
306
306
  },
307
307
  defaultCondition: "sm",
308
308
  responsiveArray: ["sm", "md", "lg", "xl", "2xl"]
309
- };
309
+ }, S = ({
310
+ currentValueOfCssVar: r = "0 0 0 0",
311
+ value: t,
312
+ direction: e
313
+ }) => {
314
+ const [p, h, n, l] = r.split(" "), a = {
315
+ top: p,
316
+ right: h,
317
+ bottom: n,
318
+ left: l
319
+ };
320
+ return e === "top" && (a.top = t), e === "right" && (a.right = t), e === "bottom" && (a.bottom = t), e === "left" && (a.left = t), e === "all" && (a.top = t, a.right = t, a.bottom = t, a.left = t), e === "x" && (a.left = t, a.right = t), e === "y" && (a.top = t, a.bottom = t), e === "side-top" && (a.top = t, a.right = t), e === "side-bottom" && (a.bottom = t, a.left = t), e === "side-left" && (a.top = t, a.left = t), e === "side-right" && (a.right = t, a.bottom = t), Object.values(a).join(" ");
321
+ }, j = (r) => {
322
+ const { cssVars: t } = r;
323
+ if (!(r != null && r.props) || Object.keys(r.props).length === 0)
324
+ return { styleProp: {}, otherProps: {} };
325
+ const { style: e = {}, ...p } = r.props, h = e, n = {};
326
+ return Object.keys(p).forEach((l) => {
327
+ const a = l, v = a, g = t == null ? void 0 : t[v];
328
+ if (!g) {
329
+ Object.assign(n, { [a]: p[a] });
330
+ return;
331
+ }
332
+ const s = p == null ? void 0 : p[a];
333
+ if (!s) {
334
+ Object.assign(h, { [a]: p[a] });
335
+ return;
336
+ }
337
+ const d = g.value.replace(
338
+ "VARIABLE",
339
+ s
340
+ ), i = g.cssVar;
341
+ if (g.direction) {
342
+ const b = h == null ? void 0 : h[i], u = S({
343
+ currentValueOfCssVar: b,
344
+ value: d,
345
+ direction: g.direction
346
+ });
347
+ Object.assign(h, { [i]: u });
348
+ return;
349
+ }
350
+ Object.assign(h, { [i]: d });
351
+ }), { styleProp: h, otherProps: n };
352
+ }, R = (r) => c.useMemo(() => j(r), [r]);
310
353
  export {
311
- O as RESPONSIVE_STYLE_PROPS,
312
- N as createStyleProps,
313
- _ as defineStyleProps,
314
- j as keyframes,
315
- L as style,
316
- P as tokens,
317
- S as useStyleProps,
318
- R as variant
354
+ M as RESPONSIVE_STYLE_PROPS,
355
+ q as createStyleProps,
356
+ G as defineStyleProps,
357
+ j as getStyleProp,
358
+ _ as globalStyle,
359
+ B as keyframes,
360
+ D as style,
361
+ $ as tokens,
362
+ R as useStyleEngine,
363
+ L as useStyleProps,
364
+ T as variant
319
365
  };
320
366
  //# 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"],"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"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BaA,IAAgB,CAG3B;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AACF,MAAyD;AAEvD,QAAMC,IAAgBC,EAAM,QAAe,MAAMH,GAAO,CAACA,CAAK,CAAC,GAIzDI,IAAgBD,EAAM,QAAQ,MAAM;AACxC,UAAME,IAAwBJ,EAAa,YAErCK,IAAa,CAAA,GACbC,IAAiB,CAAA;AAGvB,WAAKL,KAEL,OAAO,KAAKA,CAAa,EAAE,QAAQ,CAACM,MAAS;AAC3C,YAAMC,IAAMD;AACR,MAAAH,EAAsB,IAAII,CAAG,KAC/B,OAAO,OAAOH,GAAY;AAAA,QACxB,CAACG,CAAG,GAAGP,EAAcO,CAAG;AAAA,MAAA,CACzB,GAEEJ,EAAsB,IAAII,CAAG,KAChC,OAAO,OAAOF,GAAgB;AAAA,QAC5B,CAACE,CAAG,GAAGP,EAAcO,CAAG;AAAA,MAAA,CACzB;AAAA,IACH,CACD,GAEM,EAAE,YAAAH,GAAY,gBAAAC,OAhBM,EAAE,YAAAD,GAAY,gBAAAC,EAAe;AAAA,EAiBvD,GAAA,CAACL,GAAeD,KAAA,gBAAAA,EAAc,UAAU,CAAC,GAGtCS,IAAiBP,EAAM,QAAQ,MAC5BF,EAAaG,EAAc,UAAU,GAC3C,CAACA,EAAc,YAAYH,CAAY,CAAC;AAEpC,SAAA;AAAA,IACL,YAAYG,EAAc;AAAA,IAC1B,gBAAgBA,EAAc;AAAA,IAC9B,gBAAAM;AAAA,EAAA;AAEJ,GCxEaC,IAAyB;AAAA,EACpC,YAAY;AAAA,IACV,IAAI,EAAE,UAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,IAAI;AAAA,IACpE,IAAI,EAAE,UAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,IAAI;AAAA,IACpE,IAAI,EAAE,UAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,IAAI;AAAA,IACpE,IAAI,EAAE,UAAU,0BAA0B,EAAE,OAAO,WAAW,EAAE,IAAI;AAAA,IACpE,OAAO;AAAA,MACL,UAAU,0BAA0B,EAAE,OAAO,WAAW,KAAK,CAAC;AAAA,IAChE;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB,CAAC,MAAM,MAAM,MAAM,MAAM,KAAK;AACjD;"}
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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"}
package/dist/types/helpers/getStyleProp/getStyleProp.d.ts ADDED
@@ -0,0 +1,26 @@
1
+ type Direction = "x" | "y" | "top" | "bottom" | "left" | "right" | "all" | "side-top" | "side-bottom" | "side-left" | "side-right";
2
+ export type CssVarProp = {
3
+ cssVar: string;
4
+ value: string;
5
+ direction?: Direction;
6
+ };
7
+ export type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> = Record<keyof CssVars, CssVarProp>;
8
+ type CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;
9
+ type OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> = Omit<{
10
+ [key in keyof Props]: Props[key];
11
+ }, CssVarPropKey<CssVars>> | object;
12
+ type StyleProp<CssVars extends CssVarsPropObject<CssVars>> = {
13
+ [key in CssVars[keyof CssVars]["cssVar"]]: string;
14
+ } | object;
15
+ type GetStylePropParams<CssVars, Props> = {
16
+ props: Props & {
17
+ style?: Record<string, string>;
18
+ };
19
+ cssVars: CssVars;
20
+ };
21
+ export declare const getStyleProp: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: GetStylePropParams<CssVars, Props>) => {
22
+ styleProp: StyleProp<CssVars>;
23
+ otherProps: OtherProps<CssVars, Props>;
24
+ };
25
+ export {};
26
+ //# sourceMappingURL=getStyleProp.d.ts.map
package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map ADDED
@@ -0,0 +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;CA0DxC,CAAC"}
package/dist/types/helpers/getStyleProp/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { getStyleProp } from './getStyleProp';
2
+ export type { CssVarProp } from './getStyleProp';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/types/helpers/getStyleProp/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}
package/dist/types/hooks/useStyleEngine.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { CssVarsPropObject, getStyleProp } from '../helpers/getStyleProp';
2
+
3
+ export declare const useStyleEngine: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: Parameters<typeof getStyleProp<CssVars, Props>>[0]) => {
4
+ styleProp: object | { [key in CssVars[keyof CssVars]["cssVar"]]: string; };
5
+ otherProps: object | Omit<{ [key_1 in keyof Props]: Props[key_1]; }, keyof CssVars>;
6
+ };
7
+ //# sourceMappingURL=useStyleEngine.d.ts.map
package/dist/types/hooks/useStyleEngine.d.ts.map ADDED
@@ -0,0 +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"}
package/dist/types/hooks/useStyleProps.d.ts CHANGED
@@ -11,7 +11,7 @@ type UseStylePropsParams<Props, StylePropFnProperties extends StyleProperties[]>
11
11
  export declare const useStyleProps: <Props, StylePropFnProperties extends StyleProperties[]>({ props, stylePropsFn, }: UseStylePropsParams<Props, StylePropFnProperties>) => {
12
12
  styleProps: StylePropFnProperties extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
13
13
  [property: string]: {
14
- responsiveArray: string[];
14
+ responsiveArray: Array<string>;
15
15
  values: {
16
16
  [valueName: string]: {
17
17
  defaultClass: string | undefined;
@@ -30,7 +30,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
30
30
  };
31
31
  };
32
32
  } | {
33
- mappings: string[];
33
+ mappings: Array<string>;
34
34
  } | {
35
35
  values: {
36
36
  [valueName: string]: {
@@ -39,7 +39,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
39
39
  };
40
40
  };
41
41
  } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
42
- responsiveArray: string[];
42
+ responsiveArray: Array<string>;
43
43
  values: {
44
44
  [valueName: string]: {
45
45
  defaultClass: string | undefined;
@@ -58,9 +58,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
58
58
  };
59
59
  };
60
60
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
61
- mappings: string[];
61
+ mappings: Array<string>;
62
62
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
63
- responsiveArray: string[];
63
+ responsiveArray: Array<string>;
64
64
  values: {
65
65
  [valueName: string]: {
66
66
  defaultClass: string | undefined;
@@ -90,9 +90,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
90
90
  defaultClass: string;
91
91
  };
92
92
  };
93
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_1 extends {
93
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
94
94
  [property: string]: {
95
- responsiveArray: string[];
95
+ responsiveArray: Array<string>;
96
96
  values: {
97
97
  [valueName: string]: {
98
98
  defaultClass: string | undefined;
@@ -111,7 +111,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
111
111
  };
112
112
  };
113
113
  } | {
114
- mappings: string[];
114
+ mappings: Array<string>;
115
115
  } | {
116
116
  values: {
117
117
  [valueName: string]: {
@@ -119,8 +119,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
119
119
  };
120
120
  };
121
121
  };
122
- } ? { [Prop in keyof T_1]?: (L["styles"][Prop] extends {
123
- responsiveArray: string[];
122
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
123
+ responsiveArray: Array<string>;
124
124
  values: {
125
125
  [valueName: string]: {
126
126
  defaultClass: string | undefined;
@@ -139,9 +139,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
139
139
  };
140
140
  };
141
141
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
142
- mappings: string[];
142
+ mappings: Array<string>;
143
143
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
144
- responsiveArray: string[];
144
+ responsiveArray: Array<string>;
145
145
  values: {
146
146
  [valueName: string]: {
147
147
  defaultClass: string | undefined;
@@ -171,9 +171,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
171
171
  defaultClass: string;
172
172
  };
173
173
  };
174
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_2 extends {
174
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
175
175
  [property: string]: {
176
- responsiveArray: string[];
176
+ responsiveArray: Array<string>;
177
177
  values: {
178
178
  [valueName: string]: {
179
179
  defaultClass: string | undefined;
@@ -192,7 +192,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
192
192
  };
193
193
  };
194
194
  } | {
195
- mappings: string[];
195
+ mappings: Array<string>;
196
196
  } | {
197
197
  values: {
198
198
  [valueName: string]: {
@@ -200,8 +200,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
200
200
  };
201
201
  };
202
202
  };
203
- } ? { [Prop in keyof T_2]?: (L["styles"][Prop] extends {
204
- responsiveArray: string[];
203
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
204
+ responsiveArray: Array<string>;
205
205
  values: {
206
206
  [valueName: string]: {
207
207
  defaultClass: string | undefined;
@@ -220,9 +220,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
220
220
  };
221
221
  };
222
222
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
223
- mappings: string[];
223
+ mappings: Array<string>;
224
224
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
225
- responsiveArray: string[];
225
+ responsiveArray: Array<string>;
226
226
  values: {
227
227
  [valueName: string]: {
228
228
  defaultClass: string | undefined;
@@ -252,9 +252,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
252
252
  defaultClass: string;
253
253
  };
254
254
  };
255
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_3 extends {
255
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
256
256
  [property: string]: {
257
- responsiveArray: string[];
257
+ responsiveArray: Array<string>;
258
258
  values: {
259
259
  [valueName: string]: {
260
260
  defaultClass: string | undefined;
@@ -273,7 +273,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
273
273
  };
274
274
  };
275
275
  } | {
276
- mappings: string[];
276
+ mappings: Array<string>;
277
277
  } | {
278
278
  values: {
279
279
  [valueName: string]: {
@@ -281,8 +281,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
281
281
  };
282
282
  };
283
283
  };
284
- } ? { [Prop in keyof T_3]?: (L["styles"][Prop] extends {
285
- responsiveArray: string[];
284
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
285
+ responsiveArray: Array<string>;
286
286
  values: {
287
287
  [valueName: string]: {
288
288
  defaultClass: string | undefined;
@@ -301,9 +301,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
301
301
  };
302
302
  };
303
303
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
304
- mappings: string[];
304
+ mappings: Array<string>;
305
305
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
306
- responsiveArray: string[];
306
+ responsiveArray: Array<string>;
307
307
  values: {
308
308
  [valueName: string]: {
309
309
  defaultClass: string | undefined;
@@ -333,9 +333,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
333
333
  defaultClass: string;
334
334
  };
335
335
  };
336
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_4 extends {
336
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
337
337
  [property: string]: {
338
- responsiveArray: string[];
338
+ responsiveArray: Array<string>;
339
339
  values: {
340
340
  [valueName: string]: {
341
341
  defaultClass: string | undefined;
@@ -354,7 +354,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
354
354
  };
355
355
  };
356
356
  } | {
357
- mappings: string[];
357
+ mappings: Array<string>;
358
358
  } | {
359
359
  values: {
360
360
  [valueName: string]: {
@@ -362,8 +362,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
362
362
  };
363
363
  };
364
364
  };
365
- } ? { [Prop in keyof T_4]?: (L["styles"][Prop] extends {
366
- responsiveArray: string[];
365
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
366
+ responsiveArray: Array<string>;
367
367
  values: {
368
368
  [valueName: string]: {
369
369
  defaultClass: string | undefined;
@@ -382,9 +382,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
382
382
  };
383
383
  };
384
384
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
385
- mappings: string[];
385
+ mappings: Array<string>;
386
386
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
387
- responsiveArray: string[];
387
+ responsiveArray: Array<string>;
388
388
  values: {
389
389
  [valueName: string]: {
390
390
  defaultClass: string | undefined;
@@ -414,9 +414,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
414
414
  defaultClass: string;
415
415
  };
416
416
  };
417
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_5 extends {
417
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
418
418
  [property: string]: {
419
- responsiveArray: string[];
419
+ responsiveArray: Array<string>;
420
420
  values: {
421
421
  [valueName: string]: {
422
422
  defaultClass: string | undefined;
@@ -435,7 +435,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
435
435
  };
436
436
  };
437
437
  } | {
438
- mappings: string[];
438
+ mappings: Array<string>;
439
439
  } | {
440
440
  values: {
441
441
  [valueName: string]: {
@@ -443,8 +443,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
443
443
  };
444
444
  };
445
445
  };
446
- } ? { [Prop in keyof T_5]?: (L["styles"][Prop] extends {
447
- responsiveArray: string[];
446
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
447
+ responsiveArray: Array<string>;
448
448
  values: {
449
449
  [valueName: string]: {
450
450
  defaultClass: string | undefined;
@@ -463,9 +463,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
463
463
  };
464
464
  };
465
465
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
466
- mappings: string[];
466
+ mappings: Array<string>;
467
467
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
468
- responsiveArray: string[];
468
+ responsiveArray: Array<string>;
469
469
  values: {
470
470
  [valueName: string]: {
471
471
  defaultClass: string | undefined;
@@ -495,9 +495,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
495
495
  defaultClass: string;
496
496
  };
497
497
  };
498
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_6 extends {
498
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
499
499
  [property: string]: {
500
- responsiveArray: string[];
500
+ responsiveArray: Array<string>;
501
501
  values: {
502
502
  [valueName: string]: {
503
503
  defaultClass: string | undefined;
@@ -516,7 +516,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
516
516
  };
517
517
  };
518
518
  } | {
519
- mappings: string[];
519
+ mappings: Array<string>;
520
520
  } | {
521
521
  values: {
522
522
  [valueName: string]: {
@@ -524,8 +524,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
524
524
  };
525
525
  };
526
526
  };
527
- } ? { [Prop in keyof T_6]?: (L["styles"][Prop] extends {
528
- responsiveArray: string[];
527
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
528
+ responsiveArray: Array<string>;
529
529
  values: {
530
530
  [valueName: string]: {
531
531
  defaultClass: string | undefined;
@@ -544,9 +544,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
544
544
  };
545
545
  };
546
546
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
547
- mappings: string[];
547
+ mappings: Array<string>;
548
548
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
549
- responsiveArray: string[];
549
+ responsiveArray: Array<string>;
550
550
  values: {
551
551
  [valueName: string]: {
552
552
  defaultClass: string | undefined;
@@ -576,9 +576,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
576
576
  defaultClass: string;
577
577
  };
578
578
  };
579
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_7 extends {
579
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
580
580
  [property: string]: {
581
- responsiveArray: string[];
581
+ responsiveArray: Array<string>;
582
582
  values: {
583
583
  [valueName: string]: {
584
584
  defaultClass: string | undefined;
@@ -597,7 +597,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
597
597
  };
598
598
  };
599
599
  } | {
600
- mappings: string[];
600
+ mappings: Array<string>;
601
601
  } | {
602
602
  values: {
603
603
  [valueName: string]: {
@@ -605,8 +605,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
605
605
  };
606
606
  };
607
607
  };
608
- } ? { [Prop in keyof T_7]?: (L["styles"][Prop] extends {
609
- responsiveArray: string[];
608
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
609
+ responsiveArray: Array<string>;
610
610
  values: {
611
611
  [valueName: string]: {
612
612
  defaultClass: string | undefined;
@@ -625,9 +625,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
625
625
  };
626
626
  };
627
627
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
628
- mappings: string[];
628
+ mappings: Array<string>;
629
629
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
630
- responsiveArray: string[];
630
+ responsiveArray: Array<string>;
631
631
  values: {
632
632
  [valueName: string]: {
633
633
  defaultClass: string | undefined;
@@ -657,9 +657,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
657
657
  defaultClass: string;
658
658
  };
659
659
  };
660
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_8 extends {
660
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
661
661
  [property: string]: {
662
- responsiveArray: string[];
662
+ responsiveArray: Array<string>;
663
663
  values: {
664
664
  [valueName: string]: {
665
665
  defaultClass: string | undefined;
@@ -678,7 +678,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
678
678
  };
679
679
  };
680
680
  } | {
681
- mappings: string[];
681
+ mappings: Array<string>;
682
682
  } | {
683
683
  values: {
684
684
  [valueName: string]: {
@@ -686,8 +686,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
686
686
  };
687
687
  };
688
688
  };
689
- } ? { [Prop in keyof T_8]?: (L["styles"][Prop] extends {
690
- responsiveArray: string[];
689
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
690
+ responsiveArray: Array<string>;
691
691
  values: {
692
692
  [valueName: string]: {
693
693
  defaultClass: string | undefined;
@@ -706,9 +706,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
706
706
  };
707
707
  };
708
708
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
709
- mappings: string[];
709
+ mappings: Array<string>;
710
710
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
711
- responsiveArray: string[];
711
+ responsiveArray: Array<string>;
712
712
  values: {
713
713
  [valueName: string]: {
714
714
  defaultClass: string | undefined;
@@ -738,9 +738,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
738
738
  defaultClass: string;
739
739
  };
740
740
  };
741
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_9 extends {
741
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
742
742
  [property: string]: {
743
- responsiveArray: string[];
743
+ responsiveArray: Array<string>;
744
744
  values: {
745
745
  [valueName: string]: {
746
746
  defaultClass: string | undefined;
@@ -759,7 +759,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
759
759
  };
760
760
  };
761
761
  } | {
762
- mappings: string[];
762
+ mappings: Array<string>;
763
763
  } | {
764
764
  values: {
765
765
  [valueName: string]: {
@@ -767,8 +767,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
767
767
  };
768
768
  };
769
769
  };
770
- } ? { [Prop in keyof T_9]?: (L["styles"][Prop] extends {
771
- responsiveArray: string[];
770
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
771
+ responsiveArray: Array<string>;
772
772
  values: {
773
773
  [valueName: string]: {
774
774
  defaultClass: string | undefined;
@@ -787,9 +787,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
787
787
  };
788
788
  };
789
789
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
790
- mappings: string[];
790
+ mappings: Array<string>;
791
791
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
792
- responsiveArray: string[];
792
+ responsiveArray: Array<string>;
793
793
  values: {
794
794
  [valueName: string]: {
795
795
  defaultClass: string | undefined;
@@ -819,9 +819,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
819
819
  defaultClass: string;
820
820
  };
821
821
  };
822
- } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T_10 extends {
822
+ } ? keyof L["styles"][Prop]["values"] | undefined : never) | undefined; } : never : never) & (R extends [infer L, ...infer R] ? (L extends StyleProperties ? L["styles"] extends infer T extends {
823
823
  [property: string]: {
824
- responsiveArray: string[];
824
+ responsiveArray: Array<string>;
825
825
  values: {
826
826
  [valueName: string]: {
827
827
  defaultClass: string | undefined;
@@ -840,7 +840,7 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
840
840
  };
841
841
  };
842
842
  } | {
843
- mappings: string[];
843
+ mappings: Array<string>;
844
844
  } | {
845
845
  values: {
846
846
  [valueName: string]: {
@@ -848,8 +848,8 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
848
848
  };
849
849
  };
850
850
  };
851
- } ? { [Prop in keyof T_10]?: (L["styles"][Prop] extends {
852
- responsiveArray: string[];
851
+ } ? { [Prop in keyof T]?: (L["styles"][Prop] extends {
852
+ responsiveArray: Array<string>;
853
853
  values: {
854
854
  [valueName: string]: {
855
855
  defaultClass: string | undefined;
@@ -868,9 +868,9 @@ export declare const useStyleProps: <Props, StylePropFnProperties extends StyleP
868
868
  };
869
869
  };
870
870
  } ? (L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["defaultClass"] extends string ? keyof L["styles"][Prop]["values"] : never) | { [Condition_1 in keyof L["styles"][Prop]["values"][keyof L["styles"][Prop]["values"]]["conditions"]]?: keyof L["styles"][Prop]["values"] | undefined; } | undefined : L["styles"][Prop] extends {
871
- mappings: string[];
871
+ mappings: Array<string>;
872
872
  } ? L["styles"][L["styles"][Prop]["mappings"][number]] extends {
873
- responsiveArray: string[];
873
+ responsiveArray: Array<string>;
874
874
  values: {
875
875
  [valueName: string]: {
876
876
  defaultClass: string | undefined;
package/dist/types/hooks/useStyleProps.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useStyleProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGzF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,KAAK,WAAW,CAAC,qBAAqB,SAAS,eAAe,EAAE,IAAI,UAAU,CAC5E,OAAO,gBAAgB,CAAC,qBAAqB,CAAC,CAC/C,CAAC;AAEF,KAAK,UAAU,CAAC,qBAAqB,SAAS,eAAe,EAAE,IAAI,UAAU,CAC3E,WAAW,CAAC,qBAAqB,CAAC,CACnC,CAAC,CAAC,CAAC,CAAC;AAEL,KAAK,cAAc,CACjB,KAAK,EACL,qBAAqB,SAAS,eAAe,EAAE,IAC7C,IAAI,CAAC,KAAK,EAAE,MAAM,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC;AAEzD,KAAK,mBAAmB,CACtB,KAAK,EACL,qBAAqB,SAAS,eAAe,EAAE,IAC7C;IACF,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,qFAMvB,oBAAoB,KAAK,EAAE,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CnD,CAAC"}
1
+ {"version":3,"file":"useStyleProps.d.ts","sourceRoot":"","sources":["../../../src/hooks/useStyleProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGzF,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,KAAK,WAAW,CAAC,qBAAqB,SAAS,eAAe,EAAE,IAAI,UAAU,CAC5E,OAAO,gBAAgB,CAAC,qBAAqB,CAAC,CAC/C,CAAC;AAEF,KAAK,UAAU,CAAC,qBAAqB,SAAS,eAAe,EAAE,IAAI,UAAU,CAC3E,WAAW,CAAC,qBAAqB,CAAC,CACnC,CAAC,CAAC,CAAC,CAAC;AAEL,KAAK,cAAc,CACjB,KAAK,EACL,qBAAqB,SAAS,eAAe,EAAE,IAC7C,IAAI,CAAC,KAAK,EAAE,MAAM,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC;AAEzD,KAAK,mBAAmB,CACtB,KAAK,EACL,qBAAqB,SAAS,eAAe,EAAE,IAC7C;IACF,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,KAAK,EACL,qBAAqB,SAAS,eAAe,EAAE,4BAI9C,mBAAmB,CAAC,KAAK,EAAE,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CnD,CAAC"}
package/dist/types/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- export { style, keyframes } from '@vanilla-extract/css';
1
+ export { style, keyframes, globalStyle } from '@vanilla-extract/css';
2
2
  export { recipe as variant, type RecipeVariants as StyleVariant, } from '@vanilla-extract/recipes';
3
3
  export { defineProperties as defineStyleProps, createSprinkles as createStyleProps, } from '@vanilla-extract/sprinkles';
4
4
  export { default as tokens } from '@telegraph/tokens/css-variables-map';
5
5
  export { useStyleProps } from './hooks/useStyleProps';
6
6
  export { RESPONSIVE_STYLE_PROPS } from './constants/responsive-style-props';
7
+ export { getStyleProp, type CssVarProp } from './helpers/getStyleProp';
8
+ export { useStyleEngine } from './hooks/useStyleEngine';
7
9
  //# sourceMappingURL=index.d.ts.map
package/dist/types/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EACL,MAAM,IAAI,OAAO,EACjB,KAAK,cAAc,IAAI,YAAY,GACpC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,gBAAgB,IAAI,gBAAgB,EACpC,eAAe,IAAI,gBAAgB,GACpC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,MAAM,IAAI,OAAO,EACjB,KAAK,cAAc,IAAI,YAAY,GACpC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,gBAAgB,IAAI,gBAAgB,EACpC,eAAe,IAAI,gBAAgB,GACpC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAG5E,OAAO,EAAE,YAAY,EAAE,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/style-engine",
3
- "version": "0.0.4",
3
+ "version": "0.1.0",
4
4
  "description": "A wrappar around vanilla extract to style telegraph",
5
5
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
6
6
  "author": "@knocklabs",
@@ -46,8 +46,8 @@
46
46
  "eslint": "^8.56.0",
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.3.1",
49
- "typescript": "^5.3.3",
50
- "vite": "^5.3.5"
49
+ "typescript": "^5.5.4",
50
+ "vite": "^5.4.7"
51
51
  },
52
52
  "peerDependencies": {
53
53
  "react": "^18.2.0",