{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-simple",
  "type": "registry:ui",
  "title": "Checkbox Simple",
  "description": "A simple checkbox component with label and optional description.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-simple.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ninterface CheckboxSimpleProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  label?: string;\n  description?: string;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport function CheckboxSimple({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  label,\n  description,\n  disabled = false,\n  id,\n  className,\n}: CheckboxSimpleProps) {\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 flex items-center justify-center pt-px\">\n        <input\n          type=\"checkbox\"\n          id={inputId}\n          checked={isChecked}\n          onChange={handleChange}\n          disabled={disabled}\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      {(label || description) && (\n        <div className=\"flex flex-col gap-1\">\n          {label && (\n            <span className=\"text-[14px] font-medium leading-none tracking-[-0.01em] text-neutral-900 dark:text-neutral-100\">\n              {label}\n            </span>\n          )}\n          {description && (\n            <span className=\"text-[13px] leading-snug text-neutral-500 dark:text-neutral-400\">\n              {description}\n            </span>\n          )}\n        </div>\n      )}\n    </label>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/checkbox-simple.tsx"
    }
  ]
}