@blakesteve/roster 5.11.0 → 5.13.0

package/README.md

@@ -555,6 +555,44 @@ the ring with it. In `Menu` the ring shows for keyboard focus only, because the
 pointer moves focus there too. Headless UI's popups mark the keys' row and the
 pointer's alike, so in theirs it shows on hover as well.
 
+**Keyboard focus shows in Safari too.** Every ring is drawn on Roster's
+`focus-visible` variant, which matches the engine's own `:focus-visible` or an
+element marked `data-key-focus`. WebKit doesn't match `:focus-visible` on an
+element a script focuses in answer to a key once the page has been clicked.
+Escape handing focus back to a menu's or a select's trigger, or to a dialog's
+opener, and a radio group's or tabs' arrows all drew no ring in Safari after
+a click. A small tracker marks those elements: keyboard mode starts on a navigation key (Tab, Option+Tab, the
+arrows, Escape, Enter, Space, Home, End, PageUp, PageDown) and ends on pointer
+input, and it marks only what Chromium's own `:focus-visible` already matches,
+so Chromium's rings are unchanged. It runs while a component that moves focus
+is mounted (Menu, the select family, Dialog, Sheet, RadioGroup, LiquidTabs,
+Slider and the rest), on one set of document listeners.
+
+Your own components' rings come from your Tailwind, not Roster's, so they
+don't follow the mark on their own. To have them do the same, redefine the
+variant in your stylesheet as Roster does:
+
+```css
+@custom-variant focus-visible (&:is(:focus-visible, [data-key-focus]));
+```
+
+The variant is enough for your rings on a page where one of Roster's
+components has the tracker running. A control of your own that moves focus by
+script in answer to a key, arrows around a hand-drawn wheel or a grid that
+roves its own focus, shouldn't count on one: call `useKeyFocus()` in it, and
+the tracker runs while it's mounted. The listeners are shared, so it costs
+nothing beside Roster's own components. `KEY_FOCUS` is the attribute's name,
+for a selector or a test.
+
+```tsx
+import { useKeyFocus } from "@blakesteve/roster";
+
+function Wheel() {
+  useKeyFocus();
+  // arrows move focus between the stops with stop.focus(); rings on focus-visible:
+}
+```
+
 ### Motion
 
 Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
@@ -744,11 +782,10 @@ opens are also legitimately different surfaces in plenty of palettes.
 **Set these at `:root`, not on a container.** The menu and the tooltip bubble
 are portaled to `<body>`, so they are not descendants of whatever you rendered
 the component inside: properties set on a wrapper reach the trigger and stop
-there. Any ancestor of `<body>` works — `:root` is simply the one that always
-is, which is also why the `.dark` block below reaches a menu whose `.dark`
-scope `Select` copies across the portal. The result is a themed trigger opening an unthemed panel, which is the
-exact problem this family exists to fix. Set them in both scopes too, for the
-same reason the control family needs both.
+there, and the result is a themed trigger opening an unthemed panel, which is
+the exact problem this family exists to fix. Any ancestor of `<body>` works:
+`:root`, `html.dark`, or inline on `<html>` all reach every panel. Set them in
+both scopes too, for the same reason the control family needs both.
 
 Where each component takes them, and why not everywhere:
 
@@ -939,9 +976,12 @@ look like oversights until you know why:
   variable that inline rule reads:
   `optionsClassName="rst:[--anchor-max-height:20rem]"`.
 - **The panel is portaled to `<body>`**, so a `.dark` scoped to part of your
-  page does not reach it. All three components copy the nearest `.dark` onto
-  the panel to fix that. Custom properties are not carried the same way — set
-  `--roster-popover-*` at `:root`.
+  page does not reach it. The panel carries `.dark` itself in that case, and
+  only then: when `.dark` is on `<html>` or `<body>` the panel is already
+  inside it, and carrying the class would re-declare Roster's palette on the
+  panel over your own. Every portaled surface does the same (`Menu`, `Sheet`
+  and the toasts too). Custom properties are not carried: set
+  `--roster-popover-*` on an ancestor of `<body>`.
 - **A row is a click target, and focus is a ring.** Every option row shows
   the pointer cursor, as `Menu`'s items do (a disabled one, `not-allowed`).
   A focused row keeps its tint and adds an inset `--roster-ring`, which is
@@ -1329,6 +1369,10 @@ What it promises:
   item's decision.
 - **Steps take focus and give it back.** Escape or Cancel returns focus to the
   button that opened the step.
+- **A blocked step says why, plainly.** A step that can't be submitted yet (a
+  reason not picked, an edit with nothing changed) says why in plain text,
+  and its submit is described by it. A submit tried anyway decides nothing
+  and turns the reason into an error.
 - **An item that disappears** (another reviewer, a reload) with its step open
   closes the step without deciding, and is announced once as decided
   elsewhere. Without a step, it moves focus only if focus was inside it.
@@ -1337,10 +1381,11 @@ What it promises:
 - **Phones.** Every button is 44px tall at every width, and nothing scrolls
   sideways at 320px. Nothing animates as an item leaves.
 
-Counts for a tab badge need no API: the app holds the items, so it's
-`items.length`. `MediaPreview` is the thumbnail to use in an item: when the
-image can't render (an expired link, a format the browser can't draw), it
-falls back to a link to the original in the same footprint.
+Counts for a tab need no API: the app holds the items, so it's
+`items.length`, passed as a `LiquidTabs` tab's `count`. `MediaPreview` is the
+thumbnail to use in an item: when the image can't render (an expired link, a
+format the browser can't draw), it falls back to a link to the original in the
+same footprint.
 
 ### FileUpload
 
@@ -1650,6 +1695,10 @@ import { Slider } from "@blakesteve/roster";
   still lands anywhere between them. A chip shows as pressed (solid rather
   than outline) while the value is exactly its value, and pressing it again
   leaves it there. A point outside `min` to `max` is left out.
+- **The label** is a string or a node, so it can carry markup; the slider is
+  named by reference to it, so what's read is its text. A consumer's own
+  `aria-labelledby` names it instead, as when the visible label is shared and
+  each slider needs its own name.
 - **The number** shows beside the label (`formatValue` writes it). A screen
   reader hears it with the nearest snap point's name, "72%, Likely", and
   "Not set" while there's no value, never a number. Every string is in
@@ -1724,6 +1773,8 @@ import { RangeSlider } from "@blakesteve/roster";
 - **Snap points** put a bead on the rail and a `Chip` under it, which does
   what a tap on its mark does: moves the nearer thumb there (halfway, the
   low one). A chip shows as pressed while either thumb is on it.
+- **The label** takes a node too, and names the group and each thumb by
+  reference; a consumer's `aria-labelledby` names them instead.
 - **The number** beside the label shows both, "$120 – $340"
   (`labels.range`). Each thumb says its own value with the nearest snap
   point's name.
@@ -1849,6 +1900,71 @@ contained. Under reduced motion every scroll the component makes is instant.
 `showPosition` shows "2 of 5", which is also each item's name and is announced
 politely when it changes.
 
+### LiquidTabs
+
+A tab strip with a sliding pill, on the WAI tabs pattern: one tab stop, arrows
+that wrap, Home and End, and `activation="manual"` for tabs that are costly to
+switch. `LiquidNav` is the same strip as a `nav` of links.
+
+**Counts.** A tab or a nav link takes `count`, shown in a small mark after its
+label:
+
+```tsx
+<LiquidTabs tabs={[{ id: "queue", label: "Queue", count: queue.length }, …]} … />
+```
+
+The count is part of the name, "Queue, 12 items" rather than "Queue12" or
+"Queue (12)", and its words come from `labels`, English by default with a
+plural. Name your own noun, and use `Intl.PluralRules` for a language with
+more than two forms:
+
+```tsx
+labels={{ count: (n) => (n === 1 ? "1 game" : `${n.toLocaleString()} games`) }}
+```
+
+- **Zero shows,** as "0" and "Queue, 0 items": an empty queue is worth
+  saying. To show no count, pass `undefined`.
+- **A count that isn't a whole number from zero** (negative, a fraction,
+  `NaN`) shows nothing, as if there were none, rather than being rounded or
+  clamped into a number nobody passed.
+- **Large counts are written whole,** "12,345", in the mark and the name. To
+  shorten the mark, pass `labels.countMark` (`(n) => "12K"`); the name stays
+  whole, since a screen reader has no width to save.
+- **The mark is drawn from the tab's own text color:** its number in that
+  color on a 12% tint of it. So it follows the tab through every state, both
+  variants and both themes, and through any palette set on the
+  `--roster-lt-*` tokens, and its number clears 4.5:1 in every state on
+  Roster's own (4.88:1 at the least). `Badge` and `Pill` each draw from a fixed
+  palette, which on the selected tab would be a second chip sitting on the
+  pill.
+- **The pill follows,** re-measuring when a count widens its tab or one
+  before it.
+
+**The panel.** `LiquidTabPanel` is the `role="tabpanel"` a tab controls, paired
+with it by construction: its `id` is the tab's `panelId`, and its
+`aria-labelledby` points at the tab through `liquidTabId`, so the panel takes
+the tab's name, count included. Give the `LiquidTabs` an `id` to pair it with.
+One panel that swaps its content, or a panel per tab:
+
+```tsx
+// One panel: every tab carries the same panelId, and `tab` is the selected one.
+<LiquidTabs id="lists" tabs={tabs.map((t) => ({ ...t, panelId: "lists-panel" }))} activeTab={list} onChange={setList} />
+<LiquidTabPanel tabsId="lists" id="lists-panel" tab={list}>…</LiquidTabPanel>
+
+// A panel per tab: each its own panelId, and every panel gets activeTab.
+<LiquidTabPanel tabsId="views" id="views-board" tab="board" activeTab={view}>…</LiquidTabPanel>
+<LiquidTabPanel tabsId="views" id="views-list" tab="list" activeTab={view} keepMounted>…</LiquidTabPanel>
+```
+
+Per tab, a panel that isn't selected stays in the page, hidden, so every tab's
+`aria-controls` points at something, and renders no content. `keepMounted`
+keeps its content mounted, so a half-filled form or a scroll position survives
+a switch away and back. A panel with nothing inside it to Tab to is itself in
+the tab order (`tabIndex={0}`), as the WAI pattern asks, so a keyboard user
+can reach what they just selected; it leaves the tab order once its content
+holds a link, a button or a field, rechecked as the content changes. Pass
+`tabIndex` to decide it yourself.
+
 ### Components that render links
 
 `Breadcrumbs` renders a plain `<a>` by default, which is right for a static
@@ -1870,8 +1986,10 @@ 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.
+`data-tab-id`, which it must forward to the DOM, and `aria-label` when the
+link has a count (forward it too; a component that doesn't still gets a name
+with the count in it). 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}`.
@@ -1897,7 +2015,8 @@ Dialog or Sheet), alongside `Pagination`, the loading system and DataTable's
 instead, and 5.8.0 adds the ones that were missing: MultiSelect's
 `countLabel`, DataTable's `emptyMessage` and MediaPreview's `newTabLabel`, next
 to the existing `dismissLabel`, `placeholder`, `removeLabel`, `prevLabel` and
-the like. Words that take a number or a name are functions, so a language
+the like. `LiquidTabs` and `LiquidNav` take `labels` for the words a count
+says. Words that take a number or a name are functions, so a language
 whose word changes with the count can say so. An entry passed as `undefined`
 (a catalog missing a key) keeps its English rather than leaving a control
 unnamed.
@@ -2009,7 +2128,8 @@ function App() {
 | `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     |
+| `LiquidTabs`      | Tab strip with a sliding pill; arrow keys, roving focus, counts, 44px `lg` size (see [LiquidTabs](#liquidtabs)) |
+| `LiquidTabPanel`  | The panel a `LiquidTabs` tab controls, named for its tab by construction; one swapping panel or one per tab |
 | `MatchupCard`     | Head-to-head comparison card                                                |
 | `MediaPreview`    | Thumbnail that falls back to "Preview unavailable, open original" when it can't render |
 | `Menu`            | A button's menu of actions: icons, shortcuts, checkbox and radio items, links, groups, submenus; the full keyboard pattern, 44px targets (see [Menu](#menu)) |
@@ -2096,6 +2216,7 @@ the one that can not be affected by a future change to the barrel.
 | Hook             | Description                                                                     |
 | ---------------- | ------------------------------------------------------------------------------- |
 | `useCountdown`   | Countdown timer logic without the UI; `days` counts the whole remaining total   |
+| `useKeyFocus`    | Keeps keyboard focus ringed in Safari for your own control that moves focus by script (see [Focus](#focus)). Ships `KEY_FOCUS` |
 | `useKeySequence` | Fires a callback when a sequence of keys is typed in order. Ships `KONAMI_CODE` |
 
 ## Authoring components: the `rst:` prefix

package/dist/components/atoms/Chip/chip-variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:inline-flex rst:items-center rst:rounded-full rst:font-medium rst:whitespace-nowrap rst:align-middle rst:transition-colors",{variants:{colorScheme:{primary:"",success:"",error:"",amber:"",info:"",neutral:""},variant:{soft:"",outline:"rst:bg-transparent rst:border",solid:""},size:{sm:"rst:text-xs rst:px-2.5 rst:py-0.5 rst:gap-1.5",md:"rst:text-sm rst:px-3 rst:py-1 rst:gap-2"},disabled:{true:"rst:opacity-50 rst:cursor-not-allowed",false:""}},compoundVariants:[{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:dark:bg-primary-500/15 rst:dark:text-primary-300"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:dark:bg-success-500/15 rst:dark:text-success-300"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:dark:bg-error-500/15 rst:dark:text-error-300"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:dark:bg-amber-500/15 rst:dark:text-amber-300"},{variant:"soft",colorScheme:"info",className:"rst:bg-info-50 rst:text-info-700 rst:dark:bg-info-500/15 rst:dark:text-info-300"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:dark:bg-gray-500/15 rst:dark:text-gray-300"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-700 rst:dark:border-primary-400 rst:dark:text-primary-300"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-700 rst:dark:border-success-400 rst:dark:text-success-300"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-700 rst:dark:border-error-400 rst:dark:text-error-300"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-800 rst:dark:border-amber-400 rst:dark:text-amber-300"},{variant:"outline",colorScheme:"info",className:"rst:border-info-600 rst:text-info-700 rst:dark:border-info-400 rst:dark:text-info-300"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-600 rst:text-gray-700 rst:dark:border-gray-400 rst:dark:text-gray-300"},{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-500 rst:text-primary-500-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-500 rst:text-success-500-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-500 rst:text-error-500-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-500 rst:text-amber-500-ink"},{variant:"solid",colorScheme:"info",className:"rst:bg-info-500 rst:text-info-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:dark:bg-gray-500 rst:text-gray-600-ink rst:dark:text-gray-500-ink"}],defaultVariants:{colorScheme:"neutral",variant:"soft",size:"md",disabled:!1}});exports.chipVariants=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../node_modules/class-variance-authority/dist/index.cjs"),t=r.cva("rst:font-ui rst:inline-flex rst:items-center rst:rounded-full rst:border rst:border-transparent rst:font-medium rst:whitespace-nowrap rst:align-middle rst:transition-colors",{variants:{colorScheme:{primary:"",success:"",error:"",amber:"",info:"",neutral:""},variant:{soft:"",outline:"rst:bg-transparent",solid:""},size:{sm:"rst:text-xs rst:px-2.5 rst:py-0.5 rst:gap-1.5",md:"rst:text-sm rst:px-3 rst:py-1 rst:gap-2"},disabled:{true:"rst:opacity-50 rst:cursor-not-allowed",false:""}},compoundVariants:[{variant:"soft",colorScheme:"primary",className:"rst:bg-primary-50 rst:text-primary-700 rst:dark:bg-primary-500/15 rst:dark:text-primary-300"},{variant:"soft",colorScheme:"success",className:"rst:bg-success-50 rst:text-success-700 rst:dark:bg-success-500/15 rst:dark:text-success-300"},{variant:"soft",colorScheme:"error",className:"rst:bg-error-50 rst:text-error-700 rst:dark:bg-error-500/15 rst:dark:text-error-300"},{variant:"soft",colorScheme:"amber",className:"rst:bg-amber-50 rst:text-amber-800 rst:dark:bg-amber-500/15 rst:dark:text-amber-300"},{variant:"soft",colorScheme:"info",className:"rst:bg-info-50 rst:text-info-700 rst:dark:bg-info-500/15 rst:dark:text-info-300"},{variant:"soft",colorScheme:"neutral",className:"rst:bg-gray-100 rst:text-gray-700 rst:dark:bg-gray-500/15 rst:dark:text-gray-300"},{variant:"outline",colorScheme:"primary",className:"rst:border-primary-600 rst:text-primary-700 rst:dark:border-primary-400 rst:dark:text-primary-300"},{variant:"outline",colorScheme:"success",className:"rst:border-success-600 rst:text-success-700 rst:dark:border-success-400 rst:dark:text-success-300"},{variant:"outline",colorScheme:"error",className:"rst:border-error-600 rst:text-error-700 rst:dark:border-error-400 rst:dark:text-error-300"},{variant:"outline",colorScheme:"amber",className:"rst:border-amber-600 rst:text-amber-800 rst:dark:border-amber-400 rst:dark:text-amber-300"},{variant:"outline",colorScheme:"info",className:"rst:border-info-600 rst:text-info-700 rst:dark:border-info-400 rst:dark:text-info-300"},{variant:"outline",colorScheme:"neutral",className:"rst:border-gray-600 rst:text-gray-700 rst:dark:border-gray-400 rst:dark:text-gray-300"},{variant:"solid",colorScheme:"primary",className:"rst:bg-primary-500 rst:text-primary-500-ink"},{variant:"solid",colorScheme:"success",className:"rst:bg-success-500 rst:text-success-500-ink"},{variant:"solid",colorScheme:"error",className:"rst:bg-error-500 rst:text-error-500-ink"},{variant:"solid",colorScheme:"amber",className:"rst:bg-amber-500 rst:text-amber-500-ink"},{variant:"solid",colorScheme:"info",className:"rst:bg-info-500 rst:text-info-500-ink"},{variant:"solid",colorScheme:"neutral",className:"rst:bg-gray-600 rst:dark:bg-gray-500 rst:text-gray-600-ink rst:dark:text-gray-500-ink"}],defaultVariants:{colorScheme:"neutral",variant:"soft",size:"md",disabled:!1}});exports.chipVariants=t;

package/dist/components/atoms/Chip/chip-variants.js

@@ -1,6 +1,12 @@
 import { cva as r } from "../../../node_modules/class-variance-authority/dist/index.js";
 const s = /* @__PURE__ */ r(
-  "rst:font-ui rst:inline-flex rst:items-center rst:rounded-full rst:font-medium rst:whitespace-nowrap rst:align-middle rst:transition-colors",
+  /* A border on every variant, transparent where the variant draws none, so
+     every variant is one size. Only `outline` had one, so a chip that swaps
+     `outline` for `solid` when selected, as a filter row and a slider's snap
+     chips do, lost the border's width on both sides at the press and the row
+     jumped. A transparent border costs nothing to see: the fill paints under
+     it. Its width is `--roster-border-width`, like every edge. */
+  "rst:font-ui rst:inline-flex rst:items-center rst:rounded-full rst:border rst:border-transparent rst:font-medium rst:whitespace-nowrap rst:align-middle rst:transition-colors",
   {
     variants: {
       colorScheme: {
@@ -13,7 +19,7 @@ const s = /* @__PURE__ */ r(
       },
       variant: {
         soft: "",
-        outline: "rst:bg-transparent rst:border",
+        outline: "rst:bg-transparent",
         solid: ""
       },
       size: {

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"),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;
+"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"),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"),h=require("../../../internal/field-invalid.cjs"),V=require("../Input/input-variants.cjs"),E=require("../../../internal/PopupOption.cjs"),c=require("../../../internal/popup.cjs"),H=require("../../../internal/key-focus.cjs");function B(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 K=B(j),Q=(t,s)=>{const r=s.trim().toLowerCase();return r?t.filter(n=>n.label.toLowerCase().includes(r)):t},W=({options:t,value:s,onChange:r,placeholder:n="Search...",disabled:x=!1,variant:m,size:l,error:P,label:p,helperText:b,errorMessage:u,className:q,inputClassName:O,optionsClassName:g,emptyMessage:N="No matches",filter:C=Q,...f})=>{H.useKeyFocus();const[k,v]=K.useState(""),{ref:F,inDarkScope:w}=c.useDarkScope(),d=!!u||P,D=h.isFieldInvalid(d,f),I=h.withoutInvalidProps(f),y=C(t,k),S=t.find(o=>o.value===s)??null;return e.jsxs(L.Field,{disabled:x,className:i.cn("rst:flex rst:flex-col rst:gap-1.5",q),...I,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:F,className:"rst:relative",children:[e.jsx(a.ComboboxInput,{"aria-invalid":D||void 0,className:i.cn(V.inputVariants({variant:m,size:l,error:d}),O,"rst:pr-9"),placeholder:n,displayValue:()=>S?.label??"",onChange:o=>v(o.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",l==="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:j.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:c.POPUP_ANCHOR,className:i.cn(c.popupInDarkPalette(w,m)&&"dark",c.POPUP_PANEL,c.POPUP_WIDTH_OF_INPUT,g),children:y.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",l==="sm"&&"rst:px-3 rst:py-2"),children:N}):y.map(o=>e.jsx(E.PopupOption,{as:a.ComboboxOption,value:o.value,disabled:o.disabled,size:l,children:o.label},o.value))})})]})}),(b||u)&&e.jsx(_.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

@@ -8,16 +8,17 @@ import { Field as T } from "../../../node_modules/@headlessui/react/dist/compone
 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 { faChevronDown as K } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as e } from "../../../lib/utils.js";
-import { isFieldInvalid as W, withoutInvalidProps as K } from "../../../internal/field-invalid.js";
+import { isFieldInvalid as V, withoutInvalidProps as W } 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) => {
+import { useKeyFocus as M } from "../../../internal/key-focus.js";
+const z = (s, o) => {
   const a = o.trim().toLowerCase();
   return a ? s.filter((l) => l.label.toLowerCase().includes(a)) : s;
-}, ft = ({
+}, xt = ({
   options: s,
   value: o,
   onChange: a,
@@ -25,23 +26,24 @@ const M = (s, o) => {
   disabled: c = !1,
   variant: d,
   size: i,
-  error: P,
+  error: y,
   label: p,
   helperText: f,
-  errorMessage: n,
-  className: y,
+  errorMessage: m,
+  className: P,
   inputClassName: N,
   optionsClassName: C,
   emptyMessage: k = "No matches",
-  filter: g = M,
+  filter: g = z,
   ...u
 }) => {
-  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;
+  M();
+  const [F, x] = U.useState(""), { ref: O, inDarkScope: w } = G(), n = !!m || y, I = V(n, u), D = W(u), h = g(s, F), L = s.find((r) => r.value === o) ?? null;
   return /* @__PURE__ */ b(
     T,
     {
       disabled: c,
-      className: e("rst:flex rst:flex-col rst:gap-1.5", y),
+      className: e("rst:flex rst:flex-col rst:gap-1.5", P),
       ...D,
       children: [
         p && /* @__PURE__ */ t(q, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: p }),
@@ -51,13 +53,13 @@ const M = (s, o) => {
             value: o ?? null,
             onChange: a,
             disabled: c,
-            children: /* @__PURE__ */ b("div", { ref: w, className: "rst:relative", children: [
+            children: /* @__PURE__ */ b("div", { ref: O, className: "rst:relative", children: [
               /* @__PURE__ */ t(
                 S,
                 {
                   "aria-invalid": I || void 0,
                   className: e(
-                    Q({ variant: d, size: i, error: m }),
+                    Q({ variant: d, size: i, error: n }),
                     N,
                     "rst:pr-9"
                   ),
@@ -76,7 +78,7 @@ const M = (s, o) => {
                   children: /* @__PURE__ */ t(
                     E,
                     {
-                      icon: V,
+                      icon: K,
                       className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                       "aria-hidden": "true"
                     }
@@ -96,7 +98,7 @@ const M = (s, o) => {
                     {
                       anchor: J,
                       className: e(
-                        $(F, d) && "dark",
+                        $(w, d) && "dark",
                         Y,
                         /* `--input-width`, not `--button-width`: the button here is
                            the chevron, so matching it renders a 20px sliver. */
@@ -132,14 +134,14 @@ const M = (s, o) => {
             ] })
           }
         ),
-        (f || n) && /* @__PURE__ */ t(
+        (f || m) && /* @__PURE__ */ t(
           R,
           {
             className: e(
               "rst:text-xs rst:text-left",
-              m ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
+              n ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
-            children: n || f
+            children: m || f
           }
         )
       ]
@@ -147,5 +149,5 @@ const M = (s, o) => {
   );
 };
 export {
-  ft as Combobox
+  xt as Combobox
 };

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

package/dist/components/atoms/MultiSelect/MultiSelect.js

@@ -1,20 +1,21 @@
 "use client";
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import V, { Fragment as W } from "react";
-import { Description as Y } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as C } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as K } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
+import K, { Fragment as V } from "react";
+import { Description as W } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Field as Y } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Label as C } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
 import { Listbox as X, ListboxButton as Z, ListboxOptions as q, ListboxOption as G } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
 import { Transition as J } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { FontAwesomeIcon as T } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { FontAwesomeIcon as F } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
 import { faChevronDown as Q, faXmark as z } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as n } from "../../../lib/utils.js";
 import { isFieldInvalid as tt, withoutInvalidProps as rt } from "../../../internal/field-invalid.js";
 import { selectTriggerVariants as et } from "../Select/select-variants.js";
-import { Chip as F } from "../Chip/Chip.js";
+import { Chip as T } from "../Chip/Chip.js";
 import { PopupOption as st } from "../../../internal/PopupOption.js";
 import { useDarkScope as nt, POPUP_ANCHOR as ot, POPUP_WIDTH_OF_BUTTON as it, POPUP_PANEL as at, popupInDarkPalette as lt } from "../../../internal/popup.js";
-const Pt = ({
+import { useKeyFocus as ct } from "../../../internal/key-focus.js";
+const Ot = ({
   options: u,
   value: o,
   onChange: p,
@@ -37,22 +38,23 @@ const Pt = ({
   clearLabel: E = "Clear selection",
   removeLabel: U = (e) => `Remove ${e}`,
   countLabel: I = (e) => `${e} selected`,
-  ...P
+  ...y
 }) => {
-  const e = !!h || R, $ = tt(e, P), A = rt(P), a = o.length > 0, y = new Map(u.map((t, s) => [t.value, s])), m = o.map((t) => ({
+  ct();
+  const e = !!h || R, $ = tt(e, y), A = rt(y), a = o.length > 0, P = new Map(u.map((t, s) => [t.value, s])), m = o.map((t) => ({
     value: t,
     label: u.find((s) => s.value === t)?.label ?? String(t)
   })).sort(
-    (t, s) => (y.get(t.value) ?? Number.POSITIVE_INFINITY) - (y.get(s.value) ?? Number.POSITIVE_INFINITY)
-  ), O = g === void 0 ? m : m.slice(0, g), S = m.length - O.length, { ref: B, inDarkScope: M } = nt(), _ = V.useRef(null);
+    (t, s) => (P.get(t.value) ?? Number.POSITIVE_INFINITY) - (P.get(s.value) ?? Number.POSITIVE_INFINITY)
+  ), O = g === void 0 ? m : m.slice(0, g), S = m.length - O.length, { ref: B, inDarkScope: M } = nt(), _ = K.useRef(null);
   return /* @__PURE__ */ d(
-    C,
+    Y,
     {
       disabled: l,
       className: n("rst:flex rst:flex-col rst:gap-1.5", D),
       ...A,
       children: [
-        b && /* @__PURE__ */ r(K, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: b }),
+        b && /* @__PURE__ */ r(C, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: b }),
         /* @__PURE__ */ r(X, { value: o, onChange: p, disabled: l, multiple: !0, children: /* @__PURE__ */ d("div", { ref: B, className: "rst:relative", children: [
           /* @__PURE__ */ d(
             "div",
@@ -98,7 +100,7 @@ const Pt = ({
                   }
                 ),
                 a && c === "chips" && O.map((t, s) => /* @__PURE__ */ r(
-                  F,
+                  T,
                   {
                     size: "sm",
                     variant: w,
@@ -116,7 +118,7 @@ const Pt = ({
                   `${s}-${String(t.value)}`
                 )),
                 S > 0 && c === "chips" && /* @__PURE__ */ d(
-                  F,
+                  T,
                   {
                     size: "sm",
                     variant: w,
@@ -137,7 +139,7 @@ const Pt = ({
                       i === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                     ),
                     children: /* @__PURE__ */ r(
-                      T,
+                      F,
                       {
                         icon: Q,
                         className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
@@ -167,7 +169,7 @@ const Pt = ({
                       i === "sm" ? "rst:right-7" : "rst:right-8"
                     ),
                     children: /* @__PURE__ */ r(
-                      T,
+                      F,
                       {
                         icon: z,
                         className: "rst:h-3.5 rst:w-3.5",
@@ -182,7 +184,7 @@ const Pt = ({
           /* @__PURE__ */ r(
             J,
             {
-              as: W,
+              as: V,
               leave: "rst:transition rst:ease-in rst:duration-100",
               leaveFrom: "rst:opacity-100",
               leaveTo: "rst:opacity-0",
@@ -213,7 +215,7 @@ const Pt = ({
           )
         ] }) }),
         (x || h) && /* @__PURE__ */ r(
-          Y,
+          W,
           {
             className: n(
               "rst:text-xs rst:text-left",
@@ -227,5 +229,5 @@ const Pt = ({
   );
 };
 export {
-  Pt as MultiSelect
+  Ot as MultiSelect
 };

package/dist/components/atoms/Select/Select.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("react"),D=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),F=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),I=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),T=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),_=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),r=require("../../../lib/utils.cjs"),f=require("../../../internal/field-invalid.cjs"),w=require("./select-variants.cjs"),R=require("../../../internal/PopupOption.cjs"),s=require("../../../internal/popup.cjs"),U=({options:o,value:d,onChange:h,placeholder:P="Select an option",disabled:u=!1,variant:x,size:i,error:b,className:j,triggerClassName:q,optionsClassName:N,helperText:p,errorMessage:a,label:m,...v})=>{const c=o.find(e=>e.value===d),l=!!a||b,O=f.isFieldInvalid(l,v),g=f.withoutInvalidProps(v),{ref:y,inDarkScope:k}=s.useDarkScope();return t.jsxs(F.Field,{disabled:u,className:r.cn("rst:flex rst:flex-col rst:gap-1.5",j),...g,children:[m&&t.jsx(I.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:m}),t.jsx(n.Listbox,{value:d??void 0,onChange:h,disabled:u,children:t.jsxs("div",{ref:y,className:"rst:relative",children:[t.jsxs(n.ListboxButton,{"aria-invalid":O||void 0,className:r.cn(w.selectTriggerVariants({variant:x,size:i,error:l}),q),children:[t.jsx("span",{className:r.cn("rst:block rst:truncate",!c&&"rst:text-gray-500 rst:dark:text-gray-400"),children:c?c.label:P}),t.jsx("span",{className:r.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:_.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})})]}),t.jsx(L.Transition,{as:S.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:t.jsx(n.ListboxOptions,{anchor:s.POPUP_ANCHOR,className:r.cn(s.popupInDarkPalette(k,x)&&"dark",s.POPUP_PANEL,s.POPUP_WIDTH_OF_BUTTON,N),children:o.map(e=>t.jsx(R.PopupOption,{as:n.ListboxOption,value:e.value,disabled:e.disabled,size:i,children:e.label},e.value))})})]})}),(p||a)&&t.jsx(D.Description,{className:r.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:a||p})]})};exports.Select=U;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),F=require("react"),S=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),D=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),I=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),L=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),T=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),_=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),r=require("../../../lib/utils.cjs"),f=require("../../../internal/field-invalid.cjs"),w=require("./select-variants.cjs"),R=require("../../../internal/PopupOption.cjs"),s=require("../../../internal/popup.cjs"),U=require("../../../internal/key-focus.cjs"),A=({options:l,value:d,onChange:h,placeholder:P="Select an option",disabled:u=!1,variant:x,size:i,error:b,className:q,triggerClassName:j,optionsClassName:y,helperText:p,errorMessage:a,label:m,...v})=>{U.useKeyFocus();const c=l.find(t=>t.value===d),o=!!a||b,N=f.isFieldInvalid(o,v),O=f.withoutInvalidProps(v),{ref:g,inDarkScope:k}=s.useDarkScope();return e.jsxs(D.Field,{disabled:u,className:r.cn("rst:flex rst:flex-col rst:gap-1.5",q),...O,children:[m&&e.jsx(I.Label,{className:"rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left",children:m}),e.jsx(n.Listbox,{value:d??void 0,onChange:h,disabled:u,children:e.jsxs("div",{ref:g,className:"rst:relative",children:[e.jsxs(n.ListboxButton,{"aria-invalid":N||void 0,className:r.cn(w.selectTriggerVariants({variant:x,size:i,error:o}),j),children:[e.jsx("span",{className:r.cn("rst:block rst:truncate",!c&&"rst:text-gray-500 rst:dark:text-gray-400"),children:c?c.label:P}),e.jsx("span",{className:r.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:e.jsx(T.FontAwesomeIcon,{icon:_.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})})]}),e.jsx(L.Transition,{as:F.Fragment,leave:"rst:transition rst:ease-in rst:duration-100",leaveFrom:"rst:opacity-100",leaveTo:"rst:opacity-0",children:e.jsx(n.ListboxOptions,{anchor:s.POPUP_ANCHOR,className:r.cn(s.popupInDarkPalette(k,x)&&"dark",s.POPUP_PANEL,s.POPUP_WIDTH_OF_BUTTON,y),children:l.map(t=>e.jsx(R.PopupOption,{as:n.ListboxOption,value:t.value,disabled:t.disabled,size:i,children:t.label},t.value))})})]})}),(p||a)&&e.jsx(S.Description,{className:r.cn("rst:text-xs rst:text-left",o?"rst:text-error-600 rst:dark:text-error-400 rst:font-medium":"rst:text-gray-500 rst:dark:text-gray-400"),children:a||p})]})};exports.Select=A;