@blakesteve/roster 5.1.0 → 5.2.1

package/dist/components/molecules/Carousel/carousel-layout.js

@@ -0,0 +1,22 @@
+const a = ["base", "sm", "md", "lg", "xl"];
+function n(t) {
+  const r = Math.ceil(t) - 1;
+  return `calc((100% + ${Number.isInteger(t) ? 0 : 1} * var(--rst-cv-gutter) - ${r} * var(--rst-cv-gap)) / ${t})`;
+}
+function o(t) {
+  const r = typeof t == "number" ? { base: t } : t, s = {};
+  let c;
+  for (const e of a) {
+    const v = r[e];
+    v !== void 0 && v > 0 && (c = v), c !== void 0 && (s[`--rst-cv-w-${e}`] = n(c));
+  }
+  return s;
+}
+const l = "var(--rst-cv-w)", w = "rst:[--rst-cv-w:var(--rst-cv-w-base)] rst:sm:[--rst-cv-w:var(--rst-cv-w-sm)] rst:md:[--rst-cv-w:var(--rst-cv-w-md)] rst:lg:[--rst-cv-w:var(--rst-cv-w-lg)] rst:xl:[--rst-cv-w:var(--rst-cv-w-xl)]";
+export {
+  a as BREAKPOINTS,
+  w as FLUID_CLASSES,
+  l as FLUID_ITEM_WIDTH,
+  n as fluidItemWidth,
+  o as perViewVars
+};

package/dist/components/molecules/Carousel/carousel-math.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=6,i=1;function a(t){return Math.max(0,t.scrollWidth-t.clientWidth)}function h(t){return a(t)>i}function S(t){return t.scrollLeft>i}function L(t){return t.scrollLeft<a(t)-i}function s(t,e){const n=t.items[e];if(!n)return 0;const r=t.align==="start"?n.start-t.paddingStart:(n.start+n.end)/2-(t.paddingStart+(t.clientWidth-t.paddingStart-t.paddingEnd)/2);return Math.min(Math.max(0,r),a(t))}function u(t){const e=t.scrollLeft-i,n=t.scrollLeft+t.clientWidth+i,r=[];return t.items.forEach((l,c)=>{l.start>=e&&l.end<=n&&r.push(c)}),r}function f(t){let e=0,n=1/0;return t.items.forEach((r,l)=>{const c=Math.abs(s(t,l)-t.scrollLeft);c<n&&(e=l,n=c)}),e}function m(t){const e=u(t);return e.length?e[0]:f(t)}function x(t,e){const n=t.items.length;if(!n)return 0;const r=u(t),l=r.length?r[0]:f(t),c=Math.max(1,r.length);let o=Math.min(n-1,Math.max(0,l+e*c));for(;o>0&&o<n-1&&Math.abs(s(t,o)-t.scrollLeft)<=i;)o+=e;return s(t,o)}exports.CAROUSEL_DRAG_THRESHOLD=d;exports.CAROUSEL_TOLERANCE=i;exports.canScrollNext=L;exports.canScrollPrev=S;exports.currentIndex=m;exports.fullyVisible=u;exports.maxScroll=a;exports.nearestIndex=f;exports.overflows=h;exports.pageTarget=x;exports.snapPosition=s;

package/dist/components/molecules/Carousel/carousel-math.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Where a carousel's row is, and where it should go.
+ *
+ * Pure, and kept out of the component so paging and snapping can be tested
+ * with literal numbers. jsdom has no layout, so a test that read positions
+ * from the DOM would be testing zero; the stories measure the real thing.
+ *
+ * Every position is in the scroller's own coordinates, the space `scrollLeft`
+ * is measured in: an item's `start` is how far `scrollLeft` would have to be
+ * for the item's leading edge to sit at the scroller's leading edge.
+ */
+export interface CarouselItemBox {
+    start: number;
+    end: number;
+}
+export interface CarouselGeometry {
+    items: readonly CarouselItemBox[];
+    scrollLeft: number;
+    clientWidth: number;
+    scrollWidth: number;
+    /** `scroll-padding-inline-start`: the gutter a snapped item lines up with. */
+    paddingStart: number;
+    /** `scroll-padding-inline-end`. */
+    paddingEnd: number;
+    align: "start" | "center";
+}
+/** Movement past this, in px, makes a mouse press a drag, and its click is dropped. */
+export declare const CAROUSEL_DRAG_THRESHOLD = 6;
+/** Sub-pixel layout leaves fractions; anything closer than this is "at". */
+export declare const CAROUSEL_TOLERANCE = 1;
+export declare function maxScroll(g: CarouselGeometry): number;
+/** Whether the row is wider than its box at all. */
+export declare function overflows(g: CarouselGeometry): boolean;
+export declare function canScrollPrev(g: CarouselGeometry): boolean;
+export declare function canScrollNext(g: CarouselGeometry): boolean;
+/**
+ * The `scrollLeft` that snaps item `i` into place, clamped to what the row can
+ * reach. The last items of a row that can't align to the start land at the
+ * end, which is also where the browser's own snapping puts them.
+ */
+export declare function snapPosition(g: CarouselGeometry, i: number): number;
+/** Indices of the items wholly inside the box at the current scroll. */
+export declare function fullyVisible(g: CarouselGeometry): number[];
+/** The item whose snap position is nearest the current scroll. */
+export declare function nearestIndex(g: CarouselGeometry): number;
+/**
+ * The first item wholly in view, which is what the row reports as its index.
+ * An item wider than the box is never wholly in view, so then it is the item
+ * the row is snapped nearest to.
+ */
+export declare function currentIndex(g: CarouselGeometry): number;
+/**
+ * Where a previous or next arrow should take the row: a page, which is as many
+ * items as are wholly in view (at least one), landing on an item's snap point.
+ * Measured every time rather than a fixed pixel step, so it holds whatever the
+ * items' widths and however many are in view.
+ *
+ * Returns the target `scrollLeft`.
+ */
+export declare function pageTarget(g: CarouselGeometry, direction: 1 | -1): number;

package/dist/components/molecules/Carousel/carousel-math.js

@@ -0,0 +1,58 @@
+const E = 6, u = 1;
+function a(t) {
+  return Math.max(0, t.scrollWidth - t.clientWidth);
+}
+function L(t) {
+  return a(t) > 1;
+}
+function h(t) {
+  return t.scrollLeft > 1;
+}
+function d(t) {
+  return t.scrollLeft < a(t) - 1;
+}
+function o(t, e) {
+  const n = t.items[e];
+  if (!n) return 0;
+  const r = t.align === "start" ? n.start - t.paddingStart : (n.start + n.end) / 2 - (t.paddingStart + (t.clientWidth - t.paddingStart - t.paddingEnd) / 2);
+  return Math.min(Math.max(0, r), a(t));
+}
+function l(t) {
+  const e = t.scrollLeft - 1, n = t.scrollLeft + t.clientWidth + 1, r = [];
+  return t.items.forEach((i, s) => {
+    i.start >= e && i.end <= n && r.push(s);
+  }), r;
+}
+function f(t) {
+  let e = 0, n = 1 / 0;
+  return t.items.forEach((r, i) => {
+    const s = Math.abs(o(t, i) - t.scrollLeft);
+    s < n && (e = i, n = s);
+  }), e;
+}
+function R(t) {
+  const e = l(t);
+  return e.length ? e[0] : f(t);
+}
+function A(t, e) {
+  const n = t.items.length;
+  if (!n) return 0;
+  const r = l(t), i = r.length ? r[0] : f(t), s = Math.max(1, r.length);
+  let c = Math.min(n - 1, Math.max(0, i + e * s));
+  for (; c > 0 && c < n - 1 && Math.abs(o(t, c) - t.scrollLeft) <= 1; )
+    c += e;
+  return o(t, c);
+}
+export {
+  E as CAROUSEL_DRAG_THRESHOLD,
+  u as CAROUSEL_TOLERANCE,
+  d as canScrollNext,
+  h as canScrollPrev,
+  R as currentIndex,
+  l as fullyVisible,
+  a as maxScroll,
+  f as nearestIndex,
+  L as overflows,
+  A as pageTarget,
+  o as snapPosition
+};

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("react"),B=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),D=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),y=require("../../../node_modules/@headlessui/react/dist/components/fieldset/fieldset.cjs"),F=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/legend/legend.cjs"),e=require("../../../lib/utils.cjs"),P=require("../../atoms/Checkbox/Checkbox.cjs"),R=require("../../atoms/Eyebrow/Eyebrow.cjs"),h=require("./checkbox-group-variants.cjs"),V=t=>t.length>0&&Array.isArray(t[0].options),Z={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},_=({options:t,value:a,onChange:p,label:b,helperText:o,errorMessage:i,maxHeight:u,disabled:n=!1,variant:v,size:c="md",columns:j,colorScheme:k,className:N,optionsClassName:q,panelClassName:w,"aria-describedby":G,"aria-invalid":C,...E})=>{const l=!!i,d=u!==void 0,m=A.useId(),L=[G,o||i?m:void 0].filter(Boolean).join(" ")||void 0,I=(s,x)=>{p(x?[...a,s]:a.filter(S=>S!==s))},O=s=>r.jsxs(D.Field,{disabled:n||s.disabled,className:"rst:flex rst:items-start rst:gap-2",children:[r.jsx(P.Checkbox,{size:c??"md",colorScheme:k,checked:a.includes(s.value),onChange:x=>I(s.value,x),className:"rst:mt-0.5 rst:shrink-0"}),r.jsxs("div",{className:"rst:flex rst:min-w-0 rst:flex-col",children:[r.jsx(F.Label,{className:e.cn("rst:cursor-pointer rst:select-none rst:px-1 rst:py-0.5","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",Z[c??"md"]),children:s.label}),s.description&&r.jsx(B.Description,{className:"rst:px-1 rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",children:s.description})]})]},s.value),f=s=>r.jsx("div",{className:e.cn(h.checkboxGroupOptionsVariants({columns:j,size:c})),children:s.map(O)});return r.jsxs(y.Fieldset,{disabled:n,className:e.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",N),...E,"aria-invalid":l||C||void 0,"aria-describedby":L,children:[b&&r.jsx(g.Legend,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50",children:b}),r.jsx("div",{className:e.cn(h.checkboxGroupPanelVariants({variant:v,size:c,error:l}),d&&"rst:overflow-y-auto rst:custom-scrollbar 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",w,q),style:d?{maxHeight:u}:void 0,tabIndex:d?0:void 0,children:V(t)?t.map(s=>r.jsxs(y.Fieldset,{className:"rst:flex rst:flex-col rst:gap-2",children:[r.jsx(g.Legend,{as:R.Eyebrow,weight:"semibold",tone:"default",className:"rst:border-b rst:border-gray-200 rst:pb-1 rst:dark:border-gray-800",children:s.category}),f(s.options)]},s.category)):f(t)}),(o||i)&&r.jsx("p",{id:m,className:e.cn("rst:text-xs rst:text-left",l?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",n&&"rst:opacity-50"),children:i||o})]})};exports.CheckboxGroup=_;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),B=require("react"),D=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),R=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/fieldset/fieldset.cjs"),V=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/legend/legend.cjs"),e=require("../../../lib/utils.cjs"),p=require("../../../internal/field-invalid.cjs"),Z=require("../../atoms/Checkbox/Checkbox.cjs"),_=require("../../atoms/Eyebrow/Eyebrow.cjs"),j=require("./checkbox-group-variants.cjs"),J=t=>t.length>0&&Array.isArray(t[0].options),K={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},Q=({options:t,value:c,onChange:k,label:u,helperText:o,errorMessage:i,maxHeight:b,disabled:n=!1,variant:q,size:a="md",columns:N,colorScheme:w,className:I,optionsClassName:G,panelClassName:C,"aria-describedby":E,"aria-invalid":L,...m})=>{const l=!!i,f=p.isFieldInvalid(l,{...m,"aria-invalid":L}),F=p.withoutInvalidProps(m),d=b!==void 0,v=B.useId(),O=[E,o||i?v:void 0].filter(Boolean).join(" ")||void 0,P=(r,x)=>{k(x?[...c,r]:c.filter(A=>A!==r))},S=r=>s.jsxs(R.Field,{disabled:n||r.disabled,className:"rst:flex rst:items-start rst:gap-2",children:[s.jsx(Z.Checkbox,{size:a??"md",colorScheme:w,checked:c.includes(r.value),onChange:x=>P(r.value,x),"aria-invalid":f||void 0,className:"rst:mt-0.5 rst:shrink-0"}),s.jsxs("div",{className:"rst:flex rst:min-w-0 rst:flex-col",children:[s.jsx(V.Label,{className:e.cn("rst:cursor-pointer rst:select-none rst:px-1 rst:py-0.5","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",K[a??"md"]),children:r.label}),r.description&&s.jsx(D.Description,{className:"rst:px-1 rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",children:r.description})]})]},r.value),y=r=>s.jsx("div",{className:e.cn(j.checkboxGroupOptionsVariants({columns:N,size:a})),children:r.map(S)});return s.jsxs(g.Fieldset,{disabled:n,className:e.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",I),...F,"aria-invalid":f||void 0,"aria-describedby":O,children:[u&&s.jsx(h.Legend,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50",children:u}),s.jsx("div",{className:e.cn(j.checkboxGroupPanelVariants({variant:q,size:a,error:l}),d&&"rst:overflow-y-auto rst:custom-scrollbar 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",C,G),style:d?{maxHeight:b}:void 0,tabIndex:d?0:void 0,children:J(t)?t.map(r=>s.jsxs(g.Fieldset,{className:"rst:flex rst:flex-col rst:gap-2",children:[s.jsx(h.Legend,{as:_.Eyebrow,weight:"semibold",tone:"default",className:"rst:border-b rst:border-gray-200 rst:pb-1 rst:dark:border-gray-800",children:r.category}),y(r.options)]},r.category)):y(t)}),(o||i)&&s.jsx("p",{id:v,className:e.cn("rst:text-xs rst:text-left",l?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",n&&"rst:opacity-50"),children:i||o})]})};exports.CheckboxGroup=Q;

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

@@ -30,13 +30,15 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldS
     helperText?: string;
     /**
      * The message for an invalid selection. Implies the error state, so a caller
-     * cannot color the text red and forget to say why.
+     * can not color the text red and forget to say why.
      *
      * What it repaints depends on `variant`, and the difference is worth
      * knowing: `panel` gets an error border, `plain` has no boundary to repaint
      * and so the message *is* the whole error state. Narrower than `Input`'s or
-     * `Select`'s, which both ring the control itself — a checkbox is not the
-     * thing that is invalid here, the selection is.
+     * `Select`'s, which both ring the control itself: what is invalid here is
+     * the selection. Each checkbox is still announced as invalid, though, since
+     * a checkbox is what a screen reader focuses
+     * (`src/internal/field-invalid.ts`).
      */
     errorMessage?: string;
     /**

package/dist/components/molecules/CheckboxGroup/CheckboxGroup.js

@@ -1,68 +1,70 @@
 "use client";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import O from "react";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import P from "react";
 import { Description as _ } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as F } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Fieldset as y } from "../../../node_modules/@headlessui/react/dist/components/fieldset/fieldset.js";
-import { Label as S } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Legend as h } from "../../../node_modules/@headlessui/react/dist/components/legend/legend.js";
+import { Field as S } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Fieldset as h } from "../../../node_modules/@headlessui/react/dist/components/fieldset/fieldset.js";
+import { Label as Z } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Legend as g } from "../../../node_modules/@headlessui/react/dist/components/legend/legend.js";
 import { cn as e } from "../../../lib/utils.js";
-import { Checkbox as Z } from "../../atoms/Checkbox/Checkbox.js";
-import { Eyebrow as P } from "../../atoms/Eyebrow/Eyebrow.js";
-import { checkboxGroupPanelVariants as R, checkboxGroupOptionsVariants as V } from "./checkbox-group-variants.js";
-const W = (s) => s.length > 0 && Array.isArray(s[0].options), q = {
+import { isFieldInvalid as R, withoutInvalidProps as V } from "../../../internal/field-invalid.js";
+import { Checkbox as W } from "../../atoms/Checkbox/Checkbox.js";
+import { Eyebrow as q } from "../../atoms/Eyebrow/Eyebrow.js";
+import { checkboxGroupPanelVariants as J, checkboxGroupOptionsVariants as K } from "./checkbox-group-variants.js";
+const Q = (s) => s.length > 0 && Array.isArray(s[0].options), U = {
   sm: "rst:text-xs",
   md: "rst:text-sm",
   lg: "rst:text-base"
-}, tr = ({
+}, or = ({
   options: s,
-  value: c,
-  onChange: v,
+  value: d,
+  onChange: k,
   label: x,
-  helperText: d,
-  errorMessage: a,
+  helperText: c,
+  errorMessage: i,
   maxHeight: b,
   disabled: l = !1,
-  variant: g,
-  size: o = "md",
-  columns: k,
-  colorScheme: N,
-  className: w,
-  optionsClassName: I,
-  panelClassName: E,
-  "aria-describedby": G,
-  "aria-invalid": L,
-  ...j
+  variant: N,
+  size: a = "md",
+  columns: w,
+  colorScheme: I,
+  className: E,
+  optionsClassName: G,
+  panelClassName: L,
+  "aria-describedby": j,
+  "aria-invalid": A,
+  ...p
 }) => {
-  const n = !!a, m = b !== void 0, p = O.useId(), A = [G, d || a ? p : void 0].filter(Boolean).join(" ") || void 0, B = (r, f) => {
-    v(
-      f ? [...c, r] : c.filter((D) => D !== r)
+  const n = !!i, v = R(n, { ...p, "aria-invalid": A }), B = V(p), m = b !== void 0, u = P.useId(), C = [j, c || i ? u : void 0].filter(Boolean).join(" ") || void 0, D = (r, f) => {
+    k(
+      f ? [...d, r] : d.filter((O) => O !== r)
     );
-  }, C = (r) => /* @__PURE__ */ i(
-    F,
+  }, F = (r) => /* @__PURE__ */ o(
+    S,
     {
       disabled: l || r.disabled,
       className: "rst:flex rst:items-start rst:gap-2",
       children: [
         /* @__PURE__ */ t(
-          Z,
+          W,
           {
-            size: o ?? "md",
-            colorScheme: N,
-            checked: c.includes(r.value),
-            onChange: (f) => B(r.value, f),
+            size: a ?? "md",
+            colorScheme: I,
+            checked: d.includes(r.value),
+            onChange: (f) => D(r.value, f),
+            "aria-invalid": v || void 0,
             className: "rst:mt-0.5 rst:shrink-0"
           }
         ),
-        /* @__PURE__ */ i("div", { className: "rst:flex rst:min-w-0 rst:flex-col", children: [
+        /* @__PURE__ */ o("div", { className: "rst:flex rst:min-w-0 rst:flex-col", children: [
           /* @__PURE__ */ t(
-            S,
+            Z,
             {
               className: e(
                 "rst:cursor-pointer rst:select-none rst:px-1 rst:py-0.5",
                 "rst:text-[var(--roster-control-text)]",
                 "rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",
-                q[o ?? "md"]
+                U[a ?? "md"]
               ),
               children: r.label
             }
@@ -72,33 +74,33 @@ const W = (s) => s.length > 0 && Array.isArray(s[0].options), q = {
       ]
     },
     r.value
-  ), u = (r) => /* @__PURE__ */ t("div", { className: e(V({ columns: k, size: o })), children: r.map(C) });
-  return /* @__PURE__ */ i(
-    y,
+  ), y = (r) => /* @__PURE__ */ t("div", { className: e(K({ columns: w, size: a })), children: r.map(F) });
+  return /* @__PURE__ */ o(
+    h,
     {
       disabled: l,
       className: e(
         "rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",
-        w
+        E
       ),
-      ...j,
-      "aria-invalid": n || L || void 0,
-      "aria-describedby": A,
+      ...B,
+      "aria-invalid": v || void 0,
+      "aria-describedby": C,
       children: [
-        x && /* @__PURE__ */ t(h, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50", children: x }),
+        x && /* @__PURE__ */ t(g, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left rst:data-disabled:opacity-50", children: x }),
         /* @__PURE__ */ t(
           "div",
           {
             className: e(
-              R({ variant: g, size: o, error: n }),
+              J({ variant: N, size: a, error: n }),
               m && "rst:overflow-y-auto rst:custom-scrollbar 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",
               /* Deprecated name first, so the current one wins when both are set. */
-              E,
-              I
+              L,
+              G
             ),
             style: m ? { maxHeight: b } : void 0,
             tabIndex: m ? 0 : void 0,
-            children: W(s) ? s.map((r) => (
+            children: Q(s) ? s.map((r) => (
               /* Nested fieldset per category, so the heading is the group's
                                accessible name rather than decoration a screen reader walks
                                straight past. Nesting is valid HTML, the inner
@@ -109,32 +111,32 @@ const W = (s) => s.length > 0 && Array.isArray(s[0].options), q = {
                                `as={Eyebrow}` overrides Legend's own `as="div"` — it is
                                spread after — so these render as <span>. The registration is
                                what matters and it is unchanged. */
-              /* @__PURE__ */ i(y, { className: "rst:flex rst:flex-col rst:gap-2", children: [
+              /* @__PURE__ */ o(h, { className: "rst:flex rst:flex-col rst:gap-2", children: [
                 /* @__PURE__ */ t(
-                  h,
+                  g,
                   {
-                    as: P,
+                    as: q,
                     weight: "semibold",
                     tone: "default",
                     className: "rst:border-b rst:border-gray-200 rst:pb-1 rst:dark:border-gray-800",
                     children: r.category
                   }
                 ),
-                u(r.options)
+                y(r.options)
               ] }, r.category)
-            )) : u(s)
+            )) : y(s)
           }
         ),
-        (d || a) && /* @__PURE__ */ t(
+        (c || i) && /* @__PURE__ */ t(
           "p",
           {
-            id: p,
+            id: u,
             className: e(
               "rst:text-xs rst:text-left",
               n ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
               l && "rst:opacity-50"
             ),
-            children: a || d
+            children: i || c
           }
         )
       ]
@@ -142,5 +144,5 @@ const W = (s) => s.length > 0 && Array.isArray(s[0].options), q = {
   );
 };
 export {
-  tr as CheckboxGroup
+  or as CheckboxGroup
 };

package/dist/components/molecules/EmptyState/EmptyState.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const c=require("../../../lib/utils.cjs"),n=require("./empty-state-variants.cjs"),d=({title:a,description:r,icon:s,action:e,variant:l,className:i,...m})=>t.jsxs("div",{className:c.cn(n.emptyStateVariants({variant:l}),i),...m,children:[s&&t.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500",children:t.jsx("div",{className:"rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full",children:s})}),t.jsx("h3",{className:"rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100",children:a}),r&&t.jsx("p",{className:"rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:r}),e&&t.jsx("div",{className:"rst:mt-6",children:e})]});exports.EmptyState=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const d=require("../../../lib/utils.cjs"),x=require("./empty-state-variants.cjs"),g=({title:a,description:s,icon:r,action:e,headingLevel:l=3,variant:i,className:n,...c})=>{const m=`h${l}`;return t.jsxs("div",{className:d.cn(x.emptyStateVariants({variant:i}),n),...c,children:[r&&t.jsx("div",{className:"rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500",children:t.jsx("div",{className:"rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full",children:r})}),t.jsx(m,{className:"rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100",children:a}),s&&t.jsx("p",{className:"rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400",children:s}),e&&t.jsx("div",{className:"rst:mt-6",children:e})]})};exports.EmptyState=g;

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

@@ -6,6 +6,12 @@ export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement>, V
     description?: string;
     icon?: React.ReactNode;
     action?: React.ReactNode;
+    /**
+     * The title's heading level. `3` by default; set it to follow the heading
+     * the empty state sits under, so the page's outline doesn't skip a level.
+     * Only the element changes; its classes are the same at every level.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 }
-declare const EmptyState: ({ title, description, icon, action, variant, className, ...props }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+declare const EmptyState: ({ title, description, icon, action, headingLevel, variant, className, ...props }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
 export { EmptyState };

package/dist/components/molecules/EmptyState/EmptyState.js

@@ -1,22 +1,26 @@
 "use client";
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
 import "react";
-import { cn as c } from "../../../lib/utils.js";
-import { emptyStateVariants as g } from "./empty-state-variants.js";
-const f = ({
+import { cn as n } from "../../../lib/utils.js";
+import { emptyStateVariants as x } from "./empty-state-variants.js";
+const p = ({
   title: a,
   description: r,
   icon: s,
   action: e,
-  variant: m,
-  className: l,
-  ...d
-}) => /* @__PURE__ */ i("div", { className: c(g({ variant: m }), l), ...d, children: [
-  s && /* @__PURE__ */ t("div", { className: "rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500", children: /* @__PURE__ */ t("div", { className: "rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full", children: s }) }),
-  /* @__PURE__ */ t("h3", { className: "rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100", children: a }),
-  r && /* @__PURE__ */ t("p", { className: "rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: r }),
-  e && /* @__PURE__ */ t("div", { className: "rst:mt-6", children: e })
-] });
+  headingLevel: m = 3,
+  variant: l,
+  className: d,
+  ...i
+}) => {
+  const c = `h${m}`;
+  return /* @__PURE__ */ g("div", { className: n(x({ variant: l }), d), ...i, children: [
+    s && /* @__PURE__ */ t("div", { className: "rst:mb-4 rst:flex rst:h-12 rst:w-12 rst:items-center rst:justify-center rst:rounded-full rst:bg-gray-100 rst:text-gray-400 rst:dark:bg-gray-800 rst:dark:text-gray-500", children: /* @__PURE__ */ t("div", { className: "rst:h-6 rst:w-6 rst:[&>svg]:h-full rst:[&>svg]:w-full", children: s }) }),
+    /* @__PURE__ */ t(c, { className: "rst:text-lg rst:font-semibold rst:text-gray-900 rst:dark:text-gray-100", children: a }),
+    r && /* @__PURE__ */ t("p", { className: "rst:mt-1 rst:max-w-sm rst:text-sm rst:text-gray-500 rst:dark:text-gray-400", children: r }),
+    e && /* @__PURE__ */ t("div", { className: "rst:mt-6", children: e })
+  ] });
+};
 export {
-  f as EmptyState
+  p as EmptyState
 };

package/dist/components/molecules/RadioGroup/RadioGroup.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const u=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),m=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),p=require("../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.cjs"),r=require("../../../lib/utils.cjs"),c=require("./radio-group-variants.cjs"),L={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},D=({options:f,value:v,onChange:y,label:n,helperText:d,errorMessage:l,disabled:e=!1,size:j="md",orientation:i="vertical",colorScheme:b,className:N,optionsClassName:h,optionClassName:q,radioClassName:g,labelClassName:G,optionLabelClassName:z,descriptionClassName:R,messageClassName:S,"aria-invalid":V,...k})=>{const x=!!l,a=j??"md";return t.jsxs(p.RadioGroup,{value:v,onChange:y,disabled:e,className:r.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",N),...k,"aria-invalid":x||V||void 0,"aria-orientation":i,children:[n&&t.jsx(m.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",e&&"rst:opacity-50",G),children:n}),t.jsx("div",{className:r.cn(c.radioGroupOptionsVariants({size:a,orientation:i}),h),children:f.map(s=>t.jsxs(w.Field,{disabled:e||s.disabled,className:r.cn(c.radioOptionVariants({orientation:i,size:a}),q),children:[t.jsx(p.Radio,{value:s.value,className:({checked:o})=>r.cn(c.radioVariants({colorScheme:b,size:a,checked:o}),"rst:self-start",e||s.disabled?"rst:opacity-50 rst:cursor-not-allowed":"rst:cursor-pointer",g),children:({checked:o})=>t.jsx("span",{className:r.cn(c.radioDotVariants({size:a}),o?"rst:opacity-100":"rst:opacity-0")})}),t.jsxs("div",{className:r.cn("rst:flex rst:min-w-0 rst:flex-col",i==="vertical"&&"rst:flex-1"),children:[t.jsx(m.Label,{className:r.cn("rst:cursor-pointer rst:select-none","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",L[a],z),children:s.label}),s.description&&t.jsx(u.Description,{className:r.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",R),children:s.description})]})]},s.value))}),(d||l)&&t.jsx(u.Description,{as:"p",className:r.cn("rst:text-xs rst:text-left",x?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",e&&"rst:opacity-50",S),children:l||d})]})};exports.RadioGroup=D;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const m=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),D=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),p=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),v=require("../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.cjs"),r=require("../../../lib/utils.cjs"),f=require("../../../internal/field-invalid.cjs"),c=require("./radio-group-variants.cjs"),E={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base"},O=({options:y,value:j,onChange:b,label:n,helperText:d,errorMessage:l,disabled:e=!1,size:h="md",orientation:i="vertical",colorScheme:N,className:q,optionsClassName:g,optionClassName:G,radioClassName:w,labelClassName:z,optionLabelClassName:R,descriptionClassName:S,messageClassName:V,"aria-invalid":k,...x})=>{const u=!!l,I=f.isFieldInvalid(u,{...x,"aria-invalid":k}),L=f.withoutInvalidProps(x),a=h??"md";return t.jsxs(v.RadioGroup,{value:j,onChange:b,disabled:e,className:r.cn("rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",q),...L,"aria-invalid":I||void 0,"aria-orientation":i,children:[n&&t.jsx(p.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",e&&"rst:opacity-50",z),children:n}),t.jsx("div",{className:r.cn(c.radioGroupOptionsVariants({size:a,orientation:i}),g),children:y.map(s=>t.jsxs(D.Field,{disabled:e||s.disabled,className:r.cn(c.radioOptionVariants({orientation:i,size:a}),G),children:[t.jsx(v.Radio,{value:s.value,className:({checked:o})=>r.cn(c.radioVariants({colorScheme:N,size:a,checked:o}),"rst:self-start",e||s.disabled?"rst:opacity-50 rst:cursor-not-allowed":"rst:cursor-pointer",w),children:({checked:o})=>t.jsx("span",{className:r.cn(c.radioDotVariants({size:a}),o?"rst:opacity-100":"rst:opacity-0")})}),t.jsxs("div",{className:r.cn("rst:flex rst:min-w-0 rst:flex-col",i==="vertical"&&"rst:flex-1"),children:[t.jsx(p.Label,{className:r.cn("rst:cursor-pointer rst:select-none","rst:text-[var(--roster-control-text)]","rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",E[a],R),children:s.label}),s.description&&t.jsx(m.Description,{className:r.cn("rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",S),children:s.description})]})]},s.value))}),(d||l)&&t.jsx(m.Description,{as:"p",className:r.cn("rst:text-xs rst:text-left",u?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400",e&&"rst:opacity-50",V),children:l||d})]})};exports.RadioGroup=O;

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

@@ -45,9 +45,10 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * `aria-describedby` is one of the props Headless UI controls on a
      * `RadioGroup`, and a controlled prop is spread last. Passing one is
      * therefore a no-op rather than an addition. `aria-invalid` is not one of
-     * Headless UI's, so a caller's survives its spread — and is then outranked
-     * by this component's own error state, which is a different thing from the
-     * token-list merge `CheckboxGroup` does for `aria-describedby`.
+     * Headless UI's: a caller's is read by the rule every Roster field follows
+     * (`src/internal/field-invalid.ts`), so any value but "false" marks the
+     * group invalid, as `"true"`, and an error message marks it invalid whatever
+     * the caller passed.
      */
     errorMessage?: string;
     /** Disables every option, and dims the label and helper text with them. */