{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/badge.json"
  ],
  "files": [
    {
      "path": "card.tsx",
      "target": "components/ui/card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge, type BadgeProps } from \"./badge\";\n\ntype Div = React.HTMLAttributes<HTMLDivElement>;\nconst make = (base: string, name: string) =>\n  Object.assign(\n    React.forwardRef<HTMLDivElement, Div>(({ className, ...p }, ref) => (\n      <div ref={ref} className={cn(base, className)} {...p} />\n    )),\n    { displayName: name },\n  );\n\nexport type CardHighlight = \"none\" | \"wash\" | \"edge\" | \"ring\";\n\n/**\n * The shared surface vocabulary. One word picks how any card-like surface\n * (Card, StatCard, Panel, Dialog) sits on the page, and the same choice reads\n * consistently across all of them.\n *   elevated: the default. Lit-from-above surface fill, rim light, shadow.\n *   flat:     quiet surface fill, no lift. The sisu/dashboard workhorse.\n *   glass:    translucent, blurs what sits behind it. A rare, purposeful\n *             choice, never a default.\n *   outline:  transparent, carried by its border alone.\n */\nexport type CardSurface = \"elevated\" | \"flat\" | \"glass\" | \"outline\";\n\n/** Background + rim treatment per surface. No shadow; consumers pick the level. */\nexport const SURFACE_SKIN: Record<CardSurface, string> = {\n  elevated: \"rim-light bg-surface\",\n  flat: \"bg-surface\",\n  glass: \"rim-light bg-surface/65 backdrop-blur-md\",\n  outline: \"bg-transparent\",\n};\n\n/** Whether a surface reads as raised (gets its host's elevation shadow). */\nexport const SURFACE_ELEVATED: Record<CardSurface, boolean> = {\n  elevated: true,\n  flat: false,\n  glass: true,\n  outline: false,\n};\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  interactive?: boolean;\n  highlight?: CardHighlight;\n  surface?: CardSurface;\n  /** @deprecated use `highlight=\"wash\"` */\n  wash?: boolean;\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      interactive,\n      highlight = \"none\",\n      surface = \"elevated\",\n      wash,\n      ...p\n    },\n    ref,\n  ) => {\n    const resolved: CardHighlight =\n      highlight === \"none\" && wash ? \"wash\" : highlight;\n    return (\n      <div\n        ref={ref}\n        data-interactive={interactive ? \"\" : undefined}\n        data-highlight={resolved !== \"none\" ? resolved : undefined}\n        data-surface={surface}\n        className={cn(\n          \"relative isolate rounded-2xl border border-border text-ink\",\n          SURFACE_SKIN[surface],\n          resolved === \"ring\"\n            ? \"glow-ring\"\n            : SURFACE_ELEVATED[surface] && \"shadow-floating\",\n          resolved === \"wash\" && \"wash-accent\",\n          resolved === \"edge\" &&\n            \"after:absolute after:inset-x-5 after:top-0 after:h-px after:hairline-accent\",\n          interactive &&\n            \"transition-control duration-base ease-soft hover:-translate-y-0.5 motion-reduce:transform-none motion-reduce:transition-none\",\n          interactive && resolved !== \"ring\" && \"hover:shadow-overlay\",\n          className,\n        )}\n        {...p}\n      />\n    );\n  },\n);\nCard.displayName = \"Card\";\n\nexport interface CardHeaderProps extends Div {\n  row?: boolean;\n}\n\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, row, ...p }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative p-5 after:absolute after:inset-x-5 after:bottom-0 after:h-px after:hairline-accent\",\n        row ? \"flex flex-row items-start gap-4\" : \"flex flex-col gap-1.5\",\n        className,\n      )}\n      {...p}\n    />\n  ),\n);\nCardHeader.displayName = \"CardHeader\";\n\nexport const CardBody = make(\"p-5\", \"CardBody\");\nexport const CardFooter = make(\n  \"flex items-center gap-2 p-5 border-t border-border\",\n  \"CardFooter\",\n);\n\nexport const CardEyebrow = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...p }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"font-mono text-[0.65rem] uppercase leading-none tracking-[0.16em] text-muted\",\n      className,\n    )}\n    {...p}\n  />\n));\nCardEyebrow.displayName = \"CardEyebrow\";\n\nexport interface CardTitleProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** Heading level. Pick it to fit the page outline. */\n  as?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nexport const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n  ({ className, as: Heading = \"h3\", ...p }, ref) => (\n    <Heading\n      ref={ref}\n      className={cn(\n        \"text-balance text-sm font-semibold tracking-[-0.01em] text-ink\",\n        className,\n      )}\n      {...p}\n    />\n  ),\n);\nCardTitle.displayName = \"CardTitle\";\n\nexport const CardIcon = make(\n  \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-surface-2 text-muted [&_svg]:h-4 [&_svg]:w-4\",\n  \"CardIcon\",\n);\n\nexport const CardActions = make(\n  \"ml-auto flex items-center gap-1\",\n  \"CardActions\",\n);\n\nexport function CardBadge({ className, ...props }: BadgeProps) {\n  return <Badge className={cn(\"self-start\", className)} {...props} />;\n}\nCardBadge.displayName = \"CardBadge\";\n"
    },
    {
      "path": "glow-card.tsx",
      "target": "components/ui/glow-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, type CardProps } from \"./card\";\n\n/**\n * A Card whose border lights up on the edge facing the pointer. The arc turns\n * to follow the cursor and brightens as you approach the edge, so a single card\n * gets the same directional glow the BentoGrid shares across a whole grid.\n */\nexport const GlowCard = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, children, ...props }, ref) => {\n    const localRef = React.useRef<HTMLDivElement | null>(null);\n    const setRefs = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        localRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const onPointerMove = React.useCallback(\n      (e: React.PointerEvent<HTMLDivElement>) => {\n        const el = localRef.current;\n        if (!el) return;\n        const r = el.getBoundingClientRect();\n        el.style.setProperty(\"--edge-x\", `${e.clientX - r.left}px`);\n        el.style.setProperty(\"--edge-y\", `${e.clientY - r.top}px`);\n        el.style.setProperty(\"--edge-o\", \"1\");\n      },\n      [],\n    );\n\n    const onPointerLeave = React.useCallback(() => {\n      localRef.current?.style.setProperty(\"--edge-o\", \"0\");\n    }, []);\n\n    return (\n      <Card\n        ref={setRefs}\n        className={cn(\"relative\", className)}\n        onPointerMove={onPointerMove}\n        onPointerLeave={onPointerLeave}\n        {...props}\n      >\n        <span aria-hidden className=\"edge-glow\" />\n        {children}\n      </Card>\n    );\n  },\n);\nGlowCard.displayName = \"GlowCard\";\n"
    }
  ]
}