@blakesteve/roster 5.6.0 → 5.8.0

package/README.md

@@ -113,6 +113,12 @@ import "@blakesteve/roster/style.css";
 Skip it and components render against browser defaults: serif type, bulleted
 lists, and `content-box` sizing.
 
+One default Roster does undo itself: a `<button>`'s own border. A `link` or
+`soft` Button sets its border to zero (`soft` since 5.8.0). In an app without a
+reset, `link` drew the browser's 2px border, and `soft` kept it, transparent,
+which took 4px of extra room and showed in forced colors. Zero is what an app
+with Tailwind's reset already had, so no layout moves.
+
 ### Dark mode
 
 Every component reads a `.dark` class on an ancestor, so dark mode is whatever
@@ -452,8 +458,15 @@ the supported way now.
 rule stops matching.** Solid Button, Badge, Pill and Checkbox no longer carry
 `rst:text-white` or `rst:text-gray-950`, so a selector naming either matches
 nothing. It fails silently, and it fails *partially*: those classes are still on
-`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar` and `Breadcrumbs`, so a
-themed foreground keeps working there while reverting on every solid control.
+`ActionBar`, `Avatar` and `Breadcrumbs`, so a themed foreground keeps working
+there while reverting on every solid control. The `primary` fills of `Card`,
+`Dialog` and, since 5.8.0, `Navbar` read their ink token too: Navbar's bar,
+brand and active link take `--roster-primary-700-ink`, and its other links and
+menu button the same ink at 80%. Each keeps white in dark mode, where its fill
+is a dark step the ink doesn't describe. A primary Navbar looks different even
+with no ink set: its links were `gray-300` and its active link `primary-400`,
+which was 4.04:1 on Roster's own primary, under the 4.5 text needs. Now they
+are white at 80% and white, the active one still semibold.
 Replace the rule with the token:
 
 ```css
@@ -591,6 +604,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.
@@ -1250,6 +1271,12 @@ app supplies, inline by default or in a Dialog or Sheet (`QueueEditDialog`,
 `QueueEditSheet`, separate exports so a queue that doesn't use them doesn't
 ship them).
 
+**A reason outranks a confirm.** An action with both asks the reason's
+question, and its submit button is the confirmation. A `required` reason asks
+for one of its `options`, so the types refuse `required` without them: a
+reason that is only a note is `note: "required"`. That makes `QueueReasonStep`
+a type rather than an interface (5.8.0), so extend it with `&`, not `extends`.
+
 **Drafts are typed.** An edit's draft is whatever its `initial` returns, and
 `validate`, the form and `run` all get that type. Inside JSX, pass `actions` as
 a function and write edits with the `edit` it's handed, as above; outside it,
@@ -1381,6 +1408,97 @@ 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.
@@ -1524,6 +1642,65 @@ well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
 
+### Every built-in word is replaceable
+
+Where a component writes words of its own (a close button's name, a menu
+button's, "Log In", a sentence a screen reader hears), each can be replaced
+and defaults to English. Most components take a `labels` prop; pass any entry
+and the rest stay:
+
+```tsx
+<Navbar labels={{ openMainMenu: t("nav.open"), closeMainMenu: t("nav.close") }} … />
+<Sheet labels={{ close: t("common.close") }} … />
+<Countdown labels={{ days: (n) => t("units.days", { count: n }) }} … />
+```
+
+Since 5.8.0 that covers `Navbar`, `Sheet`, `Dialog`, `Breadcrumbs`, `Footer`,
+`CallToAction`, `AvatarStrip`, `ErrorState`, `Countdown`, `Carousel` and
+`ModerationQueue` (whose `labels.close` names the close button of its edit
+Dialog or Sheet), alongside `Pagination`, the loading system and DataTable's
+`paginationLabels`. A few components name their words with single props
+instead, and 5.8.0 adds the ones that were missing: MultiSelect's
+`countLabel`, DataTable's `emptyMessage` and MediaPreview's `newTabLabel`, next
+to the existing `dismissLabel`, `placeholder`, `removeLabel`, `prevLabel` and
+the like. Words that take a number or a name are functions, so a language
+whose word changes with the count can say so. An entry passed as `undefined`
+(a catalog missing a key) keeps its English rather than leaving a control
+unnamed.
+
+`src/labels.test.tsx` renders each of these, in the states where its words
+appear, with every word pseudo-localized, and fails on any English left. A
+default it can't reach: `Avatar`'s alt is "Avatar" unless you pass one (`""`
+marks it decorative, since 5.8.0), and a team without a name in
+`MatchupCard` is "Team" and its id.
+
+**From a server component, pass only strings.** Every component is a client
+component, and functions can't cross the React Server Component boundary, so a
+function label (Footer's `copyright`, Countdown's units) has to be passed from
+a `"use client"` wrapper, as `linkComponent` does above.
+
+### Eyebrow and Stat line height
+
+An `Eyebrow`'s line is as tall as its letters, and so is a `Stat`'s figure and
+its label. Through 5.7.0 neither was: `leading-none` sat before the font size
+in their variant tables, and `cn()`'s tailwind-merge drops a line height that
+comes before a size. An Eyebrow drew a line 1.5 times its size (15px for the
+default `xs`, not 10), and a Stat's figure and label drew lines taller than
+their type.
+
+**Upgrading to 5.8.0 moves layouts.** An Eyebrow that makes its own line, as
+a flex or grid item or rendered as a block (`as="p"`, `as="h2"`), is a third
+shorter: 10px for `xs`, not 15. One inline in running text sits on its
+parent's line and doesn't change. A Stat in its default markup loses more:
+its figure's line was the size's own (28px for `sm`'s 20px figure) or the
+page's 1.5 (`md`, `lg`), and its label sat on the page's line (24px on a 16px,
+1.5 body). So a `sm` Stat goes from 55px tall to 33, and an `lg` one at 48px
+from 99 to 61. In the `standalone` markup only the label moves, 15px to 10.
+`LabeledDivider` sets its label in an Eyebrow of its own, so every rule is 5px
+shorter whatever label it's given. An Eyebrow that wraps now sets solid, its
+lines as close as its size. Spacing an app tuned against the old lines (a
+margin that cleared them) may want retuning.
+
 ## Quick start
 
 ```tsx
@@ -1573,7 +1750,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                                         |
@@ -1600,6 +1780,9 @@ function App() {
 | `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        |
@@ -1610,11 +1793,13 @@ function App() {
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `ActionBar` | Sticky bottom action strip                                                                                                                                         |
 | `Countdown` | Live countdown timer                                                                                                                                               |
-| `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)) |
+| `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                                                                                                     |
 | `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)) |
-| `Navbar`    | Responsive navigation bar with mobile slide-out                                                                                                                    |
+| `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 |
+| `QueueEditSheet` | A ModerationQueue edit step in a Sheet, for a long form: pass it as an edit's `surface`. A separate export, like `QueueEditDialog` |
+| `Navbar`    | Responsive navigation bar with mobile slide-out. A wide logo keeps its own proportions through `logoHeight` and `logoWidth`; its built-in words are in `labels` |
 | `Sheet`     | Bottom sheet: drag, Escape or backdrop to dismiss; only its content scrolls; returns focus, even from a deep link; the title may be a node |
 | `Table`     | Static data table                                                                                                                                                  |
 

package/dist/components/atoms/Avatar/Avatar.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),o=require("../../../lib/utils.cjs"),h=require("./avatar-variants.cjs"),t=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),i=n.forwardRef(({className:c,size:l,colorScheme:u,shape:d,initials:g,src:s,alt:v,title:e,...m},f)=>{const[p,b]=n.useState(!1),x=s&&!p,a=r.jsx("div",{ref:f,className:o.cn(h.avatarVariants({size:l,colorScheme:u,shape:d}),c),...m,children:x?r.jsx("img",{src:s,alt:v||"Avatar",className:"rst:h-full rst:w-full rst:object-cover",onError:()=>b(!0)}):r.jsx("span",{className:"rst:leading-none rst:uppercase",children:g?.slice(0,2)})});return e?r.jsxs(t.Popover,{className:"rst:relative rst:inline-flex",children:[r.jsx(t.PopoverButton,{as:"div",className:"rst:cursor-pointer rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:rounded-full",children:a}),r.jsx(t.PopoverPanel,{anchor:"bottom",className:o.cn("rst:z-50 rst:mt-2 rst:rounded-md rst:px-3 rst:py-1.5 rst:text-xs rst:font-medium rst:elevation-anchored rst:backdrop-blur-md rst:ring","rst:bg-gray-900/95 rst:text-white rst:ring-black/5 rst:dark:bg-gray-100/95 rst:dark:text-gray-900 rst:dark:ring-white/20","rst:transition rst:duration-200 rst:ease-in-out rst:data-closed:opacity-0 rst:data-closed:translate-y-1"),children:e})]}):a});i.displayName="Avatar";exports.Avatar=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),o=require("../../../lib/utils.cjs"),h=require("./avatar-variants.cjs"),t=require("../../../node_modules/@headlessui/react/dist/components/popover/popover.cjs"),i=n.forwardRef(({className:c,size:l,colorScheme:u,shape:d,initials:g,src:s,alt:v,title:e,...m},f)=>{const[p,b]=n.useState(!1),x=s&&!p,a=r.jsx("div",{ref:f,className:o.cn(h.avatarVariants({size:l,colorScheme:u,shape:d}),c),...m,children:x?r.jsx("img",{src:s,alt:v??"Avatar",className:"rst:h-full rst:w-full rst:object-cover",onError:()=>b(!0)}):r.jsx("span",{className:"rst:leading-none rst:uppercase",children:g?.slice(0,2)})});return e?r.jsxs(t.Popover,{className:"rst:relative rst:inline-flex",children:[r.jsx(t.PopoverButton,{as:"div",className:"rst:cursor-pointer rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:rounded-full",children:a}),r.jsx(t.PopoverPanel,{anchor:"bottom",className:o.cn("rst:z-50 rst:mt-2 rst:rounded-md rst:px-3 rst:py-1.5 rst:text-xs rst:font-medium rst:elevation-anchored rst:backdrop-blur-md rst:ring","rst:bg-gray-900/95 rst:text-white rst:ring-black/5 rst:dark:bg-gray-100/95 rst:dark:text-gray-900 rst:dark:ring-white/20","rst:transition rst:duration-200 rst:ease-in-out rst:data-closed:opacity-0 rst:data-closed:translate-y-1"),children:e})]}):a});i.displayName="Avatar";exports.Avatar=i;

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

@@ -4,6 +4,10 @@ import { avatarVariants } from './avatar-variants';
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
     initials?: string;
     src?: string;
+    /**
+     * The photo's text alternative. Defaults to "Avatar"; pass the person's
+     * name, or `""` where the avatar sits beside a name that already says who.
+     */
     alt?: string;
     title?: string;
 }

package/dist/components/atoms/Avatar/Avatar.js

@@ -26,7 +26,7 @@ const w = b.forwardRef(
           "img",
           {
             src: t,
-            alt: d || "Avatar",
+            alt: d ?? "Avatar",
             className: "rst:h-full rst:w-full rst:object-cover",
             onError: () => g(!0)
           }

package/dist/components/atoms/AvatarStrip/AvatarStrip.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../../lib/utils.cjs"),f=require("../Avatar/Avatar.cjs");function g({items:i,maxDisplay:l=5,totalCount:n,excludeKey:c,onDismiss:o,trailingSlot:d,label:v,ringClass:h="rst:ring-white rst:dark:ring-gray-900",className:p}){const s=i.filter(t=>t.key!==c).slice(0,l),e=n!==void 0?Math.max(0,n-s.length):Math.max(0,i.filter(t=>t.key!==c).length-l);return s.length===0&&!d?null:r.jsxs("div",{"data-testid":"avatar-strip",className:a.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",p),children:[o&&r.jsx("button",{type:"button",onClick:o,"aria-label":"Dismiss","data-testid":"avatar-strip-dismiss",className:"rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",children:"✕"}),r.jsxs("div",{"data-testid":"avatar-strip-stack",className:"rst:flex rst:items-center rst:-space-x-2",children:[s.map(t=>{const x=r.jsx(f.Avatar,{initials:t.label[0].toUpperCase(),src:t.src,colorScheme:t.colorScheme??"neutral",size:"xs"}),u=a.cn("rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",h);return t.href?r.jsx("a",{href:t.href,title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:u,children:x},t.key):r.jsx("span",{title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:u,children:x},t.key)}),e>0&&r.jsx("div",{title:`${e} more`,"data-testid":"avatar-strip-overflow",className:a.cn("rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",h),children:r.jsxs("span",{className:"rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none",children:["+",e]})}),d]}),v&&r.jsx("div",{"data-testid":"avatar-strip-label",children:v})]})}exports.AvatarStrip=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../../lib/utils.cjs"),y=require("../../../lib/labels.cjs"),b=require("../Avatar/Avatar.cjs"),k={dismiss:"Dismiss",more:s=>`${s} more`};function m({items:s,maxDisplay:l=5,totalCount:n,excludeKey:c,onDismiss:o,trailingSlot:d,label:h,ringClass:v="rst:ring-white rst:dark:ring-gray-900",labels:f,className:g}){const x=y.withLabels(k,f),e=s.filter(t=>t.key!==c).slice(0,l),a=n!==void 0?Math.max(0,n-e.length):Math.max(0,s.filter(t=>t.key!==c).length-l);return e.length===0&&!d?null:r.jsxs("div",{"data-testid":"avatar-strip",className:i.cn("rst:font-ui rst:flex rst:items-center rst:gap-3",g),children:[o&&r.jsx("button",{type:"button",onClick:o,"aria-label":x.dismiss,"data-testid":"avatar-strip-dismiss",className:"rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",children:"✕"}),r.jsxs("div",{"data-testid":"avatar-strip-stack",className:"rst:flex rst:items-center rst:-space-x-2",children:[e.map(t=>{const u=r.jsx(b.Avatar,{initials:t.label[0].toUpperCase(),src:t.src,alt:t.label,colorScheme:t.colorScheme??"neutral",size:"xs"}),p=i.cn("rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",v);return t.href?r.jsx("a",{href:t.href,title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:p,children:u},t.key):r.jsx("span",{title:t.label,"data-testid":`avatar-strip-item-${t.key}`,className:p,children:u},t.key)}),a>0&&r.jsx("div",{title:x.more(a),"data-testid":"avatar-strip-overflow",className:i.cn("rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",v),children:r.jsxs("span",{className:"rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none",children:["+",a]})}),d]}),h&&r.jsx("div",{"data-testid":"avatar-strip-label",children:h})]})}exports.AvatarStrip=m;

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

@@ -12,6 +12,13 @@ export interface AvatarStripItem {
     /** When provided, the avatar is wrapped in an `<a>` tag with this href. */
     href?: string;
 }
+/** Every word AvatarStrip says of its own. Pass any of them in `labels` to replace it. */
+export interface AvatarStripLabels {
+    /** The dismiss button's name, with `onDismiss`. */
+    dismiss: string;
+    /** The overflow chip's title: how many more there are. */
+    more: (count: number) => string;
+}
 export interface AvatarStripProps {
     /** Ordered list of avatar items. */
     items: AvatarStripItem[];
@@ -35,6 +42,8 @@ export interface AvatarStripProps {
     trailingSlot?: ReactNode;
     /** Rendered to the right of the avatar stack. Accepts any React node. */
     label?: ReactNode;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<AvatarStripLabels>;
     /**
      * Tailwind class that sets the ring color around each avatar and the overflow chip.
      * Should match the background the strip is rendered on to produce the cutout stack effect.
@@ -56,4 +65,4 @@ export interface AvatarStripProps {
  *
  * Returns `null` when there are no visible items and no `trailingSlot`.
  */
-export declare function AvatarStrip({ items, maxDisplay, totalCount, excludeKey, onDismiss, trailingSlot, label, ringClass, className, }: AvatarStripProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AvatarStrip({ items, maxDisplay, totalCount, excludeKey, onDismiss, trailingSlot, label, ringClass, labels, className, }: AvatarStripProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/atoms/AvatarStrip/AvatarStrip.js

@@ -1,54 +1,58 @@
 "use client";
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { cn as i } from "../../../lib/utils.js";
-import { Avatar as m } from "../Avatar/Avatar.js";
-function b({
-  items: l,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../../lib/utils.js";
+import { withLabels as y } from "../../../lib/labels.js";
+import { Avatar as k } from "../Avatar/Avatar.js";
+const b = { dismiss: "Dismiss", more: (s) => `${s} more` };
+function L({
+  items: s,
   maxDisplay: n = 5,
-  totalCount: c,
-  excludeKey: o,
+  totalCount: o,
+  excludeKey: c,
   onDismiss: d,
   trailingSlot: h,
-  label: v,
-  ringClass: p = "rst:ring-white rst:dark:ring-gray-900",
-  className: g
+  label: p,
+  ringClass: v = "rst:ring-white rst:dark:ring-gray-900",
+  labels: g,
+  className: u
 }) {
-  const s = l.filter((t) => t.key !== o).slice(0, n), e = c !== void 0 ? Math.max(0, c - s.length) : Math.max(0, l.filter((t) => t.key !== o).length - n);
-  return s.length === 0 && !h ? null : /* @__PURE__ */ a(
+  const f = y(b, g), e = s.filter((t) => t.key !== c).slice(0, n), a = o !== void 0 ? Math.max(0, o - e.length) : Math.max(0, s.filter((t) => t.key !== c).length - n);
+  return e.length === 0 && !h ? null : /* @__PURE__ */ i(
     "div",
     {
       "data-testid": "avatar-strip",
-      className: i("rst:font-ui rst:flex rst:items-center rst:gap-3", g),
+      className: l("rst:font-ui rst:flex rst:items-center rst:gap-3", u),
       children: [
         d && /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             onClick: d,
-            "aria-label": "Dismiss",
+            "aria-label": f.dismiss,
             "data-testid": "avatar-strip-dismiss",
             className: "rst:shrink-0 rst:text-gray-400/50 rst:dark:text-gray-500/50 rst:hover:text-gray-400 rst:dark:hover:text-gray-500 rst:transition-colors rst:cursor-pointer",
             children: "✕"
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ i(
           "div",
           {
             "data-testid": "avatar-strip-stack",
             className: "rst:flex rst:items-center rst:-space-x-2",
             children: [
-              s.map((t) => {
-                const f = /* @__PURE__ */ r(
-                  m,
+              e.map((t) => {
+                const m = /* @__PURE__ */ r(
+                  k,
                   {
                     initials: t.label[0].toUpperCase(),
                     src: t.src,
+                    alt: t.label,
                     colorScheme: t.colorScheme ?? "neutral",
                     size: "xs"
                   }
-                ), x = i(
+                ), x = l(
                   "rst:relative rst:inline-flex rst:h-6 rst:w-6 rst:rounded-full rst:ring-2 rst:transition-transform rst:hover:z-10 rst:hover:scale-110",
-                  p
+                  v
                 );
                 return t.href ? /* @__PURE__ */ r(
                   "a",
@@ -57,7 +61,7 @@ function b({
                     title: t.label,
                     "data-testid": `avatar-strip-item-${t.key}`,
                     className: x,
-                    children: f
+                    children: m
                   },
                   t.key
                 ) : /* @__PURE__ */ r(
@@ -66,23 +70,23 @@ function b({
                     title: t.label,
                     "data-testid": `avatar-strip-item-${t.key}`,
                     className: x,
-                    children: f
+                    children: m
                   },
                   t.key
                 );
               }),
-              e > 0 && /* @__PURE__ */ r(
+              a > 0 && /* @__PURE__ */ r(
                 "div",
                 {
-                  title: `${e} more`,
+                  title: f.more(a),
                   "data-testid": "avatar-strip-overflow",
-                  className: i(
+                  className: l(
                     "rst:relative rst:flex rst:h-6 rst:w-6 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-500/10 rst:ring-2",
-                    p
+                    v
                   ),
-                  children: /* @__PURE__ */ a("span", { className: "rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none", children: [
+                  children: /* @__PURE__ */ i("span", { className: "rst:text-[9px] rst:font-bold rst:text-gray-500 rst:dark:text-gray-400 rst:select-none", children: [
                     "+",
-                    e
+                    a
                   ] })
                 }
               ),
@@ -90,11 +94,11 @@ function b({
             ]
           }
         ),
-        v && /* @__PURE__ */ r("div", { "data-testid": "avatar-strip-label", children: v })
+        p && /* @__PURE__ */ r("div", { "data-testid": "avatar-strip-label", children: p })
       ]
     }
   );
 }
 export {
-  b as AvatarStrip
+  L as AvatarStrip
 };

package/dist/components/atoms/Button/button-variants.cjs

@@ -1 +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:font-ui rst:inline-flex rst:items-center rst:justify-center rst:cursor-pointer rst:whitespace-nowrap rst:rounded-md rst:text-sm rst:font-medium rst:ring-offset-background rst:transition-colors rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:disabled:pointer-events-none rst:disabled:opacity-50",{variants:{variant:{solid:"rst:border rst:border-transparent rst:elevation-control",soft:"rst:border-transparent rst:shadow-none",outline:"rst:border rst:bg-transparent rst:elevation-control",ghost:"rst:border rst:border-transparent rst:bg-transparent",link:"rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"},colorScheme:{primary:"",orange:"",teal:"",purple:"",amber:"",success:"",error:"",neutral:""},size:{xs:"rst:h-7 rst:rounded-sm rst:px-2 rst:text-xs",sm:"rst:h-9 rst:rounded-md rst:px-3",default:"rst:h-10 rst:px-4 rst:py-2",lg:"rst:h-11 rst:rounded-md rst:px-8",icon:"rst:h-10 rst:w-10"}},compoundVariants:[{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-600 rst:hover:bg-primary-700 rst:dark:bg-primary-600 rst:dark:hover:bg-primary-500 rst:text-primary-600-ink rst:hover:text-primary-700-ink rst:dark:hover:text-primary-500-ink"},{variant:"solid",colorScheme:"orange",className:"rst:bg-orange-600 rst:hover:bg-orange-700 rst:dark:bg-orange-600 rst:dark:hover:bg-orange-700 rst:text-orange-600-ink rst:hover:text-orange-700-ink rst:dark:hover:text-orange-700-ink"},{variant:"solid",colorScheme:"teal",className:"rst:bg-teal-600 rst:hover:bg-teal-500 rst:dark:bg-teal-600 rst:dark:hover:bg-teal-500 rst:text-teal-600-ink rst:hover:text-teal-500-ink rst:dark:hover:text-teal-500-ink"},{variant:"solid",colorScheme:"purple",className:"rst:bg-purple-600 rst:hover:bg-purple-700 rst:dark:bg-purple-600 rst:dark:hover:bg-purple-700 rst:text-purple-600-ink rst:hover:text-purple-700-ink rst:dark:hover:text-purple-700-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-400 rst:hover:bg-amber-500 rst:dark:bg-amber-500 rst:dark:hover:bg-amber-400 rst:text-amber-400-ink rst:hover:text-amber-500-ink rst:dark:text-amber-500-ink rst:dark:hover:text-amber-400-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-600 rst:hover:bg-success-700 rst:dark:bg-success-600 rst:dark:hover:bg-success-700 rst:text-success-600-ink rst:hover:text-success-700-ink rst:dark:hover:text-success-700-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-600 rst:hover:bg-error-700 rst:dark:bg-error-600 rst:dark:hover:bg-error-500 rst:text-error-600-ink rst:hover:text-error-700-ink rst:dark:hover:text-error-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:hover:bg-gray-700 rst:dark:bg-gray-600 rst:dark:hover:bg-gray-500 rst:text-gray-600-ink rst:hover:text-gray-700-ink rst:dark:hover:text-gray-500-ink"},{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:hover:bg-primary-100 rst:dark:bg-primary-900/40 rst:dark:text-primary-300 rst:dark:hover:bg-primary-900/60"},{variant:"soft",colorScheme:"orange",className:"rst:bg-orange-50 rst:text-orange-700 rst:hover:bg-orange-100 rst:dark:bg-orange-900/30 rst:dark:text-orange-300 rst:dark:hover:bg-orange-900/50"},{variant:"soft",colorScheme:"teal",className:"rst:bg-teal-100 rst:text-teal-800 rst:hover:bg-teal-200 rst:dark:bg-teal-900/30 rst:dark:text-teal-300 rst:dark:hover:bg-teal-900/50"},{variant:"soft",colorScheme:"purple",className:"rst:bg-purple-50 rst:text-purple-700 rst:hover:bg-purple-100 rst:dark:bg-purple-900/30 rst:dark:text-purple-300 rst:dark:hover:bg-purple-900/50"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:hover:bg-amber-100 rst:dark:bg-amber-900/30 rst:dark:text-amber-300 rst:dark:hover:bg-amber-900/50"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:hover:bg-success-100 rst:dark:bg-success-900/30 rst:dark:text-success-300 rst:dark:hover:bg-success-900/50"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:hover:bg-error-100 rst:dark:bg-error-900/30 rst:dark:text-error-300 rst:dark:hover:bg-error-900/50"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:hover:bg-gray-200 rst:dark:bg-gray-800/50 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-600 rst:hover:bg-primary-50 rst:dark:border-primary-500 rst:dark:text-primary-400 rst:dark:hover:bg-primary-500/10"},{variant:"outline",colorScheme:"orange",className:"rst:border-orange-600 rst:text-orange-600 rst:hover:bg-orange-50 rst:dark:border-orange-500 rst:dark:text-orange-400 rst:dark:hover:bg-orange-500/10"},{variant:"outline",colorScheme:"teal",className:"rst:border-teal-600 rst:text-teal-600 rst:hover:bg-teal-50 rst:dark:border-teal-500 rst:dark:text-teal-400 rst:dark:hover:bg-teal-500/10"},{variant:"outline",colorScheme:"purple",className:"rst:border-purple-600 rst:text-purple-600 rst:hover:bg-purple-50 rst:dark:border-purple-500 rst:dark:text-purple-400 rst:dark:hover:bg-purple-500/10"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-600 rst:hover:bg-amber-50 rst:dark:border-amber-500 rst:dark:text-amber-400 rst:dark:hover:bg-amber-500/10"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-600 rst:hover:bg-success-50 rst:dark:border-success-500 rst:dark:text-success-400 rst:dark:hover:bg-success-500/10"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-600 rst:hover:bg-error-50 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:hover:bg-error-500/10"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-300 rst:text-gray-700 rst:hover:bg-gray-50 rst:dark:border-gray-600 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800/50"},{variant:"ghost",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15"},{variant:"ghost",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:bg-orange-500/10 rst:dark:text-orange-400 rst:dark:hover:bg-orange-400/15"},{variant:"ghost",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:bg-teal-500/10 rst:dark:text-teal-400 rst:dark:hover:bg-teal-400/15"},{variant:"ghost",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:bg-purple-500/10 rst:dark:text-purple-400 rst:dark:hover:bg-purple-400/15"},{variant:"ghost",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:bg-amber-500/10 rst:dark:text-amber-400 rst:dark:hover:bg-amber-400/15"},{variant:"ghost",colorScheme:"success",className:"rst:text-success-600 rst:hover:bg-success-500/10 rst:dark:text-success-400 rst:dark:hover:bg-success-400/15"},{variant:"ghost",colorScheme:"error",className:"rst:text-error-600 rst:hover:bg-error-500/10 rst:dark:text-error-400 rst:dark:hover:bg-error-400/15"},{variant:"ghost",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:bg-gray-500/10 rst:dark:text-gray-400 rst:dark:hover:bg-gray-400/15"},{variant:"link",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:text-primary-700 rst:dark:text-primary-400 rst:dark:hover:text-primary-300"},{variant:"link",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:text-orange-700 rst:dark:text-orange-400 rst:dark:hover:text-orange-300"},{variant:"link",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:text-teal-700 rst:dark:text-teal-400 rst:dark:hover:text-teal-300"},{variant:"link",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:text-purple-700 rst:dark:text-purple-400 rst:dark:hover:text-purple-300"},{variant:"link",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:text-amber-700 rst:dark:text-amber-400 rst:dark:hover:text-amber-300"},{variant:"link",colorScheme:"success",className:"rst:text-success-600 rst:hover:text-success-700 rst:dark:text-success-400 rst:dark:hover:text-success-300"},{variant:"link",colorScheme:"error",className:"rst:text-error-600 rst:hover:text-error-700 rst:dark:text-error-400 rst:dark:hover:text-error-300"},{variant:"link",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:text-gray-900 rst:dark:text-gray-400 rst:dark:hover:text-gray-100"}],defaultVariants:{colorScheme:"primary",variant:"solid",size:"default"}});exports.buttonVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:inline-flex rst:items-center rst:justify-center rst:cursor-pointer rst:whitespace-nowrap rst:rounded-md rst:text-sm rst:font-medium rst:ring-offset-background rst:transition-colors rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:disabled:pointer-events-none rst:disabled:opacity-50",{variants:{variant:{solid:"rst:border rst:border-transparent rst:elevation-control",soft:"rst:border-0 rst:shadow-none",outline:"rst:border rst:bg-transparent rst:elevation-control",ghost:"rst:border rst:border-transparent rst:bg-transparent",link:"rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"},colorScheme:{primary:"",orange:"",teal:"",purple:"",amber:"",success:"",error:"",neutral:""},size:{xs:"rst:h-7 rst:rounded-sm rst:px-2 rst:text-xs",sm:"rst:h-9 rst:rounded-md rst:px-3",default:"rst:h-10 rst:px-4 rst:py-2",lg:"rst:h-11 rst:rounded-md rst:px-8",icon:"rst:h-10 rst:w-10"}},compoundVariants:[{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-600 rst:hover:bg-primary-700 rst:dark:bg-primary-600 rst:dark:hover:bg-primary-500 rst:text-primary-600-ink rst:hover:text-primary-700-ink rst:dark:hover:text-primary-500-ink"},{variant:"solid",colorScheme:"orange",className:"rst:bg-orange-600 rst:hover:bg-orange-700 rst:dark:bg-orange-600 rst:dark:hover:bg-orange-700 rst:text-orange-600-ink rst:hover:text-orange-700-ink rst:dark:hover:text-orange-700-ink"},{variant:"solid",colorScheme:"teal",className:"rst:bg-teal-600 rst:hover:bg-teal-500 rst:dark:bg-teal-600 rst:dark:hover:bg-teal-500 rst:text-teal-600-ink rst:hover:text-teal-500-ink rst:dark:hover:text-teal-500-ink"},{variant:"solid",colorScheme:"purple",className:"rst:bg-purple-600 rst:hover:bg-purple-700 rst:dark:bg-purple-600 rst:dark:hover:bg-purple-700 rst:text-purple-600-ink rst:hover:text-purple-700-ink rst:dark:hover:text-purple-700-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-400 rst:hover:bg-amber-500 rst:dark:bg-amber-500 rst:dark:hover:bg-amber-400 rst:text-amber-400-ink rst:hover:text-amber-500-ink rst:dark:text-amber-500-ink rst:dark:hover:text-amber-400-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-600 rst:hover:bg-success-700 rst:dark:bg-success-600 rst:dark:hover:bg-success-700 rst:text-success-600-ink rst:hover:text-success-700-ink rst:dark:hover:text-success-700-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-600 rst:hover:bg-error-700 rst:dark:bg-error-600 rst:dark:hover:bg-error-500 rst:text-error-600-ink rst:hover:text-error-700-ink rst:dark:hover:text-error-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:hover:bg-gray-700 rst:dark:bg-gray-600 rst:dark:hover:bg-gray-500 rst:text-gray-600-ink rst:hover:text-gray-700-ink rst:dark:hover:text-gray-500-ink"},{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:hover:bg-primary-100 rst:dark:bg-primary-900/40 rst:dark:text-primary-300 rst:dark:hover:bg-primary-900/60"},{variant:"soft",colorScheme:"orange",className:"rst:bg-orange-50 rst:text-orange-700 rst:hover:bg-orange-100 rst:dark:bg-orange-900/30 rst:dark:text-orange-300 rst:dark:hover:bg-orange-900/50"},{variant:"soft",colorScheme:"teal",className:"rst:bg-teal-100 rst:text-teal-800 rst:hover:bg-teal-200 rst:dark:bg-teal-900/30 rst:dark:text-teal-300 rst:dark:hover:bg-teal-900/50"},{variant:"soft",colorScheme:"purple",className:"rst:bg-purple-50 rst:text-purple-700 rst:hover:bg-purple-100 rst:dark:bg-purple-900/30 rst:dark:text-purple-300 rst:dark:hover:bg-purple-900/50"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:hover:bg-amber-100 rst:dark:bg-amber-900/30 rst:dark:text-amber-300 rst:dark:hover:bg-amber-900/50"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:hover:bg-success-100 rst:dark:bg-success-900/30 rst:dark:text-success-300 rst:dark:hover:bg-success-900/50"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:hover:bg-error-100 rst:dark:bg-error-900/30 rst:dark:text-error-300 rst:dark:hover:bg-error-900/50"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:hover:bg-gray-200 rst:dark:bg-gray-800/50 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-600 rst:hover:bg-primary-50 rst:dark:border-primary-500 rst:dark:text-primary-400 rst:dark:hover:bg-primary-500/10"},{variant:"outline",colorScheme:"orange",className:"rst:border-orange-600 rst:text-orange-600 rst:hover:bg-orange-50 rst:dark:border-orange-500 rst:dark:text-orange-400 rst:dark:hover:bg-orange-500/10"},{variant:"outline",colorScheme:"teal",className:"rst:border-teal-600 rst:text-teal-600 rst:hover:bg-teal-50 rst:dark:border-teal-500 rst:dark:text-teal-400 rst:dark:hover:bg-teal-500/10"},{variant:"outline",colorScheme:"purple",className:"rst:border-purple-600 rst:text-purple-600 rst:hover:bg-purple-50 rst:dark:border-purple-500 rst:dark:text-purple-400 rst:dark:hover:bg-purple-500/10"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-600 rst:hover:bg-amber-50 rst:dark:border-amber-500 rst:dark:text-amber-400 rst:dark:hover:bg-amber-500/10"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-600 rst:hover:bg-success-50 rst:dark:border-success-500 rst:dark:text-success-400 rst:dark:hover:bg-success-500/10"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-600 rst:hover:bg-error-50 rst:dark:border-error-500 rst:dark:text-error-400 rst:dark:hover:bg-error-500/10"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-300 rst:text-gray-700 rst:hover:bg-gray-50 rst:dark:border-gray-600 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800/50"},{variant:"ghost",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:bg-primary-500/10 rst:dark:text-primary-400 rst:dark:hover:bg-primary-400/15"},{variant:"ghost",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:bg-orange-500/10 rst:dark:text-orange-400 rst:dark:hover:bg-orange-400/15"},{variant:"ghost",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:bg-teal-500/10 rst:dark:text-teal-400 rst:dark:hover:bg-teal-400/15"},{variant:"ghost",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:bg-purple-500/10 rst:dark:text-purple-400 rst:dark:hover:bg-purple-400/15"},{variant:"ghost",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:bg-amber-500/10 rst:dark:text-amber-400 rst:dark:hover:bg-amber-400/15"},{variant:"ghost",colorScheme:"success",className:"rst:text-success-600 rst:hover:bg-success-500/10 rst:dark:text-success-400 rst:dark:hover:bg-success-400/15"},{variant:"ghost",colorScheme:"error",className:"rst:text-error-600 rst:hover:bg-error-500/10 rst:dark:text-error-400 rst:dark:hover:bg-error-400/15"},{variant:"ghost",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:bg-gray-500/10 rst:dark:text-gray-400 rst:dark:hover:bg-gray-400/15"},{variant:"link",colorScheme:"primary",className:"rst:text-primary-600 rst:hover:text-primary-700 rst:dark:text-primary-400 rst:dark:hover:text-primary-300"},{variant:"link",colorScheme:"orange",className:"rst:text-orange-600 rst:hover:text-orange-700 rst:dark:text-orange-400 rst:dark:hover:text-orange-300"},{variant:"link",colorScheme:"teal",className:"rst:text-teal-600 rst:hover:text-teal-700 rst:dark:text-teal-400 rst:dark:hover:text-teal-300"},{variant:"link",colorScheme:"purple",className:"rst:text-purple-600 rst:hover:text-purple-700 rst:dark:text-purple-400 rst:dark:hover:text-purple-300"},{variant:"link",colorScheme:"amber",className:"rst:text-amber-600 rst:hover:text-amber-700 rst:dark:text-amber-400 rst:dark:hover:text-amber-300"},{variant:"link",colorScheme:"success",className:"rst:text-success-600 rst:hover:text-success-700 rst:dark:text-success-400 rst:dark:hover:text-success-300"},{variant:"link",colorScheme:"error",className:"rst:text-error-600 rst:hover:text-error-700 rst:dark:text-error-400 rst:dark:hover:text-error-300"},{variant:"link",colorScheme:"neutral",className:"rst:text-gray-600 rst:hover:text-gray-900 rst:dark:text-gray-400 rst:dark:hover:text-gray-100"}],defaultVariants:{colorScheme:"primary",variant:"solid",size:"default"}});exports.buttonVariants=t;

package/dist/components/atoms/Button/button-variants.js

@@ -6,11 +6,13 @@ const e = /* @__PURE__ */ r(
     variants: {
       variant: {
         solid: "rst:border rst:border-transparent rst:elevation-control",
-        soft: "rst:border-transparent rst:shadow-none",
+        // `border-0`, here and on `link`: a <button> draws the browser's own
+        // border unless told otherwise, and an app without a reset would see
+        // it. Zero rather than the 1px the others have, because zero is what
+        // every app with a reset already draws: none of them moves.
+        soft: "rst:border-0 rst:shadow-none",
         outline: "rst:border rst:bg-transparent rst:elevation-control",
         ghost: "rst:border rst:border-transparent rst:bg-transparent",
-        // `border-0`: a <button> draws the browser's own border unless told
-        // otherwise, and an app without a reset would see it round a link.
         link: "rst:border-0 rst:bg-transparent rst:underline-offset-4 rst:hover:underline"
       },
       colorScheme: {

package/dist/components/atoms/Eyebrow/eyebrow-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/class-variance-authority/dist/index.cjs"),r=t.cva("rst:font-mono rst:uppercase rst:leading-none",{variants:{size:{xs:"rst:text-[0.625rem] rst:tracking-[0.16em]",sm:"rst:text-[0.6875rem] rst:tracking-[0.14em]",md:"rst:text-xs rst:tracking-[0.12em]"},tone:{faint:"rst:text-gray-500 rst:dark:text-gray-400",default:"rst:text-gray-700 rst:dark:text-gray-300",strong:"rst:text-gray-900 rst:dark:text-gray-100",primary:"rst:text-primary-600 rst:dark:text-primary-400"},weight:{normal:"rst:font-normal",medium:"rst:font-medium",semibold:"rst:font-semibold"}},defaultVariants:{size:"xs",tone:"faint",weight:"normal"}});exports.eyebrowVariants=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../node_modules/class-variance-authority/dist/index.cjs"),r=t.cva("rst:font-mono rst:uppercase",{variants:{size:{xs:"rst:text-[0.625rem] rst:leading-none rst:tracking-[0.16em]",sm:"rst:text-[0.6875rem] rst:leading-none rst:tracking-[0.14em]",md:"rst:text-xs rst:leading-none rst:tracking-[0.12em]"},tone:{faint:"rst:text-gray-500 rst:dark:text-gray-400",default:"rst:text-gray-700 rst:dark:text-gray-300",strong:"rst:text-gray-900 rst:dark:text-gray-100",primary:"rst:text-primary-600 rst:dark:text-primary-400"},weight:{normal:"rst:font-normal",medium:"rst:font-medium",semibold:"rst:font-semibold"}},defaultVariants:{size:"xs",tone:"faint",weight:"normal"}});exports.eyebrowVariants=r;

package/dist/components/atoms/Eyebrow/eyebrow-variants.js

@@ -1,12 +1,16 @@
 import { cva as t } from "../../../node_modules/class-variance-authority/dist/index.js";
 const e = /* @__PURE__ */ t(
-  "rst:font-mono rst:uppercase rst:leading-none",
+  "rst:font-mono rst:uppercase",
   {
     variants: {
+      /* `leading-none` after each size, never before it: tailwind-merge
+         drops a line height that comes before a font size, because a size
+         can carry its own. Placed first, it was lost, and the line was 1.5
+         times the size instead of 1. */
       size: {
-        xs: "rst:text-[0.625rem] rst:tracking-[0.16em]",
-        sm: "rst:text-[0.6875rem] rst:tracking-[0.14em]",
-        md: "rst:text-xs rst:tracking-[0.12em]"
+        xs: "rst:text-[0.625rem] rst:leading-none rst:tracking-[0.16em]",
+        sm: "rst:text-[0.6875rem] rst:leading-none rst:tracking-[0.14em]",
+        md: "rst:text-xs rst:leading-none rst:tracking-[0.12em]"
       },
       tone: {
         faint: "rst:text-gray-500 rst:dark:text-gray-400",

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 };