{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "metrics-analysis",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Every metric requires one. Formula with values substituted.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { InfoTip } from \"@/components/ledger/info-tip\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport interface MetricDefinitionProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  cohort: string;\n  computedUnderOlderDefinition?: boolean;\n  /** Definitions are versioned; a value computed under an older one says so. */\n  definitionVersion?: string;\n  formula: string;\n  name: string;\n  /**\n   * The caveat. It is the longest thing on the card and the least often\n   * needed, so it rides the ⓘ on the metric name rather than taking three\n   * lines of the definition list.\n   */\n  note?: string;\n  period: string;\n  source: string;\n  /** The same formula with the actual input values substituted. */\n  substituted: string;\n  /** Rendered as given — the caller owns formatting and rounding. */\n  value: string;\n}\n\n/**\n * **Every metric card requires one.** There is no variant without a\n * definition.\n *\n * \"ARR\" means four different things at four companies. This component is why\n * the number in this product is not one of them.\n */\nexport const MetricDefinition = React.forwardRef<HTMLDivElement, MetricDefinitionProps>(\n  (\n    {\n      className,\n      name,\n      value,\n      formula,\n      substituted,\n      cohort,\n      period,\n      source,\n      note,\n      definitionVersion,\n      computedUnderOlderDefinition = false,\n      ...props\n    },\n    ref,\n  ) => (\n    <div className={cn(\"rounded-xl border border-border bg-surface p-6\", className)} ref={ref} {...props}>\n      <div className=\"flex items-baseline justify-between gap-4\">\n        <h3 className=\"text-title-sm font-medium\">\n          {name}\n          {note ? (\n            <InfoTip about={`Caveat on ${name}`} className=\"text-left\" triggerClassName=\"ml-1.5 align-[-1px]\">\n              {note}\n            </InfoTip>\n          ) : null}\n        </h3>\n        <span className=\"numeric text-figure-lg font-medium\">{value}</span>\n      </div>\n\n      <Rule className=\"mt-3\" variant=\"subtotal\" />\n\n      <div className=\"mt-3 space-y-0.5\">\n        <p className=\"numeric text-caption text-text-secondary\">{formula}</p>\n        <p className=\"numeric text-caption text-text-primary\">{substituted}</p>\n      </div>\n\n      <dl className=\"mt-4 space-y-1\">\n        <Row label=\"Cohort\">{cohort}</Row>\n        <Row label=\"Period\">{period}</Row>\n        <Row label=\"Source\">{source}</Row>\n        {definitionVersion ? <Row label=\"Definition\">{definitionVersion}</Row> : null}\n      </dl>\n\n      {computedUnderOlderDefinition ? (\n        /* The warning is the fact; why it matters is the rationale. One belongs\n           in the strip, the other one press away. */\n        <p className=\"mt-3 flex items-center gap-1.5 rounded-sm bg-warning-subtle px-3 py-2 text-caption text-text-primary\">\n          Computed under an earlier definition\n          <InfoTip about=\"Why an earlier definition matters\">\n            An unannounced definition change looks like a business change. Comparing this figure with one\n            computed under the current definition compares two different metrics.\n          </InfoTip>\n        </p>\n      ) : null}\n    </div>\n  ),\n);\nMetricDefinition.displayName = \"MetricDefinition\";\n\nfunction Row({ label, children }: { label: string; children: React.ReactNode }) {\n  return (\n    <div className=\"flex gap-3\">\n      <dt className=\"w-20 shrink-0 text-caption text-text-tertiary\">{label}</dt>\n      <dd className=\"flex-1 text-caption text-text-secondary\">{children}</dd>\n    </div>\n  );\n}\n",
      "path": "components/ledger/metric-definition.tsx",
      "target": "components/ledger/metric-definition.tsx",
      "type": "registry:component"
    }
  ],
  "name": "metric-definition",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/info-tip",
    "@lopifi/rule"
  ],
  "title": "MetricDefinition",
  "type": "registry:component"
}