taro-uno-ui 0.9.0-beta → 1.0.0

package/dist/theme/design-tokens.d.ts

@@ -0,0 +1,459 @@
+/**
+ * 设计令牌系统
+ * 统一的设计变量和CSS自定义属性
+ * 提供类型安全的设计令牌管理
+ */
+export interface DesignTokens {
+    colors: {
+        primary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        secondary: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+            inverse: string;
+            link: string;
+            placeholder: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            card: string;
+            input: string;
+            mask: string;
+            hover: string;
+            active: string;
+        };
+        border: {
+            default: string;
+            focus: string;
+            error: string;
+            success: string;
+            warning: string;
+            light: string;
+        };
+        shadow: {
+            default: string;
+            light: string;
+            medium: string;
+            dark: string;
+            colored: string;
+        };
+        status: {
+            online: string;
+            offline: string;
+            busy: string;
+            away: string;
+        };
+        interactive: {
+            hover: string;
+            active: string;
+            focus: string;
+            selected: string;
+            disabled: string;
+        };
+    };
+    spacing: {
+        px: string;
+        '0.5': string;
+        '1': string;
+        '1.5': string;
+        '2': string;
+        '2.5': string;
+        '3': string;
+        '3.5': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '14': string;
+        '16': string;
+        '18': string;
+        '20': string;
+        '24': string;
+        '28': string;
+        '32': string;
+        '36': string;
+        '40': string;
+        '44': string;
+        '48': string;
+        '52': string;
+        '56': string;
+        '60': string;
+        '64': string;
+        '72': string;
+        '80': string;
+        '96': string;
+        component: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+        layout: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+        };
+    };
+    typography: {
+        fontFamily: {
+            sans: string[];
+            serif: string[];
+            mono: string[];
+            display: string[];
+            body: string[];
+        };
+        fontSize: {
+            '3xs': string;
+            '2xs': string;
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+            '5xl': string;
+            '6xl': string;
+            '7xl': string;
+            '8xl': string;
+            '9xl': string;
+        };
+        fontWeight: {
+            thin: string;
+            extralight: string;
+            light: string;
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+            extrabold: string;
+            black: string;
+        };
+        lineHeight: {
+            none: string;
+            tight: string;
+            snug: string;
+            normal: string;
+            relaxed: string;
+            loose: string;
+            '3': string;
+            '4': string;
+            '5': string;
+            '6': string;
+            '7': string;
+            '8': string;
+            '9': string;
+            '10': string;
+        };
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+        paragraphSpacing: {
+            none: string;
+            tight: string;
+            normal: string;
+            relaxed: string;
+            loose: string;
+        };
+    };
+    borderRadius: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+        button: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        input: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        card: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        modal: string;
+        dropdown: string;
+    };
+    boxShadow: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '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: {
+        duration: {
+            '75': string;
+            '100': string;
+            '150': string;
+            '200': string;
+            '300': string;
+            '500': string;
+            '700': string;
+            '1000': string;
+        };
+        easing: {
+            linear: string;
+            ease: string;
+            easeIn: string;
+            easeOut: string;
+            easeInOut: string;
+            'in-quad': string;
+            'in-cubic': string;
+            'in-quart': string;
+            'in-quint': string;
+            'in-sine': string;
+            'in-expo': string;
+            'in-circ': string;
+            'in-back': string;
+            'out-quad': string;
+            'out-cubic': string;
+            'out-quart': string;
+            'out-quint': string;
+            'out-sine': string;
+            'out-expo': string;
+            'out-circ': string;
+            'out-back': string;
+            'in-out-quad': string;
+            'in-out-cubic': string;
+            'in-out-quart': string;
+            'in-out-quint': string;
+            'in-out-sine': string;
+            'in-out-expo': string;
+            'in-out-circ': string;
+            'in-out-back': string;
+        };
+        delay: {
+            '75': string;
+            '100': string;
+            '150': string;
+            '200': string;
+            '300': string;
+            '500': string;
+            '700': string;
+            '1000': string;
+        };
+    };
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    zIndex: {
+        hide: string;
+        auto: string;
+        base: string;
+        dropdown: string;
+        sticky: string;
+        fixed: string;
+        'modal-backdrop': string;
+        modal: string;
+        'popover-backdrop': string;
+        popover: string;
+        tooltip: string;
+        max: string;
+    };
+    transition: {
+        none: string;
+        all: string;
+        common: string;
+        colors: string;
+        opacity: string;
+        shadow: string;
+        transform: string;
+        button: string;
+        input: string;
+        modal: string;
+        tooltip: string;
+        dropdown: string;
+    };
+    blendMode: {
+        normal: string;
+        multiply: string;
+        screen: string;
+        overlay: string;
+        darken: string;
+        lighten: string;
+        'color-dodge': string;
+        'color-burn': string;
+        hardlight: string;
+        softlight: string;
+        difference: string;
+        exclusion: string;
+        hue: string;
+        saturation: string;
+        color: string;
+        luminosity: string;
+    };
+    cursor: {
+        auto: string;
+        default: string;
+        pointer: string;
+        wait: string;
+        text: string;
+        move: string;
+        'not-allowed': string;
+        grab: string;
+        grabbing: string;
+        'zoom-in': string;
+        'zoom-out': string;
+    };
+}
+export declare const defaultDesignTokens: DesignTokens;
+export declare class DesignTokenGenerator {
+    private tokens;
+    constructor(tokens?: DesignTokens);
+    generateCSSVariables(): string;
+    generateDarkThemeCSSVariables(): string;
+    private generateDarkColors;
+    getToken(path: string): any;
+    updateToken(path: string, value: any): void;
+    toCSSCustomProperty(path: string): string;
+    fromCSSCustomProperty(property: string): string;
+}
+export declare const createDesignTokens: (tokens?: Partial<DesignTokens>) => DesignTokens;
+export declare const generateDesignTokenCSS: (tokens?: Partial<DesignTokens>) => string;
+export declare const generateDarkThemeCSS: (tokens?: Partial<DesignTokens>) => string;
+export default DesignTokenGenerator;

package/dist/theme/index.d.ts

@@ -0,0 +1,187 @@
+/**
+ * Taro-Uno UI 设计系统
+ * 提供完整的设计令牌、主题管理、无障碍访问、响应式设计和动画系统
+ */
+import { ColorUtils, ResponsiveUtils, ThemeValidator } from './utils';
+import type { ThemeProvider, useTheme } from './ThemeProvider.types';
+export type { ThemeMode, ThemeConfig, ThemeColors, ThemeSpacing, ThemeTypography, ThemeBorderRadius, ThemeShadow, ThemeAnimation, } from './types';
+export { defaultTheme, darkTheme } from './defaults';
+export { default as themeUtils, ColorUtils, ResponsiveUtils, ThemeValidator, ThemePresets } from './utils';
+export { default as CSSVariableGenerator, createCSSVariables, generateCSSVariablesString } from './variables';
+export type { CSSVariables, VariableInheritance, VariableGroup } from './variables';
+export { default as createStyleUtils, generateStyles, createStyles, styleUtils } from './styles';
+export type { StyleUtils as StyleUtilsType } from './styles';
+export { default as DesignTokenGenerator, createDesignTokens, generateDesignTokenCSS, generateDarkThemeCSS, } from './design-tokens';
+export type { DesignTokens } from './design-tokens';
+export { ThemeProvider, useTheme };
+export * from './types';
+export * from './defaults';
+export * from './utils';
+export * from './variables';
+export * from './styles';
+export * from './design-tokens';
+export declare const themes: {
+    default: import("./types").ThemeConfig;
+    dark: import("./types").ThemeConfig;
+};
+export declare const themeTools: {
+    color: typeof ColorUtils;
+    responsive: typeof ResponsiveUtils;
+    validator: typeof ThemeValidator;
+    presets: {
+        default: {
+            name: string;
+            description: string;
+            colors: {
+                primary: string;
+                secondary: string;
+                success: string;
+                warning: string;
+                error: string;
+                info: string;
+            };
+        };
+        purple: {
+            name: string;
+            description: string;
+            colors: {
+                primary: string;
+                secondary: string;
+                success: string;
+                warning: string;
+                error: string;
+                info: string;
+            };
+        };
+        green: {
+            name: string;
+            description: string;
+            colors: {
+                primary: string;
+                secondary: string;
+                success: string;
+                warning: string;
+                error: string;
+                info: string;
+            };
+        };
+        orange: {
+            name: string;
+            description: string;
+            colors: {
+                primary: string;
+                secondary: string;
+                success: string;
+                warning: string;
+                error: string;
+                info: string;
+            };
+        };
+        pink: {
+            name: string;
+            description: string;
+            colors: {
+                primary: string;
+                secondary: string;
+                success: string;
+                warning: string;
+                error: string;
+                info: string;
+            };
+        };
+    };
+    css: {
+        createVariables: (theme: import("./types").ThemeConfig) => import("./variables").CSSVariables;
+        generateString: (theme: import("./types").ThemeConfig) => string;
+    };
+    styles: {
+        createUtils: (theme: import("./types").ThemeConfig) => import("./styles").StyleUtils;
+        generateStyles: (theme: import("./types").ThemeConfig) => string;
+        createStyles: (styles: Record<string, any>) => Record<string, any>;
+    };
+};
+declare const _default: {
+    themes: {
+        default: import("./types").ThemeConfig;
+        dark: import("./types").ThemeConfig;
+    };
+    themeTools: {
+        color: typeof ColorUtils;
+        responsive: typeof ResponsiveUtils;
+        validator: typeof ThemeValidator;
+        presets: {
+            default: {
+                name: string;
+                description: string;
+                colors: {
+                    primary: string;
+                    secondary: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+            purple: {
+                name: string;
+                description: string;
+                colors: {
+                    primary: string;
+                    secondary: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+            green: {
+                name: string;
+                description: string;
+                colors: {
+                    primary: string;
+                    secondary: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+            orange: {
+                name: string;
+                description: string;
+                colors: {
+                    primary: string;
+                    secondary: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+            pink: {
+                name: string;
+                description: string;
+                colors: {
+                    primary: string;
+                    secondary: string;
+                    success: string;
+                    warning: string;
+                    error: string;
+                    info: string;
+                };
+            };
+        };
+        css: {
+            createVariables: (theme: import("./types").ThemeConfig) => import("./variables").CSSVariables;
+            generateString: (theme: import("./types").ThemeConfig) => string;
+        };
+        styles: {
+            createUtils: (theme: import("./types").ThemeConfig) => import("./styles").StyleUtils;
+            generateStyles: (theme: import("./types").ThemeConfig) => string;
+            createStyles: (styles: Record<string, any>) => Record<string, any>;
+        };
+    };
+    defaultTheme: import("./types").ThemeConfig;
+    darkTheme: import("./types").ThemeConfig;
+};
+export default _default;

package/dist/theme/responsive.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 断点配置
+ */
+export declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+};
+/**
+ * 屏幕尺寸类型
+ */
+export interface ScreenSize {
+    width: number;
+    height: number;
+}
+/**
+ * 响应式上下文类型
+ */
+interface ResponsiveContextType {
+    screenSize: ScreenSize;
+    currentBreakpoint: keyof typeof breakpoints;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    matches: (breakpoint: keyof typeof breakpoints) => boolean;
+    matchesMinWidth: (width: number) => boolean;
+    matchesMaxWidth: (width: number) => boolean;
+    getResponsiveValue: <T>(values: Partial<Record<string, T>>, defaultValue: T) => T;
+}
+/**
+ * 响应式提供者组件
+ */
+export declare function ResponsiveProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 使用响应式上下文的 Hook
+ */
+export declare function useResponsive(): ResponsiveContextType;
+/**
+ * 响应式值 Hook
+ */
+export declare function useResponsiveValue<T>(values: Partial<Record<string, T>>, defaultValue: T): T;
+/**
+ * 断点 Hook
+ */
+export declare function useBreakpoint(): keyof typeof breakpoints;
+/**
+ * 屏幕尺寸 Hook
+ */
+export declare function useScreenSize(): ScreenSize;
+/**
+ * 设备类型 Hook
+ */
+export declare function useDeviceType(): {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+};
+export default ResponsiveProvider;