@easy-editor/materials-dashboard-number-flip 0.0.2

package/dist/component.js

@@ -0,0 +1,176 @@
+/* @easy-editor/materials-dashboard-statistic-number v0.0.1 (component) */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorMaterialsStatisticNumberComponent = {}, global.jsxRuntime));
+})(this, (function (exports, jsxRuntime) { 'use strict';
+
+  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+  function cn(...inputs) {
+    return clsx(inputs);
+  }
+
+  function styleInject(css, ref) {
+    if (ref === void 0) ref = {};
+    var insertAt = ref.insertAt;
+    if (typeof document === 'undefined') {
+      return;
+    }
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css_248z = ".component-module__container___VbZSk{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}";
+  var styles = {"container":"component-module__container___VbZSk","content":"component-module__content___344U8","prefix":"component-module__prefix___RIPOo","prefixDigital":"component-module__prefixDigital___Q-IGu","value":"component-module__value___Fg70k","valueDigital":"component-module__valueDigital___saOYz","suffix":"component-module__suffix___9U3yv","suffixDigital":"component-module__suffixDigital___WiYn4","trend":"component-module__trend___fgbi4"};
+  styleInject(css_248z);
+
+  /**
+   * Number Flip Component
+   * 数字翻牌组件 - 用于展示 KPI、统计数字等
+   */
+
+  const formatNumber = (value, decimals, separator) => {
+    const fixed = value.toFixed(decimals);
+    if (!separator) {
+      return fixed;
+    }
+    const [intPart, decPart] = fixed.split('.');
+    const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decPart ? `${formattedInt}.${decPart}` : formattedInt;
+  };
+  const TrendIndicator = ({
+    type,
+    value,
+    suffix,
+    upColor,
+    downColor,
+    size
+  }) => {
+    let color = '#8899aa';
+    if (type === 'up') {
+      color = upColor;
+    } else if (type === 'down') {
+      color = downColor;
+    }
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: styles.trend,
+      style: {
+        fontSize: size * 0.35
+      },
+      children: [type !== 'flat' && /*#__PURE__*/jsxRuntime.jsxs("svg", {
+        "aria-label": `Trend ${type}`,
+        fill: "none",
+        height: size * 0.3,
+        role: "img",
+        style: {
+          transform: type === 'down' ? 'rotate(180deg)' : undefined
+        },
+        viewBox: "0 0 24 24",
+        width: size * 0.3,
+        children: [/*#__PURE__*/jsxRuntime.jsxs("title", {
+          children: ["Trend arrow ", type]
+        }), /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M12 4L20 14H4L12 4Z",
+          fill: color
+        })]
+      }), type === 'flat' && /*#__PURE__*/jsxRuntime.jsx("span", {
+        style: {
+          color,
+          marginRight: 4
+        },
+        children: "\u2014"
+      }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+        style: {
+          color
+        },
+        children: [value, suffix]
+      })]
+    });
+  };
+  const NumberFlip = ({
+    ref,
+    value = 0,
+    decimals = 0,
+    separator = true,
+    prefix = '',
+    suffix = '',
+    fontSize = 48,
+    fontFamily = 'digital',
+    color = '#00d4ff',
+    glowIntensity = 0.5,
+    trendEnable = false,
+    trendValue = 0,
+    trendType = 'up',
+    trendSuffix = '%',
+    trendUpColor = '#52c41a',
+    trendDownColor = '#ff4d4f',
+    style: externalStyle
+  }) => {
+    const isDigital = fontFamily === 'digital';
+    const formattedValue = formatNumber(value, decimals, separator);
+
+    // 计算发光效果的 text-shadow
+    const glowShadow = glowIntensity > 0 ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20` : 'none';
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: styles.container,
+      ref: ref,
+      style: externalStyle,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: styles.content,
+        children: [prefix ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: cn(styles.prefix, isDigital && styles.prefixDigital),
+          style: {
+            fontSize: `${fontSize * 0.5}px`,
+            color
+          },
+          children: prefix
+        }) : null, /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: cn(styles.value, isDigital && styles.valueDigital),
+          style: {
+            fontSize: `${fontSize}px`,
+            color,
+            textShadow: glowShadow
+          },
+          children: formattedValue
+        }), suffix ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: cn(styles.suffix, isDigital && styles.suffixDigital),
+          style: {
+            fontSize: `${fontSize * 0.4}px`,
+            color
+          },
+          children: suffix
+        }) : null]
+      }), trendEnable ? /*#__PURE__*/jsxRuntime.jsx(TrendIndicator, {
+        downColor: trendDownColor,
+        size: fontSize,
+        suffix: trendSuffix,
+        type: trendType,
+        upColor: trendUpColor,
+        value: trendValue
+      }) : null]
+    });
+  };
+
+  exports.NumberFlip = NumberFlip;
+  exports.default = NumberFlip;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../../../../shared/src/lib/utils.ts","../../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import { clsx, type ClassValue } from 'clsx'\n\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs)\n}\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\n * Number Flip Component\n * 数字翻牌组件 - 用于展示 KPI、统计数字等\n */\n\nimport type { CSSProperties, Ref } from 'react'\nimport { cn } from '@easy-editor/materials-shared'\nimport styles from './component.module.css'\n\nexport type TrendType = 'up' | 'down' | 'flat'\n\nexport interface NumberFlipProps {\n  ref?: Ref<HTMLDivElement>\n  /** 数值 */\n  value?: number\n  /** 小数位数 */\n  decimals?: number\n  /** 是否显示千分位分隔符 */\n  separator?: boolean\n  /** 前缀 */\n  prefix?: string\n  /** 后缀 */\n  suffix?: string\n  /** 字体大小 */\n  fontSize?: number\n  /** 字体类型 */\n  fontFamily?: 'digital' | 'default'\n  /** 颜色 */\n  color?: string\n  /** 发光强度 (0-2) */\n  glowIntensity?: number\n  /** 是否显示趋势 */\n  trendEnable?: boolean\n  /** 趋势值 */\n  trendValue?: number\n  /** 趋势类型 */\n  trendType?: TrendType\n  /** 趋势后缀 */\n  trendSuffix?: string\n  /** 趋势上升颜色 */\n  trendUpColor?: string\n  /** 趋势下降颜色 */\n  trendDownColor?: string\n  /** 外部样式 */\n  style?: CSSProperties\n}\n\nconst formatNumber = (value: number, decimals: number, separator: boolean): string => {\n  const fixed = value.toFixed(decimals)\n  if (!separator) {\n    return fixed\n  }\n\n  const [intPart, decPart] = fixed.split('.')\n  const formattedInt = intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n  return decPart ? `${formattedInt}.${decPart}` : formattedInt\n}\n\nconst TrendIndicator: React.FC<{\n  type: TrendType\n  value: number\n  suffix: string\n  upColor: string\n  downColor: string\n  size: number\n}> = ({ type, value, suffix, upColor, downColor, size }) => {\n  let color = '#8899aa'\n  if (type === 'up') {\n    color = upColor\n  } else if (type === 'down') {\n    color = downColor\n  }\n\n  return (\n    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>\n      {type !== 'flat' && (\n        <svg\n          aria-label={`Trend ${type}`}\n          fill='none'\n          height={size * 0.3}\n          role='img'\n          style={{\n            transform: type === 'down' ? 'rotate(180deg)' : undefined,\n          }}\n          viewBox='0 0 24 24'\n          width={size * 0.3}\n        >\n          <title>Trend arrow {type}</title>\n          <path d='M12 4L20 14H4L12 4Z' fill={color} />\n        </svg>\n      )}\n      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}\n      <span style={{ color }}>\n        {value}\n        {suffix}\n      </span>\n    </div>\n  )\n}\n\nexport const NumberFlip: React.FC<NumberFlipProps> = ({\n  ref,\n  value = 0,\n  decimals = 0,\n  separator = true,\n  prefix = '',\n  suffix = '',\n  fontSize = 48,\n  fontFamily = 'digital',\n  color = '#00d4ff',\n  glowIntensity = 0.5,\n  trendEnable = false,\n  trendValue = 0,\n  trendType = 'up',\n  trendSuffix = '%',\n  trendUpColor = '#52c41a',\n  trendDownColor = '#ff4d4f',\n  style: externalStyle,\n}) => {\n  const isDigital = fontFamily === 'digital'\n  const formattedValue = formatNumber(value, decimals, separator)\n\n  // 计算发光效果的 text-shadow\n  const glowShadow =\n    glowIntensity > 0\n      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`\n      : 'none'\n\n  return (\n    <div className={styles.container} ref={ref} style={externalStyle}>\n      <div className={styles.content}>\n        {prefix ? (\n          <span\n            className={cn(styles.prefix, isDigital && styles.prefixDigital)}\n            style={{\n              fontSize: `${fontSize * 0.5}px`,\n              color,\n            }}\n          >\n            {prefix}\n          </span>\n        ) : null}\n        <span\n          className={cn(styles.value, isDigital && styles.valueDigital)}\n          style={{\n            fontSize: `${fontSize}px`,\n            color,\n            textShadow: glowShadow,\n          }}\n        >\n          {formattedValue}\n        </span>\n        {suffix ? (\n          <span\n            className={cn(styles.suffix, isDigital && styles.suffixDigital)}\n            style={{\n              fontSize: `${fontSize * 0.4}px`,\n              color,\n            }}\n          >\n            {suffix}\n          </span>\n        ) : null}\n      </div>\n      {trendEnable ? (\n        <TrendIndicator\n          downColor={trendDownColor}\n          size={fontSize}\n          suffix={trendSuffix}\n          type={trendType}\n          upColor={trendUpColor}\n          value={trendValue}\n        />\n      ) : null}\n    </div>\n  )\n}\n\nexport default NumberFlip\n"],"names":["cn","inputs","clsx","styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatNumber","value","decimals","separator","fixed","toFixed","intPart","decPart","split","formattedInt","replace","TrendIndicator","suffix","upColor","downColor","size","color","_jsxs","className","styles","trend","fontSize","children","fill","height","role","transform","undefined","viewBox","width","_jsx","d","marginRight","NumberFlip","prefix","fontFamily","glowIntensity","trendEnable","trendValue","trendType","trendSuffix","trendUpColor","trendDownColor","externalStyle","isDigital","formattedValue","glowShadow","container","content","prefixDigital","valueDigital","textShadow","suffixDigital"],"mappings":"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","x_google_ignoreList":[0,2]}

package/dist/component.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsStatisticNumberComponent={},e.jsxRuntime)}(this,function(e,t){"use strict";function o(e){var t,n,i="";if("string"==typeof e||"number"==typeof e)i+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(n=o(e[t]))&&(i&&(i+=" "),i+=n)}else for(n in e)e[n]&&(i&&(i+=" "),i+=n);return i}function n(...e){return function(){for(var e,t,n=0,i="",l=arguments.length;n<l;n++)(e=arguments[n])&&(t=o(e))&&(i&&(i+=" "),i+=t);return i}(e)}var i="component-module__container___VbZSk",l="component-module__content___344U8",r="component-module__prefix___RIPOo",s="component-module__prefixDigital___Q-IGu",a="component-module__value___Fg70k",d="component-module__valueDigital___saOYz",f="component-module__suffix___9U3yv",_="component-module__suffixDigital___WiYn4",c="component-module__trend___fgbi4";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const u=({type:e,value:o,suffix:n,upColor:i,downColor:l,size:r})=>{let s="#8899aa";return"up"===e?s=i:"down"===e&&(s=l),t.jsxs("div",{className:c,style:{fontSize:.35*r},children:["flat"!==e&&t.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*r,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*r,children:[t.jsxs("title",{children:["Trend arrow ",e]}),t.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:s})]}),"flat"===e&&t.jsx("span",{style:{color:s,marginRight:4},children:"—"}),t.jsxs("span",{style:{color:s},children:[o,n]})]})},p=({ref:e,value:o=0,decimals:c=0,separator:p=!0,prefix:m="",suffix:x="",fontSize:y=48,fontFamily:g="digital",color:h="#00d4ff",glowIntensity:v=.5,trendEnable:j=!1,trendValue:b=0,trendType:w="up",trendSuffix:C="%",trendUpColor:N="#52c41a",trendDownColor:S="#ff4d4f",style:z})=>{const $="digital"===g,T=((e,t,o)=>{const n=e.toFixed(t);if(!o)return n;const[i,l]=n.split("."),r=i.replace(/\B(?=(\d{3})+(?!\d))/g,",");return l?`${r}.${l}`:r})(o,c,p),D=v>0?`0 0 ${10*v}px ${h}, 0 0 ${20*v}px ${h}40, 0 0 ${30*v}px ${h}20`:"none";return t.jsxs("div",{className:i,ref:e,style:z,children:[t.jsxs("div",{className:l,children:[m?t.jsx("span",{className:n(r,$&&s),style:{fontSize:.5*y+"px",color:h},children:m}):null,t.jsx("span",{className:n(a,$&&d),style:{fontSize:`${y}px`,color:h,textShadow:D},children:T}),x?t.jsx("span",{className:n(f,$&&_),style:{fontSize:.4*y+"px",color:h},children:x}):null]}),j?t.jsx(u,{downColor:S,size:y,suffix:C,type:w,upColor:N,value:b}):null]})};e.NumberFlip=p,e.default=p,Object.defineProperty(e,"__esModule",{value:!0})});
+//# sourceMappingURL=component.min.js.map

package/dist/component.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.min.js","sources":["../../../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs","../../../../shared/src/lib/utils.ts","../../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import { clsx, type ClassValue } from 'clsx'\n\nexport function cn(...inputs: ClassValue[]) {\n  return clsx(inputs)\n}\n","function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","/**\n * Number Flip Component\n * 数字翻牌组件 - 用于展示 KPI、统计数字等\n */\n\nimport type { CSSProperties, Ref } from 'react'\nimport { cn } from '@easy-editor/materials-shared'\nimport styles from './component.module.css'\n\nexport type TrendType = 'up' | 'down' | 'flat'\n\nexport interface NumberFlipProps {\n  ref?: Ref<HTMLDivElement>\n  /** 数值 */\n  value?: number\n  /** 小数位数 */\n  decimals?: number\n  /** 是否显示千分位分隔符 */\n  separator?: boolean\n  /** 前缀 */\n  prefix?: string\n  /** 后缀 */\n  suffix?: string\n  /** 字体大小 */\n  fontSize?: number\n  /** 字体类型 */\n  fontFamily?: 'digital' | 'default'\n  /** 颜色 */\n  color?: string\n  /** 发光强度 (0-2) */\n  glowIntensity?: number\n  /** 是否显示趋势 */\n  trendEnable?: boolean\n  /** 趋势值 */\n  trendValue?: number\n  /** 趋势类型 */\n  trendType?: TrendType\n  /** 趋势后缀 */\n  trendSuffix?: string\n  /** 趋势上升颜色 */\n  trendUpColor?: string\n  /** 趋势下降颜色 */\n  trendDownColor?: string\n  /** 外部样式 */\n  style?: CSSProperties\n}\n\nconst formatNumber = (value: number, decimals: number, separator: boolean): string => {\n  const fixed = value.toFixed(decimals)\n  if (!separator) {\n    return fixed\n  }\n\n  const [intPart, decPart] = fixed.split('.')\n  const formattedInt = intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n  return decPart ? `${formattedInt}.${decPart}` : formattedInt\n}\n\nconst TrendIndicator: React.FC<{\n  type: TrendType\n  value: number\n  suffix: string\n  upColor: string\n  downColor: string\n  size: number\n}> = ({ type, value, suffix, upColor, downColor, size }) => {\n  let color = '#8899aa'\n  if (type === 'up') {\n    color = upColor\n  } else if (type === 'down') {\n    color = downColor\n  }\n\n  return (\n    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>\n      {type !== 'flat' && (\n        <svg\n          aria-label={`Trend ${type}`}\n          fill='none'\n          height={size * 0.3}\n          role='img'\n          style={{\n            transform: type === 'down' ? 'rotate(180deg)' : undefined,\n          }}\n          viewBox='0 0 24 24'\n          width={size * 0.3}\n        >\n          <title>Trend arrow {type}</title>\n          <path d='M12 4L20 14H4L12 4Z' fill={color} />\n        </svg>\n      )}\n      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}\n      <span style={{ color }}>\n        {value}\n        {suffix}\n      </span>\n    </div>\n  )\n}\n\nexport const NumberFlip: React.FC<NumberFlipProps> = ({\n  ref,\n  value = 0,\n  decimals = 0,\n  separator = true,\n  prefix = '',\n  suffix = '',\n  fontSize = 48,\n  fontFamily = 'digital',\n  color = '#00d4ff',\n  glowIntensity = 0.5,\n  trendEnable = false,\n  trendValue = 0,\n  trendType = 'up',\n  trendSuffix = '%',\n  trendUpColor = '#52c41a',\n  trendDownColor = '#ff4d4f',\n  style: externalStyle,\n}) => {\n  const isDigital = fontFamily === 'digital'\n  const formattedValue = formatNumber(value, decimals, separator)\n\n  // 计算发光效果的 text-shadow\n  const glowShadow =\n    glowIntensity > 0\n      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`\n      : 'none'\n\n  return (\n    <div className={styles.container} ref={ref} style={externalStyle}>\n      <div className={styles.content}>\n        {prefix ? (\n          <span\n            className={cn(styles.prefix, isDigital && styles.prefixDigital)}\n            style={{\n              fontSize: `${fontSize * 0.5}px`,\n              color,\n            }}\n          >\n            {prefix}\n          </span>\n        ) : null}\n        <span\n          className={cn(styles.value, isDigital && styles.valueDigital)}\n          style={{\n            fontSize: `${fontSize}px`,\n            color,\n            textShadow: glowShadow,\n          }}\n        >\n          {formattedValue}\n        </span>\n        {suffix ? (\n          <span\n            className={cn(styles.suffix, isDigital && styles.suffixDigital)}\n            style={{\n              fontSize: `${fontSize * 0.4}px`,\n              color,\n            }}\n          >\n            {suffix}\n          </span>\n        ) : null}\n      </div>\n      {trendEnable ? (\n        <TrendIndicator\n          downColor={trendDownColor}\n          size={fontSize}\n          suffix={trendSuffix}\n          type={trendType}\n          upColor={trendUpColor}\n          value={trendValue}\n        />\n      ) : null}\n    </div>\n  )\n}\n\nexport default NumberFlip\n"],"names":["r","e","t","f","n","Array","isArray","o","length","cn","inputs","arguments","clsx","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","TrendIndicator","value","suffix","upColor","downColor","size","color","_jsxs","className","styles","fontSize","children","fill","height","role","transform","undefined","viewBox","width","_jsx","d","marginRight","NumberFlip","decimals","separator","prefix","fontFamily","glowIntensity","trendEnable","trendValue","trendType","trendSuffix","trendUpColor","trendDownColor","externalStyle","isDigital","formattedValue","formatNumber","fixed","toFixed","intPart","decPart","split","formattedInt","replace","glowShadow","textShadow"],"mappings":"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","x_google_ignoreList":[0,2]}