{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wallet-card",
  "title": "Wallet Card",
  "description": "Credit balance display card for available, pending, and refresh details.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "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 = ({\n  availableLabel,\n  balanceLabel,\n  className,\n  note,\n  pendingLabel,\n  primaryActionLabel,\n  ref: reference,\n  renewsLabel,\n  secondaryActionLabel,\n  status,\n  ...props\n}: WalletCardProps & { ref?: React.Ref<React.ComponentRef<typeof Card>> }) => {\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\nWalletCard.displayName = \"WalletCard\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}