{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"stat-list","type":"registry:ui","title":"StatList","description":"Row of Stat items.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/stat-list\/StatList.tsx","content":"import { forwardRef } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { StatListProps } from \".\/StatList.types\";\n\n\/**\n * The mono figure stack \u2014 `70 packages \/ 261 components \/ MIT licensed`.\n *\n * The Inspiration index and `\/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site \u2014 and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n *\/\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{item.value}<\/b>{\" \"}\n            {item.label}\n          <\/span>\n        ))}\n      <\/div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n","type":"registry:ui","target":"components\/fancy\/stat-list\/StatList.tsx"},{"path":"components\/fancy\/stat-list\/StatList.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\n\/** One figure and what it counts. *\/\nexport interface StatListItem {\n  \/** The figure. Emphasised \u2014 it is what the eye lands on first. *\/\n  value: ReactNode;\n  \/** What the figure counts. *\/\n  label: ReactNode;\n  \/**\n   * Stable handle for this row, for an agent reading a figure off the page.\n   *\n   * Defaults to `label` when it is a plain string, which covers the common\n   * case without asking a caller to repeat themselves.\n   *\/\n  key?: string;\n}\n\nexport interface StatListProps extends HTMLAttributes<HTMLDivElement> {\n  \/** The figures. Data rather than children \u2014 the repeated thing is a shape. *\/\n  items: StatListItem[];\n  \/** Which edge the stack aligns to. Default `\"right\"`. *\/\n  align?: \"left\" | \"right\";\n}\n","type":"registry:ui","target":"components\/fancy\/stat-list\/StatList.types.ts"},{"path":"components\/fancy\/stat-list\/index.ts","content":"export { StatList } from \".\/StatList\";\nexport type { StatListProps, StatListItem } from \".\/StatList.types\";\n","type":"registry:ui","target":"components\/fancy\/stat-list\/index.ts"}],"since":"0.5"}