{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "widget-wall",
  "title": "Widget wall",
  "description": "A wall of thirteen Tiles widgets: an inverted highlight, trades, six sparkline KPIs, a profit dot matrix, a profile ring, team, bars and a lollipop ranking.",
  "registryDependencies": [
    "utils",
    "@manniche/chart-kit",
    "@manniche/data-tile",
    "@manniche/sparkline",
    "@manniche/dot-matrix",
    "@manniche/donut",
    "@manniche/bar-chart",
    "@manniche/lollipop",
    "@manniche/transaction-list"
  ],
  "files": [
    {
      "path": "registry/manniche/widget-wall/widget-wall.tsx",
      "content": "// A wall of small widgets (KPI sparkline tiles, one inverted highlight, profile ring, team, trades, profit matrix, lollipop, bars). Built from Tiles primitives.\nimport { cn } from '@/lib/utils'\nimport { BarChart, type BarPoint } from '@/registry/manniche/bar-chart/bar-chart'\nimport { BigNumber, DeltaPill } from '@/registry/manniche/chart-kit/chart-kit'\nimport type { ValueFormat } from '@/registry/manniche/chart-kit/chart-utils'\nimport { DataTile, TileFact } from '@/registry/manniche/data-tile/data-tile'\nimport { DotMatrix } from '@/registry/manniche/dot-matrix/dot-matrix'\nimport { TransactionList, type Transaction } from '@/registry/manniche/transaction-list/transaction-list'\nimport { Donut, type DonutDatum } from '@/registry/manniche/donut/donut'\nimport { Lollipop, type LollipopDatum } from '@/registry/manniche/lollipop/lollipop'\nimport { Sparkline } from '@/registry/manniche/sparkline/sparkline'\n\nexport type WidgetKpi = { id: string; title: string; value: number; change: number; series: number[]; format?: ValueFormat; lowerIsBetter?: boolean }\n\nexport type WidgetPerson = { id: string; name: string; role: string }\n\nexport type WidgetWallData = {\n  highlight: { title: string; value: number; format?: ValueFormat; text: string }\n  trades: { title: string; items: Transaction[]; today?: string; format?: ValueFormat }\n  matrix: { title: string; data: number[][]; rows: string[]; columns: string[] }\n  profile: { title: string; items: DonutDatum[]; total?: number; format?: ValueFormat }\n  team: { title: string; people: WidgetPerson[] }\n  kpis: WidgetKpi[]\n  ranking: { title: string; items: LollipopDatum[]; format?: ValueFormat }\n  weekly: { title: string; points: BarPoint[]; format?: ValueFormat }\n}\n\nexport type WidgetWallLabels = { note?: string }\n\nexport type WidgetWallProps = { data: WidgetWallData; labels?: WidgetWallLabels; className?: string }\n\nexport function WidgetWall({ data, labels, className }: WidgetWallProps) {\n  const note = labels?.note ?? 'Example data.'\n  return (\n    <div className={cn('@container w-full rounded-2xl bg-background p-3 text-foreground', className)}>\n      <div className=\"grid grid-cols-1 gap-3 @lg:grid-cols-2 @3xl:grid-cols-6\">\n        <div className=\"@3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.highlight.title} inverted>\n            <BigNumber value={data.highlight.value} format={data.highlight.format} size=\"xl\" />\n            <p className=\"mt-2 text-sm opacity-80\">{data.highlight.text}</p>\n          </DataTile>\n        </div>\n        <div className=\"@3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.trades.title} footer={note}>\n            <TransactionList data={data.trades.items} label={data.trades.title} today={data.trades.today} format={data.trades.format} />\n          </DataTile>\n        </div>\n        {data.kpis.map((k) => (\n          <div key={k.id} className=\"@3xl:col-span-2\">\n            <DataTile className=\"h-full\" title={k.title} density=\"compact\">\n              <TileFact aside={<DeltaPill value={k.change} goodWhen={k.lowerIsBetter ? 'down' : 'up'} />}>\n                <BigNumber value={k.value} format={k.format} size=\"md\" />\n              </TileFact>\n              <Sparkline data={k.series} label={k.title} format={k.format} />\n            </DataTile>\n          </div>\n        ))}\n        <div className=\"@lg:col-span-2 @3xl:col-span-6\">\n          <DataTile className=\"h-full\" title={data.matrix.title} footer={note}>\n            <DotMatrix data={data.matrix.data} rows={data.matrix.rows} columns={data.matrix.columns} label={data.matrix.title} />\n          </DataTile>\n        </div>\n        <div className=\"@3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.profile.title} footer={note}>\n            <Donut data={data.profile.items} label={data.profile.title} total={data.profile.total} format={data.profile.format} />\n          </DataTile>\n        </div>\n        <div className=\"@3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.team.title} footer={note}>\n            <ul className=\"flex flex-col gap-3\">\n              {data.team.people.map((p) => (\n                <li key={p.id} className=\"flex items-center gap-3\">\n                  <span aria-hidden className=\"grid size-9 place-items-center rounded-full bg-muted text-xs font-medium\">\n                    {p.name.split(' ').map((w) => w[0]).join('').slice(0, 2)}\n                  </span>\n                  <span className=\"min-w-0 flex-1\">\n                    <span className=\"block truncate text-sm font-medium\">{p.name}</span>\n                    <span className=\"block truncate text-xs text-muted-foreground\">{p.role}</span>\n                  </span>\n                </li>\n              ))}\n            </ul>\n          </DataTile>\n        </div>\n        <div className=\"@lg:col-span-2 @3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.weekly.title} footer={note}>\n            <BarChart data={data.weekly.points} label={data.weekly.title} format={data.weekly.format} />\n          </DataTile>\n        </div>\n        <div className=\"@lg:col-span-2 @3xl:col-span-3\">\n          <DataTile className=\"h-full\" title={data.ranking.title} footer={note}>\n            <Lollipop data={data.ranking.items} label={data.ranking.title} format={data.ranking.format} />\n          </DataTile>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}