{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "system-states",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Persisted, synced, phone-clamped.",
  "files": [
    {
      "content": "\"use client\";\n\nimport { useIsPhone } from \"@/hooks/ledger/use-media-query\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { Density } from \"@/lib/ledger/money.types\";\n\nexport interface DensityToggleProps {\n  className?: string;\n  /** Off when the surface has no rows to set the density of. */\n  disabled?: boolean;\n  /** Said in the tooltip, so a dead control explains itself rather than sulking. */\n  disabledReason?: string;\n  onValueChange: (d: Density) => void;\n  value: Density;\n}\n\nconst OPTIONS: { key: Density; label: string }[] = [\n  { key: \"compact\", label: \"Compact\" },\n  { key: \"default\", label: \"Default\" },\n  { key: \"comfortable\", label: \"Comfortable\" },\n];\n\n/**\n * Persisted per user, and clamped to `comfortable` on a phone regardless of\n * the stored preference — 32px rows with 13px text fails both touch targets\n * and arm's-length legibility.\n */\nexport function DensityToggle({\n  value,\n  onValueChange,\n  className,\n  disabled,\n  disabledReason,\n}: DensityToggleProps) {\n  const isPhone = useIsPhone();\n\n  return (\n    <div\n      aria-disabled={disabled || undefined}\n      aria-label=\"Row density\"\n      className={cn(\"flex rounded-sm border border-border p-0.5\", className)}\n      role=\"radiogroup\"\n      title={disabled ? disabledReason : undefined}\n    >\n      {OPTIONS.map((o) => {\n        const clamped = disabled || (isPhone && o.key !== \"comfortable\");\n        return (\n          <button\n            aria-checked={isPhone ? o.key === \"comfortable\" : value === o.key}\n            className={cn(\n              \"press h-7 rounded-xs px-2.5 text-label font-medium\",\n              (isPhone ? o.key === \"comfortable\" : value === o.key)\n                ? \"bg-surface-selected text-text-primary\"\n                : \"text-text-secondary hover:bg-surface-hover\",\n              clamped && \"cursor-not-allowed opacity-40\",\n            )}\n            disabled={clamped}\n            key={o.key}\n            onClick={() => onValueChange(o.key)}\n            role=\"radio\"\n            title={disabled ? disabledReason : clamped ? \"Clamped to comfortable on a phone\" : undefined}\n            type=\"button\"\n          >\n            {o.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n",
      "path": "components/ledger/density-toggle.tsx",
      "target": "components/ledger/density-toggle.tsx",
      "type": "registry:component"
    }
  ],
  "name": "density-toggle",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/money.types",
    "@lopifi/use-media-query"
  ],
  "title": "DensityToggle",
  "type": "registry:component"
}