@blakesteve/roster 5.0.1 → 5.2.0

package/README.md

@@ -310,6 +310,7 @@ squeeze its own text until it overflowed. Three things follow:
   Give any `width: fit-content`, `inline-block` or table-cell ancestor a
   definite width, or the card measures zero.
 - **Container queries are required**: Chrome 105+, Safari 16+, Firefox 110+.
+  `Stat` lays out with CSS subgrid, which raises its own floor to Chrome 117.
   Without them a `CallToAction` renders in its narrow form at every width.
 
 #### Ink follows the fill
@@ -355,9 +356,9 @@ the supported way now.
 rule stops matching.** Solid Button, Badge, Pill and Checkbox no longer carry
 `rst:text-white` or `rst:text-gray-950`, so a selector naming either matches
 nothing. It fails silently, and it fails *partially*: those classes are still on
-`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar`, `LiquidTabs` and
-`Breadcrumbs`, so a themed foreground keeps working there while reverting on
-every solid control. Replace the rule with the token:
+`Card`, `Navbar`, `Dialog`, `ActionBar`, `Avatar` and `Breadcrumbs`, so a
+themed foreground keeps working there while reverting on every solid control.
+Replace the rule with the token:
 
 ```css
 /* before */
@@ -367,6 +368,12 @@ every solid control. Replace the rule with the token:
 :root { --roster-primary-600-ink: #10142e; }
 ```
 
+`LiquidTabs` followed later: its active label reads `--roster-lt-text-active`,
+which defaults to `--roster-primary-500-ink`, the ink of the pill's default
+fill. A rule naming `rst:text-white` on a tab stops matching; a rule on
+`[role="tab"][aria-selected="true"]` still does. If you repaint the pill with
+`--roster-lt-pill`, set `--roster-lt-text-active` to match it.
+
 **If you pass a foreground through `className`, add the hover modifier.** Solid
 variants now carry `hover:text-*`, and `tailwind-merge` resolves conflicts per
 modifier, so a bare `rst:text-black` no longer holds through hover. Write
@@ -459,6 +466,12 @@ It is hand-rolled rather than a dependency: seven utilities does not justify a
 package in a library that ships compiled CSS, and it keeps the stylesheet
 self-contained — the same reasoning as not bundling a preflight.
 
+`Sheet` has its own knobs, beside those: `--roster-sheet-enter-duration`
+(280ms), `--roster-sheet-leave-duration` (200ms), the two matching easings, and
+`--roster-sheet-fade-duration` (150ms), which is the whole of its motion under
+reduced motion: a fade, with no slide. Set them at `:root`; they are the same in
+both schemes, so they are not redeclared under `.dark`.
+
 `animate-shimmer` is a highlight travelling across a base, used by `Countdown`'s
 `gradient` variant. Retint it with two variables:
 
@@ -478,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.
@@ -717,6 +733,32 @@ toast `status` / `polite`, and a polite live region is read when the reader
 next pauses — which for a message that disappears in four seconds can mean
 never.
 
+**The queue renders into `<body>`, not where `Toaster` is placed.** While a
+`Dialog` or `Sheet` is open, every child of `<body>` is `inert` and
+`aria-hidden` except the dialog layer and anything carrying
+`data-roster-toaster`, which `Toaster`'s host does. So a toast fired from an
+open dialog is still announced, wherever in the app `Toaster` is mounted.
+
+A toast host Roster does not render, such as `react-hot-toast`'s own
+`Toaster`, goes silent while a dialog is open unless it opts in. Wrap it in an
+element that is a direct child of `<body>` (render it through a portal if it is
+mounted deeper) and carries the attribute:
+
+```tsx
+<div data-roster-toaster="" style={{ display: "contents" }}>
+  <Toaster />
+</div>
+```
+
+Two consequences of rendering into `<body>`:
+
+- `--roster-*` tokens set on a wrapper inside your app do not reach the toasts.
+  Set them on `:root`. A scoped `.dark` is carried across.
+- Anything else another library mounts straight into `<body>` while a dialog
+  is open, such as a date picker's or an autocomplete's popup, is inert too,
+  so it can't be clicked. Roster's own popups render into Headless UI's portal
+  root and are unaffected.
+
 `variant` on `Toaster` sets the fill for the whole queue:
 
 - **`soft`** (default) — the tinted fill `Alert` uses. Quiet enough that a stack
@@ -1065,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
@@ -1083,6 +1166,12 @@ passing it from a server component fails the render with _Functions cannot be
 passed directly to Client Components_. A small `"use client"` wrapper binds it
 once, and the pages that use the wrapper stay server-rendered.
 
+`LiquidNav` takes a `linkComponent` too, with a wider contract: each link
+receives `href` and `to` with the same value, so React Router's `Link` works as
+well as `next/link`, plus `className`, `children`, `aria-current`, `onClick` and
+`data-tab-id`, which it must forward to the DOM. The props type is exported as
+`LiquidNavLinkProps`. The same client-component rule applies.
+
 `Eyebrow` takes the other approach: `as` accepts any element and the props
 follow it, so `<Eyebrow as="a" href="/work">` works, as does `as={NextLink}`.
 
@@ -1126,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                                     |
@@ -1134,12 +1223,11 @@ function App() {
 | `Pill`               | Inline phrase chrome: social proof, live state, applied filters                                              |
 | `AvatarStrip`        | Stacked avatar row with overflow chip, dismiss button, trailing slot, and label area                         |
 | `CollapsibleSection` | Clamps any content (prose, chips, image grids) to a fixed height with a fade and expand/collapse toggle      |
-| `LiquidTabs`         | Controlled tab strip with a liquid sliding pill indicator: pill and filled variants                          |
 | `Select`             | Dropdown selector, on the same size scale as `Button` and `Input`                                            |
 | `SegmentBar`         | Proportional horizontal bar divided into colored segments with optional legend                               |
-| `Stat`               | A single figure with its label and, optionally, where the figure came from                                   |
+| `Stat`               | A figure with its label and, optionally, its source; a valid `<dl>` group, or `semantics="standalone"`       |
 | `Spinner`            | Loading indicator                                                                                            |
-| `Switch`             | Toggle switch                                                                                                |
+| `Switch`             | Toggle switch; its label toggles it, and every size is a 44px target                                         |
 | `Textarea`           | Multi-line text input                                                                                        |
 | `ThemeToggle`        | Flips class-based dark mode on the document root and remembers the choice; labels and icons are configurable |
 | `Tooltip`            | Radix-powered tooltip: hover/focus on desktop, tap-to-toggle on mobile                                       |
@@ -1153,9 +1241,12 @@ 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     |
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
@@ -1171,6 +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; the title may be a node |
 | `Table`     | Static data table                                                                                                                                                  |
 
 ### DataTable columns
@@ -1208,7 +1300,7 @@ entry's value as `unknown` and recovers the real type per column through
 The `"use client"` directive sits on each module that needs it, not on the
 package entry. A component carries it; a variant table, a token map and `cn` do
 not. That is what lets a server component import `Button` from the root and get
-a client reference for `Button` alone, rather than for all 102 exports.
+a client reference for `Button` alone, rather than for all 105 exports.
 
 It changed in 5.0.0, and the difference is worth knowing if you are upgrading.
 Before, the entry itself carried the directive, so importing anything from the
@@ -1323,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/Chip/Chip.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),k=require("react"),q=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"),w=require("./chip-variants.cjs");function C(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const P=C(k),d="rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2",v=P.forwardRef(({className:e,colorScheme:r,variant:s,size:n,leadingIcon:h,onRemove:j,removeLabel:N,onSelectedChange:o,selected:i,disabled:a=!1,children:l,onClick:u,...f},p)=>{const y=!!o,x=!!j,m=c.cn(w.chipVariants({colorScheme:r,variant:s,size:n,disabled:a}),e),b=t.jsxs(t.Fragment,{children:[h&&t.jsx("span",{"aria-hidden":"true",className:"rst:flex rst:shrink-0 rst:items-center rst:justify-center",children:h}),l]}),g=x&&t.jsx("button",{type:"button",disabled:a,onClick:j,"aria-label":N??(typeof l=="string"?`Remove ${l}`:"Remove"),className:c.cn("rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70","rst:after:absolute rst:after:-inset-2 rst:after:content-['']",d),children:t.jsx(q.FontAwesomeIcon,{icon:R.faXmark,className:"rst:h-3 rst:w-3","aria-hidden":"true"})});return y&&x?t.jsxs("span",{...f,onClick:u,ref:p,className:m,children:[t.jsx("button",{type:"button",disabled:a,"aria-pressed":!!i,onClick:()=>o(!i),className:c.cn("rst:inline-flex rst:items-center rst:gap-1.5",d),children:b}),g]}):y?t.jsx("button",{...f,ref:p,type:"button",disabled:a,"aria-pressed":!!i,onClick:O=>{u?.(O),o(!i)},className:c.cn(m,d),children:b}):t.jsxs("span",{...f,onClick:u,ref:p,className:m,children:[b,g]})});v.displayName="Chip";exports.Chip=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),R=require("react"),k=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),q=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),T=require("./chip-variants.cjs");function w(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return s.default=e,Object.freeze(s)}const C=w(R),d="rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2",E="rst:relative rst:before:absolute rst:before:inset-x-0 rst:before:top-1/2 rst:before:h-11 rst:before:-translate-y-1/2 rst:before:content-['']",v=C.forwardRef(({className:e,colorScheme:s,variant:r,size:n,leadingIcon:h,onRemove:j,removeLabel:N,onSelectedChange:c,selected:i,disabled:o=!1,children:l,onClick:u,...f},b)=>{const y=!!c,x=!!j,p=a.cn(T.chipVariants({colorScheme:s,variant:r,size:n,disabled:o}),e),m=t.jsxs(t.Fragment,{children:[h&&t.jsx("span",{"aria-hidden":"true",className:"rst:flex rst:shrink-0 rst:items-center rst:justify-center",children:h}),l]}),g=x&&t.jsx("button",{type:"button",disabled:o,onClick:j,"aria-label":N??(typeof l=="string"?`Remove ${l}`:"Remove"),className:a.cn("rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70","rst:after:absolute rst:after:-inset-2 rst:after:content-['']",d),children:t.jsx(k.FontAwesomeIcon,{icon:q.faXmark,className:"rst:h-3 rst:w-3","aria-hidden":"true"})});return y&&x?t.jsxs("span",{...f,onClick:u,ref:b,className:p,children:[t.jsx("button",{type:"button",disabled:o,"aria-pressed":!!i,onClick:()=>c(!i),className:a.cn("rst:inline-flex rst:items-center rst:gap-1.5",d),children:m}),g]}):y?t.jsx("button",{...f,ref:b,type:"button",disabled:o,"aria-pressed":!!i,onClick:O=>{u?.(O),c(!i)},className:a.cn(p,d,E),children:m}):t.jsxs("span",{...f,onClick:u,ref:b,className:p,children:[m,g]})});v.displayName="Chip";exports.Chip=v;

package/dist/components/atoms/Chip/Chip.js

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as r, jsxs as f, Fragment as w } from "react/jsx-runtime";
-import * as R from "react";
-import { FontAwesomeIcon as C } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faXmark as F } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { jsx as r, jsxs as m, Fragment as j } from "react/jsx-runtime";
+import * as w from "react";
+import { FontAwesomeIcon as E } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faXmark as T } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { chipVariants as O } from "./chip-variants.js";
-const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2", A = R.forwardRef(
+import { chipVariants as A } from "./chip-variants.js";
+const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:ring-offset-background rst:focus-visible:ring-offset-2", C = "rst:relative rst:before:absolute rst:before:inset-x-0 rst:before:top-1/2 rst:before:h-11 rst:before:-translate-y-1/2 rst:before:content-['']", L = w.forwardRef(
   ({
     className: v,
     colorScheme: N,
-    variant: g,
-    size: x,
+    variant: x,
+    size: g,
     leadingIcon: u,
     onRemove: b,
     removeLabel: k,
-    onSelectedChange: i,
+    onSelectedChange: o,
     selected: t,
     disabled: s = !1,
-    children: o,
+    children: i,
     onClick: n,
     ...a
   }, c) => {
-    const h = !!i, d = !!b, l = e(
-      O({ colorScheme: N, variant: g, size: x, disabled: s }),
+    const h = !!o, d = !!b, l = e(
+      A({ colorScheme: N, variant: x, size: g, disabled: s }),
       v
-    ), m = /* @__PURE__ */ f(w, { children: [
+    ), f = /* @__PURE__ */ m(j, { children: [
       u && /* `aria-hidden`, like Pill's leading slot. Without it a
       non-decorative icon — an Avatar, an `<img alt>` — joins the
       toggle's accessible name and not the dismiss button's, so the two
@@ -38,14 +38,14 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
           children: u
         }
       ),
-      o
+      i
     ] }), y = d && /* @__PURE__ */ r(
       "button",
       {
         type: "button",
         disabled: s,
         onClick: b,
-        "aria-label": k ?? (typeof o == "string" ? `Remove ${o}` : "Remove"),
+        "aria-label": k ?? (typeof i == "string" ? `Remove ${i}` : "Remove"),
         className: e(
           "rst:-mr-1 rst:relative rst:flex rst:shrink-0 rst:items-center rst:justify-center rst:opacity-70 rst:hover:opacity-100 rst:disabled:hover:opacity-70",
           /* WCAG 2.5.8 asks 24x24 CSS px for a pointer target, and the glyph
@@ -59,10 +59,10 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
           "rst:after:absolute rst:after:-inset-2 rst:after:content-['']",
           p
         ),
-        children: /* @__PURE__ */ r(C, { icon: F, className: "rst:h-3 rst:w-3", "aria-hidden": "true" })
+        children: /* @__PURE__ */ r(E, { icon: T, className: "rst:h-3 rst:w-3", "aria-hidden": "true" })
       }
     );
-    return h && d ? /* @__PURE__ */ f(
+    return h && d ? /* @__PURE__ */ m(
       "span",
       {
         ...a,
@@ -76,9 +76,9 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
               type: "button",
               disabled: s,
               "aria-pressed": !!t,
-              onClick: () => i(!t),
+              onClick: () => o(!t),
               className: e("rst:inline-flex rst:items-center rst:gap-1.5", p),
-              children: m
+              children: f
             }
           ),
           y
@@ -92,13 +92,13 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
         type: "button",
         disabled: s,
         "aria-pressed": !!t,
-        onClick: (j) => {
-          n?.(j), i(!t);
+        onClick: (R) => {
+          n?.(R), o(!t);
         },
-        className: e(l, p),
-        children: m
+        className: e(l, p, C),
+        children: f
       }
-    ) : /* @__PURE__ */ f(
+    ) : /* @__PURE__ */ m(
       "span",
       {
         ...a,
@@ -106,14 +106,14 @@ const p = "rst:cursor-pointer rst:disabled:cursor-not-allowed rst:rounded-full r
         ref: c,
         className: l,
         children: [
-          m,
+          f,
           y
         ]
       }
     );
   }
 );
-A.displayName = "Chip";
+L.displayName = "Chip";
 export {
-  A as Chip
+  L as Chip
 };

package/dist/components/atoms/Disclosure/Disclosure.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),y=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),r=require("../../../lib/utils.cjs"),i=require("./disclosure-variants.cjs"),q=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),v=({title:a,children:c,variant:e,className:l,defaultOpen:d=!1,isOpen:n,onToggle:u,icon:m,...x})=>{const[f,p]=b.useState(d),s=n!==void 0?n:f,h=()=>{const o=!s;n===void 0&&p(o),u?.(o)};return t.jsxs("div",{className:r.cn("rst:w-full rst:flex rst:flex-col",l),...x,children:[t.jsxs("button",{type:"button",onClick:h,"aria-expanded":s,className:r.cn(i.disclosureTriggerVariants({variant:e}),s?"rst:rounded-t-md rst:rounded-b-none":"rst:rounded-md",s&&e==="outline"&&"rst:border-b-transparent rst:dark:border-b-transparent"),children:[t.jsx("span",{className:"rst:flex-1 rst:text-left rst:text-inherit",children:a}),t.jsx("span",{className:r.cn("rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:text-inherit",s?"rst:rotate-180":""),children:m||t.jsx(j.FontAwesomeIcon,{icon:y.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:opacity-60"})})]}),t.jsx(q.Transition,{show:s,enter:"rst:transition rst:duration-100 rst:ease-out",enterFrom:"rst:transform rst:scale-95 rst:opacity-0",enterTo:"rst:transform rst:scale-100 rst:opacity-100",leave:"rst:transition rst:duration-75 rst:ease-out",leaveFrom:"rst:transform rst:scale-100 rst:opacity-100",leaveTo:"rst:transform rst:scale-95 rst:opacity-0",children:t.jsx("div",{className:r.cn(i.disclosureContentVariants({variant:e}),"rst:rounded-b-md"),children:c})})]})};exports.Disclosure=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),N=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),w=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),s=require("../../../lib/utils.cjs"),l=require("./disclosure-variants.cjs"),y=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),S=({title:u,children:x,variant:r,className:m,defaultOpen:f=!1,isOpen:n,onToggle:p,icon:h,...b})=>{const[j,q]=a.useState(f),t=n!==void 0?n:j,i=a.useId(),[o,c]=a.useState(t);t&&!o&&c(!0);const v=()=>{const d=!t;n===void 0&&q(d),p?.(d)};return e.jsxs("div",{className:s.cn("rst:w-full rst:flex rst:flex-col",m),...b,children:[e.jsxs("button",{type:"button",onClick:v,"aria-expanded":t,"aria-controls":o?i:void 0,className:s.cn(l.disclosureTriggerVariants({variant:r}),t?"rst:rounded-t-md rst:rounded-b-none":"rst:rounded-md",t&&r==="outline"&&"rst:border-b-transparent rst:dark:border-b-transparent"),children:[e.jsx("span",{className:"rst:flex-1 rst:text-left rst:text-inherit",children:u}),e.jsx("span",{className:s.cn("rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:motion-reduce:transition-none rst:text-inherit",t?"rst:rotate-180":""),children:h||e.jsx(N.FontAwesomeIcon,{icon:w.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:opacity-60"})})]}),e.jsx(y.Transition,{show:t,afterLeave:()=>c(!1),children:e.jsx("div",{id:i,"data-testid":"disclosure-panel",className:s.cn(l.disclosureContentVariants({variant:r}),"rst:rounded-b-md","rst:transition rst:duration-100 rst:ease-out rst:data-leave:duration-75","rst:data-closed:opacity-0 rst:motion-safe:data-closed:scale-95"),children:x})})]})};exports.Disclosure=S;

package/dist/components/atoms/Disclosure/Disclosure.js

@@ -1,53 +1,56 @@
 "use client";
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { FontAwesomeIcon as v } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as y } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as c, useId as C } from "react";
+import { FontAwesomeIcon as I } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as k } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as s } from "../../../lib/utils.js";
-import { disclosureTriggerVariants as N, disclosureContentVariants as w } from "./disclosure-variants.js";
-import { Transition as C } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const O = ({
-  title: i,
-  children: c,
+import { disclosureTriggerVariants as y, disclosureContentVariants as g } from "./disclosure-variants.js";
+import { Transition as j } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+const F = ({
+  title: m,
+  children: u,
   variant: e,
-  className: l,
-  defaultOpen: m = !1,
+  className: f,
+  defaultOpen: p = !1,
   isOpen: n,
-  onToggle: d,
-  icon: f,
-  ...p
+  onToggle: x,
+  icon: h,
+  ...b
 }) => {
-  const [u, x] = b(m), t = n !== void 0 ? n : u, h = () => {
-    const o = !t;
-    n === void 0 && x(o), d?.(o);
+  const [v, N] = c(p), t = n !== void 0 ? n : v, o = C(), [a, i] = c(t);
+  t && !a && i(!0);
+  const w = () => {
+    const d = !t;
+    n === void 0 && N(d), x?.(d);
   };
-  return /* @__PURE__ */ a("div", { className: s("rst:w-full rst:flex rst:flex-col", l), ...p, children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ l("div", { className: s("rst:w-full rst:flex rst:flex-col", f), ...b, children: [
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        onClick: h,
+        onClick: w,
         "aria-expanded": t,
+        "aria-controls": a ? o : void 0,
         className: s(
-          N({ variant: e }),
+          y({ variant: e }),
           // Dynamic rounding and border fix
           t ? "rst:rounded-t-md rst:rounded-b-none" : "rst:rounded-md",
           // If it's the outline variant and it's open, remove the bottom border so it merges seamlessly with the content box
           t && e === "outline" && "rst:border-b-transparent rst:dark:border-b-transparent"
         ),
         children: [
-          /* @__PURE__ */ r("span", { className: "rst:flex-1 rst:text-left rst:text-inherit", children: i }),
+          /* @__PURE__ */ r("span", { className: "rst:flex-1 rst:text-left rst:text-inherit", children: m }),
           /* @__PURE__ */ r(
             "span",
             {
               className: s(
-                "rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:text-inherit",
+                "rst:ml-2 rst:flex rst:items-center rst:transition-transform rst:duration-200 rst:motion-reduce:transition-none rst:text-inherit",
                 t ? "rst:rotate-180" : ""
               ),
-              children: f || /* @__PURE__ */ r(
-                v,
+              children: h || /* @__PURE__ */ r(
+                I,
                 {
-                  icon: y,
+                  icon: k,
                   className: "rst:h-3.5 rst:w-3.5 rst:opacity-60"
                 }
               )
@@ -56,27 +59,22 @@ const O = ({
         ]
       }
     ),
-    /* @__PURE__ */ r(
-      C,
+    /* @__PURE__ */ r(j, { show: t, afterLeave: () => i(!1), children: /* @__PURE__ */ r(
+      "div",
       {
-        show: t,
-        enter: "rst:transition rst:duration-100 rst:ease-out",
-        enterFrom: "rst:transform rst:scale-95 rst:opacity-0",
-        enterTo: "rst:transform rst:scale-100 rst:opacity-100",
-        leave: "rst:transition rst:duration-75 rst:ease-out",
-        leaveFrom: "rst:transform rst:scale-100 rst:opacity-100",
-        leaveTo: "rst:transform rst:scale-95 rst:opacity-0",
-        children: /* @__PURE__ */ r(
-          "div",
-          {
-            className: s(w({ variant: e }), "rst:rounded-b-md"),
-            children: c
-          }
-        )
+        id: o,
+        "data-testid": "disclosure-panel",
+        className: s(
+          g({ variant: e }),
+          "rst:rounded-b-md",
+          "rst:transition rst:duration-100 rst:ease-out rst:data-leave:duration-75",
+          "rst:data-closed:opacity-0 rst:motion-safe:data-closed:scale-95"
+        ),
+        children: u
       }
-    )
+    ) })
   ] });
 };
 export {
-  O as Disclosure
+  F as Disclosure
 };

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 r=require("react/jsx-runtime"),g=require("react"),V=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),k=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),w=require("../../../node_modules/@headlessui/react/dist/components/input/input.cjs"),P=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),t=require("../../../lib/utils.cjs"),o=require("./input-variants.cjs"),m=g.forwardRef(({className:x,type:f,label:d,helperText:u,errorMessage:e,variant:i,size:n,error:v,startIcon:a,endIcon:l,disabled:p,inputClassName:j,...q},N)=>{const s=!!e||v,{"aria-invalid":c,invalid:b,...h}=q,y=!!b||c!==void 0&&c!==!1&&c!=="false";return r.jsxs(k.Field,{disabled:p,className:t.cn("rst:w-full",x),children:[d&&r.jsx(P.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:d}),r.jsxs("div",{className:"rst:relative",children:[a&&r.jsx("div",{className:t.cn(o.iconVariants({variant:i,error:s}),"rst:left-3"),children:a}),r.jsx(w.Input,{ref:N,type:f,disabled:p,className:t.cn(o.inputVariants({variant:i,size:n,error:s}),a&&(n==="sm"?"rst:pl-9":"rst:pl-10"),l&&(n==="sm"?"rst:pr-9":"rst:pr-10"),j),...h,invalid:y}),l&&r.jsx("div",{className:t.cn(o.iconVariants({variant:i,error:s}),"rst:right-3"),children:l})]}),(u||e)&&r.jsx(V.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;