@blakesteve/roster 5.5.0 → 5.7.0

package/README.md

@@ -591,6 +591,14 @@ per glyph, and holding it to 3:1 would flatten the effect.
 `Spinner` holds still under reduced motion: the arc still reads as loading, and
 its `label` (default "loading") says so.
 
+The loading system has its own: `--roster-skeleton` and
+`--roster-skeleton-highlight` are the skeleton's fill and the light that
+crosses it, and the empty part of every progress bar (gray-200 and gray-100,
+gray-700 and gray-600 in dark). Three durations, unset by default, change the
+pace: `--roster-skeleton-duration` (1.8s), `--roster-progress-travel-duration`
+(1.4s, the indeterminate pill) and `--roster-dots-duration` (1.2s). Under
+reduced motion all three stop on a resting frame.
+
 ### Scrollbars
 
 `custom-scrollbar` gives any scrollable surface a slim themed scrollbar.
@@ -1381,6 +1389,172 @@ submit button from sending its form twice. It no longer dims, since
 the spinner says it's busy. `loadingLabel` names the spinner ("loading" by
 default). `disabled` is unchanged and wins over `isLoading`.
 
+### The loading system
+
+Five components for the time between asking and having, chosen by what the
+wait is:
+
+| The wait | Use |
+| --- | --- |
+| Content is coming, and you know its shape | `Skeleton`, or a preset, inside `SkeletonRegion` |
+| A task with a fraction (bytes, pages, items) | `ProgressField` (a `Progress` with its label and value) |
+| A count of discrete things | `ProgressField` or `Progress`, `variant="segmented"` |
+| Named stages of a flow | `StepProgress` |
+| A model generating, before its first token | `LoadingDots` |
+| A short wait with nothing to show | `Spinner` |
+
+`SegmentBar` isn't one of these: it shows how a whole divides into parts (a
+vote split, a budget), not how much of a task is done.
+
+**Skeleton.** A placeholder in the shape of what's loading, so a page keeps
+its layout and nothing moves when data lands.
+
+```tsx
+import { SkeletonRegion, SkeletonCard } from "@blakesteve/roster";
+
+<SkeletonRegion loading={!trails} label="Loading trails" skeleton={<SkeletonCard media={140} lines={2} />}>
+  {trails && <TrailCard trail={trails[0]} />}
+</SkeletonRegion>;
+```
+
+- A `line` is one line box of its text size: `sm` (12/16), `md` (14/20), `lg`
+  (16/24), or `inherit`. It's a no-break space set in that size with a bar
+  drawn over it, so `lines={3}` is exactly the height of three lines of that
+  text. A `block` takes a `height`; a `circle` takes Avatar's sizes.
+- Presets draw the real component's box: `SkeletonCard` (a Card with optional
+  media, a `text-base` title and `text-sm` body lines 8px under it),
+  `SkeletonTableRow` (Table's own cells), `SkeletonAvatar`, `SkeletonStat`.
+- `SkeletonRegion` sets `aria-busy` while loading, hides the skeleton from
+  screen readers and says `label` once (a polite status beside the region,
+  empty until a moment after loading starts). For a grid of cards, wrap the
+  grid in one region, or pass `announce={false}` to all but one. Skeletons are
+  always `aria-hidden`. `SkeletonTableRow` is a `tr`, so it can't sit in a
+  region: set `aria-busy` on the table yourself.
+- `SkeletonRegion` renders two siblings, the hidden status and then the
+  region, so the status counts in a parent's `first:` and `nth-child`
+  selectors. It takes no room.
+- The fill is `--roster-skeleton` (gray-200, gray-700 in dark), with
+  `--roster-skeleton-highlight` crossing it. Neutral rather than the brand
+  shimmer Countdown uses, and its own pair, so retinting one never recolors the
+  other. Under reduced motion it holds still.
+
+**Progress and ProgressField.** `ProgressField` is the form to reach for: the
+label and value on one baseline above the bar, an optional detail line below.
+
+```tsx
+<ProgressField label="Uploading photos" value={sent} max={total} detail={`${mb(sent)} of ${mb(total)}`} />
+<ProgressField label="Picks" variant="segmented" segments={["done", "done", "na", "current", "remaining"]} />
+```
+
+- Leave `value` out for indeterminate (a pill crossing the track). Set `busy`
+  when a value stands but work goes on: the bar breathes in place.
+- Four statuses (`default`, `success`, `warning`, `error`), solid fills only:
+  each clears 3:1 against the track and the page in both themes, where a
+  translucent fill would fade into whatever is behind it. Two sizes, 6px and
+  10px.
+- Segments take `done`, `current`, `remaining` and `na` (not part of this
+  one: dashed, and not counted). They're capsules unless `rounded={false}`.
+- The bar is `aria-hidden`. A status region beside it says the value as text,
+  at most every 1.5 seconds and the end at once, because a changed
+  `aria-label` isn't reliably announced and a `progressbar` may beep or speak
+  on every update. `announce={false}` when something else already says it.
+- On dark glass in the light theme, set `--roster-skeleton` on that surface to
+  `var(--roster-primary-200)`: the empty cells take it and the bar keeps its
+  extent (primary-600 against primary-200 is 6.4:1). Not in the dark theme,
+  where the fill is primary-400 and that pair is about 2:1; there the default
+  gray-700 track keeps done against remaining at 3.8:1, though its edge is
+  faint on the glass.
+- In forced colors the fill keeps the system highlight color, the track and
+  empty cells an outline, and the current cell its border.
+
+**StepProgress.** Named stages: `variant="stepper"` shows every step with a
+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.
+
+**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
+what reduced motion shows), and is replaced by the text once it starts: never
+shown beside it.
+
+Every string in all five is a prop with an English default.
+
+### Pagination
+
+Moves through pages of a list, built for a long list browsed on a phone.
+Controlled: you hold `page` and `pageCount`.
+
+```tsx
+import { Pagination } from "@blakesteve/roster";
+
+// Pages in your own state: every control is a button.
+<Pagination page={page} pageCount={79} onPageChange={setPage} />
+
+// Pages that are URLs: every control is a real link.
+<Pagination
+  page={page}
+  pageCount={79}
+  getPageHref={(p) => `/catalog?page=${p}`}
+  linkComponent={NextLink}   // from a "use client" wrapper
+  navigate={router.push}     // for the compact form's page picker
+/>
+```
+
+**Buttons or links.** Without `getPageHref`, controls are buttons and
+`onPageChange(page)` is the only thing that changes the page. With it, every
+control is an `<a href>` (crawlable, shareable, openable in a new tab) rendered
+through `linkComponent` (a plain `<a>` by default; it gets `href` and `to`, so
+`next/link` and React Router's `Link` both work). `onPageChange` is then called
+on a plain click before the link is followed. The compact form's page picker
+has no link to follow, so it calls `navigate(href)`, or loads the page.
+
+**Two forms, chosen by the pager's own width** (a container query, so it's
+right in a sidebar and needs no measuring):
+
+- **448px and up:** previous, the first page, the current page with a
+  neighbor each side, the last page, gaps between, and next. That's always
+  seven equal slots, so the buttons don't shift under the pointer as you page.
+  The words "Previous" and "Next" join the arrows from 576px.
+- **Under 448px:** previous, a page picker ("Page 40 of 79"), and next, with
+  the first and last pages joining from 384px. Any page is two taps away, and
+  on a phone the picker is the system's own list.
+
+`layout` picks one form (`"pages"`, `"compact"`), or `"arrows"` for first,
+previous, next and last beside a count the app shows itself, which is what
+DataTable uses.
+
+What it promises:
+
+- **Every control is a 44px target,** at every width.
+- **The current page is `aria-current="page"`,** the pager is a `nav` named by
+  `labels.nav`, and every control's name says the page it goes to ("Next page
+  (41)"). A new page is said in a polite live region ("Page 41 of 79").
+- **Focus stays on the control that was pressed.** A page number is the same
+  element afterwards, and an arrow that reaches the end stays focusable,
+  `aria-disabled` rather than `disabled`. To take a reader to the top of the
+  new page, focus your list's heading in `onPageChange`.
+- **Every word is a `labels` entry,** page numbers included (`labels.number`).
+- **No Font Awesome:** the chevrons are inline SVG.
+- **The picker waits for the keyboard.** A pick from its list goes at once.
+  Arrow keys on the closed picker (which step it on Windows and Linux) hold the
+  choice until Enter or leaving it; Escape puts it back.
+
+Things to know:
+
+- **Give the pager a width.** It sizes its form by the width it's given, so in
+  a slot that sizes to its content (an `ml-auto` box beside a heading, an `auto`
+  grid column) it falls back to 18rem, the compact form. For numbers there,
+  give the slot a width (`flex-1`, a `1fr` column) or pass `layout="pages"`.
+- **`siblings` above 1** needs more room than the 448px switch allows for;
+  force `layout` if you widen it.
+- **When you move focus yourself,** pass `announce={false}`: the heading you
+  focus says the new page, and the live region would say it again.
+- **In jsdom tests,** where no CSS applies, `layout="auto"` renders both forms;
+  pass a `layout`, or query inside `[data-pagination-layout="pages"]`.
+- **Wire it fully.** With neither `onPageChange` nor `getPageHref` nothing
+  pages, and in link mode without `navigate` the picker does a full page load.
+
 ### Carousel
 
 A sideways row: a row of cards, a selection strip, or a gallery of one per
@@ -1498,7 +1672,10 @@ function App() {
 | `AvatarStrip`        | Stacked avatar row with overflow chip, dismiss button, trailing slot, and label area                         |
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle      |
 | `Select`             | Dropdown selector, on the same size scale as `Button` and `Input`                                            |
-| `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend                               |
+| `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend (a split, not progress)       |
+| `Skeleton`           | Line, block or circle placeholder at the content's exact size; `SkeletonRegion` sets `aria-busy`              |
+| `Progress`           | Continuous or segmented progress bar: determinate, indeterminate or busy; per-segment state                   |
+| `LoadingDots`        | Three dots for a model generating before its first token; replaced by the text                                |
 | `Stat`               | A figure with its label and, optionally, its source; a valid `<dl>` group, or `semantics="standalone"`       |
 | `Spinner`            | Loading indicator                                                                                            |
 | `Switch`             | Toggle switch; its label toggles it, and every size is a 44px target                                         |
@@ -1524,6 +1701,10 @@ function App() {
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `MediaPreview`    | Thumbnail that falls back to "Preview unavailable, open original" when it can't render |
 | `FileUpload`      | Picks files and uploads each through the app's `upload`, with per-file progress, retry and rules |
+| `Pagination`      | Page numbers with gaps, or a compact page picker on narrow screens; buttons or real links, 44px targets |
+| `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" |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
@@ -1534,7 +1715,7 @@ function App() {
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `ActionBar` | Sticky bottom action strip                                                                                                                                         |
 | `Countdown` | Live countdown timer                                                                                                                                               |
-| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
+| `DataTable` | Full-featured table with sorting and pagination via TanStack Table v9; its pager is `Pagination`'s arrows, worded through `paginationLabels`. Imported from `@blakesteve/roster/data-table` (see [DataTable columns](#datatable-columns)) |
 | `Dialog`    | Modal dialog; `onAfterClose` runs once it has finished closing                                                                                                     |
 | `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)) |

package/dist/components/atoms/LoadingDots/LoadingDots.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),o=require("../../../lib/utils.cjs"),l=[{rest:"rst:opacity-100",delay:"0s"},{rest:"rst:opacity-60",delay:"0.2s"},{rest:"rst:opacity-30",delay:"0.4s"}];function u({label:s="Loading",announce:r=!0,className:i}){const[n,c]=a.useState("");return a.useEffect(()=>{const t=setTimeout(()=>c(s),50);return()=>clearTimeout(t)},[s]),e.jsxs("span",{role:r?"status":void 0,className:o.cn("rst:inline-flex rst:items-center rst:gap-[0.25em] rst:align-middle",i),"data-loading-dots":"",children:[l.map((t,d)=>e.jsx("span",{"aria-hidden":"true",className:o.cn("rst:block rst:h-[0.4em] rst:w-[0.4em] rst:rounded-full rst:bg-current rst:animate-dot","rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[CanvasText]",t.rest),style:{animationDelay:t.delay,animationFillMode:"backwards"}},d)),e.jsx("span",{className:"rst:sr-only",children:r?n:s})]})}exports.LoadingDots=u;

package/dist/components/atoms/LoadingDots/LoadingDots.d.ts

@@ -0,0 +1,20 @@
+export interface LoadingDotsProps {
+    /** What a screen reader hears: "Writing a reply". */
+    label?: string;
+    /**
+     * Say `label` in a polite status of its own (the default). Off inside a
+     * chat log or any live region that already announces what's added to it,
+     * where it would be said twice; the label is still there to be read.
+     */
+    announce?: boolean;
+    className?: string;
+}
+/**
+ * Three dots for a model that's generating and hasn't sent anything yet.
+ *
+ * It stands in for text, so it's sized and colored by the text around it (em
+ * and `currentColor`), and it goes the moment the first token arrives: render
+ * the text instead of it, never beside it.
+ */
+declare function LoadingDots({ label, announce, className }: LoadingDotsProps): import("react/jsx-runtime").JSX.Element;
+export { LoadingDots };

package/dist/components/atoms/LoadingDots/LoadingDots.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useState as l, useEffect as m } from "react";
+import { cn as a } from "../../../lib/utils.js";
+const u = [
+  { rest: "rst:opacity-100", delay: "0s" },
+  { rest: "rst:opacity-60", delay: "0.2s" },
+  { rest: "rst:opacity-30", delay: "0.4s" }
+];
+function g({ label: s = "Loading", announce: r = !0, className: o }) {
+  const [i, n] = l("");
+  return m(() => {
+    const t = setTimeout(() => n(s), 50);
+    return () => clearTimeout(t);
+  }, [s]), /* @__PURE__ */ c(
+    "span",
+    {
+      role: r ? "status" : void 0,
+      className: a("rst:inline-flex rst:items-center rst:gap-[0.25em] rst:align-middle", o),
+      "data-loading-dots": "",
+      children: [
+        u.map((t, d) => /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: a(
+              "rst:block rst:h-[0.4em] rst:w-[0.4em] rst:rounded-full rst:bg-current rst:animate-dot",
+              /* Forced colors drop backgrounds; these keep the text's color. */
+              "rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[CanvasText]",
+              t.rest
+            ),
+            style: { animationDelay: t.delay, animationFillMode: "backwards" }
+          },
+          d
+        )),
+        /* @__PURE__ */ e("span", { className: "rst:sr-only", children: r ? i : s })
+      ]
+    }
+  );
+}
+export {
+  g as LoadingDots
+};

package/dist/components/atoms/Progress/Progress.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),c=require("../../../lib/utils.cjs"),G=require("./progress-values.cjs"),H={percent:r=>`${r}%`,count:(r,s)=>`${r} of ${s}`,indeterminate:"Loading",status:(r,s)=>r?`${r}: ${s}`:s},b={default:"rst:bg-primary-600 rst:dark:bg-primary-400",success:"rst:bg-success-600 rst:dark:bg-success-400",warning:"rst:bg-amber-700 rst:dark:bg-amber-400",error:"rst:bg-error-600 rst:dark:bg-error-400"},O={default:"rst:border-primary-600 rst:dark:border-primary-400",success:"rst:border-success-600 rst:dark:border-success-400",warning:"rst:border-amber-700 rst:dark:border-amber-400",error:"rst:border-error-600 rst:dark:border-error-400"},p="rst:bg-[var(--roster-skeleton)]",R="rst:forced-colors:outline-solid rst:forced-colors:outline-1",h="rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]",T={sm:"rst:h-1.5",md:"rst:h-2.5"};function P(r,s,t){const[m,n]=u.useState(r),e=u.useRef(r),l=u.useRef(Number.NEGATIVE_INFINITY),a=u.useRef(r);return u.useEffect(()=>{if(a.current=r,r===e.current)return;const f=t?0:Math.max(0,l.current+s-Date.now()),g=setTimeout(()=>{a.current!==e.current&&(l.current=Date.now(),e.current=a.current,n(a.current))},f);return()=>clearTimeout(g)},[r,s,t]),m}function V({value:r,max:s=100,variant:t="continuous",segments:m,status:n="default",size:e="md",rounded:l=!0,busy:a=!1,label:f,valueText:g,announce:j=!0,announceEvery:y=1500,labels:v,className:x}){const i={...H,...v},{known:w,fraction:k,percent:I,states:E,done:L,applicable:S,complete:$}=G.progressValues({value:r,max:s,variant:t,segments:m}),F=g??(t==="segmented"?i.count(L,S):w?i.percent(I):i.indeterminate),q=$,A=P(i.status(f,F),y,q),N=a&&"rst:animate-pulse rst:motion-reduce:animate-none",C=t==="segmented"?o.jsx("div",{"aria-hidden":"true",className:c.cn("rst:flex rst:w-full",e==="sm"?"rst:gap-0.5":"rst:gap-1",T[e],N),"data-progress-track":"",children:E.map((d,D)=>o.jsx("span",{className:c.cn("rst:h-full rst:min-w-0 rst:flex-1",l?"rst:rounded-full":"rst:rounded-sm",d==="done"&&[b[n],h],d==="current"&&[p,"rst:border-2",O[n]],d==="remaining"&&[p,R],d==="na"&&"rst:border rst:border-dashed rst:border-gray-500 rst:dark:border-gray-400"),"data-segment":d},D))}):o.jsx("div",{"aria-hidden":"true",className:c.cn("rst:relative rst:w-full rst:overflow-hidden rst:rounded-full",T[e],p,R,N),"data-progress-track":"",children:w?o.jsx("div",{className:c.cn("rst:h-full rst:rounded-full rst:transition-[width] rst:motion-reduce:transition-none",b[n],h),style:{width:`${k*100}%`,minWidth:k>0?e==="sm"?"0.375rem":"0.625rem":void 0},"data-progress-fill":""}):o.jsx("div",{className:c.cn("rst:absolute rst:inset-y-0 rst:left-0 rst:w-[30%] rst:rounded-full rst:animate-progress-travel",b[n],h),"data-progress-fill":"indeterminate"})});return o.jsxs("div",{className:c.cn("rst:w-full",x),"data-progress":t,"data-status":n,children:[C,j&&o.jsx("span",{role:"status",className:"rst:sr-only","data-progress-status":"",children:A})]})}exports.Progress=V;

package/dist/components/atoms/Progress/Progress.d.ts

@@ -0,0 +1,61 @@
+import { SegmentState } from './progress-values';
+export type ProgressStatus = "default" | "success" | "warning" | "error";
+/** A segment's state: finished, under way, still to come, or not part of this one. */
+export type ProgressSegmentState = SegmentState;
+/** Every word Progress says. Pass any of them in `labels` to replace it. */
+export interface ProgressLabels {
+    /** A continuous value as said: "45%". */
+    percent: (percent: number) => string;
+    /** A segmented value as said: "3 of 8". Segments that don't apply aren't counted. */
+    count: (done: number, total: number) => string;
+    /** Said when there's no value to give. */
+    indeterminate: string;
+    /** The label and the value together: "Uploading photos: 45%". */
+    status: (label: string | undefined, value: string) => string;
+}
+export interface ProgressProps {
+    /**
+     * How far, from 0 to `max`. Leave it out for indeterminate: work under way
+     * with no figure, drawn as a pill crossing the track.
+     */
+    value?: number | null;
+    /** The whole: 100 by default; for segmented, the number of segments. */
+    max?: number;
+    /**
+     * - `"continuous"`: one filled track, for a fraction (bytes, percent).
+     * - `"segmented"`: one cell per unit, for a count of discrete things:
+     *   "twelve of sixteen" reads without a number beside it.
+     */
+    variant?: "continuous" | "segmented";
+    /** Segmented: each segment's state, when there's more to say than done and not done. */
+    segments?: ProgressSegmentState[];
+    status?: ProgressStatus;
+    size?: "sm" | "md";
+    /** Segmented: round each cell into a capsule (the default), or keep them square. */
+    rounded?: boolean;
+    /**
+     * The value stands but work goes on (a server finishing what it was sent):
+     * the bar breathes in place. Stops under reduced motion.
+     */
+    busy?: boolean;
+    /** What's progressing, for the status a screen reader hears: "Uploading photos". */
+    label?: string;
+    /** The value as said, in place of the percent or the count: "3 of 8 files". */
+    valueText?: string;
+    /** Give the value to screen readers in a polite status region. Off when something else already says it. */
+    announce?: boolean;
+    /** The least time between two announcements, in milliseconds. */
+    announceEvery?: number;
+    labels?: Partial<ProgressLabels>;
+    className?: string;
+}
+/**
+ * How far through something is: a continuous bar, or a segmented one.
+ *
+ * The bar is a picture and is hidden from screen readers; a status region
+ * beside it carries the value as text, because a changed `aria-label` isn't
+ * reliably announced and a `progressbar` may beep or speak on every update.
+ * Most screens want ProgressField, which adds a visible label and value.
+ */
+declare function Progress({ value, max, variant, segments, status, size, rounded, busy, label, valueText: valueOverride, announce, announceEvery, labels: overrides, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export { Progress };

package/dist/components/atoms/Progress/Progress.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as a, jsxs as H } from "react/jsx-runtime";
+import { useState as _, useRef as g, useEffect as K } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import { progressValues as O } from "./progress-values.js";
+const V = {
+  percent: (r) => `${r}%`,
+  count: (r, s) => `${r} of ${s}`,
+  indeterminate: "Loading",
+  status: (r, s) => r ? `${r}: ${s}` : s
+}, b = {
+  default: "rst:bg-primary-600 rst:dark:bg-primary-400",
+  success: "rst:bg-success-600 rst:dark:bg-success-400",
+  warning: "rst:bg-amber-700 rst:dark:bg-amber-400",
+  error: "rst:bg-error-600 rst:dark:bg-error-400"
+}, B = {
+  default: "rst:border-primary-600 rst:dark:border-primary-400",
+  success: "rst:border-success-600 rst:dark:border-success-400",
+  warning: "rst:border-amber-700 rst:dark:border-amber-400",
+  error: "rst:border-error-600 rst:dark:border-error-400"
+}, p = "rst:bg-[var(--roster-skeleton)]", T = "rst:forced-colors:outline-solid rst:forced-colors:outline-1", h = "rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]", y = { sm: "rst:h-1.5", md: "rst:h-2.5" };
+function M(r, s, t) {
+  const [u, o] = _(r), e = g(r), l = g(Number.NEGATIVE_INFINITY), n = g(r);
+  return K(() => {
+    if (n.current = r, r === e.current) return;
+    const m = t ? 0 : Math.max(0, l.current + s - Date.now()), f = setTimeout(() => {
+      n.current !== e.current && (l.current = Date.now(), e.current = n.current, o(n.current));
+    }, m);
+    return () => clearTimeout(f);
+  }, [r, s, t]), u;
+}
+function J({
+  value: r,
+  max: s = 100,
+  variant: t = "continuous",
+  segments: u,
+  status: o = "default",
+  size: e = "md",
+  rounded: l = !0,
+  busy: n = !1,
+  label: m,
+  valueText: f,
+  announce: I = !0,
+  announceEvery: v = 1500,
+  labels: E,
+  className: L
+}) {
+  const i = { ...V, ...E }, { known: w, fraction: k, percent: R, states: $, done: F, applicable: A, complete: C } = O({ value: r, max: s, variant: t, segments: u }), D = f ?? (t === "segmented" ? i.count(F, A) : w ? i.percent(R) : i.indeterminate), S = C, j = M(i.status(m, D), v, S), N = n && "rst:animate-pulse rst:motion-reduce:animate-none", x = t === "segmented" ? /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: d("rst:flex rst:w-full", e === "sm" ? "rst:gap-0.5" : "rst:gap-1", y[e], N),
+      "data-progress-track": "",
+      children: $.map((c, G) => /* @__PURE__ */ a(
+        "span",
+        {
+          className: d(
+            "rst:h-full rst:min-w-0 rst:flex-1",
+            l ? "rst:rounded-full" : "rst:rounded-sm",
+            c === "done" && [b[o], h],
+            /* Under way: the track inside a border of the fill's color. */
+            c === "current" && [p, "rst:border-2", B[o]],
+            c === "remaining" && [p, T],
+            /* Not part of this one: a dashed outline, neither filled nor to
+               fill. Gray-500 on light and gray-400 on dark clear 3:1. */
+            c === "na" && "rst:border rst:border-dashed rst:border-gray-500 rst:dark:border-gray-400"
+          ),
+          "data-segment": c
+        },
+        G
+      ))
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: d("rst:relative rst:w-full rst:overflow-hidden rst:rounded-full", y[e], p, T, N),
+      "data-progress-track": "",
+      children: w ? /* @__PURE__ */ a(
+        "div",
+        {
+          className: d(
+            "rst:h-full rst:rounded-full rst:transition-[width] rst:motion-reduce:transition-none",
+            b[o],
+            h
+          ),
+          style: { width: `${k * 100}%`, minWidth: k > 0 ? e === "sm" ? "0.375rem" : "0.625rem" : void 0 },
+          "data-progress-fill": ""
+        }
+      ) : /* @__PURE__ */ a(
+        "div",
+        {
+          className: d("rst:absolute rst:inset-y-0 rst:left-0 rst:w-[30%] rst:rounded-full rst:animate-progress-travel", b[o], h),
+          "data-progress-fill": "indeterminate"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ H("div", { className: d("rst:w-full", L), "data-progress": t, "data-status": o, children: [
+    x,
+    I && /* @__PURE__ */ a("span", { role: "status", className: "rst:sr-only", "data-progress-status": "", children: j })
+  ] });
+}
+export {
+  J as Progress
+};

package/dist/components/atoms/Progress/progress-values.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u({value:t,max:c=100,variant:a="continuous",segments:h}){const s=Number.isFinite(c)?Math.max(0,c):100,e=t!=null&&Number.isFinite(t),n=e&&s>0?Math.min(1,Math.max(0,t/s)):0,m=n>=1?100:n<=0?0:Math.min(99,Math.max(1,Math.round(n*100))),r=a==="segmented"?h??Array.from({length:Math.floor(s)},(o,d)=>e&&d<Math.floor(t)?"done":"remaining"):[],l=r.filter(o=>o==="done").length,i=r.filter(o=>o!=="na").length,g=a==="segmented"?i>0&&l===i:e&&n>=1;return{known:e,fraction:n,percent:m,states:r,done:l,applicable:i,complete:g}}exports.progressValues=u;

package/dist/components/atoms/Progress/progress-values.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The numbers a Progress shows and says, worked out once so the bar, the
+ * status and a ProgressField's visible value can't disagree.
+ */
+export type SegmentState = "done" | "current" | "remaining" | "na";
+export interface ProgressValues {
+    /** Whether there's a figure at all; without one, the bar is indeterminate. */
+    known: boolean;
+    /** 0 to 1. */
+    fraction: number;
+    /** The percent as said and shown: 1 to 99 while under way, never rounded to 0 or 100. */
+    percent: number;
+    /** Segmented: every segment's state. */
+    states: SegmentState[];
+    done: number;
+    /** Segments that count: all but `na`. */
+    applicable: number;
+    /** Nothing left: the value is at the whole, or every applicable segment is done. */
+    complete: boolean;
+}
+export declare function progressValues({ value, max, variant, segments, }: {
+    value?: number | null;
+    max?: number;
+    variant?: "continuous" | "segmented";
+    segments?: SegmentState[];
+}): ProgressValues;

package/dist/components/atoms/Progress/progress-values.js

@@ -0,0 +1,12 @@
+function f({
+  value: n,
+  max: c = 100,
+  variant: a = "continuous",
+  segments: m
+}) {
+  const s = Number.isFinite(c) ? Math.max(0, c) : 100, o = n != null && Number.isFinite(n), t = o && s > 0 ? Math.min(1, Math.max(0, n / s)) : 0, l = t >= 1 ? 100 : t <= 0 ? 0 : Math.min(99, Math.max(1, Math.round(t * 100))), r = a === "segmented" ? m ?? Array.from({ length: Math.floor(s) }, (e, d) => o && d < Math.floor(n) ? "done" : "remaining") : [], h = r.filter((e) => e === "done").length, i = r.filter((e) => e !== "na").length, M = a === "segmented" ? i > 0 && h === i : o && t >= 1;
+  return { known: o, fraction: t, percent: l, states: r, done: h, applicable: i, complete: M };
+}
+export {
+  f as progressValues
+};

package/dist/components/atoms/Skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),c=require("../../../lib/utils.cjs"),k={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},f={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},b={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},h="rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1";function S({shape:s="line",size:r,lines:a=1,width:e,height:u,radius:i,className:l}){if(s==="circle"){const o=r&&r in f?r:"md";return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",f[o],h,l),"data-skeleton":"circle"})}if(s==="block")return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:w-full",b[i??"lg"],h,l),style:{height:u??"8rem",width:e},"data-skeleton":"block"});const m=r&&r in k?r:"md",n=Math.max(1,Math.floor(a)),j=o=>{const d=o===n-1;return t.jsxs("span",{className:c.cn("rst:relative rst:block",n>1&&!d&&"rst:w-full"),style:{width:n>1?d?e??"60%":void 0:e},children:[" ",t.jsx("span",{className:c.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",b[i??"sm"],h)})]},o)};return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block",k[m],l),"data-skeleton":"line",children:Array.from({length:n},(o,d)=>j(d))})}function g({loading:s,skeleton:r,label:a="Loading",announce:e=!0,children:u,className:i}){const[l,m]=x.useState("");return x.useEffect(()=>{const n=setTimeout(()=>m(s&&e?a:""),s?50:0);return()=>clearTimeout(n)},[s,a,e]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:l}),t.jsx("div",{"aria-busy":s||void 0,className:i,"data-skeleton-region":s?"loading":"ready",children:s?t.jsx("div",{"aria-hidden":"true",children:r}):u})]})}exports.Skeleton=S;exports.SkeletonRegion=g;

package/dist/components/atoms/Skeleton/Skeleton.d.ts

@@ -0,0 +1,79 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * A text size a line stands in for: its font size and line height, so one
+ * line of skeleton is exactly one line of the text that replaces it.
+ * `inherit` takes whatever the surrounding text is.
+ */
+declare const LINE_SIZE: {
+    readonly sm: "rst:text-xs";
+    readonly md: "rst:text-sm";
+    readonly lg: "rst:text-base";
+    readonly inherit: "";
+};
+declare const CIRCLE_SIZE: {
+    readonly xs: "rst:h-6 rst:w-6";
+    readonly sm: "rst:h-8 rst:w-8";
+    readonly md: "rst:h-10 rst:w-10";
+    readonly lg: "rst:h-12 rst:w-12";
+    readonly xl: "rst:h-16 rst:w-16";
+};
+declare const RADIUS: {
+    readonly sm: "rst:rounded-sm";
+    readonly md: "rst:rounded-md";
+    readonly lg: "rst:rounded-lg";
+    readonly xl: "rst:rounded-xl";
+    readonly full: "rst:rounded-full";
+};
+export interface SkeletonProps {
+    /**
+     * - `"line"`: a line of text, one line box tall at its `size`.
+     * - `"block"`: an image, a chart, any box: `height` sets it.
+     * - `"circle"`: an avatar, at Avatar's sizes.
+     */
+    shape?: "line" | "block" | "circle";
+    /**
+     * For a line, the text it stands in for: `sm` (12px on 16), `md` (14px on
+     * 20), `lg` (16px on 24), or `inherit`. For a circle, Avatar's sizes.
+     */
+    size?: keyof typeof LINE_SIZE | keyof typeof CIRCLE_SIZE;
+    /** How many lines, for a paragraph. The last is shorter, as a last line is. */
+    lines?: number;
+    /** The width: a line's, or the last line's when there are several. */
+    width?: CSSProperties["width"];
+    /** A block's height. */
+    height?: CSSProperties["height"];
+    /** A block's corners, from the radius scale. */
+    radius?: keyof typeof RADIUS;
+    className?: string;
+}
+/**
+ * A placeholder in the shape of what's loading.
+ *
+ * Hidden from screen readers, always: a skeleton is a picture of content that
+ * isn't there yet. The region it stands in for says it's busy; use
+ * `SkeletonRegion`, which does that, or set `aria-busy` on it yourself.
+ */
+declare function Skeleton({ shape, size, lines, width, height, radius, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonRegionProps {
+    /** While true, the skeleton shows and the region says it's busy. */
+    loading: boolean;
+    /** What shows while loading. */
+    skeleton: ReactNode;
+    /** What a screen reader hears while loading: "Loading the schedule". */
+    label?: string;
+    /**
+     * Say `label` (the default). Off for all but one when several regions load
+     * together, a grid of cards say, or wrap them in one region instead.
+     */
+    announce?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The region a skeleton stands in for: `aria-busy` while loading, the
+ * skeleton hidden from screen readers, and `label` said once, politely.
+ * When `loading` turns false the content replaces the skeleton in the same
+ * box, so a skeleton drawn at the content's size means nothing moves.
+ */
+declare function SkeletonRegion({ loading, skeleton, label, announce, children, className }: SkeletonRegionProps): import("react/jsx-runtime").JSX.Element;
+export { Skeleton, SkeletonRegion };