{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-indeterminate",
  "type": "registry:ui",
  "title": "Checkbox Indeterminate",
  "description": "A checkbox with three states: checked, unchecked, and indeterminate.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-indeterminate.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ntype CheckedState = boolean | \"indeterminate\";\n\ninterface CheckboxIndeterminateProps {\n  checked?: CheckedState;\n  defaultChecked?: CheckedState;\n  onCheckedChange?: (checked: CheckedState) => void;\n  label?: string;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport function CheckboxIndeterminate({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  label,\n  disabled = false,\n  id,\n  className,\n}: CheckboxIndeterminateProps) {\n  const [internalChecked, setInternalChecked] =\n    React.useState<CheckedState>(defaultChecked);\n  const isControlled = checked !== undefined;\n  const currentState = isControlled ? checked : internalChecked;\n  const inputId = id || React.useId();\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = currentState === \"indeterminate\";\n    }\n  }, [currentState]);\n\n  const handleChange = () => {\n    const newState = currentState === true ? false : true;\n    if (!isControlled) {\n      setInternalChecked(newState);\n    }\n    onCheckedChange?.(newState);\n  };\n\n  const isChecked = currentState === true;\n  const isIndeterminate = currentState === \"indeterminate\";\n  const isFilled = isChecked || isIndeterminate;\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          ref={inputRef}\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            isFilled\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              !isFilled &&\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 mode=\"wait\" 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                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.1 }}\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                  transition={{ duration: 0.2, ease: \"easeOut\" }}\n                />\n              </motion.svg>\n            )}\n            {isIndeterminate && (\n              <motion.svg\n                key=\"minus\"\n                viewBox=\"0 0 12 12\"\n                className=\"h-3 w-3\"\n                fill=\"none\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.1 }}\n              >\n                <motion.path\n                  d=\"M3 6h6\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  initial={{ pathLength: 0 }}\n                  animate={{ pathLength: 1 }}\n                  transition={{ duration: 0.15, 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-indeterminate.tsx"
    }
  ]
}