{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "statistic",
  "title": "Statistic",
  "description": "A single figure with a title, prefix, suffix, precision, locale grouping, a custom formatter, a tone and a loading state.",
  "files": [
    {
      "path": "registry/tealmac/statistic.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface StatisticProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"title\" | \"prefix\"\n> {\n  title: React.ReactNode\n  value: number | string\n  /** Fraction digits for numbers. Default: as given. */\n  precision?: number\n  /** Content before the value, for example a currency sign or an icon. */\n  prefix?: React.ReactNode\n  /** Content after the value, for example a unit. */\n  suffix?: React.ReactNode\n  /** Replace the default number formatting. */\n  formatter?: (value: number | string) => React.ReactNode\n  /** BCP 47 locale for number grouping. Default: the runtime locale. */\n  locale?: string\n  /** Show a skeleton instead of the value. */\n  loading?: boolean\n  /** Colours the value. */\n  tone?: \"default\" | \"positive\" | \"negative\" | \"warning\"\n}\n\nconst TONE = {\n  default: \"\",\n  positive: \"text-emerald-700 dark:text-emerald-400\",\n  negative: \"text-red-700 dark:text-red-400\",\n  warning: \"text-amber-700 dark:text-amber-400\",\n}\n\n/**\n * A single number with a title, prefix, suffix and locale-aware grouping.\n * The title and value are a term and its details, so assistive technology\n * reads \"Active users, 112,893\". Use it for the figures on a summary page;\n * for a trend and an icon use Stat Card.\n */\nexport function Statistic({\n  title,\n  value,\n  precision,\n  prefix,\n  suffix,\n  formatter,\n  locale,\n  loading = false,\n  tone = \"default\",\n  className,\n  ...props\n}: StatisticProps) {\n  const text = formatter\n    ? formatter(value)\n    : typeof value === \"number\"\n      ? new Intl.NumberFormat(locale, {\n          minimumFractionDigits: precision,\n          maximumFractionDigits: precision,\n        }).format(value)\n      : value\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)} {...props}>\n      <dl className=\"contents\">\n        <dt className=\"text-muted-foreground text-sm\">{title}</dt>\n        <dd\n          className={cn(\n            \"flex items-baseline gap-1 text-2xl font-semibold tabular-nums\",\n            TONE[tone]\n          )}\n          aria-busy={loading || undefined}\n        >\n          {loading ? (\n            <span\n              role=\"status\"\n              className=\"bg-muted inline-block h-7 w-24 animate-pulse rounded motion-reduce:animate-none\"\n            >\n              <span className=\"sr-only\">Loading</span>\n            </span>\n          ) : (\n            <>\n              {prefix ? <span className=\"text-lg\">{prefix}</span> : null}\n              <span>{text}</span>\n              {suffix ? (\n                <span className=\"text-muted-foreground text-base font-normal\">\n                  {suffix}\n                </span>\n              ) : null}\n            </>\n          )}\n        </dd>\n      </dl>\n    </div>\n  )\n}\n\nexport default Statistic\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}