{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-checkbox-group-4",
  "description": "Nested checkbox group with parent",
  "registryDependencies": [
    "@coss/checkbox",
    "@coss/checkbox-group",
    "@coss/label"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-checkbox-group-4.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nconst mainPermissions = [\n  { id: \"view-dashboard\", name: \"View Dashboard\" },\n  { id: \"manage-users\", name: \"Manage Users\" },\n  { id: \"access-reports\", name: \"Access Reports\" },\n];\n\nconst userManagementPermissions = [\n  { id: \"create-user\", name: \"Create User\" },\n  { id: \"edit-user\", name: \"Edit User\" },\n  { id: \"delete-user\", name: \"Delete User\" },\n  { id: \"assign-roles\", name: \"Assign Roles\" },\n];\n\nexport default function Particle() {\n  const [mainValue, setMainValue] = useState<string[]>([]);\n  const [managementValue, setManagementValue] = useState<string[]>([]);\n\n  const managementIsPartial =\n    managementValue.length > 0 &&\n    managementValue.length !== userManagementPermissions.length;\n\n  return (\n    <CheckboxGroup\n      allValues={mainPermissions.map((p) => p.id)}\n      aria-labelledby=\"user-permissions-caption\"\n      onValueChange={(value) => {\n        if (value.includes(\"manage-users\")) {\n          setManagementValue(userManagementPermissions.map((p) => p.id));\n        } else if (\n          managementValue.length === userManagementPermissions.length\n        ) {\n          setManagementValue([]);\n        }\n        setMainValue(value);\n      }}\n      value={mainValue}\n    >\n      <Label id=\"user-permissions-caption\">\n        <Checkbox indeterminate={managementIsPartial} parent />\n        User Permissions\n      </Label>\n\n      {mainPermissions\n        .filter((p) => p.id !== \"manage-users\")\n        .map((p) => (\n          <Label className=\"ms-4\" key={p.id}>\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n\n      <CheckboxGroup\n        allValues={userManagementPermissions.map((p) => p.id)}\n        aria-labelledby=\"manage-users-caption\"\n        className=\"ms-4\"\n        onValueChange={(value) => {\n          if (value.length === userManagementPermissions.length) {\n            setMainValue((prev) =>\n              Array.from(new Set([...prev, \"manage-users\"])),\n            );\n          } else {\n            setMainValue((prev) => prev.filter((v) => v !== \"manage-users\"));\n          }\n          setManagementValue(value);\n        }}\n        value={managementValue}\n      >\n        <Label id=\"manage-users-caption\">\n          <Checkbox parent />\n          Manage Users\n        </Label>\n\n        {userManagementPermissions.map((p) => (\n          <Label className=\"ms-4\" key={p.id}>\n            <Checkbox value={p.id} />\n            {p.name}\n          </Label>\n        ))}\n      </CheckboxGroup>\n    </CheckboxGroup>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "checkbox",
    "checkbox group"
  ],
  "type": "registry:block"
}