taro-uno-ui 0.9.0-beta

package/src/theme/generated/tokens.scss

@@ -0,0 +1,320 @@
+/**
+ * 设计令牌 SCSS 变量
+ * 自动生成，请勿手动修改
+ * 生成时间: 2025-11-13T09:32:00.008Z
+ */
+
+// ==================== 颜色令牌 ====================
+$colors-primary-50: #f0f9ff;
+$colors-primary-100: #e0f2fe;
+$colors-primary-200: #bae6fd;
+$colors-primary-300: #7dd3fc;
+$colors-primary-400: #38bdf8;
+$colors-primary-500: #0ea5e9;
+$colors-primary-600: #0284c7;
+$colors-primary-700: #0369a1;
+$colors-primary-800: #075985;
+$colors-primary-900: #0c4a6e;
+$colors-primary-950: #082f49;
+$colors-secondary-50: #fafafa;
+$colors-secondary-100: #f4f4f5;
+$colors-secondary-200: #e4e4e7;
+$colors-secondary-300: #d4d4d8;
+$colors-secondary-400: #a1a1aa;
+$colors-secondary-500: #71717a;
+$colors-secondary-600: #52525b;
+$colors-secondary-700: #3f3f46;
+$colors-secondary-800: #27272a;
+$colors-secondary-900: #18181b;
+$colors-secondary-950: #09090b;
+$colors-success-50: #f0fdf4;
+$colors-success-100: #dcfce7;
+$colors-success-200: #bbf7d0;
+$colors-success-300: #86efac;
+$colors-success-400: #4ade80;
+$colors-success-500: #22c55e;
+$colors-success-600: #16a34a;
+$colors-success-700: #15803d;
+$colors-success-800: #166534;
+$colors-success-900: #14532d;
+$colors-success-950: #052e16;
+$colors-warning-50: #fffbeb;
+$colors-warning-100: #fef3c7;
+$colors-warning-200: #fde68a;
+$colors-warning-300: #fcd34d;
+$colors-warning-400: #fbbf24;
+$colors-warning-500: #f59e0b;
+$colors-warning-600: #d97706;
+$colors-warning-700: #b45309;
+$colors-warning-800: #92400e;
+$colors-warning-900: #78350f;
+$colors-warning-950: #451a03;
+$colors-error-50: #fef2f2;
+$colors-error-100: #fee2e2;
+$colors-error-200: #fecaca;
+$colors-error-300: #fca5a5;
+$colors-error-400: #f87171;
+$colors-error-500: #ef4444;
+$colors-error-600: #dc2626;
+$colors-error-700: #b91c1c;
+$colors-error-800: #991b1b;
+$colors-error-900: #7f1d1d;
+$colors-error-950: #450a0a;
+$colors-info-50: #eff6ff;
+$colors-info-100: #dbeafe;
+$colors-info-200: #bfdbfe;
+$colors-info-300: #93c5fd;
+$colors-info-400: #60a5fa;
+$colors-info-500: #3b82f6;
+$colors-info-600: #2563eb;
+$colors-info-700: #1d4ed8;
+$colors-info-800: #1e40af;
+$colors-info-900: #1e3a8a;
+$colors-info-950: #172554;
+$colors-neutral-50: #fafafa;
+$colors-neutral-100: #f4f4f5;
+$colors-neutral-200: #e4e4e7;
+$colors-neutral-300: #d4d4d8;
+$colors-neutral-400: #a1a1aa;
+$colors-neutral-500: #71717a;
+$colors-neutral-600: #52525b;
+$colors-neutral-700: #3f3f46;
+$colors-neutral-800: #27272a;
+$colors-neutral-900: #18181b;
+$colors-neutral-950: #09090b;
+$colors-text-primary: #111827;
+$colors-text-secondary: #6b7280;
+$colors-text-tertiary: #4b5563;
+$colors-text-disabled: #9ca3af;
+$colors-text-inverse: #ffffff;
+$colors-text-link: #0ea5e9;
+$colors-text-placeholder: #9ca3af;
+$colors-background-primary: #ffffff;
+$colors-background-secondary: #f9fafb;
+$colors-background-tertiary: #f3f4f6;
+$colors-background-card: #ffffff;
+$colors-background-input: #f9fafb;
+$colors-background-mask: rgba(0, 0, 0, 0.5);
+$colors-background-hover: #f9fafb;
+$colors-background-active: #f3f4f6;
+$colors-border-default: #e5e7eb;
+$colors-border-light: #f3f4f6;
+$colors-border-focus: #0ea5e9;
+$colors-border-error: #ef4444;
+$colors-border-success: #22c55e;
+$colors-border-warning: #f59e0b;
+$colors-shadow-default: rgba(0, 0, 0, 0.1);
+$colors-shadow-light: rgba(0, 0, 0, 0.05);
+$colors-shadow-medium: rgba(0, 0, 0, 0.15);
+$colors-shadow-dark: rgba(0, 0, 0, 0.25);
+$colors-shadow-colored: rgba(14, 165, 233, 0.15);
+$colors-status-online: #22c55e;
+$colors-status-offline: #6b7280;
+$colors-status-busy: #ef4444;
+$colors-status-away: #f59e0b;
+$colors-interactive-hover: rgba(0, 0, 0, 0.05);
+$colors-interactive-active: rgba(0, 0, 0, 0.1);
+$colors-interactive-focus: rgba(59, 130, 246, 0.1);
+$colors-interactive-selected: rgba(59, 130, 246, 0.2);
+$colors-interactive-disabled: rgba(0, 0, 0, 0.3);
+
+// ==================== 间距令牌 ====================
+$spacing-0: 0;
+$spacing-1: 4px;
+$spacing-2: 8px;
+$spacing-3: 12px;
+$spacing-4: 16px;
+$spacing-5: 20px;
+$spacing-6: 24px;
+$spacing-7: 28px;
+$spacing-8: 32px;
+$spacing-9: 36px;
+$spacing-10: 40px;
+$spacing-11: 44px;
+$spacing-12: 48px;
+$spacing-14: 56px;
+$spacing-16: 64px;
+$spacing-18: 72px;
+$spacing-20: 80px;
+$spacing-24: 96px;
+$spacing-28: 112px;
+$spacing-32: 128px;
+$spacing-36: 144px;
+$spacing-40: 160px;
+$spacing-44: 176px;
+$spacing-48: 192px;
+$spacing-52: 208px;
+$spacing-56: 224px;
+$spacing-60: 240px;
+$spacing-64: 256px;
+$spacing-72: 288px;
+$spacing-80: 320px;
+$spacing-96: 384px;
+$spacing-px: 1px;
+$spacing-0.5: 2px;
+$spacing-1.5: 6px;
+$spacing-2.5: 10px;
+$spacing-3.5: 14px;
+$spacing-component-xs: 8px;
+$spacing-component-sm: 12px;
+$spacing-component-md: 16px;
+$spacing-component-lg: 24px;
+$spacing-component-xl: 32px;
+$spacing-component-2xl: 48px;
+$spacing-layout-sm: 16px;
+$spacing-layout-md: 24px;
+$spacing-layout-lg: 32px;
+$spacing-layout-xl: 48px;
+$spacing-layout-2xl: 64px;
+$spacing-container-sm: 640px;
+$spacing-container-md: 768px;
+$spacing-container-lg: 1024px;
+$spacing-container-xl: 1280px;
+$spacing-container-2xl: 1536px;
+
+// ==================== 字体令牌 ====================
+$typography-fontFamily-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+$typography-fontFamily-serif: Georgia, Cambria, Times New Roman, Times, serif;
+$typography-fontFamily-mono: Fira Code, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+$typography-fontFamily-display: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+$typography-fontFamily-body: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+$typography-fontSize-3xs: 10px;
+$typography-fontSize-2xs: 12px;
+$typography-fontSize-xs: 14px;
+$typography-fontSize-sm: 16px;
+$typography-fontSize-base: 18px;
+$typography-fontSize-lg: 20px;
+$typography-fontSize-xl: 24px;
+$typography-fontSize-2xl: 30px;
+$typography-fontSize-3xl: 36px;
+$typography-fontSize-4xl: 48px;
+$typography-fontSize-5xl: 60px;
+$typography-fontSize-6xl: 72px;
+$typography-fontSize-7xl: 96px;
+$typography-fontSize-8xl: 128px;
+$typography-fontSize-9xl: 160px;
+$typography-fontWeight-thin: 100;
+$typography-fontWeight-extralight: 200;
+$typography-fontWeight-light: 300;
+$typography-fontWeight-normal: 400;
+$typography-fontWeight-medium: 500;
+$typography-fontWeight-semibold: 600;
+$typography-fontWeight-bold: 700;
+$typography-fontWeight-extrabold: 800;
+$typography-fontWeight-black: 900;
+$typography-lineHeight-3: 1.75;
+$typography-lineHeight-4: 2;
+$typography-lineHeight-5: 2.25;
+$typography-lineHeight-6: 2.5;
+$typography-lineHeight-7: 2.75;
+$typography-lineHeight-8: 3;
+$typography-lineHeight-9: 3.25;
+$typography-lineHeight-10: 3.5;
+$typography-lineHeight-none: 1;
+$typography-lineHeight-tight: 1.25;
+$typography-lineHeight-snug: 1.375;
+$typography-lineHeight-normal: 1.5;
+$typography-lineHeight-relaxed: 1.625;
+$typography-lineHeight-loose: 2;
+$typography-letterSpacing-tighter: -0.05em;
+$typography-letterSpacing-tight: -0.025em;
+$typography-letterSpacing-normal: 0;
+$typography-letterSpacing-wide: 0.025em;
+$typography-letterSpacing-wider: 0.05em;
+$typography-letterSpacing-widest: 0.1em;
+$typography-paragraphSpacing-none: 0;
+$typography-paragraphSpacing-tight: 0.5rem;
+$typography-paragraphSpacing-normal: 1rem;
+$typography-paragraphSpacing-relaxed: 1.5rem;
+$typography-paragraphSpacing-loose: 2rem;
+
+// ==================== 效果令牌 ====================
+$effects-borderRadius-none: 0;
+$effects-borderRadius-xs: 2px;
+$effects-borderRadius-sm: 4px;
+$effects-borderRadius-md: 8px;
+$effects-borderRadius-lg: 12px;
+$effects-borderRadius-xl: 16px;
+$effects-borderRadius-2xl: 20px;
+$effects-borderRadius-3xl: 24px;
+$effects-borderRadius-full: 9999px;
+$effects-borderRadius-button-sm: 6px;
+$effects-borderRadius-button-md: 8px;
+$effects-borderRadius-button-lg: 12px;
+$effects-borderRadius-button-xl: 16px;
+$effects-borderRadius-input-sm: 6px;
+$effects-borderRadius-input-md: 8px;
+$effects-borderRadius-input-lg: 12px;
+$effects-borderRadius-card-sm: 8px;
+$effects-borderRadius-card-md: 12px;
+$effects-borderRadius-card-lg: 16px;
+$effects-borderRadius-modal: 12px;
+$effects-borderRadius-dropdown: 8px;
+$effects-boxShadow-none: none;
+$effects-boxShadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$effects-boxShadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$effects-boxShadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$effects-boxShadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$effects-boxShadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
+$effects-boxShadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+$effects-boxShadow-colored: 0 10px 15px -3px rgba(14, 165, 233, 0.15);
+$effects-boxShadow-button-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$effects-boxShadow-button-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-button-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-card-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$effects-boxShadow-card-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$effects-boxShadow-card-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$effects-boxShadow-tooltip: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-boxShadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$effects-animation-duration-75: 75ms;
+$effects-animation-duration-100: 100ms;
+$effects-animation-duration-150: 150ms;
+$effects-animation-duration-200: 200ms;
+$effects-animation-duration-300: 300ms;
+$effects-animation-duration-500: 500ms;
+$effects-animation-duration-700: 700ms;
+$effects-animation-duration-1000: 1000ms;
+$effects-animation-easing-linear: linear;
+$effects-animation-easing-ease: ease;
+$effects-animation-easing-easeIn: ease-in;
+$effects-animation-easing-easeOut: ease-out;
+$effects-animation-easing-easeInOut: ease-in-out;
+$effects-animation-easing-in-quad: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$effects-animation-easing-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+$effects-animation-easing-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$effects-animation-easing-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$effects-animation-easing-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$effects-animation-easing-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$effects-animation-delay-75: 75ms;
+$effects-animation-delay-100: 100ms;
+$effects-animation-delay-150: 150ms;
+$effects-animation-delay-200: 200ms;
+$effects-animation-delay-300: 300ms;
+$effects-animation-delay-500: 500ms;
+$effects-transition-none: none;
+$effects-transition-all: all 150ms ease-in-out;
+$effects-transition-common: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+$effects-transition-colors: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
+$effects-transition-opacity: opacity 150ms ease-in-out;
+$effects-transition-shadow: box-shadow 150ms ease-in-out;
+$effects-transition-transform: transform 150ms ease-in-out;
+$effects-transition-button: all 150ms ease-in-out;
+$effects-transition-input: all 150ms ease-in-out;
+$effects-transition-modal: all 300ms ease-in-out;
+$effects-transition-tooltip: all 150ms ease-in-out;
+$effects-transition-dropdown: all 150ms ease-in-out;
+$effects-zIndex-hide: -1;
+$effects-zIndex-auto: auto;
+$effects-zIndex-base: 0;
+$effects-zIndex-dropdown: 1000;
+$effects-zIndex-sticky: 1020;
+$effects-zIndex-fixed: 1030;
+$effects-zIndex-modal-backdrop: 1040;
+$effects-zIndex-modal: 1050;
+$effects-zIndex-popover-backdrop: 1060;
+$effects-zIndex-popover: 1070;
+$effects-zIndex-tooltip: 1080;
+$effects-zIndex-max: 9999;

package/src/theme/index.ts

@@ -0,0 +1,120 @@
+/**
+ * Taro-Uno UI 设计系统
+ * 提供完整的设计令牌、主题管理、无障碍访问、响应式设计和动画系统
+ */
+
+// 导入需要的模块
+import { defaultTheme, darkTheme } from './defaults';
+import { ColorUtils, ResponsiveUtils, ThemeValidator, ThemePresets } from './utils';
+import { createCSSVariables, generateCSSVariablesString } from './variables';
+import { createStyleUtils, generateStyles, createStyles } from './styles';
+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';
+
+// 导出CSS变量系统
+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';
+
+// 导出ThemeProvider
+export { ThemeProvider, useTheme };
+
+// 主题快捷导出
+export * from './types';
+export * from './defaults';
+export * from './utils';
+export * from './variables';
+export * from './styles';
+export * from './design-tokens';
+
+// 主题预设
+export const themes = {
+  default: defaultTheme,
+  dark: darkTheme,
+};
+
+// 主题工具函数集合
+export const themeTools = {
+  // 颜色工具
+  color: ColorUtils,
+
+  // 响应式工具
+  responsive: ResponsiveUtils,
+
+  // 验证工具
+  validator: ThemeValidator,
+
+  // 预设主题
+  presets: ThemePresets,
+
+  // CSS变量生成
+  css: {
+    createVariables: createCSSVariables,
+    generateString: generateCSSVariablesString,
+  },
+
+  // 样式工具
+  styles: {
+    createUtils: createStyleUtils,
+    generateStyles: generateStyles,
+    createStyles: createStyles,
+  },
+};
+
+// 默认导出
+export default {
+  themes,
+  themeTools,
+  defaultTheme,
+  darkTheme,
+};

package/src/theme/responsive.tsx

@@ -0,0 +1,193 @@
+import { createContext, useContext, useState, useEffect, useCallback } from 'react';
+
+/**
+ * 断点配置
+ */
+export const breakpoints = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+/**
+ * 断点顺序
+ */
+const breakpointOrder = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
+
+/**
+ * 屏幕尺寸类型
+ */
+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;
+}
+
+/**
+ * 响应式上下文
+ */
+const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);
+
+/**
+ * 响应式提供者组件
+ */
+export function ResponsiveProvider({ children }: { children: React.ReactNode }) {
+  const [screenSize, setScreenSize] = useState<ScreenSize>({
+    width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+    height: typeof window !== 'undefined' ? window.innerHeight : 768,
+  });
+
+  // 更新屏幕尺寸
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // 获取当前断点
+  const getCurrentBreakpoint = useCallback(() => {
+    const width = screenSize.width;
+    let currentBreakpoint: keyof typeof breakpoints = 'xs';
+
+    for (const [key, value] of Object.entries(breakpoints)) {
+      if (width >= value) {
+        currentBreakpoint = key as keyof typeof breakpoints;
+      }
+    }
+
+    return currentBreakpoint;
+  }, [screenSize.width]);
+
+  const currentBreakpoint = getCurrentBreakpoint();
+
+  // 响应式判断
+  const isMobile = screenSize.width < breakpoints.md;
+  const isTablet = screenSize.width >= breakpoints.md && screenSize.width < breakpoints.lg;
+  const isDesktop = screenSize.width >= breakpoints.lg;
+
+  // 断点匹配检查
+  const matches = useCallback((breakpoint: keyof typeof breakpoints) => {
+    return screenSize.width >= breakpoints[breakpoint];
+  }, [screenSize.width]);
+
+  const matchesMinWidth = useCallback((width: number) => {
+    return screenSize.width >= width;
+  }, [screenSize.width]);
+
+  const matchesMaxWidth = useCallback((width: number) => {
+    return screenSize.width <= width;
+  }, [screenSize.width]);
+
+  // 获取响应式值
+  const getResponsiveValue = useCallback(<T,>(
+    values: Partial<Record<string, T>>,
+    defaultValue: T
+  ): T => {
+    const currentIndex = breakpointOrder.indexOf(currentBreakpoint as typeof breakpointOrder[number]);
+    
+    // 从当前断点开始，向上查找第一个匹配的值
+    for (let i = currentIndex; i >= 0; i--) {
+      const breakpoint = breakpointOrder[i];
+      if (values[breakpoint as keyof typeof values] !== undefined) {
+        return values[breakpoint as keyof typeof values] as T;
+      }
+    }
+    
+    return defaultValue;
+  }, [currentBreakpoint]);
+
+  const contextValue: ResponsiveContextType = {
+    screenSize,
+    currentBreakpoint,
+    isMobile,
+    isTablet,
+    isDesktop,
+    matches,
+    matchesMinWidth,
+    matchesMaxWidth,
+    getResponsiveValue,
+  };
+
+  return (
+    <ResponsiveContext.Provider value={contextValue}>
+      {children}
+    </ResponsiveContext.Provider>
+  );
+}
+
+/**
+ * 使用响应式上下文的 Hook
+ */
+export function useResponsive() {
+  const context = useContext(ResponsiveContext);
+  if (!context) {
+    throw new Error('useResponsive must be used within a ResponsiveProvider');
+  }
+  return context;
+}
+
+/**
+ * 响应式值 Hook
+ */
+export function useResponsiveValue<T>(
+  values: Partial<Record<string, T>>,
+  defaultValue: T
+): T {
+  const { getResponsiveValue } = useResponsive();
+  return getResponsiveValue(values, defaultValue);
+}
+
+/**
+ * 断点 Hook
+ */
+export function useBreakpoint(): keyof typeof breakpoints {
+  const { currentBreakpoint } = useResponsive();
+  return currentBreakpoint;
+}
+
+/**
+ * 屏幕尺寸 Hook
+ */
+export function useScreenSize(): ScreenSize {
+  const { screenSize } = useResponsive();
+  return screenSize;
+}
+
+/**
+ * 设备类型 Hook
+ */
+export function useDeviceType() {
+  const { isMobile, isTablet, isDesktop } = useResponsive();
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+  };
+}
+
+export default ResponsiveProvider;