@easy-editor/materials-dashboard-progress 0.0.2

package/dist/component.esm.js

@@ -0,0 +1,257 @@
+/* @easy-editor/materials-dashboard-progress-ring v0.0.1 (component, esm) */
+import { useId, useRef, useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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,.component-module__wrapper___IYMoW{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-module__container___VbZSk{position:relative}.component-module__ring___QkEHa{transform:rotate(-90deg)}.component-module__centerContent___Ri3R3{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.component-module__value___Fg70k{font-weight:700;line-height:1.1}.component-module__label___6IHVo{color:#fff;margin-top:4px;opacity:.7}.component-module__barContainer___AOTls{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;width:100%}.component-module__barWrapper___cni-a{border-radius:4px;flex:1;max-height:8px;min-height:8px;overflow:hidden;width:100%}.component-module__barFill___KZkJe{border-radius:4px;height:100%;transition:width .5s ease}.component-module__barLabels___BvaEi{align-items:center;display:flex;justify-content:space-between}.component-module__barLabel___wVaWe{color:hsla(0,0%,100%,.7);font-size:12px}.component-module__barValue___H2muu{font-size:14px;font-weight:600}";
+var styles = {"wrapper":"component-module__wrapper___IYMoW","container":"component-module__container___VbZSk","ring":"component-module__ring___QkEHa","centerContent":"component-module__centerContent___Ri3R3","value":"component-module__value___Fg70k","label":"component-module__label___6IHVo","barContainer":"component-module__barContainer___AOTls","barWrapper":"component-module__barWrapper___cni-a","barFill":"component-module__barFill___KZkJe","barLabels":"component-module__barLabels___BvaEi","barLabel":"component-module__barLabel___wVaWe","barValue":"component-module__barValue___H2muu"};
+styleInject(css_248z);
+
+/**
+ * Progress Component
+ * 进度组件 - 支持环形和线性进度条
+ */
+
+// 格式化数值
+const formatValue = (value, percentage, valueFormat) => {
+  if (valueFormat === 'percent') {
+    return `${Math.round(percentage)}%`;
+  }
+  return `${value}`;
+};
+
+// 环形进度条组件
+const RingProgress = ({
+  percentage,
+  strokeWidthRatio,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor,
+  gradientId
+}) => {
+  const containerRef = useRef(null);
+  const [size, setSize] = useState(100);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const updateSize = () => {
+      const {
+        width,
+        height
+      } = container.getBoundingClientRect();
+      const minSize = Math.min(width, height);
+      if (minSize > 0) {
+        setSize(minSize);
+      }
+    };
+    updateSize();
+    const resizeObserver = new ResizeObserver(updateSize);
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, []);
+  const strokeWidth = Math.max(2, size * strokeWidthRatio);
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size / 2;
+  return /*#__PURE__*/jsxs("div", {
+    className: styles.container,
+    ref: containerRef,
+    children: [/*#__PURE__*/jsxs("svg", {
+      "aria-label": "Progress ring",
+      className: styles.ring,
+      height: size,
+      role: "img",
+      width: size,
+      children: [/*#__PURE__*/jsx("title", {
+        children: "Progress indicator"
+      }), gradientEnable ? /*#__PURE__*/jsx("defs", {
+        children: /*#__PURE__*/jsxs("linearGradient", {
+          id: gradientId,
+          x1: "0%",
+          x2: "100%",
+          y1: "0%",
+          y2: "0%",
+          children: [/*#__PURE__*/jsx("stop", {
+            offset: "0%",
+            stopColor: gradientColors[0]
+          }), /*#__PURE__*/jsx("stop", {
+            offset: "100%",
+            stopColor: gradientColors[1]
+          })]
+        })
+      }) : null, /*#__PURE__*/jsx("circle", {
+        cx: center,
+        cy: center,
+        fill: "none",
+        r: radius,
+        stroke: trackColor,
+        strokeWidth: strokeWidth
+      }), /*#__PURE__*/jsx("circle", {
+        cx: center,
+        cy: center,
+        fill: "none",
+        r: radius,
+        stroke: gradientEnable ? `url(#${gradientId})` : progressColor,
+        strokeDasharray: circumference,
+        strokeDashoffset: strokeDashoffset,
+        strokeLinecap: "round",
+        strokeWidth: strokeWidth,
+        style: {
+          transition: 'stroke-dashoffset 0.5s ease'
+        }
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: styles.centerContent,
+      children: [showValue ? /*#__PURE__*/jsx("span", {
+        className: styles.value,
+        style: {
+          fontSize: size * 0.2,
+          color: displayColor
+        },
+        children: formatValue(Math.round(percentage), percentage, valueFormat)
+      }) : null, showLabel && label ? /*#__PURE__*/jsx("span", {
+        className: styles.label,
+        style: {
+          fontSize: size * 0.1
+        },
+        children: label
+      }) : null]
+    })]
+  });
+};
+
+// 线性进度条组件
+const BarProgress = ({
+  percentage,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor
+}) => /*#__PURE__*/jsxs("div", {
+  className: styles.barContainer,
+  children: [showLabel || showValue ? /*#__PURE__*/jsxs("div", {
+    className: styles.barLabels,
+    children: [showLabel ? /*#__PURE__*/jsx("span", {
+      className: styles.barLabel,
+      children: label
+    }) : null, showValue ? /*#__PURE__*/jsx("span", {
+      className: styles.barValue,
+      style: {
+        color: displayColor
+      },
+      children: formatValue(Math.round(percentage), percentage, valueFormat)
+    }) : null]
+  }) : null, /*#__PURE__*/jsx("div", {
+    className: styles.barWrapper,
+    style: {
+      background: trackColor
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: styles.barFill,
+      style: {
+        width: `${percentage}%`,
+        background: gradientEnable ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})` : progressColor
+      }
+    })
+  })]
+});
+const Progress = ({
+  ref,
+  value = 0,
+  maxValue = 100,
+  type = 'ring',
+  showValue = true,
+  showLabel = false,
+  label = '',
+  valueFormat = 'percent',
+  strokeWidthRatio = 0.07,
+  trackColor = 'rgba(26, 26, 62, 0.8)',
+  progressColor = '#00d4ff',
+  gradientEnable = false,
+  gradientColors = ['#00d4ff', '#9b59b6'],
+  style: externalStyle
+}) => {
+  const gradientId = useId();
+  const normalizedValue = Math.min(Math.max(value, 0), maxValue);
+  const percentage = normalizedValue / maxValue * 100;
+  const displayColor = gradientEnable ? gradientColors[0] : progressColor;
+  if (type === 'ring') {
+    return /*#__PURE__*/jsx("div", {
+      className: styles.wrapper,
+      ref: ref,
+      style: externalStyle,
+      children: /*#__PURE__*/jsx(RingProgress, {
+        displayColor: displayColor,
+        gradientColors: gradientColors,
+        gradientEnable: gradientEnable,
+        gradientId: gradientId,
+        label: label,
+        percentage: percentage,
+        progressColor: progressColor,
+        showLabel: showLabel,
+        showValue: showValue,
+        strokeWidthRatio: strokeWidthRatio,
+        trackColor: trackColor,
+        valueFormat: valueFormat
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: styles.wrapper,
+    ref: ref,
+    style: externalStyle,
+    children: /*#__PURE__*/jsx(BarProgress, {
+      displayColor: displayColor,
+      gradientColors: gradientColors,
+      gradientEnable: gradientEnable,
+      label: label,
+      percentage: percentage,
+      progressColor: progressColor,
+      showLabel: showLabel,
+      showValue: showValue,
+      trackColor: trackColor,
+      valueFormat: valueFormat
+    })
+  });
+};
+
+export { Progress, Progress as default };
+//# sourceMappingURL=component.esm.js.map

package/dist/component.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.esm.js","sources":["../../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["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 * Progress Component\n * 进度组件 - 支持环形和线性进度条\n */\n\nimport { useId, useRef, useEffect, useState, type CSSProperties, type Ref } from 'react'\nimport styles from './component.module.css'\n\nexport interface ProgressProps {\n  ref?: Ref<HTMLDivElement>\n  /** 当前值 */\n  value?: number\n  /** 最大值 */\n  maxValue?: number\n  /** 进度条类型 */\n  type?: 'ring' | 'bar'\n  /** 是否显示数值 */\n  showValue?: boolean\n  /** 是否显示标签 */\n  showLabel?: boolean\n  /** 标签文本 */\n  label?: string\n  /** 数值格式 */\n  valueFormat?: 'percent' | 'number'\n  /** 线条宽度比例（相对于尺寸的百分比） */\n  strokeWidthRatio?: number\n  /** 轨道颜色 */\n  trackColor?: string\n  /** 进度颜色 */\n  progressColor?: string\n  /** 是否启用渐变 */\n  gradientEnable?: boolean\n  /** 渐变颜色 [起始色, 结束色] */\n  gradientColors?: [string, string]\n  /** 外部样式 */\n  style?: CSSProperties\n}\n\n// 格式化数值\nconst formatValue = (value: number, percentage: number, valueFormat: string): string => {\n  if (valueFormat === 'percent') {\n    return `${Math.round(percentage)}%`\n  }\n  return `${value}`\n}\n\n// 环形进度条组件\nconst RingProgress = ({\n  percentage,\n  strokeWidthRatio,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n  gradientId,\n}: {\n  percentage: number\n  strokeWidthRatio: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n  gradientId: string\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [size, setSize] = useState(100)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    const updateSize = () => {\n      const { width, height } = container.getBoundingClientRect()\n      const minSize = Math.min(width, height)\n      if (minSize > 0) {\n        setSize(minSize)\n      }\n    }\n\n    updateSize()\n\n    const resizeObserver = new ResizeObserver(updateSize)\n    resizeObserver.observe(container)\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const strokeWidth = Math.max(2, size * strokeWidthRatio)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const strokeDashoffset = circumference - (percentage / 100) * circumference\n  const center = size / 2\n\n  return (\n    <div className={styles.container} ref={containerRef}>\n      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>\n        <title>Progress indicator</title>\n        {gradientEnable ? (\n          <defs>\n            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>\n              <stop offset='0%' stopColor={gradientColors[0]} />\n              <stop offset='100%' stopColor={gradientColors[1]} />\n            </linearGradient>\n          </defs>\n        ) : null}\n        {/* 轨道 */}\n        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />\n        {/* 进度 */}\n        <circle\n          cx={center}\n          cy={center}\n          fill='none'\n          r={radius}\n          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          strokeLinecap='round'\n          strokeWidth={strokeWidth}\n          style={{\n            transition: 'stroke-dashoffset 0.5s ease',\n          }}\n        />\n      </svg>\n      <div className={styles.centerContent}>\n        {showValue ? (\n          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n        {showLabel && label ? (\n          <span className={styles.label} style={{ fontSize: size * 0.1 }}>\n            {label}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n// 线性进度条组件\nconst BarProgress = ({\n  percentage,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n}: {\n  percentage: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n}) => (\n  <div className={styles.barContainer}>\n    {showLabel || showValue ? (\n      <div className={styles.barLabels}>\n        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}\n        {showValue ? (\n          <span className={styles.barValue} style={{ color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n      </div>\n    ) : null}\n    <div className={styles.barWrapper} style={{ background: trackColor }}>\n      <div\n        className={styles.barFill}\n        style={{\n          width: `${percentage}%`,\n          background: gradientEnable\n            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`\n            : progressColor,\n        }}\n      />\n    </div>\n  </div>\n)\n\nexport const Progress: React.FC<ProgressProps> = ({\n  ref,\n  value = 0,\n  maxValue = 100,\n  type = 'ring',\n  showValue = true,\n  showLabel = false,\n  label = '',\n  valueFormat = 'percent',\n  strokeWidthRatio = 0.07,\n  trackColor = 'rgba(26, 26, 62, 0.8)',\n  progressColor = '#00d4ff',\n  gradientEnable = false,\n  gradientColors = ['#00d4ff', '#9b59b6'],\n  style: externalStyle,\n}) => {\n  const gradientId = useId()\n\n  const normalizedValue = Math.min(Math.max(value, 0), maxValue)\n  const percentage = (normalizedValue / maxValue) * 100\n  const displayColor = gradientEnable ? gradientColors[0] : progressColor\n\n  if (type === 'ring') {\n    return (\n      <div className={styles.wrapper} ref={ref} style={externalStyle}>\n        <RingProgress\n          displayColor={displayColor}\n          gradientColors={gradientColors}\n          gradientEnable={gradientEnable}\n          gradientId={gradientId}\n          label={label}\n          percentage={percentage}\n          progressColor={progressColor}\n          showLabel={showLabel}\n          showValue={showValue}\n          strokeWidthRatio={strokeWidthRatio}\n          trackColor={trackColor}\n          valueFormat={valueFormat}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={styles.wrapper} ref={ref} style={externalStyle}>\n      <BarProgress\n        displayColor={displayColor}\n        gradientColors={gradientColors}\n        gradientEnable={gradientEnable}\n        label={label}\n        percentage={percentage}\n        progressColor={progressColor}\n        showLabel={showLabel}\n        showValue={showValue}\n        trackColor={trackColor}\n        valueFormat={valueFormat}\n      />\n    </div>\n  )\n}\n\nexport default Progress\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatValue","value","percentage","valueFormat","Math","round","RingProgress","strokeWidthRatio","trackColor","progressColor","gradientEnable","gradientColors","showValue","showLabel","label","displayColor","gradientId","containerRef","useRef","size","setSize","useState","useEffect","container","current","updateSize","width","height","getBoundingClientRect","minSize","min","resizeObserver","ResizeObserver","observe","disconnect","strokeWidth","max","radius","circumference","PI","strokeDashoffset","center","_jsxs","className","styles","children","ring","role","_jsx","id","x1","x2","y1","y2","offset","stopColor","cx","cy","fill","r","stroke","strokeDasharray","strokeLinecap","transition","centerContent","fontSize","color","BarProgress","barContainer","barLabels","barLabel","barValue","barWrapper","background","barFill","Progress","maxValue","externalStyle","useId","normalizedValue","wrapper"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/component.js

@@ -0,0 +1,265 @@
+/* @easy-editor/materials-dashboard-progress-ring v0.0.1 (component) */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react/jsx-runtime')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react/jsx-runtime'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.EasyEditorMaterialsProgressRingComponent = {}, global.React, global.jsxRuntime));
+})(this, (function (exports, react, jsxRuntime) { 'use strict';
+
+  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,.component-module__wrapper___IYMoW{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-module__container___VbZSk{position:relative}.component-module__ring___QkEHa{transform:rotate(-90deg)}.component-module__centerContent___Ri3R3{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.component-module__value___Fg70k{font-weight:700;line-height:1.1}.component-module__label___6IHVo{color:#fff;margin-top:4px;opacity:.7}.component-module__barContainer___AOTls{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;width:100%}.component-module__barWrapper___cni-a{border-radius:4px;flex:1;max-height:8px;min-height:8px;overflow:hidden;width:100%}.component-module__barFill___KZkJe{border-radius:4px;height:100%;transition:width .5s ease}.component-module__barLabels___BvaEi{align-items:center;display:flex;justify-content:space-between}.component-module__barLabel___wVaWe{color:hsla(0,0%,100%,.7);font-size:12px}.component-module__barValue___H2muu{font-size:14px;font-weight:600}";
+  var styles = {"wrapper":"component-module__wrapper___IYMoW","container":"component-module__container___VbZSk","ring":"component-module__ring___QkEHa","centerContent":"component-module__centerContent___Ri3R3","value":"component-module__value___Fg70k","label":"component-module__label___6IHVo","barContainer":"component-module__barContainer___AOTls","barWrapper":"component-module__barWrapper___cni-a","barFill":"component-module__barFill___KZkJe","barLabels":"component-module__barLabels___BvaEi","barLabel":"component-module__barLabel___wVaWe","barValue":"component-module__barValue___H2muu"};
+  styleInject(css_248z);
+
+  /**
+   * Progress Component
+   * 进度组件 - 支持环形和线性进度条
+   */
+
+  // 格式化数值
+  const formatValue = (value, percentage, valueFormat) => {
+    if (valueFormat === 'percent') {
+      return `${Math.round(percentage)}%`;
+    }
+    return `${value}`;
+  };
+
+  // 环形进度条组件
+  const RingProgress = ({
+    percentage,
+    strokeWidthRatio,
+    trackColor,
+    progressColor,
+    gradientEnable,
+    gradientColors,
+    showValue,
+    showLabel,
+    label,
+    valueFormat,
+    displayColor,
+    gradientId
+  }) => {
+    const containerRef = react.useRef(null);
+    const [size, setSize] = react.useState(100);
+    react.useEffect(() => {
+      const container = containerRef.current;
+      if (!container) {
+        return;
+      }
+      const updateSize = () => {
+        const {
+          width,
+          height
+        } = container.getBoundingClientRect();
+        const minSize = Math.min(width, height);
+        if (minSize > 0) {
+          setSize(minSize);
+        }
+      };
+      updateSize();
+      const resizeObserver = new ResizeObserver(updateSize);
+      resizeObserver.observe(container);
+      return () => resizeObserver.disconnect();
+    }, []);
+    const strokeWidth = Math.max(2, size * strokeWidthRatio);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - percentage / 100 * circumference;
+    const center = size / 2;
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: styles.container,
+      ref: containerRef,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+        "aria-label": "Progress ring",
+        className: styles.ring,
+        height: size,
+        role: "img",
+        width: size,
+        children: [/*#__PURE__*/jsxRuntime.jsx("title", {
+          children: "Progress indicator"
+        }), gradientEnable ? /*#__PURE__*/jsxRuntime.jsx("defs", {
+          children: /*#__PURE__*/jsxRuntime.jsxs("linearGradient", {
+            id: gradientId,
+            x1: "0%",
+            x2: "100%",
+            y1: "0%",
+            y2: "0%",
+            children: [/*#__PURE__*/jsxRuntime.jsx("stop", {
+              offset: "0%",
+              stopColor: gradientColors[0]
+            }), /*#__PURE__*/jsxRuntime.jsx("stop", {
+              offset: "100%",
+              stopColor: gradientColors[1]
+            })]
+          })
+        }) : null, /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: center,
+          cy: center,
+          fill: "none",
+          r: radius,
+          stroke: trackColor,
+          strokeWidth: strokeWidth
+        }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+          cx: center,
+          cy: center,
+          fill: "none",
+          r: radius,
+          stroke: gradientEnable ? `url(#${gradientId})` : progressColor,
+          strokeDasharray: circumference,
+          strokeDashoffset: strokeDashoffset,
+          strokeLinecap: "round",
+          strokeWidth: strokeWidth,
+          style: {
+            transition: 'stroke-dashoffset 0.5s ease'
+          }
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: styles.centerContent,
+        children: [showValue ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: styles.value,
+          style: {
+            fontSize: size * 0.2,
+            color: displayColor
+          },
+          children: formatValue(Math.round(percentage), percentage, valueFormat)
+        }) : null, showLabel && label ? /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: styles.label,
+          style: {
+            fontSize: size * 0.1
+          },
+          children: label
+        }) : null]
+      })]
+    });
+  };
+
+  // 线性进度条组件
+  const BarProgress = ({
+    percentage,
+    trackColor,
+    progressColor,
+    gradientEnable,
+    gradientColors,
+    showValue,
+    showLabel,
+    label,
+    valueFormat,
+    displayColor
+  }) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: styles.barContainer,
+    children: [showLabel || showValue ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: styles.barLabels,
+      children: [showLabel ? /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: styles.barLabel,
+        children: label
+      }) : null, showValue ? /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: styles.barValue,
+        style: {
+          color: displayColor
+        },
+        children: formatValue(Math.round(percentage), percentage, valueFormat)
+      }) : null]
+    }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: styles.barWrapper,
+      style: {
+        background: trackColor
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: styles.barFill,
+        style: {
+          width: `${percentage}%`,
+          background: gradientEnable ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})` : progressColor
+        }
+      })
+    })]
+  });
+  const Progress = ({
+    ref,
+    value = 0,
+    maxValue = 100,
+    type = 'ring',
+    showValue = true,
+    showLabel = false,
+    label = '',
+    valueFormat = 'percent',
+    strokeWidthRatio = 0.07,
+    trackColor = 'rgba(26, 26, 62, 0.8)',
+    progressColor = '#00d4ff',
+    gradientEnable = false,
+    gradientColors = ['#00d4ff', '#9b59b6'],
+    style: externalStyle
+  }) => {
+    const gradientId = react.useId();
+    const normalizedValue = Math.min(Math.max(value, 0), maxValue);
+    const percentage = normalizedValue / maxValue * 100;
+    const displayColor = gradientEnable ? gradientColors[0] : progressColor;
+    if (type === 'ring') {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: styles.wrapper,
+        ref: ref,
+        style: externalStyle,
+        children: /*#__PURE__*/jsxRuntime.jsx(RingProgress, {
+          displayColor: displayColor,
+          gradientColors: gradientColors,
+          gradientEnable: gradientEnable,
+          gradientId: gradientId,
+          label: label,
+          percentage: percentage,
+          progressColor: progressColor,
+          showLabel: showLabel,
+          showValue: showValue,
+          strokeWidthRatio: strokeWidthRatio,
+          trackColor: trackColor,
+          valueFormat: valueFormat
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: styles.wrapper,
+      ref: ref,
+      style: externalStyle,
+      children: /*#__PURE__*/jsxRuntime.jsx(BarProgress, {
+        displayColor: displayColor,
+        gradientColors: gradientColors,
+        gradientEnable: gradientEnable,
+        label: label,
+        percentage: percentage,
+        progressColor: progressColor,
+        showLabel: showLabel,
+        showValue: showValue,
+        trackColor: trackColor,
+        valueFormat: valueFormat
+      })
+    });
+  };
+
+  exports.Progress = Progress;
+  exports.default = Progress;
+
+  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/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["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 * Progress Component\n * 进度组件 - 支持环形和线性进度条\n */\n\nimport { useId, useRef, useEffect, useState, type CSSProperties, type Ref } from 'react'\nimport styles from './component.module.css'\n\nexport interface ProgressProps {\n  ref?: Ref<HTMLDivElement>\n  /** 当前值 */\n  value?: number\n  /** 最大值 */\n  maxValue?: number\n  /** 进度条类型 */\n  type?: 'ring' | 'bar'\n  /** 是否显示数值 */\n  showValue?: boolean\n  /** 是否显示标签 */\n  showLabel?: boolean\n  /** 标签文本 */\n  label?: string\n  /** 数值格式 */\n  valueFormat?: 'percent' | 'number'\n  /** 线条宽度比例（相对于尺寸的百分比） */\n  strokeWidthRatio?: number\n  /** 轨道颜色 */\n  trackColor?: string\n  /** 进度颜色 */\n  progressColor?: string\n  /** 是否启用渐变 */\n  gradientEnable?: boolean\n  /** 渐变颜色 [起始色, 结束色] */\n  gradientColors?: [string, string]\n  /** 外部样式 */\n  style?: CSSProperties\n}\n\n// 格式化数值\nconst formatValue = (value: number, percentage: number, valueFormat: string): string => {\n  if (valueFormat === 'percent') {\n    return `${Math.round(percentage)}%`\n  }\n  return `${value}`\n}\n\n// 环形进度条组件\nconst RingProgress = ({\n  percentage,\n  strokeWidthRatio,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n  gradientId,\n}: {\n  percentage: number\n  strokeWidthRatio: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n  gradientId: string\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [size, setSize] = useState(100)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    const updateSize = () => {\n      const { width, height } = container.getBoundingClientRect()\n      const minSize = Math.min(width, height)\n      if (minSize > 0) {\n        setSize(minSize)\n      }\n    }\n\n    updateSize()\n\n    const resizeObserver = new ResizeObserver(updateSize)\n    resizeObserver.observe(container)\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const strokeWidth = Math.max(2, size * strokeWidthRatio)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const strokeDashoffset = circumference - (percentage / 100) * circumference\n  const center = size / 2\n\n  return (\n    <div className={styles.container} ref={containerRef}>\n      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>\n        <title>Progress indicator</title>\n        {gradientEnable ? (\n          <defs>\n            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>\n              <stop offset='0%' stopColor={gradientColors[0]} />\n              <stop offset='100%' stopColor={gradientColors[1]} />\n            </linearGradient>\n          </defs>\n        ) : null}\n        {/* 轨道 */}\n        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />\n        {/* 进度 */}\n        <circle\n          cx={center}\n          cy={center}\n          fill='none'\n          r={radius}\n          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          strokeLinecap='round'\n          strokeWidth={strokeWidth}\n          style={{\n            transition: 'stroke-dashoffset 0.5s ease',\n          }}\n        />\n      </svg>\n      <div className={styles.centerContent}>\n        {showValue ? (\n          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n        {showLabel && label ? (\n          <span className={styles.label} style={{ fontSize: size * 0.1 }}>\n            {label}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n// 线性进度条组件\nconst BarProgress = ({\n  percentage,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n}: {\n  percentage: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n}) => (\n  <div className={styles.barContainer}>\n    {showLabel || showValue ? (\n      <div className={styles.barLabels}>\n        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}\n        {showValue ? (\n          <span className={styles.barValue} style={{ color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n      </div>\n    ) : null}\n    <div className={styles.barWrapper} style={{ background: trackColor }}>\n      <div\n        className={styles.barFill}\n        style={{\n          width: `${percentage}%`,\n          background: gradientEnable\n            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`\n            : progressColor,\n        }}\n      />\n    </div>\n  </div>\n)\n\nexport const Progress: React.FC<ProgressProps> = ({\n  ref,\n  value = 0,\n  maxValue = 100,\n  type = 'ring',\n  showValue = true,\n  showLabel = false,\n  label = '',\n  valueFormat = 'percent',\n  strokeWidthRatio = 0.07,\n  trackColor = 'rgba(26, 26, 62, 0.8)',\n  progressColor = '#00d4ff',\n  gradientEnable = false,\n  gradientColors = ['#00d4ff', '#9b59b6'],\n  style: externalStyle,\n}) => {\n  const gradientId = useId()\n\n  const normalizedValue = Math.min(Math.max(value, 0), maxValue)\n  const percentage = (normalizedValue / maxValue) * 100\n  const displayColor = gradientEnable ? gradientColors[0] : progressColor\n\n  if (type === 'ring') {\n    return (\n      <div className={styles.wrapper} ref={ref} style={externalStyle}>\n        <RingProgress\n          displayColor={displayColor}\n          gradientColors={gradientColors}\n          gradientEnable={gradientEnable}\n          gradientId={gradientId}\n          label={label}\n          percentage={percentage}\n          progressColor={progressColor}\n          showLabel={showLabel}\n          showValue={showValue}\n          strokeWidthRatio={strokeWidthRatio}\n          trackColor={trackColor}\n          valueFormat={valueFormat}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={styles.wrapper} ref={ref} style={externalStyle}>\n      <BarProgress\n        displayColor={displayColor}\n        gradientColors={gradientColors}\n        gradientEnable={gradientEnable}\n        label={label}\n        percentage={percentage}\n        progressColor={progressColor}\n        showLabel={showLabel}\n        showValue={showValue}\n        trackColor={trackColor}\n        valueFormat={valueFormat}\n      />\n    </div>\n  )\n}\n\nexport default Progress\n"],"names":["styleInject","css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatValue","value","percentage","valueFormat","Math","round","RingProgress","strokeWidthRatio","trackColor","progressColor","gradientEnable","gradientColors","showValue","showLabel","label","displayColor","gradientId","containerRef","useRef","size","setSize","useState","useEffect","container","current","updateSize","width","height","getBoundingClientRect","minSize","min","resizeObserver","ResizeObserver","observe","disconnect","strokeWidth","max","radius","circumference","PI","strokeDashoffset","center","_jsxs","className","styles","children","ring","role","_jsx","id","x1","x2","y1","y2","offset","stopColor","cx","cy","fill","r","stroke","strokeDasharray","strokeLinecap","transition","centerContent","fontSize","color","BarProgress","barContainer","barLabels","barLabel","barValue","barWrapper","background","barFill","Progress","maxValue","externalStyle","useId","normalizedValue","wrapper"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/component.min.js

@@ -0,0 +1,2 @@
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsProgressRingComponent={},e.React,e.jsxRuntime)}(this,function(e,o,t){"use strict";var n="component-module__wrapper___IYMoW",r="component-module__container___VbZSk",l="component-module__ring___QkEHa",a="component-module__centerContent___Ri3R3",s="component-module__value___Fg70k",i="component-module__label___6IHVo",d="component-module__barContainer___AOTls",c="component-module__barWrapper___cni-a",_="component-module__barFill___KZkJe",m="component-module__barLabels___BvaEi",u="component-module__barLabel___wVaWe",p="component-module__barValue___H2muu";!function(e,o){void 0===o&&(o={});var t=o.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk,.component-module__wrapper___IYMoW{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-module__container___VbZSk{position:relative}.component-module__ring___QkEHa{transform:rotate(-90deg)}.component-module__centerContent___Ri3R3{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.component-module__value___Fg70k{font-weight:700;line-height:1.1}.component-module__label___6IHVo{color:#fff;margin-top:4px;opacity:.7}.component-module__barContainer___AOTls{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;width:100%}.component-module__barWrapper___cni-a{border-radius:4px;flex:1;max-height:8px;min-height:8px;overflow:hidden;width:100%}.component-module__barFill___KZkJe{border-radius:4px;height:100%;transition:width .5s ease}.component-module__barLabels___BvaEi{align-items:center;display:flex;justify-content:space-between}.component-module__barLabel___wVaWe{color:hsla(0,0%,100%,.7);font-size:12px}.component-module__barValue___H2muu{font-size:14px;font-weight:600}");const h=(e,o,t)=>"percent"===t?`${Math.round(o)}%`:`${e}`,f=({percentage:e,strokeWidthRatio:n,trackColor:d,progressColor:c,gradientEnable:_,gradientColors:m,showValue:u,showLabel:p,label:f,valueFormat:g,displayColor:x,gradientId:b})=>{const y=o.useRef(null),[j,C]=o.useState(100);o.useEffect(()=>{const e=y.current;if(!e)return;const o=()=>{const{width:o,height:t}=e.getBoundingClientRect(),n=Math.min(o,t);n>0&&C(n)};o();const t=new ResizeObserver(o);return t.observe(e),()=>t.disconnect()},[]);const v=Math.max(2,j*n),k=(j-v)/2,w=2*Math.PI*k,N=w-e/100*w,V=j/2;return t.jsxs("div",{className:r,ref:y,children:[t.jsxs("svg",{"aria-label":"Progress ring",className:l,height:j,role:"img",width:j,children:[t.jsx("title",{children:"Progress indicator"}),_?t.jsx("defs",{children:t.jsxs("linearGradient",{id:b,x1:"0%",x2:"100%",y1:"0%",y2:"0%",children:[t.jsx("stop",{offset:"0%",stopColor:m[0]}),t.jsx("stop",{offset:"100%",stopColor:m[1]})]})}):null,t.jsx("circle",{cx:V,cy:V,fill:"none",r:k,stroke:d,strokeWidth:v}),t.jsx("circle",{cx:V,cy:V,fill:"none",r:k,stroke:_?`url(#${b})`:c,strokeDasharray:w,strokeDashoffset:N,strokeLinecap:"round",strokeWidth:v,style:{transition:"stroke-dashoffset 0.5s ease"}})]}),t.jsxs("div",{className:a,children:[u?t.jsx("span",{className:s,style:{fontSize:.2*j,color:x},children:h(Math.round(e),e,g)}):null,p&&f?t.jsx("span",{className:i,style:{fontSize:.1*j},children:f}):null]})]})},g=({percentage:e,trackColor:o,progressColor:n,gradientEnable:r,gradientColors:l,showValue:a,showLabel:s,label:i,valueFormat:f,displayColor:g})=>t.jsxs("div",{className:d,children:[s||a?t.jsxs("div",{className:m,children:[s?t.jsx("span",{className:u,children:i}):null,a?t.jsx("span",{className:p,style:{color:g},children:h(Math.round(e),e,f)}):null]}):null,t.jsx("div",{className:c,style:{background:o},children:t.jsx("div",{className:_,style:{width:`${e}%`,background:r?`linear-gradient(90deg, ${l[0]}, ${l[1]})`:n}})})]}),x=({ref:e,value:r=0,maxValue:l=100,type:a="ring",showValue:s=!0,showLabel:i=!1,label:d="",valueFormat:c="percent",strokeWidthRatio:_=.07,trackColor:m="rgba(26, 26, 62, 0.8)",progressColor:u="#00d4ff",gradientEnable:p=!1,gradientColors:h=["#00d4ff","#9b59b6"],style:x})=>{const b=o.useId(),y=Math.min(Math.max(r,0),l)/l*100,j=p?h[0]:u;return"ring"===a?t.jsx("div",{className:n,ref:e,style:x,children:t.jsx(f,{displayColor:j,gradientColors:h,gradientEnable:p,gradientId:b,label:d,percentage:y,progressColor:u,showLabel:i,showValue:s,strokeWidthRatio:_,trackColor:m,valueFormat:c})}):t.jsx("div",{className:n,ref:e,style:x,children:t.jsx(g,{displayColor:j,gradientColors:h,gradientEnable:p,label:d,percentage:y,progressColor:u,showLabel:i,showValue:s,trackColor:m,valueFormat:c})})};e.Progress=x,e.default=x,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/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js","../src/component.tsx"],"sourcesContent":["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 * Progress Component\n * 进度组件 - 支持环形和线性进度条\n */\n\nimport { useId, useRef, useEffect, useState, type CSSProperties, type Ref } from 'react'\nimport styles from './component.module.css'\n\nexport interface ProgressProps {\n  ref?: Ref<HTMLDivElement>\n  /** 当前值 */\n  value?: number\n  /** 最大值 */\n  maxValue?: number\n  /** 进度条类型 */\n  type?: 'ring' | 'bar'\n  /** 是否显示数值 */\n  showValue?: boolean\n  /** 是否显示标签 */\n  showLabel?: boolean\n  /** 标签文本 */\n  label?: string\n  /** 数值格式 */\n  valueFormat?: 'percent' | 'number'\n  /** 线条宽度比例（相对于尺寸的百分比） */\n  strokeWidthRatio?: number\n  /** 轨道颜色 */\n  trackColor?: string\n  /** 进度颜色 */\n  progressColor?: string\n  /** 是否启用渐变 */\n  gradientEnable?: boolean\n  /** 渐变颜色 [起始色, 结束色] */\n  gradientColors?: [string, string]\n  /** 外部样式 */\n  style?: CSSProperties\n}\n\n// 格式化数值\nconst formatValue = (value: number, percentage: number, valueFormat: string): string => {\n  if (valueFormat === 'percent') {\n    return `${Math.round(percentage)}%`\n  }\n  return `${value}`\n}\n\n// 环形进度条组件\nconst RingProgress = ({\n  percentage,\n  strokeWidthRatio,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n  gradientId,\n}: {\n  percentage: number\n  strokeWidthRatio: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n  gradientId: string\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [size, setSize] = useState(100)\n\n  useEffect(() => {\n    const container = containerRef.current\n    if (!container) {\n      return\n    }\n\n    const updateSize = () => {\n      const { width, height } = container.getBoundingClientRect()\n      const minSize = Math.min(width, height)\n      if (minSize > 0) {\n        setSize(minSize)\n      }\n    }\n\n    updateSize()\n\n    const resizeObserver = new ResizeObserver(updateSize)\n    resizeObserver.observe(container)\n\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const strokeWidth = Math.max(2, size * strokeWidthRatio)\n  const radius = (size - strokeWidth) / 2\n  const circumference = 2 * Math.PI * radius\n  const strokeDashoffset = circumference - (percentage / 100) * circumference\n  const center = size / 2\n\n  return (\n    <div className={styles.container} ref={containerRef}>\n      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>\n        <title>Progress indicator</title>\n        {gradientEnable ? (\n          <defs>\n            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>\n              <stop offset='0%' stopColor={gradientColors[0]} />\n              <stop offset='100%' stopColor={gradientColors[1]} />\n            </linearGradient>\n          </defs>\n        ) : null}\n        {/* 轨道 */}\n        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />\n        {/* 进度 */}\n        <circle\n          cx={center}\n          cy={center}\n          fill='none'\n          r={radius}\n          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          strokeLinecap='round'\n          strokeWidth={strokeWidth}\n          style={{\n            transition: 'stroke-dashoffset 0.5s ease',\n          }}\n        />\n      </svg>\n      <div className={styles.centerContent}>\n        {showValue ? (\n          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n        {showLabel && label ? (\n          <span className={styles.label} style={{ fontSize: size * 0.1 }}>\n            {label}\n          </span>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\n// 线性进度条组件\nconst BarProgress = ({\n  percentage,\n  trackColor,\n  progressColor,\n  gradientEnable,\n  gradientColors,\n  showValue,\n  showLabel,\n  label,\n  valueFormat,\n  displayColor,\n}: {\n  percentage: number\n  trackColor: string\n  progressColor: string\n  gradientEnable: boolean\n  gradientColors: [string, string]\n  showValue: boolean\n  showLabel: boolean\n  label: string\n  valueFormat: string\n  displayColor: string\n}) => (\n  <div className={styles.barContainer}>\n    {showLabel || showValue ? (\n      <div className={styles.barLabels}>\n        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}\n        {showValue ? (\n          <span className={styles.barValue} style={{ color: displayColor }}>\n            {formatValue(Math.round(percentage), percentage, valueFormat)}\n          </span>\n        ) : null}\n      </div>\n    ) : null}\n    <div className={styles.barWrapper} style={{ background: trackColor }}>\n      <div\n        className={styles.barFill}\n        style={{\n          width: `${percentage}%`,\n          background: gradientEnable\n            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`\n            : progressColor,\n        }}\n      />\n    </div>\n  </div>\n)\n\nexport const Progress: React.FC<ProgressProps> = ({\n  ref,\n  value = 0,\n  maxValue = 100,\n  type = 'ring',\n  showValue = true,\n  showLabel = false,\n  label = '',\n  valueFormat = 'percent',\n  strokeWidthRatio = 0.07,\n  trackColor = 'rgba(26, 26, 62, 0.8)',\n  progressColor = '#00d4ff',\n  gradientEnable = false,\n  gradientColors = ['#00d4ff', '#9b59b6'],\n  style: externalStyle,\n}) => {\n  const gradientId = useId()\n\n  const normalizedValue = Math.min(Math.max(value, 0), maxValue)\n  const percentage = (normalizedValue / maxValue) * 100\n  const displayColor = gradientEnable ? gradientColors[0] : progressColor\n\n  if (type === 'ring') {\n    return (\n      <div className={styles.wrapper} ref={ref} style={externalStyle}>\n        <RingProgress\n          displayColor={displayColor}\n          gradientColors={gradientColors}\n          gradientEnable={gradientEnable}\n          gradientId={gradientId}\n          label={label}\n          percentage={percentage}\n          progressColor={progressColor}\n          showLabel={showLabel}\n          showValue={showValue}\n          strokeWidthRatio={strokeWidthRatio}\n          trackColor={trackColor}\n          valueFormat={valueFormat}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div className={styles.wrapper} ref={ref} style={externalStyle}>\n      <BarProgress\n        displayColor={displayColor}\n        gradientColors={gradientColors}\n        gradientEnable={gradientEnable}\n        label={label}\n        percentage={percentage}\n        progressColor={progressColor}\n        showLabel={showLabel}\n        showValue={showValue}\n        trackColor={trackColor}\n        valueFormat={valueFormat}\n      />\n    </div>\n  )\n}\n\nexport default Progress\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","formatValue","value","percentage","valueFormat","Math","round","RingProgress","strokeWidthRatio","trackColor","progressColor","gradientEnable","gradientColors","showValue","showLabel","label","displayColor","gradientId","containerRef","useRef","size","setSize","useState","useEffect","container","current","updateSize","width","height","getBoundingClientRect","minSize","min","resizeObserver","ResizeObserver","observe","disconnect","strokeWidth","max","radius","circumference","PI","strokeDashoffset","center","_jsxs","className","styles","children","role","_jsx","id","x1","x2","y1","y2","offset","stopColor","cx","cy","fill","r","stroke","strokeDasharray","strokeLinecap","transition","fontSize","color","BarProgress","background","Progress","maxValue","externalStyle","useId"],"mappings":"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","x_google_ignoreList":[0]}