Article Card

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/article-card v1.5.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/article-card
7// What changed since: https://ds.interlace.tools/c/article-card#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — ArticleCard + FeaturedArticleCard
12 *
13 * Two article tiles that share one focusable-anchor shell: `ArticleCard`, the
14 * stacked grid tile with the cover on top, and `FeaturedArticleCard`, the
15 * full-bleed hero whose copy sits on a gradient scrim over the image. Both
16 * read the same props.
17 *
18 * They are two components rather than one `variant` prop because the rendered
19 * tree differs entirely (R11). The old `variant` still type-checks for one
20 * minor: `variant="overlay"` delegates to `FeaturedArticleCard` and a
21 * dev-only `console.warn` fires from `useDeprecatedVariantWarning`.
22 *
23 * ## Anatomy
24 *
25 *   CardShell                        (a[href] — data-slot="article-card")
26 *     └─ Card                        (primitives/card, py-0 gap-0)
27 *         ├─ StackBody               (ArticleCard)
28 *         │   ├─ cover aspect-[1000/420] + SourceChip
29 *         │   ├─ CardHeader          (avatar + author name + date)
30 *         │   ├─ CardContent         (title, description, tag Badges)
31 *         │   └─ CardFooter          (MetaChips + ExternalLink on hover)
32 *         └─ OverlayBody             (FeaturedArticleCard)
33 *             ├─ absolute cover + scrim gradient
34 *             ├─ FeaturedChip / SourceChip
35 *             └─ tags, h2 title, description, author · date · MetaChips
36 *
37 * ## Dates are pinned to UTC
38 *
39 * `formatDate` passes `timeZone: 'UTC'`, matching `patterns/author-byline.tsx`.
40 * A date-only ISO string (`"2026-05-10"`) parses as UTC midnight, so without
41 * the pin `toLocaleDateString` re-projects it into the reader's zone and
42 * everyone west of UTC is shown the previous day — on a grid of cards, next to
43 * a post whose byline said otherwise.
44 *
45 * ## The cover box matches the cover's own aspect ratio
46 *
47 * The stacked tile reserves `aspect-[1000/420]`, the exact ratio of the
48 * `width={1000} height={420}` the card already declares on the image. It used
49 * to reserve `h-44` — a fixed 176px HEIGHT, which fixes nothing about the
50 * ratio, because the ratio then floats with the card's width. At the 320px
51// … truncated