{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wallet-card",
  "type": "registry:component",
  "title": "Wallet Card",
  "description": "Credit balance display card for available, pending, and refresh details.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/wallet-card/wallet-card.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@vllnt/ui\";\nimport {\n  CreditBadge,\n  type CreditBadgeStatus,\n} from \"@vllnt/ui\";\n\nexport type WalletCardProps = React.ComponentPropsWithoutRef<typeof Card> & {\n  availableLabel?: string;\n  balanceLabel: string;\n  note?: string;\n  pendingLabel?: string;\n  primaryActionLabel?: string;\n  renewsLabel?: string;\n  secondaryActionLabel?: string;\n  status: CreditBadgeStatus;\n};\n\ntype WalletActionsProps = {\n  primaryActionLabel?: string;\n  secondaryActionLabel?: string;\n};\n\ntype WalletDetailsProps = {\n  availableLabel?: string;\n  balanceLabel: string;\n  note?: string;\n  pendingLabel?: string;\n  renewsLabel?: string;\n};\n\nfunction DetailRow({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 text-sm\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"text-right font-medium\">{value}</span>\n    </div>\n  );\n}\n\nfunction WalletDetails({\n  availableLabel,\n  balanceLabel,\n  note,\n  pendingLabel,\n  renewsLabel,\n}: WalletDetailsProps) {\n  return (\n    <CardContent className=\"space-y-4\">\n      <div className=\"rounded-lg border border-border/70 bg-background px-4 py-3\">\n        <p className=\"text-xs uppercase tracking-[0.18em] text-muted-foreground\">\n          Current balance\n        </p>\n        <p className=\"mt-2 text-3xl font-semibold tracking-tight\">\n          {balanceLabel}\n        </p>\n      </div>\n      <div className=\"space-y-3 rounded-lg border border-border/70 bg-muted/20 p-4\">\n        {availableLabel ? (\n          <DetailRow label=\"Available now\" value={availableLabel} />\n        ) : null}\n        {pendingLabel ? (\n          <DetailRow label=\"Pending\" value={pendingLabel} />\n        ) : null}\n        {renewsLabel ? <DetailRow label=\"Refresh\" value={renewsLabel} /> : null}\n      </div>\n      {note ? (\n        <p className=\"rounded-lg bg-muted px-4 py-3 text-sm text-muted-foreground\">\n          {note}\n        </p>\n      ) : null}\n    </CardContent>\n  );\n}\n\nfunction WalletActions({\n  primaryActionLabel,\n  secondaryActionLabel,\n}: WalletActionsProps) {\n  if (!primaryActionLabel && !secondaryActionLabel) {\n    return null;\n  }\n\n  return (\n    <CardFooter className=\"flex flex-col gap-2 sm:flex-row sm:justify-end\">\n      {secondaryActionLabel ? (\n        <Button className=\"w-full sm:w-auto\" variant=\"outline\">\n          {secondaryActionLabel}\n        </Button>\n      ) : null}\n      {primaryActionLabel ? (\n        <Button className=\"w-full sm:w-auto\">{primaryActionLabel}</Button>\n      ) : null}\n    </CardFooter>\n  );\n}\n\nexport const WalletCard = React.forwardRef<\n  React.ComponentRef<typeof Card>,\n  WalletCardProps\n>(\n  (\n    {\n      availableLabel,\n      balanceLabel,\n      className,\n      note,\n      pendingLabel,\n      primaryActionLabel,\n      renewsLabel,\n      secondaryActionLabel,\n      status,\n      ...props\n    },\n    reference,\n  ) => {\n    return (\n      <Card\n        className={cn(\n          \"w-full max-w-md border-border/70 bg-card shadow-sm\",\n          className,\n        )}\n        ref={reference}\n        {...props}\n      >\n        <CardHeader className=\"space-y-4 pb-4\">\n          <div className=\"space-y-1\">\n            <CardTitle className=\"text-lg\">Wallet</CardTitle>\n            <CardDescription>\n              Track credits, pending top-ups, and replenishment timing.\n            </CardDescription>\n          </div>\n          <div className=\"flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3\">\n            <div>\n              <p className=\"text-sm font-medium\">Available balance</p>\n              <p className=\"text-xs text-muted-foreground\">\n                {renewsLabel ?? \"Credits refresh automatically when enabled.\"}\n              </p>\n            </div>\n            <CreditBadge amount={balanceLabel} status={status} />\n          </div>\n        </CardHeader>\n        <WalletDetails\n          availableLabel={availableLabel}\n          balanceLabel={balanceLabel}\n          note={note}\n          pendingLabel={pendingLabel}\n          renewsLabel={renewsLabel}\n        />\n        <WalletActions\n          primaryActionLabel={primaryActionLabel}\n          secondaryActionLabel={secondaryActionLabel}\n        />\n      </Card>\n    );\n  },\n);\n\nWalletCard.displayName = \"WalletCard\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}