{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "primitives",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Arrow + delta + optional sparkline, composed.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue, PercentChange, Polarity } from \"@/lib/ledger/money.types\";\nimport { Delta } from \"@/components/ledger/delta\";\nimport { Sparkline } from \"@/components/ledger/sparkline\";\n\nexport interface TrendProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  basis?: string;\n  data?: number[];\n  percent?: PercentChange;\n  polarity?: Polarity;\n  value: MoneyValue | null;\n}\n\n/** `Delta` + `Sparkline`, baselines aligned. The \"how is this doing\" unit. */\nexport const Trend = React.forwardRef<HTMLDivElement, TrendProps>(\n  ({ className, value, percent, polarity = \"standard\", basis, data, ...props }, ref) => (\n    <div className={cn(\"flex items-end justify-between gap-4\", className)} ref={ref} {...props}>\n      <Delta basis={basis} percent={percent} polarity={polarity} value={value} />\n      {data ? <Sparkline className=\"max-w-[96px]\" data={data} height={24} polarity={polarity} /> : null}\n    </div>\n  ),\n);\nTrend.displayName = \"Trend\";\n",
      "path": "components/ledger/trend.tsx",
      "target": "components/ledger/trend.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "trend",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/delta",
    "@lopifi/money.types",
    "@lopifi/sparkline"
  ],
  "title": "Trend",
  "type": "registry:ui"
}