feat: add support for avatar badge placement

.changeset/gold-weeks-rhyme.md

@@ -0,0 +1,15 @@
+---
+"@chakra-ui/avatar": minor
+"@chakra-ui/theme": patch
+---
+
+Add support for changing avatar badge placement.
+
+The badge placement can be set to `top-start`, `top-end`, `bottom-start` or
+`bottom-end`.
+
+```jsx live=false
+<Avatar name="Uchiha Itachi" src="https://uinames.com/api/photos/female/18.jpg">
+  <AvatarBadge placement="top-start" />
+</Avatar>
+```

packages/components/avatar/src/avatar-badge.tsx

@@ -7,31 +7,60 @@ import {
 import { cx } from "@chakra-ui/shared-utils"
 import { useAvatarStyles } from "./avatar-context"
 
-export interface AvatarBadgeProps extends HTMLChakraProps<"div"> {}
+type BadgePlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end"
+
+const placementMap: Record<BadgePlacement, SystemStyleObject> = {
+  "top-start": {
+    top: "0",
+    insetStart: "0",
+    transform: "translate(-25%, -25%)",
+  },
+  "top-end": {
+    top: "0",
+    insetEnd: "0",
+    transform: "translate(25%, -25%)",
+  },
+  "bottom-start": {
+    bottom: "0",
+    insetStart: "0",
+    transform: "translate(-25%, 25%)",
+  },
+  "bottom-end": {
+    bottom: "0",
+    insetEnd: "0",
+    transform: "translate(25%, 25%)",
+  },
+}
+
+export interface AvatarBadgeProps extends HTMLChakraProps<"div"> {
+  placement?: BadgePlacement
+}
 
 /**
  * AvatarBadge used to show extra badge to the top-right
  * or bottom-right corner of an avatar.
  */
 export const AvatarBadge = forwardRef<AvatarBadgeProps, "div">(
   function AvatarBadge(props, ref) {
+    const { placement = "bottom-end", className, ...rest } = props
     const styles = useAvatarStyles()
 
+    const placementStyles = placementMap[placement]
+
     const badgeStyles: SystemStyleObject = {
       position: "absolute",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      insetEnd: "0",
-      bottom: "0",
+      ...placementStyles,
       ...styles.badge,
     }
 
     return (
       <chakra.div
         ref={ref}
-        {...props}
-        className={cx("chakra-avatar__badge", props.className)}
+        {...rest}
+        className={cx("chakra-avatar__badge", className)}
         __css={badgeStyles}
       />
     )

packages/components/theme/src/components/avatar.ts

@@ -12,7 +12,6 @@ const { definePartsStyle, defineMultiStyleConfig } =
 
 const baseStyleBadge = defineStyle((props) => {
   return {
-    transform: "translate(25%, 25%)",
     borderRadius: "full",
     border: "0.2em solid",
     borderColor: mode("white", "gray.800")(props),