{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-tree",
  "type": "registry:ui",
  "title": "Checkbox Tree",
  "description": "A hierarchical tree checkbox for nested selections with expand/collapse.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/checkbox-tree.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\ninterface TreeNode {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n}\n\ninterface CheckboxTreeProps {\n  nodes: TreeNode[];\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  className?: string;\n}\n\nfunction getAllChildIds(node: TreeNode): string[] {\n  const ids = [node.id];\n  if (node.children) {\n    node.children.forEach((child) => {\n      ids.push(...getAllChildIds(child));\n    });\n  }\n  return ids;\n}\n\nfunction getNodeState(\n  node: TreeNode,\n  selectedIds: string[],\n): \"checked\" | \"indeterminate\" | \"unchecked\" {\n  if (!node.children || node.children.length === 0) {\n    return selectedIds.includes(node.id) ? \"checked\" : \"unchecked\";\n  }\n\n  const childIds = node.children.flatMap((child) => getAllChildIds(child));\n  const selectedChildCount = childIds.filter((id) =>\n    selectedIds.includes(id),\n  ).length;\n\n  if (selectedChildCount === 0) return \"unchecked\";\n  if (selectedChildCount === childIds.length) return \"checked\";\n  return \"indeterminate\";\n}\n\ninterface TreeNodeItemProps {\n  node: TreeNode;\n  level: number;\n  selectedIds: string[];\n  onToggle: (node: TreeNode, checked: boolean) => void;\n}\n\nfunction TreeNodeItem({\n  node,\n  level,\n  selectedIds,\n  onToggle,\n}: TreeNodeItemProps) {\n  const [isExpanded, setIsExpanded] = React.useState(true);\n  const hasChildren = node.children && node.children.length > 0;\n  const state = getNodeState(node, selectedIds);\n  const isChecked = state === \"checked\";\n  const isIndeterminate = state === \"indeterminate\";\n  const isFilled = isChecked || isIndeterminate;\n\n  const handleChange = () => {\n    onToggle(node, state !== \"checked\");\n  };\n\n  return (\n    <div className=\"flex flex-col\">\n      <div\n        className=\"group flex items-center gap-1.5 py-[3px]\"\n        style={{ paddingLeft: `${level * 20}px` }}\n      >\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            onClick={() => setIsExpanded(!isExpanded)}\n            className=\"flex h-5 w-5 items-center justify-center rounded-[4px] text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-600 dark:text-neutral-600 dark:hover:bg-neutral-800 dark:hover:text-neutral-400\"\n          >\n            <motion.svg\n              viewBox=\"0 0 12 12\"\n              className=\"h-3.5 w-3.5\"\n              fill=\"none\"\n              animate={{ rotate: isExpanded ? 90 : 0 }}\n              transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n            >\n              <path\n                d=\"M4.5 2.5L8 6L4.5 9.5\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </motion.svg>\n          </button>\n        ) : (\n          <div className=\"w-5\" />\n        )}\n        <label className=\"inline-flex cursor-pointer items-center gap-2.5\">\n          <div className=\"relative flex items-center justify-center\">\n            <input\n              type=\"checkbox\"\n              checked={isChecked}\n              onChange={handleChange}\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 group-hover:border-neutral-400 dark:border-neutral-700 dark:group-hover:border-neutral-500\",\n              )}\n              whileTap={{ 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          <span\n            className={cn(\n              \"text-[14px] tracking-[-0.01em]\",\n              hasChildren\n                ? \"font-medium text-neutral-900 dark:text-neutral-100\"\n                : \"text-neutral-700 dark:text-neutral-300\",\n            )}\n          >\n            {node.label}\n          </span>\n        </label>\n      </div>\n      <AnimatePresence initial={false}>\n        {hasChildren && isExpanded && (\n          <motion.div\n            initial={{ height: 0, opacity: 0 }}\n            animate={{ height: \"auto\", opacity: 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{ duration: 0.2, ease: [0.2, 0.8, 0.2, 1] }}\n            className=\"overflow-hidden\"\n          >\n            {node.children!.map((child) => (\n              <TreeNodeItem\n                key={child.id}\n                node={child}\n                level={level + 1}\n                selectedIds={selectedIds}\n                onToggle={onToggle}\n              />\n            ))}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n\nexport function CheckboxTree({\n  nodes,\n  value,\n  defaultValue = [],\n  onValueChange,\n  className,\n}: CheckboxTreeProps) {\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n  const isControlled = value !== undefined;\n  const selectedIds = isControlled ? value : internalValue;\n\n  const handleToggle = (node: TreeNode, checked: boolean) => {\n    const affectedIds = getAllChildIds(node);\n    let newValue: string[];\n\n    if (checked) {\n      newValue = [...new Set([...selectedIds, ...affectedIds])];\n    } else {\n      newValue = selectedIds.filter((id) => !affectedIds.includes(id));\n    }\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onValueChange?.(newValue);\n  };\n\n  return (\n    <div className={cn(\"flex flex-col\", className)}>\n      {nodes.map((node) => (\n        <TreeNodeItem\n          key={node.id}\n          node={node}\n          level={0}\n          selectedIds={selectedIds}\n          onToggle={handleToggle}\n        />\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/checkbox-tree.tsx"
    }
  ]
}