feat: add RTL support to Switch component and enhance tooltip visibility

- Implemented RTL (Right-to-Left) layout support in the Switch component, allowing for better internationalization.
- Updated SCSS styles to ensure tooltips overflow correctly and remain visible in various components.
- Enhanced documentation to reflect new RTL feature and its usage in the Switch component examples.

Author: prabhuignoto

packages/documentation/App.scss

@@ -412,7 +412,9 @@ pre {
     width: 100% !important;
     box-shadow: var(--shadow-card) !important;
     transition: all var(--transition-base) !important;
-    overflow: hidden !important;
+    /* Allow tooltips to overflow and be visible */
+    overflow-x: hidden !important;
+    overflow-y: visible !important;
 
     &:hover {
       box-shadow: var(--shadow-card-hover) !important;
@@ -443,6 +445,8 @@ pre {
   align-items: flex-start;
   width: 100%;
   overflow-x: auto;
+  /* Allow tooltips to overflow vertically */
+  overflow-y: visible;
 }
 
 .rc-demo-widgets-wrapper {

packages/documentation/common/demo-page-renderer/components/demo-container.scss

@@ -9,7 +9,9 @@
   border: 1px solid var(--border-color);
   border-radius: 12px;
   box-shadow: var(--shadow-md);
-  overflow: hidden;
+  /* Use overflow-x: hidden to maintain rounded corners, but allow overflow-y for tooltips */
+  overflow-x: hidden;
+  overflow-y: visible;
   transition: all var(--transition-base);
 
   &:hover {
@@ -133,6 +135,8 @@
   align-items: center;
   justify-content: center;
   transition: background var(--transition-base);
+  /* Allow tooltips to overflow and be visible */
+  overflow: visible;
 }
 
 .demo-container__demo-inner {

packages/documentation/common/demo-page-renderer/components/demo-container.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import { Smartphone, Tablet, Monitor } from 'lucide-react';
 import type { ViewportSize, DemoControls } from '../types';
+import { addRTLToElement } from '../utils/rtl-wrapper';
 import './demo-container.scss';
 
 export interface DemoContainerProps {
@@ -154,7 +155,7 @@ const DemoContainer: FunctionComponent<DemoContainerProps> = ({
             'demo-container__demo-inner--tablet': viewport === 'tablet',
           })}
         >
-          {children}
+          {addRTLToElement(children)}
         </div>
       </div>
     </div>

packages/documentation/common/demo-page-renderer/utils/index.ts

@@ -30,3 +30,6 @@ export {
   variantToCodeSnippet,
 } from './code-extractor';
 export type { JsxToStringOptions } from './code-extractor';
+
+// RTL wrapper
+export { addRTLToElement, RTLWrapper } from './rtl-wrapper';

packages/documentation/common/demo-page-renderer/utils/rtl-wrapper.tsx

@@ -0,0 +1,178 @@
+import React, { ReactElement, ReactNode, isValidElement, cloneElement } from 'react';
+
+/**
+ * List of component names that support RTL prop
+ * This is based on the components found in the codebase that have RTL?: boolean in their props
+ */
+const RTL_SUPPORTED_COMPONENTS = new Set([
+  'Switch',
+  'Input',
+  'Password',
+  'InputNumber',
+  'FormField',
+  'FormGroup',
+  'Checkbox',
+  'CheckboxGroup',
+  'Radio',
+  'RadioGroup',
+  'Dropdown',
+  'Menu',
+  'MenuButton',
+  'MenuBar',
+  'BreadCrumb',
+  'Section',
+  'PageHeader',
+  'Text',
+  'Alert',
+  'Skeleton',
+  'Rate',
+  'Progress',
+  'Transfer',
+  'FileUpload',
+  'Pin',
+  'ReadMore',
+  'List',
+  'Tags',
+  'Slider',
+  'AutoSuggest',
+  'LoadingIndicator',
+  'Accordion',
+  'AccordionGroup',
+]);
+
+/**
+ * Gets the component name from a React element type
+ */
+function getComponentName(componentType: any): string | null {
+  if (!componentType) {
+    return null;
+  }
+
+  // Direct function component
+  if (typeof componentType === 'function') {
+    return componentType.displayName || componentType.name || null;
+  }
+
+  // For forwardRef and memo components, check the inner component
+  if (typeof componentType === 'object') {
+    // React.memo
+    if (componentType.type) {
+      const innerName = getComponentName(componentType.type);
+      if (innerName) return innerName;
+    }
+    // React.forwardRef
+    if (componentType.render) {
+      const innerName = getComponentName(componentType.render);
+      if (innerName) return innerName;
+    }
+    // Check displayName directly on the object
+    if (componentType.displayName) {
+      return componentType.displayName;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Checks if a component supports RTL by checking its displayName or type name
+ */
+function componentSupportsRTL(element: ReactElement): boolean {
+  if (!isValidElement(element)) {
+    return false;
+  }
+
+  const componentType = element.type;
+  
+  // Check if it's a string component (e.g., 'div', 'span') - these don't support RTL
+  if (typeof componentType === 'string') {
+    return false;
+  }
+
+  // Get component name
+  const componentName = getComponentName(componentType);
+  
+  if (componentName && RTL_SUPPORTED_COMPONENTS.has(componentName)) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Recursively adds RTL prop to all React elements that support it
+ * 
+ * @param node - React node to process
+ * @returns React node with RTL prop added where applicable
+ */
+export function addRTLToElement(node: ReactNode): ReactNode {
+  // Handle null, undefined, or non-elements
+  if (!node || !isValidElement(node)) {
+    return node;
+  }
+
+  const element = node as ReactElement;
+
+  // Check if this element supports RTL and doesn't already have RTL set
+  const supportsRTL = componentSupportsRTL(element);
+  const hasRTL = element.props && 'RTL' in element.props;
+  const rtlValue = element.props?.RTL;
+
+  // Process children first (before cloning)
+  let processedChildren = element.props?.children;
+  if (processedChildren) {
+    // Handle array of children
+    if (Array.isArray(processedChildren)) {
+      processedChildren = processedChildren.map(child => addRTLToElement(child));
+    } 
+    // Handle single child
+    else if (processedChildren !== null && processedChildren !== undefined) {
+      processedChildren = addRTLToElement(processedChildren);
+    }
+  }
+
+  // Clone element with RTL prop if it supports it and doesn't have it (or has it as false)
+  let clonedElement = element;
+  if (supportsRTL) {
+    if (!hasRTL || rtlValue === false) {
+      // Clone with RTL=true, preserving all other props and processed children
+      clonedElement = cloneElement(
+        element,
+        {
+          ...element.props,
+          RTL: true,
+          children: processedChildren,
+        } as any
+      );
+    } else if (processedChildren !== element.props?.children) {
+      // Children were processed, need to update them even if RTL is already true
+      clonedElement = cloneElement(
+        element,
+        {
+          ...element.props,
+          children: processedChildren,
+        } as any
+      );
+    }
+  } else if (processedChildren !== element.props?.children) {
+    // Component doesn't support RTL but children were processed
+    clonedElement = cloneElement(
+      element,
+      {
+        ...element.props,
+        children: processedChildren,
+      } as any
+    );
+  }
+
+  return clonedElement;
+}
+
+/**
+ * Wrapper component that adds RTL to all children
+ */
+export const RTLWrapper: React.FunctionComponent<{ children: ReactNode }> = ({
+  children,
+}) => {
+  return <>{addRTLToElement(children)}</>;
+};

packages/documentation/common/inline-code-viewer/header-code-toggle.scss

@@ -14,7 +14,7 @@
   align-items: center;
   flex-shrink: 0;
   justify-content: flex-end;
-  width: auto;
+  width: 180px;
   margin-bottom: 0;
   margin-left: auto;
 }
@@ -52,6 +52,8 @@
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.3s ease, transform 0.3s ease;
+  direction: ltr; /* Code should always be left-to-right */
+  text-align: left; /* Ensure code text aligns left */
 }
 
 .header-code-toggle__content.is-component-view .header-code-toggle__code-view {

packages/documentation/common/inline-code-viewer/header-code-toggle.tsx

@@ -103,7 +103,7 @@ const HeaderCodeToggleButton: FunctionComponent<
         label={switchLabel}
         size={size}
         aria-label={isCodeView ? 'Show preview' : 'Show code'}
-        style={{ transform: 'scale(0.9)', transformOrigin: 'right center' }}
+        width={60}
       />
     </div>
   );

packages/documentation/common/syntax-highlighter/syntax-highlighter.scss

@@ -111,6 +111,8 @@
   overflow-x: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--border-color) transparent;
+  direction: ltr; /* Code should always be left-to-right */
+  text-align: left; /* Ensure code text aligns left */
 
   &::-webkit-scrollbar {
     height: 8px;
@@ -140,6 +142,8 @@
     line-height: 1.6 !important;
     overflow-x: auto;
     counter-reset: line;
+    direction: ltr !important; /* Code should always be left-to-right */
+    text-align: left !important; /* Ensure code text aligns left */
 
     code {
       font-family: var(--font-mono) !important;

packages/documentation/components/switch/index.tsx

@@ -12,7 +12,7 @@ function switchComponent() {
       The design and functionality of this control is based on a physical switch that allows users to turn things ON or OFF`}
       sourceId="switch/switch.tsx"
       editId="switch"
-      features={['Custom sizes', 'ARIA labels', 'Disabled state']}
+      features={['Custom sizes', 'ARIA labels', 'Disabled state', 'RTL support']}
       callbacks={[
         {
           default: ``,
@@ -65,6 +65,13 @@ function switchComponent() {
           optional: 'Yes',
           type: 'Object',
         },
+        {
+          default: 'False',
+          description: `enables right-to-left layout mode for internationalization`,
+          name: 'RTL',
+          optional: 'Yes',
+          type: 'Boolean',
+        },
       ]}
       tabTitles={['Examples', 'Properties', 'Playground']}
       stackBlitzCodes={['react-ts-p8rf9h']}

packages/documentation/components/switch/widget-variants.tsx

@@ -66,3 +66,13 @@ export const Large = (
     onChange={val => console.log('Marketing:', val)}
   />
 );
+
+export const RTL = (
+  <Switch
+    label="وضع الظلام"
+    checked
+    onChange={val => console.log('Dark mode:', val)}
+    size="sm"
+    RTL
+  />
+);