@chakra-ui/styled-system
Advanced tools
@chakra-ui/styled-system - npm Package Compare versions
Comparing version 1.14.0 to 1.14.1
| # Change Log | ||
| ## 1.14.1 | ||
| ### Patch Changes | ||
| - [#5075](https://github.com/chakra-ui/chakra-ui/pull/5075) | ||
| [`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e) | ||
| Thanks [@cschroeter](https://github.com/cschroeter)! - Update babel config to | ||
| transpile soruces for older browsers. This fixes issues with CRA and | ||
| Storybook. | ||
| - Updated dependencies | ||
| [[`b28142946`](https://github.com/chakra-ui/chakra-ui/commit/b281429462a099b7fd7f9352e837cd28d1a2da0e)]: | ||
| - @chakra-ui/utils@1.9.1 | ||
| ## 1.14.0 | ||
@@ -4,0 +17,0 @@ |
@@ -7,19 +7,39 @@ 'use strict'; | ||
| const tokenToCSSVar = (scale, value) => theme => { | ||
| const valueStr = String(value); | ||
| const key = scale ? `${scale}.${valueStr}` : valueStr; | ||
| return utils.isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| 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 tokenToCSSVar = function tokenToCSSVar(scale, value) { | ||
| return function (theme) { | ||
| var valueStr = String(value); | ||
| var key = scale ? scale + "." + valueStr : valueStr; | ||
| return utils.isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| }; | ||
| }; | ||
| function createTransform(options) { | ||
| const { | ||
| scale, | ||
| transform, | ||
| compose | ||
| } = options; | ||
| var scale = options.scale, | ||
| transform = options.transform, | ||
| compose = options.compose; | ||
| const fn = (value, theme) => { | ||
| const _value = tokenToCSSVar(scale, value)(theme); | ||
| var fn = function fn(value, theme) { | ||
| var _transform; | ||
| let result = transform?.(_value, theme) ?? _value; | ||
| var _value = tokenToCSSVar(scale, value)(theme); | ||
| var result = (_transform = transform == null ? void 0 : transform(_value, theme)) != null ? _transform : _value; | ||
| if (compose) { | ||
@@ -36,10 +56,10 @@ result = compose(result, theme); | ||
| function toConfig(scale, transform) { | ||
| return property => { | ||
| const result = { | ||
| property, | ||
| scale | ||
| return function (property) { | ||
| var result = { | ||
| property: property, | ||
| scale: scale | ||
| }; | ||
| result.transform = createTransform({ | ||
| scale, | ||
| transform | ||
| scale: scale, | ||
| transform: transform | ||
| }); | ||
@@ -50,18 +70,19 @@ return result; | ||
| const getRtl = ({ | ||
| rtl, | ||
| ltr | ||
| }) => theme => theme.direction === "rtl" ? rtl : ltr; | ||
| var getRtl = function getRtl(_ref) { | ||
| var rtl = _ref.rtl, | ||
| ltr = _ref.ltr; | ||
| return function (theme) { | ||
| return theme.direction === "rtl" ? rtl : ltr; | ||
| }; | ||
| }; | ||
| function logical(options) { | ||
| const { | ||
| property, | ||
| scale, | ||
| transform | ||
| } = options; | ||
| var property = options.property, | ||
| scale = options.scale, | ||
| transform = options.transform; | ||
| return { | ||
| scale, | ||
| scale: scale, | ||
| property: getRtl(property), | ||
| transform: scale ? createTransform({ | ||
| scale, | ||
| scale: scale, | ||
| compose: transform | ||
@@ -72,2 +93,4 @@ }) : transform | ||
| var _spaceXTemplate, _spaceYTemplate; | ||
| /** | ||
@@ -79,10 +102,10 @@ * The CSS transform order following the upcoming spec from CSSWG | ||
| */ | ||
| const transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| var transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| function getTransformTemplate() { | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))", ...transformTemplate].join(" "); | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))"].concat(transformTemplate).join(" "); | ||
| } | ||
| function getTransformGpuTemplate() { | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)", ...transformTemplate].join(" "); | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)"].concat(transformTemplate).join(" "); | ||
| } | ||
| const filterTemplate = { | ||
| var filterTemplate = { | ||
| "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -99,3 +122,3 @@ "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| }; | ||
| const backdropFilterTemplate = { | ||
| var backdropFilterTemplate = { | ||
| backdropFilter: ["var(--chakra-backdrop-blur)", "var(--chakra-backdrop-brightness)", "var(--chakra-backdrop-contrast)", "var(--chakra-backdrop-grayscale)", "var(--chakra-backdrop-hue-rotate)", "var(--chakra-backdrop-invert)", "var(--chakra-backdrop-opacity)", "var(--chakra-backdrop-saturate)", "var(--chakra-backdrop-sepia)"].join(" "), | ||
@@ -114,9 +137,9 @@ "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| return { | ||
| "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`, | ||
| "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`, | ||
| "--chakra-ring-offset-shadow": "var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)", | ||
| "--chakra-ring-shadow": "var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)", | ||
| "--chakra-ring-width": value, | ||
| boxShadow: [`var(--chakra-ring-offset-shadow)`, `var(--chakra-ring-shadow)`, `var(--chakra-shadow, 0 0 #0000)`].join(", ") | ||
| boxShadow: ["var(--chakra-ring-offset-shadow)", "var(--chakra-ring-shadow)", "var(--chakra-shadow, 0 0 #0000)"].join(", ") | ||
| }; | ||
| } | ||
| const flexDirectionTemplate = { | ||
| var flexDirectionTemplate = { | ||
| "row-reverse": { | ||
@@ -131,17 +154,100 @@ space: "--chakra-space-x-reverse", | ||
| }; | ||
| const owlSelector = "& > :not(style) ~ :not(style)"; | ||
| const spaceXTemplate = { | ||
| [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))" | ||
| var owlSelector = "& > :not(style) ~ :not(style)"; | ||
| var spaceXTemplate = (_spaceXTemplate = {}, _spaceXTemplate[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))" | ||
| }, _spaceXTemplate); | ||
| var spaceYTemplate = (_spaceYTemplate = {}, _spaceYTemplate[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))" | ||
| }, _spaceYTemplate); | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function _inherits(subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function"); | ||
| } | ||
| }; | ||
| const spaceYTemplate = { | ||
| [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))" | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) _setPrototypeOf(subClass, superClass); | ||
| } | ||
| function _wrapRegExp() { | ||
| _wrapRegExp = function (re, groups) { | ||
| return new BabelRegExp(re, undefined, groups); | ||
| }; | ||
| var _super = RegExp.prototype; | ||
| var _groups = new WeakMap(); | ||
| function BabelRegExp(re, flags, groups) { | ||
| var _this = new RegExp(re, flags); | ||
| _groups.set(_this, groups || _groups.get(re)); | ||
| return _setPrototypeOf(_this, BabelRegExp.prototype); | ||
| } | ||
| }; | ||
| const directionMap = { | ||
| _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 = arguments; | ||
| if (typeof args[args.length - 1] !== "object") { | ||
| args = [].slice.call(args); | ||
| 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); | ||
| } | ||
| var directionMap = { | ||
| "to-t": "to top", | ||
@@ -156,71 +262,88 @@ "to-tr": "to top right", | ||
| }; | ||
| const valueSet = new Set(Object.values(directionMap)); | ||
| const globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| var valueSet = new Set(Object.values(directionMap)); | ||
| var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| const trimSpace = str => str.trim(); | ||
| var trimSpace = function trimSpace(str) { | ||
| return str.trim(); | ||
| }; | ||
| function parseGradient(value, theme) { | ||
| var _regex$exec$groups, _regex$exec; | ||
| if (value == null || globalSet.has(value)) return value; | ||
| const regex = /(?<type>^[a-z-A-Z]+)\((?<values>(.*))\)/g; | ||
| const { | ||
| type, | ||
| values | ||
| } = regex.exec(value)?.groups ?? {}; | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, { | ||
| type: 1, | ||
| values: 2 | ||
| }); | ||
| var _ref = (_regex$exec$groups = (_regex$exec = regex.exec(value)) == null ? void 0 : _regex$exec.groups) != null ? _regex$exec$groups : {}, | ||
| type = _ref.type, | ||
| values = _ref.values; | ||
| if (!type || !values) return value; | ||
| const _type = type.includes("-gradient") ? type : `${type}-gradient`; | ||
| var _type = type.includes("-gradient") ? type : type + "-gradient"; | ||
| const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean); | ||
| if (stops?.length === 0) return value; | ||
| const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| var _values$split$map$fil = values.split(",").map(trimSpace).filter(Boolean), | ||
| maybeDirection = _values$split$map$fil[0], | ||
| stops = _values$split$map$fil.slice(1); | ||
| if ((stops == null ? void 0 : stops.length) === 0) return value; | ||
| var direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| stops.unshift(direction); | ||
| const _values = stops.map(stop => { | ||
| var _values = stops.map(function (stop) { | ||
| // if stop is valid shorthand direction, return it | ||
| if (valueSet.has(stop)) return stop; | ||
| const firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| var firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop]; | ||
| var _ref2 = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop], | ||
| _color = _ref2[0], | ||
| _stop = _ref2[1]; | ||
| const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| const key = `colors.${_color}`; | ||
| const color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| var key = "colors." + _color; | ||
| var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| return _stopOrFunc ? [color, _stopOrFunc].join(" ") : color; | ||
| }); | ||
| return `${_type}(${_values.join(", ")})`; | ||
| return _type + "(" + _values.join(", ") + ")"; | ||
| } | ||
| const isCSSFunction = value => { | ||
| var isCSSFunction = function isCSSFunction(value) { | ||
| return utils.isString(value) && value.includes("(") && value.includes(")"); | ||
| }; | ||
| const gradientTransform = (value, theme) => parseGradient(value, theme ?? {}); | ||
| var gradientTransform = function gradientTransform(value, theme) { | ||
| return parseGradient(value, theme != null ? theme : {}); | ||
| }; | ||
| const analyzeCSSValue = value => { | ||
| const num = parseFloat(value.toString()); | ||
| const unit = value.toString().replace(String(num), ""); | ||
| var analyzeCSSValue = function analyzeCSSValue(value) { | ||
| var num = parseFloat(value.toString()); | ||
| var unit = value.toString().replace(String(num), ""); | ||
| return { | ||
| unitless: !unit, | ||
| value: num, | ||
| unit | ||
| unit: unit | ||
| }; | ||
| }; | ||
| const wrap = str => value => `${str}(${value})`; | ||
| var wrap = function wrap(str) { | ||
| return function (value) { | ||
| return str + "(" + value + ")"; | ||
| }; | ||
| }; | ||
| const transformFunctions = { | ||
| filter(value) { | ||
| var transformFunctions = { | ||
| filter: function filter(value) { | ||
| return value !== "auto" ? value : filterTemplate; | ||
| }, | ||
| backdropFilter(value) { | ||
| backdropFilter: function backdropFilter(value) { | ||
| return value !== "auto" ? value : backdropFilterTemplate; | ||
| }, | ||
| ring(value) { | ||
| ring: function ring(value) { | ||
| return getRingTemplate(transformFunctions.px(value)); | ||
| }, | ||
| bgClip(value) { | ||
| bgClip: function bgClip(value) { | ||
| return value === "text" ? { | ||
@@ -233,4 +356,3 @@ color: "transparent", | ||
| }, | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === "auto") return getTransformTemplate(); | ||
@@ -240,17 +362,15 @@ if (value === "auto-gpu") return getTransformGpuTemplate(); | ||
| }, | ||
| px(value) { | ||
| px: function px(value) { | ||
| if (value == null) return value; | ||
| const { | ||
| unitless | ||
| } = analyzeCSSValue(value); | ||
| return unitless || utils.isNumber(value) ? `${value}px` : value; | ||
| }, | ||
| fraction(value) { | ||
| return !utils.isNumber(value) || value > 1 ? value : `${value * 100}%`; | ||
| var _analyzeCSSValue = analyzeCSSValue(value), | ||
| unitless = _analyzeCSSValue.unitless; | ||
| return unitless || utils.isNumber(value) ? value + "px" : value; | ||
| }, | ||
| float(value, theme) { | ||
| const map = { | ||
| fraction: function fraction(value) { | ||
| return !utils.isNumber(value) || value > 1 ? value : value * 100 + "%"; | ||
| }, | ||
| "float": function float(value, theme) { | ||
| var map = { | ||
| left: "right", | ||
@@ -261,9 +381,7 @@ right: "left" | ||
| }, | ||
| degree(value) { | ||
| degree: function degree(value) { | ||
| if (utils.isCssVar(value) || value == null) return value; | ||
| const unitless = utils.isString(value) && !value.endsWith("deg"); | ||
| return utils.isNumber(value) || unitless ? `${value}deg` : value; | ||
| var unitless = utils.isString(value) && !value.endsWith("deg"); | ||
| return utils.isNumber(value) || unitless ? value + "deg" : value; | ||
| }, | ||
| gradient: gradientTransform, | ||
@@ -280,11 +398,9 @@ blur: wrap("blur"), | ||
| sepia: wrap("sepia"), | ||
| bgImage(value) { | ||
| bgImage: function bgImage(value) { | ||
| if (value == null) return value; | ||
| const prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? `url(${value})` : value; | ||
| var prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? "url(" + value + ")" : value; | ||
| }, | ||
| outline(value) { | ||
| const isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| outline: function outline(value) { | ||
| var isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| return value !== null && isNoneOrZero ? { | ||
@@ -297,9 +413,10 @@ outline: "2px solid transparent", | ||
| }, | ||
| flexDirection: function flexDirection(value) { | ||
| var _flexDirectionTemplat; | ||
| flexDirection(value) { | ||
| const { | ||
| space, | ||
| divide | ||
| } = flexDirectionTemplate[value] ?? {}; | ||
| const result = { | ||
| var _ref = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {}, | ||
| space = _ref.space, | ||
| divide = _ref.divide; | ||
| var result = { | ||
| flexDirection: value | ||
@@ -311,6 +428,5 @@ }; | ||
| } | ||
| }; | ||
| const t = { | ||
| var t = { | ||
| borderWidths: toConfig("borderWidths"), | ||
@@ -323,38 +439,33 @@ borderStyles: toConfig("borderStyles"), | ||
| spaceT: toConfig("space", transformFunctions.px), | ||
| degreeT(property) { | ||
| degreeT: function degreeT(property) { | ||
| return { | ||
| property, | ||
| property: property, | ||
| transform: transformFunctions.degree | ||
| }; | ||
| }, | ||
| prop(property, scale, transform) { | ||
| return { | ||
| property, | ||
| scale, | ||
| ...(scale && { | ||
| transform: createTransform({ | ||
| scale, | ||
| transform | ||
| }) | ||
| prop: function prop(property, scale, transform) { | ||
| return _extends({ | ||
| property: property, | ||
| scale: scale | ||
| }, scale && { | ||
| transform: createTransform({ | ||
| scale: scale, | ||
| transform: transform | ||
| }) | ||
| }; | ||
| }); | ||
| }, | ||
| propT(property, transform) { | ||
| propT: function propT(property, transform) { | ||
| return { | ||
| property, | ||
| transform | ||
| property: property, | ||
| transform: transform | ||
| }; | ||
| }, | ||
| sizes: toConfig("sizes", transformFunctions.px), | ||
| sizesT: toConfig("sizes", transformFunctions.fraction), | ||
| shadows: toConfig("shadows"), | ||
| logical, | ||
| logical: logical, | ||
| blur: toConfig("blur", transformFunctions.blur) | ||
| }; | ||
| const background = { | ||
| var background = { | ||
| background: t.colors("background"), | ||
@@ -387,3 +498,3 @@ backgroundColor: t.colors("backgroundColor"), | ||
| const border = { | ||
| var border = { | ||
| border: t.borders("border"), | ||
@@ -519,3 +630,3 @@ borderWidth: t.borderWidths("borderWidth"), | ||
| const color = { | ||
| var color = { | ||
| color: t.colors("color"), | ||
@@ -527,3 +638,3 @@ textColor: t.colors("color"), | ||
| const effect = { | ||
| var effect = { | ||
| boxShadow: t.shadows("boxShadow"), | ||
@@ -543,3 +654,3 @@ mixBlendMode: true, | ||
| const filter = { | ||
| var filter = { | ||
| filter: { | ||
@@ -566,3 +677,3 @@ transform: transformFunctions.filter | ||
| const flexbox = { | ||
| var flexbox = { | ||
| alignItems: true, | ||
@@ -577,17 +688,21 @@ alignContent: true, | ||
| experimental_spaceX: { | ||
| static: spaceXTemplate, | ||
| "static": spaceXTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null; | ||
| } | ||
| }) | ||
| }, | ||
| experimental_spaceY: { | ||
| static: spaceYTemplate, | ||
| "static": spaceYTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null; | ||
| } | ||
| }) | ||
@@ -611,3 +726,3 @@ }, | ||
| const grid = { | ||
| var grid = { | ||
| gridGap: t.space("gridGap"), | ||
@@ -632,3 +747,3 @@ gridColumnGap: t.space("gridColumnGap"), | ||
| const interactivity = { | ||
| var interactivity = { | ||
| appearance: true, | ||
@@ -646,3 +761,3 @@ cursor: true, | ||
| const layout = { | ||
| var layout = { | ||
| width: t.sizesT("width"), | ||
@@ -672,3 +787,3 @@ inlineSize: t.sizesT("inlineSize"), | ||
| boxDecorationBreak: true, | ||
| float: t.propT("float", transformFunctions.float), | ||
| "float": t.propT("float", transformFunctions["float"]), | ||
| objectFit: true, | ||
@@ -694,3 +809,3 @@ objectPosition: true, | ||
| const list = { | ||
| var list = { | ||
| listStyleType: true, | ||
@@ -703,3 +818,3 @@ listStylePosition: true, | ||
| const srOnly = { | ||
| var srOnly = { | ||
| border: "0px", | ||
@@ -715,3 +830,3 @@ clip: "rect(0, 0, 0, 0)", | ||
| }; | ||
| const srFocusable = { | ||
| var srFocusable = { | ||
| position: "static", | ||
@@ -727,8 +842,8 @@ width: "auto", | ||
| const getWithPriority = (theme, key, styles) => { | ||
| const result = {}; | ||
| const obj = utils.memoizedGet(theme, key, {}); | ||
| var getWithPriority = function getWithPriority(theme, key, styles) { | ||
| var result = {}; | ||
| var obj = utils.memoizedGet(theme, key, {}); | ||
| for (const prop in obj) { | ||
| const isInStyles = prop in styles && styles[prop] != null; | ||
| for (var prop in obj) { | ||
| var isInStyles = prop in styles && styles[prop] != null; | ||
| if (!isInStyles) result[prop] = obj[prop]; | ||
@@ -740,5 +855,5 @@ } | ||
| const others = { | ||
| var others = { | ||
| srOnly: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) return srOnly; | ||
@@ -748,19 +863,24 @@ if (value === "focusable") return srFocusable; | ||
| } | ||
| }, | ||
| layerStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "layerStyles." + value, styles); | ||
| } | ||
| }, | ||
| textStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "textStyles." + value, styles); | ||
| } | ||
| }, | ||
| apply: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, value, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, value, styles); | ||
| } | ||
| } | ||
| }; | ||
| const position = { | ||
| var position = { | ||
| position: true, | ||
@@ -806,3 +926,3 @@ pos: t.prop("position"), | ||
| */ | ||
| const ring = { | ||
| var ring = { | ||
| ring: { | ||
@@ -817,3 +937,3 @@ transform: transformFunctions.ring | ||
| const space = { | ||
| var space = { | ||
| margin: t.spaceT("margin"), | ||
@@ -874,3 +994,3 @@ marginTop: t.spaceT("marginTop"), | ||
| const textDecoration = { | ||
| var textDecoration = { | ||
| textDecorationColor: t.colors("textDecorationColor"), | ||
@@ -888,3 +1008,3 @@ textDecoration: true, | ||
| const transform = { | ||
| var transform = { | ||
| clipPath: true, | ||
@@ -903,3 +1023,3 @@ transform: t.propT("transform", transformFunctions.transform), | ||
| const transition = { | ||
| var transition = { | ||
| transition: true, | ||
@@ -914,3 +1034,3 @@ transitionDelay: true, | ||
| const typography = { | ||
| var typography = { | ||
| fontFamily: t.prop("fontFamily", "fonts"), | ||
@@ -929,3 +1049,3 @@ fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px), | ||
| noOfLines: { | ||
| static: { | ||
| "static": { | ||
| overflow: "hidden", | ||
@@ -941,3 +1061,3 @@ textOverflow: "ellipsis", | ||
| isTruncated: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) { | ||
@@ -951,3 +1071,2 @@ return { | ||
| } | ||
| } | ||
@@ -959,20 +1078,86 @@ }; | ||
| const group = { | ||
| hover: selector => `${selector}:hover &, ${selector}[data-hover] &`, | ||
| focus: selector => `${selector}:focus &, ${selector}[data-focus] &`, | ||
| focusVisible: selector => `${selector}:focus-visible &`, | ||
| active: selector => `${selector}:active &, ${selector}[data-active] &`, | ||
| disabled: selector => `${selector}:disabled &, ${selector}[data-disabled] &`, | ||
| invalid: selector => `${selector}:invalid &, ${selector}[data-invalid] &`, | ||
| checked: selector => `${selector}:checked &, ${selector}[data-checked] &`, | ||
| indeterminate: selector => `${selector}:indeterminate &, ${selector}[aria-checked=mixed] &, ${selector}[data-indeterminate] &`, | ||
| readOnly: selector => `${selector}:read-only &, ${selector}[readonly] &, ${selector}[data-read-only] &`, | ||
| expanded: selector => `${selector}:read-only &, ${selector}[aria-expanded=true] &, ${selector}[data-expanded] &` | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _createForOfIteratorHelperLoose(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (it) return (it = it.call(o)).next.bind(it); | ||
| 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."); | ||
| } | ||
| var group = { | ||
| hover: function hover(selector) { | ||
| return selector + ":hover &, " + selector + "[data-hover] &"; | ||
| }, | ||
| focus: function focus(selector) { | ||
| return selector + ":focus &, " + selector + "[data-focus] &"; | ||
| }, | ||
| focusVisible: function focusVisible(selector) { | ||
| return selector + ":focus-visible &"; | ||
| }, | ||
| active: function active(selector) { | ||
| return selector + ":active &, " + selector + "[data-active] &"; | ||
| }, | ||
| disabled: function disabled(selector) { | ||
| return selector + ":disabled &, " + selector + "[data-disabled] &"; | ||
| }, | ||
| invalid: function invalid(selector) { | ||
| return selector + ":invalid &, " + selector + "[data-invalid] &"; | ||
| }, | ||
| checked: function checked(selector) { | ||
| return selector + ":checked &, " + selector + "[data-checked] &"; | ||
| }, | ||
| indeterminate: function indeterminate(selector) { | ||
| return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &"; | ||
| }, | ||
| readOnly: function readOnly(selector) { | ||
| return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &"; | ||
| }, | ||
| expanded: function expanded(selector) { | ||
| return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &"; | ||
| } | ||
| }; | ||
| const toGroup = fn => merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| var toGroup = function toGroup(fn) { | ||
| return merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| }; | ||
| const merge = (fn, ...selectors) => selectors.map(fn).join(", "); | ||
| var merge = function merge(fn) { | ||
| for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| selectors[_key - 1] = arguments[_key]; | ||
| } | ||
| const pseudoSelectors = { | ||
| return selectors.map(fn).join(", "); | ||
| }; | ||
| var pseudoSelectors = { | ||
| /** | ||
@@ -1225,12 +1410,14 @@ * Styles for CSS selector `&:hover` | ||
| }; | ||
| const pseudoPropNames = utils.objectKeys(pseudoSelectors); | ||
| var pseudoPropNames = utils.objectKeys(pseudoSelectors); | ||
| const systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| const layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| const layoutPropNames = utils.objectKeys(layoutSystem); | ||
| const propNames = [...utils.objectKeys(systemProps), ...pseudoPropNames]; | ||
| const styleProps = { ...systemProps, | ||
| ...pseudoSelectors | ||
| var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| var layoutPropNames = utils.objectKeys(layoutSystem); | ||
| var propNames = [].concat(utils.objectKeys(systemProps), pseudoPropNames); | ||
| var styleProps = _extends({}, systemProps, pseudoSelectors); | ||
| var isStyleProp = function isStyleProp(prop) { | ||
| return prop in styleProps; | ||
| }; | ||
| const isStyleProp = prop => prop in styleProps; | ||
@@ -1248,64 +1435,80 @@ /** | ||
| const expandResponsive = styles => theme => { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| const { | ||
| isResponsive, | ||
| toArrayValue, | ||
| media: medias | ||
| } = theme.__breakpoints; | ||
| const computedStyles = {}; | ||
| var expandResponsive = function expandResponsive(styles) { | ||
| return function (theme) { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| var _theme$__breakpoints = theme.__breakpoints, | ||
| isResponsive = _theme$__breakpoints.isResponsive, | ||
| toArrayValue = _theme$__breakpoints.toArrayValue, | ||
| medias = _theme$__breakpoints.media; | ||
| var computedStyles = {}; | ||
| for (const key in styles) { | ||
| let value = utils.runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| for (var key in styles) { | ||
| var value = utils.runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| value = utils.isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| value = utils.isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| const queries = value.slice(0, medias.length).length; | ||
| var queries = value.slice(0, medias.length).length; | ||
| for (let index = 0; index < queries; index += 1) { | ||
| const media = medias?.[index]; | ||
| for (var index = 0; index < queries; index += 1) { | ||
| var media = medias == null ? void 0 : medias[index]; | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| if (value[index] == null) { | ||
| continue; | ||
| if (value[index] == null) { | ||
| continue; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| } | ||
| return computedStyles; | ||
| return computedStyles; | ||
| }; | ||
| }; | ||
| const isCSSVariableTokenValue = (key, value) => key.startsWith("--") && utils.isString(value) && !utils.isCssVar(value); | ||
| var isCSSVariableTokenValue = function isCSSVariableTokenValue(key, value) { | ||
| return key.startsWith("--") && utils.isString(value) && !utils.isCssVar(value); | ||
| }; | ||
| const resolveTokenValue = (theme, value) => { | ||
| var resolveTokenValue = function resolveTokenValue(theme, value) { | ||
| var _ref, _getVar2; | ||
| if (value == null) return value; | ||
| const getVar = val => theme.__cssMap?.[val]?.varRef; | ||
| var getVar = function getVar(val) { | ||
| var _theme$__cssMap, _theme$__cssMap$val; | ||
| const getValue = val => getVar(val) ?? val; | ||
| return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef; | ||
| }; | ||
| const valueSplit = value.split(",").map(v => v.trim()); | ||
| const [tokenValue, fallbackValue] = valueSplit; | ||
| value = getVar(tokenValue) ?? getValue(fallbackValue) ?? getValue(value); | ||
| var getValue = function getValue(val) { | ||
| var _getVar; | ||
| return (_getVar = getVar(val)) != null ? _getVar : val; | ||
| }; | ||
| var valueSplit = value.split(",").map(function (v) { | ||
| return v.trim(); | ||
| }); | ||
| var tokenValue = valueSplit[0], | ||
| fallbackValue = valueSplit[1]; | ||
| value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value); | ||
| return value; | ||
@@ -1315,16 +1518,22 @@ }; | ||
| function getCss(options) { | ||
| const { | ||
| configs = {}, | ||
| pseudos = {}, | ||
| theme | ||
| } = 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; | ||
| const css = (stylesOrFn, nested = false) => { | ||
| const _styles = utils.runIfFn(stylesOrFn, theme); | ||
| var css = function css(stylesOrFn, nested) { | ||
| if (nested === void 0) { | ||
| nested = false; | ||
| } | ||
| const styles = expandResponsive(_styles)(theme); | ||
| let computedStyles = {}; | ||
| var _styles = utils.runIfFn(stylesOrFn, theme); | ||
| for (let key in styles) { | ||
| const valueOrFn = styles[key]; | ||
| var styles = expandResponsive(_styles)(theme); | ||
| var computedStyles = {}; | ||
| for (var key in styles) { | ||
| var _config$transform, _config, _config2, _config3, _config4; | ||
| var valueOrFn = styles[key]; | ||
| /** | ||
@@ -1335,3 +1544,3 @@ * allows the user to pass functional values | ||
| let value = utils.runIfFn(valueOrFn, theme); | ||
| var value = utils.runIfFn(valueOrFn, theme); | ||
| /** | ||
@@ -1358,3 +1567,3 @@ * converts pseudo shorthands to valid selector | ||
| let config = configs[key]; | ||
| var config = configs[key]; | ||
@@ -1368,3 +1577,5 @@ if (config === true) { | ||
| if (utils.isObject(value)) { | ||
| computedStyles[key] = computedStyles[key] ?? {}; | ||
| var _computedStyles$key; | ||
| computedStyles[key] = (_computedStyles$key = computedStyles[key]) != null ? _computedStyles$key : {}; | ||
| computedStyles[key] = utils.mergeWith({}, computedStyles[key], css(value, true)); | ||
@@ -1374,3 +1585,3 @@ continue; | ||
| let rawValue = config?.transform?.(value, theme, _styles) ?? value; | ||
| var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value; | ||
| /** | ||
@@ -1384,3 +1595,3 @@ * Used for `layerStyle`, `textStyle` and `apply`. After getting the | ||
| rawValue = config?.processResult ? css(rawValue, true) : rawValue; | ||
| rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue; | ||
| /** | ||
@@ -1394,6 +1605,6 @@ * allows us define css properties for RTL and LTR. | ||
| const configProperty = utils.runIfFn(config?.property, theme); | ||
| var configProperty = utils.runIfFn((_config3 = config) == null ? void 0 : _config3.property, theme); | ||
| if (!nested && config?.static) { | ||
| const staticStyles = utils.runIfFn(config.static, theme); | ||
| if (!nested && (_config4 = config) != null && _config4["static"]) { | ||
| var staticStyles = utils.runIfFn(config["static"], theme); | ||
| computedStyles = utils.mergeWith({}, computedStyles, staticStyles); | ||
@@ -1403,3 +1614,4 @@ } | ||
| if (configProperty && Array.isArray(configProperty)) { | ||
| for (const property of configProperty) { | ||
| for (var _iterator = _createForOfIteratorHelperLoose(configProperty), _step; !(_step = _iterator()).done;) { | ||
| var property = _step.value; | ||
| computedStyles[property] = rawValue; | ||
@@ -1434,9 +1646,11 @@ } | ||
| } | ||
| const css = styles => theme => { | ||
| const cssFn = getCss({ | ||
| theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| var css = function css(styles) { | ||
| return function (theme) { | ||
| var cssFn = getCss({ | ||
| theme: theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| }; | ||
| }; | ||
@@ -1456,38 +1670,102 @@ | ||
| const toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, ""); | ||
| var toExpression = function toExpression(operator) { | ||
| for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| operands[_key - 1] = arguments[_key]; | ||
| } | ||
| const add = (...operands) => `calc(${toExpression("+", ...operands)})`; | ||
| return operands.map(resolveReference).join(" " + operator + " ").replace(/calc/g, ""); | ||
| }; | ||
| const subtract = (...operands) => `calc(${toExpression("-", ...operands)})`; | ||
| var _add = function add() { | ||
| for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| operands[_key2] = arguments[_key2]; | ||
| } | ||
| const multiply = (...operands) => `calc(${toExpression("*", ...operands)})`; | ||
| return "calc(" + toExpression.apply(void 0, ["+"].concat(operands)) + ")"; | ||
| }; | ||
| const divide = (...operands) => `calc(${toExpression("/", ...operands)})`; | ||
| var _subtract = function subtract() { | ||
| for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| operands[_key3] = arguments[_key3]; | ||
| } | ||
| const negate = x => { | ||
| const value = resolveReference(x); | ||
| return "calc(" + toExpression.apply(void 0, ["-"].concat(operands)) + ")"; | ||
| }; | ||
| var _multiply = function multiply() { | ||
| for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
| operands[_key4] = arguments[_key4]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["*"].concat(operands)) + ")"; | ||
| }; | ||
| var _divide = function divide() { | ||
| for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
| operands[_key5] = arguments[_key5]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["/"].concat(operands)) + ")"; | ||
| }; | ||
| var _negate = function negate(x) { | ||
| var value = resolveReference(x); | ||
| if (value != null && !Number.isNaN(parseFloat(value))) { | ||
| return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`; | ||
| return String(value).startsWith("-") ? String(value).slice(1) : "-" + value; | ||
| } | ||
| return multiply(value, -1); | ||
| return _multiply(value, -1); | ||
| }; | ||
| const calc = Object.assign(x => ({ | ||
| add: (...operands) => calc(add(x, ...operands)), | ||
| subtract: (...operands) => calc(subtract(x, ...operands)), | ||
| multiply: (...operands) => calc(multiply(x, ...operands)), | ||
| divide: (...operands) => calc(divide(x, ...operands)), | ||
| negate: () => calc(negate(x)), | ||
| toString: () => x.toString() | ||
| }), { | ||
| add, | ||
| subtract, | ||
| multiply, | ||
| divide, | ||
| negate | ||
| var calc = Object.assign(function (x) { | ||
| return { | ||
| add: function add() { | ||
| for (var _len6 = arguments.length, operands = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) { | ||
| operands[_key6] = arguments[_key6]; | ||
| } | ||
| return calc(_add.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| subtract: function subtract() { | ||
| for (var _len7 = arguments.length, operands = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) { | ||
| operands[_key7] = arguments[_key7]; | ||
| } | ||
| return calc(_subtract.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| multiply: function multiply() { | ||
| for (var _len8 = arguments.length, operands = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) { | ||
| operands[_key8] = arguments[_key8]; | ||
| } | ||
| return calc(_multiply.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| divide: function divide() { | ||
| for (var _len9 = arguments.length, operands = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) { | ||
| operands[_key9] = arguments[_key9]; | ||
| } | ||
| return calc(_divide.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| negate: function negate() { | ||
| return calc(_negate(x)); | ||
| }, | ||
| toString: function toString() { | ||
| return x.toString(); | ||
| } | ||
| }; | ||
| }, { | ||
| add: _add, | ||
| subtract: _subtract, | ||
| multiply: _multiply, | ||
| divide: _divide, | ||
| negate: _negate | ||
| }); | ||
| function replaceWhiteSpace(value, replaceValue = "-") { | ||
| function replaceWhiteSpace(value, replaceValue) { | ||
| if (replaceValue === void 0) { | ||
| replaceValue = "-"; | ||
| } | ||
| return value.replace(/\s+/g, replaceValue); | ||
@@ -1497,19 +1775,27 @@ } | ||
| function escape(value) { | ||
| const valueStr = replaceWhiteSpace(value.toString()); | ||
| var valueStr = replaceWhiteSpace(value.toString()); | ||
| if (valueStr.includes("\\.")) return value; | ||
| const isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", `\\.`) : value; | ||
| var isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", "\\.") : value; | ||
| } | ||
| function addPrefix(value, prefix = "") { | ||
| function addPrefix(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return [prefix, escape(value)].filter(Boolean).join("-"); | ||
| } | ||
| function toVarReference(name, fallback) { | ||
| return `var(${escape(name)}${fallback ? `, ${fallback}` : ""})`; | ||
| return "var(" + escape(name) + (fallback ? ", " + fallback : "") + ")"; | ||
| } | ||
| function toVarDefinition(value, prefix = "") { | ||
| return `--${addPrefix(value, prefix)}`; | ||
| function toVarDefinition(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return "--" + addPrefix(value, prefix); | ||
| } | ||
| function cssVar(name, fallback, cssVarPrefix) { | ||
| const cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| var cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| return { | ||
@@ -1522,14 +1808,17 @@ variable: cssVariable, | ||
| function createThemeVars(target, options) { | ||
| const context = { | ||
| var context = { | ||
| cssMap: {}, | ||
| cssVars: {} | ||
| }; | ||
| utils.walkObject(target, (value, path) => { | ||
| utils.walkObject(target, function (value, path) { | ||
| var _tokenHandlerMap$firs; | ||
| // firstKey will be e.g. "space" | ||
| const [firstKey] = path; | ||
| const handler = tokenHandlerMap[firstKey] ?? tokenHandlerMap.defaultHandler; | ||
| const { | ||
| cssVars, | ||
| cssMap | ||
| } = handler(path, value, options); | ||
| var firstKey = path[0]; | ||
| var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler; | ||
| var _handler = handler(path, value, options), | ||
| cssVars = _handler.cssVars, | ||
| cssMap = _handler.cssMap; | ||
| Object.assign(context.cssVars, cssVars); | ||
@@ -1544,43 +1833,44 @@ Object.assign(context.cssMap, cssMap); | ||
| */ | ||
| const tokenHandlerMap = { | ||
| space: (keys, value, options) => { | ||
| const properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| const [firstKey, ...referenceKeys] = keys; | ||
| const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`; | ||
| const negativeVarKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(negativeVarKey, undefined, options.cssVarPrefix); | ||
| const negativeValue = calc.negate(value); | ||
| const varRef = calc.negate(reference); | ||
| var tokenHandlerMap = { | ||
| space: function space(keys, value, options) { | ||
| var _extends2; | ||
| var properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| var firstKey = keys[0], | ||
| referenceKeys = keys.slice(1); | ||
| var negativeLookupKey = firstKey + ".-" + referenceKeys.join("."); | ||
| var negativeVarKey = keys.join("-"); | ||
| var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar.variable, | ||
| reference = _cssVar.reference; | ||
| var negativeValue = calc.negate(value); | ||
| var varRef = calc.negate(reference); | ||
| return { | ||
| cssVars: properties.cssVars, | ||
| cssMap: { ...properties.cssMap, | ||
| [negativeLookupKey]: { | ||
| value: `${negativeValue}`, | ||
| var: `${variable}`, | ||
| varRef | ||
| } | ||
| } | ||
| cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = { | ||
| value: "" + negativeValue, | ||
| "var": "" + variable, | ||
| varRef: varRef | ||
| }, _extends2)) | ||
| }; | ||
| }, | ||
| defaultHandler: (keys, value, options) => { | ||
| const lookupKey = keys.join("."); | ||
| const varKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(varKey, undefined, options.cssVarPrefix); | ||
| defaultHandler: function defaultHandler(keys, value, options) { | ||
| var _cssVars, _cssMap; | ||
| var lookupKey = keys.join("."); | ||
| var varKey = keys.join("-"); | ||
| var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar2.variable, | ||
| reference = _cssVar2.reference; | ||
| return { | ||
| cssVars: { | ||
| [variable]: value | ||
| }, | ||
| cssMap: { | ||
| [lookupKey]: { | ||
| value, | ||
| var: variable, | ||
| varRef: reference | ||
| } | ||
| } | ||
| cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars), | ||
| cssMap: (_cssMap = {}, _cssMap[lookupKey] = { | ||
| value: value, | ||
| "var": variable, | ||
| varRef: reference | ||
| }, _cssMap) | ||
| }; | ||
@@ -1590,14 +1880,29 @@ } | ||
| const tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| var _excluded = ["__cssMap", "__cssVars", "__breakpoints"]; | ||
| var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function extractTokens(theme) { | ||
| const _tokens = tokens; | ||
| var _tokens = tokens; | ||
| return utils.pick(theme, _tokens); | ||
| } | ||
| function omitVars(rawTheme) { | ||
| const { | ||
| __cssMap, | ||
| __cssVars, | ||
| __breakpoints, | ||
| ...cleanTheme | ||
| } = rawTheme; | ||
| rawTheme.__cssMap; | ||
| rawTheme.__cssVars; | ||
| rawTheme.__breakpoints; | ||
| var cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| return cleanTheme; | ||
@@ -1607,2 +1912,4 @@ } | ||
| function toCSSVar(rawTheme) { | ||
| var _theme$config; | ||
| /** | ||
@@ -1612,22 +1919,14 @@ * In the case the theme has already been converted to css-var (e.g extending the theme), | ||
| */ | ||
| const theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| var theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| const tokens = extractTokens(theme); | ||
| const cssVarPrefix = theme.config?.cssVarPrefix; | ||
| const { | ||
| /** | ||
| * This is more like a dictionary of tokens users will type `green.500`, | ||
| * and their equivalent css variable. | ||
| */ | ||
| cssMap, | ||
| var tokens = extractTokens(theme); | ||
| var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix; | ||
| /** | ||
| * The extracted css variables will be stored here, and used in | ||
| * the emotion's <Global/> component to attach variables to `:root` | ||
| */ | ||
| cssVars | ||
| } = createThemeVars(tokens, { | ||
| cssVarPrefix | ||
| }); | ||
| const defaultCssVars = { | ||
| var _createThemeVars = createThemeVars(tokens, { | ||
| cssVarPrefix: cssVarPrefix | ||
| }), | ||
| cssMap = _createThemeVars.cssMap, | ||
| cssVars = _createThemeVars.cssVars; | ||
| var defaultCssVars = { | ||
| "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -1643,5 +1942,3 @@ "--chakra-ring-offset-width": "0px", | ||
| Object.assign(theme, { | ||
| __cssVars: { ...defaultCssVars, | ||
| ...cssVars | ||
| }, | ||
| __cssVars: _extends({}, defaultCssVars, cssVars), | ||
| __cssMap: cssMap, | ||
@@ -1648,0 +1945,0 @@ __breakpoints: utils.analyzeBreakpoints(theme.breakpoints) |
@@ -7,19 +7,39 @@ 'use strict'; | ||
| const tokenToCSSVar = (scale, value) => theme => { | ||
| const valueStr = String(value); | ||
| const key = scale ? `${scale}.${valueStr}` : valueStr; | ||
| return utils.isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| 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 tokenToCSSVar = function tokenToCSSVar(scale, value) { | ||
| return function (theme) { | ||
| var valueStr = String(value); | ||
| var key = scale ? scale + "." + valueStr : valueStr; | ||
| return utils.isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| }; | ||
| }; | ||
| function createTransform(options) { | ||
| const { | ||
| scale, | ||
| transform, | ||
| compose | ||
| } = options; | ||
| var scale = options.scale, | ||
| transform = options.transform, | ||
| compose = options.compose; | ||
| const fn = (value, theme) => { | ||
| const _value = tokenToCSSVar(scale, value)(theme); | ||
| var fn = function fn(value, theme) { | ||
| var _transform; | ||
| let result = transform?.(_value, theme) ?? _value; | ||
| var _value = tokenToCSSVar(scale, value)(theme); | ||
| var result = (_transform = transform == null ? void 0 : transform(_value, theme)) != null ? _transform : _value; | ||
| if (compose) { | ||
@@ -36,10 +56,10 @@ result = compose(result, theme); | ||
| function toConfig(scale, transform) { | ||
| return property => { | ||
| const result = { | ||
| property, | ||
| scale | ||
| return function (property) { | ||
| var result = { | ||
| property: property, | ||
| scale: scale | ||
| }; | ||
| result.transform = createTransform({ | ||
| scale, | ||
| transform | ||
| scale: scale, | ||
| transform: transform | ||
| }); | ||
@@ -50,18 +70,19 @@ return result; | ||
| const getRtl = ({ | ||
| rtl, | ||
| ltr | ||
| }) => theme => theme.direction === "rtl" ? rtl : ltr; | ||
| var getRtl = function getRtl(_ref) { | ||
| var rtl = _ref.rtl, | ||
| ltr = _ref.ltr; | ||
| return function (theme) { | ||
| return theme.direction === "rtl" ? rtl : ltr; | ||
| }; | ||
| }; | ||
| function logical(options) { | ||
| const { | ||
| property, | ||
| scale, | ||
| transform | ||
| } = options; | ||
| var property = options.property, | ||
| scale = options.scale, | ||
| transform = options.transform; | ||
| return { | ||
| scale, | ||
| scale: scale, | ||
| property: getRtl(property), | ||
| transform: scale ? createTransform({ | ||
| scale, | ||
| scale: scale, | ||
| compose: transform | ||
@@ -72,2 +93,4 @@ }) : transform | ||
| var _spaceXTemplate, _spaceYTemplate; | ||
| /** | ||
@@ -79,10 +102,10 @@ * The CSS transform order following the upcoming spec from CSSWG | ||
| */ | ||
| const transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| var transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| function getTransformTemplate() { | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))", ...transformTemplate].join(" "); | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))"].concat(transformTemplate).join(" "); | ||
| } | ||
| function getTransformGpuTemplate() { | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)", ...transformTemplate].join(" "); | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)"].concat(transformTemplate).join(" "); | ||
| } | ||
| const filterTemplate = { | ||
| var filterTemplate = { | ||
| "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -99,3 +122,3 @@ "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| }; | ||
| const backdropFilterTemplate = { | ||
| var backdropFilterTemplate = { | ||
| backdropFilter: ["var(--chakra-backdrop-blur)", "var(--chakra-backdrop-brightness)", "var(--chakra-backdrop-contrast)", "var(--chakra-backdrop-grayscale)", "var(--chakra-backdrop-hue-rotate)", "var(--chakra-backdrop-invert)", "var(--chakra-backdrop-opacity)", "var(--chakra-backdrop-saturate)", "var(--chakra-backdrop-sepia)"].join(" "), | ||
@@ -114,9 +137,9 @@ "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| return { | ||
| "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`, | ||
| "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`, | ||
| "--chakra-ring-offset-shadow": "var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)", | ||
| "--chakra-ring-shadow": "var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)", | ||
| "--chakra-ring-width": value, | ||
| boxShadow: [`var(--chakra-ring-offset-shadow)`, `var(--chakra-ring-shadow)`, `var(--chakra-shadow, 0 0 #0000)`].join(", ") | ||
| boxShadow: ["var(--chakra-ring-offset-shadow)", "var(--chakra-ring-shadow)", "var(--chakra-shadow, 0 0 #0000)"].join(", ") | ||
| }; | ||
| } | ||
| const flexDirectionTemplate = { | ||
| var flexDirectionTemplate = { | ||
| "row-reverse": { | ||
@@ -131,17 +154,100 @@ space: "--chakra-space-x-reverse", | ||
| }; | ||
| const owlSelector = "& > :not(style) ~ :not(style)"; | ||
| const spaceXTemplate = { | ||
| [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))" | ||
| var owlSelector = "& > :not(style) ~ :not(style)"; | ||
| var spaceXTemplate = (_spaceXTemplate = {}, _spaceXTemplate[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))" | ||
| }, _spaceXTemplate); | ||
| var spaceYTemplate = (_spaceYTemplate = {}, _spaceYTemplate[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))" | ||
| }, _spaceYTemplate); | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function _inherits(subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function"); | ||
| } | ||
| }; | ||
| const spaceYTemplate = { | ||
| [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))" | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) _setPrototypeOf(subClass, superClass); | ||
| } | ||
| function _wrapRegExp() { | ||
| _wrapRegExp = function (re, groups) { | ||
| return new BabelRegExp(re, undefined, groups); | ||
| }; | ||
| var _super = RegExp.prototype; | ||
| var _groups = new WeakMap(); | ||
| function BabelRegExp(re, flags, groups) { | ||
| var _this = new RegExp(re, flags); | ||
| _groups.set(_this, groups || _groups.get(re)); | ||
| return _setPrototypeOf(_this, BabelRegExp.prototype); | ||
| } | ||
| }; | ||
| const directionMap = { | ||
| _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 = arguments; | ||
| if (typeof args[args.length - 1] !== "object") { | ||
| args = [].slice.call(args); | ||
| 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); | ||
| } | ||
| var directionMap = { | ||
| "to-t": "to top", | ||
@@ -156,71 +262,88 @@ "to-tr": "to top right", | ||
| }; | ||
| const valueSet = new Set(Object.values(directionMap)); | ||
| const globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| var valueSet = new Set(Object.values(directionMap)); | ||
| var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| const trimSpace = str => str.trim(); | ||
| var trimSpace = function trimSpace(str) { | ||
| return str.trim(); | ||
| }; | ||
| function parseGradient(value, theme) { | ||
| var _regex$exec$groups, _regex$exec; | ||
| if (value == null || globalSet.has(value)) return value; | ||
| const regex = /(?<type>^[a-z-A-Z]+)\((?<values>(.*))\)/g; | ||
| const { | ||
| type, | ||
| values | ||
| } = regex.exec(value)?.groups ?? {}; | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, { | ||
| type: 1, | ||
| values: 2 | ||
| }); | ||
| var _ref = (_regex$exec$groups = (_regex$exec = regex.exec(value)) == null ? void 0 : _regex$exec.groups) != null ? _regex$exec$groups : {}, | ||
| type = _ref.type, | ||
| values = _ref.values; | ||
| if (!type || !values) return value; | ||
| const _type = type.includes("-gradient") ? type : `${type}-gradient`; | ||
| var _type = type.includes("-gradient") ? type : type + "-gradient"; | ||
| const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean); | ||
| if (stops?.length === 0) return value; | ||
| const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| var _values$split$map$fil = values.split(",").map(trimSpace).filter(Boolean), | ||
| maybeDirection = _values$split$map$fil[0], | ||
| stops = _values$split$map$fil.slice(1); | ||
| if ((stops == null ? void 0 : stops.length) === 0) return value; | ||
| var direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| stops.unshift(direction); | ||
| const _values = stops.map(stop => { | ||
| var _values = stops.map(function (stop) { | ||
| // if stop is valid shorthand direction, return it | ||
| if (valueSet.has(stop)) return stop; | ||
| const firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| var firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop]; | ||
| var _ref2 = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop], | ||
| _color = _ref2[0], | ||
| _stop = _ref2[1]; | ||
| const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| const key = `colors.${_color}`; | ||
| const color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| var key = "colors." + _color; | ||
| var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| return _stopOrFunc ? [color, _stopOrFunc].join(" ") : color; | ||
| }); | ||
| return `${_type}(${_values.join(", ")})`; | ||
| return _type + "(" + _values.join(", ") + ")"; | ||
| } | ||
| const isCSSFunction = value => { | ||
| var isCSSFunction = function isCSSFunction(value) { | ||
| return utils.isString(value) && value.includes("(") && value.includes(")"); | ||
| }; | ||
| const gradientTransform = (value, theme) => parseGradient(value, theme ?? {}); | ||
| var gradientTransform = function gradientTransform(value, theme) { | ||
| return parseGradient(value, theme != null ? theme : {}); | ||
| }; | ||
| const analyzeCSSValue = value => { | ||
| const num = parseFloat(value.toString()); | ||
| const unit = value.toString().replace(String(num), ""); | ||
| var analyzeCSSValue = function analyzeCSSValue(value) { | ||
| var num = parseFloat(value.toString()); | ||
| var unit = value.toString().replace(String(num), ""); | ||
| return { | ||
| unitless: !unit, | ||
| value: num, | ||
| unit | ||
| unit: unit | ||
| }; | ||
| }; | ||
| const wrap = str => value => `${str}(${value})`; | ||
| var wrap = function wrap(str) { | ||
| return function (value) { | ||
| return str + "(" + value + ")"; | ||
| }; | ||
| }; | ||
| const transformFunctions = { | ||
| filter(value) { | ||
| var transformFunctions = { | ||
| filter: function filter(value) { | ||
| return value !== "auto" ? value : filterTemplate; | ||
| }, | ||
| backdropFilter(value) { | ||
| backdropFilter: function backdropFilter(value) { | ||
| return value !== "auto" ? value : backdropFilterTemplate; | ||
| }, | ||
| ring(value) { | ||
| ring: function ring(value) { | ||
| return getRingTemplate(transformFunctions.px(value)); | ||
| }, | ||
| bgClip(value) { | ||
| bgClip: function bgClip(value) { | ||
| return value === "text" ? { | ||
@@ -233,4 +356,3 @@ color: "transparent", | ||
| }, | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === "auto") return getTransformTemplate(); | ||
@@ -240,17 +362,15 @@ if (value === "auto-gpu") return getTransformGpuTemplate(); | ||
| }, | ||
| px(value) { | ||
| px: function px(value) { | ||
| if (value == null) return value; | ||
| const { | ||
| unitless | ||
| } = analyzeCSSValue(value); | ||
| return unitless || utils.isNumber(value) ? `${value}px` : value; | ||
| }, | ||
| fraction(value) { | ||
| return !utils.isNumber(value) || value > 1 ? value : `${value * 100}%`; | ||
| var _analyzeCSSValue = analyzeCSSValue(value), | ||
| unitless = _analyzeCSSValue.unitless; | ||
| return unitless || utils.isNumber(value) ? value + "px" : value; | ||
| }, | ||
| float(value, theme) { | ||
| const map = { | ||
| fraction: function fraction(value) { | ||
| return !utils.isNumber(value) || value > 1 ? value : value * 100 + "%"; | ||
| }, | ||
| "float": function float(value, theme) { | ||
| var map = { | ||
| left: "right", | ||
@@ -261,9 +381,7 @@ right: "left" | ||
| }, | ||
| degree(value) { | ||
| degree: function degree(value) { | ||
| if (utils.isCssVar(value) || value == null) return value; | ||
| const unitless = utils.isString(value) && !value.endsWith("deg"); | ||
| return utils.isNumber(value) || unitless ? `${value}deg` : value; | ||
| var unitless = utils.isString(value) && !value.endsWith("deg"); | ||
| return utils.isNumber(value) || unitless ? value + "deg" : value; | ||
| }, | ||
| gradient: gradientTransform, | ||
@@ -280,11 +398,9 @@ blur: wrap("blur"), | ||
| sepia: wrap("sepia"), | ||
| bgImage(value) { | ||
| bgImage: function bgImage(value) { | ||
| if (value == null) return value; | ||
| const prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? `url(${value})` : value; | ||
| var prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? "url(" + value + ")" : value; | ||
| }, | ||
| outline(value) { | ||
| const isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| outline: function outline(value) { | ||
| var isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| return value !== null && isNoneOrZero ? { | ||
@@ -297,9 +413,10 @@ outline: "2px solid transparent", | ||
| }, | ||
| flexDirection: function flexDirection(value) { | ||
| var _flexDirectionTemplat; | ||
| flexDirection(value) { | ||
| const { | ||
| space, | ||
| divide | ||
| } = flexDirectionTemplate[value] ?? {}; | ||
| const result = { | ||
| var _ref = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {}, | ||
| space = _ref.space, | ||
| divide = _ref.divide; | ||
| var result = { | ||
| flexDirection: value | ||
@@ -311,6 +428,5 @@ }; | ||
| } | ||
| }; | ||
| const t = { | ||
| var t = { | ||
| borderWidths: toConfig("borderWidths"), | ||
@@ -323,38 +439,33 @@ borderStyles: toConfig("borderStyles"), | ||
| spaceT: toConfig("space", transformFunctions.px), | ||
| degreeT(property) { | ||
| degreeT: function degreeT(property) { | ||
| return { | ||
| property, | ||
| property: property, | ||
| transform: transformFunctions.degree | ||
| }; | ||
| }, | ||
| prop(property, scale, transform) { | ||
| return { | ||
| property, | ||
| scale, | ||
| ...(scale && { | ||
| transform: createTransform({ | ||
| scale, | ||
| transform | ||
| }) | ||
| prop: function prop(property, scale, transform) { | ||
| return _extends({ | ||
| property: property, | ||
| scale: scale | ||
| }, scale && { | ||
| transform: createTransform({ | ||
| scale: scale, | ||
| transform: transform | ||
| }) | ||
| }; | ||
| }); | ||
| }, | ||
| propT(property, transform) { | ||
| propT: function propT(property, transform) { | ||
| return { | ||
| property, | ||
| transform | ||
| property: property, | ||
| transform: transform | ||
| }; | ||
| }, | ||
| sizes: toConfig("sizes", transformFunctions.px), | ||
| sizesT: toConfig("sizes", transformFunctions.fraction), | ||
| shadows: toConfig("shadows"), | ||
| logical, | ||
| logical: logical, | ||
| blur: toConfig("blur", transformFunctions.blur) | ||
| }; | ||
| const background = { | ||
| var background = { | ||
| background: t.colors("background"), | ||
@@ -387,3 +498,3 @@ backgroundColor: t.colors("backgroundColor"), | ||
| const border = { | ||
| var border = { | ||
| border: t.borders("border"), | ||
@@ -519,3 +630,3 @@ borderWidth: t.borderWidths("borderWidth"), | ||
| const color = { | ||
| var color = { | ||
| color: t.colors("color"), | ||
@@ -527,3 +638,3 @@ textColor: t.colors("color"), | ||
| const effect = { | ||
| var effect = { | ||
| boxShadow: t.shadows("boxShadow"), | ||
@@ -543,3 +654,3 @@ mixBlendMode: true, | ||
| const filter = { | ||
| var filter = { | ||
| filter: { | ||
@@ -566,3 +677,3 @@ transform: transformFunctions.filter | ||
| const flexbox = { | ||
| var flexbox = { | ||
| alignItems: true, | ||
@@ -577,17 +688,21 @@ alignContent: true, | ||
| experimental_spaceX: { | ||
| static: spaceXTemplate, | ||
| "static": spaceXTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null; | ||
| } | ||
| }) | ||
| }, | ||
| experimental_spaceY: { | ||
| static: spaceYTemplate, | ||
| "static": spaceYTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null; | ||
| } | ||
| }) | ||
@@ -611,3 +726,3 @@ }, | ||
| const grid = { | ||
| var grid = { | ||
| gridGap: t.space("gridGap"), | ||
@@ -632,3 +747,3 @@ gridColumnGap: t.space("gridColumnGap"), | ||
| const interactivity = { | ||
| var interactivity = { | ||
| appearance: true, | ||
@@ -646,3 +761,3 @@ cursor: true, | ||
| const layout = { | ||
| var layout = { | ||
| width: t.sizesT("width"), | ||
@@ -672,3 +787,3 @@ inlineSize: t.sizesT("inlineSize"), | ||
| boxDecorationBreak: true, | ||
| float: t.propT("float", transformFunctions.float), | ||
| "float": t.propT("float", transformFunctions["float"]), | ||
| objectFit: true, | ||
@@ -694,3 +809,3 @@ objectPosition: true, | ||
| const list = { | ||
| var list = { | ||
| listStyleType: true, | ||
@@ -703,3 +818,3 @@ listStylePosition: true, | ||
| const srOnly = { | ||
| var srOnly = { | ||
| border: "0px", | ||
@@ -715,3 +830,3 @@ clip: "rect(0, 0, 0, 0)", | ||
| }; | ||
| const srFocusable = { | ||
| var srFocusable = { | ||
| position: "static", | ||
@@ -727,8 +842,8 @@ width: "auto", | ||
| const getWithPriority = (theme, key, styles) => { | ||
| const result = {}; | ||
| const obj = utils.memoizedGet(theme, key, {}); | ||
| var getWithPriority = function getWithPriority(theme, key, styles) { | ||
| var result = {}; | ||
| var obj = utils.memoizedGet(theme, key, {}); | ||
| for (const prop in obj) { | ||
| const isInStyles = prop in styles && styles[prop] != null; | ||
| for (var prop in obj) { | ||
| var isInStyles = prop in styles && styles[prop] != null; | ||
| if (!isInStyles) result[prop] = obj[prop]; | ||
@@ -740,5 +855,5 @@ } | ||
| const others = { | ||
| var others = { | ||
| srOnly: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) return srOnly; | ||
@@ -748,19 +863,24 @@ if (value === "focusable") return srFocusable; | ||
| } | ||
| }, | ||
| layerStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "layerStyles." + value, styles); | ||
| } | ||
| }, | ||
| textStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "textStyles." + value, styles); | ||
| } | ||
| }, | ||
| apply: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, value, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, value, styles); | ||
| } | ||
| } | ||
| }; | ||
| const position = { | ||
| var position = { | ||
| position: true, | ||
@@ -806,3 +926,3 @@ pos: t.prop("position"), | ||
| */ | ||
| const ring = { | ||
| var ring = { | ||
| ring: { | ||
@@ -817,3 +937,3 @@ transform: transformFunctions.ring | ||
| const space = { | ||
| var space = { | ||
| margin: t.spaceT("margin"), | ||
@@ -874,3 +994,3 @@ marginTop: t.spaceT("marginTop"), | ||
| const textDecoration = { | ||
| var textDecoration = { | ||
| textDecorationColor: t.colors("textDecorationColor"), | ||
@@ -888,3 +1008,3 @@ textDecoration: true, | ||
| const transform = { | ||
| var transform = { | ||
| clipPath: true, | ||
@@ -903,3 +1023,3 @@ transform: t.propT("transform", transformFunctions.transform), | ||
| const transition = { | ||
| var transition = { | ||
| transition: true, | ||
@@ -914,3 +1034,3 @@ transitionDelay: true, | ||
| const typography = { | ||
| var typography = { | ||
| fontFamily: t.prop("fontFamily", "fonts"), | ||
@@ -929,3 +1049,3 @@ fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px), | ||
| noOfLines: { | ||
| static: { | ||
| "static": { | ||
| overflow: "hidden", | ||
@@ -941,3 +1061,3 @@ textOverflow: "ellipsis", | ||
| isTruncated: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) { | ||
@@ -951,3 +1071,2 @@ return { | ||
| } | ||
| } | ||
@@ -959,20 +1078,86 @@ }; | ||
| const group = { | ||
| hover: selector => `${selector}:hover &, ${selector}[data-hover] &`, | ||
| focus: selector => `${selector}:focus &, ${selector}[data-focus] &`, | ||
| focusVisible: selector => `${selector}:focus-visible &`, | ||
| active: selector => `${selector}:active &, ${selector}[data-active] &`, | ||
| disabled: selector => `${selector}:disabled &, ${selector}[data-disabled] &`, | ||
| invalid: selector => `${selector}:invalid &, ${selector}[data-invalid] &`, | ||
| checked: selector => `${selector}:checked &, ${selector}[data-checked] &`, | ||
| indeterminate: selector => `${selector}:indeterminate &, ${selector}[aria-checked=mixed] &, ${selector}[data-indeterminate] &`, | ||
| readOnly: selector => `${selector}:read-only &, ${selector}[readonly] &, ${selector}[data-read-only] &`, | ||
| expanded: selector => `${selector}:read-only &, ${selector}[aria-expanded=true] &, ${selector}[data-expanded] &` | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _createForOfIteratorHelperLoose(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (it) return (it = it.call(o)).next.bind(it); | ||
| 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."); | ||
| } | ||
| var group = { | ||
| hover: function hover(selector) { | ||
| return selector + ":hover &, " + selector + "[data-hover] &"; | ||
| }, | ||
| focus: function focus(selector) { | ||
| return selector + ":focus &, " + selector + "[data-focus] &"; | ||
| }, | ||
| focusVisible: function focusVisible(selector) { | ||
| return selector + ":focus-visible &"; | ||
| }, | ||
| active: function active(selector) { | ||
| return selector + ":active &, " + selector + "[data-active] &"; | ||
| }, | ||
| disabled: function disabled(selector) { | ||
| return selector + ":disabled &, " + selector + "[data-disabled] &"; | ||
| }, | ||
| invalid: function invalid(selector) { | ||
| return selector + ":invalid &, " + selector + "[data-invalid] &"; | ||
| }, | ||
| checked: function checked(selector) { | ||
| return selector + ":checked &, " + selector + "[data-checked] &"; | ||
| }, | ||
| indeterminate: function indeterminate(selector) { | ||
| return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &"; | ||
| }, | ||
| readOnly: function readOnly(selector) { | ||
| return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &"; | ||
| }, | ||
| expanded: function expanded(selector) { | ||
| return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &"; | ||
| } | ||
| }; | ||
| const toGroup = fn => merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| var toGroup = function toGroup(fn) { | ||
| return merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| }; | ||
| const merge = (fn, ...selectors) => selectors.map(fn).join(", "); | ||
| var merge = function merge(fn) { | ||
| for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| selectors[_key - 1] = arguments[_key]; | ||
| } | ||
| const pseudoSelectors = { | ||
| return selectors.map(fn).join(", "); | ||
| }; | ||
| var pseudoSelectors = { | ||
| /** | ||
@@ -1225,12 +1410,14 @@ * Styles for CSS selector `&:hover` | ||
| }; | ||
| const pseudoPropNames = utils.objectKeys(pseudoSelectors); | ||
| var pseudoPropNames = utils.objectKeys(pseudoSelectors); | ||
| const systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| const layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| const layoutPropNames = utils.objectKeys(layoutSystem); | ||
| const propNames = [...utils.objectKeys(systemProps), ...pseudoPropNames]; | ||
| const styleProps = { ...systemProps, | ||
| ...pseudoSelectors | ||
| var systemProps = utils.mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| var layoutPropNames = utils.objectKeys(layoutSystem); | ||
| var propNames = [].concat(utils.objectKeys(systemProps), pseudoPropNames); | ||
| var styleProps = _extends({}, systemProps, pseudoSelectors); | ||
| var isStyleProp = function isStyleProp(prop) { | ||
| return prop in styleProps; | ||
| }; | ||
| const isStyleProp = prop => prop in styleProps; | ||
@@ -1248,64 +1435,80 @@ /** | ||
| const expandResponsive = styles => theme => { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| const { | ||
| isResponsive, | ||
| toArrayValue, | ||
| media: medias | ||
| } = theme.__breakpoints; | ||
| const computedStyles = {}; | ||
| var expandResponsive = function expandResponsive(styles) { | ||
| return function (theme) { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| var _theme$__breakpoints = theme.__breakpoints, | ||
| isResponsive = _theme$__breakpoints.isResponsive, | ||
| toArrayValue = _theme$__breakpoints.toArrayValue, | ||
| medias = _theme$__breakpoints.media; | ||
| var computedStyles = {}; | ||
| for (const key in styles) { | ||
| let value = utils.runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| for (var key in styles) { | ||
| var value = utils.runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| value = utils.isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| value = utils.isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| const queries = value.slice(0, medias.length).length; | ||
| var queries = value.slice(0, medias.length).length; | ||
| for (let index = 0; index < queries; index += 1) { | ||
| const media = medias?.[index]; | ||
| for (var index = 0; index < queries; index += 1) { | ||
| var media = medias == null ? void 0 : medias[index]; | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| if (value[index] == null) { | ||
| continue; | ||
| if (value[index] == null) { | ||
| continue; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| } | ||
| return computedStyles; | ||
| return computedStyles; | ||
| }; | ||
| }; | ||
| const isCSSVariableTokenValue = (key, value) => key.startsWith("--") && utils.isString(value) && !utils.isCssVar(value); | ||
| var isCSSVariableTokenValue = function isCSSVariableTokenValue(key, value) { | ||
| return key.startsWith("--") && utils.isString(value) && !utils.isCssVar(value); | ||
| }; | ||
| const resolveTokenValue = (theme, value) => { | ||
| var resolveTokenValue = function resolveTokenValue(theme, value) { | ||
| var _ref, _getVar2; | ||
| if (value == null) return value; | ||
| const getVar = val => theme.__cssMap?.[val]?.varRef; | ||
| var getVar = function getVar(val) { | ||
| var _theme$__cssMap, _theme$__cssMap$val; | ||
| const getValue = val => getVar(val) ?? val; | ||
| return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef; | ||
| }; | ||
| const valueSplit = value.split(",").map(v => v.trim()); | ||
| const [tokenValue, fallbackValue] = valueSplit; | ||
| value = getVar(tokenValue) ?? getValue(fallbackValue) ?? getValue(value); | ||
| var getValue = function getValue(val) { | ||
| var _getVar; | ||
| return (_getVar = getVar(val)) != null ? _getVar : val; | ||
| }; | ||
| var valueSplit = value.split(",").map(function (v) { | ||
| return v.trim(); | ||
| }); | ||
| var tokenValue = valueSplit[0], | ||
| fallbackValue = valueSplit[1]; | ||
| value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value); | ||
| return value; | ||
@@ -1315,16 +1518,22 @@ }; | ||
| function getCss(options) { | ||
| const { | ||
| configs = {}, | ||
| pseudos = {}, | ||
| theme | ||
| } = 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; | ||
| const css = (stylesOrFn, nested = false) => { | ||
| const _styles = utils.runIfFn(stylesOrFn, theme); | ||
| var css = function css(stylesOrFn, nested) { | ||
| if (nested === void 0) { | ||
| nested = false; | ||
| } | ||
| const styles = expandResponsive(_styles)(theme); | ||
| let computedStyles = {}; | ||
| var _styles = utils.runIfFn(stylesOrFn, theme); | ||
| for (let key in styles) { | ||
| const valueOrFn = styles[key]; | ||
| var styles = expandResponsive(_styles)(theme); | ||
| var computedStyles = {}; | ||
| for (var key in styles) { | ||
| var _config$transform, _config, _config2, _config3, _config4; | ||
| var valueOrFn = styles[key]; | ||
| /** | ||
@@ -1335,3 +1544,3 @@ * allows the user to pass functional values | ||
| let value = utils.runIfFn(valueOrFn, theme); | ||
| var value = utils.runIfFn(valueOrFn, theme); | ||
| /** | ||
@@ -1358,3 +1567,3 @@ * converts pseudo shorthands to valid selector | ||
| let config = configs[key]; | ||
| var config = configs[key]; | ||
@@ -1368,3 +1577,5 @@ if (config === true) { | ||
| if (utils.isObject(value)) { | ||
| computedStyles[key] = computedStyles[key] ?? {}; | ||
| var _computedStyles$key; | ||
| computedStyles[key] = (_computedStyles$key = computedStyles[key]) != null ? _computedStyles$key : {}; | ||
| computedStyles[key] = utils.mergeWith({}, computedStyles[key], css(value, true)); | ||
@@ -1374,3 +1585,3 @@ continue; | ||
| let rawValue = config?.transform?.(value, theme, _styles) ?? value; | ||
| var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value; | ||
| /** | ||
@@ -1384,3 +1595,3 @@ * Used for `layerStyle`, `textStyle` and `apply`. After getting the | ||
| rawValue = config?.processResult ? css(rawValue, true) : rawValue; | ||
| rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue; | ||
| /** | ||
@@ -1394,6 +1605,6 @@ * allows us define css properties for RTL and LTR. | ||
| const configProperty = utils.runIfFn(config?.property, theme); | ||
| var configProperty = utils.runIfFn((_config3 = config) == null ? void 0 : _config3.property, theme); | ||
| if (!nested && config?.static) { | ||
| const staticStyles = utils.runIfFn(config.static, theme); | ||
| if (!nested && (_config4 = config) != null && _config4["static"]) { | ||
| var staticStyles = utils.runIfFn(config["static"], theme); | ||
| computedStyles = utils.mergeWith({}, computedStyles, staticStyles); | ||
@@ -1403,3 +1614,4 @@ } | ||
| if (configProperty && Array.isArray(configProperty)) { | ||
| for (const property of configProperty) { | ||
| for (var _iterator = _createForOfIteratorHelperLoose(configProperty), _step; !(_step = _iterator()).done;) { | ||
| var property = _step.value; | ||
| computedStyles[property] = rawValue; | ||
@@ -1434,9 +1646,11 @@ } | ||
| } | ||
| const css = styles => theme => { | ||
| const cssFn = getCss({ | ||
| theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| var css = function css(styles) { | ||
| return function (theme) { | ||
| var cssFn = getCss({ | ||
| theme: theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| }; | ||
| }; | ||
@@ -1456,38 +1670,102 @@ | ||
| const toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, ""); | ||
| var toExpression = function toExpression(operator) { | ||
| for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| operands[_key - 1] = arguments[_key]; | ||
| } | ||
| const add = (...operands) => `calc(${toExpression("+", ...operands)})`; | ||
| return operands.map(resolveReference).join(" " + operator + " ").replace(/calc/g, ""); | ||
| }; | ||
| const subtract = (...operands) => `calc(${toExpression("-", ...operands)})`; | ||
| var _add = function add() { | ||
| for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| operands[_key2] = arguments[_key2]; | ||
| } | ||
| const multiply = (...operands) => `calc(${toExpression("*", ...operands)})`; | ||
| return "calc(" + toExpression.apply(void 0, ["+"].concat(operands)) + ")"; | ||
| }; | ||
| const divide = (...operands) => `calc(${toExpression("/", ...operands)})`; | ||
| var _subtract = function subtract() { | ||
| for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| operands[_key3] = arguments[_key3]; | ||
| } | ||
| const negate = x => { | ||
| const value = resolveReference(x); | ||
| return "calc(" + toExpression.apply(void 0, ["-"].concat(operands)) + ")"; | ||
| }; | ||
| var _multiply = function multiply() { | ||
| for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
| operands[_key4] = arguments[_key4]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["*"].concat(operands)) + ")"; | ||
| }; | ||
| var _divide = function divide() { | ||
| for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
| operands[_key5] = arguments[_key5]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["/"].concat(operands)) + ")"; | ||
| }; | ||
| var _negate = function negate(x) { | ||
| var value = resolveReference(x); | ||
| if (value != null && !Number.isNaN(parseFloat(value))) { | ||
| return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`; | ||
| return String(value).startsWith("-") ? String(value).slice(1) : "-" + value; | ||
| } | ||
| return multiply(value, -1); | ||
| return _multiply(value, -1); | ||
| }; | ||
| const calc = Object.assign(x => ({ | ||
| add: (...operands) => calc(add(x, ...operands)), | ||
| subtract: (...operands) => calc(subtract(x, ...operands)), | ||
| multiply: (...operands) => calc(multiply(x, ...operands)), | ||
| divide: (...operands) => calc(divide(x, ...operands)), | ||
| negate: () => calc(negate(x)), | ||
| toString: () => x.toString() | ||
| }), { | ||
| add, | ||
| subtract, | ||
| multiply, | ||
| divide, | ||
| negate | ||
| var calc = Object.assign(function (x) { | ||
| return { | ||
| add: function add() { | ||
| for (var _len6 = arguments.length, operands = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) { | ||
| operands[_key6] = arguments[_key6]; | ||
| } | ||
| return calc(_add.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| subtract: function subtract() { | ||
| for (var _len7 = arguments.length, operands = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) { | ||
| operands[_key7] = arguments[_key7]; | ||
| } | ||
| return calc(_subtract.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| multiply: function multiply() { | ||
| for (var _len8 = arguments.length, operands = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) { | ||
| operands[_key8] = arguments[_key8]; | ||
| } | ||
| return calc(_multiply.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| divide: function divide() { | ||
| for (var _len9 = arguments.length, operands = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) { | ||
| operands[_key9] = arguments[_key9]; | ||
| } | ||
| return calc(_divide.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| negate: function negate() { | ||
| return calc(_negate(x)); | ||
| }, | ||
| toString: function toString() { | ||
| return x.toString(); | ||
| } | ||
| }; | ||
| }, { | ||
| add: _add, | ||
| subtract: _subtract, | ||
| multiply: _multiply, | ||
| divide: _divide, | ||
| negate: _negate | ||
| }); | ||
| function replaceWhiteSpace(value, replaceValue = "-") { | ||
| function replaceWhiteSpace(value, replaceValue) { | ||
| if (replaceValue === void 0) { | ||
| replaceValue = "-"; | ||
| } | ||
| return value.replace(/\s+/g, replaceValue); | ||
@@ -1497,19 +1775,27 @@ } | ||
| function escape(value) { | ||
| const valueStr = replaceWhiteSpace(value.toString()); | ||
| var valueStr = replaceWhiteSpace(value.toString()); | ||
| if (valueStr.includes("\\.")) return value; | ||
| const isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", `\\.`) : value; | ||
| var isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", "\\.") : value; | ||
| } | ||
| function addPrefix(value, prefix = "") { | ||
| function addPrefix(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return [prefix, escape(value)].filter(Boolean).join("-"); | ||
| } | ||
| function toVarReference(name, fallback) { | ||
| return `var(${escape(name)}${fallback ? `, ${fallback}` : ""})`; | ||
| return "var(" + escape(name) + (fallback ? ", " + fallback : "") + ")"; | ||
| } | ||
| function toVarDefinition(value, prefix = "") { | ||
| return `--${addPrefix(value, prefix)}`; | ||
| function toVarDefinition(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return "--" + addPrefix(value, prefix); | ||
| } | ||
| function cssVar(name, fallback, cssVarPrefix) { | ||
| const cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| var cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| return { | ||
@@ -1522,14 +1808,17 @@ variable: cssVariable, | ||
| function createThemeVars(target, options) { | ||
| const context = { | ||
| var context = { | ||
| cssMap: {}, | ||
| cssVars: {} | ||
| }; | ||
| utils.walkObject(target, (value, path) => { | ||
| utils.walkObject(target, function (value, path) { | ||
| var _tokenHandlerMap$firs; | ||
| // firstKey will be e.g. "space" | ||
| const [firstKey] = path; | ||
| const handler = tokenHandlerMap[firstKey] ?? tokenHandlerMap.defaultHandler; | ||
| const { | ||
| cssVars, | ||
| cssMap | ||
| } = handler(path, value, options); | ||
| var firstKey = path[0]; | ||
| var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler; | ||
| var _handler = handler(path, value, options), | ||
| cssVars = _handler.cssVars, | ||
| cssMap = _handler.cssMap; | ||
| Object.assign(context.cssVars, cssVars); | ||
@@ -1544,43 +1833,44 @@ Object.assign(context.cssMap, cssMap); | ||
| */ | ||
| const tokenHandlerMap = { | ||
| space: (keys, value, options) => { | ||
| const properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| const [firstKey, ...referenceKeys] = keys; | ||
| const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`; | ||
| const negativeVarKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(negativeVarKey, undefined, options.cssVarPrefix); | ||
| const negativeValue = calc.negate(value); | ||
| const varRef = calc.negate(reference); | ||
| var tokenHandlerMap = { | ||
| space: function space(keys, value, options) { | ||
| var _extends2; | ||
| var properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| var firstKey = keys[0], | ||
| referenceKeys = keys.slice(1); | ||
| var negativeLookupKey = firstKey + ".-" + referenceKeys.join("."); | ||
| var negativeVarKey = keys.join("-"); | ||
| var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar.variable, | ||
| reference = _cssVar.reference; | ||
| var negativeValue = calc.negate(value); | ||
| var varRef = calc.negate(reference); | ||
| return { | ||
| cssVars: properties.cssVars, | ||
| cssMap: { ...properties.cssMap, | ||
| [negativeLookupKey]: { | ||
| value: `${negativeValue}`, | ||
| var: `${variable}`, | ||
| varRef | ||
| } | ||
| } | ||
| cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = { | ||
| value: "" + negativeValue, | ||
| "var": "" + variable, | ||
| varRef: varRef | ||
| }, _extends2)) | ||
| }; | ||
| }, | ||
| defaultHandler: (keys, value, options) => { | ||
| const lookupKey = keys.join("."); | ||
| const varKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(varKey, undefined, options.cssVarPrefix); | ||
| defaultHandler: function defaultHandler(keys, value, options) { | ||
| var _cssVars, _cssMap; | ||
| var lookupKey = keys.join("."); | ||
| var varKey = keys.join("-"); | ||
| var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar2.variable, | ||
| reference = _cssVar2.reference; | ||
| return { | ||
| cssVars: { | ||
| [variable]: value | ||
| }, | ||
| cssMap: { | ||
| [lookupKey]: { | ||
| value, | ||
| var: variable, | ||
| varRef: reference | ||
| } | ||
| } | ||
| cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars), | ||
| cssMap: (_cssMap = {}, _cssMap[lookupKey] = { | ||
| value: value, | ||
| "var": variable, | ||
| varRef: reference | ||
| }, _cssMap) | ||
| }; | ||
@@ -1590,14 +1880,29 @@ } | ||
| const tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| var _excluded = ["__cssMap", "__cssVars", "__breakpoints"]; | ||
| var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function extractTokens(theme) { | ||
| const _tokens = tokens; | ||
| var _tokens = tokens; | ||
| return utils.pick(theme, _tokens); | ||
| } | ||
| function omitVars(rawTheme) { | ||
| const { | ||
| __cssMap, | ||
| __cssVars, | ||
| __breakpoints, | ||
| ...cleanTheme | ||
| } = rawTheme; | ||
| rawTheme.__cssMap; | ||
| rawTheme.__cssVars; | ||
| rawTheme.__breakpoints; | ||
| var cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| return cleanTheme; | ||
@@ -1607,2 +1912,4 @@ } | ||
| function toCSSVar(rawTheme) { | ||
| var _theme$config; | ||
| /** | ||
@@ -1612,22 +1919,14 @@ * In the case the theme has already been converted to css-var (e.g extending the theme), | ||
| */ | ||
| const theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| var theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| const tokens = extractTokens(theme); | ||
| const cssVarPrefix = theme.config?.cssVarPrefix; | ||
| const { | ||
| /** | ||
| * This is more like a dictionary of tokens users will type `green.500`, | ||
| * and their equivalent css variable. | ||
| */ | ||
| cssMap, | ||
| var tokens = extractTokens(theme); | ||
| var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix; | ||
| /** | ||
| * The extracted css variables will be stored here, and used in | ||
| * the emotion's <Global/> component to attach variables to `:root` | ||
| */ | ||
| cssVars | ||
| } = createThemeVars(tokens, { | ||
| cssVarPrefix | ||
| }); | ||
| const defaultCssVars = { | ||
| var _createThemeVars = createThemeVars(tokens, { | ||
| cssVarPrefix: cssVarPrefix | ||
| }), | ||
| cssMap = _createThemeVars.cssMap, | ||
| cssVars = _createThemeVars.cssVars; | ||
| var defaultCssVars = { | ||
| "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -1643,5 +1942,3 @@ "--chakra-ring-offset-width": "0px", | ||
| Object.assign(theme, { | ||
| __cssVars: { ...defaultCssVars, | ||
| ...cssVars | ||
| }, | ||
| __cssVars: _extends({}, defaultCssVars, cssVars), | ||
| __cssMap: cssMap, | ||
@@ -1648,0 +1945,0 @@ __breakpoints: utils.analyzeBreakpoints(theme.breakpoints) |
| import { isObject, isString, isNumber, isCssVar, memoizedGet, objectKeys, mergeWith, runIfFn, walkObject, pick, analyzeBreakpoints } from '@chakra-ui/utils'; | ||
| const tokenToCSSVar = (scale, value) => theme => { | ||
| const valueStr = String(value); | ||
| const key = scale ? `${scale}.${valueStr}` : valueStr; | ||
| return isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| 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 tokenToCSSVar = function tokenToCSSVar(scale, value) { | ||
| return function (theme) { | ||
| var valueStr = String(value); | ||
| var key = scale ? scale + "." + valueStr : valueStr; | ||
| return isObject(theme.__cssMap) && key in theme.__cssMap ? theme.__cssMap[key].varRef : value; | ||
| }; | ||
| }; | ||
| function createTransform(options) { | ||
| const { | ||
| scale, | ||
| transform, | ||
| compose | ||
| } = options; | ||
| var scale = options.scale, | ||
| transform = options.transform, | ||
| compose = options.compose; | ||
| const fn = (value, theme) => { | ||
| const _value = tokenToCSSVar(scale, value)(theme); | ||
| var fn = function fn(value, theme) { | ||
| var _transform; | ||
| let result = transform?.(_value, theme) ?? _value; | ||
| var _value = tokenToCSSVar(scale, value)(theme); | ||
| var result = (_transform = transform == null ? void 0 : transform(_value, theme)) != null ? _transform : _value; | ||
| if (compose) { | ||
@@ -31,10 +51,10 @@ result = compose(result, theme); | ||
| function toConfig(scale, transform) { | ||
| return property => { | ||
| const result = { | ||
| property, | ||
| scale | ||
| return function (property) { | ||
| var result = { | ||
| property: property, | ||
| scale: scale | ||
| }; | ||
| result.transform = createTransform({ | ||
| scale, | ||
| transform | ||
| scale: scale, | ||
| transform: transform | ||
| }); | ||
@@ -45,18 +65,19 @@ return result; | ||
| const getRtl = ({ | ||
| rtl, | ||
| ltr | ||
| }) => theme => theme.direction === "rtl" ? rtl : ltr; | ||
| var getRtl = function getRtl(_ref) { | ||
| var rtl = _ref.rtl, | ||
| ltr = _ref.ltr; | ||
| return function (theme) { | ||
| return theme.direction === "rtl" ? rtl : ltr; | ||
| }; | ||
| }; | ||
| function logical(options) { | ||
| const { | ||
| property, | ||
| scale, | ||
| transform | ||
| } = options; | ||
| var property = options.property, | ||
| scale = options.scale, | ||
| transform = options.transform; | ||
| return { | ||
| scale, | ||
| scale: scale, | ||
| property: getRtl(property), | ||
| transform: scale ? createTransform({ | ||
| scale, | ||
| scale: scale, | ||
| compose: transform | ||
@@ -67,2 +88,4 @@ }) : transform | ||
| var _spaceXTemplate, _spaceYTemplate; | ||
| /** | ||
@@ -74,10 +97,10 @@ * The CSS transform order following the upcoming spec from CSSWG | ||
| */ | ||
| const transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| var transformTemplate = ["rotate(var(--chakra-rotate, 0))", "scaleX(var(--chakra-scale-x, 1))", "scaleY(var(--chakra-scale-y, 1))", "skewX(var(--chakra-skew-x, 0))", "skewY(var(--chakra-skew-y, 0))"]; | ||
| function getTransformTemplate() { | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))", ...transformTemplate].join(" "); | ||
| return ["translateX(var(--chakra-translate-x, 0))", "translateY(var(--chakra-translate-y, 0))"].concat(transformTemplate).join(" "); | ||
| } | ||
| function getTransformGpuTemplate() { | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)", ...transformTemplate].join(" "); | ||
| return ["translate3d(var(--chakra-translate-x, 0), var(--chakra-translate-y, 0), 0)"].concat(transformTemplate).join(" "); | ||
| } | ||
| const filterTemplate = { | ||
| var filterTemplate = { | ||
| "--chakra-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -94,3 +117,3 @@ "--chakra-brightness": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| }; | ||
| const backdropFilterTemplate = { | ||
| var backdropFilterTemplate = { | ||
| backdropFilter: ["var(--chakra-backdrop-blur)", "var(--chakra-backdrop-brightness)", "var(--chakra-backdrop-contrast)", "var(--chakra-backdrop-grayscale)", "var(--chakra-backdrop-hue-rotate)", "var(--chakra-backdrop-invert)", "var(--chakra-backdrop-opacity)", "var(--chakra-backdrop-saturate)", "var(--chakra-backdrop-sepia)"].join(" "), | ||
@@ -109,9 +132,9 @@ "--chakra-backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)", | ||
| return { | ||
| "--chakra-ring-offset-shadow": `var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)`, | ||
| "--chakra-ring-shadow": `var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)`, | ||
| "--chakra-ring-offset-shadow": "var(--chakra-ring-inset) 0 0 0 var(--chakra-ring-offset-width) var(--chakra-ring-offset-color)", | ||
| "--chakra-ring-shadow": "var(--chakra-ring-inset) 0 0 0 calc(var(--chakra-ring-width) + var(--chakra-ring-offset-width)) var(--chakra-ring-color)", | ||
| "--chakra-ring-width": value, | ||
| boxShadow: [`var(--chakra-ring-offset-shadow)`, `var(--chakra-ring-shadow)`, `var(--chakra-shadow, 0 0 #0000)`].join(", ") | ||
| boxShadow: ["var(--chakra-ring-offset-shadow)", "var(--chakra-ring-shadow)", "var(--chakra-shadow, 0 0 #0000)"].join(", ") | ||
| }; | ||
| } | ||
| const flexDirectionTemplate = { | ||
| var flexDirectionTemplate = { | ||
| "row-reverse": { | ||
@@ -126,17 +149,100 @@ space: "--chakra-space-x-reverse", | ||
| }; | ||
| const owlSelector = "& > :not(style) ~ :not(style)"; | ||
| const spaceXTemplate = { | ||
| [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))" | ||
| var owlSelector = "& > :not(style) ~ :not(style)"; | ||
| var spaceXTemplate = (_spaceXTemplate = {}, _spaceXTemplate[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))" | ||
| }, _spaceXTemplate); | ||
| var spaceYTemplate = (_spaceYTemplate = {}, _spaceYTemplate[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))" | ||
| }, _spaceYTemplate); | ||
| function _setPrototypeOf(o, p) { | ||
| _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { | ||
| o.__proto__ = p; | ||
| return o; | ||
| }; | ||
| return _setPrototypeOf(o, p); | ||
| } | ||
| function _inherits(subClass, superClass) { | ||
| if (typeof superClass !== "function" && superClass !== null) { | ||
| throw new TypeError("Super expression must either be null or a function"); | ||
| } | ||
| }; | ||
| const spaceYTemplate = { | ||
| [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))" | ||
| subClass.prototype = Object.create(superClass && superClass.prototype, { | ||
| constructor: { | ||
| value: subClass, | ||
| writable: true, | ||
| configurable: true | ||
| } | ||
| }); | ||
| if (superClass) _setPrototypeOf(subClass, superClass); | ||
| } | ||
| function _wrapRegExp() { | ||
| _wrapRegExp = function (re, groups) { | ||
| return new BabelRegExp(re, undefined, groups); | ||
| }; | ||
| var _super = RegExp.prototype; | ||
| var _groups = new WeakMap(); | ||
| function BabelRegExp(re, flags, groups) { | ||
| var _this = new RegExp(re, flags); | ||
| _groups.set(_this, groups || _groups.get(re)); | ||
| return _setPrototypeOf(_this, BabelRegExp.prototype); | ||
| } | ||
| }; | ||
| const directionMap = { | ||
| _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 = arguments; | ||
| if (typeof args[args.length - 1] !== "object") { | ||
| args = [].slice.call(args); | ||
| 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); | ||
| } | ||
| var directionMap = { | ||
| "to-t": "to top", | ||
@@ -151,71 +257,88 @@ "to-tr": "to top right", | ||
| }; | ||
| const valueSet = new Set(Object.values(directionMap)); | ||
| const globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| var valueSet = new Set(Object.values(directionMap)); | ||
| var globalSet = new Set(["none", "-moz-initial", "inherit", "initial", "revert", "unset"]); | ||
| const trimSpace = str => str.trim(); | ||
| var trimSpace = function trimSpace(str) { | ||
| return str.trim(); | ||
| }; | ||
| function parseGradient(value, theme) { | ||
| var _regex$exec$groups, _regex$exec; | ||
| if (value == null || globalSet.has(value)) return value; | ||
| const regex = /(?<type>^[a-z-A-Z]+)\((?<values>(.*))\)/g; | ||
| const { | ||
| type, | ||
| values | ||
| } = regex.exec(value)?.groups ?? {}; | ||
| var regex = /*#__PURE__*/_wrapRegExp(/(^[\x2DA-Za-z]+)\(((.*))\)/g, { | ||
| type: 1, | ||
| values: 2 | ||
| }); | ||
| var _ref = (_regex$exec$groups = (_regex$exec = regex.exec(value)) == null ? void 0 : _regex$exec.groups) != null ? _regex$exec$groups : {}, | ||
| type = _ref.type, | ||
| values = _ref.values; | ||
| if (!type || !values) return value; | ||
| const _type = type.includes("-gradient") ? type : `${type}-gradient`; | ||
| var _type = type.includes("-gradient") ? type : type + "-gradient"; | ||
| const [maybeDirection, ...stops] = values.split(",").map(trimSpace).filter(Boolean); | ||
| if (stops?.length === 0) return value; | ||
| const direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| var _values$split$map$fil = values.split(",").map(trimSpace).filter(Boolean), | ||
| maybeDirection = _values$split$map$fil[0], | ||
| stops = _values$split$map$fil.slice(1); | ||
| if ((stops == null ? void 0 : stops.length) === 0) return value; | ||
| var direction = maybeDirection in directionMap ? directionMap[maybeDirection] : maybeDirection; | ||
| stops.unshift(direction); | ||
| const _values = stops.map(stop => { | ||
| var _values = stops.map(function (stop) { | ||
| // if stop is valid shorthand direction, return it | ||
| if (valueSet.has(stop)) return stop; | ||
| const firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| var firstStop = stop.indexOf(" "); // color stop could be `red.200 20%` based on css gradient spec | ||
| const [_color, _stop] = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop]; | ||
| var _ref2 = firstStop !== -1 ? [stop.substr(0, firstStop), stop.substr(firstStop + 1)] : [stop], | ||
| _color = _ref2[0], | ||
| _stop = _ref2[1]; | ||
| const _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| var _stopOrFunc = isCSSFunction(_stop) ? _stop : _stop && _stop.split(" "); // else, get and transform the color token or css value | ||
| const key = `colors.${_color}`; | ||
| const color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| var key = "colors." + _color; | ||
| var color = key in theme.__cssMap ? theme.__cssMap[key].varRef : _color; | ||
| return _stopOrFunc ? [color, _stopOrFunc].join(" ") : color; | ||
| }); | ||
| return `${_type}(${_values.join(", ")})`; | ||
| return _type + "(" + _values.join(", ") + ")"; | ||
| } | ||
| const isCSSFunction = value => { | ||
| var isCSSFunction = function isCSSFunction(value) { | ||
| return isString(value) && value.includes("(") && value.includes(")"); | ||
| }; | ||
| const gradientTransform = (value, theme) => parseGradient(value, theme ?? {}); | ||
| var gradientTransform = function gradientTransform(value, theme) { | ||
| return parseGradient(value, theme != null ? theme : {}); | ||
| }; | ||
| const analyzeCSSValue = value => { | ||
| const num = parseFloat(value.toString()); | ||
| const unit = value.toString().replace(String(num), ""); | ||
| var analyzeCSSValue = function analyzeCSSValue(value) { | ||
| var num = parseFloat(value.toString()); | ||
| var unit = value.toString().replace(String(num), ""); | ||
| return { | ||
| unitless: !unit, | ||
| value: num, | ||
| unit | ||
| unit: unit | ||
| }; | ||
| }; | ||
| const wrap = str => value => `${str}(${value})`; | ||
| var wrap = function wrap(str) { | ||
| return function (value) { | ||
| return str + "(" + value + ")"; | ||
| }; | ||
| }; | ||
| const transformFunctions = { | ||
| filter(value) { | ||
| var transformFunctions = { | ||
| filter: function filter(value) { | ||
| return value !== "auto" ? value : filterTemplate; | ||
| }, | ||
| backdropFilter(value) { | ||
| backdropFilter: function backdropFilter(value) { | ||
| return value !== "auto" ? value : backdropFilterTemplate; | ||
| }, | ||
| ring(value) { | ||
| ring: function ring(value) { | ||
| return getRingTemplate(transformFunctions.px(value)); | ||
| }, | ||
| bgClip(value) { | ||
| bgClip: function bgClip(value) { | ||
| return value === "text" ? { | ||
@@ -228,4 +351,3 @@ color: "transparent", | ||
| }, | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === "auto") return getTransformTemplate(); | ||
@@ -235,17 +357,15 @@ if (value === "auto-gpu") return getTransformGpuTemplate(); | ||
| }, | ||
| px(value) { | ||
| px: function px(value) { | ||
| if (value == null) return value; | ||
| const { | ||
| unitless | ||
| } = analyzeCSSValue(value); | ||
| return unitless || isNumber(value) ? `${value}px` : value; | ||
| }, | ||
| fraction(value) { | ||
| return !isNumber(value) || value > 1 ? value : `${value * 100}%`; | ||
| var _analyzeCSSValue = analyzeCSSValue(value), | ||
| unitless = _analyzeCSSValue.unitless; | ||
| return unitless || isNumber(value) ? value + "px" : value; | ||
| }, | ||
| float(value, theme) { | ||
| const map = { | ||
| fraction: function fraction(value) { | ||
| return !isNumber(value) || value > 1 ? value : value * 100 + "%"; | ||
| }, | ||
| "float": function float(value, theme) { | ||
| var map = { | ||
| left: "right", | ||
@@ -256,9 +376,7 @@ right: "left" | ||
| }, | ||
| degree(value) { | ||
| degree: function degree(value) { | ||
| if (isCssVar(value) || value == null) return value; | ||
| const unitless = isString(value) && !value.endsWith("deg"); | ||
| return isNumber(value) || unitless ? `${value}deg` : value; | ||
| var unitless = isString(value) && !value.endsWith("deg"); | ||
| return isNumber(value) || unitless ? value + "deg" : value; | ||
| }, | ||
| gradient: gradientTransform, | ||
@@ -275,11 +393,9 @@ blur: wrap("blur"), | ||
| sepia: wrap("sepia"), | ||
| bgImage(value) { | ||
| bgImage: function bgImage(value) { | ||
| if (value == null) return value; | ||
| const prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? `url(${value})` : value; | ||
| var prevent = isCSSFunction(value) || globalSet.has(value); | ||
| return !prevent ? "url(" + value + ")" : value; | ||
| }, | ||
| outline(value) { | ||
| const isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| outline: function outline(value) { | ||
| var isNoneOrZero = String(value) === "0" || String(value) === "none"; | ||
| return value !== null && isNoneOrZero ? { | ||
@@ -292,9 +408,10 @@ outline: "2px solid transparent", | ||
| }, | ||
| flexDirection: function flexDirection(value) { | ||
| var _flexDirectionTemplat; | ||
| flexDirection(value) { | ||
| const { | ||
| space, | ||
| divide | ||
| } = flexDirectionTemplate[value] ?? {}; | ||
| const result = { | ||
| var _ref = (_flexDirectionTemplat = flexDirectionTemplate[value]) != null ? _flexDirectionTemplat : {}, | ||
| space = _ref.space, | ||
| divide = _ref.divide; | ||
| var result = { | ||
| flexDirection: value | ||
@@ -306,6 +423,5 @@ }; | ||
| } | ||
| }; | ||
| const t = { | ||
| var t = { | ||
| borderWidths: toConfig("borderWidths"), | ||
@@ -318,38 +434,33 @@ borderStyles: toConfig("borderStyles"), | ||
| spaceT: toConfig("space", transformFunctions.px), | ||
| degreeT(property) { | ||
| degreeT: function degreeT(property) { | ||
| return { | ||
| property, | ||
| property: property, | ||
| transform: transformFunctions.degree | ||
| }; | ||
| }, | ||
| prop(property, scale, transform) { | ||
| return { | ||
| property, | ||
| scale, | ||
| ...(scale && { | ||
| transform: createTransform({ | ||
| scale, | ||
| transform | ||
| }) | ||
| prop: function prop(property, scale, transform) { | ||
| return _extends({ | ||
| property: property, | ||
| scale: scale | ||
| }, scale && { | ||
| transform: createTransform({ | ||
| scale: scale, | ||
| transform: transform | ||
| }) | ||
| }; | ||
| }); | ||
| }, | ||
| propT(property, transform) { | ||
| propT: function propT(property, transform) { | ||
| return { | ||
| property, | ||
| transform | ||
| property: property, | ||
| transform: transform | ||
| }; | ||
| }, | ||
| sizes: toConfig("sizes", transformFunctions.px), | ||
| sizesT: toConfig("sizes", transformFunctions.fraction), | ||
| shadows: toConfig("shadows"), | ||
| logical, | ||
| logical: logical, | ||
| blur: toConfig("blur", transformFunctions.blur) | ||
| }; | ||
| const background = { | ||
| var background = { | ||
| background: t.colors("background"), | ||
@@ -382,3 +493,3 @@ backgroundColor: t.colors("backgroundColor"), | ||
| const border = { | ||
| var border = { | ||
| border: t.borders("border"), | ||
@@ -514,3 +625,3 @@ borderWidth: t.borderWidths("borderWidth"), | ||
| const color = { | ||
| var color = { | ||
| color: t.colors("color"), | ||
@@ -522,3 +633,3 @@ textColor: t.colors("color"), | ||
| const effect = { | ||
| var effect = { | ||
| boxShadow: t.shadows("boxShadow"), | ||
@@ -538,3 +649,3 @@ mixBlendMode: true, | ||
| const filter = { | ||
| var filter = { | ||
| filter: { | ||
@@ -561,3 +672,3 @@ transform: transformFunctions.filter | ||
| const flexbox = { | ||
| var flexbox = { | ||
| alignItems: true, | ||
@@ -572,17 +683,21 @@ alignContent: true, | ||
| experimental_spaceX: { | ||
| static: spaceXTemplate, | ||
| "static": spaceXTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value !== null ? { | ||
| "--chakra-space-x": value | ||
| } : null; | ||
| } | ||
| }) | ||
| }, | ||
| experimental_spaceY: { | ||
| static: spaceYTemplate, | ||
| "static": spaceYTemplate, | ||
| transform: createTransform({ | ||
| scale: "space", | ||
| transform: value => value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null | ||
| transform: function transform(value) { | ||
| return value != null ? { | ||
| "--chakra-space-y": value | ||
| } : null; | ||
| } | ||
| }) | ||
@@ -606,3 +721,3 @@ }, | ||
| const grid = { | ||
| var grid = { | ||
| gridGap: t.space("gridGap"), | ||
@@ -627,3 +742,3 @@ gridColumnGap: t.space("gridColumnGap"), | ||
| const interactivity = { | ||
| var interactivity = { | ||
| appearance: true, | ||
@@ -641,3 +756,3 @@ cursor: true, | ||
| const layout = { | ||
| var layout = { | ||
| width: t.sizesT("width"), | ||
@@ -667,3 +782,3 @@ inlineSize: t.sizesT("inlineSize"), | ||
| boxDecorationBreak: true, | ||
| float: t.propT("float", transformFunctions.float), | ||
| "float": t.propT("float", transformFunctions["float"]), | ||
| objectFit: true, | ||
@@ -689,3 +804,3 @@ objectPosition: true, | ||
| const list = { | ||
| var list = { | ||
| listStyleType: true, | ||
@@ -698,3 +813,3 @@ listStylePosition: true, | ||
| const srOnly = { | ||
| var srOnly = { | ||
| border: "0px", | ||
@@ -710,3 +825,3 @@ clip: "rect(0, 0, 0, 0)", | ||
| }; | ||
| const srFocusable = { | ||
| var srFocusable = { | ||
| position: "static", | ||
@@ -722,8 +837,8 @@ width: "auto", | ||
| const getWithPriority = (theme, key, styles) => { | ||
| const result = {}; | ||
| const obj = memoizedGet(theme, key, {}); | ||
| var getWithPriority = function getWithPriority(theme, key, styles) { | ||
| var result = {}; | ||
| var obj = memoizedGet(theme, key, {}); | ||
| for (const prop in obj) { | ||
| const isInStyles = prop in styles && styles[prop] != null; | ||
| for (var prop in obj) { | ||
| var isInStyles = prop in styles && styles[prop] != null; | ||
| if (!isInStyles) result[prop] = obj[prop]; | ||
@@ -735,5 +850,5 @@ } | ||
| const others = { | ||
| var others = { | ||
| srOnly: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) return srOnly; | ||
@@ -743,19 +858,24 @@ if (value === "focusable") return srFocusable; | ||
| } | ||
| }, | ||
| layerStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `layerStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "layerStyles." + value, styles); | ||
| } | ||
| }, | ||
| textStyle: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, `textStyles.${value}`, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, "textStyles." + value, styles); | ||
| } | ||
| }, | ||
| apply: { | ||
| processResult: true, | ||
| transform: (value, theme, styles) => getWithPriority(theme, value, styles) | ||
| transform: function transform(value, theme, styles) { | ||
| return getWithPriority(theme, value, styles); | ||
| } | ||
| } | ||
| }; | ||
| const position = { | ||
| var position = { | ||
| position: true, | ||
@@ -801,3 +921,3 @@ pos: t.prop("position"), | ||
| */ | ||
| const ring = { | ||
| var ring = { | ||
| ring: { | ||
@@ -812,3 +932,3 @@ transform: transformFunctions.ring | ||
| const space = { | ||
| var space = { | ||
| margin: t.spaceT("margin"), | ||
@@ -869,3 +989,3 @@ marginTop: t.spaceT("marginTop"), | ||
| const textDecoration = { | ||
| var textDecoration = { | ||
| textDecorationColor: t.colors("textDecorationColor"), | ||
@@ -883,3 +1003,3 @@ textDecoration: true, | ||
| const transform = { | ||
| var transform = { | ||
| clipPath: true, | ||
@@ -898,3 +1018,3 @@ transform: t.propT("transform", transformFunctions.transform), | ||
| const transition = { | ||
| var transition = { | ||
| transition: true, | ||
@@ -909,3 +1029,3 @@ transitionDelay: true, | ||
| const typography = { | ||
| var typography = { | ||
| fontFamily: t.prop("fontFamily", "fonts"), | ||
@@ -924,3 +1044,3 @@ fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px), | ||
| noOfLines: { | ||
| static: { | ||
| "static": { | ||
| overflow: "hidden", | ||
@@ -936,3 +1056,3 @@ textOverflow: "ellipsis", | ||
| isTruncated: { | ||
| transform(value) { | ||
| transform: function transform(value) { | ||
| if (value === true) { | ||
@@ -946,3 +1066,2 @@ return { | ||
| } | ||
| } | ||
@@ -954,20 +1073,86 @@ }; | ||
| const group = { | ||
| hover: selector => `${selector}:hover &, ${selector}[data-hover] &`, | ||
| focus: selector => `${selector}:focus &, ${selector}[data-focus] &`, | ||
| focusVisible: selector => `${selector}:focus-visible &`, | ||
| active: selector => `${selector}:active &, ${selector}[data-active] &`, | ||
| disabled: selector => `${selector}:disabled &, ${selector}[data-disabled] &`, | ||
| invalid: selector => `${selector}:invalid &, ${selector}[data-invalid] &`, | ||
| checked: selector => `${selector}:checked &, ${selector}[data-checked] &`, | ||
| indeterminate: selector => `${selector}:indeterminate &, ${selector}[aria-checked=mixed] &, ${selector}[data-indeterminate] &`, | ||
| readOnly: selector => `${selector}:read-only &, ${selector}[readonly] &, ${selector}[data-read-only] &`, | ||
| expanded: selector => `${selector}:read-only &, ${selector}[aria-expanded=true] &, ${selector}[data-expanded] &` | ||
| function _arrayLikeToArray(arr, len) { | ||
| if (len == null || len > arr.length) len = arr.length; | ||
| for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
| return arr2; | ||
| } | ||
| function _unsupportedIterableToArray(o, minLen) { | ||
| if (!o) return; | ||
| if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
| var n = Object.prototype.toString.call(o).slice(8, -1); | ||
| if (n === "Object" && o.constructor) n = o.constructor.name; | ||
| if (n === "Map" || n === "Set") return Array.from(o); | ||
| if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
| } | ||
| function _createForOfIteratorHelperLoose(o, allowArrayLike) { | ||
| var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; | ||
| if (it) return (it = it.call(o)).next.bind(it); | ||
| 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."); | ||
| } | ||
| var group = { | ||
| hover: function hover(selector) { | ||
| return selector + ":hover &, " + selector + "[data-hover] &"; | ||
| }, | ||
| focus: function focus(selector) { | ||
| return selector + ":focus &, " + selector + "[data-focus] &"; | ||
| }, | ||
| focusVisible: function focusVisible(selector) { | ||
| return selector + ":focus-visible &"; | ||
| }, | ||
| active: function active(selector) { | ||
| return selector + ":active &, " + selector + "[data-active] &"; | ||
| }, | ||
| disabled: function disabled(selector) { | ||
| return selector + ":disabled &, " + selector + "[data-disabled] &"; | ||
| }, | ||
| invalid: function invalid(selector) { | ||
| return selector + ":invalid &, " + selector + "[data-invalid] &"; | ||
| }, | ||
| checked: function checked(selector) { | ||
| return selector + ":checked &, " + selector + "[data-checked] &"; | ||
| }, | ||
| indeterminate: function indeterminate(selector) { | ||
| return selector + ":indeterminate &, " + selector + "[aria-checked=mixed] &, " + selector + "[data-indeterminate] &"; | ||
| }, | ||
| readOnly: function readOnly(selector) { | ||
| return selector + ":read-only &, " + selector + "[readonly] &, " + selector + "[data-read-only] &"; | ||
| }, | ||
| expanded: function expanded(selector) { | ||
| return selector + ":read-only &, " + selector + "[aria-expanded=true] &, " + selector + "[data-expanded] &"; | ||
| } | ||
| }; | ||
| const toGroup = fn => merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| var toGroup = function toGroup(fn) { | ||
| return merge(fn, "[role=group]", "[data-group]", ".group"); | ||
| }; | ||
| const merge = (fn, ...selectors) => selectors.map(fn).join(", "); | ||
| var merge = function merge(fn) { | ||
| for (var _len = arguments.length, selectors = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| selectors[_key - 1] = arguments[_key]; | ||
| } | ||
| const pseudoSelectors = { | ||
| return selectors.map(fn).join(", "); | ||
| }; | ||
| var pseudoSelectors = { | ||
| /** | ||
@@ -1220,12 +1405,14 @@ * Styles for CSS selector `&:hover` | ||
| }; | ||
| const pseudoPropNames = objectKeys(pseudoSelectors); | ||
| var pseudoPropNames = objectKeys(pseudoSelectors); | ||
| const systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| const layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| const layoutPropNames = objectKeys(layoutSystem); | ||
| const propNames = [...objectKeys(systemProps), ...pseudoPropNames]; | ||
| const styleProps = { ...systemProps, | ||
| ...pseudoSelectors | ||
| var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography, textDecoration, transform, list, transition); | ||
| var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position); | ||
| var layoutPropNames = objectKeys(layoutSystem); | ||
| var propNames = [].concat(objectKeys(systemProps), pseudoPropNames); | ||
| var styleProps = _extends({}, systemProps, pseudoSelectors); | ||
| var isStyleProp = function isStyleProp(prop) { | ||
| return prop in styleProps; | ||
| }; | ||
| const isStyleProp = prop => prop in styleProps; | ||
@@ -1243,64 +1430,80 @@ /** | ||
| const expandResponsive = styles => theme => { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| const { | ||
| isResponsive, | ||
| toArrayValue, | ||
| media: medias | ||
| } = theme.__breakpoints; | ||
| const computedStyles = {}; | ||
| var expandResponsive = function expandResponsive(styles) { | ||
| return function (theme) { | ||
| /** | ||
| * Before any style can be processed, the user needs to call `toCSSVar` | ||
| * which analyzes the theme's breakpoint and appends a `__breakpoints` property | ||
| * to the theme with more details of the breakpoints. | ||
| * | ||
| * To learn more, go here: packages/utils/src/responsive.ts #analyzeBreakpoints | ||
| */ | ||
| if (!theme.__breakpoints) return styles; | ||
| var _theme$__breakpoints = theme.__breakpoints, | ||
| isResponsive = _theme$__breakpoints.isResponsive, | ||
| toArrayValue = _theme$__breakpoints.toArrayValue, | ||
| medias = _theme$__breakpoints.media; | ||
| var computedStyles = {}; | ||
| for (const key in styles) { | ||
| let value = runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| for (var key in styles) { | ||
| var value = runIfFn(styles[key], theme); | ||
| if (value == null) continue; // converts the object responsive syntax to array syntax | ||
| value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| value = isObject(value) && isResponsive(value) ? toArrayValue(value) : value; | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| if (!Array.isArray(value)) { | ||
| computedStyles[key] = value; | ||
| continue; | ||
| } | ||
| const queries = value.slice(0, medias.length).length; | ||
| var queries = value.slice(0, medias.length).length; | ||
| for (let index = 0; index < queries; index += 1) { | ||
| const media = medias?.[index]; | ||
| for (var index = 0; index < queries; index += 1) { | ||
| var media = medias == null ? void 0 : medias[index]; | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| if (!media) { | ||
| computedStyles[key] = value[index]; | ||
| continue; | ||
| } | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| computedStyles[media] = computedStyles[media] || {}; | ||
| if (value[index] == null) { | ||
| continue; | ||
| if (value[index] == null) { | ||
| continue; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| computedStyles[media][key] = value[index]; | ||
| } | ||
| } | ||
| return computedStyles; | ||
| return computedStyles; | ||
| }; | ||
| }; | ||
| const isCSSVariableTokenValue = (key, value) => key.startsWith("--") && isString(value) && !isCssVar(value); | ||
| var isCSSVariableTokenValue = function isCSSVariableTokenValue(key, value) { | ||
| return key.startsWith("--") && isString(value) && !isCssVar(value); | ||
| }; | ||
| const resolveTokenValue = (theme, value) => { | ||
| var resolveTokenValue = function resolveTokenValue(theme, value) { | ||
| var _ref, _getVar2; | ||
| if (value == null) return value; | ||
| const getVar = val => theme.__cssMap?.[val]?.varRef; | ||
| var getVar = function getVar(val) { | ||
| var _theme$__cssMap, _theme$__cssMap$val; | ||
| const getValue = val => getVar(val) ?? val; | ||
| return (_theme$__cssMap = theme.__cssMap) == null ? void 0 : (_theme$__cssMap$val = _theme$__cssMap[val]) == null ? void 0 : _theme$__cssMap$val.varRef; | ||
| }; | ||
| const valueSplit = value.split(",").map(v => v.trim()); | ||
| const [tokenValue, fallbackValue] = valueSplit; | ||
| value = getVar(tokenValue) ?? getValue(fallbackValue) ?? getValue(value); | ||
| var getValue = function getValue(val) { | ||
| var _getVar; | ||
| return (_getVar = getVar(val)) != null ? _getVar : val; | ||
| }; | ||
| var valueSplit = value.split(",").map(function (v) { | ||
| return v.trim(); | ||
| }); | ||
| var tokenValue = valueSplit[0], | ||
| fallbackValue = valueSplit[1]; | ||
| value = (_ref = (_getVar2 = getVar(tokenValue)) != null ? _getVar2 : getValue(fallbackValue)) != null ? _ref : getValue(value); | ||
| return value; | ||
@@ -1310,16 +1513,22 @@ }; | ||
| function getCss(options) { | ||
| const { | ||
| configs = {}, | ||
| pseudos = {}, | ||
| theme | ||
| } = 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; | ||
| const css = (stylesOrFn, nested = false) => { | ||
| const _styles = runIfFn(stylesOrFn, theme); | ||
| var css = function css(stylesOrFn, nested) { | ||
| if (nested === void 0) { | ||
| nested = false; | ||
| } | ||
| const styles = expandResponsive(_styles)(theme); | ||
| let computedStyles = {}; | ||
| var _styles = runIfFn(stylesOrFn, theme); | ||
| for (let key in styles) { | ||
| const valueOrFn = styles[key]; | ||
| var styles = expandResponsive(_styles)(theme); | ||
| var computedStyles = {}; | ||
| for (var key in styles) { | ||
| var _config$transform, _config, _config2, _config3, _config4; | ||
| var valueOrFn = styles[key]; | ||
| /** | ||
@@ -1330,3 +1539,3 @@ * allows the user to pass functional values | ||
| let value = runIfFn(valueOrFn, theme); | ||
| var value = runIfFn(valueOrFn, theme); | ||
| /** | ||
@@ -1353,3 +1562,3 @@ * converts pseudo shorthands to valid selector | ||
| let config = configs[key]; | ||
| var config = configs[key]; | ||
@@ -1363,3 +1572,5 @@ if (config === true) { | ||
| if (isObject(value)) { | ||
| computedStyles[key] = computedStyles[key] ?? {}; | ||
| var _computedStyles$key; | ||
| computedStyles[key] = (_computedStyles$key = computedStyles[key]) != null ? _computedStyles$key : {}; | ||
| computedStyles[key] = mergeWith({}, computedStyles[key], css(value, true)); | ||
@@ -1369,3 +1580,3 @@ continue; | ||
| let rawValue = config?.transform?.(value, theme, _styles) ?? value; | ||
| var rawValue = (_config$transform = (_config = config) == null ? void 0 : _config.transform == null ? void 0 : _config.transform(value, theme, _styles)) != null ? _config$transform : value; | ||
| /** | ||
@@ -1379,3 +1590,3 @@ * Used for `layerStyle`, `textStyle` and `apply`. After getting the | ||
| rawValue = config?.processResult ? css(rawValue, true) : rawValue; | ||
| rawValue = (_config2 = config) != null && _config2.processResult ? css(rawValue, true) : rawValue; | ||
| /** | ||
@@ -1389,6 +1600,6 @@ * allows us define css properties for RTL and LTR. | ||
| const configProperty = runIfFn(config?.property, theme); | ||
| var configProperty = runIfFn((_config3 = config) == null ? void 0 : _config3.property, theme); | ||
| if (!nested && config?.static) { | ||
| const staticStyles = runIfFn(config.static, theme); | ||
| if (!nested && (_config4 = config) != null && _config4["static"]) { | ||
| var staticStyles = runIfFn(config["static"], theme); | ||
| computedStyles = mergeWith({}, computedStyles, staticStyles); | ||
@@ -1398,3 +1609,4 @@ } | ||
| if (configProperty && Array.isArray(configProperty)) { | ||
| for (const property of configProperty) { | ||
| for (var _iterator = _createForOfIteratorHelperLoose(configProperty), _step; !(_step = _iterator()).done;) { | ||
| var property = _step.value; | ||
| computedStyles[property] = rawValue; | ||
@@ -1429,9 +1641,11 @@ } | ||
| } | ||
| const css = styles => theme => { | ||
| const cssFn = getCss({ | ||
| theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| var css = function css(styles) { | ||
| return function (theme) { | ||
| var cssFn = getCss({ | ||
| theme: theme, | ||
| pseudos: pseudoSelectors, | ||
| configs: systemProps | ||
| }); | ||
| return cssFn(styles); | ||
| }; | ||
| }; | ||
@@ -1451,38 +1665,102 @@ | ||
| const toExpression = (operator, ...operands) => operands.map(resolveReference).join(` ${operator} `).replace(/calc/g, ""); | ||
| var toExpression = function toExpression(operator) { | ||
| for (var _len = arguments.length, operands = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { | ||
| operands[_key - 1] = arguments[_key]; | ||
| } | ||
| const add = (...operands) => `calc(${toExpression("+", ...operands)})`; | ||
| return operands.map(resolveReference).join(" " + operator + " ").replace(/calc/g, ""); | ||
| }; | ||
| const subtract = (...operands) => `calc(${toExpression("-", ...operands)})`; | ||
| var _add = function add() { | ||
| for (var _len2 = arguments.length, operands = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { | ||
| operands[_key2] = arguments[_key2]; | ||
| } | ||
| const multiply = (...operands) => `calc(${toExpression("*", ...operands)})`; | ||
| return "calc(" + toExpression.apply(void 0, ["+"].concat(operands)) + ")"; | ||
| }; | ||
| const divide = (...operands) => `calc(${toExpression("/", ...operands)})`; | ||
| var _subtract = function subtract() { | ||
| for (var _len3 = arguments.length, operands = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { | ||
| operands[_key3] = arguments[_key3]; | ||
| } | ||
| const negate = x => { | ||
| const value = resolveReference(x); | ||
| return "calc(" + toExpression.apply(void 0, ["-"].concat(operands)) + ")"; | ||
| }; | ||
| var _multiply = function multiply() { | ||
| for (var _len4 = arguments.length, operands = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { | ||
| operands[_key4] = arguments[_key4]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["*"].concat(operands)) + ")"; | ||
| }; | ||
| var _divide = function divide() { | ||
| for (var _len5 = arguments.length, operands = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { | ||
| operands[_key5] = arguments[_key5]; | ||
| } | ||
| return "calc(" + toExpression.apply(void 0, ["/"].concat(operands)) + ")"; | ||
| }; | ||
| var _negate = function negate(x) { | ||
| var value = resolveReference(x); | ||
| if (value != null && !Number.isNaN(parseFloat(value))) { | ||
| return String(value).startsWith("-") ? String(value).slice(1) : `-${value}`; | ||
| return String(value).startsWith("-") ? String(value).slice(1) : "-" + value; | ||
| } | ||
| return multiply(value, -1); | ||
| return _multiply(value, -1); | ||
| }; | ||
| const calc = Object.assign(x => ({ | ||
| add: (...operands) => calc(add(x, ...operands)), | ||
| subtract: (...operands) => calc(subtract(x, ...operands)), | ||
| multiply: (...operands) => calc(multiply(x, ...operands)), | ||
| divide: (...operands) => calc(divide(x, ...operands)), | ||
| negate: () => calc(negate(x)), | ||
| toString: () => x.toString() | ||
| }), { | ||
| add, | ||
| subtract, | ||
| multiply, | ||
| divide, | ||
| negate | ||
| var calc = Object.assign(function (x) { | ||
| return { | ||
| add: function add() { | ||
| for (var _len6 = arguments.length, operands = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) { | ||
| operands[_key6] = arguments[_key6]; | ||
| } | ||
| return calc(_add.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| subtract: function subtract() { | ||
| for (var _len7 = arguments.length, operands = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) { | ||
| operands[_key7] = arguments[_key7]; | ||
| } | ||
| return calc(_subtract.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| multiply: function multiply() { | ||
| for (var _len8 = arguments.length, operands = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) { | ||
| operands[_key8] = arguments[_key8]; | ||
| } | ||
| return calc(_multiply.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| divide: function divide() { | ||
| for (var _len9 = arguments.length, operands = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) { | ||
| operands[_key9] = arguments[_key9]; | ||
| } | ||
| return calc(_divide.apply(void 0, [x].concat(operands))); | ||
| }, | ||
| negate: function negate() { | ||
| return calc(_negate(x)); | ||
| }, | ||
| toString: function toString() { | ||
| return x.toString(); | ||
| } | ||
| }; | ||
| }, { | ||
| add: _add, | ||
| subtract: _subtract, | ||
| multiply: _multiply, | ||
| divide: _divide, | ||
| negate: _negate | ||
| }); | ||
| function replaceWhiteSpace(value, replaceValue = "-") { | ||
| function replaceWhiteSpace(value, replaceValue) { | ||
| if (replaceValue === void 0) { | ||
| replaceValue = "-"; | ||
| } | ||
| return value.replace(/\s+/g, replaceValue); | ||
@@ -1492,19 +1770,27 @@ } | ||
| function escape(value) { | ||
| const valueStr = replaceWhiteSpace(value.toString()); | ||
| var valueStr = replaceWhiteSpace(value.toString()); | ||
| if (valueStr.includes("\\.")) return value; | ||
| const isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", `\\.`) : value; | ||
| var isDecimal = !Number.isInteger(parseFloat(value.toString())); | ||
| return isDecimal ? valueStr.replace(".", "\\.") : value; | ||
| } | ||
| function addPrefix(value, prefix = "") { | ||
| function addPrefix(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return [prefix, escape(value)].filter(Boolean).join("-"); | ||
| } | ||
| function toVarReference(name, fallback) { | ||
| return `var(${escape(name)}${fallback ? `, ${fallback}` : ""})`; | ||
| return "var(" + escape(name) + (fallback ? ", " + fallback : "") + ")"; | ||
| } | ||
| function toVarDefinition(value, prefix = "") { | ||
| return `--${addPrefix(value, prefix)}`; | ||
| function toVarDefinition(value, prefix) { | ||
| if (prefix === void 0) { | ||
| prefix = ""; | ||
| } | ||
| return "--" + addPrefix(value, prefix); | ||
| } | ||
| function cssVar(name, fallback, cssVarPrefix) { | ||
| const cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| var cssVariable = toVarDefinition(name, cssVarPrefix); | ||
| return { | ||
@@ -1517,14 +1803,17 @@ variable: cssVariable, | ||
| function createThemeVars(target, options) { | ||
| const context = { | ||
| var context = { | ||
| cssMap: {}, | ||
| cssVars: {} | ||
| }; | ||
| walkObject(target, (value, path) => { | ||
| walkObject(target, function (value, path) { | ||
| var _tokenHandlerMap$firs; | ||
| // firstKey will be e.g. "space" | ||
| const [firstKey] = path; | ||
| const handler = tokenHandlerMap[firstKey] ?? tokenHandlerMap.defaultHandler; | ||
| const { | ||
| cssVars, | ||
| cssMap | ||
| } = handler(path, value, options); | ||
| var firstKey = path[0]; | ||
| var handler = (_tokenHandlerMap$firs = tokenHandlerMap[firstKey]) != null ? _tokenHandlerMap$firs : tokenHandlerMap.defaultHandler; | ||
| var _handler = handler(path, value, options), | ||
| cssVars = _handler.cssVars, | ||
| cssMap = _handler.cssMap; | ||
| Object.assign(context.cssVars, cssVars); | ||
@@ -1539,43 +1828,44 @@ Object.assign(context.cssMap, cssMap); | ||
| */ | ||
| const tokenHandlerMap = { | ||
| space: (keys, value, options) => { | ||
| const properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| const [firstKey, ...referenceKeys] = keys; | ||
| const negativeLookupKey = `${firstKey}.-${referenceKeys.join(".")}`; | ||
| const negativeVarKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(negativeVarKey, undefined, options.cssVarPrefix); | ||
| const negativeValue = calc.negate(value); | ||
| const varRef = calc.negate(reference); | ||
| var tokenHandlerMap = { | ||
| space: function space(keys, value, options) { | ||
| var _extends2; | ||
| var properties = tokenHandlerMap.defaultHandler(keys, value, options); | ||
| var firstKey = keys[0], | ||
| referenceKeys = keys.slice(1); | ||
| var negativeLookupKey = firstKey + ".-" + referenceKeys.join("."); | ||
| var negativeVarKey = keys.join("-"); | ||
| var _cssVar = cssVar(negativeVarKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar.variable, | ||
| reference = _cssVar.reference; | ||
| var negativeValue = calc.negate(value); | ||
| var varRef = calc.negate(reference); | ||
| return { | ||
| cssVars: properties.cssVars, | ||
| cssMap: { ...properties.cssMap, | ||
| [negativeLookupKey]: { | ||
| value: `${negativeValue}`, | ||
| var: `${variable}`, | ||
| varRef | ||
| } | ||
| } | ||
| cssMap: _extends({}, properties.cssMap, (_extends2 = {}, _extends2[negativeLookupKey] = { | ||
| value: "" + negativeValue, | ||
| "var": "" + variable, | ||
| varRef: varRef | ||
| }, _extends2)) | ||
| }; | ||
| }, | ||
| defaultHandler: (keys, value, options) => { | ||
| const lookupKey = keys.join("."); | ||
| const varKey = keys.join("-"); | ||
| const { | ||
| variable, | ||
| reference | ||
| } = cssVar(varKey, undefined, options.cssVarPrefix); | ||
| defaultHandler: function defaultHandler(keys, value, options) { | ||
| var _cssVars, _cssMap; | ||
| var lookupKey = keys.join("."); | ||
| var varKey = keys.join("-"); | ||
| var _cssVar2 = cssVar(varKey, undefined, options.cssVarPrefix), | ||
| variable = _cssVar2.variable, | ||
| reference = _cssVar2.reference; | ||
| return { | ||
| cssVars: { | ||
| [variable]: value | ||
| }, | ||
| cssMap: { | ||
| [lookupKey]: { | ||
| value, | ||
| var: variable, | ||
| varRef: reference | ||
| } | ||
| } | ||
| cssVars: (_cssVars = {}, _cssVars[variable] = value, _cssVars), | ||
| cssMap: (_cssMap = {}, _cssMap[lookupKey] = { | ||
| value: value, | ||
| "var": variable, | ||
| varRef: reference | ||
| }, _cssMap) | ||
| }; | ||
@@ -1585,14 +1875,29 @@ } | ||
| const tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function _objectWithoutPropertiesLoose(source, excluded) { | ||
| if (source == null) return {}; | ||
| var target = {}; | ||
| var sourceKeys = Object.keys(source); | ||
| var key, i; | ||
| for (i = 0; i < sourceKeys.length; i++) { | ||
| key = sourceKeys[i]; | ||
| if (excluded.indexOf(key) >= 0) continue; | ||
| target[key] = source[key]; | ||
| } | ||
| return target; | ||
| } | ||
| var _excluded = ["__cssMap", "__cssVars", "__breakpoints"]; | ||
| var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"]; | ||
| function extractTokens(theme) { | ||
| const _tokens = tokens; | ||
| var _tokens = tokens; | ||
| return pick(theme, _tokens); | ||
| } | ||
| function omitVars(rawTheme) { | ||
| const { | ||
| __cssMap, | ||
| __cssVars, | ||
| __breakpoints, | ||
| ...cleanTheme | ||
| } = rawTheme; | ||
| rawTheme.__cssMap; | ||
| rawTheme.__cssVars; | ||
| rawTheme.__breakpoints; | ||
| var cleanTheme = _objectWithoutPropertiesLoose(rawTheme, _excluded); | ||
| return cleanTheme; | ||
@@ -1602,2 +1907,4 @@ } | ||
| function toCSSVar(rawTheme) { | ||
| var _theme$config; | ||
| /** | ||
@@ -1607,22 +1914,14 @@ * In the case the theme has already been converted to css-var (e.g extending the theme), | ||
| */ | ||
| const theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| var theme = omitVars(rawTheme); // omit components and breakpoints from css variable map | ||
| const tokens = extractTokens(theme); | ||
| const cssVarPrefix = theme.config?.cssVarPrefix; | ||
| const { | ||
| /** | ||
| * This is more like a dictionary of tokens users will type `green.500`, | ||
| * and their equivalent css variable. | ||
| */ | ||
| cssMap, | ||
| var tokens = extractTokens(theme); | ||
| var cssVarPrefix = (_theme$config = theme.config) == null ? void 0 : _theme$config.cssVarPrefix; | ||
| /** | ||
| * The extracted css variables will be stored here, and used in | ||
| * the emotion's <Global/> component to attach variables to `:root` | ||
| */ | ||
| cssVars | ||
| } = createThemeVars(tokens, { | ||
| cssVarPrefix | ||
| }); | ||
| const defaultCssVars = { | ||
| var _createThemeVars = createThemeVars(tokens, { | ||
| cssVarPrefix: cssVarPrefix | ||
| }), | ||
| cssMap = _createThemeVars.cssMap, | ||
| cssVars = _createThemeVars.cssVars; | ||
| var defaultCssVars = { | ||
| "--chakra-ring-inset": "var(--chakra-empty,/*!*/ /*!*/)", | ||
@@ -1638,5 +1937,3 @@ "--chakra-ring-offset-width": "0px", | ||
| Object.assign(theme, { | ||
| __cssVars: { ...defaultCssVars, | ||
| ...cssVars | ||
| }, | ||
| __cssVars: _extends({}, defaultCssVars, cssVars), | ||
| __cssMap: cssMap, | ||
@@ -1643,0 +1940,0 @@ __breakpoints: analyzeBreakpoints(theme.breakpoints) |
@@ -83,1 +83,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=background.d.ts.map |
@@ -238,1 +238,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=border.d.ts.map |
@@ -23,1 +23,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=color.d.ts.map |
@@ -38,1 +38,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=effect.d.ts.map |
@@ -84,1 +84,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=filter.d.ts.map |
@@ -182,1 +182,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=flexbox.d.ts.map |
@@ -155,1 +155,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=grid.d.ts.map |
@@ -19,1 +19,2 @@ export * from "./background"; | ||
| export * from "./typography"; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -39,1 +39,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=interactivity.d.ts.map |
@@ -145,1 +145,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=layout.d.ts.map |
@@ -24,1 +24,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=list.d.ts.map |
@@ -34,1 +34,2 @@ import { Config } from "../utils/prop-config"; | ||
| } | ||
| //# sourceMappingURL=others.d.ts.map |
@@ -70,1 +70,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=position.d.ts.map |
@@ -30,1 +30,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=ring.d.ts.map |
@@ -190,1 +190,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=space.d.ts.map |
@@ -39,1 +39,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=text-decoration.d.ts.map |
@@ -65,1 +65,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=transform.d.ts.map |
@@ -35,1 +35,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=transition.d.ts.map |
@@ -67,1 +67,2 @@ import * as CSS from "csstype"; | ||
| } | ||
| //# sourceMappingURL=typography.d.ts.map |
@@ -20,1 +20,2 @@ export declare type Operand = string | number | { | ||
| export {}; | ||
| //# sourceMappingURL=calc.d.ts.map |
@@ -10,1 +10,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export declare function createThemeVars(target: Dict, options: CreateThemeVarsOptions): ThemeVars; | ||
| //# sourceMappingURL=create-theme-vars.d.ts.map |
@@ -8,1 +8,2 @@ export declare function addPrefix(value: string, prefix?: string): string; | ||
| }; | ||
| //# sourceMappingURL=css-var.d.ts.map |
@@ -5,1 +5,2 @@ export * from "./calc"; | ||
| export type { ThemeScale } from "./theme-tokens"; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -11,1 +11,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export {}; | ||
| //# sourceMappingURL=theme-tokens.d.ts.map |
| import { Dict } from "@chakra-ui/utils"; | ||
| import type { WithCSSVar } from "../utils/types"; | ||
| export declare function toCSSVar<T extends Dict>(rawTheme: T): WithCSSVar<T>; | ||
| //# sourceMappingURL=to-css-var.d.ts.map |
@@ -14,1 +14,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export {}; | ||
| //# sourceMappingURL=css.d.ts.map |
@@ -11,1 +11,2 @@ export * from "./config"; | ||
| export type { WithCSSVar } from "./utils/types"; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -210,1 +210,2 @@ export declare const pseudoSelectors: { | ||
| export declare const pseudoPropNames: ("_hover" | "_active" | "_focus" | "_highlighted" | "_focusWithin" | "_focusVisible" | "_disabled" | "_readOnly" | "_before" | "_after" | "_empty" | "_expanded" | "_checked" | "_grabbed" | "_pressed" | "_invalid" | "_valid" | "_loading" | "_selected" | "_hidden" | "_autofill" | "_even" | "_odd" | "_first" | "_last" | "_notFirst" | "_notLast" | "_visited" | "_activeLink" | "_activeStep" | "_indeterminate" | "_groupHover" | "_groupFocus" | "_groupFocusVisible" | "_groupActive" | "_groupDisabled" | "_groupInvalid" | "_groupChecked" | "_placeholder" | "_fullScreen" | "_selection" | "_rtl" | "_mediaDark" | "_dark" | "_light")[]; | ||
| //# sourceMappingURL=pseudos.d.ts.map |
@@ -5,1 +5,2 @@ export declare const systemProps: any; | ||
| export declare const isStyleProp: (prop: string) => boolean; | ||
| //# sourceMappingURL=system.d.ts.map |
@@ -37,1 +37,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export {}; | ||
| //# sourceMappingURL=system.types.d.ts.map |
@@ -30,1 +30,2 @@ /** | ||
| } | ||
| //# sourceMappingURL=theming.types.d.ts.map |
@@ -12,1 +12,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export {}; | ||
| //# sourceMappingURL=create-transform.d.ts.map |
@@ -13,1 +13,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export declare const expandResponsive: (styles: Dict) => (theme: Dict) => Dict<any>; | ||
| //# sourceMappingURL=expand-responsive.d.ts.map |
@@ -33,1 +33,2 @@ import type { ThemeScale } from "../create-theme-vars"; | ||
| }; | ||
| //# sourceMappingURL=index.d.ts.map |
@@ -7,1 +7,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export declare const gradientTransform: Transform; | ||
| //# sourceMappingURL=parse-gradient.d.ts.map |
@@ -47,1 +47,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| export {}; | ||
| //# sourceMappingURL=prop-config.d.ts.map |
@@ -55,1 +55,2 @@ export declare function getTransformTemplate(): string; | ||
| }; | ||
| //# sourceMappingURL=templates.d.ts.map |
@@ -46,1 +46,2 @@ import { Dict } from "@chakra-ui/utils"; | ||
| }; | ||
| //# sourceMappingURL=transform-functions.d.ts.map |
@@ -25,1 +25,2 @@ import { AnalyzeBreakpointsReturn, Dict } from "@chakra-ui/utils"; | ||
| }>; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@chakra-ui/styled-system", | ||
| "version": "1.14.0", | ||
| "version": "1.14.1", | ||
| "description": "Style function for css-in-js building component libraries", | ||
@@ -24,3 +24,4 @@ "keywords": [ | ||
| "files": [ | ||
| "dist" | ||
| "dist", | ||
| "src" | ||
| ], | ||
@@ -39,3 +40,3 @@ "publishConfig": { | ||
| "dependencies": { | ||
| "@chakra-ui/utils": "1.9.0", | ||
| "@chakra-ui/utils": "1.9.1", | ||
| "csstype": "^3.0.9" | ||
@@ -42,0 +43,0 @@ }, |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by73.06%
440771
- Number of package files
- increased by165.96%
125
- Lines of code
- increased by61.79%
10432
- Number of medium supply chain risk alerts
- decreased by-100%
0
Dependency changes
+ Added@chakra-ui/utils@1.9.1(transitive)
- Removed@chakra-ui/utils@1.9.0(transitive)
Updated@chakra-ui/utils@1.9.1