{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-terms",
  "type": "registry:ui",
  "title": "Checkbox Terms",
  "description": "A checkbox for accepting terms of service and privacy policy with linked text.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-terms.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ninterface CheckboxTermsProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  termsText?: string;\n  termsLink?: string;\n  privacyText?: string;\n  privacyLink?: string;\n  required?: boolean;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport function CheckboxTerms({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  termsText = \"Terms of Service\",\n  termsLink = \"#\",\n  privacyText = \"Privacy Policy\",\n  privacyLink = \"#\",\n  required = false,\n  disabled = false,\n  id,\n  className,\n}: CheckboxTermsProps) {\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);\n  const isControlled = checked !== undefined;\n  const isChecked = isControlled ? checked : internalChecked;\n  const inputId = id || React.useId();\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newChecked = e.target.checked;\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n    onCheckedChange?.(newChecked);\n  };\n\n  return (\n    <label\n      htmlFor={inputId}\n      className={cn(\n        \"group inline-flex cursor-pointer items-start gap-3\",\n        disabled && \"pointer-events-none opacity-40\",\n        className,\n      )}\n    >\n      <div className=\"relative mt-0.5 flex items-center justify-center\">\n        <input\n          type=\"checkbox\"\n          id={inputId}\n          checked={isChecked}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          className=\"peer sr-only\"\n        />\n        <motion.div\n          className={cn(\n            \"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors duration-150\",\n            isChecked\n              ? \"border-neutral-900 bg-neutral-900 text-white dark:border-neutral-100 dark:bg-neutral-100 dark:text-neutral-950\"\n              : \"border-neutral-300 bg-transparent dark:border-neutral-700\",\n            !disabled &&\n              !isChecked &&\n              \"group-hover:border-neutral-400 dark:group-hover:border-neutral-500\",\n            \"peer-focus-visible:ring-2 peer-focus-visible:ring-neutral-900/20 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-neutral-100/20 dark:peer-focus-visible:ring-offset-neutral-950\",\n          )}\n          whileTap={disabled ? undefined : { scale: 0.92 }}\n          transition={{ type: \"spring\", stiffness: 400, damping: 25 }}\n        >\n          <AnimatePresence initial={false}>\n            {isChecked && (\n              <motion.svg\n                key=\"check\"\n                viewBox=\"0 0 12 12\"\n                className=\"h-3 w-3\"\n                fill=\"none\"\n              >\n                <motion.path\n                  d=\"M2.5 6.5L5 9L9.5 3.5\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  initial={{ pathLength: 0 }}\n                  animate={{ pathLength: 1 }}\n                  exit={{ pathLength: 0 }}\n                  transition={{ duration: 0.2, ease: \"easeOut\" }}\n                />\n              </motion.svg>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      </div>\n      <span className=\"text-[13px] leading-relaxed text-neutral-500 dark:text-neutral-400\">\n        I agree to the{\" \"}\n        <a\n          href={termsLink}\n          onClick={(e) => e.stopPropagation()}\n          className=\"text-neutral-900 underline decoration-neutral-300 underline-offset-[3px] transition-colors hover:decoration-neutral-500 dark:text-neutral-100 dark:decoration-neutral-700 dark:hover:decoration-neutral-500\"\n        >\n          {termsText}\n        </a>{\" \"}\n        and{\" \"}\n        <a\n          href={privacyLink}\n          onClick={(e) => e.stopPropagation()}\n          className=\"text-neutral-900 underline decoration-neutral-300 underline-offset-[3px] transition-colors hover:decoration-neutral-500 dark:text-neutral-100 dark:decoration-neutral-700 dark:hover:decoration-neutral-500\"\n        >\n          {privacyText}\n        </a>\n        {required && (\n          <span className=\"ml-0.5 text-neutral-400 dark:text-neutral-600\">\n            *\n          </span>\n        )}\n      </span>\n    </label>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/checkbox-terms.tsx"
    }
  ]
}