{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"stat","type":"registry:ui","title":"Stat","description":"Single metric with label, value and delta.","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/stat\/Stat.tsx","content":"import { forwardRef } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport { StatBand } from \".\/StatBand\";\nimport type { StatProps } from \".\/Stat.types\";\n\nconst valueClasses: Record<NonNullable<StatProps[\"size\"]>, string> = {\n  sm: \"text-xl\",\n  md: \"text-3xl\",\n  lg: \"text-5xl\",\n};\n\n\/**\n * A big display figure with a caption \u2014 the `2016 \/ 120+ \/ 08 \/ 14` band cell.\n *\n * Twenty-seven gallery styles build this, and **five of seventeen forgot\n * `tabular-nums`**. That is not a cosmetic slip: in a proportional face a `1` is\n * narrower than a `0`, so a row of figures that is supposed to read as a band\n * comes out visibly ragged, and the fix is one property nobody remembers to\n * look for. It is the default here.\n *\n * Distinct from a right-aligned key\/value list \u2014 this is a large flush-left\n * figure repeated across a row.\n *\/\nconst StatRoot = forwardRef<HTMLDivElement, StatProps>(\n  ({ value, label, size = \"md\", className, children, ...props }, ref) => {\n    return (\n      <div ref={ref} data-react-fancy-stat=\"\" className={cn(className)} {...props}>\n        {children ?? (\n          <>\n            <div\n              data-react-fancy-stat-value=\"\"\n              className={cn(\n                \"font-semibold leading-none tracking-tight text-zinc-900 tabular-nums dark:text-zinc-100\",\n                valueClasses[size],\n              )}\n            >\n              {value}\n            <\/div>\n            {label != null && (\n              <div\n                data-react-fancy-stat-label=\"\"\n                className=\"mt-1.5 font-mono text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400\"\n              >\n                {label}\n              <\/div>\n            )}\n          <\/>\n        )}\n      <\/div>\n    );\n  },\n);\n\nStatRoot.displayName = \"Stat\";\n\nexport const Stat = Object.assign(StatRoot, { Band: StatBand });\n","type":"registry:ui","target":"components\/fancy\/stat\/Stat.tsx"},{"path":"components\/fancy\/stat\/Stat.types.ts","content":"import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface StatProps extends HTMLAttributes<HTMLDivElement> {\n  \/** The figure itself \u2014 `\"2016\"`, `\"120+\"`, `\"08\"`. *\/\n  value?: ReactNode;\n  \/** The caption under it. *\/\n  label?: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport interface StatBandProps extends HTMLAttributes<HTMLDivElement> {\n  \/** Columns in the band. Default `4`. *\/\n  columns?: number;\n}\n","type":"registry:ui","target":"components\/fancy\/stat\/Stat.types.ts"},{"path":"components\/fancy\/stat\/StatBand.tsx","content":"import { forwardRef } from \"react\";\nimport { cn } from \"..\/..\/utils\/cn\";\nimport type { StatBandProps } from \".\/Stat.types\";\n\n\/**\n * The row a set of `<Stat>`s sits in.\n *\n * A plain grid, but it is the reason `<Stat>` defaults to `tabular-nums`: a\n * figure alone can be proportional without anyone noticing, and only becomes\n * wrong once it has neighbours to fail to line up with.\n *\/\nexport const StatBand = forwardRef<HTMLDivElement, StatBandProps>(\n  ({ columns = 4, className, style, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-stat-band=\"\"\n        className={cn(\"grid gap-6\", className)}\n        style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style }}\n        {...props}\n      >\n        {children}\n      <\/div>\n    );\n  },\n);\n\nStatBand.displayName = \"StatBand\";\n","type":"registry:ui","target":"components\/fancy\/stat\/StatBand.tsx"},{"path":"components\/fancy\/stat\/index.ts","content":"export { Stat } from \".\/Stat\";\nexport { StatBand } from \".\/StatBand\";\nexport type { StatProps, StatBandProps } from \".\/Stat.types\";\n","type":"registry:ui","target":"components\/fancy\/stat\/index.ts"}],"since":"0.5"}