{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-user-card-shadcnui",
  "type": "registry:component",
  "title": "Native User Card",
  "description": "Compact user profile card with avatar, name, handle, and action button with spring animations",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-user-card-shadcnui.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionConfig } from \"framer-motion\";\nimport { ArrowRight } from \"lucide-react\";\nimport Link from \"next/link\";\n\ninterface NativeUserCardProps {\n  imageSrc: string;\n  name: string;\n  handle: string;\n  href?: string;\n  onClick?: () => void;\n  className?: string;\n}\n\nconst transition = {\n  type: \"spring\" as const,\n  stiffness: 400,\n  damping: 30,\n};\n\nconst wrapperClassName =\n  \"group block w-full max-w-full rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n\nexport function NativeUserCard({\n  imageSrc,\n  name,\n  handle,\n  href = \"#\",\n  onClick,\n  className,\n}: NativeUserCardProps) {\n  const card = (\n    <motion.div\n      initial={{ opacity: 0, scale: 0.98, y: 5 }}\n      animate={{ opacity: 1, scale: 1, y: 0 }}\n      whileTap={{ scale: 0.98 }}\n      className={cn(\n        \"flex w-full max-w-full items-center justify-between gap-4 rounded-xl border border-border bg-card p-1\",\n        \"transition-colors duration-200 group-hover:bg-accent/50\",\n        className\n      )}\n    >\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <div\n          aria-hidden=\"true\"\n          className=\"relative h-10 w-10 shrink-0 sm:h-12 sm:w-12\"\n        >\n          <Avatar className=\"h-full w-full rounded-lg\">\n            <AvatarImage src={imageSrc} alt=\"\" className=\"object-cover\" />\n            <AvatarFallback className=\"flex h-full w-full items-center justify-center rounded-lg bg-muted font-semibold text-muted-foreground\">\n              {name.charAt(0).toUpperCase()}\n            </AvatarFallback>\n          </Avatar>\n          <span className=\"pointer-events-none absolute inset-0 rounded-lg ring-1 ring-inset ring-black/10 dark:ring-white/10\" />\n        </div>\n\n        <div className=\"flex min-w-0 flex-col\">\n          <p className=\"truncate text-sm font-semibold leading-tight tracking-tight text-foreground\">\n            {name}\n          </p>\n          <p className=\"truncate text-xs font-medium text-muted-foreground\">\n            {handle}\n          </p>\n        </div>\n      </div>\n\n      <span\n        aria-hidden=\"true\"\n        className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground sm:h-12 sm:w-12\"\n      >\n        <ArrowRight className=\"h-4 w-4 transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-safe:group-hover:translate-x-[3px]\" />\n      </span>\n    </motion.div>\n  );\n\n  return (\n    <MotionConfig transition={transition} reducedMotion=\"user\">\n      {onClick ? (\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-label={`View ${name}'s profile`}\n          className={wrapperClassName}\n        >\n          {card}\n        </button>\n      ) : (\n        <Link\n          href={href}\n          aria-label={`View ${name}'s profile`}\n          className={wrapperClassName}\n        >\n          {card}\n        </Link>\n      )}\n    </MotionConfig>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-user-card-shadcnui.tsx"
    }
  ]
}