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 <[email protected]> Co-authored-by: WK Wong <[email protected]>
nextui-org · Sep 8, 2024 · deb1507 · deb1507
1 parent f4d16e1
commit deb1507
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/.changeset/giant-sheep-attend.md 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
@@ -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)]",
         ],