diff --git a/.changeset/serious-dolls-mix.md b/.changeset/serious-dolls-mix.md new file mode 100644 index 0000000000..e6b69248c7 --- /dev/null +++ b/.changeset/serious-dolls-mix.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/theme": patch +--- + +Improved RTL support for the select component diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts index a1e1bb7f77..a490c59fba 100644 --- a/packages/core/theme/src/components/select.ts +++ b/packages/core/theme/src/components/select.ts @@ -22,8 +22,8 @@ const select = tv({ "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent", innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border", - selectorIcon: "absolute right-3 rtl:left-3 rtl:right-[unset] w-4 h-4", - spinner: "absolute right-3 rtl:left-3 rtl:right-[unset]", + selectorIcon: "absolute end-3 w-4 h-4", + spinner: "absolute end-3", value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"], listboxWrapper: "scroll-py-6 max-h-64 w-full", listbox: "", @@ -135,7 +135,7 @@ const select = tv({ }, "outside-left": { base: "flex-row items-center flex-nowrap items-start", - label: "relative pr-2 rtl:pl-2 rtl:pr-[unset] text-foreground", + label: "relative pe-2 text-foreground", }, inside: { label: "text-tiny cursor-pointer", @@ -162,7 +162,7 @@ const select = tv({ }, isRequired: { true: { - label: "after:content-['*'] after:text-danger after:ml-0.5", + label: "after:content-['*'] after:text-danger after:ms-0.5", }, }, isMultiline: { @@ -543,15 +543,7 @@ const select = tv({ isMultiline: false, class: { base: "group relative justify-end", - label: [ - "pb-0", - "z-20", - "top-1/2", - "-translate-y-1/2", - "group-data-[filled=true]:left-0", - "rtl:group-data-[filled=true]:right-0", - "rtl:group-data-[filled=true]:left-[unset]", - ], + label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"], }, }, // labelPlacement=[inside] @@ -676,9 +668,7 @@ const select = tv({ isMultiline: false, class: { label: [ - "left-2", - "rtl:right-2", - "rtl:left-[unset]", + "start-2", "text-tiny", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]", ], @@ -691,9 +681,7 @@ const select = tv({ size: "md", class: { label: [ - "left-3", - "rtl:right-3", - "rtl:left-[unset]", + "start-3", "text-small", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]", ], @@ -706,9 +694,7 @@ const select = tv({ size: "lg", class: { label: [ - "left-3", - "rtl:right-3", - "rtl:left-[unset]", + "start-3", "text-medium", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]", ],