From deb15078cc61fea30b9e4f6c98eddad244420276 Mon Sep 17 00:00:00 2001
From: Amir Hossein Hashemi <87268103+amirhhashemi@users.noreply.github.com>
Date: Sun, 8 Sep 2024 15:54:24 +0330
Subject: [PATCH] fix(components): improve RTL support for input component
 (#2038)

* fix(components): improve RTL support for select component

* fix(theme): revise RTL styles

* chore(changeset): remove input package from changeset

---------

Co-authored-by: amirhhashemi <87268103+amirhhashemi@users.noreply.github>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
---
 .changeset/giant-sheep-attend.md            |  5 +++++
 packages/core/theme/src/components/input.ts | 21 +++++++++------------
 2 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/giant-sheep-attend.md

diff --git a/.changeset/giant-sheep-attend.md b/.changeset/giant-sheep-attend.md
new file mode 100644
index 0000000000..81266e7de5
--- /dev/null
+++ b/.changeset/giant-sheep-attend.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Improved RTL support for the input component
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index d1cacd3740..0be8805200 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -52,9 +52,8 @@ const input = tv({
       "z-10",
       "hidden",
       "absolute",
-      "right-3",
-      "rtl:right-auto",
-      "rtl:left-3",
+      "end-3",
+      "start-auto",
       "appearance-none",
       "outline-none",
       "select-none",
@@ -174,7 +173,7 @@ const input = tv({
         base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         inputWrapper: "flex-1",
         mainWrapper: "flex flex-col",
-        label: "relative text-foreground pr-2 rtl:pr-0 rtl:pl-2 pointer-events-auto",
+        label: "relative text-foreground pe-2 ps-2 pointer-events-auto",
       },
       inside: {
         label: "text-tiny cursor-text",
@@ -607,7 +606,7 @@ const input = tv({
           "z-20",
           "top-1/2",
           "-translate-y-1/2",
-          "group-data-[filled-within=true]:left-0",
+          "group-data-[filled-within=true]:start-0",
         ],
       },
     },
@@ -757,7 +756,7 @@ const input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-2",
+          "start-2",
           "text-tiny",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
         ],
@@ -770,9 +769,8 @@ const input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-3",
-          "rtl:left-auto",
-          "rtl:right-3",
+          "start-3",
+          "end-auto",
           "text-small",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
         ],
@@ -785,9 +783,8 @@ const input = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-3",
-          "rtl:left-auto",
-          "rtl:right-3",
+          "start-3",
+          "end-auto",
           "text-medium",
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
         ],