{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stripe-card",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json"
  ],
  "files": [
    {
      "path": "stripe-card.tsx",
      "target": "components/ui/stripe-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, type CardProps } from \"./card\";\n\nexport interface StripeCardProps extends Omit<CardProps, \"title\"> {\n  heading: React.ReactNode;\n  /** Mono meta, left side (e.g. a code). */\n  metaLeft?: React.ReactNode;\n  /** Mono meta, right side (e.g. a count). Rendered accent-colored. */\n  metaRight?: React.ReactNode;\n  badge?: React.ReactNode;\n  footer?: React.ReactNode;\n  /** Leading stripe color. Any CSS color; defaults to a neutral token. */\n  stripeColor?: string;\n  /** Paints a faint background wash keyed to `stripeColor` (or the accent). */\n  wash?: boolean;\n  selected?: boolean;\n}\n\n/**\n * A compact entity row-card with a leading color stripe, a heading, mono meta,\n * a badge slot, and an optional footer. Flat at rest, lifts on hover.\n *\n * The stripe is a categorical key: it says which module, project, or status the\n * row belongs to. It is not a decorative accent, and not the banned side-stripe.\n * Give it meaning or leave it neutral.\n */\nexport const StripeCard = React.forwardRef<HTMLDivElement, StripeCardProps>(\n  (\n    {\n      className,\n      heading,\n      metaLeft,\n      metaRight,\n      badge,\n      footer,\n      stripeColor,\n      wash = false,\n      selected = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => (\n    <Card\n      ref={ref}\n      interactive\n      highlight={selected ? \"ring\" : \"none\"}\n      className={cn(\n        \"group/stripe relative isolate flex flex-col overflow-hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {wash && (\n        <span\n          aria-hidden=\"true\"\n          data-stripe-wash=\"\"\n          className=\"pointer-events-none absolute inset-0 -z-10\"\n          style={{\n            backgroundImage: `linear-gradient(105deg, color-mix(in oklab, ${stripeColor ?? \"var(--color-accent)\"} 20%, transparent), color-mix(in oklab, ${stripeColor ?? \"var(--color-accent)\"} 6%, transparent) 42%, transparent 78%)`,\n          }}\n        />\n      )}\n      <div className=\"flex items-start justify-between gap-3 p-4\">\n        <div className=\"flex min-w-0 items-stretch gap-3\">\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"w-1 shrink-0 self-stretch rounded-full\",\n              stripeColor ? undefined : \"bg-border-strong\",\n            )}\n            style={stripeColor ? { backgroundColor: stripeColor } : undefined}\n          />\n          <div className=\"min-w-0\">\n            <h3 className=\"text-balance text-sm font-semibold leading-snug text-ink\">\n              {heading}\n            </h3>\n            {(metaLeft != null || metaRight != null) && (\n              <p className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 font-mono text-xs text-muted\">\n                {metaLeft != null && <span>{metaLeft}</span>}\n                {metaLeft != null && metaRight != null && (\n                  <span aria-hidden=\"true\">·</span>\n                )}\n                {metaRight != null && (\n                  <span className=\"font-semibold text-accent\">{metaRight}</span>\n                )}\n              </p>\n            )}\n          </div>\n        </div>\n        {badge != null && <div className=\"shrink-0\">{badge}</div>}\n      </div>\n\n      {children}\n\n      {footer != null && (\n        <div className=\"mt-auto border-t border-border bg-surface-2/50 px-4 py-2 text-xs text-muted\">\n          {footer}\n        </div>\n      )}\n    </Card>\n  ),\n);\nStripeCard.displayName = \"StripeCard\";\n"
    }
  ]
}