Aurora Card

1/**
2 * Aurora Card — the canonical panel. Two tiers (strong / medium), optional
3 * accent edge, optional interactive hover-lift + glow.
4 *
5 * Visual layer matches the Claude Design source (panel gradient, 22/18px radii,
6 * strong shadow, lift-on-hover) ported via a stylesheet keyed to
7 * data-attributes. Architecture keeps the shadcn compound parts.
8 */
9 
10import * as React from "react"
11import { cn } from "@/lib/utils"
12 
13type CardAccent = "cyan" | "rose"
14 
15// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
16 
17/* ─── Card ────────────────────────────────────────────────────────────────── */
18 
19interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
20  /** When true the card becomes a focusable, hoverable interactive tile. */
21  interactive?: boolean
22  /** Accent edge for featured / active / highlighted cards. Omit for none. */
23  accent?: CardAccent | false
24  /**
25   * Visual tier. Default (omitted) is Tier-2 — the canonical panel-strong
26   * gradient + strong shadow, matching the Claude Design default Card.
27   * Pass `elevated={false}` for the lighter Tier-1 list/toolbar surface.
28   */
29  elevated?: boolean
30}
31 
32function Card({ className, interactive, accent, elevated, tabIndex, ref, ...props }: CardProps & { ref?: React.Ref<HTMLDivElement> }) {
33    return (
34      <div
35        ref={ref}
36        className={cn("aurora-card", className)}
37        data-tier={elevated === false ? "1" : "2"}
38        data-interactive={interactive ? "true" : undefined}
39        data-accent={accent || undefined}
40        tabIndex={tabIndex ?? (interactive ? 0 : undefined)}
41        {...props}
42      />
43    )
44}
45 
46/* ─── CardHeader ──────────────────────────────────────────────────────────── */
47 
48function CardHeader({ className, style, ref, ...props }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
49  return (
50    <div
51      ref={ref}
52      className={cn("border-b px-4 py-3", className)}
53      style={{ borderColor: "var(--aurora-border-default)", ...style }}
54      {...props}
55    />
56  )
57}
58 
59// … truncated