From 844808c976305673ceb5d653d92c5037fc70a431 Mon Sep 17 00:00:00 2001
From: Jakob Guddas <github@jguddas.de>
Date: Mon, 16 Oct 2023 20:42:01 +0200
Subject: [PATCH] feat: added RTL support to avatar and avatar group component
 (#1727)

* feat: added RTL support to avatar and avatar group components

* Create tender-penguins-love.md

* Update tender-penguins-love.md
---
 .changeset/tender-penguins-love.md                         | 7 +++++++
 apps/docs/content/components/avatar/group-custom-count.ts  | 2 +-
 packages/components/avatar/src/use-avatar-group.ts         | 2 +-
 .../components/avatar/stories/avatar-group.stories.tsx     | 2 +-
 packages/core/theme/src/components/avatar.ts               | 4 ++--
 5 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/tender-penguins-love.md

diff --git a/.changeset/tender-penguins-love.md b/.changeset/tender-penguins-love.md
new file mode 100644
index 0000000000..bdc17dec6c
--- /dev/null
+++ b/.changeset/tender-penguins-love.md
@@ -0,0 +1,7 @@
+---
+"@nextui-org/docs": patch
+"@nextui-org/avatar": patch
+"@nextui-org/theme": patch
+---
+
+feat: added RTL support to avatar and avatar group component
diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts
index 0ac49409bf..a9ffab8b16 100644
--- a/apps/docs/content/components/avatar/group-custom-count.ts
+++ b/apps/docs/content/components/avatar/group-custom-count.ts
@@ -7,7 +7,7 @@ export default function App() {
       max={3}
       total={10}
       renderCount={(count) => (
-        <p className="text-small text-foreground font-medium ml-2">+{count} others</p>
+        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
       )}
     >
       <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
diff --git a/packages/components/avatar/src/use-avatar-group.ts b/packages/components/avatar/src/use-avatar-group.ts
index c74f12a7fa..461e902508 100644
--- a/packages/components/avatar/src/use-avatar-group.ts
+++ b/packages/components/avatar/src/use-avatar-group.ts
@@ -91,7 +91,7 @@ export function useAvatarGroup(props: UseAvatarGroupProps = {}) {
 
     const childProps = {
       className: clsx(
-        isFirstAvatar ? "ml-0" : !isGrid ? "-ml-2" : "",
+        isFirstAvatar ? "ms-0" : !isGrid ? "-ms-2" : "",
         isLastAvatar && remainingCount < 1 ? "hover:-translate-x-0" : "",
       ),
     };
diff --git a/packages/components/avatar/stories/avatar-group.stories.tsx b/packages/components/avatar/stories/avatar-group.stories.tsx
index df94eaf3ab..cb0e632469 100644
--- a/packages/components/avatar/stories/avatar-group.stories.tsx
+++ b/packages/components/avatar/stories/avatar-group.stories.tsx
@@ -102,7 +102,7 @@ export const CustomCount = {
     max: 3,
     total: 10,
     renderCount: (count: number) => (
-      <p className="text-sm text-black dark:text-white ml-2">+{count}</p>
+      <p className="text-sm text-black dark:text-white ms-2">+{count}</p>
     ),
   },
 };
diff --git a/packages/core/theme/src/components/avatar.ts b/packages/core/theme/src/components/avatar.ts
index 6578cf45ae..644a9ff6f8 100644
--- a/packages/core/theme/src/components/avatar.ts
+++ b/packages/core/theme/src/components/avatar.ts
@@ -114,7 +114,7 @@ const avatar = tv({
     isInGroup: {
       true: {
         base: [
-          "-ml-2 data-[hover=true]:-translate-x-3 transition-transform",
+          "-ms-2 data-[hover=true]:-translate-x-3 transition-transform",
           "data-[focus-visible=true]:-translate-x-3",
         ],
       },
@@ -197,7 +197,7 @@ const avatarGroup = tv({
 
 // calculated classNames
 // src/components/avatar/src/use-avatar-group.ts
-// -ml-2 hover:-translate-x-0 ml-0
+// -ms-2 hover:-translate-x-0 ms-0
 
 export type AvatarGroupVariantProps = VariantProps<typeof avatarGroup>;
 export type AvatarVariantProps = VariantProps<typeof avatar>;