Arabic Text.jsx -

const weightMap = normal: '400', medium: '500', bold: '700' ;

return String(text).replace(/\d/g, (digit) => westernToEastern[digit]); ;

return ( <span dir="rtl" lang="ar" style=styles className= arabic-text $className ...props > children </span> ); ;

function ArabicInput() return ( <label> <ArabicText>الاسم الكامل:</ArabicText> <input type="text" dir="rtl" lang="ar" placeholder="أدخل اسمك" /> </label> ); Arabic Text.jsx

/* For headings */ .arabic-text.heading font-weight: 700; letter-spacing: -0.01em;

export default ArabicText; /* components/ArabicText.css */ .arabic-text display: inline-block; font-family: 'Segoe UI', 'Tahoma', 'Noto Sans Arabic', 'Amiri', 'Droid Arabic Naskh', 'Traditional Arabic', sans-serif; unicode-bidi: embed; word-wrap: break-word; white-space: normal;

return fontLoaded; ;

const formattedContent = useArabicNumerals ? convertToArabicNumerals(children) : children;

return ( <span dir="rtl" lang="ar" ...props> formattedContent </span> ); ; const ArabicText = ( children, ...props ) => // Automatically handle mixed LTR/RTL content const wrappedChildren = React.Children.map(children, child => if (typeof child === 'string') // Wrap English/LTR segments in bdi tags const parts = child.split(/([a-zA-Z0-9\s]+)/); return parts.map((part, i) => if (/[a-zA-Z]/.test(part)) return <bdi key=i>part</bdi>; return part; ); return child; ); return ( <span dir="rtl" lang="ar" ...props> wrappedChildren </span> ); ; 3. With Font Optimization Hook import React, useEffect, useState from 'react'; const useArabicFont = () => const [fontLoaded, setFontLoaded] = useState(false);

const ArabicText = ( children, ...props ) => const fontLoaded = useArabicFont(); const weightMap = normal: '400', medium: '500', bold:

1. Auto-detect and Format Numbers // Advanced ArabicText with number conversion const ArabicText = ( children, useArabicNumerals = true, ...props ) => const convertToArabicNumerals = (text) => const westernToEastern = '0': '٠', '1': '١', '2': '٢', '3': '٣', '4': '٤', '5': '٥', '6': '٦', '7': '٧', '8': '٨', '9': '٩' ;

// components/ArabicText.jsx import React from 'react'; const ArabicText = ( children, className, ...props ) => return ( <span dir="rtl" lang="ar" className= arabic-text $ '' ...props > children </span> ); ;

return ( <div dir=isRTL ? 'rtl' : 'ltr'> <ArabicText> t('welcome_message') </ArabicText> </div> ); Auto-detect and Format Numbers // Advanced ArabicText with