@blakesteve/roster 5.16.0 → 5.18.0

package/README.md

@@ -896,6 +896,50 @@ bundled: its queue lives in module scope, so a bundled copy would give you two
 stores, and toasts fired from your own `import { toast } from "react-hot-toast"`
 would silently never appear.
 
+**What mounting it costs.** `Toaster` brings react-hot-toast's own
+`Toaster`, Roster's `Toast` with its icons, and Font Awesome's runtime;
+`toast` alone is about 3.7 KB. Measured against 5.17.0's build (esbuild,
+minified, gzipped), mounting it adds about 34 KB to a page that uses nothing
+else from Roster, 25 KB beside a `Button`, and under 4 KB beside a `Dialog`,
+which already carries Font Awesome. Mounted in a root layout, every page pays
+that for a message most visits never see.
+
+To pay only when there's something to say, mount it on the first toast. The
+queue is react-hot-toast's module-level store, so a toast raised while the
+host is still loading waits there and shows when it arrives:
+
+```tsx
+// toast-host.tsx: loaded on the first toast, never before.
+import { Toaster } from "@blakesteve/roster";
+export default function ToastHost() {
+  return <Toaster position="bottom-right" />;
+}
+```
+
+```ts
+// notify.ts: call these instead of `toast` directly.
+import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { toast } from "@blakesteve/roster";
+
+let host: Promise<void> | null = null;
+function mountHost() {
+  host ??= import("./toast-host").then(({ default: ToastHost }) => {
+    const el = document.createElement("div");
+    document.body.append(el);
+    createRoot(el).render(createElement(ToastHost));
+  });
+}
+
+export const notify = {
+  success: (message: string) => (mountHost(), toast.success(message)),
+  error: (message: string) => (mountHost(), toast.error(message)),
+};
+```
+
+Mounted in its own root like this, it follows a `.dark` on `<html>` but not
+one scoped to part of your app.
+
 An app already using it keeps its call sites and only changes the import. What changes is
 the styling: the toast body is a real `Toast` component reading `--roster-*`
 rather than the inline hex each app was pinning.
@@ -1284,6 +1328,12 @@ rather than a rewrite.
 short scannable set that would otherwise spend three rows of a wide form. It
 sets `aria-orientation` to match.
 
+`disabled` dims the whole group: its label, every option and the helper text.
+The dimmed text measures under 4.5:1, and a contrast checker such as axe will
+say so. That's on purpose: WCAG 1.4.3 exempts text that's part of an inactive
+control, and a disabled group is one. The same goes for `CheckboxGroup` and
+`RadioTileGroup`.
+
 Every radio is a 44x44 target, and the component is built so that it stays one:
 each option's box is sized to contain its own target, which is why the options
 can sit close together without a target ever reaching into its neighbor.
@@ -1296,6 +1346,128 @@ escape the box. Lay the options out across with `orientation` rather than
 through `optionsClassName`, for the same reason: the horizontal spacing that
 keeps two radios 44px apart rides on that prop.
 
+### One answer, chosen by its picture
+
+`RadioTileGroup` is `RadioGroup` with tiles for options: a picture, a name and
+an optional description each, and no radio dot. For choosing between photos,
+avatars, swatches or layouts, where people know the options by sight. It's
+the same radio group to a keyboard and a screen reader: one tab stop, the
+arrows move and choose (wrapping, and skipping a disabled tile), Space
+chooses, and Home and End go to the first and last tile. `value`, `onChange`,
+`label`, `helperText`, `errorMessage` and `disabled` work as in `RadioGroup`,
+and `required` sets `aria-required`.
+
+```tsx
+<RadioTileGroup
+  label="Cover photo"
+  value={cover}
+  onChange={setCover}
+  options={[
+    { value: "harbor", label: "Harbor at dawn", picture: <img src={harbor} alt="" /> },
+    { value: "ridge", label: "Pine ridge", description: "Fog in the valley", picture: <img src={ridge} alt="" /> },
+    { value: "flats", label: "Salt flats", picture: <img src={flats} alt="" /> },
+  ]}
+/>
+```
+
+A tile is named by its `label` alone. The picture is hidden from assistive
+technology so the name isn't read twice, which is why the images above have
+`alt=""`.
+
+The arrows follow the tiles' order, not the grid's rows: Down is the next
+tile, as Right is. A row is however many tiles fit the width, so moving by
+row would change with the window, and the radio pattern a screen reader
+announces says Down is next.
+
+**Laying it out.** Two tiles to a row, then three from the `sm` breakpoint.
+`columns` takes one count, or a count per breakpoint, where one left out takes
+the count below it: `columns={{ base: 2, md: 4 }}`. `minTileWidth="9rem"`
+instead fits as many tiles to a row as the group's own width holds, whatever
+the viewport. In the default `outlined` look an `<img>` placed directly in the
+picture is cropped square, so photos of any shape make even rows; anything
+else keeps its own shape, and `pictureClassName` changes either.
+
+**Drawing your own chosen look.** Each tile, the element with `role="radio"`,
+carries `data-checked`, `data-disabled`, `data-hover` and `data-focus-visible`,
+and takes `tileClassName`. `variant="plain"` drops Roster's edge, fill and
+padding, so there's nothing to undo before drawing a frame or a stamp of your
+own. Roster's styles sit in a cascade layer below yours, so plain CSS wins
+without `!important`:
+
+```css
+.cover [data-checked] .frame { box-shadow: inset 0 0 0 3px #1c1917; }
+.cover [data-checked] .stamp { opacity: 1; }
+```
+
+The focus ring stays Roster's in both looks, offset outside the tile, so
+it's outside anything drawn on the tile or inside it.
+
+**Tokens.** The `outlined` look reads `--roster-tile-border` and
+`--roster-tile-bg` at rest, and `--roster-tile-border-checked` and
+`--roster-tile-bg-checked` on the chosen tile, whose edge is drawn two pixels
+wide so it differs in weight as well as color. Light and dark values ship in
+`roster.css`.
+
+### Dialog
+
+A modal dialog. Focus moves in when it opens, Tab stays inside, Escape and its
+close button close it, focus goes back to what opened it, and the page behind
+is inert and hidden from assistive technology (a toast still gets through: see
+[Toasts](#toasts)). `onAfterClose` runs once it has finished closing.
+
+**A close always leaves.** A close that cuts into the entrance could, now and
+then, leave the dialog mounted and invisible over the page, taking every
+click: Headless UI's transition stopped waiting before the leave had ended.
+Roster now removes a dialog still there after its leave and a short margin,
+and `onAfterClose` still runs once. It also waits for the leave: under load,
+Headless UI could report a leave over before it had run, and `onAfterClose`
+came with the dialog still on screen. Nothing to change in your code; `Sheet`
+gets the same. Headless UI tracks the cause in
+[#3902](https://github.com/tailwindlabs/headlessui/issues/3902), and
+[#3895](https://github.com/tailwindlabs/headlessui/pull/3895) would fix the
+stuck dialog: Roster's removal comes out once a Headless UI release carries
+that fix.
+
+**The dialog has a box.** The element carrying `role="dialog"` is the
+viewport's box, in either layout, so a test that finds the dialog by its role
+and checks it's visible (Playwright's `toBeVisible`, say) finds it open. In
+5.16.0 and before, the default layout's was a wrapper with no height, which
+read as hidden; `Sheet`'s was too, and is fixed the same way. Nothing on
+screen moves, and a click outside the panel still closes it.
+
+**Full screen.** `layout="fullscreen"` makes a bare dialog over the whole
+viewport, for a photo viewer or a full-screen card: no box, no padding, and no
+header or close button of Roster's. Everything inside is yours, a close
+included; Roster keeps the focus, the keys and the page behind. `titleHidden`
+keeps the title as the dialog's accessible name, announced when it opens,
+without showing it.
+
+```tsx
+<Dialog isOpen={open} onClose={close} title="Photos" titleHidden layout="fullscreen">
+  <div style={{ height: "100%", display: "grid", placeItems: "center" }}>
+    <img src={photo.src} alt={photo.alt} />
+    <p>{index + 1} of {photos.length}: {photo.caption}</p>
+    <Button onClick={previous}>Previous</Button>
+    <Button onClick={next}>Next</Button>
+    <Button autoFocus onClick={close}>Close</Button>
+  </div>
+</Dialog>
+```
+
+- **The dialog is the viewport.** `className` lands on the full-viewport
+  panel. A click anywhere in it doesn't close it: give it your own close.
+- **The scrim stays,** retinted by `--roster-backdrop`, and it fades in and
+  out without scaling.
+- **`size` and `status` don't apply;** `variant` still picks the scrim.
+- **A title that isn't hidden** is Roster's `h2`, first in the panel. Most
+  full-screen dialogs name themselves on screen and hide it.
+- **`titleHidden` works with the default layout too:** the header keeps its
+  close button.
+
+**Where focus starts.** On the element marked `data-autofocus`, or a Roster
+`Button` given `autoFocus` (Headless UI reads both). With neither, on the
+dialog itself. In a photo viewer that's usually Close.
+
 ### ModerationQueue
 
 A queue of things waiting for a decision: submissions to approve, reports to
@@ -1628,7 +1800,8 @@ label and value on one baseline above the bar, an optional detail line below.
 numbered marker and connectors that fill behind the current one;
 `"segmented"` is the compact form, always with "Step 2 of 5". The current
 step is `aria-current="step"`, finished ones say "done", and the position is
-said when it changes.
+said when it changes. For steps down the page with content of their own, see
+[Timeline](#timeline).
 
 **LoadingDots.** Only for a model generating before its first token. It takes
 the surrounding text's size and color, rests at 1, 0.6 and 0.3 opacity (also
@@ -1637,6 +1810,56 @@ shown beside it.
 
 Every string in all five is a prop with an English default.
 
+### Timeline
+
+Steps down the page, each with content of its own: a schedule, a history, an
+onboarding list. Every step has a `title`, any `content` under it, a leading
+`when` column, a trailing `actions` column, and a marker on a line that runs
+through them all: its number, a check once done, `"hollow"` for an empty step,
+or a mark of your own.
+
+```tsx
+<Timeline
+  label="The course, week by week"
+  current={3}
+  nowBefore={4}
+  labels={{ now: "Today" }}
+  steps={[
+    { id: "w1", when: "Week 1 · Sep 2", title: "Soil and compost", actions: <Button size="sm">Edit</Button> },
+    { id: "w2", when: "Week 2 · Sep 9", title: "Sowing in rows", content: "Depth, spacing and labels." },
+    { id: "w3", when: "Week 3 · Sep 16", title: "Water and mulch" },
+    { id: "w4", when: "Week 4 · Sep 23", title: "No topic yet", marker: "hollow" },
+  ]}
+/>
+```
+
+`current` is the step you're on, from 1: the steps before it are done, and
+past the last means every step is. `nowBefore` draws a "now" divider just
+before a step, where today falls, which needn't be beside the current step.
+
+Every column comes from one grid, so the columns line up from step to step
+whatever each step holds, and a column no step uses takes no room. Below 40rem
+of its own width (not the window's), the `when` moves above the body and the
+actions under it.
+
+It's an ordered list with a name (`label`, or `aria-labelledby` for a heading
+on the page). The current step is `aria-current="step"`, and a finished one
+says "done" after its title. The markers, the line and the divider are
+decoration, hidden from assistive technology. It takes no keys: a step's
+buttons and links are reached in reading order, which is the order they show.
+
+Each `<li>` carries `data-step` (`done`, `current` or `upcoming`), and every
+part takes a class of its own. A mark of your own needs a background, or the
+line shows through it. The line reads `--roster-timeline-rail` ahead and
+`--roster-timeline-rail-done` behind the current step, and the divider
+`--roster-timeline-now`. In forced colors they become GrayText, Highlight and
+CanvasText.
+
+**Why not `StepProgress orientation="vertical"`.** A timeline isn't always
+progress: a schedule doesn't advance while you watch it, so there's no "Step 3
+of 5" status here, and each step carries content where `StepProgress` takes
+names. The two share their markers.
+
 ### Menu
 
 A button that opens a panel of actions: the menu button pattern. Compose it:
@@ -2327,8 +2550,10 @@ function App() {
 | `SkeletonCard`, `SkeletonTableRow`, `SkeletonAvatar`, `SkeletonStat` | Skeleton presets in the real component's box |
 | `ProgressField`   | Progress with a label and value on one baseline and a detail line: the form to reach for |
 | `StepProgress`    | Named steps: a stepper with markers and connectors, or a compact segmented "Step x of y" |
+| `Timeline`        | Steps down the page with content of their own: a when column, a marker on a line, the body and actions in one grid; a "now" divider (see [Timeline](#timeline)) |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
+| `RadioTileGroup`  | A radio group of picture tiles: one tab stop, the arrows, Home and End; `data-checked` for a chosen look of your own (see [One answer, chosen by its picture](#one-answer-chosen-by-its-picture)) |
 | `Slider`          | A value along a track, starting in the middle or not set on request; named snap-point chips, a visible number, the full keyboard, 44px targets (see [Slider](#slider)) |
 | `RangeSlider`     | A low and a high on one track: two thumbs that meet and never cross, each its own slider to the keyboard (see [RangeSlider](#rangeslider)) |
 | `Tabs`            | Tab strip, plain (an underline) or liquid (a sliding pill); arrow keys, one tab stop, counts, 44px `lg` size (see [Tabs](#tabs)) |
@@ -2342,7 +2567,7 @@ function App() {
 | `ActionBar` | Sticky bottom action strip                                                                                                                                         |
 | `Countdown` | Live countdown timer                                                                                                                                               |
 | `DataTable` | Table with sorting and paging via TanStack Table v9. Its pager is built on `Pagination` (since 5.6.0, the arrows layout), worded through `paginationLabels`; the page size is fixed at 10, with no prop to change it yet. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
-| `Dialog`    | Modal dialog; `onAfterClose` runs once it has finished closing                                                                                                     |
+| `Dialog`    | Modal dialog; `onAfterClose` runs once it has finished closing; a bare full-screen layout with a hidden title (see [Dialog](#dialog))                              |
 | `Footer`    | Site footer                                                                                                                                                        |
 | `ModerationQueue` | Items waiting for a decision: busy per action, confirm, reason and edit steps, focus after an item leaves, a live region. Never fetches (see [ModerationQueue](#moderationqueue)) |
 | `QueueEditDialog` | A ModerationQueue edit step in a Dialog: pass it as an edit's `surface`. A separate export, so a queue that never uses it doesn't ship it |

package/dist/components/molecules/RadioTileGroup/RadioTileGroup.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("react"),b=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),S=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.cjs"),s=require("../../../lib/utils.cjs"),k=require("../../../internal/field-invalid.cjs"),z=require("../../../internal/key-focus.cjs"),m=require("./radio-tile-group-variants.cjs"),A=j.forwardRef(function(r,i){return t.jsx("div",{ref:i,...r,"data-focus-visible":r["data-focus"]})});function B(a){const r=typeof a=="number"?{base:a}:a,i=r.base??1,l=r.sm??i,o=r.md??l,n=r.lg??o;return{"--rst-tiles-cols":i,"--rst-tiles-cols-sm":l,"--rst-tiles-cols-md":o,"--rst-tiles-cols-lg":n}}const C=({options:a,value:r,onChange:i,label:l,helperText:o,errorMessage:n,disabled:u=!1,required:q=!1,variant:w="outlined",columns:N={base:2,sm:3},minTileWidth:d,className:R,optionsClassName:G,tileClassName:T,pictureClassName:D,labelClassName:P,optionLabelClassName:V,descriptionClassName:F,messageClassName:I,onKeyDown:K,"aria-invalid":E,...v})=>{z.useKeyFocus();const p=!!n,H=k.isFieldInvalid(p,{...v,"aria-invalid":E}),L=k.withoutInvalidProps(v),y=w??"outlined",f=j.useRef(new Map),x=u?[]:a.filter(e=>!e.disabled),O=e=>{if(K?.(e),e.defaultPrevented||e.key!=="Home"&&e.key!=="End")return;const c=e.key==="Home"?x[0]:x[x.length-1];c&&(e.preventDefault(),f.current.get(c.value)?.focus(),c.value!==r&&i(c.value))};return t.jsxs(g.RadioGroup,{value:r,onChange:i,disabled:u,className:s.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",R),...L,onKeyDown:O,"aria-invalid":H||void 0,"aria-required":q||void 0,children:[l&&t.jsx(h.Label,{className:s.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",u&&"rst:opacity-50",P),children:l}),t.jsx("div",{className:s.cn(m.radioTileGroupOptionsVariants({fit:d?"width":"columns"}),G),style:d?{"--rst-tiles-min":d}:B(N),children:a.map(e=>t.jsx(S.Field,{disabled:u||e.disabled,className:"rst:flex rst:min-w-0",children:t.jsxs(g.Radio,{as:A,value:e.value,ref:c=>{c?f.current.set(e.value,c):f.current.delete(e.value)},className:s.cn(m.radioTileVariants({variant:y}),T),children:[e.picture!=null&&t.jsx("span",{"aria-hidden":"true",className:s.cn(m.radioTilePictureVariants({variant:y}),D),children:e.picture}),t.jsx(h.Label,{as:"span",passive:!0,className:s.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:[overflow-wrap:anywhere]","rst:forced-colors:group-data-checked:underline rst:forced-colors:group-data-checked:decoration-2 rst:forced-colors:group-data-checked:underline-offset-4",V),children:e.label}),e.description&&t.jsx(b.Description,{as:"span",className:s.cn("rst:block rst:text-xs rst:text-gray-500 rst:dark:text-gray-400",F),children:e.description})]})},e.value))}),(o||n)&&t.jsx(b.Description,{as:"p",className:s.cn("rst:text-xs rst:text-left",p?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",u&&"rst:opacity-50",I),children:n||o})]})};exports.RadioTileGroup=C;

package/dist/components/molecules/RadioTileGroup/RadioTileGroup.d.ts

@@ -0,0 +1,101 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { radioTileVariants } from './radio-tile-group-variants';
+export type RadioTileOption = {
+    value: string;
+    /** The option's name, under its picture. It's what the radio is called. */
+    label: string;
+    /** Supporting text under the name, read as the radio's description. */
+    description?: string;
+    /**
+     * What the tile shows above its name: a photo, a drawing, a swatch, any
+     * node. Hidden from assistive technology, since `label` already names the
+     * option, so the name isn't read twice. Give an image `alt=""`.
+     */
+    picture?: React.ReactNode;
+    disabled?: boolean;
+};
+/**
+ * How many tiles to a row: one count, or a count per breakpoint. A
+ * breakpoint left out takes the count of the one below it, and `base` is 1
+ * when it's left out.
+ */
+export type RadioTileColumns = number | {
+    base?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+};
+export interface RadioTileGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">, Pick<VariantProps<typeof radioTileVariants>, "variant"> {
+    options: RadioTileOption[];
+    /**
+     * The selected value. A value matching no option selects nothing, and
+     * leaves the first option as the group's tab stop: `""` is the way to say
+     * "not answered yet", as in `RadioGroup`.
+     */
+    value: string;
+    onChange: (value: string) => void;
+    /** The group's name. Becomes the group's accessible name. */
+    label?: string;
+    /** Supporting text under the tiles. */
+    helperText?: string;
+    /**
+     * The message for an invalid selection. Implies the error state, and is the
+     * group's description while it shows, as in `RadioGroup`, which says how
+     * `aria-invalid` and `aria-describedby` are handled.
+     */
+    errorMessage?: string;
+    /** Disables every tile, and dims the label and helper text with them. */
+    disabled?: boolean;
+    /** Says the group needs an answer, as `aria-required`. */
+    required?: boolean;
+    /**
+     * Tiles per row. Two, then three from the `sm` breakpoint, by default:
+     * two photos side by side is the useful size on a phone.
+     */
+    columns?: RadioTileColumns;
+    /**
+     * A tile's narrowest width, as a CSS length (`"9rem"`). Set, it replaces
+     * `columns`: each row holds as many tiles as fit the group's own width,
+     * whatever the viewport.
+     */
+    minTileWidth?: string;
+    /** Classes for the grid holding the tiles. `className` lands on the group. */
+    optionsClassName?: string;
+    /**
+     * Classes for every tile, the element carrying `role="radio"`. It carries
+     * `data-checked`, `data-disabled`, `data-hover` and `data-focus-visible` as
+     * well, so a chosen look can be drawn from them, with `variant="plain"` for
+     * none of Roster's own.
+     */
+    tileClassName?: string;
+    /** Classes for what holds each option's `picture`. */
+    pictureClassName?: string;
+    /** Classes for the group's own label. */
+    labelClassName?: string;
+    /** Classes for each option's name. */
+    optionLabelClassName?: string;
+    /** Classes for each option's `description`. */
+    descriptionClassName?: string;
+    /** Classes for the helper text or error message under the tiles. */
+    messageClassName?: string;
+}
+/**
+ * A radio group whose options are tiles: a picture, a name and an optional
+ * description each, with no radio dot. Choosing between photos, avatars,
+ * swatches or layouts.
+ *
+ * A sibling of `RadioGroup` rather than a variant of it. Built on the same
+ * Headless UI pieces, so it's the same radio group to a keyboard and a screen
+ * reader: one tab stop, the arrows moving and choosing (wrapping, skipping
+ * disabled tiles), Space choosing. It adds Home and End, to the first and
+ * last tile. `RadioGroup` keeps its own props, which are about dots and rows,
+ * and a form with only text radios doesn't carry the tiles' code.
+ *
+ * The arrows follow the tiles' order, not the grid's rows: Down moves to the
+ * next tile, as Right does, the order the tiles are read in. A row is however
+ * many tiles fit the width, so moving by row would change with the window,
+ * and the radio pattern a screen reader announces says Down is next.
+ */
+declare const RadioTileGroup: ({ options, value, onChange, label, helperText, errorMessage, disabled, required, variant, columns, minTileWidth, className, optionsClassName, tileClassName, pictureClassName, labelClassName, optionLabelClassName, descriptionClassName, messageClassName, onKeyDown, "aria-invalid": ariaInvalid, ...props }: RadioTileGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { RadioTileGroup };

package/dist/components/molecules/RadioTileGroup/RadioTileGroup.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import k from "react";
+import { Description as h } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as q } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as g } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { RadioGroup as L, Radio as O } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
+import { cn as s } from "../../../lib/utils.js";
+import { isFieldInvalid as Z, withoutInvalidProps as z } from "../../../internal/field-invalid.js";
+import { useKeyFocus as A } from "../../../internal/key-focus.js";
+import { radioTilePictureVariants as B, radioTileVariants as C, radioTileGroupOptionsVariants as J } from "./radio-tile-group-variants.js";
+const M = k.forwardRef(function(t, o) {
+  return /* @__PURE__ */ e("div", { ref: o, ...t, "data-focus-visible": t["data-focus"] });
+});
+function Q(a) {
+  const t = typeof a == "number" ? { base: a } : a, o = t.base ?? 1, l = t.sm ?? o, c = t.md ?? l, n = t.lg ?? c;
+  return {
+    "--rst-tiles-cols": o,
+    "--rst-tiles-cols-sm": l,
+    "--rst-tiles-cols-md": c,
+    "--rst-tiles-cols-lg": n
+  };
+}
+const ar = ({
+  options: a,
+  value: t,
+  onChange: o,
+  label: l,
+  helperText: c,
+  errorMessage: n,
+  disabled: d = !1,
+  required: w = !1,
+  variant: b = "outlined",
+  columns: N = { base: 2, sm: 3 },
+  minTileWidth: u,
+  className: R,
+  optionsClassName: D,
+  tileClassName: G,
+  pictureClassName: K,
+  labelClassName: P,
+  optionLabelClassName: V,
+  descriptionClassName: F,
+  messageClassName: T,
+  onKeyDown: j,
+  "aria-invalid": E,
+  ...p
+}) => {
+  A();
+  const x = !!n, H = Z(x, { ...p, "aria-invalid": E }), I = z(p), v = b ?? "outlined", m = k.useRef(/* @__PURE__ */ new Map()), f = d ? [] : a.filter((r) => !r.disabled), _ = (r) => {
+    if (j?.(r), r.defaultPrevented || r.key !== "Home" && r.key !== "End") return;
+    const i = r.key === "Home" ? f[0] : f[f.length - 1];
+    i && (r.preventDefault(), m.current.get(i.value)?.focus(), i.value !== t && o(i.value));
+  };
+  return /* @__PURE__ */ y(
+    L,
+    {
+      value: t,
+      onChange: o,
+      disabled: d,
+      className: s("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0", R),
+      ...I,
+      onKeyDown: _,
+      "aria-invalid": H || void 0,
+      "aria-required": w || void 0,
+      children: [
+        l && /* @__PURE__ */ e(
+          g,
+          {
+            className: s(
+              "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",
+              d && "rst:opacity-50",
+              P
+            ),
+            children: l
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: s(J({ fit: u ? "width" : "columns" }), D),
+            style: u ? { "--rst-tiles-min": u } : Q(N),
+            children: a.map((r) => (
+              /* `disabled || option.disabled`, as in `RadioGroup`: Headless UI
+                 takes the group's state only when the option's is `undefined`. */
+              /* @__PURE__ */ e(q, { disabled: d || r.disabled, className: "rst:flex rst:min-w-0", children: /* @__PURE__ */ y(
+                O,
+                {
+                  as: M,
+                  value: r.value,
+                  ref: (i) => {
+                    i ? m.current.set(r.value, i) : m.current.delete(r.value);
+                  },
+                  className: s(C({ variant: v }), G),
+                  children: [
+                    r.picture != null && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: s(B({ variant: v }), K), children: r.picture }),
+                    /* @__PURE__ */ e(
+                      g,
+                      {
+                        as: "span",
+                        passive: !0,
+                        className: s(
+                          "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:[overflow-wrap:anywhere]",
+                          "rst:forced-colors:group-data-checked:underline rst:forced-colors:group-data-checked:decoration-2 rst:forced-colors:group-data-checked:underline-offset-4",
+                          V
+                        ),
+                        children: r.label
+                      }
+                    ),
+                    r.description && /* @__PURE__ */ e(
+                      h,
+                      {
+                        as: "span",
+                        className: s("rst:block rst:text-xs rst:text-gray-500 rst:dark:text-gray-400", F),
+                        children: r.description
+                      }
+                    )
+                  ]
+                }
+              ) }, r.value)
+            ))
+          }
+        ),
+        (c || n) && /* @__PURE__ */ e(
+          h,
+          {
+            as: "p",
+            className: s(
+              "rst:text-xs rst:text-left",
+              x ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
+              d && "rst:opacity-50",
+              T
+            ),
+            children: n || c
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ar as RadioTileGroup
+};

package/dist/components/molecules/RadioTileGroup/radio-tile-group-variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:group rst:font-ui rst:relative rst:flex rst:h-full rst:w-full rst:min-w-0 rst:flex-col rst:gap-2 rst:rounded-lg rst:text-left rst:cursor-pointer rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",{variants:{variant:{outlined:"rst:border rst:border-(--roster-tile-border) rst:bg-(--roster-tile-bg) rst:p-2 rst:data-checked:border-(--roster-tile-border-checked) rst:data-checked:inset-ring rst:data-checked:inset-ring-(--roster-tile-border-checked) rst:data-checked:bg-(--roster-tile-bg-checked) rst:forced-colors:data-checked:border-2",plain:""}},defaultVariants:{variant:"outlined"}}),s=r.cva("rst:block rst:w-full rst:min-w-0",{variants:{variant:{outlined:"rst:overflow-hidden rst:rounded-md rst:[&>img]:block rst:[&>img]:aspect-square rst:[&>img]:w-full rst:[&>img]:object-cover",plain:""}},defaultVariants:{variant:"outlined"}}),e=r.cva("rst:grid rst:gap-3",{variants:{fit:{columns:"rst:grid-cols-[repeat(var(--rst-tiles-cols),minmax(0,1fr))] rst:sm:grid-cols-[repeat(var(--rst-tiles-cols-sm),minmax(0,1fr))] rst:md:grid-cols-[repeat(var(--rst-tiles-cols-md),minmax(0,1fr))] rst:lg:grid-cols-[repeat(var(--rst-tiles-cols-lg),minmax(0,1fr))]",width:"rst:grid-cols-[repeat(auto-fill,minmax(min(var(--rst-tiles-min),100%),1fr))]"}},defaultVariants:{fit:"columns"}});exports.radioTileGroupOptionsVariants=e;exports.radioTilePictureVariants=s;exports.radioTileVariants=t;

package/dist/components/molecules/RadioTileGroup/radio-tile-group-variants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * One tile: the whole tile is the radio, with no dot.
+ *
+ * `outlined` is Roster's own look, and a quiet one: a hairline in
+ * `--roster-tile-border` at rest, and the chosen tile's edge in
+ * `--roster-tile-border-checked`, drawn two pixels wide (the border and an
+ * inset ring) over the faintest tint, `--roster-tile-bg-checked`. The edge
+ * changes weight as well as hue, so the choice doesn't rest on color alone.
+ *
+ * `plain` draws nothing: no edge, no fill, no padding, in any state. It's for
+ * a consumer drawing its own chosen look from the tile's `data-checked`, a
+ * printed border or a stamp, without first undoing Roster's.
+ *
+ * Both keep the focus ring, Roster's, on `focus-visible`. A box-shadow ring
+ * offset from the tile's border box, so it sits outside anything a consumer
+ * draws on the tile or inside it. And both dim a disabled tile.
+ *
+ * Forced colors drops box-shadows and repaints every edge and fill alike, so
+ * there the chosen tile's name is underlined (in both looks, set where the
+ * name is drawn), and the `outlined` edge goes to two pixels: the same cues
+ * `Pagination` gives its current page.
+ */
+export declare const radioTileVariants: (props?: ({
+    variant?: "plain" | "outlined" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * What holds an option's `picture`.
+ *
+ * `outlined` rounds and clips it, and gives an `<img>` placed directly inside
+ * a square, cover-fitted box the tile's width, so photos of any shape make
+ * even rows. Anything else, a drawing or a swatch, keeps its own shape. `plain`
+ * neither clips nor shapes: a consumer's frame, and a stamp hung over its
+ * corner, show whole.
+ */
+export declare const radioTilePictureVariants: (props?: ({
+    variant?: "plain" | "outlined" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The tiles' grid.
+ *
+ * `columns` reads a count per breakpoint from custom properties the component
+ * sets, so any count works without a class per number. `width` fills each row
+ * with as many tiles as fit at a minimum width, which follows the space the
+ * group is given rather than the viewport, and never lets a tile overflow a
+ * container narrower than that minimum.
+ */
+export declare const radioTileGroupOptionsVariants: (props?: ({
+    fit?: "columns" | "width" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/molecules/RadioTileGroup/radio-tile-group-variants.js

@@ -0,0 +1,34 @@
+import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
+const s = /* @__PURE__ */ r(
+  "rst:group rst:font-ui rst:relative rst:flex rst:h-full rst:w-full rst:min-w-0 rst:flex-col rst:gap-2 rst:rounded-lg rst:text-left rst:cursor-pointer rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        outlined: "rst:border rst:border-(--roster-tile-border) rst:bg-(--roster-tile-bg) rst:p-2 rst:data-checked:border-(--roster-tile-border-checked) rst:data-checked:inset-ring rst:data-checked:inset-ring-(--roster-tile-border-checked) rst:data-checked:bg-(--roster-tile-bg-checked) rst:forced-colors:data-checked:border-2",
+        plain: ""
+      }
+    },
+    defaultVariants: { variant: "outlined" }
+  }
+), e = /* @__PURE__ */ r("rst:block rst:w-full rst:min-w-0", {
+  variants: {
+    variant: {
+      outlined: "rst:overflow-hidden rst:rounded-md rst:[&>img]:block rst:[&>img]:aspect-square rst:[&>img]:w-full rst:[&>img]:object-cover",
+      plain: ""
+    }
+  },
+  defaultVariants: { variant: "outlined" }
+}), i = /* @__PURE__ */ r("rst:grid rst:gap-3", {
+  variants: {
+    fit: {
+      columns: "rst:grid-cols-[repeat(var(--rst-tiles-cols),minmax(0,1fr))] rst:sm:grid-cols-[repeat(var(--rst-tiles-cols-sm),minmax(0,1fr))] rst:md:grid-cols-[repeat(var(--rst-tiles-cols-md),minmax(0,1fr))] rst:lg:grid-cols-[repeat(var(--rst-tiles-cols-lg),minmax(0,1fr))]",
+      width: "rst:grid-cols-[repeat(auto-fill,minmax(min(var(--rst-tiles-min),100%),1fr))]"
+    }
+  },
+  defaultVariants: { fit: "columns" }
+});
+export {
+  i as radioTileGroupOptionsVariants,
+  e as radioTilePictureVariants,
+  s as radioTileVariants
+};

package/dist/components/molecules/StepProgress/StepProgress.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),h=require("../../../lib/labels.cjs"),b=require("../../atoms/Progress/Progress.cjs"),y={nav:"Progress",position:(s,c)=>`Step ${s} of ${c}`,done:"done",number:s=>String(s)},j=()=>r.jsx("svg",{viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:r.jsx("path",{d:"M20 6 9 17l-5-5"})});function k({steps:s,current:c,variant:g="stepper",labels:f,className:p}){const o=h.withLabels(y,f),n=s.length;if(n===0)return null;const t=Math.min(Math.max(1,Math.floor(Number.isFinite(c)?c:1)),n+1),d=t>n,u=d?o.position(n,n):o.position(t,n),x=d?u:`${u}: ${s[t-1]}`;return g==="segmented"?r.jsxs("div",{className:l.cn("rst:font-ui rst:w-full rst:min-w-0",p),"data-step-progress":"segmented",children:[r.jsxs("div",{className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm","aria-hidden":"true",children:[r.jsx("span",{className:"rst:font-medium rst:text-[var(--roster-control-text)]","data-step-position":"",children:u}),!d&&r.jsx("span",{className:"rst:min-w-0 rst:truncate rst:text-gray-600 rst:dark:text-gray-400","data-step-name":"",children:s[t-1]})]}),r.jsx(b.Progress,{variant:"segmented",segments:s.map((m,i)=>i+1<t?"done":i+1===t?"current":"remaining"),announce:!1}),r.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]}):r.jsxs("div",{className:l.cn("rst:font-ui rst:w-full",p),"data-step-progress":"stepper",children:[r.jsx("ol",{"aria-label":o.nav,className:"rst:m-0 rst:flex rst:w-full rst:list-none rst:p-0",children:s.map((m,i)=>{const a=i+1,e=a<t?"done":a===t?"current":"upcoming";return r.jsxs("li",{"aria-current":e==="current"?"step":void 0,className:"rst:relative rst:flex rst:min-w-0 rst:flex-1 rst:flex-col rst:items-center rst:gap-1.5 rst:text-center","data-step":e,children:[i>0&&r.jsx("span",{"aria-hidden":"true",className:l.cn("rst:absolute rst:right-1/2 rst:top-4 rst:h-0.5 rst:w-full rst:-translate-y-1/2",a<=t?"rst:bg-primary-600 rst:dark:bg-primary-400 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]":"rst:bg-[var(--roster-skeleton)] rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]"),"data-step-connector":a<=t?"filled":"empty"}),r.jsx("span",{"aria-hidden":"true",className:l.cn("rst:relative rst:z-10 rst:flex rst:h-8 rst:w-8 rst:items-center rst:justify-center rst:rounded-full rst:text-sm rst:font-semibold rst:tabular-nums",e==="done"&&"rst:bg-primary-600 rst:text-primary-600-ink rst:dark:bg-primary-400 rst:dark:text-gray-950 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight] rst:forced-colors:text-[HighlightText]",e==="current"&&"rst:border-2 rst:border-primary-600 rst:bg-[var(--roster-card-bg)] rst:text-primary-600 rst:dark:border-primary-400 rst:dark:text-primary-400",e==="upcoming"&&"rst:bg-[var(--roster-skeleton)] rst:text-gray-600 rst:dark:text-gray-300 rst:forced-colors:border"),"data-step-marker":"",children:e==="done"?r.jsx(j,{}):o.number(a)}),r.jsxs("span",{className:l.cn("rst:w-full rst:px-1 rst:text-xs rst:leading-4 rst:break-words",e==="current"?"rst:font-semibold rst:text-[var(--roster-control-text)]":"rst:text-gray-600 rst:dark:text-gray-400"),children:[m,e==="done"&&r.jsx("span",{className:"rst:sr-only",children:`, ${o.done}`})]})]},`${a}-${m}`)})}),r.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]})}exports.StepProgress=k;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),h=require("../../../lib/labels.cjs"),b=require("../../atoms/Progress/Progress.cjs"),j=require("../../../internal/step-marker.cjs"),y=require("../../../internal/step-check.cjs"),N={nav:"Progress",position:(r,i)=>`Step ${r} of ${i}`,done:"done",number:r=>String(r)};function v({steps:r,current:i,variant:g="stepper",labels:f,className:m}){const o=h.withLabels(N,f),e=r.length;if(e===0)return null;const t=Math.min(Math.max(1,Math.floor(Number.isFinite(i)?i:1)),e+1),d=t>e,u=d?o.position(e,e):o.position(t,e),x=d?u:`${u}: ${r[t-1]}`;return g==="segmented"?s.jsxs("div",{className:c.cn("rst:font-ui rst:w-full rst:min-w-0",m),"data-step-progress":"segmented",children:[s.jsxs("div",{className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm","aria-hidden":"true",children:[s.jsx("span",{className:"rst:font-medium rst:text-[var(--roster-control-text)]","data-step-position":"",children:u}),!d&&s.jsx("span",{className:"rst:min-w-0 rst:truncate rst:text-gray-600 rst:dark:text-gray-400","data-step-name":"",children:r[t-1]})]}),s.jsx(b.Progress,{variant:"segmented",segments:r.map((p,l)=>l+1<t?"done":l+1===t?"current":"remaining"),announce:!1}),s.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]}):s.jsxs("div",{className:c.cn("rst:font-ui rst:w-full",m),"data-step-progress":"stepper",children:[s.jsx("ol",{"aria-label":o.nav,className:"rst:m-0 rst:flex rst:w-full rst:list-none rst:p-0",children:r.map((p,l)=>{const n=l+1,a=n<t?"done":n===t?"current":"upcoming";return s.jsxs("li",{"aria-current":a==="current"?"step":void 0,className:"rst:relative rst:flex rst:min-w-0 rst:flex-1 rst:flex-col rst:items-center rst:gap-1.5 rst:text-center","data-step":a,children:[l>0&&s.jsx("span",{"aria-hidden":"true",className:c.cn("rst:absolute rst:right-1/2 rst:top-4 rst:h-0.5 rst:w-full rst:-translate-y-1/2",n<=t?"rst:bg-primary-600 rst:dark:bg-primary-400 rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]":"rst:bg-[var(--roster-skeleton)] rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]"),"data-step-connector":n<=t?"filled":"empty"}),s.jsx("span",{"aria-hidden":"true",className:j.stepMarkerClass(a),"data-step-marker":"",children:a==="done"?s.jsx(y.StepCheck,{}):o.number(n)}),s.jsxs("span",{className:c.cn("rst:w-full rst:px-1 rst:text-xs rst:leading-4 rst:break-words",a==="current"?"rst:font-semibold rst:text-[var(--roster-control-text)]":"rst:text-gray-600 rst:dark:text-gray-400"),children:[p,a==="done"&&s.jsx("span",{className:"rst:sr-only",children:`, ${o.done}`})]})]},`${n}-${p}`)})}),s.jsx("span",{role:"status",className:"rst:sr-only","data-step-status":"",children:x})]})}exports.StepProgress=v;