@mathwiz/ui-components 0.1.7 → 0.1.8

package/dist/components/MathWizHeader/MathWizHeader.css

@@ -1,333 +0,0 @@
-/* MathWizHeader 组件样式 - 参数化样式系统 */
-
-/* 基础样式变量 */
-.mathwiz-header {
-  --header-height: 64px;
-  --header-bg: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
-  --header-color: white;
-  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  height: var(--header-height);
-  background: var(--header-bg);
-  color: var(--header-color);
-  box-shadow: var(--header-shadow);
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  width: 100%;
-}
-
-/* 变体样式 */
-.mathwiz-header--primary {
-  --header-bg: linear-gradient(to right, #006FEE, #005BC4);
-}
-
-.mathwiz-header--secondary {
-  --header-bg: linear-gradient(to right, #7828C8, #5B21B6);
-}
-
-.mathwiz-header--gradient {
-  /* 默认渐变，可通过参数自定义 */
-  --header-bg: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
-}
-
-.mathwiz-header--solid {
-  --header-bg: var(--custom-bg, #f4f4f5);
-  --header-color: var(--custom-color, #18181b);
-}
-
-.mathwiz-header--bordered {
-  --header-bg: transparent;
-  --header-color: #18181b;
-  border-bottom: 1px solid #e4e4e7;
-  box-shadow: none;
-}
-
-/* 颜色变体 */
-.mathwiz-header--color-primary {
-  --header-bg: #006FEE;
-  --header-color: white;
-}
-
-.mathwiz-header--color-success {
-  --header-bg: #17C964;
-  --header-color: white;
-}
-
-.mathwiz-header--color-warning {
-  --header-bg: #F5A524;
-  --header-color: white;
-}
-
-.mathwiz-header--color-danger {
-  --header-bg: #F31260;
-  --header-color: white;
-}
-
-/* 布局样式 */
-.mathwiz-header .header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 100%;
-  padding: 0 1.5rem;
-  max-width: 1280px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.mathwiz-header .header-section {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.mathwiz-header .header-section.left {
-  justify-content: flex-start;
-}
-
-.mathwiz-header .header-section.center {
-  justify-content: center;
-  text-align: center;
-}
-
-.mathwiz-header .header-section.right {
-  justify-content: flex-end;
-}
-
-/* Logo 样式 */
-.mathwiz-header .logo {
-  font-size: var(--logo-font-size, 1.5rem);
-  font-weight: var(--logo-font-weight, bold);
-  text-decoration: none;
-  transition: opacity 0.2s ease;
-  color: var(--logo-color, var(--header-color)) !important;
-}
-
-.mathwiz-header .logo:hover {
-  opacity: 0.8;
-}
-
-/* Logo 尺寸变体 */
-.mathwiz-header .logo--sm {
-  --logo-font-size: 1.25rem;
-}
-
-.mathwiz-header .logo--md {
-  --logo-font-size: 1.5rem;
-}
-
-.mathwiz-header .logo--lg {
-  --logo-font-size: 1.75rem;
-}
-
-.mathwiz-header .logo--xl {
-  --logo-font-size: 2rem;
-}
-
-/* 探索菜单样式 */
-.explore-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  background: var(--explore-bg, transparent);
-  border: var(--explore-border, none);
-  color: var(--explore-color, var(--header-color)) !important;
-  cursor: pointer;
-}
-
-/* 探索按钮变体 */
-.explore-button--solid {
-  --explore-bg: var(--explore-color, #006FEE);
-  --explore-color: white;
-}
-
-.explore-button--bordered {
-  --explore-bg: transparent;
-  --explore-border: 1px solid var(--explore-color, #006FEE);
-  --explore-color: var(--explore-color, #006FEE);
-}
-
-.explore-button--light {
-  --explore-bg: var(--explore-color-light, rgba(0, 111, 238, 0.1));
-  --explore-color: var(--explore-color, #006FEE);
-}
-
-.explore-button--flat {
-  --explore-bg: transparent;
-  --explore-color: var(--explore-color, #006FEE);
-}
-
-.explore-button--faded {
-  --explore-bg: var(--explore-color-faded, rgba(0, 111, 238, 0.05));
-  --explore-color: var(--explore-color, #006FEE);
-}
-
-.explore-button--shadow {
-  --explore-bg: var(--explore-color, #006FEE);
-  --explore-color: white;
-  box-shadow: 0 2px 4px rgba(0, 111, 238, 0.3);
-}
-
-/* 探索按钮颜色变体 */
-.explore-button--color-primary {
-  --explore-color: #006FEE;
-  --explore-color-light: rgba(0, 111, 238, 0.1);
-  --explore-color-faded: rgba(0, 111, 238, 0.05);
-}
-
-.explore-button--color-success {
-  --explore-color: #17C964;
-  --explore-color-light: rgba(23, 201, 100, 0.1);
-  --explore-color-faded: rgba(23, 201, 100, 0.05);
-}
-
-.explore-button--color-warning {
-  --explore-color: #F5A524;
-  --explore-color-light: rgba(245, 165, 36, 0.1);
-  --explore-color-faded: rgba(245, 165, 36, 0.05);
-}
-
-.explore-button--color-danger {
-  --explore-color: #F31260;
-  --explore-color-light: rgba(243, 18, 96, 0.1);
-  --explore-color-faded: rgba(243, 18, 96, 0.05);
-}
-
-.explore-button:hover {
-  background-color: var(--explore-bg-hover, rgba(255, 255, 255, 0.1));
-  color: var(--explore-color-hover, var(--explore-color));
-}
-
-.explore-icon {
-  font-size: 1.25rem;
-}
-
-.explore-text {
-  font-weight: 500;
-}
-
-/* 探索菜单项样式 */
-.explore-menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
-  min-width: 200px;
-}
-
-.explore-menu-item:hover {
-  background-color: var(--hover-bg, #e9ecef);
-  color: var(--accent-color, #4361ee);
-}
-
-.explore-item-label {
-  font-weight: 500;
-  flex: 1;
-}
-
-.explore-item-status {
-  font-size: 0.75rem;
-  font-weight: 500;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  margin-left: 0.5rem;
-}
-
-.status-new {
-  background-color: var(--success-color, #10b981);
-  color: white;
-}
-
-.status-progress {
-  color: var(--accent-color, #4361ee);
-}
-
-.status-进行中 {
-  background-color: var(--warning-color, #f59e0b);
-  color: white;
-}
-
-.status-2 {
-  background-color: var(--accent-light, #e6f2ff);
-  color: var(--accent-color, #4361ee);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .mathwiz-header .header-content {
-    padding: 0 1rem;
-  }
-
-  .explore-text {
-    display: none;
-  }
-
-  .explore-button {
-    padding: 0.5rem;
-  }
-
-  .mathwiz-header .logo {
-    font-size: 1.25rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .mathwiz-header .header-content {
-    padding: 0 0.75rem;
-  }
-
-  .explore-button {
-    min-width: auto;
-  }
-}
-
-/* 无障碍访问支持 */
-.mathwiz-header:focus-within {
-  outline: 2px solid var(--accent-color, #4361ee);
-  outline-offset: 2px;
-}
-
-.explore-button:focus {
-  outline: 2px solid var(--accent-color, #4361ee);
-  outline-offset: 2px;
-}
-
-/* 高对比度模式支持 */
-@media (prefers-contrast: high) {
-  .mathwiz-header {
-    border-bottom: 2px solid white;
-  }
-
-  .explore-button {
-    border: 1px solid currentColor;
-  }
-}
-
-/* 用户名片在Header中的样式 */
-.mathwiz-header .user-name {
-  color: white !important;
-}
-
-/* 用户名片在Header中的悬停效果 */
-.mathwiz-header .user-profile-trigger:hover {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-  opacity: 0.8;
-}
-
-/* 减少动画模式支持 */
-@media (prefers-reduced-motion: reduce) {
-
-  .mathwiz-header .logo,
-  .explore-button,
-  .explore-menu-item {
-    transition: none;
-  }
-}

package/dist/components/SideNavigation.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import './components.css';
-interface Lesson {
-    id: string;
-    title: string;
-    duration?: string;
-    isCompleted?: boolean;
-    isLocked?: boolean;
-}
-interface Unit {
-    id: string;
-    title: string;
-    lessons: Lesson[];
-}
-interface SideNavigationProps {
-    units: Unit[];
-    currentLesson?: string;
-    onLessonSelect?: (lessonId: string) => void;
-    onUnitToggle?: (unitId: string) => void;
-    expandedUnits?: string[];
-}
-export declare const SideNavigation: React.FC<SideNavigationProps>;
-export {};
-//# sourceMappingURL=SideNavigation.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SideNavigation.d.ts","sourceRoot":"","sources":["../../src/components/SideNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,UAAU,MAAM;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqDxD,CAAC"}

package/dist/components/SideNavigationHU.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import './components.css';
-interface Unit {
-    id: string;
-    title: string;
-    isLocked?: boolean;
-}
-interface SideNavigationHUProps {
-    units: Unit[];
-    currentUnit?: string;
-    onUnitSelect?: (unitId: string) => void;
-    courseTitle?: string;
-    courseLevel?: string;
-}
-export declare const SideNavigationHU: React.FC<SideNavigationHUProps>;
-export {};
-//# sourceMappingURL=SideNavigationHU.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SideNavigationHU.d.ts","sourceRoot":"","sources":["../../src/components/SideNavigationHU.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,UAAU,IAAI;IACV,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,qBAAqB;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0D5D,CAAC"}

package/dist/components/Sidebar/Sidebar.css

@@ -1,207 +0,0 @@
-/* Sidebar 组件样式 - BEM 命名规范 */
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  width: 280px;
-  height: 100vh;
-  background-color: var(--sidebar-bg-color, #ffffff);
-  border-right: 1px solid var(--sidebar-border-color, #e0e0e0);
-  transition: width var(--transition-normal, 250ms ease-in-out),
-              transform var(--transition-normal, 250ms ease-in-out);
-  overflow-y: auto;
-  position: relative;
-}
-
-.sidebar--collapsed {
-  width: 64px;
-}
-
-.sidebar--loading .sidebar__unit-list,
-.sidebar--loading .sidebar__header {
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-/* 头部区域 */
-.sidebar__header {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-lg, 24px) var(--spacing-md, 16px) var(--spacing-md, 16px);
-  border-bottom: 1px solid var(--sidebar-border-color, #e0e0e0);
-  margin-bottom: var(--spacing-md, 16px);
-}
-
-.sidebar__toggle-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: var(--border-radius-sm, 4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--sidebar-text-color, #333333);
-  margin-right: var(--spacing-sm, 8px);
-}
-
-.sidebar__toggle-btn:hover {
-  background-color: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.05));
-}
-
-.sidebar__course-info {
-  flex: 1;
-}
-
-.sidebar__course-title {
-  font-size: var(--font-size-lg, 16px);
-  font-weight: var(--font-weight-bold, 600);
-  color: var(--sidebar-text-color, #333333);
-  margin: 0 0 var(--spacing-xs, 4px) 0;
-}
-
-.sidebar__course-level {
-  font-size: var(--font-size-sm, 12px);
-  color: var(--sidebar-text-secondary, #666666);
-}
-
-/* 内容区域 */
-.sidebar__content {
-  flex: 1;
-  padding: 0 var(--spacing-md, 16px);
-}
-
-.sidebar__unit-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-/* 单元项样式 */
-.sidebar__unit-item {
-  margin-bottom: var(--spacing-xs, 4px);
-  border-radius: var(--border-radius-sm, 4px);
-  cursor: pointer;
-  transition: background-color var(--transition-fast, 150ms ease-in-out);
-  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
-}
-
-.sidebar__unit-item:hover {
-  background-color: var(--sidebar-hover-bg, rgba(0, 0, 0, 0.03));
-}
-
-.sidebar__unit-item--active {
-  background-color: var(--sidebar-active-bg, #e3f2fd);
-  border-left: 3px solid var(--sidebar-active-border, #1865f2);
-  font-weight: var(--font-weight-medium, 500);
-}
-
-.sidebar__unit-item--completed {
-  opacity: 0.8;
-}
-
-.sidebar__unit-item--in-progress {
-  font-weight: var(--font-weight-medium, 500);
-}
-
-.sidebar__unit-item--not-started {
-  opacity: 0.6;
-}
-
-.sidebar__unit-item__content {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-xs, 4px);
-}
-
-.sidebar__unit-item__icon {
-  width: 20px;
-  height: 20px;
-  margin-right: var(--spacing-sm, 8px);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-md, 14px);
-}
-
-.sidebar__unit-item__title {
-  flex: 1;
-  font-size: var(--font-size-md, 14px);
-  color: var(--sidebar-text-color, #333333);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 进度条区域 */
-.sidebar__unit-item__progress {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm, 8px);
-  margin-top: var(--spacing-xs, 4px);
-}
-
-.progress-percentage {
-  font-size: var(--font-size-sm, 12px);
-  color: var(--sidebar-text-secondary, #666666);
-  min-width: 30px;
-  text-align: right;
-}
-
-/* 状态样式 */
-.sidebar__loading,
-.sidebar__error,
-.sidebar__empty {
-  padding: var(--spacing-xl, 32px) var(--spacing-md, 16px);
-  text-align: center;
-  color: var(--sidebar-text-secondary, #666666);
-  font-size: var(--font-size-md, 14px);
-}
-
-.sidebar__error {
-  color: var(--sidebar-error-color, #dc3545);
-}
-
-/* 响应式设计 */
-@media (max-width: 600px) {
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    z-index: 1000;
-    transform: translateX(-100%);
-  }
-
-  .sidebar--expanded {
-    transform: translateX(0);
-  }
-}
-
-/* 折叠状态下的样式 */
-.sidebar--collapsed .sidebar__course-info,
-.sidebar--collapsed .sidebar__unit-item__title,
-.sidebar--collapsed .sidebar__unit-item__progress {
-  display: none;
-}
-
-.sidebar--collapsed .sidebar__header {
-  justify-content: center;
-  padding: var(--spacing-md, 16px);
-}
-
-.sidebar--collapsed .sidebar__toggle-btn {
-  margin-right: 0;
-}
-
-.sidebar--collapsed .sidebar__unit-item {
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing-sm, 8px);
-}
-
-.sidebar--collapsed .sidebar__unit-item__content {
-  margin-bottom: 0;
-}

package/dist/components/Submenu/Submenu.css

@@ -1,98 +0,0 @@
-/* Submenu 根容器 */
-.submenu-container {
-    position: relative; /* 确保 submenu 面板能够相对定位 */
-    display: inline-block; /* 包裹触发器，使其不占据整行 */
-}
-
-/* Submenu 触发器 */
-.submenu-trigger {
-    /* 触发器的默认样式 */
-    cursor: pointer;
-}
-
-/* Submenu 面板 (包含所有菜单项的容器) */
-.submenu-panel {
-    position: absolute;
-    z-index: 1000; /* 确保浮动菜单在其他内容之上 */
-    background-color: var(--submenu-background-color, #fff);
-    border: var(--submenu-border, 1px solid #ddd);
-    border-radius: var(--submenu-border-radius, 4px);
-    box-shadow: var(--submenu-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
-    padding: var(--submenu-padding, 8px 0);
-    min-width: var(--submenu-min-width, 160px);
-
-    /* 初始隐藏状态 */
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(var(--submenu-transform-y, -10px)); /* 初始位移，用于动画 */
-    transition:
-        opacity var(--submenu-transition-duration, 0.2s) ease-out,
-        transform var(--submenu-transition-duration, 0.2s) ease-out,
-        visibility var(--submenu-transition-duration, 0.2s) ease-out;
-
-    /* 菜单项布局 */
-    display: flex;
-    flex-direction: column;
-    gap: var(--submenu-item-gap, 4px); /* 菜单项之间的间距 */
-}
-
-/* Submenu 面板的打开状态 */
-.submenu-panel.is-open {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0); /* 恢复到正常位置 */
-}
-
-/* Submenu 面板定位 (根据 position prop 动态添加类名) */
-.submenu-panel.position-bottom {
-    top: 100%;
-    left: 0;
-    /* 调整 transform 初始值以匹配方向 */
-    transform: translateY(var(--submenu-transform-y-bottom, 10px));
-}
-.submenu-panel.position-bottom.alignment-end {
-    left: auto;
-    right: 0;
-}
-/* 其他 position (top, left, right) 和 alignment 类名类似 */
-/* 例如: */
-.submenu-panel.position-top {
-    bottom: 100%;
-    left: 0;
-    transform: translateY(var(--submenu-transform-y-top, -10px));
-}
-/* ... 更多定位样式 ... */
-
-/* 单个菜单项 */
-.submenu-item {
-    display: flex;
-    align-items: center;
-    padding: var(--submenu-item-padding, 8px 16px);
-    color: var(--submenu-item-color, #333);
-    font-size: var(--submenu-item-font-size, 14px);
-    cursor: pointer;
-    text-decoration: none; /* 如果菜单项是链接 */
-    white-space: nowrap; /* 防止文本换行 */
-    transition: background-color var(--submenu-item-transition-duration, 0.15s) ease-in-out,
-                color var(--submenu-item-transition-duration, 0.15s) ease-in-out;
-}
-
-/* 菜单项悬停/激活状态 */
-.submenu-item:hover,
-.submenu-item.is-active { /* is-active 可用于键盘导航的焦点状态 */
-    background-color: var(--submenu-item-hover-bg-color, #f0f0f0);
-    color: var(--submenu-item-hover-color, #000);
-}
-
-/* 菜单项禁用状态 */
-.submenu-item.is-disabled {
-    color: var(--submenu-item-disabled-color, #999);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-/* 菜单项图标 (如果存在) */
-.submenu-item-icon {
-    margin-right: var(--submenu-item-icon-margin-right, 8px);
-    /* 图标大小和颜色 */
-}