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)]", ],