@blakesteve/roster 5.2.0 → 5.2.1

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/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. */

package/dist/components/molecules/RadioGroup/RadioGroup.js

@@ -1,55 +1,56 @@
 "use client";
 import { jsxs as c, jsx as s } from "react/jsx-runtime";
 import "react";
-import { Description as x } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as R } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as p } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { RadioGroup as S, Radio as j } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
+import { Description as p } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as S } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as f } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { RadioGroup as j, Radio as D } from "../../../node_modules/@headlessui/react/dist/components/radio-group/radio-group.js";
 import { cn as t } from "../../../lib/utils.js";
-import { radioDotVariants as D, radioVariants as O, radioOptionVariants as Z, radioGroupOptionsVariants as A } from "./radio-group-variants.js";
-const B = {
+import { isFieldInvalid as F, withoutInvalidProps as O } from "../../../internal/field-invalid.js";
+import { radioDotVariants as P, radioVariants as Z, radioOptionVariants as A, radioGroupOptionsVariants as B } from "./radio-group-variants.js";
+const K = {
   sm: "rst:text-xs",
   md: "rst:text-sm",
   lg: "rst:text-base"
-}, J = ({
-  options: f,
-  value: u,
-  onChange: v,
+}, Y = ({
+  options: u,
+  value: v,
+  onChange: y,
   label: d,
   helperText: m,
   errorMessage: o,
   disabled: a = !1,
-  size: y = "md",
+  size: h = "md",
   orientation: i = "vertical",
   colorScheme: N,
-  className: h,
-  optionsClassName: b,
-  optionClassName: z,
-  radioClassName: g,
+  className: b,
+  optionsClassName: g,
+  optionClassName: w,
+  radioClassName: z,
   labelClassName: k,
-  optionLabelClassName: w,
-  descriptionClassName: V,
-  messageClassName: E,
-  "aria-invalid": G,
-  ...L
+  optionLabelClassName: V,
+  descriptionClassName: E,
+  messageClassName: G,
+  "aria-invalid": I,
+  ...n
 }) => {
-  const n = !!o, e = y ?? "md";
+  const x = !!o, L = F(x, { ...n, "aria-invalid": I }), R = O(n), e = h ?? "md";
   return /* @__PURE__ */ c(
-    S,
+    j,
     {
-      value: u,
-      onChange: v,
+      value: v,
+      onChange: y,
       disabled: a,
       className: t(
         "rst:font-ui rst:flex rst:flex-col rst:gap-1.5 rst:min-w-0",
-        h
+        b
       ),
-      ...L,
-      "aria-invalid": n || G || void 0,
+      ...R,
+      "aria-invalid": L || void 0,
       "aria-orientation": i,
       children: [
         d && /* @__PURE__ */ s(
-          p,
+          f,
           {
             className: t(
               "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",
@@ -63,37 +64,37 @@ const B = {
           "div",
           {
             className: t(
-              A({ size: e, orientation: i }),
-              b
+              B({ size: e, orientation: i }),
+              g
             ),
-            children: f.map((r) => /* @__PURE__ */ c(
-              R,
+            children: u.map((r) => /* @__PURE__ */ c(
+              S,
               {
                 disabled: a || r.disabled,
                 className: t(
-                  Z({ orientation: i, size: e }),
-                  z
+                  A({ orientation: i, size: e }),
+                  w
                 ),
                 children: [
                   /* @__PURE__ */ s(
-                    j,
+                    D,
                     {
                       value: r.value,
                       className: ({ checked: l }) => t(
-                        O({ colorScheme: N, size: e, checked: l }),
+                        Z({ colorScheme: N, size: e, checked: l }),
                         /* `self-start`, and no nudge. The circle's height equals the
                            label's line-height at every size, so aligning their top
                            edges puts the radio on the first line whether the label
                            is one line or four. */
                         "rst:self-start",
                         a || r.disabled ? "rst:opacity-50 rst:cursor-not-allowed" : "rst:cursor-pointer",
-                        g
+                        z
                       ),
                       children: ({ checked: l }) => /* @__PURE__ */ s(
                         "span",
                         {
                           className: t(
-                            D({ size: e }),
+                            P({ size: e }),
                             l ? "rst:opacity-100" : "rst:opacity-0"
                           )
                         }
@@ -113,24 +114,24 @@ const B = {
                       ),
                       children: [
                         /* @__PURE__ */ s(
-                          p,
+                          f,
                           {
                             className: t(
                               "rst:cursor-pointer rst:select-none",
                               "rst:text-[var(--roster-control-text)]",
                               "rst:data-disabled:cursor-not-allowed rst:data-disabled:opacity-50",
-                              B[e],
-                              w
+                              K[e],
+                              V
                             ),
                             children: r.label
                           }
                         ),
                         r.description && /* @__PURE__ */ s(
-                          x,
+                          p,
                           {
                             className: t(
                               "rst:text-xs rst:text-gray-500 rst:dark:text-gray-400 rst:data-disabled:opacity-50",
-                              V
+                              E
                             ),
                             children: r.description
                           }
@@ -145,14 +146,14 @@ const B = {
           }
         ),
         (m || o) && /* @__PURE__ */ s(
-          x,
+          p,
           {
             as: "p",
             className: t(
               "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",
+              x ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400",
               a && "rst:opacity-50",
-              E
+              G
             ),
             children: o || m
           }
@@ -162,5 +163,5 @@ const B = {
   );
 };
 export {
-  J as RadioGroup
+  Y as RadioGroup
 };

package/dist/internal/field-invalid.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(t,i){if(t||i.invalid)return!0;const e=i["aria-invalid"];return e!=null&&e!==!1&&e!=="false"&&e!==""}function l(t){const i={...t};return delete i["aria-invalid"],delete i.invalid,i}exports.isFieldInvalid=n;exports.withoutInvalidProps=l;

package/dist/internal/field-invalid.d.ts

@@ -0,0 +1,37 @@
+/**
+ * When a Roster field is invalid, and where it says so. Every field component
+ * follows this one rule; a new field should too.
+ *
+ * A field is invalid when any of these hold:
+ *
+ * - it shows an error: an `errorMessage`, or the `error` flag;
+ * - the consumer passes `aria-invalid` with any value but `false`, `"false"`
+ *   or `""` (ARIA reads an empty value as false). `"grammar"` and
+ *   `"spelling"` count, and come out as `"true"`: a field is invalid or it
+ *   isn't;
+ * - the consumer passes Headless UI's own `invalid`.
+ *
+ * An error wins: a field with one is invalid even when the consumer passes
+ * `aria-invalid="false"`.
+ *
+ * An invalid field renders `aria-invalid="true"` on the control a screen
+ * reader focuses, so it is announced as invalid along with its error text,
+ * not only drawn in red. A valid one renders no `aria-invalid` at all. The
+ * only exception is a role that can't carry the state: a radio can't, so a
+ * radio group says it on the group.
+ *
+ * Read the consumer's props here, not by spreading them: the props of most
+ * fields land on a wrapper with no role, where `aria-invalid` does nothing,
+ * and Headless UI's text controls overwrite a passed `aria-invalid` with
+ * their own.
+ */
+export interface InvalidProps {
+    "aria-invalid"?: unknown;
+    invalid?: unknown;
+}
+export declare function isFieldInvalid(hasError: boolean | null | undefined, props: InvalidProps): boolean;
+/**
+ * Splits the two invalid props off the rest, so the rest can be spread on a
+ * wrapper without them landing where they mean nothing.
+ */
+export declare function withoutInvalidProps<T extends object>(props: T): Omit<T, "aria-invalid" | "invalid">;

package/dist/internal/field-invalid.js

@@ -0,0 +1,13 @@
+function t(n, i) {
+  if (n || i.invalid) return !0;
+  const e = i["aria-invalid"];
+  return e != null && e !== !1 && e !== "false" && e !== "";
+}
+function r(n) {
+  const i = { ...n };
+  return delete i["aria-invalid"], delete i.invalid, i;
+}
+export {
+  t as isFieldInvalid,
+  r as withoutInvalidProps
+};

package/dist/meta.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.0",
-  "tests": 1759,
-  "testFiles": 236
+  "version": "5.2.1",
+  "tests": 1767,
+  "testFiles": 297
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blakesteve/roster",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "A production-grade atomic component library: accessible, theme-aware, and documented in Storybook. React 19, TypeScript, Tailwind CSS v4.",
   "keywords": [
     "react",