@yamada-ui/react 2.1.0 → 2.1.1-dev-20260303115730

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

@@ -1 +1 @@
-{"version":3,"file":"var.cjs","names":["value","DEFAULT_VAR_PREFIX","system: System","defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","computedValue: DefineThemeValue","resolvedValue: DefineThemeValue | Dict","cssMap: CSSMap","cssVars: Dict","isCSSFunction","objOrArray","result: [string, any][]","getStyle"],"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} 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      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 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 {\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  fallbackValue?: string,\n): StyleValueWithCondition<number | string> | undefined {\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 ? `{${token}.${value}, ${fallbackValue ?? 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":";;;;;;;;;;;;;AA2CA,SAAgB,uBACd,OACA,UACA;AACA,qDAAa,MAAM,CACjB,QAAO,MAAM,QAAQ,eAAe,GAAG,YAAU;EAC/C,MAAM,CAAC,OAAO,iBAAiBA,QAAM,MAAM,QAAQ;AAEnD,SAAO,SAAS,MAAM,MAAM,EAAE,eAAe,MAAM,CAAC;GACpD;KAEF,QAAO;;AAIX,SAAgB,OAAO,OAAe,UAAmB;AACvD,KAAI,CAAC,MAAM,WAAW,KAAK,CAAE,SAAQ,KAAK;AAE1C,SAAQ,MAAM,QAAQ,mBAAmB,GAAG;AAE5C,QAAO,WAAW,OAAO,MAAM,IAAI,SAAS,KAAK,OAAO,MAAM;;AAGhE,SAAgB,WAAW,QAAgB;AACzC,QAAO,SAAU,OAAe;AAG9B,SAAO,KAFQ,OAAO,OAAO,KAAK,aAAaC,oCAE5B,GAAG;;;AAI1B,SAAgB,kBAAkB,QAAgB;AAChD,QAAO,SAAU,OAAY,UAAmB;AAC9C,MAAI,iDAAU,MAAM,CAAE,QAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAaA;EAE/C,MAAM,GAAG,SAAS,MAAM,MAAM,IAAI;AAElC,SAAO,OAAO,GAAG,OAAO,eAAe,SAAS,SAAS;;;AAI7D,MAAM,cAAc,UAAkB,MAAM,WAAW,aAAa;AACpE,MAAM,eAAe,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,eAAe,UAAkB,MAAM,WAAW,cAAc;AACtE,MAAM,WAAW,UAAkB,MAAM,WAAW,UAAU;AAC9D,MAAM,WAAW,UAAkB,MAAM,WAAW,UAAU;AAC9D,MAAa,iBAAiB,0DACnB,MAAM,IAAI,MAAM,WAAW,eAAe,IAAI,CAAC,MAAM,SAAS,IAAI;AAE7E,SAAgB,WACd,SAAiBA,qCACjB,OACA,aACA;AACA,QAAO,SAAU,QAAwB;EACvC,MAAM,EAAE,UAAU,iBAAiB;EAEnC,SAAS,WAAW,OAAyB;AAC3C,WAAQ,MAAM,QAAQ,OAAO,IAAI;AACjC,WAAQ,MAAM,QAAQ,OAAO,MAAM;GAEnC,MAAM,WAAW,KAAK,CAAC,sDAAe,OAAO,IAAI,CAAC,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAG5E,UAAO;IAAE,WAFS,OAAO,SAAS;IAEd;IAAU;;AAGhC,SAAO,SACL,SAAiB,EAAE,EACnB,UAAgB,EAAE,EAClB,YACmC;GACnC,MAAMC,SAAiB;IAAE,GAAGC;IAAe;IAAQ;GACnD,MAAM,UAAU;IAAE;IAAK;IAAQ;IAAO;GAEtC,SAAS,oBACP,OACA,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,IAAI,CAAC,IAAI,MAAM,CAAC,KAAK,IAAI;AAE3D,QAAI,UAAU,aAAc,QAAO,GAAG,MAAM;AAI5C,QAAI,EAFgB,OAAO,iBAAiB,aAAa,eAEvC,QAAO,GAAG,MAAM;IAElC,MAAM,EAAE,WAAW,aAAa,WAAW,aAAa;AAExD,WAAO,CAAC,UAAU,UAAU;;GAG9B,SAAS,WAAW,OAAY;AAC9B,WAAO,uBAAuB,QAAQ,SAAO,kBAAkB;AAC7D,SAAIH,QAAM,SAAS,UAAU,IAAIA,QAAM,SAAS,eAAe,EAAE;AAC/D,UAAI,cAAcA,QAAM,CAAE,QAAO,kBAAkB,OAAO,CAACA,QAAM;AAEjE,aAAOI,2BAASJ,SAAO;OAAE,UAAU;OAAe;OAAQ,CAAC;gBAE7C,OAAOA,YAAU,aAAaA,SAG1C,QAAO,WAAWA,QAAM,CAAC;cAChBA,WAAS,UAAU,OAAOA,UAAQ,IAC3C,QAAO,OAAOA,SAAO;cACZ,eAAe;AACxB,sBACE,iBAAiB,UAAU,OAAO,gBAAgB,MAC9C,OAAO,gBAAgB,MACvB;AAEN,aAAO,SAAS,OAAO,GAAGA,QAAM,IAAI,cAAc;WAElD,QAAO,SAAS,OAAO,GAAGA,QAAM;MAGpC;;GAGJ,SAAS,kBAAkB,OAAe,WAAmB;IAE3D,MAAM,CAAC,OAAO,GAAG,QADH,MAAM,MAAM,IAAI;IAG9B,MAAM,gBAAgB,GAAG,MAAM,IAAI,KAAK,KAAK,IAAI;AAIjD,WAAO;KAAE,qDAFiB,KAAK,OAAO,UAAU;KAEpB;KAAe;;GAG7C,SAAS,mBAAmB,OAAsB;AAChD,uDAAY,MAAM,CAChB,QAAO,MAAM,KAAK,YAAUK,4BAAUL,SAAO,QAAQ,CAAC,CAAC,KAAK,IAAI;QAEhE,QAAOK,4BAAU,OAAO,QAAQ;;GAIpC,SAAS,kBAAkB,OAAe,OAAyB;AACjE,WAAO,SAAU,UAAmB;AAClC,SAAI,CAAC,SACH,QAAOC,0BAAS,OAAO,QAAQ;UAC1B;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WAAW,YAAYA,0BAAS,OAAO,QAAQ;;;;GAK5D,SAAS,mBAAmB,OAAe,OAAY;AACrD,WAAO,SAAU,UAAmB;AAClC,SAAI,CAAC,SACH,QAAOC,kCAAgBC,gBAAI,QAAQ,MAAM,CAAC,MAAM,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WACH,YACAD,kCAAgBC,gBAAI,QAAQ,MAAM,CAAC,MAAM,CAAC;;;;GAKpD,SAAS,eACP,OACA,YACA,OACA;AACA,WAAO,SAAU,UAAmB;AAClC,SAAI,CAAC,SACH,QAAOJ,2BAAS,OAAO;MAAE,GAAG;MAAS;MAAY,CAAC;UAC7C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,MAAM;AAE/D,aAAO,WACH,YACAA,2BAAS,OAAO;OAAE,GAAG;OAAS;OAAY,CAAC;;;;GAKrD,SAAS,UACP,OACA,OACA,UACA;AACA,WAAO,SAAU,UAAmB,UAAoB,EAAE,EAAE;AAC1D,SAAI,YAAY,MAAM,CAAE,SAAQ,mBAAmB,MAAM;AAEzD,wDAAY,MAAM,EAAE;MAClB,MAAM,CAAC,YAAY,aAAa;AAEhC,gBAAU,OAAO,YAAY,SAAS,CAAC,UAAU,QAAQ;AACzD,gBACE,OACA,WACA,SACD,CAAC,UAAU,CAAC,GAAG,SAASK,8BAAW,MAAM,CAAC;gBAClC,aAAa,OAAO,KAAK,CAClC,QAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAKT,aAAW;AAC9C,UAAI,QAAQ,OACV,WAAU,OAAOA,SAAO,SAAS,CAAC,UAAU,QAAQ;WAC/C;OACL,MAAM,QAAQ,SAAS,IAAI;AAE3B,WAAI,CAAC,MAAO;AAEZ,iBAAU,OAAOA,SAAO,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,MAAM,CAAC;;OAElE;UACG;MACL,MAAMU,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,SAAS,EACV,cACD,CAAC,SAAS;eACF,UAAU;OACnB,MAAM,GAAG,aAAa,oBAAoB,OAAO,cAAc;AAE/D,uBAAgB;;AAGlB,UAAI,iDAAU,cAAc,CAC1B,iBAAgB,GAAG,WAAW,eAAe;MAE/C,MAAM,kBAAkB,QAAQ,aAC7B,MAAM,SAAS,GAAG,MAAM,MAAM,GAC/B,cACD;AAED,6DAAgB,SAAS,gBAAgB;;;;AAK/C,QAAK,IAAI,CAAC,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,OAAO,EAAE;IAC/D,MAAM,EAAE,WAAW,aAAa,WAAW,MAAM;AAEjD,cAAU,OAAO,OAAO,SAAS,CAAC,SAAS;AAE3C,QAAI,QAAQ,MAAM,EAAE;KAClB,MAAM,EAAE,mBAAmB,kBAAkB,kBAC3C,OACA,UACD;AAED,YAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;MAAU;;AAGnE,WAAO,SAAS;KAAE,KAAK;KAAW,KAAK;KAAU;;AAGnD,UAAO;IAAE;IAAQ;IAAS;;;;AAOhC,SAAgB,UAAU,GAAG,KAAmB;AAC9C,QAAO,SAAU,YAA6B;EAC5C,IAAIC,SAAiB,EAAE;EACvB,IAAIC,UAAgB,EAAE;AAEtB,OAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,WAAW;AAE9C,YAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;IAAQ;AACxC,aAAU;IAAE,GAAG;IAAS,GAAG,OAAO;IAAS;;AAG7C,SAAO;GAAE;GAAQ;GAAS;;;AAI9B,SAAgB,QACd,OACA,OACA,eACsD;AACtD,wDAAgB,MAAM,kDAAW,MAAM,IAAIC,4BAAc,MAAM,CAAE,QAAO;AAExE,qDAAa,MAAM,mDAAY,MAAM,CACnC,6DAAqB,QAAQ,YAAU,QAAQd,SAAO,OAAO,cAAc,CAAC;KAE5E,QAAO,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,iBAAiB,MAAM,KAAK;;AAItE,SAAgB,WACd,YACA,SACA,eACG;AACH,KAAI,CAAC,WAAY,QAAO;CAExB,SAAS,SAAS,cAAkB;AAClC,SAAO,OAAO,YACZ,OAAO,QAAQe,aAAW,CAAC,QAAQ,SAAU,CAAC,MAAM,QAAQ;AAC1D,OAAI,gBAAgB,KAAK,CAAE,QAAO,CAAC,CAAC,MAAM,MAAM,CAAC;GAEjD,MAAM,SAAS,QAAQ;GACvB,MAAMC,SAA0B,EAAE;AAElC,OAAI,QAAQ;IACV,MAAM,EAAE,UAAUC,qBAAS,KAAK,IAAI,EAAE;AAEtC,WAAO,KAAK,CACV,KAAK,UACL,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,MAC3C,CAAC;8DACgB,MAAM,CACxB,QAAO,KAAK,CAAC,MAAM,WAAW,OAAO,QAAQ,CAAC,CAAC;OAE/C,QAAO,KAAK,CAAC,MAAM,MAAM,CAAC;AAG5B,UAAO;IACP,CACH;;AAGH,oDAAY,WAAW,CACrB,QAAO,WAAW,IAAI,SAAS;KAE/B,QAAO,SAAS,WAAW"}
+{"version":3,"file":"var.cjs","names":["value","DEFAULT_VAR_PREFIX","system: System","defaultSystem","colorMix","animation","gradient","injectKeyframes","css","conditions","computedValue: DefineThemeValue","resolvedValue: DefineThemeValue | Dict","cssMap: CSSMap","cssVars: Dict","isCSSFunction","objOrArray","result: [string, any][]","getStyle"],"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} 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      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 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 {\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<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}, ${fallbackValue ?? value}}` as Y)\n      : 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":"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"}

package/dist/esm/components/chart/area-chart.js

@@ -27,7 +27,6 @@ const AreaChart$1 = withContext(({ children, series = [], chartProps, ...rest })
 			...props,
 			...chartProps
 		}) }),
-		series,
 		...getRootProps(),
 		children
 	});

package/dist/esm/components/chart/area-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.js","names":["AreaChart","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport type { UseAreaChartProps } from \"./use-area-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\nimport { useAreaChart } from \"./use-area-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      \"barProps\" | \"components\" | \"lineProps\" | \"render\" | \"series\"\n    >,\n    UseAreaChartProps<Y>,\n    ThemeProps<AreaChartStyle> {\n  /***\n   * If provided, generate areas based on series.\n   */\n  series?: ChartAreaProps<Y>[]\n  /**\n   * Props for the area chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: AreaChartPropsContext,\n  usePropsContext: useAreaChartPropsContext,\n  withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n  \"area-chart\",\n  areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: AreaChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useAreaChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartArea,\n          fallback: series.map((props, index) => (\n            <ChartArea key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalAreaChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiB,aAAa,KAAK;AAa1D,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,aAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE/D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}
+{"version":3,"file":"area-chart.js","names":["AreaChart","OriginalAreaChart"],"sources":["../../../../src/components/chart/area-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { AreaChartStyle } from \"./area-chart.style\"\nimport type { CartesianChartProps, ChartAreaProps } from \"./cartesian-chart\"\nimport type { UseAreaChartProps } from \"./use-area-chart\"\nimport { useMemo } from \"react\"\nimport { AreaChart as OriginalAreaChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { areaChartStyle } from \"./area-chart.style\"\nimport { CartesianChart, ChartArea } from \"./cartesian-chart\"\nimport { useAreaChart } from \"./use-area-chart\"\n\nexport interface AreaChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps,\n      \"barProps\" | \"components\" | \"lineProps\" | \"render\" | \"series\"\n    >,\n    UseAreaChartProps<Y>,\n    ThemeProps<AreaChartStyle> {\n  /***\n   * If provided, generate areas based on series.\n   */\n  series?: ChartAreaProps<Y>[]\n  /**\n   * Props for the area chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: AreaChartPropsContext,\n  usePropsContext: useAreaChartPropsContext,\n  withContext,\n} = createComponent<AreaChartProps, AreaChartStyle>(\n  \"area-chart\",\n  areaChartStyle,\n)\n\nexport { AreaChartPropsContext, useAreaChartPropsContext }\n\n/**\n * `AreaChart` is a component for drawing area charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/area-chart\n */\nexport const AreaChart = withContext<\"div\", AreaChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: AreaChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useAreaChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartArea,\n          fallback: series.map((props, index) => (\n            <ChartArea key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalAreaChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: AreaChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,eACD;;;;;;AASD,MAAaA,cAAY,aACN,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACoB;CACvB,MAAM,EAAE,eAAe,iBAAiB,aAAa,KAAK;AAa1D,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,aAAsB,GAAI,SAAX,MAAoB,CACpC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,aAAkB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEvE,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/bar-chart.js

@@ -27,7 +27,6 @@ const BarChart$1 = withContext(({ children, series = [], chartProps, ...rest })
 			...props,
 			...chartProps
 		}) }),
-		series,
 		...getRootProps(),
 		children
 	});

package/dist/esm/components/chart/bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"bar-chart.js","names":["BarChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport type { UseBarChartProps } from \"./use-bar-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\nimport { useBarChart } from \"./use-bar-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps<Y>,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"components\"\n      | \"lineProps\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseBarChartProps<Y>,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n  /**\n   * Props for the bar chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: BarChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useBarChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalBarChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        series={series}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAazD,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAE9D;EACR,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}
+{"version":3,"file":"bar-chart.js","names":["BarChart","OriginalBarChart"],"sources":["../../../../src/components/chart/bar-chart.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CartesianChartProps as OriginalCartesianChartProps } from \"recharts/types/util/types\"\nimport type { GenericsComponent, ThemeProps } from \"../../core\"\nimport type { Dict } from \"../../utils\"\nimport type { BarChartStyle } from \"./bar-chart.style\"\nimport type { CartesianChartProps, ChartBarProps } from \"./cartesian-chart\"\nimport type { UseBarChartProps } from \"./use-bar-chart\"\nimport { useMemo } from \"react\"\nimport { BarChart as OriginalBarChart } from \"recharts\"\nimport { createComponent } from \"../../core\"\nimport { barChartStyle } from \"./bar-chart.style\"\nimport { CartesianChart, ChartBar } from \"./cartesian-chart\"\nimport { useBarChart } from \"./use-bar-chart\"\n\nexport interface BarChartProps<Y extends Dict = Dict>\n  extends\n    Omit<\n      CartesianChartProps,\n      | \"areaFillOpacity\"\n      | \"areaProps\"\n      | \"components\"\n      | \"lineProps\"\n      | \"render\"\n      | \"series\"\n    >,\n    UseBarChartProps<Y>,\n    ThemeProps<BarChartStyle> {\n  /***\n   * If provided, generate bars based on series.\n   */\n  series?: ChartBarProps<Y>[]\n  /**\n   * Props for the bar chart component.\n   */\n  chartProps?: Omit<OriginalCartesianChartProps, \"data\">\n}\n\nconst {\n  PropsContext: BarChartPropsContext,\n  usePropsContext: useBarChartPropsContext,\n  withContext,\n} = createComponent<BarChartProps, BarChartStyle>(\"bar-chart\", barChartStyle)\n\nexport { BarChartPropsContext, useBarChartPropsContext }\n\n/**\n * `BarChart` is a component for drawing bar charts to compare multiple sets of data.\n *\n * @see https://yamada-ui.com/docs/components/bar-chart\n */\nexport const BarChart = withContext<\"div\", BarChartProps>(\n  <Y extends Dict>({\n    children,\n    series = [],\n    chartProps,\n    ...rest\n  }: BarChartProps<Y>) => {\n    const { getChartProps, getRootProps } = useBarChart(rest)\n    const components = useMemo(\n      () => [\n        {\n          component: ChartBar,\n          fallback: series.map((props, index) => (\n            <ChartBar key={index} {...props} />\n          )),\n        },\n      ],\n      [series],\n    )\n\n    return (\n      <CartesianChart\n        components={components}\n        render={(props) => (\n          <OriginalBarChart {...getChartProps({ ...props, ...chartProps })} />\n        )}\n        {...getRootProps()}\n      >\n        {children}\n      </CartesianChart>\n    )\n  },\n)() as GenericsComponent<{\n  <Y extends Dict>(props: BarChartProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;;;AAuCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,aAAa,cAAc;;;;;;AAS7E,MAAaA,aAAW,aACL,EACf,UACA,SAAS,EAAE,EACX,YACA,GAAG,WACmB;CACtB,MAAM,EAAE,eAAe,iBAAiB,YAAY,KAAK;AAazD,QACE,oBAAC;EACC,YAde,cACX,CACJ;GACE,WAAW;GACX,UAAU,OAAO,KAAK,OAAO,UAC3B,oBAAC,YAAqB,GAAI,SAAX,MAAoB,CACnC;GACH,CACF,EACD,CAAC,OAAO,CACT;EAKG,SAAS,UACP,oBAACC,YAAiB,GAAI,cAAc;GAAE,GAAG;GAAO,GAAG;GAAY,CAAC,GAAI;EAEtE,GAAI,cAAc;EAEjB;GACc;EAGtB,EAAE"}

package/dist/esm/components/chart/cartesian-chart.js

@@ -10,7 +10,7 @@ import { createShouldForwardProp } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { cartesianChartStyle } from "./cartesian-chart.style.js";
-import { Chart, useChartComponentContext } from "./chart.js";
+import { Chart } from "./chart.js";
 import { useChartArea, useChartBar, useChartGrid, useChartLine, useChartReferenceLine, useChartXAxis, useChartYAxis } from "./use-cartesian-chart.js";
 import { cloneElement, isValidElement, useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -63,12 +63,14 @@ const CartesianChart = withProvider(({ components: componentsProp, withGrid = tr
 			...rest
 		})
 	});
-}, "root")(void 0, ({ activeDotFill, activeDotRadius, activeDotStroke, activeDotStrokeWidth, areaFillOpacity, dotFill, dotRadius, dotStroke, dotStrokeWidth, gridStroke, inactiveLineOpacity, lineColor, lineStroke, lineStrokeWidth, referenceLineColor, referenceLineStroke, referenceLineStrokeWidth, referenceLineTextColor, referenceLineTextFill, xAxisLineStroke, xAxisLineStrokeWidth, xAxisTextColor, xAxisTextFill, yAxisLineStroke, yAxisLineStrokeWidth, yAxisTextColor, yAxisTextFill, ...rest }) => ({
+}, "root")(void 0, ({ activeDotFill, activeDotRadius, activeDotStroke, activeDotStrokeWidth, areaEndFillOpacity, areaFillOpacity, areaStartFillOpacity, dotFill, dotRadius, dotStroke, dotStrokeWidth, gridStroke, inactiveLineOpacity, lineColor, lineStroke, lineStrokeWidth, referenceLineColor, referenceLineStroke, referenceLineStrokeWidth, referenceLineTextColor, referenceLineTextFill, xAxisLineStroke, xAxisLineStrokeWidth, xAxisTextColor, xAxisTextFill, yAxisLineStroke, yAxisLineStrokeWidth, yAxisTextColor, yAxisTextFill, ...rest }) => ({
 	"--active-dot-fill": varAttr(activeDotFill, "colors"),
 	"--active-dot-r": activeDotRadius,
 	"--active-dot-stroke": varAttr(activeDotStroke, "colors"),
 	"--active-dot-stroke-width": activeDotStrokeWidth,
+	"--area-end-fill-opacity": areaEndFillOpacity,
 	"--area-fill-opacity": areaFillOpacity,
+	"--area-start-fill-opacity": areaStartFillOpacity,
 	"--dot-fill": varAttr(dotFill, "colors"),
 	"--dot-r": dotRadius,
 	"--dot-stroke": varAttr(dotStroke, "colors"),
@@ -104,9 +106,9 @@ const ChartXAxis = withContext((props) => {
 	const tickProps = useSlotComponentProps({}, "xAxisTick");
 	const labelProps = useSlotComponentProps({}, "xAxisLabel");
 	const tickLineProps = useSlotComponentProps({}, "xAxisTickLine");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const tick = useMemo(() => {
 		if (!tickProp) return tickProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickProps.className, css(tickProps.css));
 		if ((0, utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
 			...props$1,
@@ -121,15 +123,13 @@ const ChartXAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickProp,
 		tickProps.className,
-		tickProps.css
+		tickProps.css,
+		css
 	]);
 	const tickLine = useMemo(() => {
 		if (!tickLineProp) return tickLineProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
 		if ((0, utils_exports.isObject)(tickLineProp)) {
 			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(tickLineProp, shouldForwardProp);
@@ -139,16 +139,14 @@ const ChartXAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickLineProp,
 		tickLineProps.className,
-		tickLineProps.css
+		tickLineProps.css,
+		css
 	]);
 	const { getRootProps, getXAxisProps } = useChartXAxis({
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -166,11 +164,10 @@ const ChartXAxis = withContext((props) => {
 				children: labelProp
 			};
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
 		tick,
 		tickLine,
@@ -196,9 +193,9 @@ const ChartYAxis = withContext((props) => {
 	const tickProps = useSlotComponentProps({}, "yAxisTick");
 	const labelProps = useSlotComponentProps({}, "yAxisLabel");
 	const tickLineProps = useSlotComponentProps({}, "yAxisTickLine");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const tick = useMemo(() => {
 		if (!tickProp) return tickProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickProps.className, css(tickProps.css));
 		if ((0, utils_exports.isFunction)(tickProp)) return (props$1) => tickProp({
 			...props$1,
@@ -213,15 +210,13 @@ const ChartYAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickProp,
 		tickProps.className,
-		tickProps.css
+		tickProps.css,
+		css
 	]);
 	const tickLine = useMemo(() => {
 		if (!tickLineProp) return tickLineProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(tickLineProps.className, css(tickLineProps.css));
 		if ((0, utils_exports.isObject)(tickLineProp)) {
 			const [omittedProps, styleProps] = (0, utils_exports.splitObject)(tickLineProp, shouldForwardProp);
@@ -231,16 +226,14 @@ const ChartYAxis = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		tickLineProp,
 		tickLineProps.className,
-		tickLineProps.css
+		tickLineProps.css,
+		css
 	]);
 	const { getRootProps, getYAxisProps } = useChartYAxis({
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -258,11 +251,10 @@ const ChartYAxis = withContext((props) => {
 				children: labelProp
 			};
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
 		tick,
 		tickLine,
@@ -291,20 +283,20 @@ const ChartGrid = withContext((props) => {
 }, "grid")();
 const ChartLine = withContext((props) => {
 	const { lineProps } = useComponentContext();
-	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, ...rest } = {
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, stroke: strokeProp, ...rest } = {
 		...lineProps,
 		...props
 	};
 	const system = useSystem();
 	const { theme } = useTheme();
-	const { varMap } = useChartComponentContext();
-	const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color;
+	const color = strokeProp ?? rest.color;
+	const stroke = JSON.stringify(color);
 	const dotProps = useSlotComponentProps({}, "dot");
 	const activeDotProps = useSlotComponentProps({}, "activeDot");
 	const labelProps = useSlotComponentProps({}, "labelList");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const dot = useMemo(() => {
 		if (!dotProp) return dotProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(dotProps.className, css(dotProps.css), css({
 			fill: color,
 			stroke: color
@@ -323,16 +315,14 @@ const ChartLine = withContext((props) => {
 		} else return { className };
 	}, [
 		dotProp,
-		system,
-		theme,
 		dotProps.className,
 		dotProps.css,
+		css,
 		color
 	]);
 	const { getLineProps, getRootProps } = useChartLine({
 		activeDot: useMemo(() => {
 			if (!activeDotProp) return activeDotProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
 				fill: color,
 				stroke: color
@@ -351,17 +341,15 @@ const ChartLine = withContext((props) => {
 			} else return { className };
 		}, [
 			activeDotProp,
-			system,
-			theme,
 			activeDotProps.className,
 			activeDotProps.css,
+			css,
 			color
 		]),
 		dataKey,
 		dot,
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -376,13 +364,12 @@ const ChartLine = withContext((props) => {
 				};
 			} else return { className };
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
-		stroke: color,
+		stroke,
 		...rest
 	});
 	return /* @__PURE__ */ jsx(styled.line, {
@@ -396,21 +383,21 @@ const ChartLine = withContext((props) => {
 }, "line")();
 const ChartArea = withContext((props) => {
 	const { areaProps } = useComponentContext();
-	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, label: labelProp = false, withGradient, ...rest } = {
+	const { activeDot: activeDotProp = true, children, dataKey, dot: dotProp = false, gradient, label: labelProp = false, stroke: strokeProp, withGradient, ...rest } = {
 		...areaProps,
 		...props
 	};
 	const id = useId();
 	const system = useSystem();
 	const { theme } = useTheme();
-	const { varMap } = useChartComponentContext();
-	const color = varMap[dataKey.toString()] ?? rest.stroke ?? rest.color;
+	const color = strokeProp ?? rest.fill ?? rest.color;
+	const stroke = JSON.stringify(color);
 	const dotProps = useSlotComponentProps({}, "dot");
 	const activeDotProps = useSlotComponentProps({}, "activeDot");
 	const labelProps = useSlotComponentProps({}, "labelList");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const dot = useMemo(() => {
 		if (!dotProp) return dotProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(dotProps.className, css(dotProps.css), css({
 			fill: color,
 			stroke: color
@@ -429,15 +416,13 @@ const ChartArea = withContext((props) => {
 		} else return { className };
 	}, [
 		dotProp,
-		system,
-		theme,
 		dotProps.className,
 		dotProps.css,
+		css,
 		color
 	]);
 	const activeDot = useMemo(() => {
 		if (!activeDotProp) return activeDotProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(activeDotProps.className, css(activeDotProps.css), css({
 			fill: color,
 			stroke: color
@@ -456,15 +441,13 @@ const ChartArea = withContext((props) => {
 		} else return { className };
 	}, [
 		activeDotProp,
-		system,
-		theme,
 		activeDotProps.className,
 		activeDotProps.css,
+		css,
 		color
 	]);
 	const label = useMemo(() => {
 		if (!labelProp) return labelProp;
-		const css = getCSS(system, theme);
 		const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 		if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 			...props$1,
@@ -479,11 +462,10 @@ const ChartArea = withContext((props) => {
 			};
 		} else return { className };
 	}, [
-		system,
-		theme,
 		labelProp,
 		labelProps.className,
-		labelProps.css
+		labelProps.css,
+		css
 	]);
 	const { getAreaProps, getRootProps } = useChartArea({
 		activeDot,
@@ -491,7 +473,7 @@ const ChartArea = withContext((props) => {
 		dot,
 		fill: color ? `url(#${id})` : "",
 		label,
-		stroke: color,
+		stroke,
 		...rest
 	});
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(styled.line, {
@@ -510,12 +492,12 @@ const ChartArea = withContext((props) => {
 		children: [/* @__PURE__ */ jsx(styled.stop, {
 			asChild: true,
 			stopColor: color,
-			stopOpacity: .8,
+			stopOpacity: gradient?.start ?? "{area-start-fill-opacity}",
 			children: /* @__PURE__ */ jsx("stop", { offset: "5%" })
 		}), /* @__PURE__ */ jsx(styled.stop, {
 			asChild: true,
 			stopColor: color,
-			stopOpacity: .1,
+			stopOpacity: gradient?.end ?? "{area-end-fill-opacity}",
 			children: /* @__PURE__ */ jsx("stop", { offset: "95%" })
 		})]
 	}) : /* @__PURE__ */ jsx("linearGradient", {
@@ -526,27 +508,27 @@ const ChartArea = withContext((props) => {
 		y2: "1",
 		children: /* @__PURE__ */ jsx(styled.stop, {
 			stopColor: color,
-			stopOpacity: .4
+			stopOpacity: rest.fillOpacity ?? "{area-fill-opacity}"
 		})
 	}) })] });
 }, "area")();
 const ChartBar = withContext((props) => {
 	const { barProps } = useComponentContext();
-	const { children, dataKey, label: labelProp = false, ...rest } = {
+	const { children, dataKey, fill: fillProp, label: labelProp = false, ...rest } = {
 		...barProps,
 		...props
 	};
 	const system = useSystem();
 	const { theme } = useTheme();
-	const { varMap } = useChartComponentContext();
-	const color = varMap[dataKey.toString()];
+	const color = fillProp ?? rest.color;
+	const fill = JSON.stringify(color);
 	const labelProps = useSlotComponentProps({}, "labelList");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const { getBarProps, getRootProps } = useChartBar({
 		dataKey,
-		fill: color,
+		fill,
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -561,13 +543,11 @@ const ChartBar = withContext((props) => {
 				};
 			} else return { className };
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
-		stroke: color,
 		...rest
 	});
 	return /* @__PURE__ */ jsx(styled.path, {
@@ -588,10 +568,10 @@ const ChartReferenceLine = withContext((props) => {
 	const system = useSystem();
 	const { theme } = useTheme();
 	const labelProps = useSlotComponentProps({}, "referenceLineLabel");
+	const css = useMemo(() => getCSS(system, theme), [system, theme]);
 	const { getReferenceLineProps, getRootProps } = useChartReferenceLine({
 		label: useMemo(() => {
 			if (!labelProp) return labelProp;
-			const css = getCSS(system, theme);
 			const className = (0, utils_exports.cx)(labelProps.className, css(labelProps.css));
 			if ((0, utils_exports.isFunction)(labelProp)) return (props$1) => labelProp({
 				...props$1,
@@ -609,11 +589,10 @@ const ChartReferenceLine = withContext((props) => {
 				children: labelProp
 			};
 		}, [
-			system,
-			theme,
 			labelProp,
 			labelProps.className,
-			labelProps.css
+			labelProps.css,
+			css
 		]),
 		...rest
 	});