@yamada-ui/react 1.7.7 → 2.0.0-dev-20250626070331

package/dist/esm/core/system/var.js

@@ -0,0 +1,236 @@
+import { utils_exports } from "../../utils/index.js";
+import { animation, injectKeyframes } from "../css/animation.js";
+import { colorMix } from "../css/color-mix.js";
+import { conditions } from "../css/conditions.js";
+import { gradient } from "../css/gradient.js";
+import { css, getStyle } from "../css/css.js";
+import { DEFAULT_VAR_PREFIX } from "../constant.js";
+import { defaultSystem } from "./create-system.js";
+
+//#region src/core/system/var.ts
+function transformInterpolation(value, callback) {
+	if ((0, utils_exports.isString)(value)) return value.replace(/\{(.*?)\}/g, (_, value$1) => {
+		const [token, fallbackValue] = value$1.split(/,(.+)/);
+		return callback(token.trim(), fallbackValue?.trim());
+	});
+	else return value;
+}
+function getVar(token, fallback) {
+	if (!token.startsWith("--")) token = `--${token}`;
+	token = token.replace(/[^-_a-zA-Z0-9]/g, "");
+	return fallback ? `var(${token}, ${fallback})` : `var(${token})`;
+}
+function getVarName(system) {
+	return function(token) {
+		const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX;
+		return `--${prefix}-${token}`;
+	};
+}
+function getColorSchemeVar(system) {
+	return function(value, fallback) {
+		if (!(0, utils_exports.isString)(value)) return value;
+		const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX;
+		const [, token] = value.split(".");
+		return getVar(`${prefix}-colorScheme-${token}`, fallback);
+	};
+}
+const isGradient = (token) => token.startsWith("gradients.");
+const isKeyframes = (token) => token.startsWith("keyframes.");
+const isAnimation = (token) => token.startsWith("animations.");
+const isSpace = (token) => token.startsWith("spaces.");
+const isColor = (token) => token.startsWith("colors.");
+const isColorScheme = (token) => (0, utils_exports.isString)(token) && token.startsWith("colorScheme.") && !token.includes("/");
+function createVars(prefix = DEFAULT_VAR_PREFIX, theme, breakpoints) {
+	return function(tokens) {
+		const { getQuery, isResponsive } = breakpoints;
+		function tokenToVar(token) {
+			token = token.replace(/\./g, "-");
+			const variable = `--${[prefix, (0, utils_exports.escape)(token, "-")].filter(Boolean).join("-")}`;
+			const reference = `var(${variable})`;
+			return {
+				reference,
+				variable
+			};
+		}
+		return function(cssMap = {}, cssVars = {}, prevTokens) {
+			const system = {
+				...defaultSystem,
+				cssMap
+			};
+			const options = {
+				css,
+				system,
+				theme
+			};
+			function getRelatedReference(token, value = "") {
+				const relatedToken = [token.split(".")[0], value].join(".");
+				if (token === relatedToken) return [, value];
+				const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken];
+				if (!targetToken) return [, value];
+				const { reference, variable } = tokenToVar(relatedToken);
+				return [variable, reference];
+			}
+			function valueToVar(value) {
+				return transformInterpolation(value, (value$1, fallbackValue) => {
+					if (value$1.includes("colors.") || value$1.includes("colorScheme.")) {
+						if (isColorScheme(value$1)) return getColorSchemeVar(system)(value$1);
+						return colorMix(value$1, {
+							fallback: fallbackValue,
+							system
+						});
+					} else {
+						const token = tokens[value$1] ?? prevTokens?.[value$1];
+						if (token) return tokenToVar(value$1).reference;
+						else if (value$1 in cssMap && cssMap[value$1]?.ref) return cssMap[value$1].ref;
+						else return fallbackValue ? `var(--${prefix}-${value$1}, ${fallbackValue})` : `var(--${prefix}-${value$1})`;
+					}
+				});
+			}
+			function createNegativeVar(token, reference) {
+				const paths = token.split(".");
+				const [start, ...rest] = paths;
+				const negativeToken = `${start}.-${rest.join(".")}`;
+				const negativeReference = utils_exports.calc.negate(reference);
+				return {
+					negativeReference,
+					negativeToken
+				};
+			}
+			function createAnimationVar(value) {
+				if ((0, utils_exports.isArray)(value)) return value.map((value$1) => animation(value$1, options)).join(",");
+				else return animation(value, options);
+			}
+			function createGradientVar(token, value) {
+				return function(semantic) {
+					if (!semantic) return gradient(value, options);
+					else {
+						const [variable, reference] = getRelatedReference(token, value);
+						return variable ? reference : gradient(value, options);
+					}
+				};
+			}
+			function createKeyframesVar(token, value) {
+				return function(semantic) {
+					if (!semantic) return injectKeyframes(css(system, theme)(value));
+					else {
+						const [variable, reference] = getRelatedReference(token, value);
+						return variable ? reference : injectKeyframes(css(system, theme)(value));
+					}
+				};
+			}
+			function createColorVar(token, properties, value) {
+				return function(semantic) {
+					if (!semantic) return colorMix(value, {
+						...options,
+						properties
+					});
+					else {
+						const [variable, reference] = getRelatedReference(token, value);
+						return variable ? reference : colorMix(value, {
+							...options,
+							properties
+						});
+					}
+				};
+			}
+			function createVar(token, value, variable) {
+				return function(semantic, queries = []) {
+					if (isAnimation(token)) value = createAnimationVar(value);
+					if ((0, utils_exports.isArray)(value)) {
+						const [lightValue, darkValue] = value;
+						createVar(token, lightValue, variable)(semantic, queries);
+						createVar(token, darkValue, variable)(semantic, [...queries, conditions._dark]);
+					} else if (isResponsive(value, true)) Object.entries(value).forEach(([key, value$1]) => {
+						if (key === "base") createVar(token, value$1, variable)(semantic, queries);
+						else {
+							const query = getQuery(key);
+							if (!query) return;
+							createVar(token, value$1, variable)(semantic, [...queries, query]);
+						}
+					});
+					else {
+						const computedValue = valueToVar(value);
+						let resolvedValue = computedValue;
+						if (isKeyframes(token)) resolvedValue = createKeyframesVar(token, computedValue)(semantic);
+						else if (isGradient(token)) resolvedValue = createGradientVar(token, computedValue)(semantic);
+						else if (isColor(token)) resolvedValue = createColorVar(token, [variable], computedValue)(semantic);
+						else if (semantic) {
+							const [, reference] = getRelatedReference(token, computedValue);
+							resolvedValue = reference;
+						}
+						if (!(0, utils_exports.isObject)(resolvedValue)) resolvedValue = { [variable]: resolvedValue };
+						const resolvedCssVars = queries.reduceRight((prev, key) => ({ [key]: prev }), resolvedValue);
+						cssVars = (0, utils_exports.merge)(cssVars, resolvedCssVars);
+					}
+				};
+			}
+			for (let [token, { semantic, value }] of Object.entries(tokens)) {
+				const { reference, variable } = tokenToVar(token);
+				createVar(token, value, variable)(semantic);
+				if (isSpace(token)) {
+					const { negativeReference, negativeToken } = createNegativeVar(token, reference);
+					cssMap[negativeToken] = {
+						ref: negativeReference,
+						var: variable
+					};
+				}
+				cssMap[token] = {
+					ref: reference,
+					var: variable
+				};
+			}
+			return {
+				cssMap,
+				cssVars
+			};
+		};
+	};
+}
+function mergeVars(...fns) {
+	return function(prevTokens) {
+		let cssMap = {};
+		let cssVars = {};
+		for (const fn of fns) {
+			const result = fn(cssMap, cssVars, prevTokens);
+			cssMap = {
+				...cssMap,
+				...result.cssMap
+			};
+			cssVars = {
+				...cssVars,
+				...result.cssVars
+			};
+		}
+		return {
+			cssMap,
+			cssVars
+		};
+	};
+}
+function varAttr(value, token) {
+	if ((0, utils_exports.isUndefined)(value) || (0, utils_exports.isNull)(value)) return value;
+	if ((0, utils_exports.isObject)(value) || (0, utils_exports.isArray)(value)) return (0, utils_exports.replaceObject)(value, (value$1) => varAttr(value$1, token));
+	else return token ? `{${token}.${value}, ${value}}` : value;
+}
+function injectVars(objOrArray, targets, isInvalidProp) {
+	if (!objOrArray) return objOrArray;
+	function callback(objOrArray$1) {
+		return Object.fromEntries(Object.entries(objOrArray$1).flatMap(function([prop, value]) {
+			if (isInvalidProp?.(prop)) return [[prop, value]];
+			const target = targets[prop];
+			const result = [];
+			if (target) {
+				const { token } = getStyle(prop) ?? {};
+				result.push([`--${target}`, token ? `{${token}.${value}, ${value}}` : value]);
+			} else if ((0, utils_exports.isObject)(value)) result.push([prop, injectVars(value, targets)]);
+			else result.push([prop, value]);
+			return result;
+		}));
+	}
+	if ((0, utils_exports.isArray)(objOrArray)) return objOrArray.map(callback);
+	else return callback(objOrArray);
+}
+
+//#endregion
+export { createVars, getColorSchemeVar, getVar, getVarName, injectVars, isColorScheme, mergeVars, transformInterpolation, varAttr };
+//# sourceMappingURL=var.js.map

package/dist/esm/core/system/var.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"var.js","names":["value: any","callback: (value: string, fallbackValue?: string) => string","value","token: string","fallback?: string","system: System","token: any","prefix: string","theme: UsageTheme","breakpoints: Breakpoints","tokens: VariableTokens","cssMap: CSSMap","cssVars: Dict","prevTokens?: VariableTokens","value: ParsedValue","reference: string","value: VariableValue","value: DefineThemeValue","semantic: boolean","properties: string[]","variable: string","queries: string[]","computedValue: DefineThemeValue","resolvedValue: DefineThemeValue | Dict","value: StyleValueWithCondition<number | string> | undefined","token?: ThemeToken","objOrArray: Y","targets: { [key in CSSProperties]?: string }","isInvalidProp?: (prop: string) => boolean","objOrArray: Dict","objOrArray","result: [string, any][]"],"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} from \"../css\"\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 {\n    return value\n  }\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) {\n  return function (tokens: VariableTokens) {\n    const { getQuery, isResponsive } = breakpoints\n\n    function tokenToVar(token: string): Variable {\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 }\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 [, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [, 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 {\n              return fallbackValue\n                ? `var(--${prefix}-${value}, ${fallbackValue})`\n                : `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 {\n          return animation(value, options)\n        }\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))\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value))\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(\n  value: StyleValueWithCondition<number | string> | undefined,\n  token?: ThemeToken,\n): StyleValueWithCondition<number | string> | undefined {\n  if (isUndefined(value) || isNull(value)) return value\n\n  if (isObject(value) || isArray(value)) {\n    return replaceObject(value, (value) => varAttr(value, token))\n  } else {\n    return token ? `{${token}.${value}, ${value}}` : value\n  }\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          result.push([\n            `--${target}`,\n            token ? `{${token}.${value}, ${value}}` : value,\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)) {\n    return objOrArray.map(callback) as Y\n  } else {\n    return callback(objOrArray) as Y\n  }\n}\n"],"mappings":";;;;;;;;;;AA0CA,SAAgB,uBACdA,OACAC,UACA;AACA,KAAI,4BAAS,MAAM,CACjB,QAAO,MAAM,QAAQ,cAAc,CAAC,GAAGC,YAAU;EAC/C,MAAM,CAAC,OAAO,cAAc,GAAG,QAAM,MAAM,QAAQ;AAEnD,SAAO,SAAS,MAAM,MAAM,EAAE,eAAe,MAAM,CAAC;CACrD,EAAC;KAEF,QAAO;AAEV;AAED,SAAgB,OAAOC,OAAeC,UAAmB;AACvD,MAAK,MAAM,WAAW,KAAK,CAAE,UAAS,IAAI;AAE1C,SAAQ,MAAM,QAAQ,mBAAmB,GAAG;AAE5C,QAAO,YAAY,MAAM,MAAM,IAAI,SAAS,MAAM,MAAM,MAAM;AAC/D;AAED,SAAgB,WAAWC,QAAgB;AACzC,QAAO,SAAUF,OAAe;EAC9B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAa;AAE/C,UAAQ,IAAI,OAAO,GAAG;CACvB;AACF;AAED,SAAgB,kBAAkBE,QAAgB;AAChD,QAAO,SAAUL,OAAYI,UAAmB;AAC9C,OAAK,4BAAS,MAAM,CAAE,QAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAa;EAE/C,MAAM,GAAG,MAAM,GAAG,MAAM,MAAM,IAAI;AAElC,SAAO,UAAU,OAAO,eAAe,SAAS,SAAS;CAC1D;AACF;AAED,MAAM,aAAa,CAACD,UAAkB,MAAM,WAAW,aAAa;AACpE,MAAM,cAAc,CAACA,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,cAAc,CAACA,UAAkB,MAAM,WAAW,cAAc;AACtE,MAAM,UAAU,CAACA,UAAkB,MAAM,WAAW,UAAU;AAC9D,MAAM,UAAU,CAACA,UAAkB,MAAM,WAAW,UAAU;AAC9D,MAAa,gBAAgB,CAACG,UAC5B,4BAAS,MAAM,IAAI,MAAM,WAAW,eAAe,KAAK,MAAM,SAAS,IAAI;AAE7E,SAAgB,WACdC,SAAiB,oBACjBC,OACAC,aACA;AACA,QAAO,SAAUC,QAAwB;EACvC,MAAM,EAAE,UAAU,cAAc,GAAG;EAEnC,SAAS,WAAWP,OAAyB;AAC3C,WAAQ,MAAM,QAAQ,OAAO,IAAI;GAEjC,MAAM,YAAY,IAAI,CAAC,QAAQ,0BAAO,OAAO,IAAI,AAAC,EAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC5E,MAAM,aAAa,MAAM,SAAS;AAElC,UAAO;IAAE;IAAW;GAAU;EAC/B;AAED,SAAO,SACLQ,SAAiB,CAAE,GACnBC,UAAgB,CAAE,GAClBC,YACmC;GACnC,MAAMR,SAAiB;IAAE,GAAG;IAAe;GAAQ;GACnD,MAAM,UAAU;IAAE;IAAK;IAAQ;GAAO;GAEtC,SAAS,oBACPF,OACAW,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI,CAAC,IAAI,KAAM,EAAC,KAAK,IAAI;AAE3D,QAAI,UAAU,aAAc,QAAO,GAAG,KAAM;IAE5C,MAAM,cAAc,OAAO,iBAAiB,aAAa;AAEzD,SAAK,YAAa,QAAO,GAAG,KAAM;IAElC,MAAM,EAAE,WAAW,UAAU,GAAG,WAAW,aAAa;AAExD,WAAO,CAAC,UAAU,SAAU;GAC7B;GAED,SAAS,WAAWd,OAAY;AAC9B,WAAO,uBAAuB,OAAO,CAACE,SAAO,kBAAkB;AAC7D,SAAI,QAAM,SAAS,UAAU,IAAI,QAAM,SAAS,eAAe,EAAE;AAC/D,UAAI,cAAcA,QAAM,CAAE,QAAO,kBAAkB,OAAO,CAACA,QAAM;AAEjE,aAAO,SAASA,SAAO;OAAE,UAAU;OAAe;MAAQ,EAAC;KAC5D,OAAM;MACL,MAAM,QAAQ,OAAOA,YAAU,aAAaA;AAE5C,UAAI,MACF,QAAO,WAAWA,QAAM,CAAC;eAChBA,WAAS,UAAU,OAAOA,UAAQ,IAC3C,QAAO,OAAOA,SAAO;UAErB,QAAO,iBACF,QAAQ,OAAO,GAAGA,QAAM,IAAI,cAAc,MAC1C,QAAQ,OAAO,GAAGA,QAAM;KAEhC;IACF,EAAC;GACH;GAED,SAAS,kBAAkBC,OAAeY,WAAmB;IAC3D,MAAM,QAAQ,MAAM,MAAM,IAAI;IAC9B,MAAM,CAAC,OAAO,GAAG,KAAK,GAAG;IAEzB,MAAM,mBAAmB,MAAM,IAAI,KAAK,KAAK,IAAI;IAEjD,MAAM,oBAAoB,mBAAK,OAAO,UAAU;AAEhD,WAAO;KAAE;KAAmB;IAAe;GAC5C;GAED,SAAS,mBAAmBC,OAAsB;AAChD,QAAI,2BAAQ,MAAM,CAChB,QAAO,MAAM,IAAI,CAACd,YAAU,UAAUA,SAAO,QAAQ,CAAC,CAAC,KAAK,IAAI;QAEhE,QAAO,UAAU,OAAO,QAAQ;GAEnC;GAED,SAAS,kBAAkBC,OAAec,OAAyB;AACjE,WAAO,SAAUC,UAAmB;AAClC,UAAK,SACH,QAAO,SAAS,OAAO,QAAQ;UAC1B;MACL,MAAM,CAAC,UAAU,UAAU,GAAG,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WAAW,YAAY,SAAS,OAAO,QAAQ;KACvD;IACF;GACF;GAED,SAAS,mBAAmBf,OAAeH,OAAY;AACrD,WAAO,SAAUkB,UAAmB;AAClC,UAAK,SACH,QAAO,gBAAgB,IAAI,QAAQ,MAAM,CAAC,MAAM,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,UAAU,GAAG,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WACH,YACA,gBAAgB,IAAI,QAAQ,MAAM,CAAC,MAAM,CAAC;KAC/C;IACF;GACF;GAED,SAAS,eACPf,OACAgB,YACAF,OACA;AACA,WAAO,SAAUC,UAAmB;AAClC,UAAK,SACH,QAAO,SAAS,OAAO;MAAE,GAAG;MAAS;KAAY,EAAC;UAC7C;MACL,MAAM,CAAC,UAAU,UAAU,GAAG,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WACH,YACA,SAAS,OAAO;OAAE,GAAG;OAAS;MAAY,EAAC;KAChD;IACF;GACF;GAED,SAAS,UACPf,OACAa,OACAI,UACA;AACA,WAAO,SAAUF,UAAmBG,UAAoB,CAAE,GAAE;AAC1D,SAAI,YAAY,MAAM,CAAE,SAAQ,mBAAmB,MAAM;AAEzD,SAAI,2BAAQ,MAAM,EAAE;MAClB,MAAM,CAAC,YAAY,UAAU,GAAG;AAEhC,gBAAU,OAAO,YAAY,SAAS,CAAC,UAAU,QAAQ;AACzD,gBACE,OACA,WACA,SACD,CAAC,UAAU,CAAC,GAAG,SAAS,WAAW,KAAM,EAAC;KAC5C,WAAU,aAAa,OAAO,KAAK,CAClC,QAAO,QAAQ,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAKnB,QAAM,KAAK;AAC9C,UAAI,QAAQ,OACV,WAAU,OAAOA,SAAO,SAAS,CAAC,UAAU,QAAQ;WAC/C;OACL,MAAM,QAAQ,SAAS,IAAI;AAE3B,YAAK,MAAO;AAEZ,iBAAU,OAAOA,SAAO,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,KAAM,EAAC;MACjE;KACF,EAAC;UACG;MACL,MAAMoB,gBAAkC,WAAW,MAAM;MAEzD,IAAIC,gBAAyC;AAE7C,UAAI,YAAY,MAAM,CACpB,iBAAgB,mBAAmB,OAAO,cAAc,CAAC,SAAS;eACzD,WAAW,MAAM,CAC1B,iBAAgB,kBAAkB,OAAO,cAAc,CAAC,SAAS;eACxD,QAAQ,MAAM,CACvB,iBAAgB,eACd,OACA,CAAC,QAAS,GACV,cACD,CAAC,SAAS;eACF,UAAU;OACnB,MAAM,GAAG,UAAU,GAAG,oBAAoB,OAAO,cAAc;AAE/D,uBAAgB;MACjB;AAED,WAAK,4BAAS,cAAc,CAC1B,iBAAgB,GAAG,WAAW,cAAe;MAE/C,MAAM,kBAAkB,QAAQ,YAC9B,CAAC,MAAM,SAAS,GAAG,MAAM,KAAM,IAC/B,cACD;AAED,gBAAU,yBAAM,SAAS,gBAAgB;KAC1C;IACF;GACF;AAED,QAAK,IAAI,CAAC,OAAO,EAAE,UAAU,OAAO,CAAC,IAAI,OAAO,QAAQ,OAAO,EAAE;IAC/D,MAAM,EAAE,WAAW,UAAU,GAAG,WAAW,MAAM;AAEjD,cAAU,OAAO,OAAO,SAAS,CAAC,SAAS;AAE3C,QAAI,QAAQ,MAAM,EAAE;KAClB,MAAM,EAAE,mBAAmB,eAAe,GAAG,kBAC3C,OACA,UACD;AAED,YAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;KAAU;IAClE;AAED,WAAO,SAAS;KAAE,KAAK;KAAW,KAAK;IAAU;GAClD;AAED,UAAO;IAAE;IAAQ;GAAS;EAC3B;CACF;AACF;AAID,SAAgB,UAAU,GAAG,KAAmB;AAC9C,QAAO,SAAUV,YAA6B;EAC5C,IAAIF,SAAiB,CAAE;EACvB,IAAIC,UAAgB,CAAE;AAEtB,OAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,WAAW;AAE9C,YAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;GAAQ;AACxC,aAAU;IAAE,GAAG;IAAS,GAAG,OAAO;GAAS;EAC5C;AAED,SAAO;GAAE;GAAQ;EAAS;CAC3B;AACF;AAED,SAAgB,QACdY,OACAC,OACsD;AACtD,KAAI,+BAAY,MAAM,IAAI,0BAAO,MAAM,CAAE,QAAO;AAEhD,KAAI,4BAAS,MAAM,IAAI,2BAAQ,MAAM,CACnC,QAAO,iCAAc,OAAO,CAACvB,YAAU,QAAQA,SAAO,MAAM,CAAC;KAE7D,QAAO,SAAS,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK;AAEpD;AAED,SAAgB,WACdwB,YACAC,SACAC,eACG;AACH,MAAK,WAAY,QAAO;CAExB,SAAS,SAASC,cAAkB;AAClC,SAAO,OAAO,YACZ,OAAO,QAAQC,aAAW,CAAC,QAAQ,SAAU,CAAC,MAAM,MAAM,EAAE;AAC1D,OAAI,gBAAgB,KAAK,CAAE,QAAO,CAAC,CAAC,MAAM,KAAM,CAAC;GAEjD,MAAM,SAAS,QAAQ;GACvB,MAAMC,SAA0B,CAAE;AAElC,OAAI,QAAQ;IACV,MAAM,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAE;AAEtC,WAAO,KAAK,EACT,IAAI,UACL,SAAS,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,KAC3C,EAAC;GACH,WAAU,4BAAS,MAAM,CACxB,QAAO,KAAK,CAAC,MAAM,WAAW,OAAO,QAAQ,AAAC,EAAC;OAE/C,QAAO,KAAK,CAAC,MAAM,KAAM,EAAC;AAG5B,UAAO;EACR,EAAC,CACH;CACF;AAED,KAAI,2BAAQ,WAAW,CACrB,QAAO,WAAW,IAAI,SAAS;KAE/B,QAAO,SAAS,WAAW;AAE9B"}

package/dist/esm/hooks/use-animation/index.js

@@ -0,0 +1,91 @@
+"use client";
+
+
+import { utils_exports } from "../../utils/index.js";
+import { animation } from "../../core/css/animation.js";
+import { css } from "../../core/css/css.js";
+import { useSystem } from "../../core/system/system-provider.js";
+import { useBoolean } from "../use-boolean/index.js";
+import { useEventListener } from "../use-event-listener/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-animation/index.ts
+/**
+* `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.
+*
+* @see https://yamada-ui.com/hooks/use-animation
+*/
+const useAnimation = (cssObj) => {
+	const system = useSystem();
+	if ((0, utils_exports.isArray)(cssObj)) return cssObj.map((cssObj$1) => animation(cssObj$1, {
+		css,
+		system
+	})).join(", ");
+	else return animation(cssObj, {
+		css,
+		system
+	});
+};
+/**
+* `useDynamicAnimation` is a custom hook used to switch animations.
+*
+* @see https://yamada-ui.com/hooks/use-dynamic-animation
+*/
+const useDynamicAnimation = (arrayOrObj, init) => {
+	const system = useSystem();
+	const keys = useRef(!(0, utils_exports.isUndefined)(init) ? (0, utils_exports.isArray)(init) ? init.map(String) : String(init) : void 0);
+	const cache = useRef(/* @__PURE__ */ new Map());
+	const [animations, setAnimations] = useState(() => {
+		for (const [key, styles] of Object.entries(arrayOrObj)) {
+			if (cache.current.has(key)) return;
+			if ((0, utils_exports.isArray)(styles)) cache.current.set(key, styles.map((style) => animation(style, {
+				css,
+				system
+			})).join(", "));
+			else cache.current.set(key, animation(styles, {
+				css,
+				system
+			}));
+		}
+		if ((0, utils_exports.isArray)(keys.current)) return keys.current.map((key) => cache.current.get(key)).join(", ");
+		else return cache.current.get(keys.current ?? "");
+	});
+	const setAnimation = useCallback((keysOrFunc) => {
+		const args = (() => {
+			if (!(0, utils_exports.isUndefined)(keys.current) && (0, utils_exports.isArray)(arrayOrObj)) return (0, utils_exports.isArray)(keys.current) ? keys.current.map(Number) : Number(keys.current);
+			else return keys.current;
+		})();
+		const keyOrArray = (0, utils_exports.runIfFn)(keysOrFunc, args);
+		keys.current = (0, utils_exports.isArray)(keyOrArray) ? keyOrArray.map(String) : String(keyOrArray);
+		if ((0, utils_exports.isArray)(keys.current)) setAnimations(keys.current.map((key) => cache.current.get(key)).join(", "));
+		else setAnimations(cache.current.get(keys.current));
+	}, [arrayOrObj]);
+	return [animations, setAnimation];
+};
+const useAnimationObserver = ({ ref, open }) => {
+	const [mounted, setMounted] = useState(open);
+	const [flg, { on }] = useBoolean();
+	useEffect(() => {
+		if (flg) return;
+		setMounted(open);
+		on();
+	}, [
+		open,
+		flg,
+		on
+	]);
+	useEventListener(() => ref.current, "animationend", () => setMounted(open));
+	const hidden = open ? false : !mounted;
+	return {
+		present: !hidden,
+		onAnimationComplete() {
+			const ownerWindow = (0, utils_exports.getWindow)(ref.current);
+			const ev = new ownerWindow.CustomEvent("animationend", { bubbles: true });
+			ref.current?.dispatchEvent(ev);
+		}
+	};
+};
+
+//#endregion
+export { useAnimation, useAnimationObserver, useDynamicAnimation };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-animation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["cssObj: CSSObject","cssObj","arrayOrObj: T","init?: (keyof T)[] | keyof T","keysOrFunc:\n        | ((key: (keyof T)[] | keyof T | undefined) => (keyof T)[] | keyof T)\n        | (keyof T)[]\n        | keyof T"],"sources":["../../../../src/hooks/use-animation/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { CSSAnimationObject, Token } from \"../../core\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { animation, css, useSystem } from \"../../core\"\nimport { getWindow, isArray, isUndefined, runIfFn } from \"../../utils\"\nimport { useBoolean } from \"../use-boolean\"\nimport { useEventListener } from \"../use-event-listener\"\n\ntype CSSObject =\n  | Token<CSSAnimationObject, \"animations\">\n  | Token<CSSAnimationObject, \"animations\">[]\n\n/**\n * `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.\n *\n * @see https://yamada-ui.com/hooks/use-animation\n */\nexport const useAnimation = (cssObj: CSSObject): string => {\n  const system = useSystem()\n\n  if (isArray(cssObj)) {\n    return cssObj.map((cssObj) => animation(cssObj, { css, system })).join(\", \")\n  } else {\n    return animation(cssObj, { css, system })\n  }\n}\n\n/**\n * `useDynamicAnimation` is a custom hook used to switch animations.\n *\n * @see https://yamada-ui.com/hooks/use-dynamic-animation\n */\nexport const useDynamicAnimation = <\n  T extends\n    | Token<CSSAnimationObject, \"animations\">[]\n    | { [key: string]: CSSObject },\n>(\n  arrayOrObj: T,\n  init?: (keyof T)[] | keyof T,\n): [\n  string | undefined,\n  (\n    key:\n      | ((key: (keyof T)[] | keyof T | undefined) => (keyof T)[] | keyof T)\n      | (keyof T)[]\n      | keyof T,\n  ) => void,\n] => {\n  const system = useSystem()\n\n  const keys = useRef<string | string[] | undefined>(\n    !isUndefined(init)\n      ? isArray(init)\n        ? init.map(String)\n        : String(init)\n      : undefined,\n  )\n  const cache = useRef<Map<string, string>>(new Map<string, string>())\n\n  const [animations, setAnimations] = useState<string | undefined>(() => {\n    for (const [key, styles] of Object.entries(arrayOrObj)) {\n      if (cache.current.has(key)) return\n\n      if (isArray(styles)) {\n        cache.current.set(\n          key,\n          styles.map((style) => animation(style, { css, system })).join(\", \"),\n        )\n      } else {\n        cache.current.set(key, animation(styles, { css, system }))\n      }\n    }\n\n    if (isArray(keys.current)) {\n      return keys.current.map((key) => cache.current.get(key)).join(\", \")\n    } else {\n      return cache.current.get(keys.current ?? \"\")\n    }\n  })\n\n  const setAnimation = useCallback(\n    (\n      keysOrFunc:\n        | ((key: (keyof T)[] | keyof T | undefined) => (keyof T)[] | keyof T)\n        | (keyof T)[]\n        | keyof T,\n    ) => {\n      const args = (() => {\n        if (!isUndefined(keys.current) && isArray(arrayOrObj)) {\n          return isArray(keys.current)\n            ? keys.current.map(Number)\n            : Number(keys.current)\n        } else {\n          return keys.current\n        }\n      })() as (keyof T)[] | keyof T | undefined\n\n      const keyOrArray = runIfFn(keysOrFunc, args)\n\n      keys.current = isArray(keyOrArray)\n        ? keyOrArray.map(String)\n        : String(keyOrArray)\n\n      if (isArray(keys.current)) {\n        setAnimations(\n          keys.current.map((key) => cache.current.get(key)).join(\", \"),\n        )\n      } else {\n        setAnimations(cache.current.get(keys.current))\n      }\n    },\n    [arrayOrObj],\n  )\n\n  return [animations, setAnimation]\n}\n\nexport interface UseAnimationObserverProps {\n  ref: React.RefObject<HTMLElement | null>\n  open?: boolean\n}\n\nexport const useAnimationObserver = ({\n  ref,\n  open,\n}: UseAnimationObserverProps) => {\n  const [mounted, setMounted] = useState(open)\n  const [flg, { on }] = useBoolean()\n\n  useEffect(() => {\n    if (flg) return\n\n    setMounted(open)\n    on()\n  }, [open, flg, on])\n\n  useEventListener(\n    () => ref.current,\n    \"animationend\",\n    () => setMounted(open),\n  )\n\n  const hidden = open ? false : !mounted\n\n  return {\n    present: !hidden,\n    onAnimationComplete() {\n      const ownerWindow = getWindow(ref.current)\n      const ev = new ownerWindow.CustomEvent(\"animationend\", {\n        bubbles: true,\n      })\n\n      ref.current?.dispatchEvent(ev)\n    },\n  }\n}\n\nexport type ReturnUseAnimationObserver = ReturnType<typeof useAnimationObserver>\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAa,eAAe,CAACA,WAA8B;CACzD,MAAM,SAAS,WAAW;AAE1B,KAAI,2BAAQ,OAAO,CACjB,QAAO,OAAO,IAAI,CAACC,aAAW,UAAUA,UAAQ;EAAE;EAAK;CAAQ,EAAC,CAAC,CAAC,KAAK,KAAK;KAE5E,QAAO,UAAU,QAAQ;EAAE;EAAK;CAAQ,EAAC;AAE5C;;;;;;AAOD,MAAa,sBAAsB,CAKjCC,YACAC,SASG;CACH,MAAM,SAAS,WAAW;CAE1B,MAAM,OAAO,QACV,+BAAY,KAAK,GACd,2BAAQ,KAAK,GACX,KAAK,IAAI,OAAO,GAChB,OAAO,KAAK,UAEnB;CACD,MAAM,QAAQ,uBAA4B,IAAI,MAAsB;CAEpE,MAAM,CAAC,YAAY,cAAc,GAAG,SAA6B,MAAM;AACrE,OAAK,MAAM,CAAC,KAAK,OAAO,IAAI,OAAO,QAAQ,WAAW,EAAE;AACtD,OAAI,MAAM,QAAQ,IAAI,IAAI,CAAE;AAE5B,OAAI,2BAAQ,OAAO,CACjB,OAAM,QAAQ,IACZ,KACA,OAAO,IAAI,CAAC,UAAU,UAAU,OAAO;IAAE;IAAK;GAAQ,EAAC,CAAC,CAAC,KAAK,KAAK,CACpE;OAED,OAAM,QAAQ,IAAI,KAAK,UAAU,QAAQ;IAAE;IAAK;GAAQ,EAAC,CAAC;EAE7D;AAED,MAAI,2BAAQ,KAAK,QAAQ,CACvB,QAAO,KAAK,QAAQ,IAAI,CAAC,QAAQ,MAAM,QAAQ,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK;MAEnE,QAAO,MAAM,QAAQ,IAAI,KAAK,WAAW,GAAG;CAE/C,EAAC;CAEF,MAAM,eAAe,YACnB,CACEC,eAIG;EACH,MAAM,OAAO,CAAC,MAAM;AAClB,QAAK,+BAAY,KAAK,QAAQ,IAAI,2BAAQ,WAAW,CACnD,QAAO,2BAAQ,KAAK,QAAQ,GACxB,KAAK,QAAQ,IAAI,OAAO,GACxB,OAAO,KAAK,QAAQ;OAExB,QAAO,KAAK;EAEf,IAAG;EAEJ,MAAM,aAAa,2BAAQ,YAAY,KAAK;AAE5C,OAAK,UAAU,2BAAQ,WAAW,GAC9B,WAAW,IAAI,OAAO,GACtB,OAAO,WAAW;AAEtB,MAAI,2BAAQ,KAAK,QAAQ,CACvB,eACE,KAAK,QAAQ,IAAI,CAAC,QAAQ,MAAM,QAAQ,IAAI,IAAI,CAAC,CAAC,KAAK,KAAK,CAC7D;MAED,eAAc,MAAM,QAAQ,IAAI,KAAK,QAAQ,CAAC;CAEjD,GACD,CAAC,UAAW,EACb;AAED,QAAO,CAAC,YAAY,YAAa;AAClC;AAOD,MAAa,uBAAuB,CAAC,EACnC,KACA,MAC0B,KAAK;CAC/B,MAAM,CAAC,SAAS,WAAW,GAAG,SAAS,KAAK;CAC5C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,YAAY;AAElC,WAAU,MAAM;AACd,MAAI,IAAK;AAET,aAAW,KAAK;AAChB,MAAI;CACL,GAAE;EAAC;EAAM;EAAK;CAAG,EAAC;AAEnB,kBACE,MAAM,IAAI,SACV,gBACA,MAAM,WAAW,KAAK,CACvB;CAED,MAAM,SAAS,OAAO,SAAS;AAE/B,QAAO;EACL,UAAU;EACV,sBAAsB;GACpB,MAAM,cAAc,6BAAU,IAAI,QAAQ;GAC1C,MAAM,KAAK,IAAI,YAAY,YAAY,gBAAgB,EACrD,SAAS,KACV;AAED,OAAI,SAAS,cAAc,GAAG;EAC/B;CACF;AACF"}

package/dist/esm/hooks/use-async/index.js

@@ -0,0 +1,62 @@
+"use client";
+
+
+import { useMounted } from "../use-mounted/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/use-async/index.ts
+/**
+* `useAsync` is a custom hook that executes an asynchronous function and tracks its state.
+*
+* @see https://yamada-ui.com/hooks/use-async
+*/
+function useAsync(func, deps = []) {
+	const [state, callback] = useAsyncFunc(func, deps, { loading: true });
+	useEffect(() => {
+		callback();
+	}, [callback]);
+	return state;
+}
+function useAsyncFunc(func, deps = [], initialState = { loading: false }) {
+	const lastCallId = useRef(0);
+	const [mounted] = useMounted();
+	const [state, setState] = useState(initialState);
+	const callback = useCallback((...args) => {
+		const callId = ++lastCallId.current;
+		if (!state.loading) setState((prevState) => ({
+			...prevState,
+			loading: true
+		}));
+		return func(...args).then((value) => {
+			if (mounted() && callId === lastCallId.current) setState({
+				loading: false,
+				value
+			});
+			return value;
+		}, (error) => {
+			if (mounted() && callId === lastCallId.current) setState({
+				error,
+				loading: false
+			});
+			return error;
+		});
+	}, deps);
+	return [state, callback];
+}
+function useAsyncRetry(func, deps = []) {
+	const [attempt, setAttempt] = useState(0);
+	const state = useAsync(func, [...deps, attempt]);
+	const stateLoading = state.loading;
+	const retry = useCallback(() => {
+		if (stateLoading) return;
+		setAttempt((currentAttempt) => currentAttempt + 1);
+	}, [...deps, stateLoading]);
+	return {
+		...state,
+		retry
+	};
+}
+
+//#endregion
+export { useAsync, useAsyncFunc, useAsyncRetry };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-async/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["func: T","deps: DependencyList","initialState: StateFromFunctionReturningPromise<T>","func: () => Promise<T>"],"sources":["../../../../src/hooks/use-async/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { DependencyList } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useState } from \"react\"\nimport { useMounted } from \"../use-mounted\"\n\nexport type FunctionReturningPromise = (...args: any[]) => Promise<any>\n\n/**\n * `useAsync` is a custom hook that executes an asynchronous function and tracks its state.\n *\n * @see https://yamada-ui.com/hooks/use-async\n */\nexport function useAsync<T extends FunctionReturningPromise>(\n  func: T,\n  deps: DependencyList = [],\n) {\n  const [state, callback] = useAsyncFunc(func, deps, { loading: true })\n\n  useEffect(() => {\n    callback()\n  }, [callback])\n\n  return state\n}\n\nexport type AsyncState<T> =\n  | {\n      error: Error\n      loading: false\n      value?: undefined\n    }\n  | {\n      loading: boolean\n      error?: undefined\n      value?: undefined\n    }\n  | {\n      loading: false\n      value: T\n      error?: undefined\n    }\n  | {\n      loading: true\n      error?: Error | undefined\n      value?: T\n    }\n\nexport type PromiseType<P extends Promise<any>> =\n  P extends Promise<infer T> ? T : never\n\ntype StateFromFunctionReturningPromise<T extends FunctionReturningPromise> =\n  AsyncState<PromiseType<ReturnType<T>>>\n\nexport type AsyncFnReturn<\n  T extends FunctionReturningPromise = FunctionReturningPromise,\n> = [StateFromFunctionReturningPromise<T>, T]\n\nexport function useAsyncFunc<T extends FunctionReturningPromise>(\n  func: T,\n  deps: DependencyList = [],\n  initialState: StateFromFunctionReturningPromise<T> = { loading: false },\n): AsyncFnReturn<T> {\n  const lastCallId = useRef(0)\n  const [mounted] = useMounted()\n  const [state, setState] =\n    useState<StateFromFunctionReturningPromise<T>>(initialState)\n\n  const callback = useCallback(\n    (...args: Parameters<T>): ReturnType<T> => {\n      const callId = ++lastCallId.current\n\n      if (!state.loading)\n        setState((prevState) => ({ ...prevState, loading: true }))\n\n      return func(...args).then(\n        (value) => {\n          if (mounted() && callId === lastCallId.current)\n            setState({ loading: false, value })\n\n          return value\n        },\n        (error) => {\n          if (mounted() && callId === lastCallId.current)\n            setState({ error, loading: false })\n\n          return error\n        },\n      ) as ReturnType<T>\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    deps,\n  )\n\n  return [state, callback as unknown as T]\n}\n\nexport type AsyncStateRetry<T> = AsyncState<T> & {\n  retry(): void\n}\n\nexport function useAsyncRetry<T>(\n  func: () => Promise<T>,\n  deps: DependencyList = [],\n) {\n  const [attempt, setAttempt] = useState<number>(0)\n  const state = useAsync(func, [...deps, attempt])\n\n  const stateLoading = state.loading\n\n  const retry = useCallback(() => {\n    if (stateLoading) return\n\n    setAttempt((currentAttempt) => currentAttempt + 1)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [...deps, stateLoading])\n\n  return { ...state, retry }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,SACdA,MACAC,OAAuB,CAAE,GACzB;CACA,MAAM,CAAC,OAAO,SAAS,GAAG,aAAa,MAAM,MAAM,EAAE,SAAS,KAAM,EAAC;AAErE,WAAU,MAAM;AACd,YAAU;CACX,GAAE,CAAC,QAAS,EAAC;AAEd,QAAO;AACR;AAkCD,SAAgB,aACdD,MACAC,OAAuB,CAAE,GACzBC,eAAqD,EAAE,SAAS,MAAO,GACrD;CAClB,MAAM,aAAa,OAAO,EAAE;CAC5B,MAAM,CAAC,QAAQ,GAAG,YAAY;CAC9B,MAAM,CAAC,OAAO,SAAS,GACrB,SAA+C,aAAa;CAE9D,MAAM,WAAW,YACf,CAAC,GAAG,SAAuC;EACzC,MAAM,SAAS,EAAE,WAAW;AAE5B,OAAK,MAAM,QACT,UAAS,CAAC,eAAe;GAAE,GAAG;GAAW,SAAS;EAAM,GAAE;AAE5D,SAAO,KAAK,GAAG,KAAK,CAAC,KACnB,CAAC,UAAU;AACT,OAAI,SAAS,IAAI,WAAW,WAAW,QACrC,UAAS;IAAE,SAAS;IAAO;GAAO,EAAC;AAErC,UAAO;EACR,GACD,CAAC,UAAU;AACT,OAAI,SAAS,IAAI,WAAW,WAAW,QACrC,UAAS;IAAE;IAAO,SAAS;GAAO,EAAC;AAErC,UAAO;EACR,EACF;CACF,GAED,KACD;AAED,QAAO,CAAC,OAAO,QAAyB;AACzC;AAMD,SAAgB,cACdC,MACAF,OAAuB,CAAE,GACzB;CACA,MAAM,CAAC,SAAS,WAAW,GAAG,SAAiB,EAAE;CACjD,MAAM,QAAQ,SAAS,MAAM,CAAC,GAAG,MAAM,OAAQ,EAAC;CAEhD,MAAM,eAAe,MAAM;CAE3B,MAAM,QAAQ,YAAY,MAAM;AAC9B,MAAI,aAAc;AAElB,aAAW,CAAC,mBAAmB,iBAAiB,EAAE;CAEnD,GAAE,CAAC,GAAG,MAAM,YAAa,EAAC;AAE3B,QAAO;EAAE,GAAG;EAAO;CAAO;AAC3B"}

package/dist/esm/hooks/use-async-callback/index.js

@@ -0,0 +1,48 @@
+import { useLoading } from "../../components/loading/loading-provider.js";
+import { useProcessing } from "../use-processing/index.js";
+import { useCallback, useMemo } from "react";
+
+//#region src/hooks/use-async-callback/index.ts
+/**
+* `useAsyncCallback` is a custom hook used to manage async callbacks.
+*
+* @see https://yamada-ui.com/hooks/use-async-callback
+*/
+const useAsyncCallback = (callback, deps, { loading: method = false, loadingOptions, processing: shouldProcessing = true } = {}) => {
+	const context = useLoading();
+	const { finish, loading, start } = useProcessing();
+	const shouldLoading = !!method;
+	const asyncCallback = useCallback(async (...args) => {
+		try {
+			if (shouldProcessing) start();
+			if (shouldLoading) context[method].start(loadingOptions);
+			return await callback(...args);
+		} finally {
+			if (shouldProcessing) finish();
+			if (shouldLoading) context[method].finish();
+		}
+	}, [
+		...deps,
+		shouldProcessing,
+		shouldLoading,
+		context,
+		method,
+		loadingOptions,
+		callback,
+		start,
+		finish
+	]);
+	const control = useMemo(() => ({
+		finish,
+		start
+	}), [finish, start]);
+	return [
+		loading,
+		asyncCallback,
+		control
+	];
+};
+
+//#endregion
+export { useAsyncCallback };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-async-callback/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["callback: Y","deps: DependencyList"],"sources":["../../../../src/hooks/use-async-callback/index.ts"],"sourcesContent":["import type { DependencyList } from \"react\"\nimport type { LoadingOptions } from \"../../components/loading\"\nimport type { LoadingMethod } from \"../../components/loading/utils\"\nimport { useCallback, useMemo } from \"react\"\nimport { useLoading } from \"../../components/loading\"\nimport { useProcessing } from \"../../hooks/use-processing\"\n\ntype Callback = (...args: any[]) => any\n\nexport interface UseAsyncCallbackOptions {\n  /**\n   * The method to use for loading.\n   * If `false`, the loading will not be shown.\n   */\n  loading?: false | LoadingMethod\n  /**\n   * The options to pass to the loading component.\n   */\n  loadingOptions?: LoadingOptions\n  /**\n   * If `false`, the processing will not change.\n   *\n   * @default true\n   */\n  processing?: boolean\n}\n\n/**\n * `useAsyncCallback` is a custom hook used to manage async callbacks.\n *\n * @see https://yamada-ui.com/hooks/use-async-callback\n */\nexport const useAsyncCallback = <Y extends Callback>(\n  callback: Y,\n  deps: DependencyList,\n  {\n    loading: method = false,\n    loadingOptions,\n    processing: shouldProcessing = true,\n  }: UseAsyncCallbackOptions = {},\n): UseAsyncCallbackReturn<Y> => {\n  const context = useLoading()\n  const { finish, loading, start } = useProcessing()\n  const shouldLoading = !!method\n\n  const asyncCallback = useCallback(\n    async (...args: Parameters<Y>) => {\n      try {\n        if (shouldProcessing) start()\n        if (shouldLoading) context[method].start(loadingOptions)\n\n        return await callback(...args)\n      } finally {\n        if (shouldProcessing) finish()\n        if (shouldLoading) context[method].finish()\n      }\n    },\n    [\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      ...deps,\n      shouldProcessing,\n      shouldLoading,\n      context,\n      method,\n      loadingOptions,\n      callback,\n      start,\n      finish,\n    ],\n  )\n\n  const control = useMemo(() => ({ finish, start }), [finish, start])\n\n  return [loading, asyncCallback, control]\n}\n\nexport type UseAsyncCallbackReturn<Y extends Callback> = [\n  loading: boolean,\n  callback: (...args: Parameters<Y>) => Promise<Awaited<ReturnType<Y>>>,\n  control: { finish: () => void; start: () => void },\n]\n"],"mappings":";;;;;;;;;;AAgCA,MAAa,mBAAmB,CAC9BA,UACAC,MACA,EACE,SAAS,SAAS,OAClB,gBACA,YAAY,mBAAmB,MACP,GAAG,CAAE,MACD;CAC9B,MAAM,UAAU,YAAY;CAC5B,MAAM,EAAE,QAAQ,SAAS,OAAO,GAAG,eAAe;CAClD,MAAM,kBAAkB;CAExB,MAAM,gBAAgB,YACpB,OAAO,GAAG,SAAwB;AAChC,MAAI;AACF,OAAI,iBAAkB,QAAO;AAC7B,OAAI,cAAe,SAAQ,QAAQ,MAAM,eAAe;AAExD,UAAO,MAAM,SAAS,GAAG,KAAK;EAC/B,UAAS;AACR,OAAI,iBAAkB,SAAQ;AAC9B,OAAI,cAAe,SAAQ,QAAQ,QAAQ;EAC5C;CACF,GACD;EAEE,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAM,UAAU,QAAQ,OAAO;EAAE;EAAQ;CAAO,IAAG,CAAC,QAAQ,KAAM,EAAC;AAEnE,QAAO;EAAC;EAAS;EAAe;CAAQ;AACzC"}

package/dist/esm/hooks/use-boolean/index.js

@@ -0,0 +1,26 @@
+"use client";
+
+
+import { useCallback, useState } from "react";
+
+//#region src/hooks/use-boolean/index.ts
+/**
+* `useBoolean` is a custom hook used to manage boolean values using `on`, `off`, and `toggle` functions.
+*
+* @see https://yamada-ui.com/hooks/use-boolean
+*/
+const useBoolean = (init = false) => {
+	const [flg, setFlg] = useState(init);
+	const on = useCallback(() => setFlg(true), []);
+	const off = useCallback(() => setFlg(false), []);
+	const toggle = useCallback(() => setFlg((prev) => !prev), []);
+	return [flg, {
+		off,
+		toggle,
+		on
+	}];
+};
+
+//#endregion
+export { useBoolean };
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/use-boolean/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-boolean/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useState } from \"react\"\n\n/**\n * `useBoolean` is a custom hook used to manage boolean values using `on`, `off`, and `toggle` functions.\n *\n * @see https://yamada-ui.com/hooks/use-boolean\n */\nexport const useBoolean = (init = false): UseBooleanReturn => {\n  const [flg, setFlg] = useState<boolean>(init)\n\n  const on = useCallback(() => setFlg(true), [])\n\n  const off = useCallback(() => setFlg(false), [])\n\n  const toggle = useCallback(() => setFlg((prev) => !prev), [])\n\n  return [flg, { off, toggle, on }]\n}\n\nexport type UseBooleanReturn = [\n  flg: boolean,\n  setFlg: { off: () => void; toggle: () => void; on: () => void },\n]\n"],"mappings":";;;;;;;;;;;AASA,MAAa,aAAa,CAAC,OAAO,UAA4B;CAC5D,MAAM,CAAC,KAAK,OAAO,GAAG,SAAkB,KAAK;CAE7C,MAAM,KAAK,YAAY,MAAM,OAAO,KAAK,EAAE,CAAE,EAAC;CAE9C,MAAM,MAAM,YAAY,MAAM,OAAO,MAAM,EAAE,CAAE,EAAC;CAEhD,MAAM,SAAS,YAAY,MAAM,OAAO,CAAC,UAAU,KAAK,EAAE,CAAE,EAAC;AAE7D,QAAO,CAAC,KAAK;EAAE;EAAK;EAAQ;CAAI,CAAC;AAClC"}

package/dist/esm/hooks/use-breakpoint/index.js

@@ -0,0 +1,7 @@
+import { useBreakpoint } from "./use-breakpoint.js";
+import { useBreakpointEffect } from "./use-breakpoint-effect.js";
+import { getBreakpointValue, useBreakpointValue } from "./use-breakpoint-value.js";
+import { useBreakpointState } from "./use-breakpoint-state.js";
+import { useUpdateBreakpointEffect } from "./use-update-breakpoint-effect.js";
+
+export { getBreakpointValue, useBreakpoint, useBreakpointEffect, useBreakpointState, useBreakpointValue, useUpdateBreakpointEffect };

package/dist/esm/hooks/use-breakpoint/use-breakpoint-effect.js

@@ -0,0 +1,22 @@
+"use client";
+
+
+import { useBreakpoint } from "./use-breakpoint.js";
+import { useEffect } from "react";
+
+//#region src/hooks/use-breakpoint/use-breakpoint-effect.ts
+/**
+* `useBreakpointEffect` is a custom hook that executes a specific callback function when the breakpoint changes.
+*
+* @see https://yamada-ui.com/hooks/use-breakpoint-effect
+*/
+const useBreakpointEffect = (callback, deps) => {
+	const breakpoint = useBreakpoint();
+	useEffect(() => {
+		callback(breakpoint);
+	}, [breakpoint, ...deps]);
+};
+
+//#endregion
+export { useBreakpointEffect };
+//# sourceMappingURL=use-breakpoint-effect.js.map

package/dist/esm/hooks/use-breakpoint/use-breakpoint-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint-effect.js","names":["callback: (breakpoint: Breakpoint) => void","deps: DependencyList"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint-effect.ts"],"sourcesContent":["\"use client\"\n\nimport type { DependencyList } from \"react\"\nimport type { Breakpoint } from \"../../core\"\nimport { useEffect } from \"react\"\nimport { useBreakpoint } from \"./use-breakpoint\"\n\n/**\n * `useBreakpointEffect` is a custom hook that executes a specific callback function when the breakpoint changes.\n *\n * @see https://yamada-ui.com/hooks/use-breakpoint-effect\n */\nexport const useBreakpointEffect = (\n  callback: (breakpoint: Breakpoint) => void,\n  deps: DependencyList,\n) => {\n  const breakpoint = useBreakpoint()\n\n  useEffect(() => {\n    callback(breakpoint)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [breakpoint, ...deps])\n}\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,sBAAsB,CACjCA,UACAC,SACG;CACH,MAAM,aAAa,eAAe;AAElC,WAAU,MAAM;AACd,WAAS,WAAW;CAErB,GAAE,CAAC,YAAY,GAAG,IAAK,EAAC;AAC1B"}

package/dist/esm/hooks/use-breakpoint/use-breakpoint-state.js

@@ -0,0 +1,20 @@
+"use client";
+
+
+import { useBreakpointValue } from "./use-breakpoint-value.js";
+import { useState } from "react";
+
+//#region src/hooks/use-breakpoint/use-breakpoint-state.ts
+/**
+* `useBreakpointState` is a custom hook that takes a responsive object as an initial state and returns a state corresponding to the current breakpoint.
+*
+* @see https://yamada-ui.com/hooks/use-breakpoint-state
+*/
+const useBreakpointState = (initialState) => {
+	const state = useBreakpointValue(initialState);
+	return useState(state);
+};
+
+//#endregion
+export { useBreakpointState };
+//# sourceMappingURL=use-breakpoint-state.js.map

package/dist/esm/hooks/use-breakpoint/use-breakpoint-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint-state.js","names":["initialState: ResponsiveObject<Y, false>"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint-state.ts"],"sourcesContent":["\"use client\"\n\nimport type { ResponsiveObject } from \"../../core\"\nimport { useState } from \"react\"\nimport { useBreakpointValue } from \"./use-breakpoint-value\"\n\n/**\n * `useBreakpointState` is a custom hook that takes a responsive object as an initial state and returns a state corresponding to the current breakpoint.\n *\n * @see https://yamada-ui.com/hooks/use-breakpoint-state\n */\nexport const useBreakpointState = <Y>(\n  initialState: ResponsiveObject<Y, false>,\n) => {\n  const state = useBreakpointValue(initialState)\n\n  return useState(state)\n}\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,qBAAqB,CAChCA,iBACG;CACH,MAAM,QAAQ,mBAAmB,aAAa;AAE9C,QAAO,SAAS,MAAM;AACvB"}

package/dist/esm/hooks/use-breakpoint/use-breakpoint-value.js

@@ -0,0 +1,34 @@
+import { useSystem } from "../../core/system/system-provider.js";
+import { useBreakpoint } from "./use-breakpoint.js";
+import { useMemo } from "react";
+
+//#region src/hooks/use-breakpoint/use-breakpoint-value.ts
+/**
+* `useBreakpointValue` is a custom hook that returns the value of the current breakpoint from the provided object.
+* This hook monitors changes in the window size and returns the appropriate value.
+*
+* @see https://yamada-ui.com/hooks/use-breakpoint-value
+*/
+const useBreakpointValue = (values) => {
+	const system = useSystem();
+	const breakpoint = useBreakpoint();
+	return useMemo(() => getBreakpointValue(values)(system, breakpoint), [
+		values,
+		system,
+		breakpoint
+	]);
+};
+const getBreakpointValue = (values = {}) => (system, breakpoint) => {
+	const breakpoints = system.breakpoints.keys;
+	if (!breakpoints.length) console.warn("getBreakpointValue: `breakpoints` is undefined.");
+	const currentIndex = breakpoints.indexOf(breakpoint);
+	for (let i = currentIndex; 0 < i; i--) {
+		const nextBreakpoint = breakpoints[i];
+		if (nextBreakpoint && values.hasOwnProperty(nextBreakpoint)) return values[nextBreakpoint];
+	}
+	return values.base;
+};
+
+//#endregion
+export { getBreakpointValue, useBreakpointValue };
+//# sourceMappingURL=use-breakpoint-value.js.map

package/dist/esm/hooks/use-breakpoint/use-breakpoint-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint-value.js","names":["values: ResponsiveObject<Y, false>","system: System","breakpoint: Breakpoint"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint-value.ts"],"sourcesContent":["import type { Breakpoint, System } from \"../../core\"\nimport type { ResponsiveObject } from \"../../core\"\nimport { useMemo } from \"react\"\nimport { useSystem } from \"../../core\"\nimport { useBreakpoint } from \"./use-breakpoint\"\n\n/**\n * `useBreakpointValue` is a custom hook that returns the value of the current breakpoint from the provided object.\n * This hook monitors changes in the window size and returns the appropriate value.\n *\n * @see https://yamada-ui.com/hooks/use-breakpoint-value\n */\nexport const useBreakpointValue = <Y>(\n  values: ResponsiveObject<Y, false>,\n): Y => {\n  const system = useSystem()\n  const breakpoint = useBreakpoint()\n\n  return useMemo(\n    () => getBreakpointValue<Y>(values)(system, breakpoint),\n    [values, system, breakpoint],\n  )\n}\n\nexport const getBreakpointValue =\n  <Y>(values: ResponsiveObject<Y, false> = {}) =>\n  (system: System, breakpoint: Breakpoint): Y => {\n    const breakpoints = system.breakpoints.keys\n\n    if (!breakpoints.length) {\n      console.warn(\"getBreakpointValue: `breakpoints` is undefined.\")\n    }\n\n    const currentIndex = breakpoints.indexOf(breakpoint)\n\n    for (let i = currentIndex; 0 < i; i--) {\n      const nextBreakpoint = breakpoints[i]\n\n      if (nextBreakpoint && values.hasOwnProperty(nextBreakpoint)) {\n        return values[nextBreakpoint] as Y\n      }\n    }\n\n    return values.base as Y\n  }\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,qBAAqB,CAChCA,WACM;CACN,MAAM,SAAS,WAAW;CAC1B,MAAM,aAAa,eAAe;AAElC,QAAO,QACL,MAAM,mBAAsB,OAAO,CAAC,QAAQ,WAAW,EACvD;EAAC;EAAQ;EAAQ;CAAW,EAC7B;AACF;AAED,MAAa,qBACX,CAAIA,SAAqC,CAAE,MAC3C,CAACC,QAAgBC,eAA8B;CAC7C,MAAM,cAAc,OAAO,YAAY;AAEvC,MAAK,YAAY,OACf,SAAQ,KAAK,kDAAkD;CAGjE,MAAM,eAAe,YAAY,QAAQ,WAAW;AAEpD,MAAK,IAAI,IAAI,cAAc,IAAI,GAAG,KAAK;EACrC,MAAM,iBAAiB,YAAY;AAEnC,MAAI,kBAAkB,OAAO,eAAe,eAAe,CACzD,QAAO,OAAO;CAEjB;AAED,QAAO,OAAO;AACf"}