taro-uno-ui 0.9.0-beta

package/src/utils/responsiveUtils.ts

@@ -0,0 +1,357 @@
+/**
+ * 响应式工具
+ * 提供屏幕尺寸检测、断点管理、响应式样式生成等功能，适配Taro.js多平台环境
+ */
+
+import { useMemo, useState, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+
+// 断点配置
+interface BreakpointConfig {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  '2xl': number;
+}
+
+// 默认断点配置
+const defaultBreakpoints: BreakpointConfig = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+// 屏幕尺寸类型
+type ScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+// 响应式值类型
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
+
+// 响应式样式接口
+interface ResponsiveStyle {
+  [key: string]: ResponsiveValue<string | number>;
+}
+
+// 平台类型
+type Platform = 'web' | 'weapp' | 'swan' | 'alipay' | 'tt' | 'qq' | 'h5' | 'rn';
+
+class ResponsiveUtils {
+  private breakpoints: BreakpointConfig;
+  private platform: Platform;
+
+  constructor(breakpoints?: Partial<BreakpointConfig>) {
+    this.breakpoints = { ...defaultBreakpoints, ...breakpoints };
+
+    // 检测当前平台
+    if (process.env && process.env['TARO_ENV']) {
+      this.platform = process.env['TARO_ENV'] as Platform;
+    } else {
+      this.platform = 'web'; // 默认为web
+    }
+  }
+
+  /**
+   * 获取当前屏幕尺寸
+   * @param width 屏幕宽度
+   * @returns 屏幕尺寸类型
+   */
+  getScreenSize(width: number): ScreenSize {
+    const { sm, md, lg, xl, '2xl': xxl } = this.breakpoints;
+
+    if (width >= xxl) return '2xl';
+    if (width >= xl) return 'xl';
+    if (width >= lg) return 'lg';
+    if (width >= md) return 'md';
+    if (width >= sm) return 'sm';
+    return 'xs';
+  }
+
+  /**
+   * 检查是否匹配指定屏幕尺寸
+   * @param size 屏幕尺寸
+   * @param currentWidth 当前屏幕宽度
+   * @returns 是否匹配
+   */
+  matchScreenSize(size: ScreenSize, currentWidth: number): boolean {
+    const currentSize = this.getScreenSize(currentWidth);
+
+    const sizeOrder: ScreenSize[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+    const currentIndex = sizeOrder.indexOf(currentSize);
+    const targetIndex = sizeOrder.indexOf(size);
+
+    return currentIndex >= targetIndex;
+  }
+
+  /**
+   * 获取响应式值
+   * @param value 响应式值
+   * @param currentWidth 当前屏幕宽度
+   * @returns 匹配的值
+   */
+  getResponsiveValue<T>(value: ResponsiveValue<T>, currentWidth: number): T {
+    if (typeof value !== 'object' || value === null) {
+      return value as T;
+    }
+
+    const size = this.getScreenSize(currentWidth);
+    const responsiveValue = value as Partial<Record<ScreenSize, T>>;
+
+    // 从当前尺寸开始向上查找匹配的值
+    const sizeOrder: ScreenSize[] = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs'];
+    for (const s of sizeOrder) {
+      if (responsiveValue[s] !== undefined) {
+        return responsiveValue[s] as T;
+      }
+      if (s === size) {
+        break;
+      }
+    }
+
+    // 如果没有找到，返回默认值（确保不会返回undefined）
+    return (responsiveValue.xs || value as T) as T;
+  }
+
+  /**
+   * 生成响应式样式
+   * @param styles 响应式样式对象
+   * @param currentWidth 当前屏幕宽度
+   * @returns 样式对象
+   */
+  generateResponsiveStyles(styles: ResponsiveStyle, currentWidth: number): Record<string, string | number> {
+    const result: Record<string, string | number> = {};
+
+    for (const [key, value] of Object.entries(styles)) {
+      const responsiveValue = this.getResponsiveValue(value, currentWidth);
+      if (responsiveValue !== undefined) {
+        result[key] = responsiveValue;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * 获取平台特定的样式
+   * @param webStyles Web平台样式
+   * @param weappStyles 小程序平台样式
+   * @param otherStyles 其他平台样式
+   * @returns 当前平台的样式
+   */
+  getPlatformStyles<T>(
+    webStyles: T,
+    weappStyles: T,
+    otherStyles?: Partial<Record<Platform, T>>
+  ): T {
+    if (this.platform === 'web' || this.platform === 'h5') {
+      return webStyles;
+    }
+
+    if (this.platform === 'weapp') {
+      return weappStyles;
+    }
+
+    if (otherStyles && otherStyles[this.platform]) {
+      return otherStyles[this.platform]!;
+    }
+
+    // 默认返回小程序样式
+    return weappStyles;
+  }
+
+  /**
+   * 获取当前平台
+   * @returns 平台类型
+   */
+  getPlatform(): Platform {
+    return this.platform;
+  }
+
+  /**
+   * 检查是否为移动设备
+   * @param width 屏幕宽度
+   * @returns 是否为移动设备
+   */
+  isMobile(width: number): boolean {
+    return width < this.breakpoints.md;
+  }
+
+  /**
+   * 检查是否为平板设备
+   * @param width 屏幕宽度
+   * @returns 是否为平板设备
+   */
+  isTablet(width: number): boolean {
+    return width >= this.breakpoints.md && width < this.breakpoints.lg;
+  }
+
+  /**
+   * 检查是否为桌面设备
+   * @param width 屏幕宽度
+   * @returns 是否为桌面设备
+   */
+  isDesktop(width: number): boolean {
+    return width >= this.breakpoints.lg;
+  }
+
+  /**
+   * 获取安全区域（适配刘海屏）
+   * @returns 安全区域配置
+   */
+  getSafeArea(): { top: number; bottom: number; left: number; right: number } {
+    // Taro.js环境下的安全区域获取
+    if (Taro.getSystemInfoSync) {
+      const systemInfo = Taro.getSystemInfoSync();
+      return {
+        top: systemInfo.safeArea?.top || 0,
+        bottom: systemInfo.safeArea?.bottom || systemInfo.screenHeight,
+        left: systemInfo.safeArea?.left || 0,
+        right: systemInfo.safeArea?.right || systemInfo.screenWidth,
+      };
+    }
+
+    // 默认值
+    return { top: 0, bottom: 0, left: 0, right: 0 };
+  }
+
+  /**
+   * 获取状态栏高度
+   * @returns 状态栏高度
+   */
+  getStatusBarHeight(): number {
+    if (Taro.getSystemInfoSync) {
+      const systemInfo = Taro.getSystemInfoSync();
+      return systemInfo.statusBarHeight || 0;
+    }
+
+    // 默认值
+    return 0;
+  }
+
+  /**
+   * 获取导航栏高度
+   * @returns 导航栏高度
+   */
+  getNavigationBarHeight(): number {
+    if (Taro.getSystemInfoSync) {
+      const systemInfo = Taro.getSystemInfoSync();
+      // 小程序导航栏高度通常为44px
+      return systemInfo.statusBarHeight ? systemInfo.statusBarHeight + 44 : 44;
+    }
+
+    // 默认值
+    return 44;
+  }
+
+  /**
+   * 获取胶囊按钮信息（仅小程序）
+   * @returns 胶囊按钮信息
+   */
+  getMenuButtonBoundingClientRect(): any {
+    if (Taro.getMenuButtonBoundingClientRect) {
+      return Taro.getMenuButtonBoundingClientRect();
+    }
+
+    // 默认值
+    return null;
+  }
+}
+
+// 创建单例实例
+const responsiveUtils = new ResponsiveUtils();
+
+// 响应式Hook
+export const useResponsive = () => {
+  const [windowSize, setWindowSize] = useState({ windowWidth: 375, windowHeight: 667 });
+
+  useEffect(() => {
+    const updateWindowSize = () => {
+      try {
+        const systemInfo = Taro.getSystemInfoSync();
+        setWindowSize({
+          windowWidth: systemInfo.windowWidth || 375,
+          windowHeight: systemInfo.windowHeight || 667
+        });
+      } catch (e) {
+        // 如果获取失败，使用默认值
+        setWindowSize({ windowWidth: 375, windowHeight: 667 });
+      }
+    };
+
+    // 初始化获取窗口尺寸
+    updateWindowSize();
+
+    // 监听窗口尺寸变化（仅Web/H5环境）
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', updateWindowSize);
+    }
+
+    // 清理函数
+    return () => {
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', updateWindowSize);
+      }
+    };
+  }, []);
+
+  const { windowWidth, windowHeight } = windowSize;
+
+  const screenSize = useMemo(() => responsiveUtils.getScreenSize(windowWidth), [windowWidth]);
+  const isMobile = useMemo(() => responsiveUtils.isMobile(windowWidth), [windowWidth]);
+  const isTablet = useMemo(() => responsiveUtils.isTablet(windowWidth), [windowWidth]);
+  const isDesktop = useMemo(() => responsiveUtils.isDesktop(windowWidth), [windowWidth]);
+  const platform = useMemo(() => responsiveUtils.getPlatform(), []);
+  const safeArea = useMemo(() => responsiveUtils.getSafeArea(), []);
+  const statusBarHeight = useMemo(() => responsiveUtils.getStatusBarHeight(), []);
+  const navigationBarHeight = useMemo(() => responsiveUtils.getNavigationBarHeight(), []);
+
+  return {
+    windowWidth,
+    windowHeight,
+    screenSize,
+    isMobile,
+    isTablet,
+    isDesktop,
+    platform,
+    safeArea,
+    statusBarHeight,
+    navigationBarHeight,
+    getResponsiveValue: <T>(value: ResponsiveValue<T>) =>
+      responsiveUtils.getResponsiveValue(value, windowWidth),
+    generateResponsiveStyles: (styles: ResponsiveStyle) =>
+      responsiveUtils.generateResponsiveStyles(styles, windowWidth),
+    getPlatformStyles: <T>(webStyles: T, weappStyles: T, otherStyles?: Partial<Record<Platform, T>>) =>
+      responsiveUtils.getPlatformStyles(webStyles, weappStyles, otherStyles),
+    matchScreenSize: (size: ScreenSize) =>
+      responsiveUtils.matchScreenSize(size, windowWidth),
+  };
+};
+
+// 导出便捷方法
+export const getScreenSize = (width: number) => responsiveUtils.getScreenSize(width);
+export const matchScreenSize = (size: ScreenSize, width: number) => responsiveUtils.matchScreenSize(size, width);
+export const getResponsiveValue = <T>(value: ResponsiveValue<T>, width: number) =>
+  responsiveUtils.getResponsiveValue(value, width);
+export const generateResponsiveStyles = (styles: ResponsiveStyle, width: number) =>
+  responsiveUtils.generateResponsiveStyles(styles, width);
+export const getPlatformStyles = <T>(
+  webStyles: T,
+  weappStyles: T,
+  otherStyles?: Partial<Record<Platform, T>>
+) => responsiveUtils.getPlatformStyles(webStyles, weappStyles, otherStyles);
+export const getPlatform = () => responsiveUtils.getPlatform();
+export const isMobile = (width: number) => responsiveUtils.isMobile(width);
+export const isTablet = (width: number) => responsiveUtils.isTablet(width);
+export const isDesktop = (width: number) => responsiveUtils.isDesktop(width);
+export const getSafeArea = () => responsiveUtils.getSafeArea();
+export const getStatusBarHeight = () => responsiveUtils.getStatusBarHeight();
+export const getNavigationBarHeight = () => responsiveUtils.getNavigationBarHeight();
+export const getMenuButtonBoundingClientRect = () => responsiveUtils.getMenuButtonBoundingClientRect();
+
+// 导出类型
+export type { BreakpointConfig, ScreenSize, ResponsiveValue, ResponsiveStyle, Platform };
+export default responsiveUtils;

package/src/utils/rtl-support.ts

@@ -0,0 +1,344 @@
+/**
+ * RTL语言支持工具
+ * 提供RTL检测、样式切换和布局调整功能
+ */
+
+import { useEffect, useState } from 'react';
+type SupportedLanguage = 'ar-SA' | 'he-IL' | 'fa-IR' | 'ur-PK' | string;
+
+// RTL语言列表
+export const RTL_LANGUAGES: SupportedLanguage[] = [
+  'ar-SA',  // 阿拉伯语
+  'he-IL',  // 希伯来语
+  'fa-IR',  // 波斯语
+  'ur-PK',  // 乌尔都语
+  'yi',     // 意第绪语
+  'ps',     // 普什图语
+  'sd',     // 信德语
+];
+
+// 扩展RTL语言配置
+export interface RTLConfig {
+  language: SupportedLanguage;
+  name: string;
+  rtl: boolean;
+  fontFamily: string;
+  textAlign: 'right' | 'left';
+  direction: 'rtl' | 'ltr';
+  // RTL特定的布局调整
+  flipProperties: boolean;
+  flipIcons: boolean;
+  adjustSpacing: boolean;
+  adjustAlignment: boolean;
+}
+
+// RTL语言配置
+export const RTL_CONFIGS: Record<string, RTLConfig> = {
+  'ar-SA': {
+    language: 'ar-SA',
+    name: 'Arabic (Saudi Arabia)',
+    rtl: true,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Tahoma", "Arial Unicode MS", "Traditional Arabic"',
+    textAlign: 'right',
+    direction: 'rtl',
+    flipProperties: true,
+    flipIcons: true,
+    adjustSpacing: true,
+    adjustAlignment: true,
+  },
+  'he-IL': {
+    language: 'he-IL',
+    name: 'Hebrew (Israel)',
+    rtl: true,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "David", "Arial Hebrew", "Arial"',
+    textAlign: 'right',
+    direction: 'rtl',
+    flipProperties: true,
+    flipIcons: true,
+    adjustSpacing: true,
+    adjustAlignment: true,
+  },
+  'fa-IR': {
+    language: 'fa-IR',
+    name: 'Persian (Iran)',
+    rtl: true,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Tahoma", "Arial Unicode MS", "IRANSans", "Vazir"',
+    textAlign: 'right',
+    direction: 'rtl',
+    flipProperties: true,
+    flipIcons: true,
+    adjustSpacing: true,
+    adjustAlignment: true,
+  },
+  'ur-PK': {
+    language: 'ur-PK',
+    name: 'Urdu (Pakistan)',
+    rtl: true,
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Noto Nastaliq Urdu", "Arial Unicode MS", "Tahoma"',
+    textAlign: 'right',
+    direction: 'rtl',
+    flipProperties: true,
+    flipIcons: true,
+    adjustSpacing: true,
+    adjustAlignment: true,
+  },
+};
+
+// 检查是否为RTL语言
+export const isRTL = (language: string): boolean => {
+  return RTL_LANGUAGES.includes(language as SupportedLanguage) ||
+         language.startsWith('ar') ||
+         language.startsWith('he') ||
+         language.startsWith('fa') ||
+         language.startsWith('ur');
+};
+
+// 应用RTL样式
+export const applyRTLStyles = (language: string): void => {
+  const isRtl = isRTL(language);
+  const config = RTL_CONFIGS[language];
+
+  if (typeof document !== 'undefined') {
+    // 设置文档方向
+    document.documentElement.dir = isRtl ? 'rtl' : 'ltr';
+    document.documentElement.lang = language;
+
+    // 添加或移除RTL类
+    if (isRtl) {
+      document.body.classList.add('rtl');
+      document.body.classList.remove('ltr');
+    } else {
+      document.body.classList.add('ltr');
+      document.body.classList.remove('rtl');
+    }
+
+    // 应用特定配置
+    if (config) {
+      // 设置字体
+      const style = document.createElement('style');
+      style.id = 'rtl-font-style';
+      style.textContent = `
+        html {
+          font-family: ${config.fontFamily};
+        }
+        .rtl {
+          direction: rtl;
+          text-align: ${config.textAlign};
+        }
+        .rtl .flip-icon {
+          transform: scaleX(-1);
+        }
+        .rtl .flip-property {
+          ${config.flipProperties ? `
+            margin-left: initial;
+            margin-right: initial;
+            padding-left: initial;
+            padding-right: initial;
+            border-left: initial;
+            border-right: initial;
+            border-radius: initial;
+          ` : ''}
+        }
+      `;
+
+      // 移除旧的样式
+      const oldStyle = document.getElementById('rtl-font-style');
+      if (oldStyle) {
+        oldStyle.remove();
+      }
+
+      document.head.appendChild(style);
+    }
+  }
+};
+
+// 获取RTL配置
+export const getRTLConfig = (language: string): RTLConfig | null => {
+  return RTL_CONFIGS[language] || null;
+};
+
+// 生成RTL CSS变量
+export const generateRTLVariables = (language: string): string => {
+  const config = RTL_CONFIGS[language];
+  if (!config) return '';
+
+  return `
+    :root {
+      --rtl-direction: ${config.direction};
+      --rtl-text-align: ${config.textAlign};
+      --rtl-font-family: ${config.fontFamily};
+      --rtl-flip-properties: ${config.flipProperties ? 'true' : 'false'};
+      --rtl-flip-icons: ${config.flipIcons ? 'true' : 'false'};
+      --rtl-adjust-spacing: ${config.adjustSpacing ? 'true' : 'false'};
+      --rtl-adjust-alignment: ${config.adjustAlignment ? 'true' : 'false'};
+    }
+  `;
+};
+
+// 生成RTL样式类
+export const generateRTLClasses = (): string => `
+  .rtl {
+    direction: rtl;
+    text-align: right;
+  }
+
+  .rtl .text-left { text-align: right; }
+  .rtl .text-right { text-align: left; }
+
+  .rtl .mr-1 { margin-left: 0.25rem; margin-right: 0; }
+  .rtl .mr-2 { margin-left: 0.5rem; margin-right: 0; }
+  .rtl .mr-3 { margin-left: 0.75rem; margin-right: 0; }
+  .rtl .mr-4 { margin-left: 1rem; margin-right: 0; }
+  .rtl .mr-5 { margin-left: 1.25rem; margin-right: 0; }
+
+  .rtl .ml-1 { margin-right: 0.25rem; margin-left: 0; }
+  .rtl .ml-2 { margin-right: 0.5rem; margin-left: 0; }
+  .rtl .ml-3 { margin-right: 0.75rem; margin-left: 0; }
+  .rtl .ml-4 { margin-right: 1rem; margin-left: 0; }
+  .rtl .ml-5 { margin-right: 1.25rem; margin-left: 0; }
+
+  .rtl .pl-1 { padding-left: 0; padding-right: 0.25rem; }
+  .rtl .pl-2 { padding-left: 0; padding-right: 0.5rem; }
+  .rtl .pl-3 { padding-left: 0; padding-right: 0.75rem; }
+  .rtl .pl-4 { padding-left: 0; padding-right: 1rem; }
+  .rtl .pl-5 { padding-left: 0; padding-right: 1.25rem; }
+
+  .rtl .pr-1 { padding-right: 0; padding-left: 0.25rem; }
+  .rtl .pr-2 { padding-right: 0; padding-left: 0.5rem; }
+  .rtl .pr-3 { padding-right: 0; padding-left: 0.75rem; }
+  .rtl .pr-4 { padding-right: 0; padding-left: 1rem; }
+  .rtl .pr-5 { padding-right: 0; padding-left: 1.25rem; }
+
+  .rtl .border-l { border-left: none; border-right: 1px solid currentColor; }
+  .rtl .border-r { border-right: none; border-left: 1px solid currentColor; }
+
+  .rtl .rounded-l { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; }
+  .rtl .rounded-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
+
+  .rtl .flip-icon {
+    transform: scaleX(-1);
+  }
+
+  .rtl .flip-property {
+    transform: scaleX(-1);
+  }
+
+  .rtl .float-left { float: right; }
+  .rtl .float-right { float: left; }
+
+  .rtl .left-0 { left: auto; right: 0; }
+  .rtl .right-0 { right: auto; left: 0; }
+
+  .rtl .text-start { text-align: right; }
+  .rtl .text-end { text-align: left; }
+`;
+
+// RTL检测Hook
+export const useRTLDetection = (language: string) => {
+  const [rtl, setRtl] = useState(false);
+
+  useEffect(() => {
+    setRtl(isRTL(language));
+    applyRTLStyles(language);
+  }, [language]);
+
+  return { isRTL: rtl };
+};
+
+// 切换RTL方向
+export const toggleRTL = (language: string): string => {
+  const isRtl = isRTL(language);
+  const newDirection = isRtl ? 'ltr' : 'rtl';
+
+  if (typeof document !== 'undefined') {
+    document.documentElement.dir = newDirection;
+    document.body.classList.toggle('rtl', !isRtl);
+    document.body.classList.toggle('ltr', isRtl);
+  }
+
+  return newDirection;
+};
+
+// 获取方向相关样式
+export const getDirectionalStyles = (language: string) => {
+  const isRtl = isRTL(language);
+
+  return {
+    direction: isRtl ? 'rtl' : 'ltr',
+    textAlign: isRtl ? 'right' : 'left',
+    // 样式映射
+    marginStart: isRtl ? 'marginRight' : 'marginLeft',
+    marginEnd: isRtl ? 'marginLeft' : 'marginRight',
+    paddingStart: isRtl ? 'paddingRight' : 'paddingLeft',
+    paddingEnd: isRtl ? 'paddingLeft' : 'paddingRight',
+    borderStart: isRtl ? 'borderRight' : 'borderLeft',
+    borderEnd: isRtl ? 'borderLeft' : 'borderRight',
+    borderRadiusStart: isRtl ? 'borderTopRightRadius' : 'borderTopLeftRadius',
+    borderRadiusEnd: isRtl ? 'borderTopLeftRadius' : 'borderTopRightRadius',
+    floatStart: isRtl ? 'right' : 'left',
+    floatEnd: isRtl ? 'left' : 'right',
+    positionStart: isRtl ? 'right' : 'left',
+    positionEnd: isRtl ? 'left' : 'right',
+  };
+};
+
+// 获取RTL特定的CSS值
+export const getRTLValue = (_property: string, language: string, ltrValue: string, rtlValue?: string) => {
+  const isRtl = isRTL(language);
+  return isRtl && rtlValue ? rtlValue : ltrValue;
+};
+
+// 应用RTL特定的类名
+export const applyRTLClasses = (element: HTMLElement, language: string): void => {
+  const isRtl = isRTL(language);
+
+  if (isRtl) {
+    element.classList.add('rtl');
+    element.classList.remove('ltr');
+  } else {
+    element.classList.add('ltr');
+    element.classList.remove('rtl');
+  }
+};
+
+// 创建RTL友好的CSS
+export const createRTLCSS = (css: string, language: string): string => {
+  if (!isRTL(language)) {
+    return css;
+  }
+
+  // 简单的RTL转换规则
+  const rtlRules = [
+    { pattern: /margin-left:\s*([^;]+);/g, replacement: 'margin-right: $1; margin-left: 0;' },
+    { pattern: /margin-right:\s*([^;]+);/g, replacement: 'margin-left: $1; margin-right: 0;' },
+    { pattern: /padding-left:\s*([^;]+);/g, replacement: 'padding-right: $1; padding-left: 0;' },
+    { pattern: /padding-right:\s*([^;]+);/g, replacement: 'padding-left: $1; padding-right: 0;' },
+    { pattern: /border-left:\s*([^;]+);/g, replacement: 'border-right: $1; border-left: none;' },
+    { pattern: /border-right:\s*([^;]+);/g, replacement: 'border-left: $1; border-right: none;' },
+    { pattern: /text-align:\s*left;/g, replacement: 'text-align: right;' },
+    { pattern: /text-align:\s*right;/g, replacement: 'text-align: left;' },
+    { pattern: /float:\s*left;/g, replacement: 'float: right;' },
+    { pattern: /float:\s*right;/g, replacement: 'float: left;' },
+  ];
+
+  let rtlCSS = css;
+  rtlRules.forEach(rule => {
+    rtlCSS = rtlCSS.replace(rule.pattern, rule.replacement);
+  });
+
+  return rtlCSS;
+};
+
+export default {
+  isRTL,
+  applyRTLStyles,
+  getRTLConfig,
+  generateRTLVariables,
+  generateRTLClasses,
+  useRTLDetection,
+  toggleRTL,
+  getDirectionalStyles,
+  getRTLValue,
+  applyRTLClasses,
+  createRTLCSS,
+};