{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-value",
  "title": "Stat Value",
  "description": "Oversized numerals with a built-in hierarchy: the leading group carries the weight, thousands drop to half size, the currency mark and unit sit smaller still.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "http://localhost:5173/r/liquid-theme.json"
  ],
  "files": [
    {
      "path": "src/components/ui/stat-value.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * The typographic signature of the reference set: a number is never set at one\n * size. The leading group carries the weight, the thousands group drops to\n * roughly half, and the currency mark and unit sit smaller still. It is a\n * hierarchy inside a single value — you read the magnitude before the detail.\n */\nconst stat = cva(\"inline-flex items-baseline font-display leading-[0.85] tracking-[-0.03em]\", {\n  variants: {\n    size: {\n      sm: \"text-2xl\",\n      md: \"text-[2rem]\",\n      lg: \"text-[2.75rem]\",\n      xl: \"text-[3.5rem]\",\n      \"2xl\": \"text-[5rem] tracking-[-0.045em]\",\n      hero: \"text-[7rem] tracking-[-0.05em]\",\n    },\n    weight: {\n      light: \"font-light\",\n      regular: \"font-normal\",\n      medium: \"font-medium\",\n      bold: \"font-semibold\",\n    },\n  },\n  defaultVariants: { size: \"lg\", weight: \"medium\" },\n})\n\nexport interface StatValueProps\n  extends Omit<React.ComponentProps<\"div\">, \"prefix\">,\n    VariantProps<typeof stat> {\n  value: number | string\n  /** Currency or sign mark, set small and quiet ahead of the number. */\n  prefix?: React.ReactNode\n  /** Trailing unit: `mg/dl`, `%`, `Years`, `SPM`. */\n  unit?: React.ReactNode\n  /**\n   * `lead` shrinks everything after the first group separator, as in\n   * `$ **137**,036`. `none` keeps the number at one size.\n   */\n  emphasis?: \"lead\" | \"none\"\n  /** `%` reads better raised; words read better on the baseline. */\n  unitAlign?: \"baseline\" | \"super\"\n  /** Group with spaces or commas, or pass a pre-formatted string as `value`. */\n  locale?: string\n}\n\nexport function StatValue({\n  value,\n  prefix,\n  unit,\n  emphasis = \"none\",\n  unitAlign = \"baseline\",\n  locale = \"en-US\",\n  size,\n  weight,\n  className,\n  ...props\n}: StatValueProps) {\n  const text =\n    typeof value === \"number\" ? value.toLocaleString(locale, { maximumFractionDigits: 2 }) : value\n\n  // Split at the first separator so the magnitude reads before the detail.\n  const cut = emphasis === \"lead\" ? text.search(/[,. ]/) : -1\n  const lead = cut > 0 ? text.slice(0, cut) : text\n  const tail = cut > 0 ? text.slice(cut) : \"\"\n\n  return (\n    <div data-slot=\"stat-value\" data-lq-numeric className={cn(stat({ size, weight }), className)} {...props}>\n      {prefix ? (\n        <span className=\"mr-[0.12em] text-[0.42em] font-normal opacity-45\">{prefix}</span>\n      ) : null}\n      <span>{lead}</span>\n      {tail ? <span className=\"text-[0.56em] font-normal opacity-90\">{tail}</span> : null}\n      {unit ? (\n        <span\n          className={cn(\n            \"ml-[0.16em] font-sans text-[0.3em] font-normal tracking-normal opacity-55\",\n            unitAlign === \"super\" && \"self-start mt-[0.18em] ml-[0.08em]\",\n          )}\n        >\n          {unit}\n        </span>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}