Author Byline

1import * as React from 'react';
2 
3// @interlace/author-byline v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/author-byline
5// What changed since: https://ds.interlace.tools/c/author-byline#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — AuthorByline
10 *
11 * The "who wrote this + when + how long it takes to read" adornment that sits
12 * directly under an article H1. Pure surface composition over existing
13 * primitives — Avatar (large) on the left, a vertical Stack on the right
14 * with author name (UI semibold), optional one-line bio (UI-sm muted), and a
15 * meta row that pairs the publication date with the reading-time chip,
16 * separated by a typographic mid-dot.
17 *
18 * Date is rendered through a native `<time dateTime>` so RSS / Google
19 * structured-data parsers + assistive tech read the ISO value, while the
20 * visible text uses the short, locale-friendly `Mar 5, 2026` form. Reading
21 * time is a span (not a `<time>`) because it isn't a moment in time — it's
22 * an estimated duration, and the `<time>` element's `datetime` grammar for
23 * durations (`PT5M`) confuses more readers than it helps.
24 *
25 * ## Anatomy
26 *
27 *   AuthorByline                     (div — data-min-viewport=320)
28 *     ├─ Avatar size=lg              (left — `h-12 w-12`, AvatarImage src, AvatarFallback initial)
29 *     └─ Stack vertical gap=xs       (right column)
30 *         ├─ Typography ui semibold  (author name)
31 *         ├─ Typography ui-sm muted  (optional bio)
32 *         └─ <div> meta row          (PublishedDate · ReadingTime)
33 *             ├─ <time dateTime>     (published date — short form)
34 *             ├─ <span aria-hidden>· (dot separator)
35 *             └─ <span>              (reading time — Clock icon + "N min read")
36 *
37 * ## MIN_VIEWPORT — 320
38 *
39 * Article bylines are reading-surface furniture; they MUST work on the
40 * narrowest phone we support. A 320 CSS-px viewport fits one 48px-square
41 * avatar + a single-line name + a two-chip meta row when the bio is omitted;
42 * when the bio is present, the right column wraps naturally because every
43 * row uses the same `flex-wrap` rhythm.
44 *
45 * | Rule | Concept                          | Where in this file                                          |
46 * | ---- | -------------------------------- | ----------------------------------------------------------- |
47// … truncated