{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-148",
  "type": "registry:component",
  "title": "Comp 148",
  "description": "Comp 148",
  "files": [
    {
      "path": "registry/ui-basic/comp-148.tsx",
      "content": "\"use client\";\r\n\r\nimport { Fragment, useId } from \"react\";\r\n\r\nimport { Checkbox } from \"@/components/ui/checkbox\";\r\nimport { CheckboxTree } from \"@/components/ui/checkbox-tree\";\r\nimport { Label } from \"@/components/ui/label\";\r\n\r\ninterface TreeNode {\r\n\tid: string;\r\n\tlabel: string;\r\n\tdefaultChecked?: boolean;\r\n\tchildren?: TreeNode[];\r\n}\r\n\r\nconst initialTree: TreeNode = {\r\n\tid: \"1\",\r\n\tlabel: \"Natural Wonders\",\r\n\tchildren: [\r\n\t\t{ id: \"2\", label: \"Mountains\", defaultChecked: true },\r\n\t\t{\r\n\t\t\tid: \"3\",\r\n\t\t\tlabel: \"Waterfalls\",\r\n\t\t\tchildren: [\r\n\t\t\t\t{ id: \"4\", label: \"Niagara Falls\" },\r\n\t\t\t\t{ id: \"5\", label: \"Angel Falls\", defaultChecked: true },\r\n\t\t\t],\r\n\t\t},\r\n\t\t{ id: \"6\", label: \"Grand Canyon\" },\r\n\t],\r\n};\r\n\r\nexport default function Component() {\r\n\tconst id = useId();\r\n\treturn (\r\n\t\t<div className=\"space-y-3\">\r\n\t\t\t<CheckboxTree\r\n\t\t\t\ttree={initialTree}\r\n\t\t\t\trenderNode={({ node, isChecked, onCheckedChange, children }) => (\r\n\t\t\t\t\t<Fragment key={`${id}-${node.id}`}>\r\n\t\t\t\t\t\t<div className=\"flex items-center gap-2\">\r\n\t\t\t\t\t\t\t<Checkbox\r\n\t\t\t\t\t\t\t\tid={`${id}-${node.id}`}\r\n\t\t\t\t\t\t\t\tchecked={isChecked}\r\n\t\t\t\t\t\t\t\tonCheckedChange={onCheckedChange}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t<Label htmlFor={`${id}-${node.id}`}>{node.label}</Label>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t{children && <div className=\"ms-6 space-y-3\">{children}</div>}\r\n\t\t\t\t\t</Fragment>\r\n\t\t\t\t)}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/checkbox.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\nimport { Check } from \"lucide-react\";\r\n\r\nconst Checkbox = React.forwardRef<\r\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<CheckboxPrimitive.Root\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t>\r\n\t\t<CheckboxPrimitive.Indicator\r\n\t\t\tclassName={cn(\"flex items-center justify-center text-current\")}\r\n\t\t>\r\n\t\t\t<Check className=\"h-4 w-4\" />\r\n\t\t</CheckboxPrimitive.Indicator>\r\n\t</CheckboxPrimitive.Root>\r\n));\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\r\n\r\nexport { Checkbox };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/checkbox-tree.tsx",
      "content": "/**\n * IMPORTANT: This component was built for demo purposes only and has not been tested in production.\n * It serves as a proof of concept for a checkbox tree implementation.\n * If you're interested in collaborating to create a more robust, production-ready\n * headless component, your contributions are welcome!\n */\n\n\"use client\";\n\nimport React, { useCallback, useMemo, useState } from \"react\";\n\ninterface TreeNode {\n\tid: string;\n\tlabel: string;\n\tdefaultChecked?: boolean;\n\tchildren?: TreeNode[];\n}\n\nfunction useCheckboxTree(initialTree: TreeNode) {\n\tconst initialCheckedNodes = useMemo(() => {\n\t\tconst checkedSet = new Set<string>();\n\t\tconst initializeCheckedNodes = (node: TreeNode) => {\n\t\t\tif (node.defaultChecked) {\n\t\t\t\tcheckedSet.add(node.id);\n\t\t\t}\n\t\t\tnode.children?.forEach(initializeCheckedNodes);\n\t\t};\n\t\tinitializeCheckedNodes(initialTree);\n\t\treturn checkedSet;\n\t}, [initialTree]);\n\n\tconst [checkedNodes, setCheckedNodes] =\n\t\tuseState<Set<string>>(initialCheckedNodes);\n\n\tconst isChecked = useCallback(\n\t\t(node: TreeNode): boolean | \"indeterminate\" => {\n\t\t\tif (!node.children) {\n\t\t\t\treturn checkedNodes.has(node.id);\n\t\t\t}\n\n\t\t\tconst childrenChecked = node.children.map((child) => isChecked(child));\n\t\t\tif (childrenChecked.every((status) => status === true)) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tchildrenChecked.some(\n\t\t\t\t\t(status) => status === true || status === \"indeterminate\"\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\treturn \"indeterminate\";\n\t\t\t}\n\t\t\treturn false;\n\t\t},\n\t\t[checkedNodes]\n\t);\n\n\tconst handleCheck = useCallback(\n\t\t(node: TreeNode) => {\n\t\t\tconst newCheckedNodes = new Set(checkedNodes);\n\n\t\t\tconst toggleNode = (n: TreeNode, check: boolean) => {\n\t\t\t\tif (check) {\n\t\t\t\t\tnewCheckedNodes.add(n.id);\n\t\t\t\t} else {\n\t\t\t\t\tnewCheckedNodes.delete(n.id);\n\t\t\t\t}\n\t\t\t\tn.children?.forEach((child) => toggleNode(child, check));\n\t\t\t};\n\n\t\t\tconst currentStatus = isChecked(node);\n\t\t\tconst newCheck = currentStatus !== true;\n\n\t\t\ttoggleNode(node, newCheck);\n\t\t\tsetCheckedNodes(newCheckedNodes);\n\t\t},\n\t\t[checkedNodes, isChecked]\n\t);\n\n\treturn { isChecked, handleCheck };\n}\n\ninterface CheckboxTreeProps {\n\ttree: TreeNode;\n\trenderNode: (props: {\n\t\tnode: TreeNode;\n\t\tisChecked: boolean | \"indeterminate\";\n\t\tonCheckedChange: () => void;\n\t\tchildren: React.ReactNode;\n\t}) => React.ReactNode;\n}\n\nexport function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {\n\tconst { isChecked, handleCheck } = useCheckboxTree(tree);\n\n\tconst renderTreeNode = (node: TreeNode): React.ReactNode => {\n\t\tconst children = node.children?.map(renderTreeNode);\n\n\t\treturn renderNode({\n\t\t\tnode,\n\t\t\tisChecked: isChecked(node),\n\t\t\tonCheckedChange: () => handleCheck(node),\n\t\t\tchildren,\n\t\t});\n\t};\n\n\treturn renderTreeNode(tree);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    }
  ]
}