@blakesteve/roster 5.6.0 → 5.8.0

package/dist/components/molecules/Pagination/Pagination.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsxs as u, Fragment as I, jsx as e } from "react/jsx-runtime";
-import { useId as et, useState as X, useRef as rt, useMemo as st } from "react";
+import { jsxs as u, Fragment as I, jsx as r } from "react/jsx-runtime";
+import { useId as rt, useState as X, useRef as et, useMemo as st } from "react";
 import { cn as x } from "../../../lib/utils.js";
-import { Button as at } from "../../atoms/Button/Button.js";
-import { buttonVariants as nt } from "../../atoms/Button/button-variants.js";
-import { selectTriggerVariants as it } from "../../atoms/Select/select-variants.js";
-import { clampPage as lt, pageItems as ot } from "./page-items.js";
-const ct = {
+import { withLabels as at } from "../../../lib/labels.js";
+import { Button as nt } from "../../atoms/Button/Button.js";
+import { buttonVariants as it } from "../../atoms/Button/button-variants.js";
+import { selectTriggerVariants as lt } from "../../atoms/Select/select-variants.js";
+import { clampPage as ot, pageItems as ct } from "./page-items.js";
+const dt = {
   nav: "Pagination",
   page: (t) => `Page ${t}`,
   number: (t) => String(t),
@@ -21,8 +22,8 @@ const ct = {
   of: (t) => `of ${t}`,
   status: (t, i) => `Page ${t} of ${i}`
 };
-function dt({ href: t, className: i, children: c, onClick: o, ...p }) {
-  return /* @__PURE__ */ e(
+function ut({ href: t, className: i, children: c, onClick: o, ...p }) {
+  return /* @__PURE__ */ r(
     "a",
     {
       href: t,
@@ -35,8 +36,8 @@ function dt({ href: t, className: i, children: c, onClick: o, ...p }) {
     }
   );
 }
-const ut = "rst:h-11 rst:min-w-11 rst:px-2", pt = "rst:cursor-not-allowed rst:opacity-50", ft = "rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4", Y = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0 }, j = ({ dir: t, double: i = !1 }) => /* @__PURE__ */ e("svg", { ...Y, className: "rst:shrink-0", children: t === "left" ? i ? /* @__PURE__ */ e("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" }) : /* @__PURE__ */ e("path", { d: "m15 18-6-6 6-6" }) : i ? /* @__PURE__ */ e("path", { d: "m13 17 5-5-5-5M6 17l5-5-5-5" }) : /* @__PURE__ */ e("path", { d: "m9 18 6-6-6-6" }) });
-function mt({
+const pt = "rst:h-11 rst:min-w-11 rst:px-2", ft = "rst:cursor-not-allowed rst:opacity-50", mt = "rst:forced-colors:border-2 rst:forced-colors:underline rst:forced-colors:decoration-2 rst:forced-colors:underline-offset-4", Y = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0 }, j = ({ dir: t, double: i = !1 }) => /* @__PURE__ */ r("svg", { ...Y, className: "rst:shrink-0", children: t === "left" ? i ? /* @__PURE__ */ r("path", { d: "m11 17-5-5 5-5M18 17l-5-5 5-5" }) : /* @__PURE__ */ r("path", { d: "m15 18-6-6 6-6" }) : i ? /* @__PURE__ */ r("path", { d: "m13 17 5-5-5-5M6 17l5-5-5-5" }) : /* @__PURE__ */ r("path", { d: "m9 18 6-6-6-6" }) });
+function ht({
   id: t,
   describedBy: i,
   page: c,
@@ -44,13 +45,13 @@ function mt({
   number: p,
   onCommit: P
 }) {
-  const [d, N] = X(null), f = rt(!1), v = d && d.page === c ? d.value : null, y = (l) => {
+  const [d, N] = X(null), f = et(!1), v = d && d.page === c ? d.value : null, y = (l) => {
     N(null), l !== c && P(l);
   }, $ = st(
-    () => Array.from({ length: o }, (l, m) => /* @__PURE__ */ e("option", { value: m + 1, children: p(m + 1) }, m + 1)),
+    () => Array.from({ length: o }, (l, m) => /* @__PURE__ */ r("option", { value: m + 1, children: p(m + 1) }, m + 1)),
     [o, p]
   );
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ r(
     "select",
     {
       id: t,
@@ -78,7 +79,7 @@ function mt({
         v !== null && y(v);
       },
       className: x(
-        it({ variant: "outline" }),
+        lt({ variant: "outline" }),
         /* 16px: iOS zooms the page into a select whose text is smaller. */
         "rst:h-11 rst:w-auto rst:min-w-16 rst:appearance-none rst:pl-3 rst:pr-8 rst:text-base rst:tabular-nums"
       ),
@@ -87,7 +88,7 @@ function mt({
     }
   );
 }
-function kt({
+function $t({
   page: t,
   pageCount: i,
   onPageChange: c,
@@ -103,20 +104,20 @@ function kt({
   labels: l,
   className: m
 }) {
-  const a = { ...ct, ...l }, h = Number.isFinite(i) ? Math.max(0, Math.floor(i)) : 0, n = lt(t, h), S = et(), Z = p ?? dt, [T, H] = X({ page: n, text: "" });
+  const a = at(dt, l), h = Number.isFinite(i) ? Math.max(0, Math.floor(i)) : 0, n = ot(t, h), S = rt(), Z = p ?? ut, [T, H] = X({ page: n, text: "" });
   T.page !== n && H({ page: n, text: $ ? a.status(n, h) : "" });
-  const D = (r) => {
-    r !== Math.floor(t) && c?.(r);
-  }, w = (r, s, k, F) => {
-    const g = r === "page" && s === n, L = s === null, q = x(ut, L && pt, g && ft, F.className), J = r === "page" ? `page-${s}` : r;
+  const D = (e) => {
+    e !== Math.floor(t) && c?.(e);
+  }, w = (e, s, k, F) => {
+    const g = e === "page" && s === n, L = s === null, q = x(pt, L && ft, g && mt, F.className), J = e === "page" ? `page-${s}` : e;
     if (o) {
       const Q = o(s ?? n);
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ r(
         Z,
         {
           href: Q,
           to: Q,
-          className: x(nt({ variant: g ? "solid" : y, colorScheme: g ? "primary" : "neutral" }), q),
+          className: x(it({ variant: g ? "solid" : y, colorScheme: g ? "primary" : "neutral" }), q),
           "aria-label": F.label,
           "aria-current": g ? "page" : void 0,
           "aria-disabled": L ? !0 : void 0,
@@ -132,8 +133,8 @@ function kt({
         J
       );
     }
-    return /* @__PURE__ */ e(
-      at,
+    return /* @__PURE__ */ r(
+      nt,
       {
         type: "button",
         variant: g ? "solid" : y,
@@ -149,42 +150,42 @@ function kt({
       },
       J
     );
-  }, B = n > 1 ? n - 1 : null, K = n < h ? n + 1 : null, R = n > 1 ? 1 : null, O = n < h ? h : null, M = (r) => w(
+  }, B = n > 1 ? n - 1 : null, K = n < h ? n + 1 : null, R = n > 1 ? 1 : null, O = n < h ? h : null, M = (e) => w(
     "previous",
     B,
     /* @__PURE__ */ u(I, { children: [
-      /* @__PURE__ */ e(j, { dir: "left" }),
-      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pr-1 rst:@[36rem]:inline", children: a.previous })
+      /* @__PURE__ */ r(j, { dir: "left" }),
+      e && /* @__PURE__ */ r("span", { className: "rst:hidden rst:pr-1 rst:@[36rem]:inline", children: a.previous })
     ] }),
     { label: a.previousPage(B) }
-  ), A = (r) => w(
+  ), A = (e) => w(
     "next",
     K,
     /* @__PURE__ */ u(I, { children: [
-      r && /* @__PURE__ */ e("span", { className: "rst:hidden rst:pl-1 rst:@[36rem]:inline", children: a.next }),
-      /* @__PURE__ */ e(j, { dir: "right" })
+      e && /* @__PURE__ */ r("span", { className: "rst:hidden rst:pl-1 rst:@[36rem]:inline", children: a.next }),
+      /* @__PURE__ */ r(j, { dir: "right" })
     ] }),
     { label: a.nextPage(K) }
-  ), V = (r) => w("first", R, /* @__PURE__ */ e(j, { dir: "left", double: !0 }), {
+  ), V = (e) => w("first", R, /* @__PURE__ */ r(j, { dir: "left", double: !0 }), {
     label: a.firstPage(R),
-    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
-  }), _ = (r) => w("last", O, /* @__PURE__ */ e(j, { dir: "right", double: !0 }), {
+    className: e ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), _ = (e) => w("last", O, /* @__PURE__ */ r(j, { dir: "right", double: !0 }), {
     label: a.lastPage(O),
-    className: r ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
-  }), C = "rst:flex rst:flex-wrap rst:items-center rst:gap-1", E = { start: "rst:justify-start", center: "rst:justify-center", end: "rst:justify-end" }[v], z = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "pages", children: [
+    className: e ? "rst:hidden rst:@[24rem]:inline-flex" : void 0
+  }), C = "rst:flex rst:flex-wrap rst:items-center rst:gap-1", E = { start: "rst:justify-start", center: "rst:justify-center", end: "rst:justify-end" }[v], z = (e) => /* @__PURE__ */ u("div", { className: x(C, E, e), "data-pagination-layout": "pages", children: [
     M(!0),
-    ot(n, h, N).map(
-      (s) => typeof s == "number" ? w("page", s, a.number(s), { label: a.page(s) }) : /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: a.gap }, s)
+    ct(n, h, N).map(
+      (s) => typeof s == "number" ? w("page", s, a.number(s), { label: a.page(s) }) : /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "rst:inline-flex rst:h-11 rst:w-11 rst:items-center rst:justify-center rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: a.gap }, s)
     ),
     A(!0)
-  ] }), G = `${S}-picker`, U = `${S}-of`, W = (r) => /* @__PURE__ */ u("div", { className: x(C, E, r), "data-pagination-layout": "compact", children: [
+  ] }), G = `${S}-picker`, U = `${S}-of`, W = (e) => /* @__PURE__ */ u("div", { className: x(C, E, e), "data-pagination-layout": "compact", children: [
     f && V(!0),
     M(!1),
     /* @__PURE__ */ u("div", { className: "rst:flex rst:items-center rst:gap-2 rst:px-1 rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", children: [
-      /* @__PURE__ */ e("label", { htmlFor: G, children: a.picker }),
+      /* @__PURE__ */ r("label", { htmlFor: G, children: a.picker }),
       /* @__PURE__ */ u("span", { className: "rst:relative rst:inline-flex", children: [
-        /* @__PURE__ */ e(
-          mt,
+        /* @__PURE__ */ r(
+          ht,
           {
             id: G,
             describedBy: U,
@@ -200,9 +201,9 @@ function kt({
             }
           }
         ),
-        /* @__PURE__ */ e("svg", { ...Y, width: 16, height: 16, className: "rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400", children: /* @__PURE__ */ e("path", { d: "m6 9 6 6 6-6" }) })
+        /* @__PURE__ */ r("svg", { ...Y, width: 16, height: 16, className: "rst:pointer-events-none rst:absolute rst:right-2.5 rst:top-1/2 rst:-translate-y-1/2 rst:text-gray-500 rst:dark:text-gray-400", children: /* @__PURE__ */ r("path", { d: "m6 9 6 6 6-6" }) })
       ] }),
-      /* @__PURE__ */ e("span", { id: U, className: "rst:tabular-nums", children: a.of(h) })
+      /* @__PURE__ */ r("span", { id: U, className: "rst:tabular-nums", children: a.of(h) })
     ] }),
     A(!1),
     f && _(!0)
@@ -236,12 +237,12 @@ function kt({
             z("rst:hidden rst:@[28rem]:flex"),
             W("rst:@[28rem]:hidden")
           ] }),
-          $ && /* @__PURE__ */ e("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "rst:sr-only", "data-pagination-live": "", children: T.text })
+          $ && /* @__PURE__ */ r("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "rst:sr-only", "data-pagination-live": "", children: T.text })
         ]
       }
     )
   );
 }
 export {
-  kt as Pagination
+  $t as Pagination
 };

package/dist/components/molecules/ProgressField/ProgressField.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("../../../lib/utils.cjs"),j=require("../../atoms/Progress/Progress.cjs"),h=require("../../atoms/Progress/progress-values.cjs"),y=s=>`${s}%`,N=(s,r)=>`${s} of ${r}`;function w({label:s,valueText:r,detail:n,labels:e,className:c,...a}){const{value:u,max:d,variant:o="continuous",segments:l,announce:m=!0}=a,{known:g,percent:x,done:p,applicable:v}=h.progressValues({value:u,max:d,variant:o,segments:l}),i=r??(o==="segmented"?(e?.count??N)(p,v):g?(e?.percent??y)(x):void 0);return t.jsxs("div",{className:f.cn("rst:font-ui rst:w-full rst:min-w-0",c),"data-progress-field":"",children:[t.jsxs("div",{"aria-hidden":m?!0:void 0,className:"rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm",children:[t.jsx("span",{className:"rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]","data-progress-label":"",children:s}),i!==void 0&&t.jsx("span",{className:"rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400","data-progress-value":"",children:i})]}),t.jsx(j.Progress,{...a,label:s,valueText:r,labels:e}),n!==void 0&&t.jsx("p",{className:"rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400","data-progress-detail":"",children:n})]})}exports.ProgressField=w;

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ProgressLabels, ProgressProps } from '../../atoms/Progress/Progress';
+export interface ProgressFieldProps extends Pick<ProgressProps, "value" | "max" | "variant" | "segments" | "status" | "size" | "rounded" | "busy" | "announce" | "announceEvery"> {
+    /** What's progressing: "Uploading photos". Shown, and said with the value. */
+    label: string;
+    /** The value as shown and said, in place of the percent or the count: "3 of 8 files". */
+    valueText?: string;
+    /** A line under the bar: bytes, a step counter, a time left. */
+    detail?: ReactNode;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<ProgressLabels>;
+    className?: string;
+}
+/**
+ * A progress bar with its label and value above it and an optional detail
+ * line below: the form to reach for when showing progress. Label left and
+ * value right, on one baseline, so a column of them lines up down a page.
+ *
+ * A screen reader hears the label and value together, politely, as they
+ * change (no more than once every 1.5 seconds); the visible pair is hidden
+ * from it so it isn't read twice.
+ */
+declare function ProgressField({ label, valueText, detail, labels, className, ...progress }: ProgressFieldProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressField };

package/dist/components/molecules/ProgressField/ProgressField.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { cn as h } from "../../../lib/utils.js";
+import { Progress as N } from "../../atoms/Progress/Progress.js";
+import { progressValues as w } from "../../atoms/Progress/progress-values.js";
+const y = (t) => `${t}%`, k = (t, r) => `${t} of ${r}`;
+function C({
+  label: t,
+  valueText: r,
+  detail: n,
+  labels: e,
+  className: m,
+  ...a
+}) {
+  const { value: d, max: l, variant: o = "continuous", segments: u, announce: p = !0 } = a, { known: g, percent: x, done: f, applicable: v } = w({ value: d, max: l, variant: o, segments: u }), i = r ?? (o === "segmented" ? (e?.count ?? k)(f, v) : g ? (e?.percent ?? y)(x) : void 0);
+  return (
+    /* min-w-0: in a grid or flex column, a field otherwise refuses to be
+       narrower than its label on one line, and a long label pushes it out of
+       the column instead of truncating. */
+    /* @__PURE__ */ c("div", { className: h("rst:font-ui rst:w-full rst:min-w-0", m), "data-progress-field": "", children: [
+      /* @__PURE__ */ c("div", { "aria-hidden": p ? !0 : void 0, className: "rst:mb-1.5 rst:flex rst:items-baseline rst:justify-between rst:gap-3 rst:text-sm", children: [
+        /* @__PURE__ */ s("span", { className: "rst:min-w-0 rst:truncate rst:font-medium rst:text-[var(--roster-control-text)]", "data-progress-label": "", children: t }),
+        i !== void 0 && /* @__PURE__ */ s("span", { className: "rst:shrink-0 rst:tabular-nums rst:text-gray-600 rst:dark:text-gray-400", "data-progress-value": "", children: i })
+      ] }),
+      /* @__PURE__ */ s(N, { ...a, label: t, valueText: r, labels: e }),
+      n !== void 0 && /* @__PURE__ */ s("p", { className: "rst:mt-1.5 rst:text-xs rst:text-gray-600 rst:dark:text-gray-400", "data-progress-detail": "", children: n })
+    ] })
+  );
+}
+export {
+  C as ProgressField
+};

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../lib/utils.cjs"),x=require("../../atoms/Card/Card.cjs"),m=require("../../atoms/Eyebrow/Eyebrow.cjs"),c=require("../../atoms/Stat/stat-variants.cjs"),h=require("../../organisms/Table/Table.cjs"),t=require("../../atoms/Skeleton/Skeleton.cjs");function j({media:r,lines:a=3,variant:s,padding:i,className:n}){return e.jsxs(x.Card,{variant:s,padding:i,className:n,"aria-hidden":"true","data-skeleton":"card",children:[r!==void 0&&e.jsx(t.Skeleton,{shape:"block",height:r,className:"rst:mb-4"}),e.jsx(t.Skeleton,{size:"lg",width:"45%"}),a>0&&e.jsx(t.Skeleton,{size:"md",lines:a,className:"rst:mt-2"})]})}function S({columns:r,className:a}){const s=["70%","50%","60%","40%"];return e.jsx(h.TableRow,{"aria-hidden":"true",className:a,"data-skeleton":"table-row",children:Array.from({length:Math.max(1,r)},(i,n)=>e.jsx(h.TableCell,{children:e.jsx(t.Skeleton,{size:"inherit",width:s[n%s.length]})},n))})}function k({size:r="md",withName:a=!1,className:s}){return a?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:items-center rst:gap-3",s),"data-skeleton":"avatar",children:[e.jsx(t.Skeleton,{shape:"circle",size:r}),e.jsx(t.Skeleton,{size:"md",width:"8rem"})]}):e.jsx(t.Skeleton,{shape:"circle",size:r,className:s})}function w({size:r="md",semantics:a="definition",source:s=!1,className:i}){const n=c.statValueVariants({size:r,colorScheme:"neutral"}),o=e.jsx(t.Skeleton,{size:"inherit",width:"2.5em"}),d=e.jsx(m.Eyebrow,{size:"xs",children:e.jsx(t.Skeleton,{size:"inherit",width:"9em"})}),u=e.jsx("span",{className:c.statSourceClass,children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})});return a==="standalone"?e.jsxs("span",{"aria-hidden":"true",className:l.cn("rst:flex rst:flex-col rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("span",{className:n,children:o}),d,s&&u]}):e.jsxs("div",{"aria-hidden":"true",className:l.cn("rst:grid rst:content-start rst:gap-[3px]",i),"data-skeleton":"stat",children:[e.jsx("dt",{className:"rst:relative rst:col-start-1 rst:row-start-2 rst:flex",children:d}),s?e.jsxs("dd",{className:l.cn("rst:m-0",n,"rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"),children:[e.jsx("span",{className:"rst:row-start-1",children:o}),e.jsx("span",{className:l.cn(c.statSourceClass,"rst:row-start-3"),children:e.jsx(t.Skeleton,{size:"inherit",width:"12em"})})]}):e.jsx("dd",{className:l.cn("rst:m-0 rst:col-start-1 rst:row-start-1",n),children:o})]})}exports.SkeletonAvatar=k;exports.SkeletonCard=j;exports.SkeletonStat=w;exports.SkeletonTableRow=S;

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+import { CardProps } from '../../atoms/Card/Card';
+export interface SkeletonCardProps extends Pick<CardProps, "variant" | "padding"> {
+    /** A media block above the text, at this height (an image, a chart). */
+    media?: CSSProperties["height"];
+    /** Body lines under the title. */
+    lines?: number;
+    className?: string;
+}
+/**
+ * A Card loading. Stands in for a Card holding an optional media block (with
+ * 16px below it), a `text-base` title, and `text-sm` body lines 8px under it.
+ */
+declare function SkeletonCard({ media, lines, variant, padding, className }: SkeletonCardProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTableRowProps {
+    /** How many cells. */
+    columns: number;
+    className?: string;
+}
+/**
+ * A table row loading, inside Roster's Table: its own cells, at the table's
+ * size, each holding one line in the cell's text size. Stands in for a row of
+ * one-line cells.
+ */
+declare function SkeletonTableRow({ columns, className }: SkeletonTableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonAvatarProps {
+    /** Avatar's sizes. */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** A name line beside it, in `text-sm`. */
+    withName?: boolean;
+    className?: string;
+}
+/** An Avatar loading, and optionally the name beside it. */
+declare function SkeletonAvatar({ size, withName, className }: SkeletonAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonStatProps {
+    /** Stat's sizes. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Stat's two markups, mirrored. `definition` (Stat's default) is a `dt` and
+     * `dd` pair for a `<dl>`: put this preset in the same `<dl>`. `standalone`
+     * is spans.
+     */
+    semantics?: "definition" | "standalone";
+    /** A source line under the figure, as a Stat with `source` has. */
+    source?: boolean;
+    className?: string;
+}
+/**
+ * A Stat loading. Stat's own markup in each of its forms, with lines in place
+ * of its words, so the figure that arrives is the height of what held it:
+ * the label is the real Eyebrow, a flex item where Stat's is, so it makes the
+ * same line.
+ */
+declare function SkeletonStat({ size, semantics, source, className }: SkeletonStatProps): import("react/jsx-runtime").JSX.Element;
+export { SkeletonCard, SkeletonTableRow, SkeletonAvatar, SkeletonStat };

package/dist/components/molecules/SkeletonPresets/SkeletonPresets.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { cn as n } from "../../../lib/utils.js";
+import { Card as p } from "../../atoms/Card/Card.js";
+import { Eyebrow as u } from "../../atoms/Eyebrow/Eyebrow.js";
+import { statValueVariants as f, statSourceClass as h } from "../../atoms/Stat/stat-variants.js";
+import { TableRow as w, TableCell as g } from "../../organisms/Table/Table.js";
+import { Skeleton as r } from "../../atoms/Skeleton/Skeleton.js";
+function C({ media: s, lines: a = 3, variant: e, padding: l, className: i }) {
+  return /* @__PURE__ */ o(p, { variant: e, padding: l, className: i, "aria-hidden": "true", "data-skeleton": "card", children: [
+    s !== void 0 && /* @__PURE__ */ t(r, { shape: "block", height: s, className: "rst:mb-4" }),
+    /* @__PURE__ */ t(r, { size: "lg", width: "45%" }),
+    a > 0 && /* @__PURE__ */ t(r, { size: "md", lines: a, className: "rst:mt-2" })
+  ] });
+}
+function T({ columns: s, className: a }) {
+  const e = ["70%", "50%", "60%", "40%"];
+  return /* @__PURE__ */ t(w, { "aria-hidden": "true", className: a, "data-skeleton": "table-row", children: Array.from({ length: Math.max(1, s) }, (l, i) => /* @__PURE__ */ t(g, { children: /* @__PURE__ */ t(r, { size: "inherit", width: e[i % e.length] }) }, i)) });
+}
+function j({ size: s = "md", withName: a = !1, className: e }) {
+  return a ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:items-center rst:gap-3", e), "data-skeleton": "avatar", children: [
+    /* @__PURE__ */ t(r, { shape: "circle", size: s }),
+    /* @__PURE__ */ t(r, { size: "md", width: "8rem" })
+  ] }) : /* @__PURE__ */ t(r, { shape: "circle", size: s, className: e });
+}
+function y({ size: s = "md", semantics: a = "definition", source: e = !1, className: l }) {
+  const i = f({ size: s, colorScheme: "neutral" }), d = /* @__PURE__ */ t(r, { size: "inherit", width: "2.5em" }), c = /* @__PURE__ */ t(u, { size: "xs", children: /* @__PURE__ */ t(r, { size: "inherit", width: "9em" }) }), m = /* @__PURE__ */ t("span", { className: h, children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) });
+  return a === "standalone" ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: n("rst:flex rst:flex-col rst:gap-[3px]", l), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("span", { className: i, children: d }),
+    c,
+    e && m
+  ] }) : /* @__PURE__ */ o("div", { "aria-hidden": "true", className: n("rst:grid rst:content-start rst:gap-[3px]", l), "data-skeleton": "stat", children: [
+    /* @__PURE__ */ t("dt", { className: "rst:relative rst:col-start-1 rst:row-start-2 rst:flex", children: c }),
+    e ? /* @__PURE__ */ o("dd", { className: n("rst:m-0", i, "rst:col-start-1 rst:row-span-3 rst:row-start-1 rst:grid rst:grid-rows-subgrid"), children: [
+      /* @__PURE__ */ t("span", { className: "rst:row-start-1", children: d }),
+      /* @__PURE__ */ t("span", { className: n(h, "rst:row-start-3"), children: /* @__PURE__ */ t(r, { size: "inherit", width: "12em" }) })
+    ] }) : /* @__PURE__ */ t("dd", { className: n("rst:m-0 rst:col-start-1 rst:row-start-1", i), children: d })
+  ] });
+}
+export {
+  j as SkeletonAvatar,
+  C as SkeletonCard,
+  y as SkeletonStat,
+  T as SkeletonTableRow
+};

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

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

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

@@ -0,0 +1,37 @@
+/** Every word StepProgress shows or says. Pass any of them in `labels` to replace it. */
+export interface StepProgressLabels {
+    /** The list's name. */
+    nav: string;
+    /** Where you are: "Step 2 of 5". */
+    position: (current: number, total: number) => string;
+    /** Said after a finished step's name. */
+    done: string;
+    /** A step's number as shown. */
+    number: (step: number) => string;
+}
+export interface StepProgressProps {
+    /** Each step's name, in order. */
+    steps: string[];
+    /** The step you're on, from 1. Past the last means every step is done. */
+    current: number;
+    /**
+     * - `"stepper"`: every step named, with a numbered marker and connectors
+     *   that fill behind the current one. For a flow with room to show its map.
+     * - `"segmented"`: a segmented bar and "Step 2 of 5", for a card or a side
+     *   panel. The segments alone don't say where you are, so the words always
+     *   come with them.
+     */
+    variant?: "stepper" | "segmented";
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<StepProgressLabels>;
+    className?: string;
+}
+/**
+ * Discrete progress through named steps: a join flow, a setup, a checkout.
+ *
+ * The current step is `aria-current="step"`, each finished one says so, and
+ * a polite status says the new position ("Step 3 of 5: Shelf") when it
+ * changes.
+ */
+declare function StepProgress({ steps, current: rawCurrent, variant, labels: overrides, className }: StepProgressProps): import("react/jsx-runtime").JSX.Element | null;
+export { StepProgress };

package/dist/components/molecules/StepProgress/StepProgress.js

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

package/dist/components/organisms/Countdown/Countdown.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),r=require("../../../lib/utils.cjs"),g=require("../../../hooks/useCountdown.cjs"),l=require("./countdown-variants.cjs"),a=({value:c,label:n,size:s,variant:e})=>t.jsxs("div",{className:"rst:flex rst:flex-col rst:items-center",children:[t.jsx("span",{className:r.cn(l.countdownNumberVariants({size:s,variant:e})),children:String(c).padStart(2,"0")}),t.jsx("span",{className:r.cn(l.countdownLabelVariants({size:s}),"rst:@max-[22rem]:text-[9px]"),children:n})]}),x=b.forwardRef(({targetDate:c,title:n,size:s,variant:e="gradient",className:o,completionText:u,...d},i)=>{const{days:m,hours:j,minutes:w,seconds:f,isFinished:h}=g.useCountdown(c);return h?u?t.jsx("div",{ref:i,className:r.cn("rst:font-bold rst:w-full rst:text-center rst:text-gray-900 rst:dark:text-gray-100",o),...d,children:t.jsx("h3",{className:r.cn(l.countdownTitleVariants({size:s}),"rst:mb-0"),children:u})}):null:t.jsx("div",{ref:i,className:r.cn("rst:font-bold rst:w-full rst:text-center rst:text-gray-900 rst:dark:text-gray-100",o),...d,children:t.jsxs("div",{className:"rst:@container rst:w-full",children:[n&&t.jsx("h3",{className:r.cn(l.countdownTitleVariants({size:s})),children:n}),t.jsxs("div",{className:"rst:flex rst:justify-center rst:gap-3 rst:@[22rem]:gap-6 rst:@[35rem]:gap-8",children:[t.jsx(a,{value:m,label:"Days",size:s,variant:e}),t.jsx(a,{value:j,label:"Hours",size:s,variant:e}),t.jsx(a,{value:w,label:"Minutes",size:s,variant:e}),t.jsx(a,{value:f,label:"Seconds",size:s,variant:e})]})]})})});x.displayName="Countdown";exports.Countdown=x;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),g=require("react"),n=require("../../../lib/utils.cjs"),N=require("../../../lib/labels.cjs"),v=require("../../../hooks/useCountdown.cjs"),c=require("./countdown-variants.cjs"),l=({value:o,label:r,size:t,variant:e})=>s.jsxs("div",{className:"rst:flex rst:flex-col rst:items-center",children:[s.jsx("span",{className:n.cn(c.countdownNumberVariants({size:t,variant:e})),children:String(o).padStart(2,"0")}),s.jsx("span",{className:n.cn(c.countdownLabelVariants({size:t}),"rst:@max-[22rem]:text-[9px]"),children:r})]}),p={days:()=>"Days",hours:()=>"Hours",minutes:()=>"Minutes",seconds:()=>"Seconds"},b=g.forwardRef(({targetDate:o,title:r,size:t,variant:e="gradient",className:u,completionText:d,labels:f,...i},x)=>{const a=N.withLabels(p,f),{days:m,hours:h,minutes:j,seconds:w,isFinished:y}=v.useCountdown(o);return y?d?s.jsx("div",{ref:x,className:n.cn("rst:font-bold rst:w-full rst:text-center rst:text-gray-900 rst:dark:text-gray-100",u),...i,children:s.jsx("h3",{className:n.cn(c.countdownTitleVariants({size:t}),"rst:mb-0"),children:d})}):null:s.jsx("div",{ref:x,className:n.cn("rst:font-bold rst:w-full rst:text-center rst:text-gray-900 rst:dark:text-gray-100",u),...i,children:s.jsxs("div",{className:"rst:@container rst:w-full",children:[r&&s.jsx("h3",{className:n.cn(c.countdownTitleVariants({size:t})),children:r}),s.jsxs("div",{className:"rst:flex rst:justify-center rst:gap-3 rst:@[22rem]:gap-6 rst:@[35rem]:gap-8",children:[s.jsx(l,{value:m,label:a.days(m),size:t,variant:e}),s.jsx(l,{value:h,label:a.hours(h),size:t,variant:e}),s.jsx(l,{value:j,label:a.minutes(j),size:t,variant:e}),s.jsx(l,{value:w,label:a.seconds(w),size:t,variant:e})]})]})})});b.displayName="Countdown";exports.Countdown=b;

package/dist/components/organisms/Countdown/Countdown.d.ts

@@ -1,11 +1,24 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { countdownTitleVariants, countdownNumberVariants } from './countdown-variants';
+/**
+ * Every word Countdown shows of its own. Pass any of them in `labels` to
+ * replace it. Each takes the number beside it, for a language whose word
+ * changes with the count.
+ */
+export interface CountdownLabels {
+    days: (count: number) => string;
+    hours: (count: number) => string;
+    minutes: (count: number) => string;
+    seconds: (count: number) => string;
+}
 export interface CountdownProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof countdownTitleVariants> {
     targetDate: Date;
     title?: string;
     completionText?: string;
     variant?: VariantProps<typeof countdownNumberVariants>["variant"];
+    /** Replaces the unit words under the numbers. */
+    labels?: Partial<CountdownLabels>;
 }
 declare const Countdown: React.ForwardRefExoticComponent<CountdownProps & React.RefAttributes<HTMLDivElement>>;
 export { Countdown };