@jirawatpyk/aura-react 5.32.0 → 5.34.0

package/README.md

@@ -74,9 +74,9 @@ export default function Root() {
 | `dist/styles.css`     | Component CSS (no font import).                                                                                                                                                                            |
 | `dist/index.d.ts`     | Types for every component and helper, generated from the TypeScript sources (one file).                                                                                                                    |
 
-## Components (61)
+## Components (65)
 
-Actions: Button (`ghost`, `size="sm"`), IconButton, Menu, DropdownMenu (link, danger and radio items), ActionBar, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, FilterSelect, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Table (+ THead, TBody, TFoot, Tr, Th, Td — static tables), FilterBar, FilterDateRange, Stat · Navigation: Command (⌘K palette), BottomNav · Layout: AppShell, Container, Stack, Grid, Separator, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
+Actions: Button (`ghost`, `size="sm"`), IconButton, Menu, DropdownMenu (link, danger and radio items), ActionBar, Tag · Forms: TextField, PasswordField, Textarea, NumberField, Select, FilterSelect, RadioGroup, Checkbox, Switch, SegmentedControl, Combobox (one value, or `multiple`), FileUpload (+ `formatBytes`) · Dates & times: DatePicker, DateRangePicker, Calendar, TimePicker (+ `useFormatDate`, `formatDate`, `parseDate`, `parseTime`) · Feedback: Alert, FormErrorSummary, Toaster/`toast()` (+ `.success/.error/.warning/.info/.loading`), Tooltip, StatusPill, Badge, Progress, Skeleton, EmptyState · Overlays: Dialog, Drawer, Popover · Data: DataTable, Table (+ THead, TBody, TFoot, Tr, Th, Td — static tables), FilterBar, FilterDateRange, Stat, StatusTile + TileGrid, Sparkline · Navigation: Command (⌘K palette), BottomNav · Layout: AppShell, PageHeader, Container, Stack, Grid, Separator, Accordion, Pagination, Card, Tabs, Stepper, SideNav, Breadcrumb, Avatar, Surface, Icon · Theme: ColorSchemeToggle, ColorSchemeScript, `useColorScheme`, ThemeStyle/`createTheme` · Hooks: `useBreakpoint`, `useResponsive`, `breakpoints`, `useAuraLocale`, `useDensity`.
 
 ## Router links, Swedish, motion
 
@@ -186,6 +186,21 @@ 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.34 — StatusTile, TileGrid, Sparkline (DxT Monitor Overview S06)
+
+- **StatusTile**: one monitored thing. `status` (`down` / `problem` / `maintenance` / `ok`) sets an icon *and* a tint and border — red, amber, violet or the plain surface — so colour is never the only sign (circle-alert, triangle-alert, wrench, circle-check). `title` wraps to two lines at most, then ends with "…" (never one cut line, so similar names stay apart); a cut title shows its full text in AURA's tip on hover. `value` sits top right in tabular figures, 600, in its own tone (`valueTone`; default the status's: a Down duration is red). `meta` is a short second line; `markers` (`[{ icon, label, tone? }]`) are small icons at its end, each named and showing its label as a tip on hover. A tip needs a mouse, so on a phone a marker is a hint only: say what it means on the detail page (or in `meta`) too. `href` makes the whole tile one link with a focus ring; its accessible name is everything the tile says, in reading order — "api.example.co.th, Down, 12m, since 09:41, SSL expires in 5 days" — taken from the content (screen-reader-only status word and commas) rather than an `aria-label`, so it always matches what is shown (WCAG 2.5.3). `statusLabel` overrides the status word (th: ล่ม / มีปัญหา / ปิดปรับปรุง / ปกติ). In a TileGrid cell narrower than 226px (two columns on a phone) the value moves under the title in every tile alike; a tile elsewhere (a flex row, a card) keeps the value top right. The hidden status word and commas are text, so `innerText` and a copy include them; a labelled Sparkline in `meta` joins the link's name. Light and dark use the Alert tokens.
+- **TileGrid**: a `ul` of equal columns 8px apart, each child (and each child of a Fragment) one `li`; tiles in a row are as tall as the tallest. `columns` is responsive like Grid; default `{ base: 2, md: 3 }`. Pass `aria-label` to name the list.
+- **Sparkline**: `data` oldest first; `null` (or anything not a finite number) is no point and breaks the line, and a point with no neighbour is a dot. `failed` (booleans by index) with `failures="band"` (a light red band behind the point) or `"ticks"` (a red tick at the foot); default `none`. `tone` (neutral, accent, danger, warning, positive), `size` `sm` 80×24 (default) or `md` 120×32, `min` / `max` to put several on one scale (values beyond them are drawn at the edge). `label` makes it `role="img"` with that name — summarise what the line shows, e.g. "Response time, last 24 h: 180–420 ms, 2 failed checks"; without one it is decoration, hidden from screen readers.
+- All three are stateless and also exported from `/server` (the tile's status word is English there unless `statusLabel`; marker tips need the client entry on the page).
+
+## 5.33 — DxT Monitor requests 5–8
+
+- **Hover shows on the canvas** (request 5): in light, `aura-bg-surface-hover` is zinc-50 — the canvas itself — so SideNav's rows, an IconButton or ghost Button in its header or footer (Sign out), and the same on the page's canvas (PageHeader actions, Pagination, a selectable Tag) showed no hover. A new token, `aura-bg-canvas-hover` (zinc-100 light, zinc-800 dark), is the hover inside AppShell and SideNav; cards, tables, inputs, the top bar, dialogs, drawers and popovers inside them keep `aura-bg-surface-hover`. Hover fills now read `--aura-hover`, falling back to the surface hover: outside AppShell, set `--aura-hover: var(--aura-bg-canvas-hover)` on your own canvas-coloured area.
+- **AppShell `headerHideFrom="lg"`** (request 6): the top bar, `header` and all, shows only below 1024px — where the menu button is — as a header-less bar does: from lg up it is hidden and `--aura-shell-bar-height` is 0. For apps whose phone pages draw a top bar (brand, avatar) and whose desktop pages don't. Default: the bar shows at every width.
+- **PageHeader `breadcrumb`** (request 7): a `<Breadcrumb>` above the title, 4px from it like the eyebrow, in its own `div` — a `nav` can't sit in the eyebrow's `p` (invalid HTML, a hydration error) — with Breadcrumb's own 13px sans. With an eyebrow too, the breadcrumb comes first.
+- **Phone drawer header = bar height** (request 8): in AppShell's phone drawer, a SideNav with `headerDivider` takes the top bar's height (56px, or more when the bar's header wraps), content centred, so its line meets the bar's line beside it; the close button is centred on it. The fixed desktop sidebar keeps 72px.
+- **Also:** the nav drawer's close button is a 44px target on phones and touch screens (the header leaves it 60px); the divided header's layout no longer needs `:has()` (older Safari and Firefox centre the close button too); a DatePicker's or read-only Select's toggle shows its hover on the grey read-only ground.
+
 ## 5.32 — Icon tips, PageHeader, SideNav header divider, pill skeletons (DxT Monitor requests 1–4)
 
 ### DxT Monitor requests 1, 3, 4