{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "cards",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Target vs. actual with a progress rule.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Card } from \"@/components/ledger/card\";\nimport { Money } from \"@/components/ledger/money\";\nimport { Percent } from \"@/components/ledger/percent\";\n\nexport interface GoalCardProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  actual: MoneyValue;\n  label: string;\n  /** Computed by the caller. */\n  progressPercent: number;\n  target: MoneyValue;\n}\n\n/**\n * The progress indicator is a rule line, not a rounded bar — consistent with\n * the statement grammar rather than borrowed from a generic UI kit.\n */\nexport const GoalCard = React.forwardRef<HTMLDivElement, GoalCardProps>(\n  ({ className, label, actual, target, progressPercent, ...props }, ref) => {\n    const clamped = Math.max(0, Math.min(100, progressPercent));\n    return (\n      <Card className={cn(\"flex flex-col gap-3\", className)} ref={ref} {...props}>\n        <span className=\"text-label font-medium text-text-secondary\">{label}</span>\n        <div className=\"flex items-baseline justify-between gap-3\">\n          <Money size=\"lg\" value={actual} />\n          <span className=\"text-caption text-text-secondary\">\n            of <Money size=\"xs\" tone=\"inherit\" value={target} />\n          </span>\n        </div>\n        <div\n          aria-label={`${label} progress`}\n          aria-valuemax={100}\n          aria-valuemin={0}\n          aria-valuenow={Math.round(clamped)}\n          className=\"relative h-[3px] w-full bg-border-subtle\"\n          role=\"progressbar\"\n        >\n          <div className=\"absolute inset-y-0 left-0 bg-accent\" style={{ width: `${clamped}%` }} />\n        </div>\n        <Percent signed={false} value={{ kind: \"relative\", value: progressPercent }} />\n      </Card>\n    );\n  },\n);\nGoalCard.displayName = \"GoalCard\";\n",
      "path": "components/ledger/goal-card.tsx",
      "target": "components/ledger/goal-card.tsx",
      "type": "registry:component"
    }
  ],
  "name": "goal-card",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/card",
    "@lopifi/cn",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/percent"
  ],
  "title": "GoalCard",
  "type": "registry:component"
}