@mathwiz/ui-components 0.1.27 → 0.1.29

package/dist/components/Button/Button.css

@@ -1,5 +1,5 @@
 /* Button Component Styles */
-.button {
+.button, .mathwiz-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -18,155 +18,223 @@
 }
 
 /* Button Sizes */
-.button--sm {
+.button--sm, .mathwiz-btn--sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
   min-height: 1.75rem;
 }
 
-.button--md {
+.button--md, .mathwiz-btn--md {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   min-height: 2.25rem;
 }
 
-.button--lg {
+.button--lg, .mathwiz-btn--lg {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
   min-height: 2.75rem;
 }
 
 /* Border Radius */
-.button--radius-sm {
+.button--radius-sm, .mathwiz-btn--radius-sm {
   border-radius: 0.25rem;
 }
 
-.button--radius-md {
+.button--radius-md, .mathwiz-btn--radius-md {
   border-radius: 0.375rem;
 }
 
-.button--radius-lg {
+.button--radius-lg, .mathwiz-btn--radius-lg {
   border-radius: 0.5rem;
 }
 
 /* Color Variants - Primary (未开始) */
-.button--primary {
+.button--primary, .mathwiz-btn--primary {
   background-color: #3b82f6;
   color: white;
   border-color: #3b82f6;
 }
 
-.button--primary:hover {
+.button--primary:hover, .mathwiz-btn--primary:hover {
   background-color: #2563eb;
   border-color: #2563eb;
 }
 
-.button--primary:focus-visible {
+.button--primary:focus-visible, .mathwiz-btn--primary:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }
 
 /* Color Variants - Secondary (进行中) */
-.button--secondary {
+.button--secondary, .mathwiz-btn--secondary {
   background-color: #6b7280;
   color: white;
   border-color: #6b7280;
 }
 
-.button--secondary:hover {
+.button--secondary:hover, .mathwiz-btn--secondary:hover {
   background-color: #4b5563;
   border-color: #4b5563;
 }
 
-.button--secondary:focus-visible {
+.button--secondary:focus-visible, .mathwiz-btn--secondary:focus-visible {
   outline: 2px solid #6b7280;
   outline-offset: 2px;
 }
 
 /* Color Variants - Success (已完成) */
-.button--success {
+.button--success, .mathwiz-btn--success {
   background-color: #10b981;
   color: white;
   border-color: #10b981;
 }
 
-.button--success:hover {
+.button--success:hover, .mathwiz-btn--success:hover {
   background-color: #059669;
   border-color: #059669;
 }
 
-.button--success:focus-visible {
+.button--success:focus-visible, .mathwiz-btn--success:focus-visible {
   outline: 2px solid #10b981;
   outline-offset: 2px;
 }
 
+/* Intent Variants - Semantic button styles */
+.mathwiz-btn--submit {
+  background-color: #10b981;
+  color: white;
+  border-color: #10b981;
+}
+
+.mathwiz-btn--submit:hover {
+  background-color: #059669;
+  border-color: #059669;
+}
+
+.mathwiz-btn--submit:focus-visible {
+  outline: 2px solid #10b981;
+  outline-offset: 2px;
+}
+
+.mathwiz-btn--next {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.mathwiz-btn--next:hover {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+.mathwiz-btn--next:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.mathwiz-btn--retry {
+  background-color: #f59e0b;
+  color: white;
+  border-color: #f59e0b;
+}
+
+.mathwiz-btn--retry:hover {
+  background-color: #d97706;
+  border-color: #d97706;
+}
+
+.mathwiz-btn--retry:focus-visible {
+  outline: 2px solid #f59e0b;
+  outline-offset: 2px;
+}
+
+.mathwiz-btn--solve {
+  background-color: #6b7280;
+  color: white;
+  border-color: #6b7280;
+}
+
+.mathwiz-btn--solve:hover {
+  background-color: #4b5563;
+  border-color: #4b5563;
+}
+
+.mathwiz-btn--solve:focus-visible {
+  outline: 2px solid #6b7280;
+  outline-offset: 2px;
+}
+
+/* Note: .mathwiz-btn--primary, .mathwiz-btn--secondary, .mathwiz-btn--default */
+/* are already defined in color variants above */
+
 /* Style Variants - Solid (默认) */
 .button--solid {
   /* Solid styles are the default, defined in color variants */
 }
 
 /* Style Variants - Bordered */
-.button--bordered.button--primary {
+.button--bordered.button--primary, .mathwiz-btn--bordered.mathwiz-btn--primary {
   background-color: transparent;
   color: #3b82f6;
   border-color: #3b82f6;
 }
 
-.button--bordered.button--primary:hover {
+.button--bordered.button--primary:hover, .mathwiz-btn--bordered.mathwiz-btn--primary:hover {
   background-color: #3b82f6;
   color: white;
 }
 
-.button--bordered.button--secondary {
+.button--bordered.button--secondary, .mathwiz-btn--bordered.mathwiz-btn--secondary {
   background-color: transparent;
   color: #6b7280;
   border-color: #6b7280;
 }
 
-.button--bordered.button--secondary:hover {
+.button--bordered.button--secondary:hover, .mathwiz-btn--bordered.mathwiz-btn--secondary:hover {
   background-color: #6b7280;
   color: white;
 }
 
-.button--bordered.button--success {
+.button--bordered.button--success, .mathwiz-btn--bordered.mathwiz-btn--success {
   background-color: transparent;
   color: #10b981;
   border-color: #10b981;
 }
 
-.button--bordered.button--success:hover {
+.button--bordered.button--success:hover, .mathwiz-btn--bordered.mathwiz-btn--success:hover {
   background-color: #10b981;
   color: white;
 }
 
 /* Style Variants - Light */
-.button--light.button--primary {
+.button--light.button--primary, .mathwiz-btn--light.mathwiz-btn--primary {
   background-color: #dbeafe;
   color: #1e40af;
   border-color: transparent;
 }
 
-.button--light.button--primary:hover {
+.button--light.button--primary:hover, .mathwiz-btn--light.mathwiz-btn--primary:hover {
   background-color: #bfdbfe;
 }
 
-.button--light.button--secondary {
+.button--light.button--secondary, .mathwiz-btn--light.mathwiz-btn--secondary {
   background-color: #f3f4f6;
   color: #374151;
   border-color: transparent;
 }
 
-.button--light.button--secondary:hover {
+.button--light.button--secondary:hover, .mathwiz-btn--light.mathwiz-btn--secondary:hover {
   background-color: #e5e7eb;
 }
 
-.button--light.button--success {
+.button--light.button--success, .mathwiz-btn--light.mathwiz-btn--success {
   background-color: #d1fae5;
   color: #065f46;
   border-color: transparent;
 }
 
-.button--light.button--success:hover {
+.button--light.button--success:hover, .mathwiz-btn--light.mathwiz-btn--success:hover {
   background-color: #a7f3d0;
 }
 
@@ -187,26 +255,26 @@
 }
 
 /* Loading state (optional) */
-.button--loading {
+.button--loading, .mathwiz-btn--loading {
   pointer-events: none;
   opacity: 0.8;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
-  .button--sm {
+  .button--sm, .mathwiz-btn--sm {
     padding: 0.25rem 0.5rem;
     font-size: 0.6875rem;
     min-height: 1.5rem;
   }
 
-  .button--md {
+  .button--md, .mathwiz-btn--md {
     padding: 0.375rem 0.75rem;
     font-size: 0.8125rem;
     min-height: 2rem;
   }
 
-  .button--lg {
+  .button--lg, .mathwiz-btn--lg {
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
     min-height: 2.25rem;

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwCxC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+CxC,CAAC"}

package/dist/components/Button/types.d.ts

@@ -44,6 +44,25 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @example true // 显示加载状态
      */
     loading?: boolean;
+    /**
+     * 按钮语义意图，用于生成特定类名和样式
+     * @default undefined
+     * @example 'submit' // 提交按钮
+     * @example 'next' // 下一步按钮
+     * @example 'retry' // 重试按钮
+     * @example 'solve' // 解题按钮
+     * @example 'primary' // 主要按钮
+     * @example 'secondary' // 次要按钮
+     * @example 'default' // 默认按钮
+     */
+    intent?: 'submit' | 'next' | 'retry' | 'solve' | 'primary' | 'secondary' | 'default';
+    /**
+     * 是否使用新的类名前缀 (mathwiz-btn)
+     * @default false
+     * @example true // 使用 mathwiz-btn 前缀
+     * @example false // 使用旧的 button 前缀（向后兼容）
+     */
+    useNewClassName?: boolean;
 }
 export type GetButtonColorClassFn = (progress: number) => string;
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAGD,MAAM,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IACrF;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAGD,MAAM,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC"}

package/dist/components/MathCardV2/modules/SolveModule/SolveModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolveModule.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/modules/SolveModule/SolveModule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4IlD,CAAC"}
+{"version":3,"file":"SolveModule.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/modules/SolveModule/SolveModule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,OAAO,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsKlD,CAAC"}

package/dist/components/MathCardV2/scenes/ExplanationScene/ExplanationScene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExplanationScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/ExplanationScene/ExplanationScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,wBAAwB,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgF5D,CAAC"}
+{"version":3,"file":"ExplanationScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/ExplanationScene/ExplanationScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,wBAAwB,CAAC;AAEhC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoF5D,CAAC"}

package/dist/components/MathCardV2/scenes/QuestionScene/QuestionScene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuestionScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/QuestionScene/QuestionScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4EtD,CAAC"}
+{"version":3,"file":"QuestionScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/QuestionScene/QuestionScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,qBAAqB,CAAC;AAE7B;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8EtD,CAAC"}

package/dist/components/MathCardV2/scenes/SuccessScene/SuccessScene.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuccessScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/SuccessScene/SuccessScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,oBAAoB,CAAC;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4CpD,CAAC"}
+{"version":3,"file":"SuccessScene.d.ts","sourceRoot":"","sources":["../../../../../src/components/MathCardV2/scenes/SuccessScene/SuccessScene.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,oBAAoB,CAAC;AAE5B;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8CpD,CAAC"}

package/dist/components/StatBlock/StatBlock.css

@@ -0,0 +1,331 @@
+/*
+ * StatBlock 组件样式文件
+ * 注意：组件不内置样式体系，业务项目控制实际样式
+ * 以下提供CSS变量定义和类名结构，以及可选的默认主题示例
+ * 业务项目可以完全覆盖这些变量或使用默认主题
+ */
+
+/* ========================
+ * CSS 变量定义（设计令牌）- 核心主题化变量
+ * ======================== */
+
+.mathwiz-statblock {
+  /* 主题色控制 - 通过行内样式覆盖实现主题切换 */
+  --statblock-current-theme-color: var(--mathwiz-statblock-theme-green, #90c842);
+
+  /* 背景与容器 */
+  --statblock-bg: var(--mathwiz-statblock-bg-base, #f4f4f4);
+  --statblock-header-bg: var(--statblock-current-theme-color);
+  --statblock-border: var(--mathwiz-statblock-border-light, #e6e6e6);
+  --statblock-shadow: none;
+
+  /* 文本颜色 */
+  --statblock-text-inverse: var(--mathwiz-statblock-text-inverse, #ffffff);
+  --statblock-text-main: var(--mathwiz-statblock-text-main, #737068);
+  --statblock-text-muted: var(--mathwiz-statblock-text-muted, #c1c1c1);
+  --statblock-label: var(--statblock-text-inverse);
+  --statblock-value: var(--statblock-text-main);
+  --statblock-unit: var(--statblock-text-muted);
+
+  /* 排版 */
+  --statblock-font-family-header: var(--mathwiz-statblock-font-family-header, 'Zilla Slab', serif);
+  --statblock-font-family-number: var(--mathwiz-statblock-font-family-number, 'Open Sans', sans-serif);
+  --statblock-font-size-title-main: var(--mathwiz-statblock-font-size-title-main, 18px);
+  --statblock-font-size-title-sub: var(--mathwiz-statblock-font-size-title-sub, 14px);
+  --statblock-font-size-value-large: var(--mathwiz-statblock-font-size-value-large, 48px);
+  --statblock-font-size-time-value: var(--mathwiz-statblock-font-size-time-value, 16px);
+  --statblock-font-size-time-label: var(--mathwiz-statblock-font-size-time-label, 11px);
+
+  /* 尺寸与间距 */
+  --statblock-sidebar-width: var(--mathwiz-statblock-sidebar-width, 140px);
+  --statblock-spacing-xs: var(--mathwiz-statblock-spacing-xs, 4px);
+  --statblock-spacing-sm: var(--mathwiz-statblock-spacing-sm, 8px);
+  --statblock-spacing-md: var(--mathwiz-statblock-spacing-md, 16px);
+  --statblock-spacing-lg: var(--mathwiz-statblock-spacing-lg, 24px);
+  --statblock-spacing-xl: var(--mathwiz-statblock-spacing-xl, 32px);
+  --statblock-padding: var(--statblock-spacing-sm) var(--statblock-spacing-xs);
+  --statblock-gap: var(--statblock-spacing-md);
+  --statblock-icon-gap: var(--statblock-spacing-sm);
+
+  /* 圆角 */
+  --statblock-radius: 0;
+
+  /* 交互状态 */
+  --statblock-hover-bg: rgba(255, 255, 255, 0.1);
+  --statblock-active-bg: rgba(255, 255, 255, 0.2);
+  --statblock-focus-ring: #3b82f6;
+
+  /* 时间显示专用 */
+  --statblock-time-bg: var(--mathwiz-statblock-bg-white, #ffffff);
+  --statblock-time-border: var(--statblock-border);
+  --statblock-time-value-color: var(--mathwiz-statblock-theme-blue, #4cb2d4);
+}
+
+/* ========================
+ * 预定义主题色变量 - 业务项目可覆盖
+ * ======================== */
+
+:root {
+  /* 主题色系 - 用于StatBlock头部背景 */
+  --mathwiz-statblock-theme-green: #90c842;
+  --mathwiz-statblock-theme-blue: #4cb2d4;
+  --mathwiz-statblock-theme-orange: #d96338;
+
+  /* 基础色系 */
+  --mathwiz-statblock-bg-base: #f4f4f4;
+  --mathwiz-statblock-bg-white: #ffffff;
+  --mathwiz-statblock-text-inverse: #ffffff;
+  --mathwiz-statblock-text-main: #737068;
+  --mathwiz-statblock-text-muted: #c1c1c1;
+  --mathwiz-statblock-border-light: #e6e6e6;
+
+  /* 字体排版 */
+  --mathwiz-statblock-font-family-header: 'Zilla Slab', serif;
+  --mathwiz-statblock-font-family-number: 'Open Sans', sans-serif;
+  --mathwiz-statblock-font-size-title-main: 18px;
+  --mathwiz-statblock-font-size-title-sub: 14px;
+  --mathwiz-statblock-font-size-value-large: 48px;
+  --mathwiz-statblock-font-size-time-value: 16px;
+  --mathwiz-statblock-font-size-time-label: 11px;
+
+  /* 尺寸与间距 */
+  --mathwiz-statblock-sidebar-width: 140px;
+  --mathwiz-statblock-spacing-xs: 4px;
+  --mathwiz-statblock-spacing-sm: 8px;
+  --mathwiz-statblock-spacing-md: 16px;
+  --mathwiz-statblock-spacing-lg: 24px;
+  --mathwiz-statblock-spacing-xl: 32px;
+}
+
+/* ========================
+ * 默认样式实现 - 可选的完整样式示例
+ * 业务项目可以选择使用这些样式，或完全覆盖
+ * ======================== */
+
+/* 根容器 - 基于demo.html的stat-block设计 */
+.mathwiz-statblock {
+  width: var(--statblock-sidebar-width);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--statblock-bg);
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* 头部容器 - 主题色背景 */
+.mathwiz-statblock-header {
+  background-color: var(--statblock-header-bg);
+  padding: var(--statblock-padding);
+  text-align: center;
+  color: var(--statblock-label);
+  font-family: var(--statblock-font-family-header);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 60px;
+}
+
+/* 头部标题文本 */
+.mathwiz-statblock-title {
+  font-size: var(--statblock-font-size-title-main);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.mathwiz-statblock-subtitle {
+  font-size: var(--statblock-font-size-title-sub);
+  font-weight: 600;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* 帮助图标 */
+.mathwiz-statblock-help-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  background-color: var(--statblock-text-inverse);
+  color: var(--statblock-current-theme-color);
+  border-radius: 50%;
+  font-family: var(--statblock-font-family-number);
+  font-size: 10px;
+  font-weight: bold;
+  cursor: help;
+}
+
+/* 主体容器 */
+.mathwiz-statblock-body {
+  padding: var(--statblock-spacing-xl) 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+}
+
+/* 单一巨大数字样式 */
+.mathwiz-statblock-value-large {
+  font-family: var(--statblock-font-family-number);
+  font-size: var(--statblock-font-size-value-large);
+  font-weight: 700;
+  color: var(--statblock-value);
+  line-height: 1;
+}
+
+/* ========================
+ * 时间显示子组件样式
+ * 当contentType为'time'时使用
+ * ======================== */
+
+.mathwiz-statblock-time-display {
+  display: flex;
+  gap: var(--statblock-spacing-xs);
+  padding: 0 var(--statblock-spacing-xs);
+}
+
+.mathwiz-statblock-time-unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.mathwiz-statblock-time-unit-box {
+  background: var(--statblock-time-bg);
+  border: 1px solid var(--statblock-time-border);
+  width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--statblock-font-family-number);
+  font-size: var(--statblock-font-size-time-value);
+  color: var(--statblock-time-value-color);
+  font-weight: 700;
+}
+
+.mathwiz-statblock-time-unit-label {
+  font-family: var(--statblock-font-family-header);
+  font-size: var(--statblock-font-size-time-label);
+  color: var(--statblock-text-muted);
+  font-weight: 700;
+}
+
+/* ========================
+ * 容器复合组件 - ProgressPanel
+ * 用于容纳多个StatBlock无缝垂直拼合
+ * ======================== */
+
+.mathwiz-statblock-progress-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 给除了最后的子元素加一条微妙的分割线 */
+.mathwiz-statblock-progress-panel .mathwiz-statblock + .mathwiz-statblock .mathwiz-statblock-header {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* ========================
+ * 交互模式样式
+ * ======================== */
+
+.mathwiz-statblock-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.mathwiz-statblock-interactive:hover .mathwiz-statblock-header {
+  background-color: color-mix(in srgb, var(--statblock-header-bg) 90%, black);
+}
+
+.mathwiz-statblock-interactive:active .mathwiz-statblock-header {
+  background-color: color-mix(in srgb, var(--statblock-header-bg) 80%, black);
+}
+
+.mathwiz-statblock-interactive:focus-visible {
+  outline: 2px solid var(--statblock-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ========================
+ * 响应式设计
+ * ======================== */
+
+@media (max-width: 768px) {
+  .mathwiz-statblock {
+    width: 100%;
+    max-width: var(--statblock-sidebar-width);
+  }
+
+  .mathwiz-statblock-title {
+    font-size: calc(var(--statblock-font-size-title-main) * 0.9);
+  }
+
+  .mathwiz-statblock-value-large {
+    font-size: calc(var(--statblock-font-size-value-large) * 0.8);
+  }
+}
+
+/* ========================
+ * 向后兼容层 - 保留旧的类名结构供现有代码使用
+ * ======================== */
+
+/* 旧版类名兼容 */
+.mathwiz-statblock-content {
+  composes: mathwiz-statblock-body;
+}
+
+.mathwiz-statblock-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.mathwiz-statblock-label {
+  composes: mathwiz-statblock-title;
+}
+
+.mathwiz-statblock-value-container {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25em;
+}
+
+.mathwiz-statblock-value {
+  composes: mathwiz-statblock-value-large;
+}
+
+.mathwiz-statblock-unit {
+  font-size: var(--statblock-font-size-title-sub);
+  color: var(--statblock-unit);
+}
+
+/* 图标位置容器 - 旧版兼容 */
+.mathwiz-statblock-icon-top {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--statblock-icon-gap, 0.5rem);
+}
+
+.mathwiz-statblock-icon-left {
+  display: flex;
+  align-items: center;
+  margin-right: var(--statblock-icon-gap, 0.75rem);
+}
+
+.mathwiz-statblock-icon-right {
+  display: flex;
+  align-items: center;
+  margin-left: var(--statblock-icon-gap, 0.75rem);
+}
+
+.mathwiz-statblock-icon-bottom {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--statblock-icon-gap, 0.5rem);
+}

package/dist/components/StatBlock/StatBlock.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './StatBlock.css';
+import type { StatBlockProps } from './types';
+export declare const StatBlock: React.FC<StatBlockProps>;
+declare const _default: React.NamedExoticComponent<StatBlockProps>;
+export default _default;
+//# sourceMappingURL=StatBlock.d.ts.map

package/dist/components/StatBlock/StatBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatBlock.d.ts","sourceRoot":"","sources":["../../../src/components/StatBlock/StatBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,cAAc,EAA0B,MAAM,SAAS,CAAC;AAGtE,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0K9C,CAAC;;AAGF,wBAAqC"}