Socket
Socket
Sign inDemoInstall

@chakra-ui/styled-system

Package Overview
Dependencies
Maintainers
4
Versions
474
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@chakra-ui/styled-system - npm Package Compare versions

Comparing version 1.7.1 to 1.8.0

dist/cjs/create-transform.js
dist/cjs/create-transform.js.map
dist/cjs/css-var.js
dist/cjs/css-var.js.map
dist/cjs/prop-config.js
dist/cjs/prop-config.js.map
dist/cjs/pseudos.js
dist/cjs/pseudos.js.map
dist/esm/create-transform.js
dist/esm/create-transform.js.map
dist/esm/css-var.js
dist/esm/css-var.js.map
dist/esm/prop-config.js
dist/esm/prop-config.js.map
dist/esm/pseudos.js
dist/esm/pseudos.js.map
dist/types/create-transform.d.ts
dist/types/css-var.d.ts
dist/types/prop-config.d.ts
dist/types/pseudos.d.ts

16

CHANGELOG.md
# Change Log
## 1.8.0
### Minor Changes
- [`53408372e`](https://github.com/chakra-ui/chakra-ui/commit/53408372ef6926840815a03f2ac5269e3a4757f2)
[#3463](https://github.com/chakra-ui/chakra-ui/pull/3463) Thanks
[@segunadebayo](https://github.com/segunadebayo)! - - Add support for CSS
Variables to the core of Chakra
- Improve style computation performance by 2.5x
### Patch Changes
- Updated dependencies
[[`87cc23e14`](https://github.com/chakra-ui/chakra-ui/commit/87cc23e14814e02cbbfc9737c2356cef682ddd5d)]:
- @chakra-ui/utils@1.3.0
## 1.7.1

@@ -4,0 +20,0 @@

19

dist/cjs/config/background.js
"use strict";
exports.__esModule = true;
exports.backgroundParser = exports.background = void 0;
exports.background = void 0;
var _core = require("../core");
var _utils = require("../utils");

@@ -12,3 +10,3 @@

function transformBgClip(value) {
function bgClipTransform(value) {
return value === "text" ? {

@@ -22,3 +20,3 @@ color: "transparent",

var config = {
var background = {
bg: _utils.t.colors("background"),

@@ -35,4 +33,3 @@ bgColor: _utils.t.colors("backgroundColor"),

backgroundClip: {
property: "&",
transform: transformBgClip
transform: bgClipTransform
},

@@ -49,13 +46,9 @@ bgImage: _utils.t.prop("backgroundImage"),

property: "backgroundImage",
transform: _parseGradient.transformGradient
transform: _parseGradient.gradientTransform
},
bgClip: {
property: "&",
transform: transformBgClip
transform: bgClipTransform
}
};
var background = (0, _core.system)(config);
exports.background = background;
var backgroundParser = (0, _core.createParser)(config);
exports.backgroundParser = backgroundParser;
//# sourceMappingURL=background.js.map

72

dist/cjs/config/border.js
"use strict";
exports.__esModule = true;
exports.borderParser = exports.border = void 0;
exports.border = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var border = {
border: _utils.t.borders("border"),

@@ -106,32 +104,33 @@ borderWidth: _utils.t.borderWidths("borderWidth"),

};
Object.assign(config, {
rounded: config.borderRadius,
roundedTop: config.borderTopRadius,
roundedTopLeft: config.borderTopLeftRadius,
roundedTopRight: config.borderTopRightRadius,
roundedTopStart: config.borderStartStartRadius,
roundedTopEnd: config.borderStartEndRadius,
roundedBottom: config.borderBottomRadius,
roundedBottomLeft: config.borderBottomLeftRadius,
roundedBottomRight: config.borderBottomRightRadius,
roundedBottomStart: config.borderEndStartRadius,
roundedBottomEnd: config.borderEndEndRadius,
roundedLeft: config.borderLeftRadius,
roundedRight: config.borderRightRadius,
roundedStart: config.borderInlineStartRadius,
roundedEnd: config.borderInlineEndRadius,
borderStart: config.borderInlineStart,
borderEnd: config.borderInlineEnd,
borderTopStartRadius: config.borderStartStartRadius,
borderTopEndRadius: config.borderStartEndRadius,
borderBottomStartRadius: config.borderEndStartRadius,
borderBottomEndRadius: config.borderEndEndRadius,
borderStartRadius: config.borderInlineStartRadius,
borderEndRadius: config.borderInlineEndRadius,
borderStartWidth: config.borderInlineStartWidth,
borderEndWidth: config.borderInlineEndWidth,
borderStartColor: config.borderInlineStartColor,
borderEndColor: config.borderInlineEndColor,
borderStartStyle: config.borderInlineStartStyle,
borderEndStyle: config.borderInlineEndStyle
exports.border = border;
Object.assign(border, {
rounded: border.borderRadius,
roundedTop: border.borderTopRadius,
roundedTopLeft: border.borderTopLeftRadius,
roundedTopRight: border.borderTopRightRadius,
roundedTopStart: border.borderStartStartRadius,
roundedTopEnd: border.borderStartEndRadius,
roundedBottom: border.borderBottomRadius,
roundedBottomLeft: border.borderBottomLeftRadius,
roundedBottomRight: border.borderBottomRightRadius,
roundedBottomStart: border.borderEndStartRadius,
roundedBottomEnd: border.borderEndEndRadius,
roundedLeft: border.borderLeftRadius,
roundedRight: border.borderRightRadius,
roundedStart: border.borderInlineStartRadius,
roundedEnd: border.borderInlineEndRadius,
borderStart: border.borderInlineStart,
borderEnd: border.borderInlineEnd,
borderTopStartRadius: border.borderStartStartRadius,
borderTopEndRadius: border.borderStartEndRadius,
borderBottomStartRadius: border.borderEndStartRadius,
borderBottomEndRadius: border.borderEndEndRadius,
borderStartRadius: border.borderInlineStartRadius,
borderEndRadius: border.borderInlineEndRadius,
borderStartWidth: border.borderInlineStartWidth,
borderEndWidth: border.borderInlineEndWidth,
borderStartColor: border.borderInlineStartColor,
borderEndColor: border.borderInlineEndColor,
borderStartStyle: border.borderInlineStartStyle,
borderEndStyle: border.borderInlineEndStyle
});

@@ -141,7 +140,2 @@ /**

*/
var border = (0, _core.system)(config);
exports.border = border;
var borderParser = (0, _core.createParser)(config);
exports.borderParser = borderParser;
//# sourceMappingURL=border.js.map

9

dist/cjs/config/color.js
"use strict";
exports.__esModule = true;
exports.colorParser = exports.color = void 0;
exports.color = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var color = {
color: _utils.t.colors("color"),

@@ -17,6 +15,3 @@ textColor: _utils.t.colors("color"),

};
var color = (0, _core.system)(config);
exports.color = color;
var colorParser = (0, _core.createParser)(config);
exports.colorParser = colorParser;
//# sourceMappingURL=color.js.map

67

dist/cjs/config/flexbox.js
"use strict";
exports.__esModule = true;
exports.flexboxParser = exports.flexbox = void 0;
exports.flexbox = void 0;
var _core = require("../core");
var _createTransform = require("../create-transform");
var _utils = require("../utils");
var config = {
var _static, _static2;
var reverse = {
"row-reverse": {
space: "--chakra-space-x-reverse",
divide: "--chakra-divide-x-reverse"
},
"column-reverse": {
space: "--chakra-space-y-reverse",
divide: "--chakra-divide-y-reverse"
}
};
var owlSelector = "& > :not(style) ~ :not(style)";
var flexbox = {
alignItems: true,

@@ -16,3 +29,46 @@ alignContent: true,

flexWrap: true,
flexDirection: true,
flexDirection: {
transform: function transform(value) {
var _reverse$value;
var _ref = (_reverse$value = reverse[value]) != null ? _reverse$value : {},
space = _ref.space,
divide = _ref.divide;
var result = {
flexDirection: value
};
if (space) result[space] = 1;
if (divide) result[divide] = 1;
return result;
}
},
spaceX: {
"static": (_static = {}, _static[owlSelector] = {
marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
}, _static),
transform: (0, _createTransform.createTransform)({
scale: "space",
transform: function transform(value) {
return value !== null ? {
"--chakra-space-x": value
} : null;
}
})
},
spaceY: {
"static": (_static2 = {}, _static2[owlSelector] = {
marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
}, _static2),
transform: (0, _createTransform.createTransform)({
scale: "space",
transform: function transform(value) {
return value != null ? {
"--chakra-space-y": value
} : null;
}
})
},
flex: true,

@@ -31,6 +87,3 @@ flexFlow: true,

};
var flexbox = (0, _core.system)(config);
exports.flexbox = flexbox;
var flexboxParser = (0, _core.createParser)(config);
exports.flexboxParser = flexboxParser;
//# sourceMappingURL=flexbox.js.map

9

dist/cjs/config/grid.js
"use strict";
exports.__esModule = true;
exports.gridParser = exports.grid = void 0;
exports.grid = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var grid = {
gridGap: _utils.t.space("gridGap"),

@@ -29,6 +27,3 @@ gridColumnGap: _utils.t.space("gridColumnGap"),

};
var grid = (0, _core.system)(config);
exports.grid = grid;
var gridParser = (0, _core.createParser)(config);
exports.gridParser = gridParser;
//# sourceMappingURL=grid.js.map

26

dist/cjs/config/layout.js
"use strict";
exports.__esModule = true;
exports.layoutParser = exports.layout = void 0;
exports.layout = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var layout = {
width: _utils.t.sizesT("width"),

@@ -32,9 +30,10 @@ inlineSize: _utils.t.sizesT("inlineSize"),

};
Object.assign(config, {
w: config.width,
h: config.height,
minW: config.minWidth,
maxW: config.maxWidth,
minH: config.minHeight,
maxH: config.maxHeight
exports.layout = layout;
Object.assign(layout, {
w: layout.width,
h: layout.height,
minW: layout.minWidth,
maxW: layout.maxWidth,
minH: layout.minHeight,
maxH: layout.maxHeight
});

@@ -44,7 +43,2 @@ /**

*/
var layout = (0, _core.system)(config);
exports.layout = layout;
var layoutParser = (0, _core.createParser)(config);
exports.layoutParser = layoutParser;
//# sourceMappingURL=layout.js.map

9

dist/cjs/config/list.js
"use strict";
exports.__esModule = true;
exports.listParser = exports.list = void 0;
exports.list = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var list = {
listStyleType: true,

@@ -17,6 +15,3 @@ listStylePosition: true,

};
var list = (0, _core.system)(config);
exports.list = list;
var listParser = (0, _core.createParser)(config);
exports.listParser = listParser;
//# sourceMappingURL=list.js.map

29

dist/cjs/config/others.js
"use strict";
exports.__esModule = true;
exports.othersParser = exports.others = void 0;
exports.others = void 0;
var _utils = require("@chakra-ui/utils");
var _core = require("../core");
var _directionality = require("../utils/directionality");
var floatTransform = function floatTransform(value, _, props) {
if (props === void 0) {
props = {};
}
var floatTransform = function floatTransform(value, theme) {
var map = {

@@ -21,3 +13,3 @@ left: "right",

};
return (0, _directionality.getIsRtl)(props) ? map[value] : value;
return theme.direction === "rtl" ? map[value] : value;
};

@@ -46,3 +38,3 @@

};
var config = {
var others = {
animation: true,

@@ -65,3 +57,2 @@ appearance: true,

srOnly: {
property: "&",
transform: function transform(value) {

@@ -75,4 +66,3 @@ if (value === true) return srOnly;

processResult: true,
property: "&",
transform: function transform(value, _, theme) {
transform: function transform(value, theme) {
return (0, _utils.memoizedGet)(theme, "layerStyles." + value, {});

@@ -83,4 +73,3 @@ }

processResult: true,
property: "&",
transform: function transform(value, _, theme) {
transform: function transform(value, theme) {
return (0, _utils.memoizedGet)(theme, "textStyles." + value, {});

@@ -91,4 +80,3 @@ }

processResult: true,
property: "&",
transform: function transform(value, _, theme) {
transform: function transform(value, theme) {
return (0, _utils.memoizedGet)(theme, value, {});

@@ -98,6 +86,3 @@ }

};
var others = (0, _core.system)(config);
exports.others = others;
var othersParser = (0, _core.createParser)(config);
exports.othersParser = othersParser;
//# sourceMappingURL=others.js.map

16

dist/cjs/config/outline.js
"use strict";
exports.__esModule = true;
exports.outlineParser = exports.outline = void 0;
exports.outline = void 0;
var _core = require("../core");
var _utils = require("../utils");

@@ -13,11 +11,13 @@

*/
var config = {
var outline = {
outline: true,
outlineOffset: true,
outlineColor: _utils.t.colors("outlineColor")
outlineColor: _utils.t.colors("outlineColor"),
ringColor: _utils.t.prop("--chakra-ring-color", "colors"),
ringOffsetWidth: _utils.t.prop("--chakra-ring-offset"),
ringOffsetColor: _utils.t.prop("--chakra-ring-offset-color", "colors"),
ringWidth: _utils.t.prop("--chakra-ring-offset"),
ringInset: _utils.t.prop("--chakra-ring-inset")
};
var outline = (0, _core.system)(config);
exports.outline = outline;
var outlineParser = (0, _core.createParser)(config);
exports.outlineParser = outlineParser;
//# sourceMappingURL=outline.js.map

29

dist/cjs/config/position.js
"use strict";
exports.__esModule = true;
exports.positionParser = exports.position = void 0;
exports.position = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var position = {
position: true,
pos: _utils.t.prop("position"),
zIndex: {
property: "zIndex",
scale: "zIndices"
},
zIndex: _utils.t.prop("zIndex", "zIndices"),
inset: _utils.t.spaceT(["top", "right", "bottom", "left"]),

@@ -32,4 +27,3 @@ insetX: _utils.t.spaceT(["left", "right"]),

rtl: "right"
},
transform: _utils.positiveOrNegative
}
}),

@@ -42,9 +36,9 @@ right: _utils.t.spaceT("right"),

rtl: "left"
},
transform: _utils.positiveOrNegative
}
})
};
Object.assign(config, {
insetStart: config.insetInlineStart,
insetEnd: config.insetInlineEnd
exports.position = position;
Object.assign(position, {
insetStart: position.insetInlineStart,
insetEnd: position.insetInlineEnd
});

@@ -54,7 +48,2 @@ /**

*/
var position = (0, _core.system)(config);
exports.position = position;
var positionParser = (0, _core.createParser)(config);
exports.positionParser = positionParser;
//# sourceMappingURL=position.js.map

16

dist/cjs/config/shadow.js
"use strict";
exports.__esModule = true;
exports.shadowParser = exports.shadow = void 0;
exports.shadow = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var shadow = {
boxShadow: _utils.t.shadows("boxShadow"),
textShadow: _utils.t.shadows("textShadow")
};
Object.assign(config, {
shadow: config.boxShadow
exports.shadow = shadow;
Object.assign(shadow, {
shadow: shadow.boxShadow
});

@@ -20,7 +19,2 @@ /**

*/
var shadow = (0, _core.system)(config);
exports.shadow = shadow;
var shadowParser = (0, _core.createParser)(config);
exports.shadowParser = shadowParser;
//# sourceMappingURL=shadow.js.map

67

dist/cjs/config/space.js
"use strict";
exports.__esModule = true;
exports.spaceParser = exports.space = void 0;
exports.space = void 0;
var _core = require("../core");
var _utils = require("../utils");
var config = {
var space = {
margin: _utils.t.spaceT("margin"),

@@ -38,25 +36,26 @@ marginTop: _utils.t.spaceT("marginTop"),

};
Object.assign(config, {
m: config.margin,
mt: config.marginTop,
mr: config.marginRight,
me: config.marginInlineEnd,
marginEnd: config.marginInlineEnd,
mb: config.marginBottom,
ml: config.marginLeft,
ms: config.marginInlineStart,
marginStart: config.marginInlineStart,
mx: config.marginX,
my: config.marginY,
p: config.padding,
pt: config.paddingTop,
py: config.paddingY,
px: config.paddingX,
pb: config.paddingBottom,
pl: config.paddingLeft,
ps: config.paddingInlineStart,
paddingStart: config.paddingInlineStart,
pr: config.paddingRight,
pe: config.paddingInlineEnd,
paddingEnd: config.paddingInlineEnd
exports.space = space;
Object.assign(space, {
m: space.margin,
mt: space.marginTop,
mr: space.marginRight,
me: space.marginInlineEnd,
marginEnd: space.marginInlineEnd,
mb: space.marginBottom,
ml: space.marginLeft,
ms: space.marginInlineStart,
marginStart: space.marginInlineStart,
mx: space.marginX,
my: space.marginY,
p: space.padding,
pt: space.paddingTop,
py: space.paddingY,
px: space.paddingX,
pb: space.paddingBottom,
pl: space.paddingLeft,
ps: space.paddingInlineStart,
paddingStart: space.paddingInlineStart,
pr: space.paddingRight,
pe: space.paddingInlineEnd,
paddingEnd: space.paddingInlineEnd
});

@@ -66,16 +65,2 @@ /**

*/
/**
* Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
*
* - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
* - Negative values can be used for negative margins.
* - Numbers greater than the length of the theme.space array are converted to raw pixel values.
* - String values are passed as raw CSS values.
* - Array values are converted into responsive values.
*/
var space = (0, _core.system)(config);
exports.space = space;
var spaceParser = (0, _core.createParser)(config);
exports.spaceParser = spaceParser;
//# sourceMappingURL=space.js.map

21

dist/cjs/config/transform.js
"use strict";
exports.__esModule = true;
exports.transformParser = exports.transform = void 0;
exports.transform = void 0;
var templates = {
auto: "var(--chakra-transform)",
"auto-gpu": "var(--chakra-transform-gpu)"
};
var transform = {
transform: {
property: "transform",
transform: function transform(value) {
var _templates$value;
var _core = require("../core");
var config = {
transform: true,
return (_templates$value = templates[value]) != null ? _templates$value : value;
}
},
transformOrigin: true
};
var transform = (0, _core.system)(config);
exports.transform = transform;
var transformParser = (0, _core.createParser)(config);
exports.transformParser = transformParser;
//# sourceMappingURL=transform.js.map

10

dist/cjs/config/transition.js
"use strict";
exports.__esModule = true;
exports.transitionParser = exports.transition = void 0;
var _core = require("../core");
var config = {
exports.transition = void 0;
var transition = {
transition: true,

@@ -23,6 +20,3 @@ transitionDuration: {

};
var transition = (0, _core.system)(config);
exports.transition = transition;
var transitionParser = (0, _core.createParser)(config);
exports.transitionParser = transitionParser;
//# sourceMappingURL=transition.js.map

58

dist/cjs/config/typography.js
"use strict";
exports.__esModule = true;
exports.typographyParser = exports.typography = void 0;
exports.typography = void 0;
var _core = require("../core");
var _createTransform = require("../create-transform");
var config = {
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"
},
var _utils = require("../utils");
var typography = {
fontFamily: _utils.t.prop("fontFamily", "fonts"),
fontSize: _utils.t.prop("fontSize", "fontSizes", _createTransform.px),
fontWeight: _utils.t.prop("fontWeight", "fontWeights"),
lineHeight: _utils.t.prop("lineHeight", "lineHeights"),
letterSpacing: _utils.t.prop("letterSpacing", "letterSpacings"),
textAlign: true,

@@ -39,2 +26,24 @@ fontStyle: true,

property: "textDecoration"
},
noOfLines: {
"static": {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
//@ts-ignore
WebkitLineClamp: "var(--chakra-line-clamp)"
},
property: "--chakra-line-clamp"
},
isTruncated: {
transform: function transform(value) {
if (value === true) {
return {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
};
}
}
}

@@ -46,6 +55,3 @@ };

var typography = (0, _core.system)(config);
exports.typography = typography;
var typographyParser = (0, _core.createParser)(config);
exports.typographyParser = typographyParser;
//# sourceMappingURL=typography.js.map

180

dist/cjs/css.js
"use strict";
exports.__esModule = true;
exports.css = exports.processResponsive = void 0;
exports.getCss = getCss;
exports.css = exports.expandResponsive = void 0;
var _utils = require("@chakra-ui/utils");
var _parser = require("./parser");
var _pseudos = require("./pseudos");
var _pseudo = require("./pseudo");
var _system = require("./system");

@@ -18,71 +19,17 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }

var cache = {
themeBreakpoints: [],
breakpoints: [],
breakpointValues: [],
mediaQueries: []
};
/**
*
*/
var calculateBreakpointAndMediaQueries = function calculateBreakpointAndMediaQueries(themeBreakpoints) {
if (themeBreakpoints === void 0) {
themeBreakpoints = [];
}
// caching here reduces execution time by factor 4-6x
var isCached = cache.themeBreakpoints === themeBreakpoints;
if (isCached) {
return cache;
}
var _Object$entries$filte = Object.entries(themeBreakpoints).filter(function (_ref) {
var key = _ref[0];
return (0, _utils.isCustomBreakpoint)(key);
}).reduce(function (carry, _ref2) {
var breakpoint = _ref2[0],
value = _ref2[1];
carry.breakpoints.push(breakpoint);
carry.breakpointValues.push(value);
return carry;
}, {
breakpoints: [],
breakpointValues: []
}),
breakpoints = _Object$entries$filte.breakpoints,
breakpointValues = _Object$entries$filte.breakpointValues;
var mediaQueries = [null].concat(breakpointValues.map(function (bp) {
return "@media screen and (min-width: " + bp + ")";
}).slice(1));
cache.themeBreakpoints = themeBreakpoints;
cache.mediaQueries = mediaQueries;
cache.breakpointValues = breakpointValues;
cache.breakpoints = breakpoints;
return {
breakpoints: breakpoints,
mediaQueries: mediaQueries
};
};
var processResponsive = function processResponsive(styles) {
var expandResponsive = function expandResponsive(styles) {
return function (theme) {
if (!theme.__breakpoints) return styles;
var _theme$__breakpoints = theme.__breakpoints,
isResponsive = _theme$__breakpoints.isResponsive,
toArrayValue = _theme$__breakpoints.toArrayValue,
medias = _theme$__breakpoints.media;
var computedStyles = {};
var _calculateBreakpointA = calculateBreakpointAndMediaQueries(theme.breakpoints),
breakpoints = _calculateBreakpointA.breakpoints,
mediaQueries = _calculateBreakpointA.mediaQueries;
for (var key in styles) {
var value = (0, _utils.runIfFn)(styles[key], theme);
if (value == null) continue;
value = (0, _utils.isObject)(value) && isResponsive(value) ? toArrayValue(value) : value;
if (value == null) {
continue;
}
value = (0, _utils.isResponsiveObjectLike)(value, breakpoints) ? (0, _utils.objectToArrayNotation)(value, breakpoints) : value;
if (!(0, _utils.isArray)(value)) {
if (!Array.isArray(value)) {
computedStyles[key] = value;

@@ -92,6 +39,6 @@ continue;

var queries = value.slice(0, mediaQueries.length).length;
var queries = value.slice(0, medias.length).length;
for (var index = 0; index < queries; index += 1) {
var media = mediaQueries[index];
var media = medias == null ? void 0 : medias[index];

@@ -117,53 +64,56 @@ if (!media) {

exports.processResponsive = processResponsive;
exports.expandResponsive = expandResponsive;
var css = function css(styleOrFn) {
if (styleOrFn === void 0) {
styleOrFn = {};
}
function getCss(options) {
var _options$configs = options.configs,
configs = _options$configs === void 0 ? {} : _options$configs,
_options$pseudos = options.pseudos,
pseudos = _options$pseudos === void 0 ? {} : _options$pseudos,
theme = options.theme;
return function (props) {
if (props === void 0) {
props = {};
var css = function css(stylesOrFn, nested) {
if (nested === void 0) {
nested = false;
}
var theme = "theme" in props ? props.theme : props;
var _styles = (0, _utils.runIfFn)(stylesOrFn, theme);
var styles = expandResponsive(_styles)(theme);
var computedStyles = {};
var styleObject = (0, _utils.runIfFn)(styleOrFn, theme);
var styles = processResponsive(styleObject)(theme);
for (var k in styles) {
var _config, _config$transform, _config2, _config3, _config4, _config5;
var _config$transform, _config, _config2, _config3, _config4, _config5, _config6, _config7;
var x = styles[k];
var val = (0, _utils.runIfFn)(x, theme);
var key = k in _pseudo.pseudoSelectors ? _pseudo.pseudoSelectors[k] : k;
var config = _parser.parser.config[key];
var valueOrFn = styles[k];
var value = (0, _utils.runIfFn)(valueOrFn, theme);
var key = k in pseudos ? pseudos[k] : k;
var config = configs[key];
if (config === true) {
// shortcut definition
config = {
property: key,
scale: key
property: key
};
}
if ((0, _utils.isObject)(val)) {
computedStyles[key] = css(val)(theme);
if ((0, _utils.isObject)(value)) {
computedStyles[key] = css(value, true);
continue;
}
var scale = (0, _utils.memoizedGet)(theme, (_config = config) == null ? void 0 : _config.scale, {});
var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : (0, _utils.memoizedGet)(scale, val, val);
/**
* Useful for `layerStyle`, and `textStyle` to transform the returned
* result since it might use theme tokens
*/
var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme)) != null ? _config$transform : value;
rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue;
value = (_config3 = config) != null && _config3.processResult ? css(value)(theme) : value;
if ((_config3 = config) != null && _config3.property) {
config.property = (0, _utils.runIfFn)(config.property, theme);
}
if ((_config4 = config) != null && _config4.properties) {
for (var _iterator = _createForOfIteratorHelperLoose(config.properties), _step; !(_step = _iterator()).done;) {
if (!nested && (_config4 = config) != null && _config4["static"]) {
var staticStyles = (0, _utils.runIfFn)(config["static"], theme);
computedStyles = (0, _utils.mergeWith)({}, computedStyles, staticStyles);
}
if ((_config5 = config) != null && _config5.property && Array.isArray((_config6 = config) == null ? void 0 : _config6.property)) {
for (var _iterator = _createForOfIteratorHelperLoose(config.property), _step; !(_step = _iterator()).done;) {
var property = _step.value;
computedStyles[property] = value;
computedStyles[property] = rawValue;
}

@@ -174,11 +124,7 @@

if ((_config5 = config) != null && _config5.property) {
/**
* Used for styled-system configs that map to multiple computed properties.
* For example, the `borderLeftRadius` computed keys based on rtl/ltr
*/
if (config.property === "&") {
computedStyles = (0, _utils.mergeWith)({}, computedStyles, value);
if ((_config7 = config) != null && _config7.property) {
if (config.property === "&" && (0, _utils.isObject)(rawValue)) {
computedStyles = (0, _utils.mergeWith)({}, computedStyles, rawValue);
} else {
computedStyles[config.property] = value;
computedStyles[config.property] = rawValue;
}

@@ -189,3 +135,8 @@

computedStyles[key] = value;
if ((0, _utils.isObject)(rawValue)) {
computedStyles = (0, _utils.mergeWith)({}, computedStyles, rawValue);
continue;
}
computedStyles[key] = rawValue;
}

@@ -195,2 +146,15 @@

};
return css;
}
var css = function css(styles) {
return function (theme) {
var cssFn = getCss({
theme: theme,
pseudos: _pseudos.pseudoSelectors,
configs: _system.systemProps
});
return cssFn(styles);
};
};

@@ -197,0 +161,0 @@

34

dist/cjs/index.js

@@ -5,7 +5,5 @@ "use strict";

var _exportNames = {
createParser: true,
compose: true,
system: true
tokenToCSSVar: true
};
exports.system = exports.compose = exports.createParser = void 0;
exports.tokenToCSSVar = void 0;

@@ -21,17 +19,2 @@ var _config = require("./config");

var _core = require("./core");
exports.createParser = _core.createParser;
exports.compose = _core.compose;
exports.system = _core.system;
var _pseudo = require("./pseudo");
Object.keys(_pseudo).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _pseudo[key]) return;
exports[key] = _pseudo[key];
});
var _css = require("./css");

@@ -72,2 +55,15 @@

});
var _cssVar = require("./css-var");
Object.keys(_cssVar).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _cssVar[key]) return;
exports[key] = _cssVar[key];
});
var _createTransform = require("./create-transform");
exports.tokenToCSSVar = _createTransform.tokenToCSSVar;
//# sourceMappingURL=index.js.map

24

dist/cjs/system.js
"use strict";
exports.__esModule = true;
exports.propNames = exports.layoutPropNames = exports.systemProps = void 0;
exports.isStyleProp = exports.propNames = exports.layoutPropNames = exports.systemProps = void 0;
var _core = require("./core");
var _utils = require("@chakra-ui/utils");
var _config = require("./config");
var _pseudo = require("./pseudo");
var _pseudos = require("./pseudos");
var systemProps = (0, _core.compose)(_config.background, _config.border, _config.color, _config.flexbox, _config.layout, _config.outline, _config.grid, _config.others, _config.position, _config.shadow, _config.space, _config.typography, _config.transform, _config.list, _config.transition);
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var systemProps = (0, _utils.mergeWith)({}, _config.background, _config.border, _config.color, _config.flexbox, _config.layout, _config.outline, _config.grid, _config.others, _config.position, _config.shadow, _config.space, _config.typography, _config.transform, _config.list, _config.transition);
exports.systemProps = systemProps;
var layoutSystem = (0, _core.compose)(_config.space, _config.layout, _config.flexbox, _config.grid, _config.position);
var layoutPropNames = layoutSystem.propNames;
var layoutSystem = (0, _utils.mergeWith)({}, _config.space, _config.layout, _config.flexbox, _config.grid, _config.position);
var layoutPropNames = (0, _utils.objectKeys)(layoutSystem);
exports.layoutPropNames = layoutPropNames;
var propNames = [].concat(systemProps.propNames || [], _pseudo.pseudoPropNames);
var propNames = [].concat((0, _utils.objectKeys)(systemProps), _pseudos.pseudoPropNames);
exports.propNames = propNames;
var styleProps = _extends({}, systemProps, _pseudos.pseudoSelectors);
var isStyleProp = function isStyleProp(prop) {
return prop in styleProps;
};
exports.isStyleProp = isStyleProp;
//# sourceMappingURL=system.js.map

83

dist/cjs/utils/index.js

@@ -5,6 +5,4 @@ "use strict";

var _exportNames = {
makeConfig: true,
t: true
};
exports.makeConfig = makeConfig;
exports.t = void 0;

@@ -14,29 +12,6 @@

var _logicalProp = require("./logical-prop");
var _createTransform = require("../create-transform");
Object.keys(_logicalProp).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _logicalProp[key]) return;
exports[key] = _logicalProp[key];
});
var _propConfig = require("../prop-config");
var _positiveOrNegative = require("./positive-or-negative");
Object.keys(_positiveOrNegative).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _positiveOrNegative[key]) return;
exports[key] = _positiveOrNegative[key];
});
var _sort = require("./sort");
Object.keys(_sort).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _sort[key]) return;
exports[key] = _sort[key];
});
var _types = require("./types");

@@ -51,41 +26,33 @@

function makeConfig(scale, transform) {
return function (prop) {
var result = {
scale: scale
};
if (transform) result.transform = transform;
if (Array.isArray(prop)) result.properties = prop;else result.property = prop;
return result;
};
}
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function fractionalValue(value, scale) {
var defaultValue = !(0, _utils.isNumber)(value) || value > 1 ? value : value * 100 + "%";
return (0, _utils.get)(scale, value, defaultValue);
function fractionalValue(value) {
return !(0, _utils.isNumber)(value) || value > 1 ? value : value * 100 + "%";
}
var t = {
borderWidths: makeConfig("borderWidths"),
borderStyles: makeConfig("borderStyles"),
colors: makeConfig("colors", function (value, scale) {
var resolvedValue = (0, _utils.get)(scale, value, value);
return (0, _utils.isObject)(resolvedValue) ? value : resolvedValue;
}),
borders: makeConfig("borders"),
radii: makeConfig("radii"),
space: makeConfig("space"),
spaceT: makeConfig("space", _positiveOrNegative.positiveOrNegative),
prop: function prop(property, transform) {
return {
borderWidths: (0, _propConfig.toConfig)("borderWidths"),
borderStyles: (0, _propConfig.toConfig)("borderStyles"),
colors: (0, _propConfig.toConfig)("colors"),
borders: (0, _propConfig.toConfig)("borders"),
radii: (0, _propConfig.toConfig)("radii", _createTransform.px),
space: (0, _propConfig.toConfig)("space", _createTransform.px),
spaceT: (0, _propConfig.toConfig)("space", _createTransform.px),
prop: function prop(property, scale, transform) {
return _extends({
property: property,
transform: transform
};
scale: scale
}, scale && {
transform: (0, _createTransform.createTransform)({
scale: scale,
transform: transform
})
});
},
sizes: makeConfig("sizes"),
sizesT: makeConfig("sizes", fractionalValue),
shadows: makeConfig("shadows"),
logical: _logicalProp.logical
sizes: (0, _propConfig.toConfig)("sizes", _createTransform.px),
sizesT: (0, _propConfig.toConfig)("sizes", fractionalValue),
shadows: (0, _propConfig.toConfig)("shadows"),
logical: _propConfig.logical
};
exports.t = t;
//# sourceMappingURL=index.js.map

19

dist/cjs/utils/parse-gradient.js

@@ -5,6 +5,4 @@ "use strict";

exports.parseGradient = parseGradient;
exports.transformGradient = void 0;
exports.gradientTransform = void 0;
var _utils = require("@chakra-ui/utils");
function _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (typeof args[args.length - 1] !== "object") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }

@@ -41,3 +39,3 @@

var valueSet = new Set(Object.values(directionMap));
var globals = ["none", "-moz-initial", "inherit", "initial", "revert", "unset"];
var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]);

@@ -51,3 +49,3 @@ var trimSpace = function trimSpace(str) {

if (value == null || globals.includes(value)) return value;
if (value == null || globalSet.has(value)) return value;

@@ -84,6 +82,5 @@ var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, {

var color = (0, _utils.memoizedGet)(theme, "colors." + _color, _color); // isObject(...) is an exception for users who use `red` instead of `red.100`
var result = (0, _utils.isObject)(color) ? stop : color;
return _stop ? [result, _stop].join(" ") : result;
var key = "colors." + _color;
var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
return _stop ? [color, _stop].join(" ") : color;
});

@@ -94,7 +91,7 @@

var transformGradient = function transformGradient(value, _, theme) {
var gradientTransform = function gradientTransform(value, theme) {
return parseGradient(value, theme != null ? theme : {});
};
exports.transformGradient = transformGradient;
exports.gradientTransform = gradientTransform;
//# sourceMappingURL=parse-gradient.js.map

17

dist/esm/config/background.js

@@ -1,6 +0,5 @@

import { createParser, system } from "../core";
import { t } from "../utils";
import { transformGradient } from "../utils/parse-gradient";
import { gradientTransform } from "../utils/parse-gradient";
function transformBgClip(value) {
function bgClipTransform(value) {
return value === "text" ? {

@@ -14,3 +13,3 @@ color: "transparent",

var config = {
export var background = {
bg: t.colors("background"),

@@ -27,4 +26,3 @@ bgColor: t.colors("backgroundColor"),

backgroundClip: {
property: "&",
transform: transformBgClip
transform: bgClipTransform
},

@@ -41,11 +39,8 @@ bgImage: t.prop("backgroundImage"),

property: "backgroundImage",
transform: transformGradient
transform: gradientTransform
},
bgClip: {
property: "&",
transform: transformBgClip
transform: bgClipTransform
}
};
export var background = system(config);
export var backgroundParser = createParser(config);
//# sourceMappingURL=background.js.map

66

dist/esm/config/border.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var border = {
border: t.borders("border"),

@@ -99,32 +98,32 @@ borderWidth: t.borderWidths("borderWidth"),

};
Object.assign(config, {
rounded: config.borderRadius,
roundedTop: config.borderTopRadius,
roundedTopLeft: config.borderTopLeftRadius,
roundedTopRight: config.borderTopRightRadius,
roundedTopStart: config.borderStartStartRadius,
roundedTopEnd: config.borderStartEndRadius,
roundedBottom: config.borderBottomRadius,
roundedBottomLeft: config.borderBottomLeftRadius,
roundedBottomRight: config.borderBottomRightRadius,
roundedBottomStart: config.borderEndStartRadius,
roundedBottomEnd: config.borderEndEndRadius,
roundedLeft: config.borderLeftRadius,
roundedRight: config.borderRightRadius,
roundedStart: config.borderInlineStartRadius,
roundedEnd: config.borderInlineEndRadius,
borderStart: config.borderInlineStart,
borderEnd: config.borderInlineEnd,
borderTopStartRadius: config.borderStartStartRadius,
borderTopEndRadius: config.borderStartEndRadius,
borderBottomStartRadius: config.borderEndStartRadius,
borderBottomEndRadius: config.borderEndEndRadius,
borderStartRadius: config.borderInlineStartRadius,
borderEndRadius: config.borderInlineEndRadius,
borderStartWidth: config.borderInlineStartWidth,
borderEndWidth: config.borderInlineEndWidth,
borderStartColor: config.borderInlineStartColor,
borderEndColor: config.borderInlineEndColor,
borderStartStyle: config.borderInlineStartStyle,
borderEndStyle: config.borderInlineEndStyle
Object.assign(border, {
rounded: border.borderRadius,
roundedTop: border.borderTopRadius,
roundedTopLeft: border.borderTopLeftRadius,
roundedTopRight: border.borderTopRightRadius,
roundedTopStart: border.borderStartStartRadius,
roundedTopEnd: border.borderStartEndRadius,
roundedBottom: border.borderBottomRadius,
roundedBottomLeft: border.borderBottomLeftRadius,
roundedBottomRight: border.borderBottomRightRadius,
roundedBottomStart: border.borderEndStartRadius,
roundedBottomEnd: border.borderEndEndRadius,
roundedLeft: border.borderLeftRadius,
roundedRight: border.borderRightRadius,
roundedStart: border.borderInlineStartRadius,
roundedEnd: border.borderInlineEndRadius,
borderStart: border.borderInlineStart,
borderEnd: border.borderInlineEnd,
borderTopStartRadius: border.borderStartStartRadius,
borderTopEndRadius: border.borderStartEndRadius,
borderBottomStartRadius: border.borderEndStartRadius,
borderBottomEndRadius: border.borderEndEndRadius,
borderStartRadius: border.borderInlineStartRadius,
borderEndRadius: border.borderInlineEndRadius,
borderStartWidth: border.borderInlineStartWidth,
borderEndWidth: border.borderInlineEndWidth,
borderStartColor: border.borderInlineStartColor,
borderEndColor: border.borderInlineEndColor,
borderStartStyle: border.borderInlineStartStyle,
borderEndStyle: border.borderInlineEndStyle
});

@@ -134,5 +133,2 @@ /**

*/
export var border = system(config);
export var borderParser = createParser(config);
//# sourceMappingURL=border.js.map

5

dist/esm/config/color.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var color = {
color: t.colors("color"),

@@ -10,4 +9,2 @@ textColor: t.colors("color"),

};
export var color = system(config);
export var colorParser = createParser(config);
//# sourceMappingURL=color.js.map

63

dist/esm/config/flexbox.js

@@ -1,4 +0,15 @@

import { createParser, system } from "../core";
import { createTransform } from "../create-transform";
import { t } from "../utils";
var config = {
var reverse = {
"row-reverse": {
space: "--chakra-space-x-reverse",
divide: "--chakra-divide-x-reverse"
},
"column-reverse": {
space: "--chakra-space-y-reverse",
divide: "--chakra-divide-y-reverse"
}
};
var owlSelector = "& > :not(style) ~ :not(style)";
export var flexbox = {
alignItems: true,

@@ -9,3 +20,47 @@ alignContent: true,

flexWrap: true,
flexDirection: true,
flexDirection: {
transform(value) {
var _reverse$value;
var {
space,
divide
} = (_reverse$value = reverse[value]) != null ? _reverse$value : {};
var result = {
flexDirection: value
};
if (space) result[space] = 1;
if (divide) result[divide] = 1;
return result;
}
},
spaceX: {
static: {
[owlSelector]: {
marginInlineStart: "calc(var(--chakra-space-x) * calc(1 - var(--chakra-space-x-reverse)))",
marginInlineEnd: "calc(var(--chakra-space-x) * var(--chakra-space-x-reverse))"
}
},
transform: createTransform({
scale: "space",
transform: value => value !== null ? {
"--chakra-space-x": value
} : null
})
},
spaceY: {
static: {
[owlSelector]: {
marginTop: "calc(var(--chakra-space-y) * calc(1 - var(--chakra-space-y-reverse)))",
marginBottom: "calc(var(--chakra-space-y) * var(--chakra-space-y-reverse))"
}
},
transform: createTransform({
scale: "space",
transform: value => value != null ? {
"--chakra-space-y": value
} : null
})
},
flex: true,

@@ -24,4 +79,2 @@ flexFlow: true,

};
export var flexbox = system(config);
export var flexboxParser = createParser(config);
//# sourceMappingURL=flexbox.js.map

5

dist/esm/config/grid.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var grid = {
gridGap: t.space("gridGap"),

@@ -22,4 +21,2 @@ gridColumnGap: t.space("gridColumnGap"),

};
export var grid = system(config);
export var gridParser = createParser(config);
//# sourceMappingURL=grid.js.map

20

dist/esm/config/layout.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var layout = {
width: t.sizesT("width"),

@@ -25,9 +24,9 @@ inlineSize: t.sizesT("inlineSize"),

};
Object.assign(config, {
w: config.width,
h: config.height,
minW: config.minWidth,
maxW: config.maxWidth,
minH: config.minHeight,
maxH: config.maxHeight
Object.assign(layout, {
w: layout.width,
h: layout.height,
minW: layout.minWidth,
maxW: layout.maxWidth,
minH: layout.minHeight,
maxH: layout.maxHeight
});

@@ -37,5 +36,2 @@ /**

*/
export var layout = system(config);
export var layoutParser = createParser(config);
//# sourceMappingURL=layout.js.map

5

dist/esm/config/list.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var list = {
listStyleType: true,

@@ -10,4 +9,2 @@ listStylePosition: true,

};
export var list = system(config);
export var listParser = createParser(config);
//# sourceMappingURL=list.js.map

25

dist/esm/config/others.js
import { memoizedGet as get } from "@chakra-ui/utils";
import { createParser, system } from "../core";
import { getIsRtl } from "../utils/directionality";
var floatTransform = function floatTransform(value, _, props) {
if (props === void 0) {
props = {};
}
var floatTransform = (value, theme) => {
var map = {

@@ -14,3 +8,3 @@ left: "right",

};
return getIsRtl(props) ? map[value] : value;
return theme.direction === "rtl" ? map[value] : value;
};

@@ -39,3 +33,3 @@

};
var config = {
export var others = {
animation: true,

@@ -58,4 +52,2 @@ appearance: true,

srOnly: {
property: "&",
transform(value) {

@@ -70,18 +62,13 @@ if (value === true) return srOnly;

processResult: true,
property: "&",
transform: (value, _, theme) => get(theme, "layerStyles." + value, {})
transform: (value, theme) => get(theme, "layerStyles." + value, {})
},
textStyle: {
processResult: true,
property: "&",
transform: (value, _, theme) => get(theme, "textStyles." + value, {})
transform: (value, theme) => get(theme, "textStyles." + value, {})
},
apply: {
processResult: true,
property: "&",
transform: (value, _, theme) => get(theme, value, {})
transform: (value, theme) => get(theme, value, {})
}
};
export var others = system(config);
export var othersParser = createParser(config);
//# sourceMappingURL=others.js.map

12

dist/esm/config/outline.js

@@ -1,2 +0,1 @@

import { createParser, system } from "../core";
import { t } from "../utils";

@@ -7,9 +6,12 @@ /**

var config = {
export var outline = {
outline: true,
outlineOffset: true,
outlineColor: t.colors("outlineColor")
outlineColor: t.colors("outlineColor"),
ringColor: t.prop("--chakra-ring-color", "colors"),
ringOffsetWidth: t.prop("--chakra-ring-offset"),
ringOffsetColor: t.prop("--chakra-ring-offset-color", "colors"),
ringWidth: t.prop("--chakra-ring-offset"),
ringInset: t.prop("--chakra-ring-inset")
};
export var outline = system(config);
export var outlineParser = createParser(config);
//# sourceMappingURL=outline.js.map

25

dist/esm/config/position.js

@@ -1,10 +0,6 @@

import { createParser, system } from "../core";
import { positiveOrNegative, t } from "../utils";
var config = {
import { t } from "../utils";
export var position = {
position: true,
pos: t.prop("position"),
zIndex: {
property: "zIndex",
scale: "zIndices"
},
zIndex: t.prop("zIndex", "zIndices"),
inset: t.spaceT(["top", "right", "bottom", "left"]),

@@ -25,4 +21,3 @@ insetX: t.spaceT(["left", "right"]),

rtl: "right"
},
transform: positiveOrNegative
}
}),

@@ -35,9 +30,8 @@ right: t.spaceT("right"),

rtl: "left"
},
transform: positiveOrNegative
}
})
};
Object.assign(config, {
insetStart: config.insetInlineStart,
insetEnd: config.insetInlineEnd
Object.assign(position, {
insetStart: position.insetInlineStart,
insetEnd: position.insetInlineEnd
});

@@ -47,5 +41,2 @@ /**

*/
export var position = system(config);
export var positionParser = createParser(config);
//# sourceMappingURL=position.js.map

10

dist/esm/config/shadow.js

@@ -1,9 +0,8 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var shadow = {
boxShadow: t.shadows("boxShadow"),
textShadow: t.shadows("textShadow")
};
Object.assign(config, {
shadow: config.boxShadow
Object.assign(shadow, {
shadow: shadow.boxShadow
});

@@ -13,5 +12,2 @@ /**

*/
export var shadow = system(config);
export var shadowParser = createParser(config);
//# sourceMappingURL=shadow.js.map

61

dist/esm/config/space.js

@@ -1,4 +0,3 @@

import { createParser, system } from "../core";
import { t } from "../utils";
var config = {
export var space = {
margin: t.spaceT("margin"),

@@ -31,25 +30,25 @@ marginTop: t.spaceT("marginTop"),

};
Object.assign(config, {
m: config.margin,
mt: config.marginTop,
mr: config.marginRight,
me: config.marginInlineEnd,
marginEnd: config.marginInlineEnd,
mb: config.marginBottom,
ml: config.marginLeft,
ms: config.marginInlineStart,
marginStart: config.marginInlineStart,
mx: config.marginX,
my: config.marginY,
p: config.padding,
pt: config.paddingTop,
py: config.paddingY,
px: config.paddingX,
pb: config.paddingBottom,
pl: config.paddingLeft,
ps: config.paddingInlineStart,
paddingStart: config.paddingInlineStart,
pr: config.paddingRight,
pe: config.paddingInlineEnd,
paddingEnd: config.paddingInlineEnd
Object.assign(space, {
m: space.margin,
mt: space.marginTop,
mr: space.marginRight,
me: space.marginInlineEnd,
marginEnd: space.marginInlineEnd,
mb: space.marginBottom,
ml: space.marginLeft,
ms: space.marginInlineStart,
marginStart: space.marginInlineStart,
mx: space.marginX,
my: space.marginY,
p: space.padding,
pt: space.paddingTop,
py: space.paddingY,
px: space.paddingX,
pb: space.paddingBottom,
pl: space.paddingLeft,
ps: space.paddingInlineStart,
paddingStart: space.paddingInlineStart,
pr: space.paddingRight,
pe: space.paddingInlineEnd,
paddingEnd: space.paddingInlineEnd
});

@@ -59,14 +58,2 @@ /**

*/
/**
* Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
*
* - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
* - Negative values can be used for negative margins.
* - Numbers greater than the length of the theme.space array are converted to raw pixel values.
* - String values are passed as raw CSS values.
* - Array values are converted into responsive values.
*/
export var space = system(config);
export var spaceParser = createParser(config);
//# sourceMappingURL=space.js.map

20

dist/esm/config/transform.js

@@ -1,8 +0,18 @@

import { createParser, system } from "../core";
var config = {
transform: true,
var templates = {
auto: "var(--chakra-transform)",
"auto-gpu": "var(--chakra-transform-gpu)"
};
export var transform = {
transform: {
property: "transform",
transform(value) {
var _templates$value;
return (_templates$value = templates[value]) != null ? _templates$value : value;
}
},
transformOrigin: true
};
export var transform = system(config);
export var transformParser = createParser(config);
//# sourceMappingURL=transform.js.map

5

dist/esm/config/transition.js

@@ -1,3 +0,2 @@

import { createParser, system } from "../core";
var config = {
export var transition = {
transition: true,

@@ -17,4 +16,2 @@ transitionDuration: {

};
export var transition = system(config);
export var transitionParser = createParser(config);
//# sourceMappingURL=transition.js.map

56

dist/esm/config/typography.js

@@ -1,23 +0,9 @@

import { createParser, system } from "../core";
var config = {
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"
},
import { px } from "../create-transform";
import { t } from "../utils";
export var typography = {
fontFamily: t.prop("fontFamily", "fonts"),
fontSize: t.prop("fontSize", "fontSizes", px),
fontWeight: t.prop("fontWeight", "fontWeights"),
lineHeight: t.prop("lineHeight", "lineHeights"),
letterSpacing: t.prop("letterSpacing", "letterSpacings"),
textAlign: true,

@@ -33,2 +19,25 @@ fontStyle: true,

property: "textDecoration"
},
noOfLines: {
static: {
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
WebkitBoxOrient: "vertical",
//@ts-ignore
WebkitLineClamp: "var(--chakra-line-clamp)"
},
property: "--chakra-line-clamp"
},
isTruncated: {
transform(value) {
if (value === true) {
return {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
};
}
}
}

@@ -39,5 +48,2 @@ };

*/
export var typography = system(config);
export var typographyParser = createParser(config);
//# sourceMappingURL=typography.js.map

170

dist/esm/css.js

@@ -1,69 +0,19 @@

import { isArray, isCustomBreakpoint, isObject, isResponsiveObjectLike, memoizedGet as get, mergeWith, objectToArrayNotation, runIfFn } from "@chakra-ui/utils";
import { parser } from "./parser";
import { pseudoSelectors } from "./pseudo";
var cache = {
themeBreakpoints: [],
breakpoints: [],
breakpointValues: [],
mediaQueries: []
};
/**
*
*/
var calculateBreakpointAndMediaQueries = function calculateBreakpointAndMediaQueries(themeBreakpoints) {
if (themeBreakpoints === void 0) {
themeBreakpoints = [];
}
// caching here reduces execution time by factor 4-6x
var isCached = cache.themeBreakpoints === themeBreakpoints;
if (isCached) {
return cache;
}
import { isObject, mergeWith as merge, runIfFn } from "@chakra-ui/utils";
import { pseudoSelectors } from "./pseudos";
import { systemProps as systemPropConfigs } from "./system";
export var expandResponsive = styles => theme => {
if (!theme.__breakpoints) return styles;
var {
breakpoints,
breakpointValues
} = Object.entries(themeBreakpoints).filter((_ref) => {
var [key] = _ref;
return isCustomBreakpoint(key);
}).reduce((carry, _ref2) => {
var [breakpoint, value] = _ref2;
carry.breakpoints.push(breakpoint);
carry.breakpointValues.push(value);
return carry;
}, {
breakpoints: [],
breakpointValues: []
});
var mediaQueries = [null, ...breakpointValues.map(bp => "@media screen and (min-width: " + bp + ")").slice(1)];
cache.themeBreakpoints = themeBreakpoints;
cache.mediaQueries = mediaQueries;
cache.breakpointValues = breakpointValues;
cache.breakpoints = breakpoints;
return {
breakpoints,
mediaQueries
};
};
export var processResponsive = styles => theme => {
isResponsive,
toArrayValue,
media: medias
} = theme.__breakpoints;
var computedStyles = {};
var {
breakpoints,
mediaQueries
} = calculateBreakpointAndMediaQueries(theme.breakpoints);
for (var key in styles) {
var value = runIfFn(styles[key], theme);
if (value == null) continue;
value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value;
if (value == null) {
continue;
}
value = isResponsiveObjectLike(value, breakpoints) ? objectToArrayNotation(value, breakpoints) : value;
if (!isArray(value)) {
if (!Array.isArray(value)) {
computedStyles[key] = value;

@@ -73,6 +23,6 @@ continue;

var queries = value.slice(0, mediaQueries.length).length;
var queries = value.slice(0, medias.length).length;
for (var index = 0; index < queries; index += 1) {
var media = mediaQueries[index];
var media = medias == null ? void 0 : medias[index];

@@ -96,50 +46,53 @@ if (!media) {

};
export var css = function css(styleOrFn) {
if (styleOrFn === void 0) {
styleOrFn = {};
}
export function getCss(options) {
var {
configs = {},
pseudos = {},
theme
} = options;
return function (props) {
if (props === void 0) {
props = {};
var css = function css(stylesOrFn, nested) {
if (nested === void 0) {
nested = false;
}
var theme = "theme" in props ? props.theme : props;
var _styles = runIfFn(stylesOrFn, theme);
var styles = expandResponsive(_styles)(theme);
var computedStyles = {};
var styleObject = runIfFn(styleOrFn, theme);
var styles = processResponsive(styleObject)(theme);
for (var k in styles) {
var _config, _config$transform, _config2, _config3, _config4, _config5;
var _config$transform, _config, _config2, _config3, _config4, _config5, _config6, _config7;
var x = styles[k];
var val = runIfFn(x, theme);
var key = k in pseudoSelectors ? pseudoSelectors[k] : k;
var config = parser.config[key];
var valueOrFn = styles[k];
var value = runIfFn(valueOrFn, theme);
var key = k in pseudos ? pseudos[k] : k;
var config = configs[key];
if (config === true) {
// shortcut definition
config = {
property: key,
scale: key
property: key
};
}
if (isObject(val)) {
computedStyles[key] = css(val)(theme);
if (isObject(value)) {
computedStyles[key] = css(value, true);
continue;
}
var scale = get(theme, (_config = config) == null ? void 0 : _config.scale, {});
var value = (_config$transform = (_config2 = config) == null ? void 0 : _config2.transform == null ? void 0 : _config2.transform(val, scale, props)) != null ? _config$transform : get(scale, val, val);
/**
* Useful for `layerStyle`, and `textStyle` to transform the returned
* result since it might use theme tokens
*/
var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme)) != null ? _config$transform : value;
rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue;
value = (_config3 = config) != null && _config3.processResult ? css(value)(theme) : value;
if ((_config3 = config) != null && _config3.property) {
config.property = runIfFn(config.property, theme);
}
if ((_config4 = config) != null && _config4.properties) {
for (var property of config.properties) {
computedStyles[property] = value;
if (!nested && (_config4 = config) != null && _config4.static) {
var staticStyles = runIfFn(config.static, theme);
computedStyles = merge({}, computedStyles, staticStyles);
}
if ((_config5 = config) != null && _config5.property && Array.isArray((_config6 = config) == null ? void 0 : _config6.property)) {
for (var property of config.property) {
computedStyles[property] = rawValue;
}

@@ -150,11 +103,7 @@

if ((_config5 = config) != null && _config5.property) {
/**
* Used for styled-system configs that map to multiple computed properties.
* For example, the `borderLeftRadius` computed keys based on rtl/ltr
*/
if (config.property === "&") {
computedStyles = mergeWith({}, computedStyles, value);
if ((_config7 = config) != null && _config7.property) {
if (config.property === "&" && isObject(rawValue)) {
computedStyles = merge({}, computedStyles, rawValue);
} else {
computedStyles[config.property] = value;
computedStyles[config.property] = rawValue;
}

@@ -165,3 +114,8 @@

computedStyles[key] = value;
if (isObject(rawValue)) {
computedStyles = merge({}, computedStyles, rawValue);
continue;
}
computedStyles[key] = rawValue;
}

@@ -171,3 +125,13 @@

};
return css;
}
export var css = styles => theme => {
var cssFn = getCss({
theme,
pseudos: pseudoSelectors,
configs: systemPropConfigs
});
return cssFn(styles);
};
//# sourceMappingURL=css.js.map

4

dist/esm/index.js
export * from "./config";
export { createParser, compose, system } from "./core";
export * from "./pseudo";
export * from "./css";

@@ -8,2 +6,4 @@ export * from "./types";

export * from "./system";
export * from "./css-var";
export { tokenToCSSVar } from "./create-transform";
//# sourceMappingURL=index.js.map

18

dist/esm/system.js

@@ -1,8 +0,14 @@

import { compose } from "./core";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { mergeWith, objectKeys } from "@chakra-ui/utils";
import { background, border, color, flexbox, grid, layout, list, others, outline, position, shadow, space, transform, transition, typography } from "./config";
import { pseudoPropNames } from "./pseudo";
export var systemProps = compose(background, border, color, flexbox, layout, outline, grid, others, position, shadow, space, typography, transform, list, transition);
var layoutSystem = compose(space, layout, flexbox, grid, position);
export var layoutPropNames = layoutSystem.propNames;
export var propNames = [...(systemProps.propNames || []), ...pseudoPropNames];
import { pseudoPropNames, pseudoSelectors } from "./pseudos";
export var systemProps = mergeWith({}, background, border, color, flexbox, layout, outline, grid, others, position, shadow, space, typography, transform, list, transition);
var layoutSystem = mergeWith({}, space, layout, flexbox, grid, position);
export var layoutPropNames = objectKeys(layoutSystem);
export var propNames = [...objectKeys(systemProps), ...pseudoPropNames];
var styleProps = _extends({}, systemProps, pseudoSelectors);
export var isStyleProp = prop => prop in styleProps;
//# sourceMappingURL=system.js.map

58

dist/esm/utils/index.js

@@ -1,44 +0,34 @@

import { get, isNumber, isObject } from "@chakra-ui/utils";
import { logical } from "./logical-prop";
import { positiveOrNegative } from "./positive-or-negative";
export * from "./positive-or-negative";
export * from "./sort";
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { isNumber } from "@chakra-ui/utils";
import { createTransform, px as pxTransform } from "../create-transform";
import { logical, toConfig } from "../prop-config";
export * from "./types";
export * from "./logical-prop";
export function makeConfig(scale, transform) {
return prop => {
var result = {
scale
};
if (transform) result.transform = transform;
if (Array.isArray(prop)) result.properties = prop;else result.property = prop;
return result;
};
}
function fractionalValue(value, scale) {
var defaultValue = !isNumber(value) || value > 1 ? value : value * 100 + "%";
return get(scale, value, defaultValue);
function fractionalValue(value) {
return !isNumber(value) || value > 1 ? value : value * 100 + "%";
}
export var t = {
borderWidths: makeConfig("borderWidths"),
borderStyles: makeConfig("borderStyles"),
colors: makeConfig("colors", (value, scale) => {
var resolvedValue = get(scale, value, value);
return isObject(resolvedValue) ? value : resolvedValue;
}),
borders: makeConfig("borders"),
radii: makeConfig("radii"),
space: makeConfig("space"),
spaceT: makeConfig("space", positiveOrNegative),
prop: (property, transform) => ({
borderWidths: toConfig("borderWidths"),
borderStyles: toConfig("borderStyles"),
colors: toConfig("colors"),
borders: toConfig("borders"),
radii: toConfig("radii", pxTransform),
space: toConfig("space", pxTransform),
spaceT: toConfig("space", pxTransform),
prop: (property, scale, transform) => _extends({
property,
transform
scale
}, scale && {
transform: createTransform({
scale,
transform
})
}),
sizes: makeConfig("sizes"),
sizesT: makeConfig("sizes", fractionalValue),
shadows: makeConfig("shadows"),
sizes: toConfig("sizes", pxTransform),
sizesT: toConfig("sizes", fractionalValue),
shadows: toConfig("shadows"),
logical
};
//# sourceMappingURL=index.js.map

14

dist/esm/utils/parse-gradient.js

@@ -21,3 +21,2 @@ function _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === "string") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) { return "$" + groups[name]; })); } else if (typeof substitution === "function") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (typeof args[args.length - 1] !== "object") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }

import { memoizedGet as get, isObject } from "@chakra-ui/utils";
var directionMap = {

@@ -34,3 +33,3 @@ "to-t": "to top",

var valueSet = new Set(Object.values(directionMap));
var globals = ["none", "-moz-initial", "inherit", "initial", "revert", "unset"];
var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]);

@@ -42,3 +41,3 @@ var trimSpace = str => str.trim();

if (value == null || globals.includes(value)) return value;
if (value == null || globalSet.has(value)) return value;

@@ -69,6 +68,5 @@ var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, {

var color = get(theme, "colors." + _color, _color); // isObject(...) is an exception for users who use `red` instead of `red.100`
var result = isObject(color) ? stop : color;
return _stop ? [result, _stop].join(" ") : result;
var key = "colors." + _color;
var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color;
return _stop ? [color, _stop].join(" ") : color;
});

@@ -78,3 +76,3 @@

}
export var transformGradient = (value, _, theme) => parseGradient(value, theme != null ? theme : {});
export var gradientTransform = (value, theme) => parseGradient(value, theme != null ? theme : {});
//# sourceMappingURL=parse-gradient.js.map

9

dist/types/config/background.d.ts
import * as CSS from "csstype";
import type { Config } from "../prop-config";
import { Token } from "../utils";
export declare const background: Config;
export interface BackgroundProps {

@@ -89,8 +91,1 @@ /**

}
export declare const background: import("../core").Parser;
export declare const backgroundParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/border.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const border: Config;
/**

@@ -236,8 +238,1 @@ * The prop types for border properties listed above

}
export declare const border: import("../core").Parser;
export declare const borderParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/color.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const color: Config;
export interface ColorProps {

@@ -25,8 +27,1 @@ /**

}
export declare const color: import("../core").Parser;
export declare const colorParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

11

dist/types/config/flexbox.d.ts
import * as CSS from "csstype";
import { Token, Length } from "../utils";
import { Config } from "../prop-config";
import { Length, Token } from "../utils";
export declare const flexbox: Config;
export interface FlexboxProps {

@@ -172,8 +174,1 @@ /**

}
export declare const flexbox: import("../core").Parser;
export declare const flexboxParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/grid.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const grid: Config;
export interface GridProps {

@@ -153,8 +155,1 @@ /**

}
export declare const grid: import("../core").Parser;
export declare const gridParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/layout.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Length, Token } from "../utils";
export declare const layout: Config;
/**

@@ -94,8 +96,1 @@ * Types for layout related CSS properties

}
export declare const layout: import("../core").Parser;
export declare const layoutParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/list.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { ResponsiveValue } from "../utils";
export declare const list: Config;
export interface ListProps {

@@ -22,8 +24,1 @@ listStyleType?: ResponsiveValue<CSS.Property.ListStyleType>;

}
export declare const list: import("../core").Parser;
export declare const listParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

10

dist/types/config/others.d.ts
import * as CSS from "csstype";
import { PropConfig } from "../core";
import { Config } from "../prop-config";
import { Length, ResponsiveValue } from "../utils";
export declare const others: Config;
export interface OtherProps {

@@ -81,8 +82,1 @@ /**

}
export declare const others: import("../core").Parser;
export declare const othersParser: {
(props: Record<string, any>): Record<string, any>;
config: PropConfig;
propNames: string[];
cache: Map<string, any>;
};

36

dist/types/config/outline.d.ts
import * as CSS from "csstype";
import { Length, ResponsiveValue } from "../utils";
import { Config } from "../prop-config";
import { Length, ResponsiveValue, Token } from "../utils";
/**
* The parser configuration for common outline properties
*/
export declare const outline: Config;
export interface OutlineProps {

@@ -15,10 +20,23 @@ /**

*/
outlineColor?: ResponsiveValue<CSS.Property.OutlineColor>;
outlineColor?: Token<CSS.Property.Color, "colors">;
/**
* The color of the outline ring
*/
ringColor?: Token<CSS.Property.Color, "colors">;
/**
* The thickness of the offset shadow when using outline rings
*/
ringOffsetWidth?: Token<CSS.Property.OutlineOffset>;
/**
* The color of the offset shadow when adding outline rings
*/
ringOffsetColor?: Token<CSS.Property.Color, "colors">;
/**
* The thickness of the outline rings
*/
ringWidth?: Token<CSS.Property.OutlineWidth>;
/**
* If the outline ring should an `inset`
*/
ringInset?: "inset";
}
export declare const outline: import("../core").Parser;
export declare const outlineParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/position.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const position: Config;
/**

@@ -68,8 +70,1 @@ * Types for position CSS properties

}
export declare const position: import("../core").Parser;
export declare const positionParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

9

dist/types/config/shadow.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const shadow: Config;
/**

@@ -20,8 +22,1 @@ * Types for box and text shadow properties

}
export declare const shadow: import("../core").Parser;
export declare const shadowParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

18

dist/types/config/space.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
export declare const space: Config;
/**

@@ -188,17 +190,1 @@ * Types for space related CSS properties

}
/**
* Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
*
* - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
* - Negative values can be used for negative margins.
* - Numbers greater than the length of the theme.space array are converted to raw pixel values.
* - String values are passed as raw CSS values.
* - Array values are converted into responsive values.
*/
export declare const space: import("../core").Parser;
export declare const spaceParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

16

dist/types/config/transform.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { Token } from "../utils";
declare const templates: {
auto: string;
"auto-gpu": string;
};
export declare const transform: Config;
export interface TransformProps {

@@ -7,3 +13,3 @@ /**

*/
transform?: Token<CSS.Property.Transform>;
transform?: Token<CSS.Property.Transform | keyof typeof templates>;
/**

@@ -14,8 +20,2 @@ * The CSS `transform-origin` property

}
export declare const transform: import("../core").Parser;
export declare const transformParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};
export {};

9

dist/types/config/transition.d.ts
import * as CSS from "csstype";
import { Config } from "../prop-config";
import { ResponsiveValue } from "../utils";
export declare const transition: Config;
export interface TransitionProps {

@@ -21,8 +23,1 @@ /**

}
export declare const transition: import("../core").Parser;
export declare const transitionParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

20

dist/types/config/typography.d.ts
import * as CSS from "csstype";
import { Token } from "../utils";
import { Config } from "../prop-config";
import { ResponsiveValue, Token } from "../utils";
export declare const typography: Config;
/**

@@ -63,9 +65,11 @@ * Types for typography related CSS properties

textDecor?: Token<CSS.Property.TextDecoration | number>;
/**
* Used to visually truncate a text after a number of lines.
*/
noOfLines?: ResponsiveValue<number>;
/**
* If `true`, it clamps truncate a text after one line.
* @deprecated - Use `noOfLines` instead
*/
isTruncated?: boolean;
}
export declare const typography: import("../core").Parser;
export declare const typographyParser: {
(props: Record<string, any>): Record<string, any>;
config: import("../core").PropConfig;
propNames: string[];
cache: Map<string, any>;
};

17

dist/types/css.d.ts
import { Dict } from "@chakra-ui/utils";
import { CSSObject, StyleObjectOrFn } from "./types";
export declare const processResponsive: (styles: any) => (theme: Dict) => any;
declare type PropsOrTheme = Dict | {
theme: Dict;
};
export declare const css: (styleOrFn?: StyleObjectOrFn) => (props?: PropsOrTheme) => CSSObject;
import * as CSS from "csstype";
import { Config } from "./prop-config";
import { CssTheme, StyleObjectOrFn } from "./types";
export declare const expandResponsive: (styles: Dict) => (theme: Dict) => Record<string, any>;
interface Options {
theme: CssTheme;
configs?: Config;
pseudos?: Record<string, CSS.Pseudos | (string & {})>;
}
export declare function getCss(options: Options): (stylesOrFn: Dict, nested?: boolean) => Record<string, any>;
export declare const css: (styles: StyleObjectOrFn) => (theme: any) => Record<string, any>;
export {};

4

dist/types/index.d.ts
export * from "./config";
export { createParser, compose, system } from "./core";
export * from "./pseudo";
export * from "./css";

@@ -8,2 +6,4 @@ export * from "./types";

export * from "./system";
export * from "./css-var";
export type { ResponsiveValue } from "./utils";
export { tokenToCSSVar } from "./create-transform";

7

dist/types/system.d.ts

@@ -1,3 +0,4 @@

export declare const systemProps: import("./core").Parser;
export declare const layoutPropNames: string[];
export declare const propNames: string[];
export declare const systemProps: any;
export declare const layoutPropNames: (string | number | symbol)[];
export declare const propNames: (string | number | symbol)[];
export declare const isStyleProp: (prop: string) => boolean;

24

dist/types/types.d.ts

@@ -1,7 +0,7 @@

import { Dict } from "@chakra-ui/utils";
import { Dict, AnalyzeBreakpointsReturn } from "@chakra-ui/utils";
import * as CSS from "csstype";
import * as System from "./config";
import { Pseudos } from "./pseudo";
import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, ListProps, OtherProps, OutlineProps, PositionProps, ShadowProps, SpaceProps, TransformProps, TransitionProps, TypographyProps } from "./config";
import { Pseudos } from "./pseudos";
import { ResponsiveValue } from "./utils";
export interface StyleProps extends System.SpaceProps, System.ColorProps, System.TransitionProps, System.TypographyProps, System.FlexboxProps, System.TransformProps, System.GridProps, System.LayoutProps, System.BorderProps, System.ShadowProps, System.BackgroundProps, System.ListProps, System.PositionProps, System.OutlineProps, System.OtherProps {
export interface StyleProps extends SpaceProps, ColorProps, TransitionProps, TypographyProps, FlexboxProps, TransformProps, GridProps, LayoutProps, BorderProps, ShadowProps, BackgroundProps, ListProps, PositionProps, OutlineProps, OtherProps {
}

@@ -36,2 +36,18 @@ export interface SystemCSSProperties extends CSS.Properties, Omit<StyleProps, keyof CSS.Properties> {

}
export declare type CSSMap = Dict<{
value: string;
var: string;
varRef: string;
}>;
export declare type Transform = (value: any, theme: CssTheme) => any;
export declare type WithCSSVar<T> = T & {
__cssVars: Dict;
__cssMap: CSSMap;
__breakpoints: AnalyzeBreakpointsReturn;
};
export declare type CssTheme = WithCSSVar<{
breakpoints: Dict;
direction?: "ltr" | "rtl";
[key: string]: any;
}>;
export {};

4

dist/types/utils/parse-gradient.d.ts
import { Dict } from "@chakra-ui/utils";
import { PropConfig } from "../core";
import { PropConfig } from "../prop-config";
export declare function parseGradient(value: string | null | undefined, theme: Dict): string | null | undefined;
export declare const transformGradient: PropConfig["transform"];
export declare const gradientTransform: PropConfig["transform"];

7

package.json
{
"name": "@chakra-ui/styled-system",
"version": "1.7.1",
"version": "1.8.0",
"description": "Style function for css-in-js building component libraries",

@@ -45,3 +45,3 @@ "keywords": [

"prebuild": "rimraf dist",
"start": "nodemon --exec yarn build --watch src",
"start": "nodemon --exec yarn build --watch src -e ts,tsx",
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",

@@ -58,6 +58,5 @@ "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",

"dependencies": {
"@chakra-ui/utils": "1.2.0",
"css-get-unit": "1.0.1",
"@chakra-ui/utils": "1.3.0",
"csstype": "^3.0.6"
}
}
dist/cjs/core/create-parser.js
dist/cjs/core/create-parser.js.map
dist/cjs/core/create-style-function.js
dist/cjs/core/create-style-function.js.map
dist/cjs/core/create-system.js
dist/cjs/core/create-system.js.map
dist/cjs/core/index.js
dist/cjs/core/index.js.map
dist/cjs/core/parse-responsive.js
dist/cjs/core/parse-responsive.js.map
dist/cjs/core/types.js
dist/cjs/core/types.js.map
dist/cjs/parser.js
dist/cjs/parser.js.map
dist/cjs/pseudo/index.js
dist/cjs/pseudo/index.js.map
dist/cjs/pseudo/pseudo.selector.js
dist/cjs/pseudo/pseudo.selector.js.map
dist/cjs/pseudo/pseudo.utils.js
dist/cjs/pseudo/pseudo.utils.js.map
dist/cjs/utils/directionality.js
dist/cjs/utils/directionality.js.map
dist/cjs/utils/get-unit.js
dist/cjs/utils/get-unit.js.map
dist/cjs/utils/logical-prop.js
dist/cjs/utils/logical-prop.js.map
dist/cjs/utils/positive-or-negative.js
dist/cjs/utils/positive-or-negative.js.map
dist/cjs/utils/sort.js
dist/cjs/utils/sort.js.map
dist/esm/core/create-parser.js
dist/esm/core/create-parser.js.map
dist/esm/core/create-style-function.js
dist/esm/core/create-style-function.js.map
dist/esm/core/create-system.js
dist/esm/core/create-system.js.map
dist/esm/core/index.js
dist/esm/core/index.js.map
dist/esm/core/parse-responsive.js
dist/esm/core/parse-responsive.js.map
dist/esm/core/types.js
dist/esm/core/types.js.map
dist/esm/parser.js
dist/esm/parser.js.map
dist/esm/pseudo/index.js
dist/esm/pseudo/index.js.map
dist/esm/pseudo/pseudo.selector.js
dist/esm/pseudo/pseudo.selector.js.map
dist/esm/pseudo/pseudo.utils.js
dist/esm/pseudo/pseudo.utils.js.map
dist/esm/utils/directionality.js
dist/esm/utils/directionality.js.map
dist/esm/utils/get-unit.js
dist/esm/utils/get-unit.js.map
dist/esm/utils/logical-prop.js
dist/esm/utils/logical-prop.js.map
dist/esm/utils/positive-or-negative.js
dist/esm/utils/positive-or-negative.js.map
dist/esm/utils/sort.js
dist/esm/utils/sort.js.map
dist/types/core/create-parser.d.ts
dist/types/core/create-style-function.d.ts
dist/types/core/create-system.d.ts
dist/types/core/index.d.ts
dist/types/core/parse-responsive.d.ts
dist/types/core/types.d.ts
dist/types/parser.d.ts
dist/types/pseudo/index.d.ts
dist/types/pseudo/pseudo.selector.d.ts
dist/types/pseudo/pseudo.utils.d.ts
dist/types/utils/directionality.d.ts
dist/types/utils/get-unit.d.ts
dist/types/utils/logical-prop.d.ts
dist/types/utils/positive-or-negative.d.ts
dist/types/utils/sort.d.ts
dist/cjs/config/background.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/border.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/color.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/flexbox.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/grid.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/layout.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/list.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/others.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/outline.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/position.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/shadow.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/space.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/transform.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/transition.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/config/typography.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/css.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/index.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/system.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/index.js.map

Sorry, the diff of this file is not supported yet

dist/cjs/utils/parse-gradient.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/background.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/border.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/color.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/flexbox.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/grid.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/layout.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/list.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/others.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/outline.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/position.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/shadow.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/space.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/transform.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/transition.js.map

Sorry, the diff of this file is not supported yet

dist/esm/config/typography.js.map

Sorry, the diff of this file is not supported yet

dist/esm/css.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/system.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/index.js.map

Sorry, the diff of this file is not supported yet

dist/esm/utils/parse-gradient.js.map

Sorry, the diff of this file is not supported yet

dist/types/utils/index.d.ts

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc