{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "density-toggle",
  "type": "registry:ui",
  "title": "Density toggle",
  "description": "Toggle group that switches between compact and comfortable density, reporting the choice to your handler. Pairs with data tables and dense list views.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/toggle.json",
    "https://ui.minidev.pro/r/toggle-group.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/density-toggle.tsx",
      "type": "registry:ui",
      "target": "components/ui/density-toggle.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { ToggleGroup } from \"@/components/ui/toggle-group\"\nimport { Toggle } from \"@/components/ui/toggle\"\n\nfunction DensityToggle({\n  value = \"comfortable\",\n  onChange,\n  className,\n}: {\n  value?: \"compact\" | \"comfortable\"\n  onChange?: (value: \"compact\" | \"comfortable\") => void\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      data-slot=\"density-toggle\"\n      className={cn(className)}\n      value={value ? [value] : []}\n      onValueChange={(v) => {\n        const next = v[0] as \"compact\" | \"comfortable\" | undefined\n        if (next) onChange?.(next)\n      }}\n    >\n      <Toggle value=\"compact\" size=\"sm\" aria-label=\"Compact\">\n        Compact\n      </Toggle>\n      <Toggle value=\"comfortable\" size=\"sm\" aria-label=\"Comfortable\">\n        Comfortable\n      </Toggle>\n    </ToggleGroup>\n  )\n}\nexport { DensityToggle }\n"
    }
  ]
}