taro-uno-ui 1.0.0 → 1.0.2

package/src/utils/responsiveUtils.ts

@@ -1,348 +0,0 @@
-/**
- * 响应式工具
- * 提供屏幕尺寸检测、断点管理、响应式样式生成等功能，适配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

@@ -1,354 +0,0 @@
-/**
- * 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,
-};