@kennycorrea/ui 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,9 +1,103 @@
 # Changelog
 
-## 0.10.0 — 2026-10-19
+## 0.11.0 — 2026-10-19
+
+- **Touch feedback** — Button, list rows, `StatTile` and `TabBar` items share a pressed state (`:active` scale `--press-scale` 0.97 + tint, `--press-duration` 120 ms); hover styles are in `@media (hover: hover)`. TabBar no longer dims on press.
+- **`Button size="touch"`** (44px) and **`iconOnly`**, which grows the hit area to 44px on coarse pointers via `::before` without changing the visual size.
+- **`Toaster`** — `position` adds `top-center` / `bottom-center` (vertical swipe-to-dismiss); `offset` takes any CSS length (e.g. `var(--tabbar-height)`).
+- **Fields** — `Input`, `Textarea` and the `Select` trigger are 16px on coarse pointers (no iOS focus zoom); `inputMode` / `enterKeyHint` passthrough documented.
+
+- **`PullToRefresh`** — wraps the page (`scroller="document"`, default) or its own scroll container (`"self"`). A touch drag from scroll-top past `threshold` shows a spinner and calls `onRefresh(): Promise<void>`, holding until it settles. Active only with `(pointer: coarse)` and only when the scroller is at the top; no effect on desktop. No transitions under `prefers-reduced-motion`. Label from `UiStrings.refreshing` (default "Refreshing"). A shortcut only: the parent must still offer a visible refresh action.
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
+
+- **`SegmentedControl`** — one choice from 2–5 `options` `{ value, label, disabled? }` on a pill track with a sliding thumb (CSS transform, off under `prefers-reduced-motion`). Equal-width segments, `fullWidth`, `size` `sm` | `md`. Radio semantics with a roving tabindex: arrow keys move and select (wrapping, skipping disabled), Home/End jump. Hand-built; no new dependency.
+- **`ChipGroup`** — horizontally scrolling filter chips, single (`value: string | null`, click the selected chip to clear) or `multiple` (`value: string[]`). Scroll-snap, fade edges that show only where there is more to scroll, and the selected chip scrolled into view. Chips are `aria-pressed` buttons; Left/Right/Home/End move focus.
+- **Breaking:** `SegmentedControl` is now the new atom; Radix Themes' one moved to `RadixSegmentedControl` in `primitives`.
+
+#
+- **`NavBar`** — a sticky top bar for small screens: `title`, `leading` (a back-button slot) and
+  `trailing` (icon buttons). With `largeTitle`, a large left-aligned title sits in the content flow
+  and collapses into a small centred title in the bar as the page scrolls past it. The bar gains
+  `--material-bar` and a hairline only once scrolled; one `IntersectionObserver`, no scroll
+  listeners. Pads for `--safe-top`; height exposed as `--navbar-height`. Accessible: the large title
+  is the single `h1` and the small copy is `aria-hidden` (without `largeTitle` the small title is
+  the `h1`).
+- **`BackButton`** — chevron plus optional `label`, 44px target; with no label its name is `UiStrings.back`.
+- `UiStrings.back` (default "Back").
+- **`TabBar`** / **`TabBarSpacer`** — fixed bottom navigation, 3–5 `items` `{ value, label, icon, activeIcon?, badge?, render? }`; `render` receives the props to spread on a router link (`aria-current="page"` on the active one). 49px + `--safe-bottom` (exposed as `--tabbar-height`), `--material-bar` ground, hairline top, brand-coloured active item, `:active` press feedback, hidden from `hideFrom` (default `md`).
+- **`ActionSheet`** — `{ label, tone, icon?, onSelect }[]` with optional `title` / `message` and a
+  separated Cancel, on the grouped surface. Below `md` it is anchored to the bottom; at `md` and up
+  a small centred dialog. Built on Radix `AlertDialog`: no outside-click dismissal, and focus lands
+  on Cancel so Enter never fires a destructive action. Escape and Cancel run nothing.
+- **`confirm({ title, message, confirmLabel, cancelLabel, tone })`** — resolves `true` on accept and
+  `false` on Cancel, Escape or any other dismissal; never rejects. Callable from anywhere, like
+  `toast()`. Mount one `<ConfirmProvider />` inside `<Theme>`; concurrent calls queue.
+- `UiStrings.cancel` and `UiStrings.confirm` (defaults "Cancel", "Confirm").
+- New dependency: `@radix-ui/react-alert-dialog`.
+- **`Sheet`** — a bottom sheet on Radix Dialog: drag handle, `detent` `medium` | `large` | `fit`
+  (several at once via `detents`), velocity-based dismiss, a scrolling body that hands off to the
+  drag only at scroll-top, a footer above `--safe-bottom` and the keyboard (`visualViewport`), and
+  opt-in `scaleBackground` at `large`. Portals into the nearest Theme like the other floating atoms.
+- **`ResponsiveDialog`** — `Dialog`'s props plus `sheetDetent`; a Dialog at `md` and up, a Sheet below.
+- New dependency: `@radix-ui/react-dialog`.
+- **`ListRow` `swipeActions`** `{ leading?, trailing? }` of `{ label, icon?, tone?, onAction }`, and opt-in
+  `fullSwipe` (past 60% of the row runs the first trailing action). Drag reveals the actions with
+  rubber-banding; one row open per `ListSection`; tap outside, Escape or tapping the row closes it.
+  The gesture is offered only on touch and without `prefers-reduced-motion`. The same actions are
+  always in the row's context menu (right-click, long-press) and in an overflow button — visible
+  when the gesture is off, visually hidden but focusable when it is on.
+- `UiStrings.moreActions` — the overflow button's accessible name (default "More actions").
+
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
 
 ### Added
-- **`NotificationCard`** — a persistent rich toast in a viewport corner: icon, title,
+- **`ListSection`, `ListRow` and `ListRowSkeleton`** — a native-style grouped list. A section
+  wraps rows on the grouped surface, with optional `header` and `footer` text outside the group
+  and `variant: 'inset' | 'full'`. Hairlines start after the leading slot. A row takes
+  `leading`, `title`, `subtitle`, `trailing`, `chevron`, `disabled` and `destructive`, and renders
+  a `button` (`onClick`), an `a` (`href`), your own element (`asChild`) or a plain `div`. Rows
+  are at least `--tap-min` tall with a pressed state; hover applies only under
+  `@media (hover: hover)`. Titles truncate, trailing values use tabular numerals. The list is
+  `<ul role="list">`. The skeleton announces `loading` from the strings provider.
+
+
+- **`StatTile`** — a compact KPI tile on `Card` (`variant`, `density`): `label`, `value` (tabular numerals), optional `delta` `{ value, direction, tone, label }` with an arrow and a positive/negative/neutral tone independent of direction, a `sparkline` slot, and `href` / `onClick` that make the whole tile a link or button with a chevron.
+- **`ScrollStrip`** — a horizontal scroll-snap row (`snap-x mandatory`, scroll padding equal to `--page-gutter`, hidden scrollbar, items peek at the edge via `itemWidth`) that becomes a `columns`-wide CSS grid from `gridFrom` (default `md`). For KPI rows and card carousels.
+- New token: `--page-gutter` (optional; falls back to 16px).
+
+### Added
+- **Mobile presentation layer in `tokens.css`** — an opt-in "grouped" surface style (cards on a
+  tinted canvas). Tokens: `--surface-grouped`, `--canvas-grouped`, `--separator-inset`,
+  `--radius-group` (12px), `--space-row-y` / `--space-row-x` (10 / 12px), `--tap-min` (44px),
+  `--safe-top/right/bottom/left` (`env(safe-area-inset-*)`, 0 fallback) and a translucent
+  `--material-bar` with `--material-bar-filter` (`saturate(180%) blur(20px)`).
+- Tailwind utilities: `bg-grouped`, `bg-canvas-grouped`, `border-separator-inset`,
+  `rounded-group`, `min-h-tap`, `pt-safe`, `pb-safe`, `px-safe`, `bg-material`.
+- Gray-11 and gray-12 text passes WCAG AA on the card, canvas and bar in light and dark
+  (`test/grouped.test.tsx`). README section with a before/after example.
+
+- **`Card` `variant` and `density`** (also on `CardHeader`, `CardBody`; `density` on
+  `CardTitle`). `variant`: `outlined` (default, the current look), `grouped` (no border or
+  shadow, `bg-grouped`, `rounded-group`) or `plain` (no surface). `density`: `comfortable`
+  (default) or `compact` (row spacing tokens, smaller title). Both take Radix-style responsive
+  objects (`{ initial: 'grouped', md: 'outlined' }`, breakpoints `initial`, `xs`, `sm`, `md`,
+  `lg`, `xl`). Parts inherit from the `Card` and can override. `raised` is kept, and ignored by
+  `grouped` and `plain`. Exports `CardVariant`, `CardDensity`, `Responsive`. Responsive values
+  are data attributes matched by media queries in `tokens.css` (Radix breakpoints, not
+  Tailwind's). Example in `examples/Cards.tsx`, tests in `test/Card.test.tsx`.
+
+No visual change to existing atoms.
+
+## 0.10.0 — 2026-10-19
+
+### Added
+- **`NotificationCard`** — a persistent rich toast in a viewport corner: icon, title,
   description, collapsible body and actions; controlled or uncontrolled; `onDismiss(reason)`;
   non-modal, Escape only while focused; a labelled `section`, not a live region.
 
@@ -12,17 +106,17 @@
   inside one, its portal is wrapped in a nested `<Theme>` so it keeps the appearance.
 - README rewritten as a generic presentation of the library.
 
-## 0.9.1 — 2026-10-18
+## 0.9.1 — 2026-10-18
 
 ### Fixed
 - **`Drawer` renders inside the nearest `<Theme>`** (`.radix-themes`) instead of under
   `<body>`. Outside a Theme none of the house tokens or the accent are defined, so in 0.9.0 the
-  sheet lost the app's appearance — a dark app got a light sheet. Falls back to `<body>` when
+  sheet lost the app's appearance — a dark app got a light sheet. Falls back to `<body>` when
   there is no Theme; `container` still overrides it.
 - In `modal` mode, everything outside the sheet goes `inert` at every level up to `<body>`, not
   only the sheet's siblings, now that the sheet sits inside the Theme rather than beside it.
 
-## 0.9.0 — 2026-10-18
+## 0.9.0 — 2026-10-18
 
 ### Added
 - **`Drawer`**, a bottom sheet with `collapsed` and `expanded` snap points, in two modes:
@@ -37,7 +131,7 @@
 ### Not verified
 - Only exercised in jsdom with simulated pointer events, not on a real touch device.
 
-## 0.8.1 — 2026-10-11
+## 0.8.1 — 2026-10-11
 
 ### Fixed
 - **`Badge` text passes WCAG AA in both appearances.** Soft badges wrote their text in step a11
@@ -58,7 +152,7 @@
 ### Docs
 - README: the colour scales the atoms need, and their order relative to `base.css`.
 
-## 0.8.0 — 2026-10-09
+## 0.8.0 — 2026-10-09
 
 ### Added
 - **Every Radix Themes component the atoms do not wrap**, re-exported unchanged from
@@ -68,11 +162,11 @@
   RadioCards, RadioGroup, ScrollArea, SegmentedControl, TabNav, Table, Tabs, TextField,
   AccessibleIcon, Portal, Reset, Slot, Slottable, ThemePanel, VisuallyHidden. Where an atom
   exists it remains the export under that name.
-- **`ThemeRoot`** — Themes' `<Theme>`, renamed because `Theme` is already this package's type.
+- **`ThemeRoot`** — Themes' `<Theme>`, renamed because `Theme` is already this package's type.
 - **All of Radix Icons** (`@radix-ui/react-icons`, 320 `*Icon` components). `Icon` is
   unchanged and still the house glyph set.
 
-## 0.7.0 — 2026-10-09
+## 0.7.0 — 2026-10-09
 
 ### Added
 - **`Alert`**: an inline message with `type` (`info` default, `warning`, `success`, `error`,
@@ -81,7 +175,7 @@
   theme's own accent. Errors and warnings are `role="alert"`, the rest `role="status"`.
 - **`Skeleton`** (Themes' skeleton) and **`SkeletonText`** (a `lines`-long paragraph placeholder).
 
-## 0.6.1 — 2026-10-08
+## 0.6.1 — 2026-10-08
 
 ### Fixed
 - **`Slider` thumbs always have an accessible name.** Without `fillFrom`, `label` landed on the
@@ -91,7 +185,7 @@
   Radix's bare "Minimum"/"Maximum". Consumers using `fillFrom={min}` only to get a name can
   drop it.
 
-## 0.6.0 — 2026-10-07
+## 0.6.0 — 2026-10-07
 
 ### Added
 - **`RichText`**: a Tiptap editor (StarterKit) under a Radix `Toolbar`. Marks (bold, italic,
@@ -99,22 +193,22 @@
   one, so the toolbar is one tab stop with arrow keys. `value`/`onChange` speak HTML; also
   `placeholder`, `disabled`, `invalid`, `rows`, `aria-label`/`aria-labelledby`, and a ref
   exposing `{ editor, focus }`.
-  Styled as a Themes `TextArea` (surface, size 2) from public tokens — border, focus ring,
-  background, invalid and disabled states — in `.ui-richtext*` in `tokens.css`.
+  Styled as a Themes `TextArea` (surface, size 2) from public tokens — border, focus ring,
+  background, invalid and disabled states — in `.ui-richtext*` in `tokens.css`.
 - `UiStrings` gains `formatting`, `bold`, `italic`, `strike`, `heading`, `bulletList`,
   `orderedList` (English defaults; hosts should translate them).
 
 ### Requires
 - `tokens.css` imported; the editor is unstyled without it.
 
-## 0.5.0 — 2026-10-06
+## 0.5.0 — 2026-10-06
 
 ### Added
 - **`Slider` `fillFrom`**: fills from a fixed value to the thumb, in either direction, instead of
   from `min`. Same units as `value`, clamped to [min, max]; nothing is filled when the thumb sits
   on it. The fill's ends line up with the thumb's centre at every value, using Radix's own
   in-bounds offset. Built on `@radix-ui/react-slider` and styled from Themes' public tokens
-  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
+  (`.ui-slider*` in `tokens.css`), because Themes' slider gives no way to place its range —
   consumers overriding `.rt-SliderRange` can drop that CSS.
   Single horizontal left-to-right thumb only: with two thumbs, `orientation="vertical"`,
   `inverted` or `dir="rtl"` it is ignored with a development warning. Margin props are not
@@ -127,7 +221,7 @@
 - Without `fillFrom`, `Slider` is still the Radix Themes slider, rendered exactly as in 0.4.0.
 
 ### Requires
-- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
+- `tokens.css` imported, as it already must be for toasts — the `fillFrom` path is unstyled
   without it.
 
 ## 0.4.0

package/README.md

@@ -88,6 +88,50 @@ Components never contain literal text. The handful they need — a spinner's lab
 placeholder, close/expand/collapse names — come from `UiStringsProvider`, which takes a partial
 `UiStrings` object. Defaults are English. Most components also accept the label as a prop.
 
+## Mobile presentation layer
+
+An opt-in "grouped" surface style — rows in rounded cards on a tinted canvas, as in native
+settings screens. Nothing existing reads these tokens, so atoms render exactly as before.
+
+| Token | Value |
+| --- | --- |
+| `--surface-grouped` | Card background (white / gray-3 in dark), no border |
+| `--canvas-grouped` | Tinted page background (gray-3 / gray-1 in dark) |
+| `--separator-inset` | Hairline for row separators |
+| `--radius-group` | 12px |
+| `--space-row-y` / `--space-row-x` | 10px / 12px |
+| `--tap-min` | 44px |
+| `--safe-top/right/bottom/left` | `env(safe-area-inset-*)`, `0px` fallback |
+| `--material-bar`, `--material-bar-filter` | Translucent bar colour and `saturate(180%) blur(20px)` |
+
+Tailwind utilities: `bg-grouped`, `bg-canvas-grouped`, `border-separator-inset`, `rounded-group`,
+`min-h-tap`, `pt-safe`, `pb-safe`, `px-safe`, `bg-material`.
+
+Gray-11 and gray-12 text pass WCAG AA on the card, the canvas and the bar (over white or black
+content) in both appearances — see `test/grouped.test.tsx`. Remember `viewport-fit=cover` in the
+viewport meta, or the safe-area insets are always 0.
+
+**Before** — a bordered panel:
+
+```tsx
+<div className="panel p-4">
+  <button className="py-2">Profile</button>
+</div>
+```
+
+**After** — a grouped list under a blurred bar:
+
+```tsx
+<div className="min-h-screen bg-canvas-grouped px-safe">
+  <header className="bg-material pt-safe sticky top-0">Settings</header>
+  <ul className="rounded-group bg-grouped mx-3 divide-y divide-separator-inset">
+    <li><button className="min-h-tap w-full px-3 text-left">Profile</button></li>
+    <li><button className="min-h-tap w-full px-3 text-left">Notifications</button></li>
+  </ul>
+  <div className="pb-safe" />
+</div>
+```
+
 ## Components
 
 ### Toast
@@ -104,6 +148,22 @@ toast.info({ title: 'Deleted', action: { label: 'Undo', onClick: restore } });
 toast.dismiss(id);
 ```
 
+`position` also takes `'top-center'` and `'bottom-center'`; centred stacks swipe away vertically
+(towards their edge). `offset` is the distance from the anchored edge and accepts any CSS length, so
+the stack can clear a bar: `<Toaster position="top-center" offset="var(--navbar-height)" />`, or
+`<Toaster position="bottom-center" offset="calc(var(--tabbar-height) + 8px)" />`.
+
+### Touch feedback and sizing
+
+- Button, list rows, `StatTile` and `TabBar` items share one pressed state: `:active` scales to
+  `--press-scale` (0.97) with a gray tint over `--press-duration` (120 ms); off under
+  `prefers-reduced-motion`. Our hover styles are inside `@media (hover: hover)`.
+- `<Button size="touch">` has a 44px minimum height. `<Button iconOnly variant="ghost">` keeps its
+  visual size but gets a 44px hit area on coarse pointers.
+- `Input`, `Textarea` and `Select` render at 16px on coarse pointers so iOS does not zoom on focus.
+  `inputMode` and `enterKeyHint` on `Input` / `Textarea` pass through to the native element:
+  `<Input type="text" inputMode="decimal" enterKeyHint="done" />`.
+
 ### NotificationCard
 
 A persistent rich toast: it floats in a viewport corner and stays until it is closed.
@@ -171,6 +231,31 @@ A bottom sheet with `collapsed`/`expanded` snap points and a draggable handle.
 Snap and open state are controllable (`snap`/`onSnapChange`, `open`/`onOpenChange`). The handle
 is a real button with `aria-expanded`. Example: `examples/Drawers.tsx`.
 
+### Sheet and ResponsiveDialog
+
+`Sheet` is a bottom sheet on Radix Dialog (focus trap, Escape, scrim and `aria-modal` are
+Radix's). `detent` is `'medium'` (50% of the visible viewport), `'large'` (92%) or `'fit'` (the
+content, capped at 90%). Pass `detents` to let the user move between several; dragging down from
+the lowest dismisses.
+
+```tsx
+<Sheet open={open} onOpenChange={setOpen} title="New booking" detents={['medium', 'large']}
+  defaultDetent="medium" scaleBackground footer={<Button>Save</Button>}>
+  <form>…</form>
+</Sheet>
+
+<ResponsiveDialog open={open} onOpenChange={setOpen} title="Edit" sheetDetent="large"
+  footer={<Button>Save</Button>}>…</ResponsiveDialog>
+```
+
+A flick faster than 0.5 px/ms, or a drag of 25% of the height, dismisses. The body scrolls
+normally and hands the gesture to the sheet only when it is at its top and pulled down. The footer
+clears `--safe-bottom` and follows `visualViewport`, so it and the focused field stay above the
+on-screen keyboard. `scaleBackground` scales the rest of the Theme at `large`; a transformed
+ancestor re-parents `position: fixed` descendants, so fixed bars in the page scale with it.
+`ResponsiveDialog` takes `Dialog`'s props plus `sheetDetent` and is a Dialog at `md` (768px) and
+up; crossing the breakpoint while open remounts `children`, so keep form state in the parent.
+
 ### Slider
 
 `label` is required and becomes the `aria-label`. Values are arrays, one per thumb.

package/dist/atoms/ActionSheet/ActionSheet.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+export type ActionSheetTone = 'neutral' | 'brand' | 'danger';
+export interface ActionSheetAction {
+    label: string;
+    /** `danger` is red. Default `neutral`. */
+    tone?: ActionSheetTone;
+    icon?: ReactNode;
+    /** Runs, then the sheet closes. */
+    onSelect: () => void;
+}
+export interface ActionSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    actions: ActionSheetAction[];
+    title?: ReactNode;
+    message?: ReactNode;
+    /** Overrides the Cancel button's label (otherwise the `cancel` UI string). */
+    cancelLabel?: string;
+    /** Where the portal mounts. Default: the nearest `<Theme>`, else rendered in place. */
+    container?: HTMLElement | null;
+}
+/**
+ * A short list of actions to choose between, on Radix `AlertDialog`: below `md` anchored to the
+ * bottom as a grouped list with a separated Cancel; at `md` and up a small centred dialog.
+ *
+ * AlertDialog rather than Dialog because the user is being asked to decide — it cannot be
+ * dismissed by clicking outside, and focus lands on Cancel, so Enter never fires a destructive
+ * action by accident. Escape and Cancel both close it without running anything.
+ */
+export declare function ActionSheet({ open, onOpenChange, actions, title, message, cancelLabel, container, }: ActionSheetProps): import("react").JSX.Element;

package/dist/atoms/ActionSheet/ActionSheet.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { Theme } from '@radix-ui/themes';
+import { useSyncExternalStore } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { cn } from '../../utils/cn.js';
+import { useThemePortalTarget } from '../../utils/themePortal.js';
+/** Tailwind's `md`. At and above it the sheet becomes a small centred dialog. */
+const MD = '(min-width: 768px)';
+function subscribe(onChange) {
+    const query = window.matchMedia(MD);
+    query.addEventListener('change', onChange);
+    return () => query.removeEventListener('change', onChange);
+}
+function useIsMdUp() {
+    return useSyncExternalStore(subscribe, () => window.matchMedia(MD).matches, () => true);
+}
+const TONE = {
+    neutral: 'text-ink',
+    brand: 'text-brand-700',
+    danger: 'text-[var(--red-11)]',
+};
+/**
+ * A short list of actions to choose between, on Radix `AlertDialog`: below `md` anchored to the
+ * bottom as a grouped list with a separated Cancel; at `md` and up a small centred dialog.
+ *
+ * AlertDialog rather than Dialog because the user is being asked to decide — it cannot be
+ * dismissed by clicking outside, and focus lands on Cancel, so Enter never fires a destructive
+ * action by accident. Escape and Cancel both close it without running anything.
+ */
+export function ActionSheet({ open, onOpenChange, actions, title, message, cancelLabel, container, }) {
+    const strings = useUiStrings();
+    const mdUp = useIsMdUp();
+    const { anchorRef, target, resolved } = useThemePortalTarget(container);
+    const cancel = cancelLabel ?? strings.cancel;
+    const hasHeader = title != null || message != null;
+    const header = hasHeader ? (_jsxs("div", { className: "px-4 py-3 text-center", children: [title != null ? (_jsx(AlertDialog.Title, { className: "m-0 text-sm font-medium text-ink", children: title })) : (_jsx(AlertDialog.Title, { className: "sr-only", children: cancel })), message != null ? (_jsx(AlertDialog.Description, { className: "m-0 mt-0.5 text-sm text-ink-muted", children: message })) : null] })) : null;
+    const rows = actions.map((a) => (_jsxs(AlertDialog.Action, { onClick: a.onSelect, "data-tone": a.tone ?? 'neutral', className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center gap-2 border-t border-hairline px-4 text-base', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]', TONE[a.tone ?? 'neutral']), children: [a.icon ? _jsx("span", { "aria-hidden": "true", children: a.icon }) : null, a.label] }, a.label)));
+    const cancelButton = (_jsx(AlertDialog.Cancel, { className: cn('flex min-h-[var(--tap-min,44px)] w-full items-center justify-center px-4 text-base font-medium text-ink', 'outline-none hover:bg-[var(--gray-a3)] focus-visible:bg-[var(--gray-a3)] active:bg-[var(--gray-a4)]'), children: cancel }));
+    const body = mdUp ? (_jsxs(AlertDialog.Content, { "data-presentation": "dialog", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet-dialog fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-2xl bg-sheet text-ink shadow-2xl outline-none ring-1 ring-hairline", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows }), _jsx("div", { className: "border-t border-hairline", children: cancelButton })] })) : (_jsxs(AlertDialog.Content, { "data-presentation": "sheet", ...(message == null ? { 'aria-describedby': undefined } : {}), className: "ui-sheet fixed inset-x-0 bottom-0 z-50 mx-auto flex w-full max-w-lg flex-col gap-2 px-2 pb-[max(0.5rem,var(--safe-bottom,0px))] outline-none", children: [_jsxs("div", { className: "overflow-hidden rounded-xl bg-grouped", children: [header, _jsx("div", { className: cn(!hasHeader && '[&>*:first-child]:border-t-0'), children: rows })] }), _jsx("div", { className: "overflow-hidden rounded-xl bg-grouped", children: cancelButton })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), resolved ? (_jsx(AlertDialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsx(AlertDialog.Portal, { container: target ?? undefined, children: _jsxs(Theme, { hasBackground: false, children: [_jsx(AlertDialog.Overlay, { className: "ui-sheet-scrim fixed inset-0 z-40 bg-scrim" }), body] }) }) })) : null] }));
+}

package/dist/atoms/ActionSheet/confirm.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type ActionSheetTone } from './ActionSheet.js';
+export interface ConfirmOptions {
+    title: ReactNode;
+    message?: ReactNode;
+    /** The accept button. Default: the `confirm` UI string. */
+    confirmLabel?: string;
+    /** The dismiss button. Default: the `cancel` UI string. */
+    cancelLabel?: string;
+    /** `danger` for destructive confirmations. Default `neutral`. */
+    tone?: ActionSheetTone;
+}
+/**
+ * Asks and resolves `true` on accept, `false` on Cancel, Escape or any other dismissal.
+ * Never rejects.
+ *
+ *     if (await confirm({ title: 'Delete booking?', confirmLabel: 'Delete', tone: 'danger' })) …
+ */
+export declare function confirm(options: ConfirmOptions): Promise<boolean>;
+/** Renders the pending confirmation. Mount once, inside `<Theme>`, next to `<Toaster>`. */
+export declare function ConfirmProvider(): import("react").JSX.Element | null;

package/dist/atoms/ActionSheet/confirm.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { useUiStrings } from '../../strings.js';
+import { ActionSheet } from './ActionSheet.js';
+/**
+ * A module-level queue, like `toast()`: `confirm()` can be called from any handler without
+ * threading a hook through. One `<ConfirmProvider>` per app; calls made while one is showing
+ * wait their turn rather than replacing it, so nobody's question is silently answered "no".
+ */
+let queue = [];
+const listeners = new Set();
+/** A fresh array per change, so `useSyncExternalStore` sees it. */
+let snapshot;
+function emit(next) {
+    queue = next;
+    snapshot = queue[0];
+    for (const l of listeners)
+        l();
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => listeners.delete(l);
+}
+/**
+ * Asks and resolves `true` on accept, `false` on Cancel, Escape or any other dismissal.
+ * Never rejects.
+ *
+ *     if (await confirm({ title: 'Delete booking?', confirmLabel: 'Delete', tone: 'danger' })) …
+ */
+export function confirm(options) {
+    return new Promise((resolve) => emit([...queue, { ...options, resolve }]));
+}
+/** Renders the pending confirmation. Mount once, inside `<Theme>`, next to `<Toaster>`. */
+export function ConfirmProvider() {
+    const current = useSyncExternalStore(subscribe, () => snapshot, () => undefined);
+    const strings = useUiStrings();
+    if (!current)
+        return null;
+    const settle = (ok) => {
+        if (queue[0] !== current)
+            return;
+        current.resolve(ok);
+        emit(queue.slice(1));
+    };
+    return (_jsx(ActionSheet, { open: true, onOpenChange: (open) => {
+            if (!open)
+                settle(false);
+        }, title: current.title, message: current.message, cancelLabel: current.cancelLabel, actions: [
+            {
+                label: current.confirmLabel ?? strings.confirm,
+                tone: current.tone,
+                onSelect: () => settle(true),
+            },
+        ] }, queue.length === 0 ? 'none' : String(queueId(current))));
+}
+const ids = new WeakMap();
+let nextId = 0;
+function queueId(p) {
+    let id = ids.get(p);
+    if (id === undefined) {
+        id = ++nextId;
+        ids.set(p, id);
+    }
+    return id;
+}

package/dist/atoms/ActionSheet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ActionSheet.js';
+export * from './confirm.js';

package/dist/atoms/ActionSheet/index.js

@@ -0,0 +1,2 @@
+export * from './ActionSheet.js';
+export * from './confirm.js';

package/dist/atoms/Button/Button.js

@@ -18,8 +18,8 @@ const VARIANTS = {
     danger: { variant: 'solid', color: 'red' },
 };
 /** Themes sizes are 1–4; ours are the three a form actually needs. */
-const SIZES = { sm: '2', md: '3', lg: '4' };
-export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, asChild = false, href, className, disabled, children, ...props }, ref) {
+const SIZES = { sm: '2', md: '3', lg: '4', touch: '3' };
+export const Button = forwardRef(function Button({ variant = 'primary', size = 'md', loading = false, fullWidth = false, iconOnly = false, asChild = false, href, className, disabled, children, ...props }, ref) {
     const intent = VARIANTS[variant];
     // An anchor is `asChild` underneath, so everything below treats the two the same: neither a
     // link nor a slotted child may be given `loading` or `disabled`, because those are button
@@ -29,6 +29,6 @@ export const Button = forwardRef(function Button({ variant = 'primary', size = '
         // Themes renders its own spinner and keeps the label's width while it spins, so the
         // button does not jump. It does not disable the button, which is why `disabled` still
         // accounts for it.
-        loading: slotted ? undefined : loading, disabled: slotted ? undefined : disabled || loading, className: cn(fullWidth && 'w-full', className), ...props, children: href !== undefined ? _jsx("a", { href: href, children: children }) : children }));
+        loading: slotted ? undefined : loading, disabled: slotted ? undefined : disabled || loading, "data-variant": variant, "data-size": size, "data-icon-only": iconOnly || undefined, className: cn('ui-button', fullWidth && 'w-full', className), ...props, children: href !== undefined ? _jsx("a", { href: href, children: children }) : children }));
     return themed;
 });

package/dist/atoms/Button/Button.types.d.ts

@@ -12,7 +12,8 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
  * panel. So `secondary` means exactly one thing everywhere and the other look has its own name.
  */
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+/** `touch` is `md` type with a 44px minimum height, for primary actions on touch screens. */
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'touch';
 /**
  * Derived from Themes' own props rather than from `ButtonHTMLAttributes`.
  *
@@ -26,6 +27,11 @@ export interface ButtonProps extends Omit<ComponentPropsWithoutRef<typeof Themed
     /** Renders a spinner and disables the button. */
     loading?: boolean;
     fullWidth?: boolean;
+    /**
+     * The button holds only an icon. Its visual size is unchanged, but on coarse pointers the hit
+     * area grows to 44px with an invisible `::before`, so neighbours do not shrink.
+     */
+    iconOnly?: boolean;
     /** Renders the child element instead of a `button`, e.g. a router `Link`. */
     asChild?: boolean;
     /**

package/dist/atoms/Card/Card.d.ts

@@ -1,5 +1,19 @@
-import type { HTMLAttributes } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+import { type HTMLAttributes } from 'react';
+export type CardVariant = 'outlined' | 'grouped' | 'plain';
+export type CardDensity = 'comfortable' | 'compact';
+/** Radix Themes' breakpoints, in the order they apply. `initial` is the unconditional value. */
+export declare const CARD_BREAKPOINTS: readonly ["initial", "xs", "sm", "md", "lg", "xl"];
+export type CardBreakpoint = (typeof CARD_BREAKPOINTS)[number];
+/** A value, or one per breakpoint — Radix Themes' responsive prop convention. */
+export type Responsive<T> = T | Partial<Record<CardBreakpoint, T>>;
+interface CardStyleProps {
+    /** `outlined` is the bordered card; `grouped` a borderless rounded tile for tinted canvases;
+     * `plain` has no surface at all. Grouped and plain ignore `raised`. */
+    variant?: Responsive<CardVariant>;
+    /** `compact` tightens padding to the row spacing tokens and quietens the title. */
+    density?: Responsive<CardDensity>;
+}
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardStyleProps {
     /** Lifts the card off the ground — for dialogs and anything that floats. */
     raised?: boolean;
 }
@@ -8,9 +22,16 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  *
  * Themes pads its card for you; the house card is built from a header and a body with a
  * rule between them, so the padding belongs to those rather than to the card. `p-0` is the
- * whole of the customisation.
+ * whole of the customisation. Variant and density reach the header, title and body through
+ * context, and each can still override them.
  */
-export declare function Card({ raised, className, ...props }: CardProps): import("react").JSX.Element;
-export declare function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
-export declare function CardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function Card({ raised, variant, density, className, ...props }: CardProps): import("react").JSX.Element;
+export interface CardPartProps extends HTMLAttributes<HTMLDivElement>, CardStyleProps {
+}
+export declare function CardHeader({ variant, density, className, ...props }: CardPartProps): import("react").JSX.Element;
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    density?: Responsive<CardDensity>;
+}
+export declare function CardTitle({ density, className, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardBody({ variant, density, className, ...props }: CardPartProps): import("react").JSX.Element;
+export {};