{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-avatar-expand-shadcnui",
  "type": "registry:component",
  "title": "Native Avatar Expand",
  "description": "Avatar component that expands to reveal the name on click with smooth animations.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-avatar-expand-shadcnui.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { AnimatePresence, motion, MotionConfig } from \"framer-motion\";\nimport { useState } from \"react\";\n\nexport interface NativeAvatarExpandProps {\n  /**\n   * URL of the avatar image\n   */\n  src?: string;\n  /**\n   * Name of the person or entity\n   */\n  name: string;\n  /**\n   * Size variant\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * Additional classes for the container\n   */\n  className?: string;\n  /**\n   * Additional classes for the avatar\n   */\n  avatarClassName?: string;\n  /**\n   * Additional classes for the name text\n   */\n  nameClassName?: string;\n}\n\nconst sizeConfig = {\n  sm: {\n    avatar: \"h-10 w-10\",\n    text: \"text-sm\",\n  },\n  md: {\n    avatar: \"h-12 w-12\",\n    text: \"text-base\",\n  },\n  lg: {\n    avatar: \"h-16 w-16\",\n    text: \"text-lg\",\n  },\n  xl: {\n    avatar: \"h-20 w-20\",\n    text: \"text-xl\",\n  },\n};\n\nexport function NativeAvatarExpand({\n  src,\n  name,\n  size = \"md\",\n  className,\n  avatarClassName,\n  nameClassName,\n}: NativeAvatarExpandProps) {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const { avatar, text } = sizeConfig[size];\n\n  const getInitials = (name: string) => {\n    return name\n      .split(\" \")\n      .filter(Boolean)\n      .map((n) => n[0])\n      .join(\"\")\n      .toUpperCase()\n      .slice(0, 2);\n  };\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <motion.button\n        type=\"button\"\n        aria-expanded={isExpanded}\n        aria-label={name}\n        className={cn(\n          \"inline-flex items-center cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          className\n        )}\n        layout\n        whileTap={{ scale: 0.97 }}\n        onClick={() => setIsExpanded(!isExpanded)}\n      >\n        <motion.div layout=\"position\" className=\"relative\">\n          <Avatar className={cn(avatar, avatarClassName)}>\n            <AvatarImage src={src || \"/placeholder.svg\"} alt=\"\" />\n            <AvatarFallback>{getInitials(name)}</AvatarFallback>\n          </Avatar>\n          <span className=\"pointer-events-none absolute inset-0 rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/10\" />\n        </motion.div>\n\n        <AnimatePresence>\n          {isExpanded && (\n            <motion.div\n              initial={{ width: 0, opacity: 0, filter: \"blur(4px)\" }}\n              animate={{\n                width: \"auto\",\n                opacity: 1,\n                filter: \"blur(0px)\",\n              }}\n              exit={{\n                width: 0,\n                opacity: 0,\n                filter: \"blur(4px)\",\n              }}\n              transition={{\n                type: \"spring\",\n                stiffness: 200,\n                damping: 25,\n                opacity: { duration: 0.2 },\n                filter: { duration: 0.2 },\n              }}\n              className=\"overflow-hidden\"\n            >\n              <motion.span\n                initial={{ x: -20 }}\n                animate={{ x: 0 }}\n                exit={{ x: -20 }}\n                transition={{\n                  type: \"spring\",\n                  stiffness: 200,\n                  damping: 25,\n                }}\n                className={cn(\n                  \"block font-medium whitespace-nowrap ml-1\",\n                  text,\n                  nameClassName\n                )}\n              >\n                {name}\n              </motion.span>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </motion.button>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-avatar-expand-shadcnui.tsx"
    }
  ]
}