system-props - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0

dist/index.d.ts

@@ -6,2 +6,2 @@ export { createSystem } from './core/createSystem';
 export * from './shouldForwardProp';
-export { SystemProp, ColorProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridItemProps, GridContainerProps, GridProps, FlexItemProps, FlexContainerProps, FlexboxProps, AllSystemProps, PropConfigCollection, Theme, } from './types';
+export { SystemProp, ColorProps, SpaceProps, BorderProps, TypographyProps, LayoutProps, ShadowProps, PositionProps, GridItemProps, GridContainerProps, GridProps, FlexItemProps, FlexContainerProps, FlexboxProps, TransitionProps, AllSystemProps, PropConfigCollection, Theme, } from './types';

dist/props/index.d.ts

@@ -10,3 +10,4 @@ export * from './background';
 export * from './space';
+export * from './transition';
 export * from './typography';
 export { layout as styledSystemLayout } from './styled-system-layout';

dist/system-props.cjs.development.js

@@ -1193,2 +1193,48 @@ 'use strict';
 
+var parseTransition = function parseTransition(_ref) {
+  var path = _ref.path,
+      object = _ref.object,
+      get = _ref.get,
+      strict = _ref.strict;
+  var result = get(object, path);
+
+  if (result) {
+    return result;
+  } // '$tokenValue, $anotherTokenValue'
+  // '$tokenValue, property duration easing'
+
+
+  if (typeof path === 'string') {
+    var transitions = tokenizeValue(path);
+    result = transitions.map(function (transition) {
+      if (transition.length === 1) {
+        return get(object, transition[0], strict ? undefined : transition[0]);
+      }
+
+      return transition.join(' ');
+    }).join(', ');
+    return result;
+  }
+
+  return path;
+};
+
+var transition = {
+  transition: {
+    property: 'transition',
+    scale: 'transitions',
+    transform: parseTransition
+  },
+  transitionDuration: {
+    property: 'transitionDuration',
+    scale: 'transitionDurations'
+  },
+  transitionTimingFunction: {
+    property: 'transitionTimingFunction',
+    scale: 'transitionTimingFunctions'
+  },
+  transitionProperty: true,
+  transitionDelay: true
+};
+
 var typography = {
@@ -1303,3 +1349,4 @@ fontFamily: {
 exports.styledSystemLayout = layout$1;
+exports.transition = transition;
 exports.typography = typography;
 //# sourceMappingURL=system-props.cjs.development.js.map

dist/system-props.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var s=o[a];i=!i||"number"!=typeof s&&"string"!=typeof s?void 0:i[s]}return void 0===i?t:i},t=function(r,t,o){var i;return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i},o=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var s=r(t,o,i);return a.set(o,s),s}},i={all:o((function(r,t,o){var i=e(r,t);return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i})),prefix:o(t),noprefix:o(e)},a=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},s=function(r){var e=r.scale,t=r.transform,o=void 0===t?a:t,s=r.defaultScale,p=r.tokenPrefix,n=r.properties||[r.property];if(!p||!["all","noprefix","prefix"].includes(p))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+p);var d=i[p],c=function(r,e,t,i){var a,s={};return null===(a=o({path:r,object:e,props:t,strict:i.strict,get:d}))||n.forEach((function(r){r&&(s[r]=a)})),s};return Object.assign(c,{scale:e,defaultScale:s}),c},p=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),n=function(r){var e={};return Object.keys(r).sort((function(r,e){return p.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function d(e,t){return r({},e,t)}var c=function(r,e){var t=d(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=d(t,((i={})[o]=d(r[o],e[o]),i)))}return t},l={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},f=function(r){return"@media screen and (min-width: "+r+")"},u={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};u.bgImage=u.backgroundImage,u.bgSize=u.backgroundSize,u.bgPosition=u.backgroundPosition,u.bgRepeat=u.backgroundRepeat;var g,h="",b=0,m=[[]],y=function(r){if(v(),m=[[]],!r)return m;for(var e=r.length,t=0;t<e;t++){var o=r[t];switch(o){case" ":1===g?x():g&&(h+=o);break;case",":b?h+=o:(x(),m[m.length]=[],v());break;case'"':h+=o,b||g?1===b&&2===g&&(b=0,x()):(g=2,b=1);break;case"(":b||(g=3),b++,h+=o;break;case")":h+=o,b--,3!==g||b||x();break;case"[":b||(g=4),h+=o,b++;break;case"]":h+=o,--b||x();break;default:g||(g=1),h+=o}}return h&&x(),m};function v(){b=g=0,h=""}function x(){g&&m[m.length-1].push(h),v()}var R=function(r){var e,t,o,i,a=r.path,s=r.props,p=r.strict,n=r.get;if("string"!=typeof a)return a;var d=n((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var c=y(a)[0],l=c[0],f=c[1],u=c[2];return[n(null==s||null==(t=s.theme)?void 0:t.borderWidths,l,p?void 0:l),n(null==s||null==(o=s.theme)?void 0:o.borderStyles,f,p?void 0:f),n(null==s||null==(i=s.theme)?void 0:i.colors,u,p?void 0:u)].filter(Boolean).join(" ")},k={border:{property:"border",scale:"borders",transform:R},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:R},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:R},borderBottom:{property:"borderBottom",scale:"borders",transform:R},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:R},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:R},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:R},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};k.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},k.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},k.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},k.borderBottomColor={property:"borderBottomColor",scale:"colors"},k.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},k.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},k.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},k.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},k.borderLeftColor={property:"borderLeftColor",scale:"colors"},k.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},k.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},k.borderRightColor={property:"borderRightColor",scale:"colors"},k.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var S=k,w={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};w.bg=w.backgroundColor,w.textColor=w.color;var j={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},C={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W=r({},j,C),B={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},T={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0},L=r({},B,T),_={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},z=function(r){return"number"==typeof r&&!isNaN(r)},O=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!z(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),s=i(t,a,a);return z(s)?-1*s:"-"+s}return i(t,e,o?void 0:e)}var p=e<0,n=Math.abs(e),d=i(t,n,o?void 0:n);return z(d)?d*(p?-1:1):null!=d?p?"-"+d:d:void 0},P={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:O},right:{property:"right",scale:"space",transform:O},bottom:{property:"bottom",scale:"space",transform:O},left:{property:"left",scale:"space",transform:O}},A=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?y(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},I={boxShadow:{property:"boxShadow",scale:"shadows",transform:A},textShadow:{property:"textShadow",scale:"shadows",transform:A}},H=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var s=O({path:e,object:t,props:o,strict:i,get:a});if(s)return s}if("string"==typeof e){var p=e.split(" ");return 1===p.length?O({path:e,object:t,props:o,strict:i,get:a}):p.reduce((function(r,e){var s=O({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" ")}return e},E=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var s=a(r.object,t);if(s)return s}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,s=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):t},G={margin:{property:"margin",scale:"space",transform:H},marginTop:{property:"marginTop",scale:"space",transform:H},marginRight:{property:"marginRight",scale:"space",transform:H},marginBottom:{property:"marginBottom",scale:"space",transform:H},marginLeft:{property:"marginLeft",scale:"space",transform:H},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:H},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:H}};G.m=G.margin,G.mt=G.marginTop,G.mr=G.marginRight,G.mb=G.marginBottom,G.ml=G.marginLeft,G.mx=G.marginX,G.my=G.marginY;var X={padding:{property:"padding",scale:"space",transform:E},paddingTop:{property:"paddingTop",scale:"space",transform:E},paddingRight:{property:"paddingRight",scale:"space",transform:E},paddingBottom:{property:"paddingBottom",scale:"space",transform:E},paddingLeft:{property:"paddingLeft",scale:"space",transform:E},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:E},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:E}};X.p=X.padding,X.pt=X.paddingTop,X.pr=X.paddingRight,X.pb=X.paddingBottom,X.pl=X.paddingLeft,X.px=X.paddingX,X.py=X.paddingY;var Y=r({},X,G),F={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0},N={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},M=Object.keys(r({},l,u,S,w,L,W,_,P,I,Y,F)),V=new Set(M);exports.background=u,exports.border=S,exports.color=w,exports.createSystem=function(t){var o=void 0===t?{}:t,i=o.strict,a=void 0!==i&&i,p=o.pseudoSelectors,d=void 0===p?l:p,u=o.tokenPrefix,g=void 0===u?"prefix":u;return function(t){var o={};return Object.keys(t).forEach((function(e){var i=t[e];!0!==i?"function"!=typeof i&&(o[e]=s(r({},i,{tokenPrefix:g}))):o[e]=s({property:e,scale:e,tokenPrefix:g})})),function t(o,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var s={strict:a,key:"__systemprops__"},p=function(t){var a,p={},d=!1,l=!1;void 0!==(null==(a=t.theme)?void 0:a.systemPropsCacheKey)&&t.theme.systemPropsCacheKey!==s.key&&(s.key=t.theme.systemPropsCacheKey,l=!0);var u=function(i,a){var p,n,c=o[a],u=i[a],g=e(t.theme,c.scale);if("function"==typeof u&&(u=u(t.theme)),"object"==typeof u){var h;if(s.breakpoints=!l&&s.breakpoints||(null==t||null==(h=t.theme)?void 0:h.breakpoints),Array.isArray(u)){if(void 0===s.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return s.media=!l&&s.media||[null].concat((n=p=s.breakpoints,Array.isArray(p)||(n=Object.values(p)),n.map(f))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,s={},p=t.media;return e.propValue.slice(0,p.length).forEach((function(e,n){var d,c="function"==typeof e?e(a.theme):e,l=p[n],f=o(c,i,a,t);s=r({},s,l?((d={})[l]=r({},s[l],f),d):f)})),s}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}if(null!==u)return d=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,s=e.props,p=t.breakpoints,n={};for(var d in a){var c=p[d],l=a[d],f=o("function"==typeof l?l(s.theme):l,i,s,t);if(c){var u,g="@media screen and (min-width: "+c+")";n=r({},n,((u={})[g]=r({},n[g],f),u))}else n=r({},n,f)}return n}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}return c(u,g,t,s)};for(var g in t)if(i[g]){var h=i[g],b=t[g];for(var m in b)p[h]=r({},p[h],u(b,m)),d&&(p[i[g]]=n(p[i[g]]),d=!1)}else o[g]&&(p=c(p,u(t,g)));return d&&(p=n(p)),p};p.config=o,p.propNames=Object.keys(o),p.cache=s;var d=Object.keys(o).filter((function(r){return"config"!==r}));return d.length>1&&d.forEach((function(r){var e,i;Object.assign(p,((i={})[r]=t(((e={})[r]=o[r],e)),i))})),p}(o,d,a)}},exports.flexContainer=j,exports.flexItem=C,exports.flexbox=W,exports.grid=L,exports.gridContainer=T,exports.gridItem=B,exports.layout=_,exports.margin=G,exports.padding=X,exports.position=P,exports.propNames=M,exports.pseudoSelectors=l,exports.shadow=I,exports.shouldForwardProp=function(r){return!V.has(r)},exports.space=Y,exports.styledSystemLayout=N,exports.typography=F;
+"use strict";function r(){return(r=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o])}return r}).apply(this,arguments)}Object.defineProperty(exports,"__esModule",{value:!0});var e=function(r,e,t){if(!r)return t;for(var o="string"==typeof e?e.split("."):[e],i=r,a=0;a<o.length;a++){var s=o[a];i=!i||"number"!=typeof s&&"string"!=typeof s?void 0:i[s]}return void 0===i?t:i},t=function(r,t,o){var i;return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i},o=function(r){var e=new WeakMap;return function(t,o,i){if(void 0===t)return r(t,o,i);e.has(t)||e.set(t,new Map);var a=e.get(t);if(a.has(o))return a.get(o);var s=r(t,o,i);return a.set(o,s),s}},i={all:o((function(r,t,o){var i=e(r,t);return"string"==typeof t&&t.startsWith("$")&&(i=e(r,t.slice(1))),void 0===i?o:i})),prefix:o(t),noprefix:o(e)},a=function(r){var e=r.path;return(0,r.get)(r.object,e,!0===r.strict?void 0:e)},s=function(r){var e=r.scale,t=r.transform,o=void 0===t?a:t,s=r.defaultScale,n=r.tokenPrefix,p=r.properties||[r.property];if(!n||!["all","noprefix","prefix"].includes(n))throw new Error('Invalid tokenPrefix configuration option. Expected "all", "noprefix" or "prefix". Received: '+n);var d=i[n],c=function(r,e,t,i){var a,s={};return null===(a=o({path:r,object:e,props:t,strict:i.strict,get:d}))||p.forEach((function(r){r&&(s[r]=a)})),s};return Object.assign(c,{scale:e,defaultScale:s}),c},n=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"}),p=function(r){var e={};return Object.keys(r).sort((function(r,e){return n.compare(r,e)})).forEach((function(t){e[t]=r[t]})),e};function d(e,t){return r({},e,t)}var c=function(r,e){var t=d(r,e);for(var o in r){var i;r[o]&&"object"==typeof e[o]&&(t=d(t,((i={})[o]=d(r[o],e[o]),i)))}return t},l={_hover:"&:hover",_focus:"&:focus",_focusWithin:"&:focus-within",_focusVisible:"&:focus-visible",_active:"&:active",_visited:"&:visited",_selection:"&::selection",_before:"&::before",_after:"&::after",_placeholder:"&::placeholder",_hoverAndFocus:"&:hover, &:focus",_disabled:"[disabled], [disabled]:hover, [disabled]:focus, [aria-disabled], [aria-disabled]:hover, [aria-disabled]:focus",_readOnly:"[readOnly]",_first:"&:first-child",_last:"&:last-child",_notFirst:"&:not(:first-of-type)",_notLast:"&:not(:last-of-type)",_checked:"&[aria-checked=true], &[checked]",_odd:"&:nth-of-type(odd)",_even:"&:nth-of-type(even)"},f=function(r){return"@media screen and (min-width: "+r+")"},u={background:!0,backgroundImage:!0,backgroundSize:!0,backgroundPosition:!0,backgroundRepeat:!0};u.bgImage=u.backgroundImage,u.bgSize=u.backgroundSize,u.bgPosition=u.backgroundPosition,u.bgRepeat=u.backgroundRepeat;var g,h="",m=0,y=[[]],b=function(r){if(v(),y=[[]],!r)return y;for(var e=r.length,t=0;t<e;t++){var o=r[t];switch(o){case" ":1===g?x():g&&(h+=o);break;case",":m?h+=o:(x(),y[y.length]=[],v());break;case'"':h+=o,m||g?1===m&&2===g&&(m=0,x()):(g=2,m=1);break;case"(":m||(g=3),m++,h+=o;break;case")":h+=o,m--,3!==g||m||x();break;case"[":m||(g=4),h+=o,m++;break;case"]":h+=o,--m||x();break;default:g||(g=1),h+=o}}return h&&x(),y};function v(){m=g=0,h=""}function x(){g&&y[y.length-1].push(h),v()}var R=function(r){var e,t,o,i,a=r.path,s=r.props,n=r.strict,p=r.get;if("string"!=typeof a)return a;var d=p((null==s||null==(e=s.theme)?void 0:e.borders)||r.object,a);if(d)return d;var c=b(a)[0],l=c[0],f=c[1],u=c[2];return[p(null==s||null==(t=s.theme)?void 0:t.borderWidths,l,n?void 0:l),p(null==s||null==(o=s.theme)?void 0:o.borderStyles,f,n?void 0:f),p(null==s||null==(i=s.theme)?void 0:i.colors,u,n?void 0:u)].filter(Boolean).join(" ")},k={border:{property:"border",scale:"borders",transform:R},borderWidth:{property:"borderWidth",scale:"borderWidths"},borderStyle:{property:"borderStyle",scale:"borderStyles"},borderColor:{property:"borderColor",scale:"colors"},borderRadius:{property:"borderRadius",scale:"radii"},borderTop:{property:"borderTop",scale:"borders",transform:R},borderTopLeftRadius:{property:"borderTopLeftRadius",scale:"radii"},borderTopRightRadius:{property:"borderTopRightRadius",scale:"radii"},borderRight:{property:"borderRight",scale:"borders",transform:R},borderBottom:{property:"borderBottom",scale:"borders",transform:R},borderBottomLeftRadius:{property:"borderBottomLeftRadius",scale:"radii"},borderBottomRightRadius:{property:"borderBottomRightRadius",scale:"radii"},borderLeft:{property:"borderLeft",scale:"borders",transform:R},borderX:{properties:["borderLeft","borderRight"],scale:"borders",transform:R},borderY:{properties:["borderTop","borderBottom"],scale:"borders",transform:R},borderTopWidth:{property:"borderTopWidth",scale:"borderWidths"},borderTopColor:{property:"borderTopColor",scale:"colors"},borderTopStyle:{property:"borderTopStyle",scale:"borderStyles"}};k.borderTopLeftRadius={property:"borderTopLeftRadius",scale:"radii"},k.borderTopRightRadius={property:"borderTopRightRadius",scale:"radii"},k.borderBottomWidth={property:"borderBottomWidth",scale:"borderWidths"},k.borderBottomColor={property:"borderBottomColor",scale:"colors"},k.borderBottomStyle={property:"borderBottomStyle",scale:"borderStyles"},k.borderBottomLeftRadius={property:"borderBottomLeftRadius",scale:"radii"},k.borderBottomRightRadius={property:"borderBottomRightRadius",scale:"radii"},k.borderLeftWidth={property:"borderLeftWidth",scale:"borderWidths"},k.borderLeftColor={property:"borderLeftColor",scale:"colors"},k.borderLeftStyle={property:"borderLeftStyle",scale:"borderStyles"},k.borderRightWidth={property:"borderRightWidth",scale:"borderWidths"},k.borderRightColor={property:"borderRightColor",scale:"colors"},k.borderRightStyle={property:"borderRightStyle",scale:"borderStyles"};var S=k,w={color:{property:"color",scale:"colors"},backgroundColor:{property:"backgroundColor",scale:"colors"},fill:{property:"fill",scale:"colors"},stroke:{property:"stroke",scale:"colors"},opacity:!0};w.bg=w.backgroundColor,w.textColor=w.color;var j={alignItems:!0,alignContent:!0,justifyItems:!0,justifyContent:!0,flexWrap:!0,flexDirection:!0},C={flex:!0,flexGrow:!0,flexShrink:!0,flexBasis:!0,justifySelf:!0,alignSelf:!0,order:!0},W=r({},j,C),T={gridArea:!0,gridColumnStart:!0,gridColumnEnd:!0,gridRowStart:!0,gridRowEnd:!0,justifySelf:!0,alignSelf:!0,placeSelf:!0},B={gap:{property:"gap",scale:"space"},gridGap:{property:"gridGap",scale:"space"},gridColumnGap:{property:"gridColumnGap",scale:"space"},gridRowGap:{property:"gridRowGap",scale:"space"},gridColumn:!0,gridRow:!0,gridAutoFlow:!0,gridAutoColumns:!0,gridAutoRows:!0,gridTemplateColumns:!0,gridTemplateRows:!0,gridTemplateAreas:!0},L=r({},T,B),_={width:{property:"width",scale:"sizes"},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},z=function(r){return"number"==typeof r&&!isNaN(r)},P=function(r){var e=r.path,t=r.object,o=r.strict,i=r.get;if(!z(e)){if("string"==typeof e&&e.startsWith("-")){var a=e.slice(1),s=i(t,a,a);return z(s)?-1*s:"-"+s}return i(t,e,o?void 0:e)}var n=e<0,p=Math.abs(e),d=i(t,p,o?void 0:p);return z(d)?d*(n?-1:1):null!=d?n?"-"+d:d:void 0},O={position:!0,zIndex:{property:"zIndex",scale:"zIndices"},top:{property:"top",scale:"space",transform:P},right:{property:"right",scale:"space",transform:P},bottom:{property:"bottom",scale:"space",transform:P},left:{property:"left",scale:"space",transform:P}},A=function(r){var e=r.path,t=r.get,o=r.props;return t(r.object,e)||("string"==typeof e?b(e).map((function(r){return r.map((function(r){var e;return t(null==o||null==(e=o.theme)?void 0:e.colors,r,r)})).join(" ")})).join(", "):e)},I={boxShadow:{property:"boxShadow",scale:"shadows",transform:A},textShadow:{property:"textShadow",scale:"shadows",transform:A}},H=function(r){var e=r.path,t=r.object,o=r.props,i=r.strict,a=r.get;if("number"==typeof e){var s=P({path:e,object:t,props:o,strict:i,get:a});if(s)return s}if("string"==typeof e){var n=e.split(" ");return 1===n.length?P({path:e,object:t,props:o,strict:i,get:a}):n.reduce((function(r,e){var s=P({get:a,path:e,object:t,props:o,strict:i});return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" ")}return e},E=function(r){var e,t=r.path,o=r.props,i=r.strict,a=r.get;if("number"==typeof t){var s=a(r.object,t);if(s)return s}return"string"==typeof t?1===t.split(" ").length?a(null==o||null==(e=o.theme)?void 0:e.space,t,i?void 0:t):t.split(" ").reduce((function(r,e){var t,s=a(null==o||null==(t=o.theme)?void 0:t.space,e,i?void 0:e);return"number"==typeof s&&(s+="px"),[].concat(r,[s])}),[]).filter(Boolean).join(" "):t},F={margin:{property:"margin",scale:"space",transform:H},marginTop:{property:"marginTop",scale:"space",transform:H},marginRight:{property:"marginRight",scale:"space",transform:H},marginBottom:{property:"marginBottom",scale:"space",transform:H},marginLeft:{property:"marginLeft",scale:"space",transform:H},marginX:{properties:["marginLeft","marginRight"],scale:"space",transform:H},marginY:{properties:["marginTop","marginBottom"],scale:"space",transform:H}};F.m=F.margin,F.mt=F.marginTop,F.mr=F.marginRight,F.mb=F.marginBottom,F.ml=F.marginLeft,F.mx=F.marginX,F.my=F.marginY;var G={padding:{property:"padding",scale:"space",transform:E},paddingTop:{property:"paddingTop",scale:"space",transform:E},paddingRight:{property:"paddingRight",scale:"space",transform:E},paddingBottom:{property:"paddingBottom",scale:"space",transform:E},paddingLeft:{property:"paddingLeft",scale:"space",transform:E},paddingX:{properties:["paddingLeft","paddingRight"],scale:"space",transform:E},paddingY:{properties:["paddingTop","paddingBottom"],scale:"space",transform:E}};G.p=G.padding,G.pt=G.paddingTop,G.pr=G.paddingRight,G.pb=G.paddingBottom,G.pl=G.paddingLeft,G.px=G.paddingX,G.py=G.paddingY;var X=r({},G,F),Y={transition:{property:"transition",scale:"transitions",transform:function(r){var e=r.path,t=r.object,o=r.get,i=r.strict,a=o(t,e);return a||("string"==typeof e?a=b(e).map((function(r){return 1===r.length?o(t,r[0],i?void 0:r[0]):r.join(" ")})).join(", "):e)}},transitionDuration:{property:"transitionDuration",scale:"transitionDurations"},transitionTimingFunction:{property:"transitionTimingFunction",scale:"transitionTimingFunctions"},transitionProperty:!0,transitionDelay:!0},N={fontFamily:{property:"fontFamily",scale:"fonts"},fontSize:{property:"fontSize",scale:"fontSizes"},fontWeight:{property:"fontWeight",scale:"fontWeights"},lineHeight:{property:"lineHeight",scale:"lineHeights"},letterSpacing:{property:"letterSpacing",scale:"letterSpacings"},textAlign:!0,fontStyle:!0},D={width:{property:"width",scale:"sizes",transform:function(r){var e,t=r.path,o=r.object,i=r.get,a=t;return"number"!=typeof(e=t)||isNaN(e)||(a=t>1?t:100*t+"%"),i(o,t,a)}},height:{property:"height",scale:"sizes"},minWidth:{property:"minWidth",scale:"sizes"},minHeight:{property:"minHeight",scale:"sizes"},maxWidth:{property:"maxWidth",scale:"sizes"},maxHeight:{property:"maxHeight",scale:"sizes"},size:{properties:["width","height"],scale:"sizes"},overflow:!0,overflowX:!0,overflowY:!0,display:!0,verticalAlign:!0},M=Object.keys(r({},l,u,S,w,L,W,_,O,I,X,N)),V=new Set(M);exports.background=u,exports.border=S,exports.color=w,exports.createSystem=function(t){var o=void 0===t?{}:t,i=o.strict,a=void 0!==i&&i,n=o.pseudoSelectors,d=void 0===n?l:n,u=o.tokenPrefix,g=void 0===u?"prefix":u;return function(t){var o={};return Object.keys(t).forEach((function(e){var i=t[e];!0!==i?"function"!=typeof i&&(o[e]=s(r({},i,{tokenPrefix:g}))):o[e]=s({property:e,scale:e,tokenPrefix:g})})),function t(o,i,a){void 0===i&&(i={}),void 0===a&&(a=!1);var s={strict:a,key:"__systemprops__"},n=function(t){var a,n={},d=!1,l=!1;void 0!==(null==(a=t.theme)?void 0:a.systemPropsCacheKey)&&t.theme.systemPropsCacheKey!==s.key&&(s.key=t.theme.systemPropsCacheKey,l=!0);var u=function(i,a){var n,p,c=o[a],u=i[a],g=e(t.theme,c.scale);if("function"==typeof u&&(u=u(t.theme)),"object"==typeof u){var h;if(s.breakpoints=!l&&s.breakpoints||(null==t||null==(h=t.theme)?void 0:h.breakpoints),Array.isArray(u)){if(void 0===s.breakpoints)throw new Error("The system props parser could not find a `breakpoints` property in the theme object, which is required for responsive styles to work. Make sure that the theme object has a breakpoints property.");return s.media=!l&&s.media||[null].concat((p=n=s.breakpoints,Array.isArray(n)||(p=Object.values(n)),p.map(f))),function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.props,s={},n=t.media;return e.propValue.slice(0,n.length).forEach((function(e,p){var d,c="function"==typeof e?e(a.theme):e,l=n[p],f=o(c,i,a,t);s=r({},s,l?((d={})[l]=r({},s[l],f),d):f)})),s}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}if(null!==u)return d=!0,function(e){var t=e.cache,o=e.systemConfig,i=e.scale,a=e.propValue,s=e.props,n=t.breakpoints,p={};for(var d in a){var c=n[d],l=a[d],f=o("function"==typeof l?l(s.theme):l,i,s,t);if(c){var u,g="@media screen and (min-width: "+c+")";p=r({},p,((u={})[g]=r({},p[g],f),u))}else p=r({},p,f)}return p}({cache:s,systemConfig:c,scale:g,propValue:u,props:i})}return c(u,g,t,s)};for(var g in t)if(i[g]){var h=i[g],m=t[g];for(var y in m)n[h]=r({},n[h],u(m,y)),d&&(n[i[g]]=p(n[i[g]]),d=!1)}else o[g]&&(n=c(n,u(t,g)));return d&&(n=p(n)),n};n.config=o,n.propNames=Object.keys(o),n.cache=s;var d=Object.keys(o).filter((function(r){return"config"!==r}));return d.length>1&&d.forEach((function(r){var e,i;Object.assign(n,((i={})[r]=t(((e={})[r]=o[r],e)),i))})),n}(o,d,a)}},exports.flexContainer=j,exports.flexItem=C,exports.flexbox=W,exports.grid=L,exports.gridContainer=B,exports.gridItem=T,exports.layout=_,exports.margin=F,exports.padding=G,exports.position=O,exports.propNames=M,exports.pseudoSelectors=l,exports.shadow=I,exports.shouldForwardProp=function(r){return!V.has(r)},exports.space=X,exports.styledSystemLayout=D,exports.transition=Y,exports.typography=N;
 //# sourceMappingURL=system-props.cjs.production.min.js.map

dist/system-props.esm.js

@@ -1189,2 +1189,48 @@ function _extends() {
 
+var parseTransition = function parseTransition(_ref) {
+  var path = _ref.path,
+      object = _ref.object,
+      get = _ref.get,
+      strict = _ref.strict;
+  var result = get(object, path);
+
+  if (result) {
+    return result;
+  } // '$tokenValue, $anotherTokenValue'
+  // '$tokenValue, property duration easing'
+
+
+  if (typeof path === 'string') {
+    var transitions = tokenizeValue(path);
+    result = transitions.map(function (transition) {
+      if (transition.length === 1) {
+        return get(object, transition[0], strict ? undefined : transition[0]);
+      }
+
+      return transition.join(' ');
+    }).join(', ');
+    return result;
+  }
+
+  return path;
+};
+
+var transition = {
+  transition: {
+    property: 'transition',
+    scale: 'transitions',
+    transform: parseTransition
+  },
+  transitionDuration: {
+    property: 'transitionDuration',
+    scale: 'transitionDurations'
+  },
+  transitionTimingFunction: {
+    property: 'transitionTimingFunction',
+    scale: 'transitionTimingFunctions'
+  },
+  transitionProperty: true,
+  transitionDelay: true
+};
+
 var typography = {
@@ -1279,3 +1325,3 @@ fontFamily: {
 
-export { background, border, color, createSystem, flexContainer, flexItem, flexbox, grid, gridContainer, gridItem, layout, margin, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, typography };
+export { background, border, color, createSystem, flexContainer, flexItem, flexbox, grid, gridContainer, gridItem, layout, margin, padding, position, propNames, pseudoSelectors, shadow, shouldForwardProp, space, layout$1 as styledSystemLayout, transition, typography };
 //# sourceMappingURL=system-props.esm.js.map

dist/types.d.ts

 import { Property as P, Properties as CSSProperties, Color, Paint } from './css-types';
-declare type TokenScales = 'colors' | 'sizes' | 'space' | 'borders' | 'borderStyles' | 'borderWidths' | 'letterSpacings' | 'zIndices' | 'shadows' | 'fontWeights' | 'fontSizes' | 'lineHeights' | 'fonts' | 'radii' | 'breakpoints';
+declare type TokenScales = 'colors' | 'sizes' | 'space' | 'borders' | 'borderStyles' | 'borderWidths' | 'letterSpacings' | 'zIndices' | 'shadows' | 'fontWeights' | 'fontSizes' | 'lineHeights' | 'fonts' | 'radii' | 'transitions' | 'transitionDurations' | 'transitionTimingFunctions' | 'breakpoints';
 export interface Theme {
@@ -216,5 +216,12 @@ [key: string]: any;
 }
-export interface AllSystemProps<PrefixOption extends PrefixOptions = PrefixDefault> extends ColorProps<PrefixOption>, SpaceProps<PrefixOption>, BorderProps<PrefixOption>, TypographyProps<PrefixOption>, LayoutProps<PrefixOption>, ShadowProps<PrefixOption>, PositionProps<PrefixOption>, GridProps<PrefixOption>, FlexboxProps {
+export interface TransitionProps<PrefixOption extends PrefixOptions = PrefixDefault> {
+    transition?: MaybeToken<P.Transition, PrefixOption, 'transitions'>;
+    transitionDuration?: MaybeToken<P.TransitionDuration, PrefixOption, 'transitionDurations'>;
+    transitionTimingFunction?: MaybeToken<P.TransitionTimingFunction, PrefixOption, 'transitionTimingFunctions'>;
+    transitionProperty?: SystemProp<P.TransitionProperty>;
+    transitionDelay?: SystemProp<P.TransitionDelay>;
 }
+export interface AllSystemProps<PrefixOption extends PrefixOptions = PrefixDefault> extends ColorProps<PrefixOption>, SpaceProps<PrefixOption>, BorderProps<PrefixOption>, TypographyProps<PrefixOption>, LayoutProps<PrefixOption>, ShadowProps<PrefixOption>, PositionProps<PrefixOption>, GridProps<PrefixOption>, FlexboxProps, TransitionProps<PrefixOption> {
+}
 export declare type SystemPropsTheme = Partial<Record<TokenScales, Record<string, string | number>>>;
 export {};

package.json

 {
   "name": "system-props",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Inspired by styled-system, a responsive, theme-based style props for building design systems with React.",
@@ -5,0 +5,0 @@ "author": "Rogin Farrer",

src/__tests__/exports.test.ts

@@ -26,2 +26,3 @@ import * as AllExports from '..';
       "styledSystemLayout",
+      "transition",
       "typography",
@@ -28,0 +29,0 @@ ]

src/index.ts

@@ -22,2 +22,3 @@ export { createSystem } from './core/createSystem';
   FlexboxProps,
+  TransitionProps,
   AllSystemProps,
@@ -24,0 +25,0 @@ PropConfigCollection,

src/props/index.ts

@@ -10,3 +10,4 @@ export * from './background';
 export * from './space';
+export * from './transition';
 export * from './typography';
 export { layout as styledSystemLayout } from './styled-system-layout';

src/types.ts

@@ -23,2 +23,5 @@ import {
   | 'radii'
+  | 'transitions'
+  | 'transitionDurations'
+  | 'transitionTimingFunctions'
   | 'breakpoints';
@@ -359,2 +362,20 @@
 
+export interface TransitionProps<
+  PrefixOption extends PrefixOptions = PrefixDefault
+> {
+  transition?: MaybeToken<P.Transition, PrefixOption, 'transitions'>;
+  transitionDuration?: MaybeToken<
+    P.TransitionDuration,
+    PrefixOption,
+    'transitionDurations'
+  >;
+  transitionTimingFunction?: MaybeToken<
+    P.TransitionTimingFunction,
+    PrefixOption,
+    'transitionTimingFunctions'
+  >;
+  transitionProperty?: SystemProp<P.TransitionProperty>;
+  transitionDelay?: SystemProp<P.TransitionDelay>;
+}
+
 export interface AllSystemProps<
@@ -370,3 +391,4 @@ PrefixOption extends PrefixOptions = PrefixDefault
     GridProps<PrefixOption>,
-    FlexboxProps {}
+    FlexboxProps,
+    TransitionProps<PrefixOption> {}
 
@@ -373,0 +395,0 @@ export type SystemPropsTheme = Partial<

No alert changes

Improved metrics

Total package byte prevSize

385076

increased by3.59%

Number of package files

91

increased by3.41%

Lines of code

6132

increased by3.51%

No dependency changes