@yamada-ui/react 2.2.5-dev-20260721065212 → 2.2.5-dev-20260725054331

package/dist/cjs/core/system/var.cjs

@@ -4,7 +4,6 @@ const require_create_system = require("./create-system.cjs");
 const require_utils = require("../css/utils.cjs");
 const require_animation = require("../css/animation.cjs");
 const require_color_mix = require("../css/color-mix.cjs");
-const require_conditions = require("../css/conditions.cjs");
 const require_gradient = require("../css/gradient.cjs");
 const require_css = require("../css/css.cjs");
 //#region src/core/system/var.ts
@@ -41,7 +40,6 @@ const isColor = (token) => token.startsWith("colors.");
 const isColorScheme = (token) => (0, require_utils_index.utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
 function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 	return function(tokens) {
-		const { getQuery, isResponsive } = breakpoints;
 		function tokenToVar(token) {
 			token = token.replace(/\./g, "-");
 			token = token.replace(/\//g, "\\/");
@@ -51,7 +49,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 				variable
 			};
 		}
-		return function(cssMap = {}, cssVars = {}, prevTokens) {
+		return function(cssMap = {}, cssVars = {
+			light: {},
+			dark: {}
+		}, prevTokens) {
 			const system = {
 				...require_create_system.defaultSystem,
 				cssMap,
@@ -131,20 +132,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 				};
 			}
 			function createVar(token, value, variable) {
-				return function(semantic, queries = []) {
+				return function(semantic, colorMode = "light", breakpoint = "base") {
 					if (isAnimation(token)) value = createAnimationVar(value);
-					if ((0, require_utils_index.utils_exports.isArray)(value)) {
-						const [lightValue, darkValue] = value;
-						createVar(token, lightValue, variable)(semantic, queries);
-						createVar(token, darkValue, variable)(semantic, [...queries, require_conditions.conditions._dark]);
-					} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value]) => {
-						if (key === "base") createVar(token, value, variable)(semantic, queries);
-						else {
-							const query = getQuery(key);
-							if (!query) return;
-							createVar(token, value, variable)(semantic, [...queries, query]);
-						}
-					});
+					if ((0, require_utils_index.utils_exports.isArray)(value)) value.forEach((value, index) => createVar(token, value, variable)(semantic, !index ? "light" : "dark", breakpoint));
+					else if (breakpoints.isResponsive(value, true)) Object.entries(value).forEach(([breakpoint, value]) => createVar(token, value, variable)(semantic, colorMode, breakpoint));
 					else {
 						const computedValue = valueToVar(value);
 						let resolvedValue = computedValue;
@@ -156,12 +147,14 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 							resolvedValue = reference;
 						}
 						if (!(0, require_utils_index.utils_exports.isObject)(resolvedValue)) resolvedValue = { [variable]: resolvedValue };
-						const resolvedCssVars = queries.reduceRight((prev, key) => ({ [key]: prev }), resolvedValue);
-						cssVars = (0, require_utils_index.utils_exports.merge)(cssVars, resolvedCssVars);
+						const query = breakpoints.getQuery(breakpoint);
+						if (query) resolvedValue = { [colorMode]: { [query]: resolvedValue } };
+						else resolvedValue = { [colorMode]: resolvedValue };
+						cssVars = (0, require_utils_index.utils_exports.merge)(cssVars, resolvedValue);
 					}
 				};
 			}
-			for (let [token, { semantic, value }] of Object.entries(tokens)) {
+			for (const [token, { semantic, value }] of Object.entries(tokens)) {
 				const { reference, variable } = tokenToVar(token);
 				createVar(token, value, variable)(semantic);
 				if (isSpace(token)) {
@@ -186,7 +179,10 @@ function createVars(prefix = "ui", theme, breakpoints, rootNode) {
 function mergeVars(...fns) {
 	return function(prevTokens) {
 		let cssMap = {};
-		let cssVars = {};
+		let cssVars = {
+			light: {},
+			dark: {}
+		};
 		for (const fn of fns) {
 			const result = fn(cssMap, cssVars, prevTokens);
 			cssMap = {
@@ -204,6 +200,40 @@ function mergeVars(...fns) {
 		};
 	};
 }
+function createSelector(selectors, attr) {
+	return selectors.split(",").map((selector) => {
+		selector = selector.trim();
+		if (!attr) return selector;
+		else if (selector === ":host") return `${selector}(${attr})`;
+		else return `${selector}${attr}`;
+	}).join(", ");
+}
+function createVarRules(varRoot, cssVars) {
+	return Object.fromEntries(Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {
+		if ((0, require_utils_index.utils_exports.isEmptyObject)(cssVars)) return [];
+		if (colorMode === "light" || colorMode === "dark") {
+			const dark = colorMode === "dark";
+			const attr = `[data-mode=${colorMode}]`;
+			return [[[createSelector(varRoot, dark ? attr : void 0), attr].join(", "), cssVars]];
+		} else return Object.entries(cssVars).flatMap(([themeScheme, cssVars]) => Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {
+			if ((0, require_utils_index.utils_exports.isEmptyObject)(cssVars)) return [];
+			const dark = colorMode === "dark";
+			const attrs = {
+				colorMode: `[data-mode=${colorMode}]`,
+				themeScheme: `[data-theme=${themeScheme}]`
+			};
+			const attr = !dark ? attrs.themeScheme : `${attrs.themeScheme}${attrs.colorMode}`;
+			return [[(0, require_utils_index.utils_exports.filterEmpty)([
+				createSelector(varRoot, attr),
+				attr,
+				`${attrs.themeScheme} ${attrs.colorMode}`,
+				dark ? `${attrs.colorMode} ${attrs.themeScheme}` : void 0,
+				`:host(${attrs.themeScheme}) ${attrs.colorMode}`,
+				dark ? `:host(${attrs.colorMode}) ${attrs.themeScheme}` : void 0
+			]).join(", "), cssVars]];
+		}));
+	}));
+}
 function varAttr(value, token, fallbackValue) {
 	if ((0, require_utils_index.utils_exports.isUndefined)(value) || (0, require_utils_index.utils_exports.isNull)(value) || require_utils.isCSSFunction(value)) return value;
 	if ((0, require_utils_index.utils_exports.isObject)(value) || (0, require_utils_index.utils_exports.isArray)(value)) return (0, require_utils_index.utils_exports.replaceObject)(value, (value) => varAttr(value, token, fallbackValue));
@@ -229,6 +259,7 @@ function injectVars(objOrArray, targets, isInvalidProp) {
 	else return callback(objOrArray);
 }
 //#endregion
+exports.createVarRules = createVarRules;
 exports.createVars = createVars;
 exports.getColorSchemeVar = getColorSchemeVar;
 exports.getVar = getVar;

package/dist/cjs/core/system/var.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  CSSMap,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  isArray,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  conditions,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: Dict = {},\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: Dict } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (semantic: boolean, queries: string[] = []) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            const [lightValue, darkValue] = value\n\n            createVar(token, lightValue, variable)(semantic, queries)\n            createVar(\n              token,\n              darkValue,\n              variable,\n            )(semantic, [...queries, conditions._dark])\n          } else if (isResponsive(value, true)) {\n            Object.entries(value).forEach(([key, value]) => {\n              if (key === \"base\") {\n                createVar(token, value, variable)(semantic, queries)\n              } else {\n                const query = getQuery(key)\n\n                if (!query) return\n\n                createVar(token, value, variable)(semantic, [...queries, query])\n              }\n            })\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const resolvedCssVars = queries.reduceRight<Dict>(\n              (prev, key) => ({ [key]: prev }),\n              resolvedValue,\n            )\n\n            cssVars = merge(cssVars, resolvedCssVars)\n          }\n        }\n      }\n\n      for (let [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: Dict = {}\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":";;;;;;;;;;AA6CA,SAAgB,uBACd,OACA,UACA;CACA,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAChB,OAAO,MAAM,QAAQ,eAAe,GAAG,UAAU;EAC/C,MAAM,CAAC,OAAO,iBAAiB,MAAM,MAAM,OAAO;EAElD,OAAO,SAAS,MAAM,KAAK,GAAG,eAAe,KAAK,CAAC;CACrD,CAAC;MACE,OAAO;AACd;AAEA,SAAgB,OAAO,OAAe,UAAmB;CACvD,IAAI,CAAC,MAAM,WAAW,IAAI,GAAG,QAAQ,KAAK;CAE1C,QAAQ,MAAM,QAAQ,mBAAmB,EAAE;CAE3C,OAAO,WAAW,OAAO,MAAM,IAAI,SAAS,KAAK,OAAO,MAAM;AAChE;AAEA,SAAgB,WAAW,QAAgB;CACzC,OAAO,SAAU,OAAe;EAG9B,OAAO,KAFQ,OAAO,OAAO,KAAK,aAAA,KAEf,GAAG;CACxB;AACF;AAEA,SAAgB,kBAAkB,QAAgB;CAChD,OAAO,SAAU,OAAY,UAAmB;EAC9C,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,KAAK,GAAG,OAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAA;EAElC,MAAM,GAAG,SAAS,MAAM,MAAM,GAAG;EAEjC,OAAO,OAAO,GAAG,OAAO,eAAe,SAAS,QAAQ;CAC1D;AACF;AAEA,MAAM,cAAc,UAAkB,MAAM,WAAW,YAAY;AACnE,MAAM,eAAe,UAAkB,MAAM,WAAW,YAAY;AACpE,MAAM,eAAe,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAa,iBAAiB,WAAA,GAAA,oBAAA,cAAA,SAAA,CACnB,KAAK,KAAK,MAAM,WAAW,cAAc,KAAK,CAAC,MAAM,SAAS,GAAG;AAE5E,SAAgB,WACd,SAAA,MACA,OACA,aACA,UACA;CACA,OAAO,SAAU,QAAwB;EACvC,MAAM,EAAE,UAAU,iBAAiB;EAEnC,SAAS,WAAW,OAAyB;GAC3C,QAAQ,MAAM,QAAQ,OAAO,GAAG;GAChC,QAAQ,MAAM,QAAQ,OAAO,KAAK;GAElC,MAAM,WAAW,KAAK,CAAC,SAAA,GAAA,oBAAA,cAAA,OAAA,CAAe,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAG3E,OAAO;IAAE,WAAA,OAFgB,SAAS;IAEd;GAAS;EAC/B;EAEA,OAAO,SACL,SAAiB,CAAC,GAClB,UAAgB,CAAC,GACjB,YACmC;GACnC,MAAM,SAAiB;IAAE,GAAGA,sBAAAA;IAAe;IAAQ;GAAS;GAC5D,MAAM,UAAU;IAAE,KAAA,YAAA;IAAK;IAAQ;GAAM;GAErC,SAAS,oBACP,OACA,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG;IAE1D,IAAI,UAAU,cAAc,OAAO,CAAC,KAAA,GAAW,KAAK;IAIpD,IAAI,EAFgB,OAAO,iBAAiB,aAAa,gBAEvC,OAAO,CAAC,KAAA,GAAW,KAAK;IAE1C,MAAM,EAAE,WAAW,aAAa,WAAW,YAAY;IAEvD,OAAO,CAAC,UAAU,SAAS;GAC7B;GAEA,SAAS,WAAW,OAAY;IAC9B,OAAO,uBAAuB,QAAQ,OAAO,kBAAkB;KAC7D,IAAI,MAAM,SAAS,SAAS,KAAK,MAAM,SAAS,cAAc,GAAG;MAC/D,IAAI,cAAc,KAAK,GAAG,OAAO,kBAAkB,MAAM,CAAC,CAAC,KAAK;MAEhE,OAAOC,kBAAAA,SAAS,OAAO;OAAE,UAAU;OAAe;MAAO,CAAC;KAC5D,OAGE,IAFc,OAAO,UAAU,aAAa,QAG1C,OAAO,WAAW,KAAK,CAAC,CAAC;UACpB,IAAI,SAAS,UAAU,OAAO,MAAM,EAAE,KAC3C,OAAO,OAAO,MAAM,CAAC;UAChB,IAAI,eAAe;MACxB,gBACE,iBAAiB,UAAU,OAAO,cAAc,EAAE,MAC9C,OAAO,cAAc,EAAE,MACvB;MAEN,OAAO,SAAS,OAAO,GAAG,MAAM,IAAI,cAAc;KACpD,OACE,OAAO,SAAS,OAAO,GAAG,MAAM;IAGtC,CAAC;GACH;GAEA,SAAS,kBAAkB,OAAe,WAAmB;IAE3D,MAAM,CAAC,OAAO,GAAG,QADH,MAAM,MAAM,GACG;IAE7B,MAAM,gBAAgB,GAAG,MAAM,IAAI,KAAK,KAAK,GAAG;IAIhD,OAAO;KAAE,mBAAA,oBAAA,cAFiB,KAAK,OAAO,SAEb;KAAG;IAAc;GAC5C;GAEA,SAAS,mBAAmB,OAAsB;IAChD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GACf,OAAO,MAAM,KAAK,UAAUC,kBAAAA,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG;SAC5D,OAAOA,kBAAAA,UAAU,OAAO,OAAO;GACtC;GAEA,SAAS,kBAAkB,OAAe,OAAyB;IACjE,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,iBAAAA,SAAS,OAAO,OAAO;UACzB;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WAAW,YAAYA,iBAAAA,SAAS,OAAO,OAAO;KACvD;IACF;GACF;GAEA,SAAS,mBAAmB,OAAe,OAAY;IACrD,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOC,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;UACrD;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAD,kBAAAA,gBAAgBC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;KACzD;IACF;GACF;GAEA,SAAS,eACP,OACA,YACA,OACA;IACA,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAOJ,kBAAAA,SAAS,OAAO;MAAE,GAAG;MAAS;KAAW,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACAA,kBAAAA,SAAS,OAAO;OAAE,GAAG;OAAS;MAAW,CAAC;KAChD;IACF;GACF;GAEA,SAAS,UACP,OACA,OACA,UACA;IACA,OAAO,SAAU,UAAmB,UAAoB,CAAC,GAAG;KAC1D,IAAI,YAAY,KAAK,GAAG,QAAQ,mBAAmB,KAAK;KAExD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GAAG;MAClB,MAAM,CAAC,YAAY,aAAa;MAEhC,UAAU,OAAO,YAAY,QAAQ,CAAC,CAAC,UAAU,OAAO;MACxD,UACE,OACA,WACA,QACF,CAAC,CAAC,UAAU,CAAC,GAAG,SAASK,mBAAAA,WAAW,KAAK,CAAC;KAC5C,OAAO,IAAI,aAAa,OAAO,IAAI,GACjC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;MAC9C,IAAI,QAAQ,QACV,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,OAAO;WAC9C;OACL,MAAM,QAAQ,SAAS,GAAG;OAE1B,IAAI,CAAC,OAAO;OAEZ,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,UAAU,CAAC,GAAG,SAAS,KAAK,CAAC;MACjE;KACF,CAAC;UACI;MACL,MAAM,gBAAkC,WAAW,KAAK;MAExD,IAAI,gBAAyC;MAE7C,IAAI,YAAY,KAAK,GACnB,gBAAgB,mBAAmB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC5D,IAAI,WAAW,KAAK,GACzB,gBAAgB,kBAAkB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC3D,IAAI,QAAQ,KAAK,GACtB,gBAAgB,eACd,OACA,CAAC,QAAQ,GACT,aACF,CAAC,CAAC,QAAQ;WACL,IAAI,UAAU;OACnB,MAAM,GAAG,aAAa,oBAAoB,OAAO,aAAa;OAE9D,gBAAgB;MAClB;MAEA,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,aAAa,GACzB,gBAAgB,GAAG,WAAW,cAAc;MAE9C,MAAM,kBAAkB,QAAQ,aAC7B,MAAM,SAAS,GAAG,MAAM,KAAK,IAC9B,aACF;MAEA,WAAA,GAAA,oBAAA,cAAA,MAAA,CAAgB,SAAS,eAAe;KAC1C;IACF;GACF;GAEA,KAAK,IAAI,CAAC,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,MAAM,GAAG;IAC/D,MAAM,EAAE,WAAW,aAAa,WAAW,KAAK;IAEhD,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,QAAQ;IAE1C,IAAI,QAAQ,KAAK,GAAG;KAClB,MAAM,EAAE,mBAAmB,kBAAkB,kBAC3C,OACA,SACF;KAEA,OAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;KAAS;IAClE;IAEA,OAAO,SAAS;KAAE,KAAK;KAAW,KAAK;IAAS;GAClD;GAEA,OAAO;IAAE;IAAQ;GAAQ;EAC3B;CACF;AACF;AAIA,SAAgB,UAAU,GAAG,KAAmB;CAC9C,OAAO,SAAU,YAA6B;EAC5C,IAAI,SAAiB,CAAC;EACtB,IAAI,UAAgB,CAAC;EAErB,KAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,UAAU;GAE7C,SAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;GAAO;GACvC,UAAU;IAAE,GAAG;IAAS,GAAG,OAAO;GAAQ;EAC5C;EAEA,OAAO;GAAE;GAAQ;EAAQ;CAC3B;AACF;AAEA,SAAgB,QACd,OACA,OACA,eACe;CACf,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,KAAK,MAAA,GAAA,oBAAA,cAAA,OAAA,CAAY,KAAK,KAAKC,cAAAA,cAAc,KAAK,GAAG,OAAO;CAExE,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,MAAA,GAAA,oBAAA,cAAA,QAAA,CAAa,KAAK,GAClC,QAAA,GAAA,oBAAA,cAAA,cAAA,CAAqB,QAAQ,UAAU,QAAQ,OAAO,OAAO,aAAa,CAAC;MAE3E,OAAO,QACF,IAAI,MAAM,GAAG,MAAyB,IAAI,iBAAkB,MAA0B,KACvF;AACR;AAEA,SAAgB,WACd,YACA,SACA,eACG;CACH,IAAI,CAAC,YAAY,OAAO;CAExB,SAAS,SAAS,YAAkB;EAClC,OAAO,OAAO,YACZ,OAAO,QAAQ,UAAU,CAAC,CAAC,QAAQ,SAAU,CAAC,MAAM,QAAQ;GAC1D,IAAI,gBAAgB,IAAI,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC;GAEhD,MAAM,SAAS,QAAQ;GACvB,MAAM,SAA0B,CAAC;GAEjC,IAAI,QAAQ;IACV,MAAM,EAAE,UAAUC,YAAAA,SAAS,IAAI,KAAK,CAAC;IAErC,IAAIC,cAAAA,SAAS,KAAK,KAAKC,cAAAA,gBAAgB,KAAK,GAC1C,OAAO,KAAK,CAAC,KAAK,UAAU,KAAK,CAAC;SAElC,OAAO,KAAK,CACV,KAAK,WAAA,GAAA,oBAAA,cAAA,cAAA,CACS,QAAQ,UACpB,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,KAC5C,CACF,CAAC;GACL,OAAO,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GACvB,OAAO,KAAK,CAAC,MAAM,WAAW,OAAO,OAAO,CAAC,CAAC;QAE9C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;GAG3B,OAAO;EACT,CAAC,CACH;CACF;CAEA,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,UAAU,GAAG,OAAO,WAAW,IAAI,QAAQ;MAClD,OAAO,SAAS,UAAU;AACjC"}
+{"version":3,"file":"var.cjs","names":["defaultSystem","colorMix","animation","gradient","injectKeyframes","css","isCSSFunction","getStyle","isCSSVar","isInterpolation"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  ColorMode,\n  CSSMap,\n  CSSVars,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  filterEmpty,\n  isArray,\n  isEmptyObject,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: CSSVars = { light: {}, dark: {} },\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: CSSVars } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (\n          semantic: boolean,\n          colorMode: ColorMode = \"light\",\n          breakpoint: string = \"base\",\n        ) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            value.forEach((value, index) =>\n              createVar(token, value, variable)(\n                semantic,\n                !index ? \"light\" : \"dark\",\n                breakpoint,\n              ),\n            )\n          } else if (breakpoints.isResponsive(value, true)) {\n            Object.entries(value).forEach(([breakpoint, value]) =>\n              createVar(token, value, variable)(\n                semantic,\n                colorMode,\n                breakpoint,\n              ),\n            )\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const query = breakpoints.getQuery(breakpoint)\n\n            if (query)\n              resolvedValue = { [colorMode]: { [query]: resolvedValue } }\n            else resolvedValue = { [colorMode]: resolvedValue }\n\n            cssVars = merge(cssVars, resolvedValue)\n          }\n        }\n      }\n\n      for (const [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: CSSVars = { light: {}, dark: {} }\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nfunction createSelector(selectors: string, attr?: string): string {\n  return selectors\n    .split(\",\")\n    .map((selector) => {\n      selector = selector.trim()\n\n      if (!attr) return selector\n      else if (selector === \":host\") return `${selector}(${attr})`\n      else return `${selector}${attr}`\n    })\n    .join(\", \")\n}\n\nexport function createVarRules(varRoot: string, cssVars: CSSVars): Dict {\n  return Object.fromEntries(\n    Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n      if (isEmptyObject(cssVars)) return []\n\n      if (colorMode === \"light\" || colorMode === \"dark\") {\n        const dark = colorMode === \"dark\"\n        const attr = `[data-mode=${colorMode}]`\n        const selector = createSelector(varRoot, dark ? attr : undefined)\n\n        return [[[selector, attr].join(\", \"), cssVars]]\n      } else {\n        return Object.entries<Dict>(cssVars).flatMap(([themeScheme, cssVars]) =>\n          Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n            if (isEmptyObject(cssVars)) return []\n\n            const dark = colorMode === \"dark\"\n            const attrs = {\n              colorMode: `[data-mode=${colorMode}]`,\n              themeScheme: `[data-theme=${themeScheme}]`,\n            }\n            const attr = !dark\n              ? attrs.themeScheme\n              : `${attrs.themeScheme}${attrs.colorMode}`\n            const selector = createSelector(varRoot, attr)\n\n            return [\n              [\n                filterEmpty([\n                  selector,\n                  attr,\n                  `${attrs.themeScheme} ${attrs.colorMode}`,\n                  dark ? `${attrs.colorMode} ${attrs.themeScheme}` : undefined,\n                  `:host(${attrs.themeScheme}) ${attrs.colorMode}`,\n                  dark\n                    ? `:host(${attrs.colorMode}) ${attrs.themeScheme}`\n                    : undefined,\n                ]).join(\", \"),\n                cssVars,\n              ],\n            ]\n          }),\n        )\n      }\n    }),\n  )\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -4709,6 +4709,7 @@ var src_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	createStyled: () => require_styled.createStyled,
 	createSystem: () => require_create_system.createSystem,
 	createTransition: () => require_transition.createTransition,
+	createVarRules: () => require_var.createVarRules,
 	createVars: () => require_var.createVars,
 	css: () => require_css.css,
 	cssProps: () => require_props.cssProps,
@@ -8117,6 +8118,7 @@ exports.createStore = require_store.createStore;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
 exports.createTransition = require_transition.createTransition;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.css = require_css.css;
 exports.cssProps = require_props.cssProps;

package/dist/cjs/theme/tokens/z-indices.cjs

@@ -13,7 +13,8 @@ const zIndices = require("../../core/system/config.cjs").defineTokens.zIndices({
 	freeza: 9996,
 	vegeta: 9997,
 	sonGoku: 9998,
-	beerus: 9999
+	beerus: 9999,
+	infinity: 2147483647
 });
 //#endregion
 exports.zIndices = zIndices;

package/dist/cjs/theme/tokens/z-indices.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n\n  infinity: 2147483647,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CAER,UAAU;AACZ,CAAC"}

package/dist/esm/components/color-swatch/color-swatch.js

@@ -7,10 +7,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/color-swatch/color-swatch.tsx
 const checkersProps = {
 	bgImage: [
-		"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)",
-		"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
+		"linear(45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(45deg, transparent 75%, {checkers-fg} 75%)",
+		"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
 	].join(", "),
 	bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
 	bgSize: `8px 8px`

package/dist/esm/components/color-swatch/color-swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}

package/dist/esm/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/esm/components/progress/progress.style.js

@@ -59,7 +59,7 @@ const progressStyle = defineComponentSlotStyle({
 			"--stripe-angle": "45deg",
 			"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
 			"--stripe-size": "1rem",
-			bgImage: `linear-gradient(
+			bgImage: `linear(
             {stripe-angle},
             {stripe-color} 25%,
             transparent 25%,

package/dist/esm/components/progress/progress.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}

package/dist/esm/components/skeleton/skeleton.style.js

@@ -50,7 +50,7 @@ loading: {
 			animationIterationCount: "infinite",
 			animationName: "bg-position",
 			animationTimingFunction: "ease-in-out",
-			bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
+			bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
 			bgSize: "400% 100%"
 		}
 	},

package/dist/esm/components/skeleton/skeleton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}

package/dist/esm/core/css/gradient.js

@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
 function gradient(value, { system }) {
 	if (value == null || globalValues.has(value)) return value;
 	if (!isCSSFunction(value)) return `url('${value}')`;
-	let { type, values } = getCSSFunction(value);
-	if (!type || !values) return value;
-	type = type.includes("-gradient") ? type : `${type}-gradient`;
-	const [maybeDirection, ...colors] = splitValues(values);
-	if (!colors.length) return value;
-	const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
-	if (!(0, utils_exports.isUndefined)(direction)) colors.unshift(direction);
-	const computedValues = colors.map((_color) => {
-		if ((0, utils_exports.isUndefined)(_color)) return _color;
-		if (directionValues.has(_color)) return _color;
-		const i = _color.indexOf(" ");
-		let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
-		const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
-		const token = `colors.${color}`;
-		color = isCSSToken(system)(token) ? system.cssMap[token].ref : color;
-		if (ratio) return [color, ...(0, utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
-		else return color;
-	});
-	return `${type}(${computedValues.join(", ")})`;
+	return splitValues(value).map((value) => {
+		let { type, values } = getCSSFunction(value);
+		if (!type || !values) return value;
+		type = type.includes("-gradient") ? type : `${type}-gradient`;
+		const [maybeDirection, ...colors] = splitValues(values);
+		if (!colors.length) return value;
+		const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
+		if (!(0, utils_exports.isUndefined)(direction)) colors.unshift(direction);
+		const computedValues = colors.map((_color) => {
+			if ((0, utils_exports.isUndefined)(_color)) return _color;
+			if (directionValues.has(_color)) return _color;
+			const i = _color.indexOf(" ");
+			let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
+			const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
+			const token = `colors.${color}`;
+			color = isCSSToken(system)(token) ? system.cssMap[token].ref : color;
+			if (ratio) return [color, ...(0, utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
+			else return color;
+		});
+		return `${type}(${computedValues.join(", ")})`;
+	}).join(", ");
 }
 //#endregion
 export { gradient };

package/dist/esm/core/css/gradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\n  splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n  \"to-b\": \"to bottom\",\n  \"to-bl\": \"to bottom left\",\n  \"to-br\": \"to bottom right\",\n  \"to-l\": \"to left\",\n  \"to-r\": \"to right\",\n  \"to-t\": \"to top\",\n  \"to-tl\": \"to top left\",\n  \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return `url('${value}')`\n\n  let { type, values } = getCSSFunction(value)\n\n  if (!type || !values) return value\n\n  type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n  const [maybeDirection, ...colors] = splitValues(values)\n\n  if (!colors.length) return value\n\n  const direction =\n    maybeDirection && maybeDirection in directions\n      ? directions[maybeDirection]\n      : maybeDirection\n\n  if (!isUndefined(direction)) colors.unshift(direction)\n\n  const computedValues = colors.map((_color) => {\n    if (isUndefined(_color)) return _color\n\n    if (directionValues.has(_color)) return _color\n\n    const i = _color.indexOf(\" \")\n\n    let [color, _ratio] =\n      i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n    const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n    const token = `colors.${color}`\n\n    color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n    if (ratio) return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n    else return color\n  })\n\n  return `${type}(${computedValues.join(\", \")})`\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFY,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,IAAI,EAAE,MAAM,WAAW,eAAe,KAAK;CAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;CAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;CAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAU,YAAY,MAAM;CAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;CAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;CAEN,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;CAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;EAC5C,KAAA,GAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;EAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;EAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;EAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;EAEhE,MAAM,QAAQ,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;EAEhE,MAAM,QAAQ,UAAU;EAExB,QAAQ,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;EAEhE,IAAI,OAAO,OAAO,CAAC,OAAO,IAAA,GAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;OACpE,OAAO;CACd,CAAC;CAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;AAC9C"}
+{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\n  splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n  \"to-b\": \"to bottom\",\n  \"to-bl\": \"to bottom left\",\n  \"to-br\": \"to bottom right\",\n  \"to-l\": \"to left\",\n  \"to-r\": \"to right\",\n  \"to-t\": \"to top\",\n  \"to-tl\": \"to top left\",\n  \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return `url('${value}')`\n\n  return splitValues(value)\n    .map((value) => {\n      let { type, values } = getCSSFunction(value)\n\n      if (!type || !values) return value\n\n      type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n      const [maybeDirection, ...colors] = splitValues(values)\n\n      if (!colors.length) return value\n\n      const direction =\n        maybeDirection && maybeDirection in directions\n          ? directions[maybeDirection]\n          : maybeDirection\n\n      if (!isUndefined(direction)) colors.unshift(direction)\n\n      const computedValues = colors.map((_color) => {\n        if (isUndefined(_color)) return _color\n\n        if (directionValues.has(_color)) return _color\n\n        const i = _color.indexOf(\" \")\n\n        let [color, _ratio] =\n          i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n        const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n        const token = `colors.${color}`\n\n        color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n        if (ratio)\n          return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n        else return color\n      })\n\n      return `${type}(${computedValues.join(\", \")})`\n    })\n    .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFY,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAO,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAW,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAU,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQ,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQ,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}

package/dist/esm/core/css/utils.js

@@ -82,7 +82,7 @@ function tokenToVar(system) {
 }
 function varToValue(system) {
 	return function(variable) {
-		const value = system.cssVars[variable];
+		const value = system.cssVars.light[variable];
 		if (isCSSVar(value)) return varToValue(system)(value.replace(/^var\(/, "").replace(/\)$/, ""));
 		else return value;
 	};

package/dist/esm/core/css/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n  system: System\n  css?: CSSFunction\n  fallback?: any\n  prev?: Dict\n  properties?: CSSProperties[]\n  theme?: UsageTheme\n}\n\nexport interface Transform {\n  (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n  return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n  return function (value: any) {\n    return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n  }\n}\n\nexport function isImportant(value: any): boolean {\n  return (\n    isString(value) && (/\\s*!important$/.test(value) || /\\s*!$/.test(value))\n  )\n}\n\nexport function omitImportant(value: any): string {\n  return isString(value) ? value.replace(/(!important|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n  if (isString(value)) return value + \" !important\"\n  else if (isObject(value))\n    if (style?.important) {\n      return Object.fromEntries(\n        Object.entries(value).map(([key, value]) => [\n          key,\n          value + \" !important\",\n        ]),\n      )\n    } else {\n      if (!style?.properties) return value\n\n      for (const property of style.properties) value[property] += \" !important\"\n    }\n\n  return value\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken))\n      return system.cssMap[resolvedToken]!.ref\n    else return fallbackValue || value\n  }\n}\n\nexport function varToValue(system: System) {\n  return function (variable: string): string {\n    const value = system.cssVars.light[variable]\n\n    if (isCSSVar(value))\n      return varToValue(system)(value.replace(/^var\\(/, \"\").replace(/\\)$/, \"\"))\n    else return value\n  }\n}\n\nexport function tokenToValue(system: System) {\n  return function (token: ThemeToken, value: any, fallbackValue?: any) {\n    const resolvedToken = `${token}.${value}`\n\n    if (isCSSToken(system)(resolvedToken)) {\n      const variable = system.cssMap[resolvedToken]!.var\n\n      return varToValue(system)(variable)\n    } else {\n      return fallbackValue || value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}

package/dist/esm/core/index.js

@@ -3,7 +3,7 @@ import { COLOR_MODE_STORAGE_KEY, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCA
 import { EnvironmentProvider, defaultEnvironment, useEnvironment } from "./system/environment-provider.js";
 import { createStorageManager } from "./system/storage-manager.js";
 import { createLayers, defaultLayers } from "./system/layer.js";
-import { createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr } from "./system/var.js";
+import { createVarRules, createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr } from "./system/var.js";
 import { createSystem, defaultSystem } from "./system/create-system.js";
 import { SystemProvider, useSystem } from "./system/system-provider.js";
 import { GlobalStyles, ThemeProvider, getPreventTransition, useTheme } from "./system/theme-provider.js";
@@ -31,4 +31,4 @@ import { chainProps, createShouldForwardProp, cssProps, extractProps, isEqualPro
 import { getSlotClassName, mergeSlotCSS, useComponentSlotStyle, useComponentStyle } from "./components/use-component-style.js";
 import { getClassName, getDisplayName } from "./components/utils.js";
 import { createComponent, createSlotComponent } from "./components/create-component.js";
-export { COLOR_MODE_STORAGE_KEY, ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCALE, DEFAULT_VAR_PREFIX, EnvironmentProvider, GlobalStyles, SystemProvider, THEME_SCHEME_STORAGE_KEY, ThemeProvider, ThemeSchemeScript, animation, animationProperties, aspectRatioProperties, atRuleStyles, attributeProperties, attributeSelectors, attributes, blurProperties, borderProperties, chainProps, colorMix, colorProperties, conditionProperties, conditionSelectors, conditions, createBreakpoints, createComponent, createLayers, createShouldForwardProp, createSlotComponent, createStorageManager, createStyled, createSystem, createVars, css, cssProps, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, display, durationProperties, easingProperties, extractProps, focusRingStyle, fontProperties, getCSS, getCSSFunction, getClassName, getColorModeValue, getColorSchemeVar, getCondition, getDisplayName, getPreventTransition, getSlotClassName, getStorageScript, getStyle, getVar, getVarName, gradient, gradientProperties, groupAttributeProperties, groupAttributeSelectors, groupAttributes, injectKeyframes, injectVars, isCSSFunction, isCSSToken, isCSSVar, isColorScheme, isEqualProps, keyframeProperties, keyframes, mergeCSS, mergeProps, mergeSlotCSS, mergeVars, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styled, styledStyles, styles, tokenToValue, tokenToVar, transformConditionalValue, transformInterpolation, transforms, useCSS, useColorMode, useColorModeValue, useColorSchemeContext, useComponentSlotStyle, useComponentStyle, useEnvironment, useExtractProps, useInjectVarsIntoCss, useInjectVarsIntoProps, useSplitProps, useSystem, useSystemColorMode, useTheme, varAttr, varToValue, variableLengthProperties, vendorProperties, zIndexProperties };
+export { COLOR_MODE_STORAGE_KEY, ColorModeContext, ColorModeProvider, ColorModeScript, ColorSchemeContext, DEFAULT_DIRECTION, DEFAULT_LAYERS, DEFAULT_LOCALE, DEFAULT_VAR_PREFIX, EnvironmentProvider, GlobalStyles, SystemProvider, THEME_SCHEME_STORAGE_KEY, ThemeProvider, ThemeSchemeScript, animation, animationProperties, aspectRatioProperties, atRuleStyles, attributeProperties, attributeSelectors, attributes, blurProperties, borderProperties, chainProps, colorMix, colorProperties, conditionProperties, conditionSelectors, conditions, createBreakpoints, createComponent, createLayers, createShouldForwardProp, createSlotComponent, createStorageManager, createStyled, createSystem, createVarRules, createVars, css, cssProps, defaultEnvironment, defaultLayers, defaultSystem, defineComponentSlotStyle, defineComponentStyle, defineConfig, defineSemanticTokens, defineStyles, defineTheme, defineThemeSchemes, defineTokens, display, durationProperties, easingProperties, extractProps, focusRingStyle, fontProperties, getCSS, getCSSFunction, getClassName, getColorModeValue, getColorSchemeVar, getCondition, getDisplayName, getPreventTransition, getSlotClassName, getStorageScript, getStyle, getVar, getVarName, gradient, gradientProperties, groupAttributeProperties, groupAttributeSelectors, groupAttributes, injectKeyframes, injectVars, isCSSFunction, isCSSToken, isCSSVar, isColorScheme, isEqualProps, keyframeProperties, keyframes, mergeCSS, mergeProps, mergeSlotCSS, mergeVars, peerAttributeProperties, peerAttributeSelectors, peerAttributes, pseudoClassProperties, pseudoClassSelectors, pseudoClasses, pseudoElementProperties, pseudoElementSelectors, pseudoElements, pseudoStyles, radiusProperties, shadowProperties, shorthandStyles, sizeProperties, spaceProperties, standardStyles, styleProperties, styled, styledStyles, styles, tokenToValue, tokenToVar, transformConditionalValue, transformInterpolation, transforms, useCSS, useColorMode, useColorModeValue, useColorSchemeContext, useComponentSlotStyle, useComponentStyle, useEnvironment, useExtractProps, useInjectVarsIntoCss, useInjectVarsIntoProps, useSplitProps, useSystem, useSystemColorMode, useTheme, varAttr, varToValue, variableLengthProperties, vendorProperties, zIndexProperties };