@jirawatpyk/aura-react 5.7.3 → 5.8.0

package/README.md

@@ -186,6 +186,19 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.8 — Chamber-OS addendum 8 (member portal)
+
+- **Server Components** (item 68): `@jirawatpyk/aura-react/server` now has the stateless display components — `Card`, `Badge`, `StatusPill`, `Alert` (no `onDismiss`), `EmptyState`, `Icon` — and `buttonClass(opts)` for a link that looks like a Button. They render from the same functions as the root components (same HTML for the same props) but carry no `'use client'`, hooks or context, so a Server Component can render them without becoming a client reference or pulling the barrel into its route's bundle. Measured in the Next starter: a server page using all of them adds no AURA client reference.
+  ```tsx
+  import { Card, StatusPill, Alert, buttonClass } from '@jirawatpyk/aura-react/server';
+  <Card id="renewal-prefs" title="Renewal"><StatusPill>Approved</StatusPill></Card>
+  <Link href="/renew" className={buttonClass({ variant: 'secondary' })}>Renew</Link>
+  ```
+  In a Server Component import them — `buttonClass` too — from `/server`: the root package is `'use client'`, so anything imported from it there is a client reference. The server entry now imports React (install `react` alongside it, as for any component). Under React 18's stable build the `react-server` condition isn't available outside Next.js; Next ships its own React for Server Components.
+- **Alert** (item 66): `role` (`alert` · `status` · `note` · `none`; default by tone as before), `icon` (a name or your element, replacing the tone's icon; still `aria-hidden`), and any other attribute (`id`, `data-*`, `aria-*`) on the root. A standing notice in a warning or danger tone that shouldn't interrupt is `role="status"`.
+- **Card and StatusPill** (item 69): `id`, `data-*`, `aria-*` and other attributes go on the root. A titled card is still labelled by its `titleId`; without a title, your `aria-labelledby` is kept.
+- **Table `stackBelow`** (item 67): `'sm'` (640px) or `'md'` (768px) of the table's own box. Below it each body row becomes a card and each cell shows its column label — a `Td`'s `label`, else the text of the matching `Th` in `THead` (colspans counted). A body `Th scope="row"` is the card's title. Cells inside a fragment count; a header or cells rendered by your own wrapper component can't be read, so pass `label` on each `Td` then (a dev warning says when no header was found). A plain table inside a stacked cell stays a plain table. Pure CSS (a container query) with labels rendered on the server, so nothing shifts on hydration; the column headers stay for screen readers and the table keeps explicit `table` / `row` / `cell` roles, which Safari drops from `display: block` tables.
+
 ## 5.7.3 — FormErrorSummary focus follows submits
 
 - **FormErrorSummary** (item 65): with `focusKey`, the summary takes focus only after a submit — never while someone types. Fed react-hook-form's live `errors`, the list empties and refills as fields are fixed and broken again (RHF re-validates on change after a submit); that used to pull focus out of the field being typed in (WCAG 3.2.2). Now a new `focusKey` arms one focus, taken as soon as the list has errors: at once for client errors, or when a server error arrives through `setError` after a valid submit; typing in the meantime cancels it. A click or key press elsewhere also cancels it, so a later live error (a field validated on blur, a picker set with `setValue`) never takes focus. With live RHF errors always pass `focusKey={formState.submitCount}` — a primitive, not an object made each render — and `useForm({ shouldFocusError: false })`, or RHF moves focus to the first field instead. Without `focusKey` nothing changes: it focuses whenever errors first appear.