taro-uno-ui 0.9.0 → 1.0.0

package/src/index.ts

@@ -14,6 +14,9 @@ export { Divider } from './components/basic/Divider';
 export type { DividerProps, DividerRef } from './components/basic/Divider/Divider.types';
 export { Typography } from './components/basic/Typography';
 export type { TypographyProps, TypographyRef } from './components/basic/Typography/Typography.types';
+export { default as Video } from './components/basic/Video';
+export type { VideoProps } from './components/basic/Video/Video.types';
+export { VideoSize, VideoVariant, VideoStatus, PlayMode, LoopMode, PlaybackRate, ControlsPosition, VideoErrorCode } from './components/basic/Video/Video.types';
 
 // 显示组件
 export { Avatar } from './components/display/Avatar';
@@ -108,8 +111,6 @@ export { NavBar } from './components/navigation/NavBar';
 export type { NavBarProps, NavBarRef } from './components/navigation/NavBar/NavBar.types';
 export { Steps } from './components/navigation/Steps';
 export type { StepsProps, StepsRef } from './components/navigation/Steps/Steps.types';
-export { Tree } from './components/navigation/Tree';
-export type { TreeProps, TreeRef } from './components/navigation/Tree/Tree.types';
 
 // 工具函数
 export * from './utils/index';
@@ -125,7 +126,16 @@ export { AppProvider, useAppContext } from './providers';
 
 // 主题系统
 export { ThemeProvider, useTheme, useThemeUtils } from './theme/ThemeProvider';
-export type { ThemeMode, ThemeConfig, ThemeColors, ThemeSpacing, ThemeTypography, ThemeBorderRadius, ThemeShadow, ThemeAnimation } from './theme/types';
+export type {
+  ThemeMode,
+  ThemeConfig,
+  ThemeColors,
+  ThemeSpacing,
+  ThemeTypography,
+  ThemeBorderRadius,
+  ThemeShadow,
+  ThemeAnimation,
+} from './theme/types';
 
 // 设计系统
 export { designSystem, DesignSystemUtils } from './theme/design-system';
@@ -143,7 +153,7 @@ export {
   getDirectionalStyles,
   getRTLValue,
   applyRTLClasses,
-  createRTLCSS
+  createRTLCSS,
 } from './utils/rtl-support';
 
 // 主题和国际化组件
@@ -160,12 +170,26 @@ export const CONFIG = {
   theme: 'light',
   platform: 'taro',
   components: {
-    basic: ['Button', 'Icon', 'Text', 'Divider', 'Typography'],
+    basic: ['Button', 'Icon', 'Text', 'Divider', 'Typography', 'Video'],
     display: ['Avatar', 'Badge', 'Card', 'List', 'Rate', 'Table', 'Tag', 'Timeline', 'Calendar', 'Carousel'],
     feedback: ['Modal', 'Message', 'Notification', 'Loading', 'Progress', 'Tooltip', 'Result'],
-    form: ['Form', 'Input', 'Select', 'DatePicker', 'TimePicker', 'Radio', 'Checkbox', 'Switch', 'Slider', 'Textarea', 'InputNumber', 'Cascader', 'Transfer'],
+    form: [
+      'Form',
+      'Input',
+      'Select',
+      'DatePicker',
+      'TimePicker',
+      'Radio',
+      'Checkbox',
+      'Switch',
+      'Slider',
+      'Textarea',
+      'InputNumber',
+      'Cascader',
+      'Transfer',
+    ],
     layout: ['Grid', 'Layout', 'Space', 'Affix', 'Row', 'Col', 'Container'],
-    navigation: ['Menu', 'Tabs', 'Pagination', 'NavBar', 'Steps', 'Tree'],
+    navigation: ['Menu', 'Tabs', 'Pagination', 'NavBar', 'Steps'],
   },
 };
 
@@ -222,6 +246,7 @@ import * as FeedbackComponents from './components/feedback';
 import * as FormComponents from './components/form';
 import * as LayoutComponents from './components/layout';
 import * as NavigationComponents from './components/navigation';
+import VideoComponent from './components/basic/Video';
 
 // 懒加载工具暂时禁用
 
@@ -233,6 +258,7 @@ export default {
   Text: BasicComponents.Text,
   Divider: BasicComponents.Divider,
   Typography: BasicComponents.Typography,
+  Video: VideoComponent,
 
   // 显示组件
   Avatar: DisplayComponents.Avatar,
@@ -247,7 +273,7 @@ export default {
   Carousel: DisplayComponents.Carousel,
 
   // 反馈组件
-  Modal: FeedbackComponents.ModalComponent,
+  Modal: FeedbackComponents.Modal,
   Message: FeedbackComponents.Message,
   Notification: FeedbackComponents.Notification,
   Loading: FeedbackComponents.Loading,
@@ -285,7 +311,6 @@ export default {
   Pagination: NavigationComponents.Pagination,
   NavBar: NavigationComponents.NavBar,
   Steps: NavigationComponents.Steps,
-  Tree: NavigationComponents.Tree,
 
   // 工具函数
   Utils: ComponentLibraryUtils,

package/src/theme/ThemeProvider.tsx

@@ -149,12 +149,12 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 
   // 切换主题
   const toggleTheme = () => {
-    setThemeMode(prev => prev === 'light' ? 'dark' : 'light');
+    setThemeMode((prev) => (prev === 'light' ? 'dark' : 'light'));
   };
 
   // 设置自定义主题
   const setCustomThemeData = (themeData: Partial<ThemeConfig>) => {
-    setCustomTheme(prev => ({
+    setCustomTheme((prev) => ({
       ...prev,
       ...themeData,
     }));
@@ -231,11 +231,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     isSystemDark,
   };
 
-  return (
-    <ThemeContext.Provider value={contextValue}>
-      {children}
-    </ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
 };
 
 export const useTheme = (): ThemeContextType => {

package/src/theme/ThemeProvider.types.ts

@@ -23,4 +23,4 @@ export interface ThemeProviderProps {
 
 // Type declarations for ThemeProvider and useTheme
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export declare const useTheme: () => ThemeContextType;
+export declare const useTheme: () => ThemeContextType;

package/src/theme/defaults.ts

@@ -185,4 +185,4 @@ export const darkTheme: ThemeConfig = {
 
     divider: '#374151',
   },
-};
+};

package/src/theme/design-system.ts

@@ -378,7 +378,7 @@ export interface DesignSystemZIndex {
   'popover-backdrop': string;
   popover: string;
   tooltip: string;
-  'max': string;
+  max: string;
 }
 
 export interface DesignSystemTransition {
@@ -559,4 +559,4 @@ export class DesignSystemUtils {
   }
 }
 
-export default DesignSystemUtils;
+export default DesignSystemUtils;

package/src/theme/design-tokens.ts

@@ -89,7 +89,7 @@ export interface DesignTokens {
       900: string;
       950: string;
     };
-    
+
     // 中性颜色
     neutral: {
       50: string;
@@ -104,7 +104,7 @@ export interface DesignTokens {
       900: string;
       950: string;
     };
-    
+
     // 语义化颜色
     text: {
       primary: string;
@@ -115,7 +115,7 @@ export interface DesignTokens {
       link: string;
       placeholder: string;
     };
-    
+
     background: {
       primary: string;
       secondary: string;
@@ -126,7 +126,7 @@ export interface DesignTokens {
       hover: string;
       active: string;
     };
-    
+
     border: {
       default: string;
       focus: string;
@@ -135,7 +135,7 @@ export interface DesignTokens {
       warning: string;
       light: string;
     };
-    
+
     shadow: {
       default: string;
       light: string;
@@ -143,7 +143,7 @@ export interface DesignTokens {
       dark: string;
       colored: string;
     };
-    
+
     // 状态颜色
     status: {
       online: string;
@@ -161,46 +161,46 @@ export interface DesignTokens {
       disabled: string;
     };
   };
-  
+
   // 间距令牌
   spacing: {
     // 基础间距
-    px: string;    // 1px
+    px: string; // 1px
     '0.5': string; // 2px
-    '1': string;   // 4px
+    '1': string; // 4px
     '1.5': string; // 6px
-    '2': string;   // 8px
+    '2': string; // 8px
     '2.5': string; // 10px
-    '3': string;   // 12px
+    '3': string; // 12px
     '3.5': string; // 14px
-    '4': string;   // 16px
-    '5': string;   // 20px
-    '6': string;   // 24px
-    '7': string;   // 28px
-    '8': string;   // 32px
-    '9': string;   // 36px
-    '10': string;  // 40px
-    '11': string;  // 44px
-    '12': string;  // 48px
-    '14': string;  // 56px
-    '16': string;  // 64px
-    '18': string;  // 72px
-    '20': string;  // 80px
-    '24': string;  // 96px
-    '28': string;  // 112px
-    '32': string;  // 128px
-    '36': string;  // 144px
-    '40': string;  // 160px
-    '44': string;  // 176px
-    '48': string;  // 192px
-    '52': string;  // 208px
-    '56': string;  // 224px
-    '60': string;  // 240px
-    '64': string;  // 256px
-    '72': string;  // 288px
-    '80': string;  // 320px
-    '96': string;  // 384px
-    
+    '4': string; // 16px
+    '5': string; // 20px
+    '6': string; // 24px
+    '7': string; // 28px
+    '8': string; // 32px
+    '9': string; // 36px
+    '10': string; // 40px
+    '11': string; // 44px
+    '12': string; // 48px
+    '14': string; // 56px
+    '16': string; // 64px
+    '18': string; // 72px
+    '20': string; // 80px
+    '24': string; // 96px
+    '28': string; // 112px
+    '32': string; // 128px
+    '36': string; // 144px
+    '40': string; // 160px
+    '44': string; // 176px
+    '48': string; // 192px
+    '52': string; // 208px
+    '56': string; // 224px
+    '60': string; // 240px
+    '64': string; // 256px
+    '72': string; // 288px
+    '80': string; // 320px
+    '96': string; // 384px
+
     // 组件间距
     component: {
       xs: string;
@@ -210,7 +210,7 @@ export interface DesignTokens {
       xl: string;
       '2xl': string;
     };
-    
+
     // 布局间距
     layout: {
       sm: string;
@@ -220,7 +220,7 @@ export interface DesignTokens {
       '2xl': string;
     };
   };
-  
+
   // 字体令牌
   typography: {
     // 字体族
@@ -231,16 +231,16 @@ export interface DesignTokens {
       display: string[];
       body: string[];
     };
-    
+
     // 字体大小
     fontSize: {
       '3xs': string; // 10px
       '2xs': string; // 12px
-      xs: string;    // 14px
-      sm: string;    // 16px
-      base: string;  // 18px
-      lg: string;    // 20px
-      xl: string;    // 24px
+      xs: string; // 14px
+      sm: string; // 16px
+      base: string; // 18px
+      lg: string; // 20px
+      xl: string; // 24px
       '2xl': string; // 30px
       '3xl': string; // 36px
       '4xl': string; // 48px
@@ -250,7 +250,7 @@ export interface DesignTokens {
       '8xl': string; // 128px
       '9xl': string; // 160px
     };
-    
+
     // 字体粗细
     fontWeight: {
       thin: string;
@@ -263,7 +263,7 @@ export interface DesignTokens {
       extrabold: string;
       black: string;
     };
-    
+
     // 行高
     lineHeight: {
       none: string;
@@ -281,7 +281,7 @@ export interface DesignTokens {
       '9': string;
       '10': string;
     };
-    
+
     // 字母间距
     letterSpacing: {
       tighter: string;
@@ -291,7 +291,7 @@ export interface DesignTokens {
       wider: string;
       widest: string;
     };
-    
+
     // 段落间距
     paragraphSpacing: {
       none: string;
@@ -301,7 +301,7 @@ export interface DesignTokens {
       loose: string;
     };
   };
-  
+
   // 边框令牌
   borderRadius: {
     none: string;
@@ -313,7 +313,7 @@ export interface DesignTokens {
     '2xl': string;
     '3xl': string;
     full: string;
-    
+
     // 组件专用
     button: {
       sm: string;
@@ -321,13 +321,13 @@ export interface DesignTokens {
       lg: string;
       xl: string;
     };
-    
+
     input: {
       sm: string;
       md: string;
       lg: string;
     };
-    
+
     card: {
       sm: string;
       md: string;
@@ -337,7 +337,7 @@ export interface DesignTokens {
     modal: string;
     dropdown: string;
   };
-  
+
   // 阴影令牌
   boxShadow: {
     none: string;
@@ -350,25 +350,25 @@ export interface DesignTokens {
     '3xl': string;
     inner: string;
     colored: string;
-    
+
     // 组件专用
     button: {
       sm: string;
       md: string;
       lg: string;
     };
-    
+
     card: {
       sm: string;
       md: string;
       lg: string;
     };
-    
+
     modal: string;
     tooltip: string;
     dropdown: string;
   };
-  
+
   // 动画令牌
   animation: {
     // 持续时间
@@ -382,7 +382,7 @@ export interface DesignTokens {
       '700': string;
       '1000': string;
     };
-    
+
     // 缓动函数
     easing: {
       linear: string;
@@ -415,7 +415,7 @@ export interface DesignTokens {
       'in-out-circ': string;
       'in-out-back': string;
     };
-    
+
     // 延迟
     delay: {
       '75': string;
@@ -428,7 +428,7 @@ export interface DesignTokens {
       '1000': string;
     };
   };
-  
+
   // 断点令牌
   breakpoints: {
     xs: string;
@@ -440,7 +440,7 @@ export interface DesignTokens {
     '3xl': string;
     '4xl': string;
   };
-  
+
   // Z-index 令牌
   zIndex: {
     hide: string;
@@ -454,9 +454,9 @@ export interface DesignTokens {
     'popover-backdrop': string;
     popover: string;
     tooltip: string;
-    'max': string;
+    max: string;
   };
-  
+
   // 过渡令牌
   transition: {
     none: string;
@@ -466,7 +466,7 @@ export interface DesignTokens {
     opacity: string;
     shadow: string;
     transform: string;
-    
+
     // 组件专用
     button: string;
     input: string;
@@ -474,7 +474,7 @@ export interface DesignTokens {
     tooltip: string;
     dropdown: string;
   };
-  
+
   // 混合模式
   blendMode: {
     normal: string;
@@ -494,7 +494,7 @@ export interface DesignTokens {
     color: string;
     luminosity: string;
   };
-  
+
   // 光标
   cursor: {
     auto: string;
@@ -504,8 +504,8 @@ export interface DesignTokens {
     text: string;
     move: string;
     'not-allowed': string;
-    'grab': string;
-    'grabbing': string;
+    grab: string;
+    grabbing: string;
     'zoom-in': string;
     'zoom-out': string;
   };
@@ -718,22 +718,8 @@ export const defaultDesignTokens: DesignTokens = {
         'Arial',
         'sans-serif',
       ],
-      serif: [
-        'Georgia',
-        'Cambria',
-        'Times New Roman',
-        'Times',
-        'serif',
-      ],
-      mono: [
-        'Fira Code',
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        'Liberation Mono',
-        'Courier New',
-        'monospace',
-      ],
+      serif: ['Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      mono: ['Fira Code', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'],
       display: [
         'Inter',
         '-apple-system',
@@ -945,7 +931,7 @@ export const defaultDesignTokens: DesignTokens = {
     'popover-backdrop': '1060',
     popover: '1070',
     tooltip: '1080',
-    'max': '9999',
+    max: '9999',
   },
   transition: {
     none: 'none',
@@ -1005,7 +991,7 @@ export class DesignTokenGenerator {
   // 生成CSS变量
   public generateCSSVariables(): string {
     let css = ':root {\n';
-    
+
     // 递归生成变量
     const generateSection = (obj: any, prefix: string = '') => {
       Object.entries(obj).forEach(([key, value]) => {
@@ -1017,23 +1003,23 @@ export class DesignTokenGenerator {
         }
       });
     };
-    
+
     generateSection(this.tokens);
     css += '}\n';
-    
+
     return css;
   }
 
   // 生成暗色主题CSS变量
   public generateDarkThemeCSSVariables(): string {
     const darkColors = this.generateDarkColors();
-    
+
     let css = '[data-theme="dark"] {\n';
     Object.entries(darkColors).forEach(([key, value]) => {
       css += `  --${key}: ${value};\n`;
     });
     css += '}\n';
-    
+
     return css;
   }
 
@@ -1046,7 +1032,7 @@ export class DesignTokenGenerator {
       'colors-text-disabled': '#6b7280',
       'colors-text-inverse': '#111827',
       'colors-text-placeholder': '#6b7280',
-      
+
       // 背景颜色
       'colors-background-primary': '#111827',
       'colors-background-secondary': '#1f2937',
@@ -1056,11 +1042,11 @@ export class DesignTokenGenerator {
       'colors-background-mask': 'rgba(0, 0, 0, 0.8)',
       'colors-background-hover': '#374151',
       'colors-background-active': '#4b5563',
-      
+
       // 边框颜色
       'colors-border-default': '#374151',
       'colors-border-light': '#4b5563',
-      
+
       // 阴影颜色
       'colors-shadow-default': 'rgba(0, 0, 0, 0.3)',
       'colors-shadow-light': 'rgba(0, 0, 0, 0.1)',
@@ -1073,11 +1059,11 @@ export class DesignTokenGenerator {
   public getToken(path: string): any {
     const keys = path.split('.');
     let value: any = this.tokens;
-    
+
     for (const key of keys) {
       value = value?.[key];
     }
-    
+
     return value;
   }
 
@@ -1133,4 +1119,4 @@ export const generateDarkThemeCSS = (tokens?: Partial<DesignTokens>): string =>
   return generator.generateDarkThemeCSSVariables();
 };
 
-export default DesignTokenGenerator;
+export default DesignTokenGenerator;

package/src/theme/generated/dark-theme.scss

@@ -4,7 +4,7 @@
  * 生成时间: 2025-11-13T09:32:00.011Z
  */
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --colors-primary-50: #f0f9ff;
   --colors-primary-100: #e0f2fe;
   --colors-primary-200: #bae6fd;