{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "primitives",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Payment and reconciliation states.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { PaymentStatus } from \"@/lib/ledger/money.types\";\nimport {\n  ArrowPathIcon,\n  ArrowUturnLeftIcon,\n  CheckIcon,\n  ClockIcon,\n  EllipsisHorizontalCircleIcon,\n  ExclamationTriangleIcon,\n  LinkIcon,\n  NoSymbolIcon,\n  PaperAirplaneIcon,\n  TruckIcon,\n  XMarkIcon,\n} from \"@/components/ledger/icons\";\n\ntype Tone = \"positive\" | \"negative\" | \"warning\" | \"neutral\" | \"accent\";\n\nconst CONFIG: Record<\n  PaymentStatus,\n  { label: string; tone: Tone; icon: React.ComponentType<{ className?: string }> }\n> = {\n  cancelled: { icon: NoSymbolIcon, label: \"Cancelled\", tone: \"neutral\" },\n  draft: { icon: EllipsisHorizontalCircleIcon, label: \"Draft\", tone: \"neutral\" },\n  failed: { icon: XMarkIcon, label: \"Failed\", tone: \"negative\" },\n  \"in-transit\": { icon: TruckIcon, label: \"In transit\", tone: \"accent\" },\n  matched: { icon: CheckIcon, label: \"Matched\", tone: \"positive\" },\n  \"needs-review\": { icon: ExclamationTriangleIcon, label: \"Needs review\", tone: \"warning\" },\n  overdue: { icon: ExclamationTriangleIcon, label: \"Overdue\", tone: \"negative\" },\n  // Pending is a state, not a load — a clock, never a spinner.\n  pending: { icon: ClockIcon, label: \"Pending\", tone: \"warning\" },\n  processing: { icon: ArrowPathIcon, label: \"Processing\", tone: \"warning\" },\n  reconciled: { icon: LinkIcon, label: \"Reconciled\", tone: \"positive\" },\n  returned: { icon: ArrowUturnLeftIcon, label: \"Returned\", tone: \"negative\" },\n  scheduled: { icon: ClockIcon, label: \"Scheduled\", tone: \"neutral\" },\n  sent: { icon: PaperAirplaneIcon, label: \"Sent\", tone: \"accent\" },\n  settled: { icon: CheckIcon, label: \"Settled\", tone: \"positive\" },\n};\n\nconst TONES: Record<Tone, string> = {\n  accent: \"bg-accent-subtle text-accent\",\n  negative: \"bg-negative-subtle text-negative\",\n  neutral: \"bg-surface-sunken text-text-secondary\",\n  // Tint, not fill. Saturated fills are reserved for the one primary action.\n  positive: \"bg-positive-subtle text-positive\",\n  warning: \"bg-warning-subtle text-warning\",\n};\n\nexport interface StatusPillProps extends React.ComponentPropsWithoutRef<\"span\"> {\n  /** The entity, so the accessible name reads \"Payment pending\". */\n  entity?: string;\n  size?: \"sm\" | \"md\";\n  status: PaymentStatus;\n}\n\n/** Icon and text, always. An icon alone is not a status. */\nexport const StatusPill = React.forwardRef<HTMLSpanElement, StatusPillProps>(\n  ({ className, status, entity, size = \"sm\", ...props }, ref) => {\n    const config = CONFIG[status];\n    const Icon = config.icon;\n    return (\n      <span\n        className={cn(\n          \"relative inline-flex select-none items-center gap-1 rounded-sm font-medium\",\n          \"transition-colors duration-2 ease-standard\",\n          size === \"sm\" ? \"h-6 px-2 text-caption\" : \"h-8 px-3 text-label\",\n          TONES[config.tone],\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <Icon aria-hidden=\"true\" className={size === \"sm\" ? \"size-3\" : \"size-3.5\"} />\n        <span aria-hidden=\"true\">{config.label}</span>\n        {/* Spoken text, not an aria-label: a label on a role-less span is\n            prohibited ARIA. select-none keeps it out of a copied selection. */}\n        <span className=\"sr-only select-none\">\n          {entity ? `${entity} ${config.label.toLowerCase()}` : config.label}\n        </span>\n      </span>\n    );\n  },\n);\nStatusPill.displayName = \"StatusPill\";\n\nexport const STATUS_LABELS = CONFIG;\n",
      "path": "components/ledger/status-pill.tsx",
      "target": "components/ledger/status-pill.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "status-pill",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/icons",
    "@lopifi/money.types"
  ],
  "title": "StatusPill",
  "type": "registry:ui"
}