{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-image-checkbox-shadcnui",
  "type": "registry:component",
  "title": "Native Image Checkbox",
  "description": "Image checkbox component with grayscale filter and checkmark indicator.",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/native/native-image-checkbox-shadcnui.tsx",
      "content": "\"use client\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { Check } from \"lucide-react\";\n\nexport interface NativeImageCheckboxProps {\n  /**\n   * URL of the image\n   */\n  src: string;\n  /**\n   * Alt text for the image\n   */\n  alt: string;\n  /**\n   * Whether the checkbox is selected\n   */\n  selected: boolean;\n  /**\n   * Callback when the checkbox is clicked\n   */\n  onSelect: (selected: boolean) => void;\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 image\n   */\n  imageClassName?: string;\n}\n\nconst sizeConfig = {\n  sm: {\n    container: \"w-20 h-20\",\n    check: \"h-5 w-5\",\n    checkContainer: \"h-6 w-6\",\n  },\n  md: {\n    container: \"w-28 h-28\",\n    check: \"h-6 w-6\",\n    checkContainer: \"h-7 w-7\",\n  },\n  lg: {\n    container: \"w-36 h-36\",\n    check: \"h-7 w-7\",\n    checkContainer: \"h-8 w-8\",\n  },\n  xl: {\n    container: \"w-44 h-44\",\n    check: \"h-8 w-8\",\n    checkContainer: \"h-9 w-9\",\n  },\n};\n\nexport function NativeImageCheckbox({\n  src,\n  alt,\n  selected,\n  onSelect,\n  size = \"md\",\n  className,\n  imageClassName,\n}: NativeImageCheckboxProps) {\n  const { container, check, checkContainer } = sizeConfig[size];\n\n  return (\n    <motion.div\n      className={cn(\n        \"relative cursor-pointer rounded-lg overflow-hidden\",\n        container,\n        className\n      )}\n      onClick={() => onSelect(!selected)}\n      whileTap={{ scale: 0.95 }}\n      transition={{\n        type: \"spring\",\n        stiffness: 300,\n        damping: 20,\n      }}\n    >\n      {/* Image with grayscale filter when not selected */}\n      <Avatar className=\"w-full h-full rounded-none\">\n        <motion.div\n          className=\"w-full h-full\"\n          animate={{\n            filter: selected ? \"grayscale(0%)\" : \"grayscale(100%)\",\n            scale: selected ? 1 : 0.95,\n          }}\n          transition={{\n            type: \"spring\",\n            stiffness: 200,\n            damping: 25,\n            filter: { duration: 0.3 },\n          }}\n        >\n          <AvatarImage\n            src={src}\n            alt={alt}\n            className={cn(\"w-full h-full object-cover\", imageClassName)}\n          />\n          <AvatarFallback className=\"w-full h-full rounded-none\">\n            {alt.slice(0, 2).toUpperCase()}\n          </AvatarFallback>\n        </motion.div>\n      </Avatar>\n\n      {/* Overlay for better check visibility */}\n      <motion.div\n        className=\"absolute inset-0 bg-black\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: selected ? 0 : 0.15 }}\n        transition={{ duration: 0.3 }}\n      />\n\n      {/* Check icon with green circle */}\n      <motion.div\n        className=\"absolute -top-1 -right-1\"\n        initial={{ scale: 0, opacity: 0 }}\n        animate={{\n          scale: selected ? 1 : 0,\n          opacity: selected ? 1 : 0,\n        }}\n        transition={{\n          type: \"spring\",\n          stiffness: 300,\n          damping: 20,\n          opacity: { duration: 0.2 },\n        }}\n      >\n        <div\n          className={cn(\n            \"bg-green-500 rounded-full flex items-center justify-center shadow-lg\",\n            checkContainer\n          )}\n        >\n          <Check className={cn(\"text-white stroke-[3]\", check)} />\n        </div>\n      </motion.div>\n\n      {/* Ring border when selected */}\n      <motion.div\n        className=\"absolute inset-0 rounded-lg border-2 border-green-500\"\n        initial={{ opacity: 0 }}\n        animate={{ opacity: selected ? 1 : 0 }}\n        transition={{ duration: 0.3 }}\n      />\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/native-image-checkbox-shadcnui.tsx"
    }
  ]
}