{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-avatar-with-name-shadcnui",
  "type": "registry:component",
  "title": "Native Avatar With Name",
  "description": "Avatar component that displays a name tooltip on hover with directional animations.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-avatar-with-name-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 NativeAvatarProps {\n  /**\n   * URL of the avatar image\n   */\n  src?: string;\n  /**\n   * Name to display on hover\n   */\n  name: string;\n  /**\n   * Fallback text when image fails to load (usually initials)\n   */\n  fallback?: string;\n  /**\n   * Size variant of the avatar\n   * Default: \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /**\n   * Direction from which the name appears\n   * Default: \"bottom\"\n   */\n  direction?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /**\n   * Additional class names for the container\n   */\n  className?: string;\n  /**\n   * Additional class names for the name label\n   */\n  nameClassName?: string;\n  /**\n   * Additional class names for the motion container\n   */\n  motionClassName?: string;\n}\n\nconst sizeVariants = {\n  sm: \"h-10 w-10\",\n  md: \"h-14 w-14\",\n  lg: \"h-20 w-20\",\n  xl: \"h-28 w-28\",\n};\n\nconst nameSizeVariants = {\n  sm: \"text-xs px-2 py-1\",\n  md: \"text-sm px-3 py-1.5\",\n  lg: \"text-base px-4 py-2\",\n  xl: \"text-lg px-5 py-2.5\",\n};\n\nconst directionVariants = {\n  top: {\n    initial: { y: 20, opacity: 0, filter: \"blur(4px)\" },\n    animate: { y: -8, opacity: 1, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" } },\n    exit: { y: 20, opacity: 0, filter: \"blur(4px)\" },\n  },\n  bottom: {\n    initial: { y: -20, opacity: 0, filter: \"blur(4px)\" },\n    animate: { y: 8, opacity: 1, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" } },\n    exit: { y: -20, opacity: 0, filter: \"blur(4px)\" },\n  },\n  left: {\n    initial: { x: 20, opacity: 0, filter: \"blur(4px)\" },\n    animate: { x: -8, opacity: 1, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" } },\n    exit: { x: 20, opacity: 0, filter: \"blur(4px)\" },\n  },\n  right: {\n    initial: { x: -20, opacity: 0, filter: \"blur(4px)\" },\n    animate: { x: 8, opacity: 1, filter: \"blur(0px)\", transitionEnd: { filter: \"none\" } },\n    exit: { x: -20, opacity: 0, filter: \"blur(4px)\" },\n  },\n};\n\nconst positionClasses = {\n  top: \"bottom-full left-1/2 -translate-x-1/2 mb-2\",\n  bottom: \"top-full left-1/2 -translate-x-1/2 mt-2\",\n  left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n  right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n};\n\nexport function NativeAvatarWithName({\n  src,\n  name,\n  fallback,\n  size = \"md\",\n  direction = \"bottom\",\n  className,\n  nameClassName,\n  motionClassName,\n}: NativeAvatarProps) {\n  const [isVisible, setIsVisible] = useState(false);\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      <div\n        className={cn(\n          \"relative inline-flex items-center justify-center\",\n          className\n        )}\n        onMouseEnter={() => setIsVisible(true)}\n        onMouseLeave={() => setIsVisible(false)}\n        onFocus={() => setIsVisible(true)}\n        onBlur={(e) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n            setIsVisible(false);\n          }\n        }}\n      >\n        <motion.div\n          whileHover={{ scale: 1.05 }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n          className={motionClassName}\n        >\n          <Avatar\n            className={cn(sizeVariants[size], \"ring-2 ring-background shadow-lg\")}\n          >\n            <AvatarImage src={src || \"/placeholder.svg\"} alt={name} />\n            <AvatarFallback className=\"text-muted-foreground font-semibold\">\n              {fallback || getInitials(name)}\n            </AvatarFallback>\n          </Avatar>\n        </motion.div>\n\n        <AnimatePresence>\n          {isVisible && (\n            <motion.div\n              aria-hidden=\"true\"\n              initial={directionVariants[direction].initial}\n              animate={directionVariants[direction].animate}\n              exit={directionVariants[direction].exit}\n              transition={{\n                type: \"spring\",\n                stiffness: 300,\n                damping: 25,\n                opacity: { duration: 0.2 },\n                filter: { duration: 0.2 },\n              }}\n              className={cn(\n                \"absolute z-10 whitespace-nowrap rounded-md bg-popover text-popover-foreground shadow-lg border pointer-events-none\",\n                nameSizeVariants[size],\n                positionClasses[direction],\n                nameClassName\n              )}\n            >\n              <span className=\"font-medium\">{name}</span>\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-avatar-with-name-shadcnui.tsx"
    }
  ]
}