{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-checkbox",
  "title": "Glass Checkbox",
  "description": "A liquid glass styled checkbox with animated check indicator.",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/liquid-glass/glass-checkbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { motion, type Variants } from \"framer-motion\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst checkVariants: Variants = {\n  initial: { scale: 0, opacity: 0 },\n  checked: {\n    scale: 1,\n    opacity: 1,\n    transition: {\n      type: \"spring\",\n      duration: 0.2,\n      bounce: 0.5,\n    },\n  },\n  unchecked: {\n    scale: 0,\n    opacity: 0,\n    transition: {\n      duration: 0.1,\n    },\n  },\n}\n\nexport interface GlassCheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  label?: string\n}\n\nconst GlassCheckbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, GlassCheckboxProps>(\n  ({ className, label, id, ...props }, ref) => {\n    const checkboxId = id || \"glass-checkbox-id\"\n\n    return (\n      <div className=\"flex items-center gap-3\">\n        <CheckboxPrimitive.Root\n          ref={ref}\n          id={checkboxId}\n          className={cn(\n            \"peer h-5 w-5 shrink-0 rounded-md\",\n            \"bg-white/10 backdrop-blur-xl border border-white/30\",\n            \"shadow-[0_2px_8px_rgba(0,0,0,0.2)]\",\n            \"transition-all duration-200\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"data-[state=checked]:bg-linear-to-r data-[state=checked]:from-cyan-500/60 data-[state=checked]:to-blue-500/60\",\n            \"data-[state=checked]:border-white/40\",\n            className,\n          )}\n          {...props}\n        >\n          <CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center text-white\")} asChild>\n            <motion.div variants={checkVariants} initial=\"initial\" animate=\"checked\" exit=\"unchecked\">\n              <Check className=\"h-3.5 w-3.5\" strokeWidth={3} />\n            </motion.div>\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n        {label && (\n          <label\n            htmlFor={checkboxId}\n            className=\"text-sm font-medium text-white/80 cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    )\n  },\n)\nGlassCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { GlassCheckbox }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}