{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice-card",
  "type": "registry:ui",
  "title": "Invoice Card",
  "description": "A card for displaying invoice details and billing history.",
  "files": [
    {
      "path": "src/registry/ui/invoice-card.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Download, ExternalLink, FileText } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst invoiceCardVariants = cva(\n  \"relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors hover:bg-accent/50\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border\",\n        compact: \"gap-3 p-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\ninterface InvoiceCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof invoiceCardVariants> {}\n\nconst InvoiceCard = React.forwardRef<HTMLDivElement, InvoiceCardProps>(\n  ({ className, variant, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(invoiceCardVariants({ variant, className }))}\n      {...props}\n    />\n  ),\n);\nInvoiceCard.displayName = \"InvoiceCard\";\n\nconst InvoiceCardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted\",\n      className,\n    )}\n    {...props}\n  >\n    <FileText className=\"h-5 w-5 text-muted-foreground\" />\n  </div>\n));\nInvoiceCardIcon.displayName = \"InvoiceCardIcon\";\n\nconst InvoiceCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex min-w-0 flex-1 flex-col gap-1\", className)}\n    {...props}\n  />\n));\nInvoiceCardContent.displayName = \"InvoiceCardContent\";\n\nconst InvoiceCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center gap-2\", className)}\n    {...props}\n  />\n));\nInvoiceCardHeader.displayName = \"InvoiceCardHeader\";\n\nconst InvoiceCardNumber = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn(\"font-medium text-foreground\", className)}\n    {...props}\n  />\n));\nInvoiceCardNumber.displayName = \"InvoiceCardNumber\";\n\ntype InvoiceStatus = \"paid\" | \"pending\" | \"failed\" | \"refunded\" | \"draft\";\n\nconst statusConfig: Record<\n  InvoiceStatus,\n  {\n    label: string;\n    variant: \"default\" | \"secondary\" | \"destructive\" | \"outline\";\n  }\n> = {\n  paid: { label: \"Paid\", variant: \"default\" },\n  pending: { label: \"Pending\", variant: \"secondary\" },\n  failed: { label: \"Failed\", variant: \"destructive\" },\n  refunded: { label: \"Refunded\", variant: \"outline\" },\n  draft: { label: \"Draft\", variant: \"outline\" },\n};\n\ninterface InvoiceCardStatusProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof Badge>, \"variant\"> {\n  status: InvoiceStatus;\n}\n\nconst InvoiceCardStatus = React.forwardRef<\n  HTMLDivElement,\n  InvoiceCardStatusProps\n>(({ className, status, ...props }, ref) => {\n  const config = statusConfig[status];\n  return (\n    <Badge\n      ref={ref}\n      variant={config.variant}\n      className={cn(\"text-xs\", className)}\n      {...props}\n    >\n      {config.label}\n    </Badge>\n  );\n});\nInvoiceCardStatus.displayName = \"InvoiceCardStatus\";\n\ninterface InvoiceCardDateProps extends React.HTMLAttributes<HTMLSpanElement> {\n  date: Date | string;\n  format?: \"short\" | \"long\";\n}\n\nconst InvoiceCardDate = React.forwardRef<HTMLSpanElement, InvoiceCardDateProps>(\n  ({ className, date, format = \"short\", ...props }, ref) => {\n    const dateObj = typeof date === \"string\" ? new Date(date) : date;\n    const formatted = dateObj.toLocaleDateString(\"en-US\", {\n      year: \"numeric\",\n      month: format === \"long\" ? \"long\" : \"short\",\n      day: \"numeric\",\n    });\n\n    return (\n      <span\n        ref={ref}\n        className={cn(\"text-sm text-muted-foreground\", className)}\n        {...props}\n      >\n        {formatted}\n      </span>\n    );\n  },\n);\nInvoiceCardDate.displayName = \"InvoiceCardDate\";\n\ninterface InvoiceCardAmountProps extends React.HTMLAttributes<HTMLSpanElement> {\n  amount: number;\n  currency?: string;\n}\n\nconst InvoiceCardAmount = React.forwardRef<\n  HTMLSpanElement,\n  InvoiceCardAmountProps\n>(({ className, amount, currency = \"$\", ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn(\n      \"ml-auto shrink-0 text-base font-semibold tabular-nums\",\n      className,\n    )}\n    {...props}\n  >\n    {currency}\n    {amount.toLocaleString(\"en-US\", { minimumFractionDigits: 2 })}\n  </span>\n));\nInvoiceCardAmount.displayName = \"InvoiceCardAmount\";\n\nconst InvoiceCardActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex shrink-0 items-center gap-1\", className)}\n    {...props}\n  />\n));\nInvoiceCardActions.displayName = \"InvoiceCardActions\";\n\ninterface InvoiceCardActionProps\n  extends React.ComponentPropsWithoutRef<typeof Button> {\n  action?: \"download\" | \"view\";\n}\n\nconst InvoiceCardAction = React.forwardRef<\n  HTMLButtonElement,\n  InvoiceCardActionProps\n>(({ className, action = \"download\", children, ...props }, ref) => {\n  const Icon = action === \"download\" ? Download : ExternalLink;\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8\", className)}\n      {...props}\n    >\n      {children ?? <Icon className=\"h-4 w-4\" />}\n      <span className=\"sr-only\">\n        {action === \"download\" ? \"Download\" : \"View\"}\n      </span>\n    </Button>\n  );\n});\nInvoiceCardAction.displayName = \"InvoiceCardAction\";\n\nexport {\n  InvoiceCard,\n  InvoiceCardIcon,\n  InvoiceCardContent,\n  InvoiceCardHeader,\n  InvoiceCardNumber,\n  InvoiceCardStatus,\n  InvoiceCardDate,\n  InvoiceCardAmount,\n  InvoiceCardActions,\n  InvoiceCardAction,\n  invoiceCardVariants,\n  statusConfig,\n};\n\nexport type {\n  InvoiceCardProps,\n  InvoiceCardStatusProps,\n  InvoiceCardDateProps,\n  InvoiceCardAmountProps,\n  InvoiceCardActionProps,\n  InvoiceStatus,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/invoice-card.tsx"
    },
    {
      "path": "src/registry/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ]
}