@blakesteve/roster 5.16.0 → 5.18.0

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

@@ -1,20 +1,22 @@
 "use client";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, 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 = {
+import { stepMarkerClass as N } from "../../../internal/step-marker.js";
+import { StepCheck as v } from "../../../internal/step-check.js";
+const w = {
   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: [
+};
+function P({ steps: s, current: c, variant: h = "stepper", labels: x, className: f }) {
+  const o = b(w, x), e = s.length;
+  if (e === 0) return null;
+  const t = Math.min(Math.max(1, Math.floor(Number.isFinite(c) ? c : 1)), e + 1), m = t > e, p = m ? o.position(e, e) : o.position(t, e), g = m ? p : `${p}: ${s[t - 1]}`;
+  return h === "segmented" ? /* @__PURE__ */ i("div", { className: d("rst:font-ui rst:w-full rst:min-w-0", f), "data-step-progress": "segmented", children: [
+    /* @__PURE__ */ i("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] })
     ] }),
@@ -22,69 +24,54 @@ function L({ steps: s, current: c, variant: h = "stepper", labels: x, className:
       y,
       {
         variant: "segmented",
-        segments: s.map((u, i) => i + 1 < t ? "done" : i + 1 === t ? "current" : "remaining"),
+        segments: s.map((u, l) => l + 1 < t ? "done" : l + 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(
+    /* @__PURE__ */ r("span", { role: "status", className: "rst:sr-only", "data-step-status": "", children: g })
+  ] }) : /* @__PURE__ */ i("div", { className: d("rst:font-ui rst:w-full", f), "data-step-progress": "stepper", children: [
+    /* @__PURE__ */ r("ol", { "aria-label": o.nav, className: "rst:m-0 rst:flex rst:w-full rst:list-none rst:p-0", children: s.map((u, l) => {
+      const a = l + 1, n = a < t ? "done" : a === t ? "current" : "upcoming";
+      return /* @__PURE__ */ i(
         "li",
         {
-          "aria-current": e === "current" ? "step" : void 0,
+          "aria-current": n === "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,
+          "data-step": n,
           children: [
-            i > 0 && /* @__PURE__ */ r(
+            l > 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"
+                  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-marker": "",
-                children: e === "done" ? /* @__PURE__ */ r(v, {}) : n.number(o)
+                "data-step-connector": a <= t ? "filled" : "empty"
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ r("span", { "aria-hidden": "true", className: N(n), "data-step-marker": "", children: n === "done" ? /* @__PURE__ */ r(v, {}) : o.number(a) }),
+            /* @__PURE__ */ i(
               "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"
+                  n === "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}` })
+                  n === "done" && /* @__PURE__ */ r("span", { className: "rst:sr-only", children: `, ${o.done}` })
                 ]
               }
             )
           ]
         },
-        `${o}-${u}`
+        `${a}-${u}`
       );
     }) }),
-    /* @__PURE__ */ r("span", { role: "status", className: "rst:sr-only", "data-step-status": "", children: f })
+    /* @__PURE__ */ r("span", { role: "status", className: "rst:sr-only", "data-step-status": "", children: g })
   ] });
 }
 export {
-  L as StepProgress
+  P as StepProgress
 };

package/dist/components/molecules/Timeline/Timeline.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),C=require("react"),s=require("../../../lib/utils.cjs"),R=require("../../../lib/labels.cjs"),z=require("../../../internal/step-marker.cjs"),L=require("../../../internal/step-check.cjs"),E={done:"done",number:e=>String(e),now:"Now"},F={whenActions:{grid:"rst:@[40rem]:grid-cols-[fit-content(12rem)_minmax(2rem,max-content)_minmax(0,1fr)_auto]",when:"rst:@[40rem]:col-start-1",marker:"rst:@[40rem]:col-start-2",body:"rst:@[40rem]:col-start-3",actions:"rst:@[40rem]:col-start-4"},when:{grid:"rst:@[40rem]:grid-cols-[fit-content(12rem)_minmax(2rem,max-content)_minmax(0,1fr)]",when:"rst:@[40rem]:col-start-1",marker:"rst:@[40rem]:col-start-2",body:"rst:@[40rem]:col-start-3",actions:""},actions:{grid:"rst:@[40rem]:grid-cols-[minmax(2rem,max-content)_minmax(0,1fr)_auto]",when:"",marker:"rst:@[40rem]:col-start-1",body:"rst:@[40rem]:col-start-2",actions:"rst:@[40rem]:col-start-3"},neither:{grid:"",when:"",marker:"rst:@[40rem]:col-start-1",body:"rst:@[40rem]:col-start-2",actions:""}};function h({reached:e,className:x}){return r.jsx("span",{"aria-hidden":"true","data-timeline-rail":e?"done":"ahead",className:s.cn("rst:absolute rst:left-1/2 rst:w-0.5 rst:-translate-x-1/2",e?"rst:bg-(--roster-timeline-rail-done) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]":"rst:bg-(--roster-timeline-rail) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]",x)})}function G({steps:e,label:x,"aria-labelledby":w,current:b=0,nowBefore:i,labels:p,className:j,stepClassName:N,whenClassName:y,markerClassName:v,titleClassName:k,contentClassName:_,actionsClassName:T,nowClassName:q}){const u=R.withLabels(E,p),m=e.length;if(m===0)return null;const l=Math.min(Math.max(0,Math.floor(Number.isFinite(b)?b:0)),m+1),d=e.some(t=>t.when!=null),g=e.some(t=>t.actions!=null),a=F[d&&g?"whenActions":d?"when":g?"actions":"neither"],M=i!=null&&i>=1&&i<=m?i:void 0,S=t=>r.jsxs("li",{"aria-hidden":"true","data-timeline-now":"",className:s.cn("rst:col-span-full rst:grid rst:grid-cols-subgrid",q),children:[r.jsx("span",{className:s.cn("rst:relative rst:col-start-1 rst:row-start-1 rst:row-end-3 rst:@[40rem]:row-end-2",a.marker),children:t>1&&r.jsx(h,{reached:t<=l,className:"rst:inset-y-0"})}),r.jsx("span",{className:s.cn("rst:col-start-2 rst:row-start-1 rst:text-xs rst:font-semibold rst:uppercase rst:tracking-wider rst:text-(--roster-timeline-now) rst:forced-colors:text-[CanvasText]",d?"rst:@[40rem]:col-start-1 rst:@[40rem]:self-center":a.body),children:u.now}),r.jsx("span",{className:s.cn("rst:col-start-1 rst:col-end-[-1] rst:row-start-2 rst:my-2 rst:h-0.5 rst:bg-(--roster-timeline-now) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[CanvasText]",d&&"rst:@[40rem]:col-start-2 rst:@[40rem]:row-start-1 rst:@[40rem]:self-center")})]},"now");return r.jsx("div",{className:s.cn("rst:font-ui rst:@container rst:w-full rst:min-w-0",j),"data-timeline":"",children:r.jsx("ol",{"aria-label":w?void 0:x,"aria-labelledby":w,className:s.cn("rst:m-0 rst:list-none rst:p-0 rst:grid rst:grid-cols-[minmax(2rem,max-content)_minmax(0,1fr)] rst:gap-x-3 rst:@[40rem]:gap-x-4",a.grid),children:e.map((t,A)=>{const n=A+1,o=n<l?"done":n===l?"current":"upcoming",c=n===m,f=c?"":"rst:pb-6";return r.jsxs(C.Fragment,{children:[M===n&&S(n),r.jsxs("li",{"aria-current":o==="current"?"step":void 0,"data-step":o,className:s.cn("rst:col-span-full rst:grid rst:grid-cols-subgrid",N),children:[t.when!=null&&r.jsx("div",{"data-timeline-when":"",className:s.cn("rst:col-start-2 rst:row-start-1 rst:min-w-0 rst:pt-1.5 rst:text-sm rst:text-gray-600 rst:dark:text-gray-400","rst:@[40rem]:row-start-1",a.when,c?"":"rst:@[40rem]:pb-6",y),children:t.when}),r.jsxs("div",{"aria-hidden":"true","data-timeline-marker":"",className:s.cn("rst:relative rst:col-start-1 rst:row-start-1 rst:row-end-3 rst:flex rst:justify-center rst:@[40rem]:row-end-2",a.marker,f,v),children:[n>1&&r.jsx(h,{reached:n<=l,className:"rst:top-0 rst:h-4"}),!c&&r.jsx(h,{reached:n+1<=l,className:"rst:top-4 rst:bottom-0"}),t.marker==null?r.jsx("span",{className:z.stepMarkerClass(o),children:o==="done"?r.jsx(L.StepCheck,{}):u.number(n)}):t.marker==="hollow"?r.jsx("span",{className:"rst:relative rst:z-10 rst:block rst:size-8 rst:rounded-full rst:border-2 rst:border-(--roster-timeline-rail) rst:bg-[var(--roster-card-bg)] rst:forced-colors:border-[GrayText]","data-timeline-hollow":""}):r.jsx("span",{className:"rst:relative rst:z-10",children:t.marker})]}),r.jsxs("div",{className:s.cn("rst:col-start-2 rst:row-start-2 rst:min-w-0 rst:@[40rem]:contents",f),children:[r.jsxs("div",{"data-timeline-body":"",className:s.cn("rst:min-w-0 rst:@[40rem]:row-start-1 rst:@[40rem]:pt-1.5",a.body,t.when==null&&"rst:pt-1.5",c?"":"rst:@[40rem]:pb-6"),children:[r.jsxs("div",{className:s.cn("rst:text-sm rst:text-[var(--roster-control-text)]",o==="current"?"rst:font-semibold":"rst:font-medium",k),children:[t.title,o==="done"&&r.jsx("span",{className:"rst:sr-only",children:`, ${u.done}`})]}),t.content!=null&&r.jsx("div",{className:s.cn("rst:mt-0.5 rst:text-sm rst:text-gray-600 rst:dark:text-gray-400",_),children:t.content})]}),t.actions!=null&&r.jsx("div",{"data-timeline-actions":"",className:s.cn("rst:mt-2 rst:flex rst:flex-wrap rst:gap-2 rst:@[40rem]:row-start-1 rst:@[40rem]:mt-0 rst:@[40rem]:justify-self-end rst:@[40rem]:justify-end",a.actions,c?"":"rst:@[40rem]:pb-6",T),children:t.actions})]})]})]},t.id)})})})}exports.Timeline=G;

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

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+/** Every word Timeline shows or says. Pass any of them in `labels` to replace it. */
+export interface TimelineLabels {
+    /** Said after a finished step's title. */
+    done: string;
+    /** A step's number, as its default marker shows it. */
+    number: (step: number) => string;
+    /** The word on the "now" divider. Shown only: the divider is hidden from assistive technology. */
+    now: string;
+}
+export type TimelineStep = {
+    /** Unique among the steps, and stable: React's key. */
+    id: string;
+    /** The step's name, at the top of its body. */
+    title: React.ReactNode;
+    /** The leading column: a date, a week, a time. */
+    when?: React.ReactNode;
+    /** Anything under the title: a description, facts, a badge. */
+    content?: React.ReactNode;
+    /** The trailing column: buttons and links of your own. */
+    actions?: React.ReactNode;
+    /**
+     * What sits on the line in place of the numbered marker: a mark of your
+     * own, or `"hollow"` for an empty ring, for a step with nothing in it yet.
+     * Decoration: hidden from assistive technology. A mark of your own needs a
+     * background, or the line shows through it.
+     */
+    marker?: React.ReactNode | "hollow";
+};
+export interface TimelineProps {
+    steps: TimelineStep[];
+    /** The list's name. Use `aria-labelledby` instead when a heading on the page names it. */
+    label?: string;
+    "aria-labelledby"?: string;
+    /**
+     * The step you're on, from 1: the ones before it are done, the ones after
+     * it upcoming. 0, the default, for none started; past the last for every
+     * step done.
+     */
+    current?: number;
+    /**
+     * Draws the "now" divider just before this step, from 1: where today falls,
+     * which needn't be beside the current step. Leave it out for none.
+     */
+    nowBefore?: number;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<TimelineLabels>;
+    className?: string;
+    /** Classes for every step, the `<li>`. It carries `data-step`: `done`, `current` or `upcoming`. */
+    stepClassName?: string;
+    /** Classes for every step's leading column. */
+    whenClassName?: string;
+    /** Classes for what holds every step's marker, on the line. */
+    markerClassName?: string;
+    /** Classes for every step's title. */
+    titleClassName?: string;
+    /** Classes for every step's `content`. */
+    contentClassName?: string;
+    /** Classes for every step's trailing column. */
+    actionsClassName?: string;
+    /** Classes for the "now" divider's row. */
+    nowClassName?: string;
+}
+/**
+ * Steps down the page, each with its own content: a schedule, a history, an
+ * onboarding list. Each step has a title, any content under it, a leading
+ * "when" column, a trailing column for actions, and a marker on a line that
+ * runs through them all.
+ *
+ * Its own component rather than `StepProgress orientation="vertical"`, with
+ * the same markers. A timeline isn't always progress: a schedule doesn't
+ * advance while you watch it, so there's no "Step 3 of 5" status here, and
+ * where today falls (the "now" divider) needn't be the current step. And each
+ * step carries content, where `StepProgress` takes names.
+ *
+ * An ordered list with a name. The current step is `aria-current="step"`,
+ * each finished one says "done" after its title, and the markers, the line
+ * and the "now" divider are hidden from assistive technology. It takes no
+ * keys: buttons and links inside a step are reached in reading order, which
+ * is the order they're shown in.
+ *
+ * Below 40rem of its own width the leading column moves above the body and
+ * the actions under it.
+ */
+declare function Timeline({ steps, label, "aria-labelledby": labelledBy, current: rawCurrent, nowBefore, labels: overrides, className, stepClassName, whenClassName, markerClassName, titleClassName, contentClassName, actionsClassName, nowClassName, }: TimelineProps): import("react/jsx-runtime").JSX.Element | null;
+export { Timeline };

package/dist/components/molecules/Timeline/Timeline.js

@@ -0,0 +1,217 @@
+"use client";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import R from "react";
+import { cn as s } from "../../../lib/utils.js";
+import { withLabels as S } from "../../../lib/labels.js";
+import { stepMarkerClass as E } from "../../../internal/step-marker.js";
+import { StepCheck as F } from "../../../internal/step-check.js";
+const G = {
+  done: "done",
+  number: (e) => String(e),
+  now: "Now"
+}, W = {
+  whenActions: {
+    grid: "rst:@[40rem]:grid-cols-[fit-content(12rem)_minmax(2rem,max-content)_minmax(0,1fr)_auto]",
+    when: "rst:@[40rem]:col-start-1",
+    marker: "rst:@[40rem]:col-start-2",
+    body: "rst:@[40rem]:col-start-3",
+    actions: "rst:@[40rem]:col-start-4"
+  },
+  when: {
+    grid: "rst:@[40rem]:grid-cols-[fit-content(12rem)_minmax(2rem,max-content)_minmax(0,1fr)]",
+    when: "rst:@[40rem]:col-start-1",
+    marker: "rst:@[40rem]:col-start-2",
+    body: "rst:@[40rem]:col-start-3",
+    actions: ""
+  },
+  actions: {
+    grid: "rst:@[40rem]:grid-cols-[minmax(2rem,max-content)_minmax(0,1fr)_auto]",
+    when: "",
+    marker: "rst:@[40rem]:col-start-1",
+    body: "rst:@[40rem]:col-start-2",
+    actions: "rst:@[40rem]:col-start-3"
+  },
+  neither: {
+    grid: "",
+    when: "",
+    marker: "rst:@[40rem]:col-start-1",
+    body: "rst:@[40rem]:col-start-2",
+    actions: ""
+  }
+};
+function f({ reached: e, className: u }) {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-timeline-rail": e ? "done" : "ahead",
+      className: s(
+        "rst:absolute rst:left-1/2 rst:w-0.5 rst:-translate-x-1/2",
+        e ? "rst:bg-(--roster-timeline-rail-done) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]" : "rst:bg-(--roster-timeline-rail) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[GrayText]",
+        u
+      )
+    }
+  );
+}
+function K({
+  steps: e,
+  label: u,
+  "aria-labelledby": x,
+  current: b = 0,
+  nowBefore: m,
+  labels: N,
+  className: y,
+  stepClassName: v,
+  whenClassName: k,
+  markerClassName: _,
+  titleClassName: j,
+  contentClassName: T,
+  actionsClassName: A,
+  nowClassName: M
+}) {
+  const w = S(G, N), d = e.length;
+  if (d === 0) return null;
+  const i = Math.min(Math.max(0, Math.floor(Number.isFinite(b) ? b : 0)), d + 1), h = e.some((r) => r.when != null), g = e.some((r) => r.actions != null), n = W[h && g ? "whenActions" : h ? "when" : g ? "actions" : "neither"], z = m != null && m >= 1 && m <= d ? m : void 0, C = (r) => /* @__PURE__ */ o(
+    "li",
+    {
+      "aria-hidden": "true",
+      "data-timeline-now": "",
+      className: s("rst:col-span-full rst:grid rst:grid-cols-subgrid", M),
+      children: [
+        /* @__PURE__ */ t("span", { className: s("rst:relative rst:col-start-1 rst:row-start-1 rst:row-end-3 rst:@[40rem]:row-end-2", n.marker), children: r > 1 && /* @__PURE__ */ t(f, { reached: r <= i, className: "rst:inset-y-0" }) }),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: s(
+              "rst:col-start-2 rst:row-start-1 rst:text-xs rst:font-semibold rst:uppercase rst:tracking-wider rst:text-(--roster-timeline-now) rst:forced-colors:text-[CanvasText]",
+              h ? "rst:@[40rem]:col-start-1 rst:@[40rem]:self-center" : n.body
+            ),
+            children: w.now
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: s(
+              "rst:col-start-1 rst:col-end-[-1] rst:row-start-2 rst:my-2 rst:h-0.5 rst:bg-(--roster-timeline-now) rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[CanvasText]",
+              h && "rst:@[40rem]:col-start-2 rst:@[40rem]:row-start-1 rst:@[40rem]:self-center"
+            )
+          }
+        )
+      ]
+    },
+    "now"
+  );
+  return /* @__PURE__ */ t("div", { className: s("rst:font-ui rst:@container rst:w-full rst:min-w-0", y), "data-timeline": "", children: /* @__PURE__ */ t(
+    "ol",
+    {
+      "aria-label": x ? void 0 : u,
+      "aria-labelledby": x,
+      className: s(
+        "rst:m-0 rst:list-none rst:p-0 rst:grid rst:grid-cols-[minmax(2rem,max-content)_minmax(0,1fr)] rst:gap-x-3 rst:@[40rem]:gap-x-4",
+        n.grid
+      ),
+      children: e.map((r, L) => {
+        const a = L + 1, l = a < i ? "done" : a === i ? "current" : "upcoming", c = a === d, p = c ? "" : "rst:pb-6";
+        return /* @__PURE__ */ o(R.Fragment, { children: [
+          z === a && C(a),
+          /* @__PURE__ */ o(
+            "li",
+            {
+              "aria-current": l === "current" ? "step" : void 0,
+              "data-step": l,
+              className: s("rst:col-span-full rst:grid rst:grid-cols-subgrid", v),
+              children: [
+                r.when != null && /* @__PURE__ */ t(
+                  "div",
+                  {
+                    "data-timeline-when": "",
+                    className: s(
+                      "rst:col-start-2 rst:row-start-1 rst:min-w-0 rst:pt-1.5 rst:text-sm rst:text-gray-600 rst:dark:text-gray-400",
+                      "rst:@[40rem]:row-start-1",
+                      n.when,
+                      c ? "" : "rst:@[40rem]:pb-6",
+                      k
+                    ),
+                    children: r.when
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    "data-timeline-marker": "",
+                    className: s(
+                      "rst:relative rst:col-start-1 rst:row-start-1 rst:row-end-3 rst:flex rst:justify-center rst:@[40rem]:row-end-2",
+                      n.marker,
+                      p,
+                      _
+                    ),
+                    children: [
+                      a > 1 && /* @__PURE__ */ t(f, { reached: a <= i, className: "rst:top-0 rst:h-4" }),
+                      !c && /* @__PURE__ */ t(f, { reached: a + 1 <= i, className: "rst:top-4 rst:bottom-0" }),
+                      r.marker == null ? /* @__PURE__ */ t("span", { className: E(l), children: l === "done" ? /* @__PURE__ */ t(F, {}) : w.number(a) }) : r.marker === "hollow" ? /* @__PURE__ */ t(
+                        "span",
+                        {
+                          className: "rst:relative rst:z-10 rst:block rst:size-8 rst:rounded-full rst:border-2 rst:border-(--roster-timeline-rail) rst:bg-[var(--roster-card-bg)] rst:forced-colors:border-[GrayText]",
+                          "data-timeline-hollow": ""
+                        }
+                      ) : /* @__PURE__ */ t("span", { className: "rst:relative rst:z-10", children: r.marker })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ o("div", { className: s("rst:col-start-2 rst:row-start-2 rst:min-w-0 rst:@[40rem]:contents", p), children: [
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      "data-timeline-body": "",
+                      className: s(
+                        "rst:min-w-0 rst:@[40rem]:row-start-1 rst:@[40rem]:pt-1.5",
+                        n.body,
+                        r.when == null && "rst:pt-1.5",
+                        c ? "" : "rst:@[40rem]:pb-6"
+                      ),
+                      children: [
+                        /* @__PURE__ */ o(
+                          "div",
+                          {
+                            className: s(
+                              "rst:text-sm rst:text-[var(--roster-control-text)]",
+                              l === "current" ? "rst:font-semibold" : "rst:font-medium",
+                              j
+                            ),
+                            children: [
+                              r.title,
+                              l === "done" && /* @__PURE__ */ t("span", { className: "rst:sr-only", children: `, ${w.done}` })
+                            ]
+                          }
+                        ),
+                        r.content != null && /* @__PURE__ */ t("div", { className: s("rst:mt-0.5 rst:text-sm rst:text-gray-600 rst:dark:text-gray-400", T), children: r.content })
+                      ]
+                    }
+                  ),
+                  r.actions != null && /* @__PURE__ */ t(
+                    "div",
+                    {
+                      "data-timeline-actions": "",
+                      className: s(
+                        "rst:mt-2 rst:flex rst:flex-wrap rst:gap-2 rst:@[40rem]:row-start-1 rst:@[40rem]:mt-0 rst:@[40rem]:justify-self-end rst:@[40rem]:justify-end",
+                        n.actions,
+                        c ? "" : "rst:@[40rem]:pb-6",
+                        A
+                      ),
+                      children: r.actions
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] }, r.id);
+      })
+    }
+  ) });
+}
+export {
+  K as Timeline
+};

package/dist/components/organisms/Dialog/Dialog.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),w=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),o=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),N=require("../../../lib/labels.cjs"),_=require("../../../internal/page-inert.cjs"),q=require("../../../internal/key-focus.cjs"),a=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),d=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),F=o.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),T=o.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),D=o.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),L=o.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),V={close:"Close dialog"},z=({isOpen:u,onClose:i,title:m,description:n,size:x,variant:l,status:b,children:g,className:f,onAfterClose:v,labels:p})=>{q.useKeyFocus();const y=N.withLabels(V,p),[h,k]=t.useState(!1);t.useLayoutEffect(()=>{k(!0)},[]);const e=u&&h,c=t.useRef(null);return t.useLayoutEffect(()=>{if(e)return _.lockPage(c.current)},[e]),r.jsxs(r.Fragment,{children:[e&&r.jsx("span",{ref:c,hidden:!0}),r.jsxs(a.Dialog,{open:e,as:"div",className:"rst:font-ui rst:relative rst:z-50",onClose:i,children:[r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(a.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",l==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(d.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",afterLeave:v,children:r.jsxs(a.DialogPanel,{className:s.cn(F({size:x,variant:l,status:b}),f),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(a.DialogTitle,{as:"h2",className:s.cn(T()),children:m}),n&&r.jsx("p",{className:s.cn(D()),children:n})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:i,className:s.cn(L()),"aria-label":y.close,children:r.jsx(j.FontAwesomeIcon,{icon:w.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:g})]})})})})]})]})};exports.Dialog=z;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),D=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),R=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),i=require("../../../node_modules/class-variance-authority/dist/index.cjs"),s=require("../../../lib/utils.cjs"),V=require("../../../lib/labels.cjs"),E=require("../../../internal/page-inert.cjs"),S=require("../../../internal/leave-watchdog.cjs"),z=require("../../../internal/key-focus.cjs"),e=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),c=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),C=i.cva("rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",{variants:{size:{xs:"rst:max-w-xs",sm:"rst:max-w-sm",md:"rst:max-w-md",lg:"rst:max-w-lg",xl:"rst:max-w-xl","2xl":"rst:max-w-2xl","3xl":"rst:max-w-3xl",full:"rst:max-w-[95vw] rst:m-4"},variant:{white:"rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",slate:"rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",primary:"rst:bg-primary-700 rst:border-primary-600 rst:text-primary-700-ink rst:dark:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",glass:"rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white"},status:{default:"",destructive:"rst:border-t-4 rst:border-t-error-500",success:"rst:border-t-4 rst:border-t-success-500"}},defaultVariants:{size:"md",variant:"white",status:"default"}}),p=i.cva("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"),y=i.cva("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"),P=i.cva("rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"),A={close:"Close dialog"},M=200,B=({isOpen:h,onClose:d,title:u,description:o,size:k,variant:f,status:j,children:x,className:m,onAfterClose:w,labels:N,layout:F="default",titleHidden:v=!1})=>{z.useKeyFocus();const _=F==="fullscreen",q=V.withLabels(A,N),[T,L]=t.useState(!1);t.useLayoutEffect(()=>{L(!0)},[]);const a=h&&T,g=t.useRef(null),n=t.useRef(null),l=S.useLeaveWatchdog(g,n,a,M,w),b=t.useRef(null);return t.useLayoutEffect(()=>{if(a)return E.lockPage(b.current)},[a]),r.jsxs(r.Fragment,{children:[a&&r.jsx("span",{ref:b,hidden:!0}),r.jsxs(e.Dialog,{ref:g,open:a,as:"div",className:"rst:font-ui rst:fixed rst:inset-0 rst:z-50",onClose:d,children:[r.jsx(c.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:r.jsx(e.DialogBackdrop,{className:s.cn("rst:fixed rst:inset-0 rst:transition-opacity",f==="glass"?"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_40%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_60%,transparent))]":"rst:bg-[var(--roster-backdrop,color-mix(in_oklab,oklch(20.8%_0.042_265.755)_60%,transparent))] rst:dark:bg-[var(--roster-backdrop,color-mix(in_oklab,var(--roster-black,#1e1c1a)_80%,transparent))] rst:backdrop-blur-backdrop")})}),_?r.jsx(c.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0",enterTo:"rst:opacity-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",afterLeave:l.afterLeave,children:r.jsxs(e.DialogPanel,{ref:n,className:s.cn("rst:fixed rst:inset-0 rst:overflow-y-auto",m),children:[r.jsx(e.DialogTitle,{as:"h2",className:v?"rst:sr-only":s.cn(p()),children:u}),o&&r.jsx("p",{className:s.cn(y()),children:o}),x]})}):r.jsx("div",{className:"rst:fixed rst:inset-0 rst:overflow-y-auto",children:r.jsx("div",{className:"rst:flex rst:min-h-full rst:items-center rst:justify-center rst:p-4 rst:text-center",children:r.jsx(c.TransitionChild,{as:t.Fragment,enter:"rst:ease-out rst:duration-300",enterFrom:"rst:opacity-0 rst:scale-95",enterTo:"rst:opacity-100 rst:scale-100",leave:"rst:ease-in rst:duration-200",leaveFrom:"rst:opacity-100 rst:scale-100",leaveTo:"rst:opacity-0 rst:scale-95",afterLeave:l.afterLeave,children:r.jsxs(e.DialogPanel,{ref:n,className:s.cn(C({size:k,variant:f,status:j}),m),children:[r.jsxs("div",{className:"rst:flex rst:items-start rst:justify-between",children:[r.jsxs("div",{children:[r.jsx(e.DialogTitle,{as:"h2",className:v?"rst:sr-only":s.cn(p()),children:u}),o&&r.jsx("p",{className:s.cn(y()),children:o})]}),r.jsx("div",{className:"rst:ml-4 rst:flex rst:shrink-0",children:r.jsx("button",{type:"button",onClick:d,className:s.cn(P()),"aria-label":q.close,children:r.jsx(D.FontAwesomeIcon,{icon:R.faXmark,className:"rst:h-5 rst:w-5"})})})]}),r.jsx("div",{className:"rst:mt-6",children:x})]})})})})]},l.key)]})};exports.Dialog=B;

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

@@ -18,15 +18,67 @@ export interface DialogProps extends VariantProps<typeof dialogVariants> {
     children: ReactNode;
     className?: string;
     /**
-     * Called once the dialog has finished closing, after its leave transition.
-     * The place to move focus somewhere other than where it was before the
-     * dialog opened, for instance when that element no longer exists. Not
-     * called for a close cut short by reopening, nor when the dialog unmounts
-     * while open.
+     * Called once the dialog has finished closing, after its leave transition,
+     * once for each close, a close during the entrance included. The place to
+     * move focus somewhere other than where it was before the dialog opened,
+     * for instance when that element no longer exists. Not called for a close
+     * cut short by reopening, nor when the dialog unmounts while open.
      */
     onAfterClose?: () => void;
     /** The component's own words, replaced; any left out stay English. */
     labels?: Partial<DialogLabels>;
+    /**
+     * `"default"`: a panel, sized by `size` and styled by `variant` and
+     * `status`, with Roster's header (the title, the description and a close
+     * button).
+     *
+     * `"fullscreen"`: the dialog fills the viewport, with no box, no padding,
+     * and no header or close button of Roster's: everything inside is yours, a
+     * close control included. For a photo viewer or a full-screen card. The
+     * scrim stays (`--roster-backdrop` retints it), `className` lands on the
+     * full-viewport panel, and it fades in and out without scaling. `size` and
+     * `status` don't apply; `variant` still picks the scrim. The whole viewport
+     * is the panel, so a click anywhere in it doesn't close the dialog: give it
+     * your own close, and use Headless UI's `autoFocus` on the element to focus
+     * first.
+     *
+     * Either way, focus moves in on open, Tab stays inside, Escape closes, focus
+     * goes back to what opened it, and the page behind is inert.
+     */
+    layout?: "default" | "fullscreen";
+    /**
+     * Keep the title as the dialog's accessible name, said by a screen reader
+     * when the dialog opens, without showing it: for a dialog whose content
+     * names itself, like a photo viewer. Works with either layout.
+     */
+    titleHidden?: boolean;
 }
-declare const Dialog: ({ isOpen, onClose, title, description, size, variant, status, children, className, onAfterClose, labels, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A modal dialog. Focus moves in when it opens, Tab stays inside, Escape and
+ * the close button close it, focus goes back to what opened it, and the page
+ * behind is inert and hidden from assistive technology.
+ *
+ * `layout="fullscreen"` with `titleHidden` is a bare dialog over the whole
+ * viewport, for a photo viewer or a full-screen card: the content and its
+ * controls are yours, and Roster keeps the focus, the keys and the page
+ * behind.
+ *
+ * ```tsx
+ * <Dialog isOpen={open} onClose={close} title="Photos" titleHidden layout="fullscreen">
+ *   <div style={{ height: "100%", display: "grid", placeItems: "center" }}>
+ *     <img src={photo.src} alt={photo.alt} />
+ *     <p>{index + 1} of {photos.length}: {photo.caption}</p>
+ *     <Button onClick={previous}>Previous</Button>
+ *     <Button onClick={next}>Next</Button>
+ *     <Button autoFocus onClick={close}>Close</Button>
+ *   </div>
+ * </Dialog>
+ * ```
+ *
+ * **Where focus starts.** On the element marked `data-autofocus`, or a Roster
+ * `Button` given `autoFocus` (Headless UI reads both); with neither, on the
+ * dialog itself. In a photo viewer that's usually Close, or the photo's own
+ * region if it takes focus.
+ */
+declare const Dialog: ({ isOpen, onClose, title, description, size, variant, status, children, className, onAfterClose, labels, layout, titleHidden, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export { Dialog };