{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "dashboard-charts",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Responsive grid with optional rearrange.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\n\nexport interface DashboardShellProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The heading level for `title`. A dashboard is normally the whole page, so\n   * `h1` is the honest default — but when one is embedded under a page that\n   * already has its own `h1` (the showcase does exactly this), two `h1`s is a\n   * document-outline bug. Set `h2` there.\n   */\n  headingLevel?: \"h1\" | \"h2\";\n  subtitle?: string;\n  title: string;\n  toolbar?: React.ReactNode;\n}\n\n/**\n * A 12/8/4-column responsive grid with equal-height rows, so figure\n * baselines align across a row — the most visible alignment failure on any\n * dashboard, and a one-line fix.\n */\nexport const DashboardShell = React.forwardRef<HTMLDivElement, DashboardShellProps>(\n  ({ className, title, subtitle, toolbar, headingLevel: Heading = \"h1\", children, ...props }, ref) => (\n    <div className={cn(\"w-full\", className)} ref={ref} {...props}>\n      <header className=\"mb-6 flex flex-wrap items-end justify-between gap-4\">\n        <div>\n          <Heading className=\"text-title-lg font-medium\">{title}</Heading>\n          {subtitle ? <p className=\"mt-1 text-body text-text-secondary\">{subtitle}</p> : null}\n        </div>\n        {toolbar}\n      </header>\n      <div className=\"grid auto-rows-fr grid-cols-4 gap-4 md:grid-cols-8 xl:grid-cols-12\">{children}</div>\n    </div>\n  ),\n);\nDashboardShell.displayName = \"DashboardShell\";\n\nexport function DashboardTile({\n  span = 4,\n  className,\n  children,\n}: {\n  span?: 3 | 4 | 6 | 8 | 12;\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"col-span-4\",\n        span === 3 && \"md:col-span-4 xl:col-span-3\",\n        span === 4 && \"md:col-span-4 xl:col-span-4\",\n        span === 6 && \"md:col-span-8 xl:col-span-6\",\n        span === 8 && \"md:col-span-8 xl:col-span-8\",\n        span === 12 && \"md:col-span-8 xl:col-span-12\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "path": "components/ledger/dashboard-shell.tsx",
      "target": "components/ledger/dashboard-shell.tsx",
      "type": "registry:block"
    }
  ],
  "name": "dashboard-shell",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn"
  ],
  "title": "DashboardShell",
  "type": "registry:block"
}