[feat]: Dynamic Close Button Placement Based on Text Direction (dir)

[hawarhekmat]

Feature description

---

📌 Feature Request: Dynamic Close Button Placement Based on Text Direction (dir)

🧩 Problem

Currently, the close button in the Sheet component (and possibly other components like Dialog or Drawer) is always placed in a fixed position, regardless of the text direction (dir).

This causes a misaligned UX for users of RTL languages (e.g., Arabic, Kurdish), where the close button still appears on the right side, which is unintuitive in an RTL layout.

---

✅ Expected Behavior

The close button should adapt its position dynamically based on the dir attribute of the document or component:

• dir="ltr" → Close button on the right
• dir="rtl" → Close button on the left

This behavior should be consistent across all components that include close buttons for a better internationalization (i18n) experience.

---

💡 Suggested Implementation

• Use the dir attribute (either on html or the nearest parent container) to determine the button placement.
• Alternatively, conditionally apply Tailwind utility classes like left-0 / right-0 based on dir.
• This logic could be extracted into a shared utility or hook to standardize behavior across components.

---

🌍 Why It Matters

Supporting RTL layouts improves accessibility and provides a more intuitive interface for users of RTL languages. This change aligns with modern i18n standards and enhances the overall polish of the UI.

---

Affected component/components

No response

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[TarakaSwathi123]

can i pick this up @hawarhekmat

[anurag-sinha04]

Hey, I am interested to work upon this...

[meykiacs]

It can be done simply by using logical css properties in tailwind: using end-4 instead of the currently used right-4 in the Dialog component:

<DialogPrimitive.Close
            data-slot="dialog-close"
            // code
            className="
              // code
               end-4"  // instead of left-4 which is currently used
            "
>
```tsx