@mathwiz/ui-components 0.1.16 → 0.1.22

package/dist/components/Button/Button.css

@@ -0,0 +1,214 @@
+/* Button Component Styles */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  transition: all 0.2s ease-in-out;
+  line-height: 1.5;
+  text-decoration: none;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Button Sizes */
+.button--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+  min-height: 1.75rem;
+}
+
+.button--md {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  min-height: 2.25rem;
+}
+
+.button--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  min-height: 2.75rem;
+}
+
+/* Border Radius */
+.button--radius-sm {
+  border-radius: 0.25rem;
+}
+
+.button--radius-md {
+  border-radius: 0.375rem;
+}
+
+.button--radius-lg {
+  border-radius: 0.5rem;
+}
+
+/* Color Variants - Primary (未开始) */
+.button--primary {
+  background-color: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.button--primary:hover {
+  background-color: #2563eb;
+  border-color: #2563eb;
+}
+
+.button--primary:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Color Variants - Secondary (进行中) */
+.button--secondary {
+  background-color: #6b7280;
+  color: white;
+  border-color: #6b7280;
+}
+
+.button--secondary:hover {
+  background-color: #4b5563;
+  border-color: #4b5563;
+}
+
+.button--secondary:focus-visible {
+  outline: 2px solid #6b7280;
+  outline-offset: 2px;
+}
+
+/* Color Variants - Success (已完成) */
+.button--success {
+  background-color: #10b981;
+  color: white;
+  border-color: #10b981;
+}
+
+.button--success:hover {
+  background-color: #059669;
+  border-color: #059669;
+}
+
+.button--success:focus-visible {
+  outline: 2px solid #10b981;
+  outline-offset: 2px;
+}
+
+/* Style Variants - Solid (默认) */
+.button--solid {
+  /* Solid styles are the default, defined in color variants */
+}
+
+/* Style Variants - Bordered */
+.button--bordered.button--primary {
+  background-color: transparent;
+  color: #3b82f6;
+  border-color: #3b82f6;
+}
+
+.button--bordered.button--primary:hover {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.button--bordered.button--secondary {
+  background-color: transparent;
+  color: #6b7280;
+  border-color: #6b7280;
+}
+
+.button--bordered.button--secondary:hover {
+  background-color: #6b7280;
+  color: white;
+}
+
+.button--bordered.button--success {
+  background-color: transparent;
+  color: #10b981;
+  border-color: #10b981;
+}
+
+.button--bordered.button--success:hover {
+  background-color: #10b981;
+  color: white;
+}
+
+/* Style Variants - Light */
+.button--light.button--primary {
+  background-color: #dbeafe;
+  color: #1e40af;
+  border-color: transparent;
+}
+
+.button--light.button--primary:hover {
+  background-color: #bfdbfe;
+}
+
+.button--light.button--secondary {
+  background-color: #f3f4f6;
+  color: #374151;
+  border-color: transparent;
+}
+
+.button--light.button--secondary:hover {
+  background-color: #e5e7eb;
+}
+
+.button--light.button--success {
+  background-color: #d1fae5;
+  color: #065f46;
+  border-color: transparent;
+}
+
+.button--light.button--success:hover {
+  background-color: #a7f3d0;
+}
+
+/* Disabled State */
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Focus states for accessibility */
+.button:focus {
+  outline: none;
+}
+
+.button:focus-visible {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
+}
+
+/* Loading state (optional) */
+.button--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .button--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.6875rem;
+    min-height: 1.5rem;
+  }
+
+  .button--md {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8125rem;
+    min-height: 2rem;
+  }
+
+  .button--lg {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    min-height: 2.25rem;
+  }
+}

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes } from 'react';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * 学习进度 (0-100)，用于自动确定按钮样式
+     * @default undefined
+     * @example 50 // 进度50%，显示为次要颜色
+     */
+    progress?: number;
+    /**
+     * 按钮变体样式
+     * @default 'solid'
+     * @example 'solid' // 实心按钮
+     * @example 'bordered' // 边框按钮
+     * @example 'light' // 浅色按钮
+     */
+    variant?: 'solid' | 'bordered' | 'light';
+    /**
+     * 按钮尺寸
+     * @default 'md'
+     * @example 'sm' // 小尺寸
+     * @example 'md' // 中尺寸
+     * @example 'lg' // 大尺寸
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 边框圆角
+     * @default 'md'
+     * @example 'sm' // 小圆角
+     * @example 'md' // 中圆角
+     * @example 'lg' // 大圆角
+     */
+    radius?: 'sm' | 'md' | 'lg';
+    /**
+     * 自定义类名
+     * @default ''
+     * @example 'my-custom-button' // 自定义样式类名
+     */
+    className?: string;
+    /** 子元素 */
+    children: React.ReactNode;
+    /**
+     * 加载状态
+     * @default false
+     * @example true // 显示加载状态
+     */
+    loading?: boolean;
+}
+export type GetButtonColorClassFn = (progress: number) => string;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ContentAccordion/ContentAccordion.css

@@ -0,0 +1,281 @@
+/* ContentAccordion 组件样式 */
+.content-accordion {
+  --accordion-spacing: 1rem;
+  --accordion-border-radius: 12px;
+  --accordion-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+  --accordion-border: none;
+  /* 移除边框，改用阴影，也可以保留边框 */
+  /* --accordion-border: 1px solid #e5e7eb; */
+  --accordion-transition: all 0.2s ease-in-out;
+
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+/* 加载状态 */
+.content-accordion--loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.content-accordion__loading {
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+/* 空状态 */
+.content-accordion--empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  color: #6b7280;
+}
+
+.content-accordion__empty {
+  text-align: center;
+}
+
+/* 单元头部 */
+.content-accordion__header {
+  padding: var(--accordion-spacing);
+  background: #f8fafc;
+  border-radius: var(--accordion-border-radius);
+  margin-bottom: var(--accordion-spacing);
+  /* border: var(--accordion-border); */
+  border: none;
+}
+
+.content-accordion__unit-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0 0 0.5rem 0;
+}
+
+.content-accordion__unit-description {
+  color: #6b7280;
+  margin: 0 0 0.75rem 0;
+  line-height: 1.5;
+}
+
+.content-accordion__unit-meta {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  color: #9ca3af;
+  font-size: 0.875rem;
+}
+
+/* 课程项 */
+.content-accordion__lessons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.content-accordion__lesson-item {
+  /* border: var(--accordion-border); */
+  border: none;
+  border-radius: var(--accordion-border-radius);
+  background: white;
+  box-shadow: var(--accordion-shadow);
+  overflow: hidden;
+  transition: var(--accordion-transition);
+}
+
+.content-accordion__lesson-item--expanded {
+  /* box-shadow: var(--accordion-shadow); */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  /* 展开时加深阴影 */
+  border-radius: var(--accordion-border-radius);
+  border: none;
+}
+
+.content-accordion__lesson-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem var(--accordion-spacing);
+  cursor: pointer;
+  background: white;
+  transition: var(--accordion-transition);
+  user-select: none;
+}
+
+.content-accordion__lesson-header:hover {
+  background: #f9fafb;
+}
+
+.content-accordion__lesson-header:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+
+.content-accordion__lesson-header-content {
+  flex: 1;
+}
+
+.content-accordion__lesson-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #1f2937;
+  margin: 0 0 0.25rem 0;
+}
+
+.content-accordion__lesson-duration {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.content-accordion__lesson-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.content-accordion__lesson-progress {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #3b82f6;
+  min-width: 3rem;
+  text-align: right;
+}
+
+.content-accordion__lesson-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #6b7280;
+  transition: var(--accordion-transition);
+}
+
+/* 知识点列表 */
+.content-accordion__knowledge-list {
+  padding: 0 var(--accordion-spacing) var(--accordion-spacing);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  background: #f9fafb;
+  /* 更浅的背景 */
+  /* border-top: var(--accordion-border); */
+  border-top: none;
+}
+
+/* 知识点卡片 */
+.content-accordion__knowledge-card {
+  margin: 0;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  /* 轻微阴影 */
+  /* box-shadow: none; */
+  border: none;
+}
+
+.content-accordion__knowledge-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1f2937;
+  margin: 0 0 0.5rem 0;
+}
+
+.content-accordion__knowledge-description {
+  font-size: 0.75rem;
+  color: #6b7280;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.content-accordion__knowledge-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f3f4f6;
+}
+
+.content-accordion__progress-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.content-accordion__progress-bar {
+  flex: 1;
+  max-width: 120px;
+}
+
+.content-accordion__progress-text {
+  font-size: 0.75rem;
+  color: #6b7280;
+  min-width: 2.5rem;
+  text-align: right;
+}
+
+/* 学习按钮样式 - 与自定义 Button 组件配合使用 */
+.content-accordion__learn-button {
+  white-space: nowrap;
+  min-width: 6rem;
+  justify-content: center;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .content-accordion {
+    --accordion-spacing: 0.75rem;
+  }
+
+  .content-accordion__header {
+    padding: 0.75rem;
+  }
+
+  .content-accordion__unit-title {
+    font-size: 1.25rem;
+  }
+
+  .content-accordion__lesson-header {
+    padding: 0.75rem;
+  }
+
+  .content-accordion__knowledge-list {
+    padding: 0 0.75rem 0.75rem;
+  }
+
+  .content-accordion__knowledge-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .content-accordion__progress-container {
+    justify-content: space-between;
+  }
+}
+
+/* 无障碍性支持 */
+@media (prefers-reduced-motion: reduce) {
+
+  .content-accordion,
+  .content-accordion__lesson-header,
+  .content-accordion__lesson-icon {
+    transition: none;
+  }
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+  .content-accordion__lesson-header {
+    border: 2px solid currentColor;
+  }
+
+  .content-accordion__knowledge-card {
+    border: 2px solid currentColor;
+  }
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/ContentAccordion/ContentAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,qBAAqB,EAAuC,MAAM,SAAS,CAAC;AAE1F,OAAO,wBAAwB,CAAC;AA2FhC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoD5D,CAAC"}

package/dist/components/ContentAccordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentAccordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentAccordion/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,qBAAqB;IACpC,eAAe;IACf,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,gBAAgB;IAChB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,kBAAkB;IAClB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB;IAChB,aAAa,EAAE,CAAC,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;IACtD,WAAW;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,eAAe;IACf,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW;IACX,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,MAAM,EAAE,MAAM,CAAC;IACf,aAAa;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe;IACf,aAAa,EAAE,CAAC,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY;IACZ,aAAa,EAAE,aAAa,CAAC;IAC7B,eAAe;IACf,aAAa,EAAE,CAAC,aAAa,EAAE,aAAa,KAAK,IAAI,CAAC;CACvD;AAGD,MAAM,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;AAC3D,MAAM,MAAM,yBAAyB,GAAG,CAAC,cAAc,EAAE,aAAa,EAAE,KAAK,MAAM,CAAC;AAGpF,eAAO,MAAM,aAAa,EAAE,eAI3B,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,yBAIrC,CAAC"}

package/dist/components/EquationRender/EquationRender.css

@@ -0,0 +1,42 @@
+/* KaTeX styles are imported from katex.min.css in the component */
+
+.equation-render {
+  /* Base styles for the equation render component */
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+}
+
+/* Block mode (displayMode=true) specific styles */
+.equation-render.equation-render--block {
+  justify-content: center;
+  margin: 1em 0;
+}
+
+/* Inline mode (displayMode=false) specific styles */
+.equation-render.equation-render--inline {
+  /* Inherits default span behavior */
+}
+
+/* Support for CSS variables for theming */
+.equation-render {
+  font-size: var(--equation-font-size, 1rem);
+  color: var(--equation-color, #333333);
+}
+
+/* Ensure KaTeX elements inherit proper styling */
+.equation-render .katex {
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Handle long equations that might need wrapping */
+.equation-render {
+  flex-wrap: wrap;
+}
+
+/* Ensure proper baseline alignment for inline elements */
+.equation-render > span {
+  display: inline-block;
+  vertical-align: middle;
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"EquationRender.d.ts","sourceRoot":"","sources":["../../../src/components/EquationRender/EquationRender.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsGjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/EquationRender/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EquationRender/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/EquationRender/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;;OAGG;IACH,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}