@blakesteve/roster 5.1.0 → 5.2.1

package/README.md

@@ -491,6 +491,9 @@ the sweep stops and the highlight parks off-frame. The highlight is deliberately
 exempt from that bar: it is a specular pass on screen for a fraction of a second
 per glyph, and holding it to 3:1 would flatten the effect.
 
+`Spinner` holds still under reduced motion: the arc still reads as loading, and
+its `label` (default "loading") says so.
+
 ### Scrollbars
 
 `custom-scrollbar` gives any scrollable surface a slim themed scrollbar.
@@ -1104,6 +1107,47 @@ escape the box. Lay the options out across with `orientation` rather than
 through `optionsClassName`, for the same reason: the horizontal spacing that
 keeps two radios 44px apart rides on that prop.
 
+### Carousel
+
+A sideways row: a row of cards, a selection strip, or a gallery of one per
+view. It is a real scroll container with CSS scroll snap, so touch, trackpad,
+Shift with the wheel and keyboard focus all scroll it without script, and every
+item is in the server render. No clones, no virtualization, no loop, and
+nothing moves on its own.
+
+```tsx
+<Carousel aria-label="Songs" itemWidth={240} gap={12} gutter={16}>
+  {songs.map((song) => <SongCard key={song.id} song={song} />)}
+</Carousel>
+```
+
+Each child is one item, wrapped in the `li` the row snaps to. Size the items
+with `itemWidth` (fixed) or `perView` (fluid: `{ base: 1.3, md: 2.5 }`, where
+the fraction is the peek of the next item). `gutter` is both the inline padding
+and the scroll padding, so a snapped item lines up with the text above it, and
+`bleed` pulls the row out by one gutter to run edge to edge.
+
+Script adds what a mouse is missing:
+
+- **Drag.** A mouse drags the row one to one and it settles on the nearest
+  item. A drag past 6px drops the one click that ends it, and nothing else.
+  Touch and pen keep native scrolling.
+- **Arrows.** Previous and next page by as many items as are wholly in view,
+  measured each time, and land on an item's edge. At an end the arrow is
+  `disabled`, out of the tab order. They show where a pointer can hover, on a
+  line above the row by default (`arrowPlacement="overlay"` floats them over
+  the ends; `renderArrows` puts them anywhere, such as a heading line). They
+  are 44px, drawn with inline SVG, and named "Next" plus the row's label.
+- **Keyboard focus** snaps its item into place at once. If no item can take
+  focus, the list itself is the tab stop.
+
+A vertical wheel over the row scrolls the page, and sideways overscroll is
+contained. Under reduced motion every scroll the component makes is instant.
+`ref` gives `scrollToIndex(i)`, `scrollPrev()` and `scrollNext()`;
+`onIndexChange` reports the first item wholly in view. For a gallery,
+`showPosition` shows "2 of 5", which is also each item's name and is announced
+politely when it changes.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -1171,7 +1215,7 @@ function App() {
 | `Disclosure`         | Show/hide toggle using HeadlessUI                                                                            |
 | `Eyebrow`            | Small tracked-out uppercase label above a heading or beside a rule; polymorphic via `as`                     |
 | `InlineCode`         | Inline `<code>` for identifiers in running prose                                                             |
-| `Input`              | Text input with label, error state, icon slots, and a size scale matching `Button`                           |
+| `Input`              | Text input with label, error state, icon slots, and a size scale matching `Button`; keeps a passed `aria-invalid` |
 | `LabeledDivider`     | Horizontal rule carrying a label, with an optional trailing count                                            |
 | `Link`               | Styled anchor with variant support                                                                           |
 | `MultiSelect`        | A `Select` that holds more than one value: dismissible chips, same panel                                     |
@@ -1197,8 +1241,9 @@ function App() {
 | `Breadcrumbs`     | Navigation trail; pass `linkComponent` to keep navigation client-side       |
 | `CheckboxGroup`   | Checkbox set reporting one `string[]`; groups, columns, scroll, error       |
 | `CallToAction`    | Prominent hero-style CTA block                                              |
+| `Carousel`        | Sideways row of items on native scroll snap; mouse drag, paging arrows, no autoplay |
 | `DescriptionList` | Label and value pairs as a real `<dl>`: inline, stacked, or split           |
-| `EmptyState`      | Zero-data placeholder with icon and action slot                             |
+| `EmptyState`      | Zero-data placeholder with icon and action slot; `headingLevel` sets its title's `h1` to `h6` |
 | `ErrorState`      | Error display with retry action                                             |
 | `LiquidNav`       | `LiquidTabs`' strip as a `nav` of links; takes a router's link component    |
 | `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, 44px `lg` size     |
@@ -1217,7 +1262,7 @@ function App() {
 | `Dialog`    | Modal dialog                                                                                                                                                       |
 | `Footer`    | Site footer                                                                                                                                                        |
 | `Navbar`    | Responsive navigation bar with mobile slide-out                                                                                                                    |
-| `Sheet`     | Bottom sheet: drag, Escape or backdrop to dismiss; only its content scrolls; returns focus, even from a deep link                                                  |
+| `Sheet`     | Bottom sheet: drag, Escape or backdrop to dismiss; only its content scrolls; returns focus, even from a deep link; the title may be a node |
 | `Table`     | Static data table                                                                                                                                                  |
 
 ### DataTable columns
@@ -1370,6 +1415,15 @@ reason and the build goes green on the state it inherited while still failing on
 anything new. It also fails when a listed class starts emitting, so a fix cannot
 leave a stale entry behind. Run it with `--verbose` to print the list.
 
+Story tests that need the user's own input, a wheel or a mouse drag, get it
+from `.storybook/real-input.ts`: Vitest browser commands that drive
+Playwright's mouse, whose events are trusted. A synthetic wheel or pointer
+event never scrolls anything, so "a vertical wheel scrolls the page, not the
+row" can't be tested without them. The commands fail loudly when the pointer
+isn't over their target, rather than letting a wheel land on the page and a
+test pass for the wrong reason. Storybook's own UI has no such input, so those
+steps are skipped there.
+
 `src/lib/utils.test.ts` pins `cn`. `tailwind-merge` has to be configured with the
 prefix or it stops recognising Roster's classes as utilities and silently
 degrades to concatenation: conflicting classes both survive and the winner falls

package/dist/components/atoms/Combobox/Combobox.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),a=require("../../../node_modules/@headlessui/react/dist/components/combobox/combobox.cjs"),_=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),F=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),I=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),L=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),R=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),c=require("../../../lib/utils.cjs"),T=require("../Input/input-variants.cjs"),U=require("../../../internal/PopupOption.cjs"),i=require("../../../internal/popup.cjs");function A(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const V=A(j),E=(t,s)=>{const r=s.trim().toLowerCase();return r?t.filter(n=>n.label.toLowerCase().includes(r)):t},H=({options:t,value:s,onChange:r,placeholder:n="Search...",disabled:x=!1,variant:m,size:l,error:y,label:p,helperText:b,errorMessage:u,className:v,inputClassName:P,optionsClassName:O,emptyMessage:g="No matches",filter:q=E,...N})=>{const[C,f]=V.useState(""),{ref:k,inDarkScope:D}=i.useDarkScope(),d=!!u||y,h=q(t,C),S=t.find(o=>o.value===s)??null;return e.jsxs(w.Field,{disabled:x,className:c.cn("rst:flex rst:flex-col rst:gap-1.5",v),...N,children:[p&&e.jsx(F.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:p}),e.jsx(a.Combobox,{value:s??null,onChange:r,disabled:x,children:e.jsxs("div",{ref:k,className:"rst:relative",children:[e.jsx(a.ComboboxInput,{"aria-invalid":d||void 0,className:c.cn(T.inputVariants({variant:m,size:l,error:d}),P,"rst:pr-9"),placeholder:n,displayValue:()=>S?.label??"",onChange:o=>f(o.target.value)}),e.jsx(a.ComboboxButton,{className:c.cn("rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:w-11 rst:cursor-pointer rst:items-center rst:justify-end",l==="sm"?"rst:pr-2.5":"rst:pr-3"),children:e.jsx(L.FontAwesomeIcon,{icon:R.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),e.jsx(I.Transition,{as:j.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",afterLeave:()=>f(""),children:e.jsx(a.ComboboxOptions,{anchor:i.POPUP_ANCHOR,className:c.cn(i.popupInDarkPalette(D,m)&&"dark",i.POPUP_PANEL,i.POPUP_WIDTH_OF_INPUT,O),children:h.length===0?e.jsx(a.ComboboxOption,{value:"",disabled:!0,className:c.cn("rst:px-4 rst:py-2.5 rst:text-sm rst:opacity-70",l==="sm"&&"rst:px-3 rst:py-2"),children:g}):h.map(o=>e.jsx(U.PopupOption,{as:a.ComboboxOption,value:o.value,disabled:o.disabled,size:l,children:o.label},o.value))})})]})}),(b||u)&&e.jsx(_.Description,{className:c.cn("rst:text-xs rst:text-left",d?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:u||b})]})};exports.Combobox=H;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react"),a=require("../../../node_modules/@headlessui/react/dist/components/combobox/combobox.cjs"),F=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),R=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),T=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),U=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),A=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),i=require("../../../lib/utils.cjs"),j=require("../../../internal/field-invalid.cjs"),V=require("../Input/input-variants.cjs"),E=require("../../../internal/PopupOption.cjs"),l=require("../../../internal/popup.cjs");function H(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const B=H(y),Q=(t,s)=>{const r=s.trim().toLowerCase();return r?t.filter(o=>o.label.toLowerCase().includes(r)):t},W=({options:t,value:s,onChange:r,placeholder:o="Search...",disabled:x=!1,variant:m,size:c,error:P,label:p,helperText:b,errorMessage:u,className:q,inputClassName:O,optionsClassName:g,emptyMessage:N="No matches",filter:C=Q,...f})=>{const[k,v]=B.useState(""),{ref:w,inDarkScope:D}=l.useDarkScope(),d=!!u||P,I=j.isFieldInvalid(d,f),S=j.withoutInvalidProps(f),h=C(t,k),_=t.find(n=>n.value===s)??null;return e.jsxs(L.Field,{disabled:x,className:i.cn("rst:flex rst:flex-col rst:gap-1.5",q),...S,children:[p&&e.jsx(R.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:p}),e.jsx(a.Combobox,{value:s??null,onChange:r,disabled:x,children:e.jsxs("div",{ref:w,className:"rst:relative",children:[e.jsx(a.ComboboxInput,{"aria-invalid":I||void 0,className:i.cn(V.inputVariants({variant:m,size:c,error:d}),O,"rst:pr-9"),placeholder:o,displayValue:()=>_?.label??"",onChange:n=>v(n.target.value)}),e.jsx(a.ComboboxButton,{className:i.cn("rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:w-11 rst:cursor-pointer rst:items-center rst:justify-end",c==="sm"?"rst:pr-2.5":"rst:pr-3"),children:e.jsx(U.FontAwesomeIcon,{icon:A.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),e.jsx(T.Transition,{as:y.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",afterLeave:()=>v(""),children:e.jsx(a.ComboboxOptions,{anchor:l.POPUP_ANCHOR,className:i.cn(l.popupInDarkPalette(D,m)&&"dark",l.POPUP_PANEL,l.POPUP_WIDTH_OF_INPUT,g),children:h.length===0?e.jsx(a.ComboboxOption,{value:"",disabled:!0,className:i.cn("rst:px-4 rst:py-2.5 rst:text-sm rst:opacity-70",c==="sm"&&"rst:px-3 rst:py-2"),children:N}):h.map(n=>e.jsx(E.PopupOption,{as:a.ComboboxOption,value:n.value,disabled:n.disabled,size:c,children:n.label},n.value))})})]})}),(b||u)&&e.jsx(F.Description,{className:i.cn("rst:text-xs rst:text-left",d?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:u||b})]})};exports.Combobox=W;

package/dist/components/atoms/Combobox/Combobox.js

@@ -1,81 +1,82 @@
 "use client";
 import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import * as I from "react";
-import { Fragment as L } from "react";
-import { Combobox as U, ComboboxInput as _, ComboboxButton as H, ComboboxOptions as S, ComboboxOption as h } from "../../../node_modules/@headlessui/react/dist/components/combobox/combobox.js";
-import { Description as j } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as A } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as R } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Transition as T } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { FontAwesomeIcon as q } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as B } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import * as U from "react";
+import { Fragment as _ } from "react";
+import { Combobox as H, ComboboxInput as S, ComboboxButton as j, ComboboxOptions as A, ComboboxOption as v } from "../../../node_modules/@headlessui/react/dist/components/combobox/combobox.js";
+import { Description as R } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as T } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as q } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Transition as B } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { FontAwesomeIcon as E } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as V } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { inputVariants as E } from "../Input/input-variants.js";
-import { PopupOption as V } from "../../../internal/PopupOption.js";
-import { useDarkScope as W, POPUP_ANCHOR as K, POPUP_WIDTH_OF_INPUT as Q, POPUP_PANEL as Z, popupInDarkPalette as G } from "../../../internal/popup.js";
-const J = (s, o) => {
+import { isFieldInvalid as W, withoutInvalidProps as K } from "../../../internal/field-invalid.js";
+import { inputVariants as Q } from "../Input/input-variants.js";
+import { PopupOption as Z } from "../../../internal/PopupOption.js";
+import { useDarkScope as G, POPUP_ANCHOR as J, POPUP_WIDTH_OF_INPUT as X, POPUP_PANEL as Y, popupInDarkPalette as $ } from "../../../internal/popup.js";
+const M = (s, o) => {
   const a = o.trim().toLowerCase();
-  return a ? s.filter((i) => i.label.toLowerCase().includes(a)) : s;
-}, mt = ({
+  return a ? s.filter((l) => l.label.toLowerCase().includes(a)) : s;
+}, ft = ({
   options: s,
   value: o,
   onChange: a,
-  placeholder: i = "Search...",
+  placeholder: l = "Search...",
   disabled: c = !1,
-  variant: p,
-  size: l,
-  error: v,
-  label: d,
+  variant: d,
+  size: i,
+  error: P,
+  label: p,
   helperText: f,
-  errorMessage: m,
+  errorMessage: n,
   className: y,
   inputClassName: N,
-  optionsClassName: P,
-  emptyMessage: C = "No matches",
-  filter: k = J,
-  ...g
+  optionsClassName: C,
+  emptyMessage: k = "No matches",
+  filter: g = M,
+  ...u
 }) => {
-  const [O, u] = I.useState(""), { ref: w, inDarkScope: D } = W(), n = !!m || v, x = k(s, O), F = s.find((r) => r.value === o) ?? null;
+  const [O, x] = U.useState(""), { ref: w, inDarkScope: F } = G(), m = !!n || P, I = W(m, u), D = K(u), h = g(s, O), L = s.find((r) => r.value === o) ?? null;
   return /* @__PURE__ */ b(
-    A,
+    T,
     {
       disabled: c,
       className: e("rst:flex rst:flex-col rst:gap-1.5", y),
-      ...g,
+      ...D,
       children: [
-        d && /* @__PURE__ */ t(R, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: d }),
+        p && /* @__PURE__ */ t(q, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: p }),
         /* @__PURE__ */ t(
-          U,
+          H,
           {
             value: o ?? null,
             onChange: a,
             disabled: c,
             children: /* @__PURE__ */ b("div", { ref: w, className: "rst:relative", children: [
               /* @__PURE__ */ t(
-                _,
+                S,
                 {
-                  "aria-invalid": n || void 0,
+                  "aria-invalid": I || void 0,
                   className: e(
-                    E({ variant: p, size: l, error: n }),
+                    Q({ variant: d, size: i, error: m }),
                     N,
                     "rst:pr-9"
                   ),
-                  placeholder: i,
-                  displayValue: () => F?.label ?? "",
-                  onChange: (r) => u(r.target.value)
+                  placeholder: l,
+                  displayValue: () => L?.label ?? "",
+                  onChange: (r) => x(r.target.value)
                 }
               ),
               /* @__PURE__ */ t(
-                H,
+                j,
                 {
                   className: e(
                     "rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:w-11 rst:cursor-pointer rst:items-center rst:justify-end",
-                    l === "sm" ? "rst:pr-2.5" : "rst:pr-3"
+                    i === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                   ),
                   children: /* @__PURE__ */ t(
-                    q,
+                    E,
                     {
-                      icon: B,
+                      icon: V,
                       className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                       "aria-hidden": "true"
                     }
@@ -83,43 +84,43 @@ const J = (s, o) => {
                 }
               ),
               /* @__PURE__ */ t(
-                T,
+                B,
                 {
-                  as: L,
+                  as: _,
                   leave: "rst:transition rst:ease-in rst:duration-100",
                   leaveFrom: "rst:opacity-100",
                   leaveTo: "rst:opacity-0",
-                  afterLeave: () => u(""),
+                  afterLeave: () => x(""),
                   children: /* @__PURE__ */ t(
-                    S,
+                    A,
                     {
-                      anchor: K,
+                      anchor: J,
                       className: e(
-                        G(D, p) && "dark",
-                        Z,
+                        $(F, d) && "dark",
+                        Y,
                         /* `--input-width`, not `--button-width`: the button here is
                            the chevron, so matching it renders a 20px sliver. */
-                        Q,
-                        P
+                        X,
+                        C
                       ),
-                      children: x.length === 0 ? /* @__PURE__ */ t(
-                        h,
+                      children: h.length === 0 ? /* @__PURE__ */ t(
+                        v,
                         {
                           value: "",
                           disabled: !0,
                           className: e(
                             "rst:px-4 rst:py-2.5 rst:text-sm rst:opacity-70",
-                            l === "sm" && "rst:px-3 rst:py-2"
+                            i === "sm" && "rst:px-3 rst:py-2"
                           ),
-                          children: C
+                          children: k
                         }
-                      ) : x.map((r) => /* @__PURE__ */ t(
-                        V,
+                      ) : h.map((r) => /* @__PURE__ */ t(
+                        Z,
                         {
-                          as: h,
+                          as: v,
                           value: r.value,
                           disabled: r.disabled,
-                          size: l,
+                          size: i,
                           children: r.label
                         },
                         r.value
@@ -131,14 +132,14 @@ const J = (s, o) => {
             ] })
           }
         ),
-        (f || m) && /* @__PURE__ */ t(
-          j,
+        (f || n) && /* @__PURE__ */ t(
+          R,
           {
             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"
+              m ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: m || f
+            children: n || f
           }
         )
       ]
@@ -146,5 +147,5 @@ const J = (s, o) => {
   );
 };
 export {
-  mt as Combobox
+  ft as Combobox
 };

package/dist/components/atoms/Input/Input.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),h=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),y=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),g=require("../../../node_modules/@headlessui/react/dist/components/input/input.cjs"),v=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),t=require("../../../lib/utils.cjs"),a=require("./input-variants.cjs"),m=b.forwardRef(({className:x,type:p,label:o,helperText:u,errorMessage:e,variant:i,size:n,error:f,startIcon:c,endIcon:l,disabled:d,inputClassName:j,...q},N)=>{const s=!!e||f;return r.jsxs(y.Field,{disabled:d,className:t.cn("rst:w-full",x),children:[o&&r.jsx(v.Label,{className:t.cn("rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors","rst:text-[var(--roster-control-text)]","rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"),children:o}),r.jsxs("div",{className:"rst:relative",children:[c&&r.jsx("div",{className:t.cn(a.iconVariants({variant:i,error:s}),"rst:left-3"),children:c}),r.jsx(g.Input,{ref:N,type:p,disabled:d,className:t.cn(a.inputVariants({variant:i,size:n,error:s}),c&&(n==="sm"?"rst:pl-9":"rst:pl-10"),l&&(n==="sm"?"rst:pr-9":"rst:pr-10"),j),...q}),l&&r.jsx("div",{className:t.cn(a.iconVariants({variant:i,error:s}),"rst:right-3"),children:l})]}),(u||e)&&r.jsx(h.Description,{className:t.cn("rst:text-xs rst:text-left rst:mt-1.5",s?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:e||u})]})});m.displayName="Input";exports.Input=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("react"),g=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),V=require("../../../node_modules/@headlessui/react/dist/components/input/input.cjs"),k=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),r=require("../../../lib/utils.cjs"),a=require("./input-variants.cjs"),p=require("../../../internal/field-invalid.cjs"),x=y.forwardRef(({className:f,type:j,label:o,helperText:u,errorMessage:e,variant:i,size:n,error:q,startIcon:l,endIcon:c,disabled:d,inputClassName:h,...m},v)=>{const s=!!e||q,N=p.isFieldInvalid(s,m),b=p.withoutInvalidProps(m);return t.jsxs(w.Field,{disabled:d,className:r.cn("rst:w-full",f),children:[o&&t.jsx(k.Label,{className:r.cn("rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors","rst:text-[var(--roster-control-text)]","rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"),children:o}),t.jsxs("div",{className:"rst:relative",children:[l&&t.jsx("div",{className:r.cn(a.iconVariants({variant:i,error:s}),"rst:left-3"),children:l}),t.jsx(V.Input,{ref:v,type:j,disabled:d,className:r.cn(a.inputVariants({variant:i,size:n,error:s}),l&&(n==="sm"?"rst:pl-9":"rst:pl-10"),c&&(n==="sm"?"rst:pr-9":"rst:pr-10"),h),...b,invalid:N}),c&&t.jsx("div",{className:r.cn(a.iconVariants({variant:i,error:s}),"rst:right-3"),children:c})]}),(u||e)&&t.jsx(g.Description,{className:r.cn("rst:text-xs rst:text-left rst:mt-1.5",s?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:e||u})]})});x.displayName="Input";exports.Input=x;

package/dist/components/atoms/Input/Input.js

@@ -1,29 +1,30 @@
 "use client";
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
 import b from "react";
 import { Description as k } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as v } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Input as w } from "../../../node_modules/@headlessui/react/dist/components/input/input.js";
-import { Label as g } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import { Field as g } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Input as j } from "../../../node_modules/@headlessui/react/dist/components/input/input.js";
+import { Label as F } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
 import { cn as r } from "../../../lib/utils.js";
-import { iconVariants as d, inputVariants as j } from "./input-variants.js";
-const R = b.forwardRef(
+import { iconVariants as f, inputVariants as P } from "./input-variants.js";
+import { isFieldInvalid as R, withoutInvalidProps as V } from "../../../internal/field-invalid.js";
+const _ = b.forwardRef(
   ({
-    className: f,
+    className: u,
     type: x,
     label: l,
-    helperText: c,
+    helperText: n,
     errorMessage: e,
     variant: o,
-    size: m,
-    error: u,
-    startIcon: a,
-    endIcon: i,
-    disabled: p,
+    size: i,
+    error: h,
+    startIcon: m,
+    endIcon: a,
+    disabled: c,
     inputClassName: N,
-    ...h
-  }, y) => {
-    const s = !!e || u;
+    ...d
+  }, v) => {
+    const t = !!e || h, w = R(t, d), y = V(d);
     return (
       /* No `space-y-*` here, deliberately. Headless UI's Field appends a
           hidden zero-height <span> after the control, and Tailwind v4 applies
@@ -38,9 +39,9 @@ const R = b.forwardRef(
          DisabledProvider stays false and the Label and Description never dim.
          Fixed in both rather than one, because a form with a disabled Input
          and a disabled Select that grey differently is worse than neither. */
-      /* @__PURE__ */ n(v, { disabled: p, className: r("rst:w-full", f), children: [
-        l && /* @__PURE__ */ t(
-          g,
+      /* @__PURE__ */ p(g, { disabled: c, className: r("rst:w-full", u), children: [
+        l && /* @__PURE__ */ s(
+          F,
           {
             className: r(
               "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors",
@@ -50,60 +51,61 @@ const R = b.forwardRef(
             children: l
           }
         ),
-        /* @__PURE__ */ n("div", { className: "rst:relative", children: [
-          a && /* @__PURE__ */ t(
+        /* @__PURE__ */ p("div", { className: "rst:relative", children: [
+          m && /* @__PURE__ */ s(
             "div",
             {
               className: r(
-                d({ variant: o, error: s }),
+                f({ variant: o, error: t }),
                 "rst:left-3"
               ),
-              children: a
+              children: m
             }
           ),
-          /* @__PURE__ */ t(
-            w,
+          /* @__PURE__ */ s(
+            j,
             {
-              ref: y,
+              ref: v,
               type: x,
-              disabled: p,
+              disabled: c,
               className: r(
-                j({ variant: o, size: m, error: s }),
+                P({ variant: o, size: i, error: t }),
                 /* Icon inset tracks the size's own padding: sm is px-3, so it
                    needs one step less clearance than the 16px sizes. */
-                a && (m === "sm" ? "rst:pl-9" : "rst:pl-10"),
-                i && (m === "sm" ? "rst:pr-9" : "rst:pr-10"),
+                m && (i === "sm" ? "rst:pl-9" : "rst:pl-10"),
+                a && (i === "sm" ? "rst:pr-9" : "rst:pr-10"),
                 N
               ),
-              ...h
+              ...y,
+              invalid: w
             }
           ),
-          i && /* @__PURE__ */ t(
+          a && /* @__PURE__ */ s(
             "div",
             {
               className: r(
-                d({ variant: o, error: s }),
+                f({ variant: o, error: t }),
                 "rst:right-3"
               ),
-              children: i
+              children: a
             }
           )
         ] }),
-        (c || e) && /* @__PURE__ */ t(
+        (n || e) && /* @__PURE__ */ s(
           k,
           {
             className: r(
               "rst:text-xs rst:text-left rst:mt-1.5",
-              s ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
+              t ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: e || c
+            children: e || n
           }
         )
       ] })
     );
   }
 );
-R.displayName = "Input";
+_.displayName = "Input";
 export {
-  R as Input
+  _ as Input
 };

package/dist/components/atoms/MultiSelect/MultiSelect.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),O=require("react"),B=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),H=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),M=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),x=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),Y=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),S=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),T=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),W=require("../Select/select-variants.cjs"),F=require("../Chip/Chip.cjs"),X=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),G=({options:h,value:n,onChange:m,placeholder:b="Select options",disabled:o=!1,variant:f,size:i,error:R,className:_,triggerClassName:L,optionsClassName:D,helperText:v,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:k="neutral",chipVariant:w="outline",clearLabel:A="Clear selection",removeLabel:E=l=>`Remove ${l}`,...U})=>{const l=!!p||R,a=n.length>0,y=new Map(h.map((r,e)=>[r.value,e])),d=n.map(r=>({value:r,label:h.find(e=>e.value===r)?.label??String(r)})).sort((r,e)=>(y.get(r.value)??Number.POSITIVE_INFINITY)-(y.get(e.value)??Number.POSITIVE_INFINITY)),P=N===void 0?d:d.slice(0,N),I=d.length-P.length,{ref:$,inDarkScope:C}=c.useDarkScope(),q=O.useRef(null);return t.jsxs(H.Field,{disabled:o,className:s.cn("rst:flex rst:flex-col rst:gap-1.5",_),...U,children:[g&&t.jsx(M.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(x.Listbox,{value:n,onChange:m,disabled:o,multiple:!0,children:t.jsxs("div",{ref:$,className:"rst:relative",children:[t.jsxs("div",{className:s.cn(W.selectTriggerVariants({variant:f,size:i,error:l}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",i==="sm"?"rst:min-h-9":i==="lg"?"rst:min-h-11":"rst:min-h-10",j&&a&&"rst:pr-16","rst:focus-within:ring-2 rst:focus-within:ring-ring",o&&"rst:opacity-50 rst:cursor-not-allowed",L),children:[t.jsx(x.ListboxButton,{ref:q,"aria-invalid":l||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:a?u==="count"?`${n.length} selected`:d.map(r=>r.label).join(", "):b})}),!a&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:b}),a&&u==="count"&&t.jsxs("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:[n.length," selected"]}),a&&u==="chips"&&P.map((r,e)=>t.jsx(F.Chip,{size:"sm",variant:w,colorScheme:k,disabled:o,onRemove:()=>m(n.filter(V=>V!==r.value)),removeLabel:E(r.label),className:s.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${e}-${String(r.value)}`)),I>0&&u==="chips"&&t.jsxs(F.Chip,{size:"sm",variant:w,colorScheme:k,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",I]}),t.jsx("span",{className:s.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",i==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(S.FontAwesomeIcon,{icon:T.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&a&&t.jsx("button",{type:"button",disabled:o,onClick:()=>{m([]),q.current?.focus()},"aria-label":A,className:s.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",i==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(S.FontAwesomeIcon,{icon:T.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(Y.Transition,{as:O.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(x.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:s.cn(c.popupInDarkPalette(C,f)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,D),children:h.map(r=>t.jsx(X.PopupOption,{as:x.ListboxOption,value:r.value,disabled:r.disabled,size:i,children:r.label},r.value))})})]})}),(v||p)&&t.jsx(B.Description,{className:s.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"),children:p||v})]})};exports.MultiSelect=G;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),Y=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),W=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),X=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),h=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),G=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),T=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),F=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),R=require("../../../internal/field-invalid.cjs"),J=require("../Select/select-variants.cjs"),_=require("../Chip/Chip.cjs"),K=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),Q=({options:x,value:n,onChange:m,placeholder:f="Select options",disabled:a=!1,variant:v,size:i,error:L,className:D,triggerClassName:A,optionsClassName:E,helperText:b,errorMessage:p,label:g,display:u="chips",maxChips:N,clearable:j=!1,chipColorScheme:k="neutral",chipVariant:w="outline",clearLabel:U="Clear selection",removeLabel:$=l=>`Remove ${l}`,...I})=>{const l=!!p||L,C=R.isFieldInvalid(l,I),V=R.withoutInvalidProps(I),o=n.length>0,P=new Map(x.map((r,e)=>[r.value,e])),d=n.map(r=>({value:r,label:x.find(e=>e.value===r)?.label??String(r)})).sort((r,e)=>(P.get(r.value)??Number.POSITIVE_INFINITY)-(P.get(e.value)??Number.POSITIVE_INFINITY)),y=N===void 0?d:d.slice(0,N),q=d.length-y.length,{ref:B,inDarkScope:H}=c.useDarkScope(),O=S.useRef(null);return t.jsxs(W.Field,{disabled:a,className:s.cn("rst:flex rst:flex-col rst:gap-1.5",D),...V,children:[g&&t.jsx(X.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:g}),t.jsx(h.Listbox,{value:n,onChange:m,disabled:a,multiple:!0,children:t.jsxs("div",{ref:B,className:"rst:relative",children:[t.jsxs("div",{className:s.cn(J.selectTriggerVariants({variant:v,size:i,error:l}),"rst:h-auto rst:flex-wrap rst:items-center rst:gap-1.5 rst:py-1.5",i==="sm"?"rst:min-h-9":i==="lg"?"rst:min-h-11":"rst:min-h-10",j&&o&&"rst:pr-16","rst:focus-within:ring-2 rst:focus-within:ring-ring",a&&"rst:opacity-50 rst:cursor-not-allowed",A),children:[t.jsx(h.ListboxButton,{ref:O,"aria-invalid":C||void 0,className:"rst:absolute rst:inset-0 rst:h-full rst:w-full rst:cursor-pointer rst:rounded-md rst:focus:outline-hidden rst:disabled:cursor-not-allowed",children:t.jsx("span",{className:"rst:sr-only",children:o?u==="count"?`${n.length} selected`:d.map(r=>r.label).join(", "):f})}),!o&&t.jsx("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate rst:text-gray-500 rst:dark:text-gray-400",children:f}),o&&u==="count"&&t.jsxs("span",{"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:block rst:truncate",children:[n.length," selected"]}),o&&u==="chips"&&y.map((r,e)=>t.jsx(_.Chip,{size:"sm",variant:w,colorScheme:k,disabled:a,onRemove:()=>m(n.filter(M=>M!==r.value)),removeLabel:$(r.label),className:s.cn("rst:relative rst:max-w-[12rem] rst:pointer-events-none","rst:[&_button]:pointer-events-auto","rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70"),children:t.jsx("span",{className:"rst:block rst:truncate",children:r.label})},`${e}-${String(r.value)}`)),q>0&&u==="chips"&&t.jsxs(_.Chip,{size:"sm",variant:w,colorScheme:k,"aria-hidden":"true",className:"rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",children:["+",q]}),t.jsx("span",{className:s.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",i==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})}),j&&o&&t.jsx("button",{type:"button",disabled:a,onClick:()=>{m([]),O.current?.focus()},"aria-label":U,className:s.cn("rst:absolute rst:inset-y-0 rst:flex rst:w-6 rst:items-center rst:justify-center","rst:cursor-pointer rst:disabled:cursor-not-allowed","rst:text-current rst:opacity-70 rst:hover:opacity-100 rst:disabled:opacity-40","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:rounded-sm",i==="sm"?"rst:right-7":"rst:right-8"),children:t.jsx(T.FontAwesomeIcon,{icon:F.faXmark,className:"rst:h-3.5 rst:w-3.5","aria-hidden":"true"})})]}),t.jsx(G.Transition,{as:S.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(h.ListboxOptions,{anchor:c.POPUP_ANCHOR,className:s.cn(c.popupInDarkPalette(H,v)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_BUTTON,E),children:x.map(r=>t.jsx(K.PopupOption,{as:h.ListboxOption,value:r.value,disabled:r.disabled,size:i,children:r.label},r.value))})})]})}),(b||p)&&t.jsx(Y.Description,{className:s.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"),children:p||b})]})};exports.MultiSelect=Q;