{"version":3,"file":"index.mjs","names":["Flexbox","VarRow","ScaleRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,eAAe,cAAc;AACrC,QACE,oBAACA;EAAQ;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;YACrD,oBAAC;GAAI,OAAO,EAAE,SAAS,mBAAmB;aACxC,qBAAC;IAAM,WAAW;IAAY,MAAM;;KAClC,qBAAC;MAAwB,MAAM;iBAC7B,oBAACA;OAAQ;OAAW,OAAO;OAAU,WAAW,OAAO;SAAmB,YAAc,EACvF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,QAAQ,CAAC,CACxC,KAAK,GAAG,CACR,KAAK,GAAG,UAAU;AACjB,WAAI,UAAU,KAAK,UAAU,GAAI,QAAO;OAExC,MAAM,iBAAiB,iBAAiB;AAExC,cACE,oBAAC;QAAI,WAAW,OAAO;kBACrB,oBAAC;SAAI,WAAW,OAAO;mBACrB,oBAACA;UACC;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;WACV;oBAEA;WACO;UACN;UAd8B,MAAM,QAetC;QAER;QA3BK,cA4BH;KACR,oBAACC,kBAAa,OAAQ;KACrB,aACC,8CACE,oBAACC;MAA0B;MAAM,OAAO,MAAM;MAAM,OAAM;QAA5C,OAAqD,EACnE,oBAACA;MAA2B;MAAM,OAAO,MAAM;MAAO,OAAM;QAA9C,QAAwD,IACrE,GAEH;MACG;MACD,oBAACA;OAA2B;OAAM,OAAO,MAAM;OAAO,OAAM;SAA9C,QAAwD;MACtE,oBAACA;OAA0B;OAAM,OAAO,MAAM;OAAM,OAAM;SAA5C,OAAqD;SAClE;;KAEC;IACJ;GACE;EAEZ;AAEF,qBAAe"}