{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-colored",
  "type": "registry:ui",
  "title": "Checkbox Colored",
  "description": "A checkbox with customizable color themes including blue, green, red, and more.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-colored.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ntype CheckboxColor =\n  | \"default\"\n  | \"blue\"\n  | \"green\"\n  | \"red\"\n  | \"yellow\"\n  | \"purple\"\n  | \"pink\";\n\ninterface CheckboxColoredProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  label?: string;\n  color?: CheckboxColor;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n}\n\nconst colorStyles: Record<\n  CheckboxColor,\n  { checked: string; hover: string; ring: string }\n> = {\n  default: {\n    checked:\n      \"border-neutral-900 bg-neutral-900 dark:border-neutral-100 dark:bg-neutral-100\",\n    hover: \"group-hover:border-neutral-400 dark:group-hover:border-neutral-500\",\n    ring: \"peer-focus-visible:ring-neutral-900/20 dark:peer-focus-visible:ring-neutral-100/20\",\n  },\n  blue: {\n    checked:\n      \"border-blue-600 bg-blue-600 dark:border-blue-400 dark:bg-blue-400\",\n    hover: \"group-hover:border-blue-300 dark:group-hover:border-blue-600\",\n    ring: \"peer-focus-visible:ring-blue-600/20 dark:peer-focus-visible:ring-blue-400/20\",\n  },\n  green: {\n    checked:\n      \"border-emerald-600 bg-emerald-600 dark:border-emerald-400 dark:bg-emerald-400\",\n    hover: \"group-hover:border-emerald-300 dark:group-hover:border-emerald-600\",\n    ring: \"peer-focus-visible:ring-emerald-600/20 dark:peer-focus-visible:ring-emerald-400/20\",\n  },\n  red: {\n    checked: \"border-red-600 bg-red-600 dark:border-red-400 dark:bg-red-400\",\n    hover: \"group-hover:border-red-300 dark:group-hover:border-red-600\",\n    ring: \"peer-focus-visible:ring-red-600/20 dark:peer-focus-visible:ring-red-400/20\",\n  },\n  yellow: {\n    checked:\n      \"border-amber-500 bg-amber-500 dark:border-amber-400 dark:bg-amber-400\",\n    hover: \"group-hover:border-amber-300 dark:group-hover:border-amber-600\",\n    ring: \"peer-focus-visible:ring-amber-500/20 dark:peer-focus-visible:ring-amber-400/20\",\n  },\n  purple: {\n    checked:\n      \"border-violet-600 bg-violet-600 dark:border-violet-400 dark:bg-violet-400\",\n    hover: \"group-hover:border-violet-300 dark:group-hover:border-violet-600\",\n    ring: \"peer-focus-visible:ring-violet-600/20 dark:peer-focus-visible:ring-violet-400/20\",\n  },\n  pink: {\n    checked:\n      \"border-pink-600 bg-pink-600 dark:border-pink-400 dark:bg-pink-400\",\n    hover: \"group-hover:border-pink-300 dark:group-hover:border-pink-600\",\n    ring: \"peer-focus-visible:ring-pink-600/20 dark:peer-focus-visible:ring-pink-400/20\",\n  },\n};\n\nexport function CheckboxColored({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  label,\n  color = \"default\",\n  disabled = false,\n  id,\n  className,\n}: CheckboxColoredProps) {\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  const styles = colorStyles[color];\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-center gap-3\",\n        disabled && \"pointer-events-none opacity-40\",\n        className,\n      )}\n    >\n      <div className=\"relative flex items-center justify-center\">\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              ? cn(\n                  styles.checked,\n                  color === \"yellow\"\n                    ? \"text-neutral-950 dark:text-neutral-950\"\n                    : \"text-white dark:text-neutral-950\",\n                )\n              : \"border-neutral-300 bg-transparent dark:border-neutral-700\",\n            !disabled && !isChecked && styles.hover,\n            \"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-white dark:peer-focus-visible:ring-offset-neutral-950\",\n            styles.ring,\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 && (\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    </label>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/checkbox-colored.tsx"
    }
  ]
}