{
  "name": "avatar-group-rtl-demo",
  "type": "registry:example",
  "registryDependencies": [
    "avatar",
    "avatar-group"
  ],
  "files": [
    {
      "path": "examples/avatar-group-rtl-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/bases/base/ui/avatar\";\nimport { AvatarGroup } from \"@/registry/bases/base/ui/avatar-group\";\n\nconst avatars = [\n  {\n    name: \"shadcn\",\n    src: \"https://github.com/shadcn.png\",\n    fallback: \"CN\",\n  },\n  {\n    name: \"Ethan Niser\",\n    src: \"https://github.com/ethanniser.png\",\n    fallback: \"EN\",\n  },\n  {\n    name: \"Guillermo Rauch\",\n    src: \"https://github.com/rauchg.png\",\n    fallback: \"GR\",\n  },\n  {\n    name: \"Lee Robinson\",\n    src: \"https://github.com/leerob.png\",\n    fallback: \"LR\",\n  },\n];\n\nexport default function AvatarGroupRtlDemo() {\n  return (\n    <div className=\"grid gap-6 md:grid-cols-2\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">RTL</h3>\n        <AvatarGroup dir=\"rtl\">\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Reverse RTL</h3>\n        <AvatarGroup dir=\"rtl\" reverse>\n          {avatars.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Vertical RTL</h3>\n        <div className=\"flex justify-center\">\n          <AvatarGroup orientation=\"vertical\" dir=\"rtl\">\n            {avatars.map((avatar, index) => (\n              <Avatar key={index}>\n                <AvatarImage src={avatar.src} />\n                <AvatarFallback>{avatar.fallback}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"font-medium text-sm\">Vertical reverse RTL</h3>\n        <div className=\"flex justify-center\">\n          <AvatarGroup orientation=\"vertical\" dir=\"rtl\" reverse>\n            {avatars.map((avatar, index) => (\n              <Avatar key={index}>\n                <AvatarImage src={avatar.src} />\n                <AvatarFallback>{avatar.fallback}</AvatarFallback>\n              </Avatar>\n            ))}\n          </AvatarGroup>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}