@telegraph/style-engine 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +8 -7
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @telegraph/style-engine
|
|
2
2
|
|
|
3
|
+
## 0.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#216](https://github.com/knocklabs/telegraph/pull/216) [`e30e06a`](https://github.com/knocklabs/telegraph/commit/e30e06a7e6bafc6b7aefcf26228e432f2e3906c9) Thanks [@kylemcd](https://github.com/kylemcd)! - button loading state
|
|
8
|
+
|
|
3
9
|
## 0.0.3
|
|
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
|
|
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;
|
|
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"
|
|
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"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { recipe as
|
|
3
|
-
import { createSprinkles as
|
|
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
4
|
import v from "react";
|
|
5
5
|
import t from "@telegraph/tokens";
|
|
6
6
|
const o = {
|
|
@@ -309,11 +309,12 @@ const o = {
|
|
|
309
309
|
};
|
|
310
310
|
export {
|
|
311
311
|
O as RESPONSIVE_STYLE_PROPS,
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
j as
|
|
312
|
+
N as createStyleProps,
|
|
313
|
+
_ as defineStyleProps,
|
|
314
|
+
j as keyframes,
|
|
315
|
+
L as style,
|
|
315
316
|
P as tokens,
|
|
316
317
|
S as useStyleProps,
|
|
317
|
-
|
|
318
|
+
R as variant
|
|
318
319
|
};
|
|
319
320
|
//# sourceMappingURL=index.mjs.map
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { style } from '@vanilla-extract/css';
|
|
1
|
+
export { style, keyframes } 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';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/style-engine",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
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",
|
|
@@ -45,12 +45,12 @@
|
|
|
45
45
|
"@types/react": "^18.2.48",
|
|
46
46
|
"eslint": "^8.56.0",
|
|
47
47
|
"react": "^18.2.0",
|
|
48
|
-
"react-dom": "^18.
|
|
48
|
+
"react-dom": "^18.3.1",
|
|
49
49
|
"typescript": "^5.3.3",
|
|
50
|
-
"vite": "^5.3.
|
|
50
|
+
"vite": "^5.3.5"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"react": "^18.2.0",
|
|
54
|
-
"react-dom": "^18.
|
|
54
|
+
"react-dom": "^18.3.1"
|
|
55
55
|
}
|
|
56
56
|
}
|