dodil/erp-ui

public/r/stat.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat",
  "title": "Stat",
  "description": "A number to start the day from, in a responsive row.",
  "dependencies": [
    "@radix-ui/themes"
  ],
  "files": [
    {
      "path": "src/components/stat/Stat.tsx",
      "content": "/**\n * Stat — one number a person starts the day from (\"3 overdue\", \"EUR 83,400.00 weighted\"), with what it\n * means. A row of them is a StatGrid. Money arrives as text and is shown as text.\n */\nimport { Card, Flex, Grid, Text } from \"@radix-ui/themes\";\nimport type { ReactNode } from \"react\";\n\nexport interface StatProps {\n  label: string;\n  value: ReactNode;\n  hint?: ReactNode;\n  tone?: \"neutral\" | \"danger\" | \"warning\" | \"success\";\n}\n\nconst COLOR = { neutral: undefined, danger: \"red\", warning: \"amber\", success: \"green\" } as const;\n\nexport function Stat({ label, value, hint, tone = \"neutral\" }: StatProps) {\n  return (\n    <Card>\n      <Flex direction=\"column\" gap=\"1\">\n        <Text size=\"2\" color=\"gray\">{label}</Text>\n        <Text size=\"6\" weight=\"bold\" color={COLOR[tone]} style={{ fontVariantNumeric: \"tabular-nums\" }}>{value}</Text>\n        {hint && <Text size=\"1\" color=\"gray\">{hint}</Text>}\n      </Flex>\n    </Card>\n  );\n}\n\nexport function StatGrid({ children, label }: { children: ReactNode; label?: string }) {\n  return (\n    <Grid columns={{ initial: \"1\", xs: \"2\", md: \"4\" }} gap=\"3\" role=\"group\" aria-label={label}>\n      {children}\n    </Grid>\n  );\n}\n",
      "type": "registry:component",
      "target": "erp-ui/components/stat/Stat.tsx"
    }
  ],
  "type": "registry:component"
}