@blakesteve/roster 5.10.0 → 5.12.0

package/README.md

@@ -543,6 +543,39 @@ The band matters more than it looks. Without it the ring sits directly on the
 fill, and a `primary-500` ring on a `primary-600` button is 1.37:1 — which is
 why the ring and its offset are a pair rather than two independent knobs.
 
+**A row in a popup marks focus with the ring too.** The focused row in `Menu`,
+`Select`, `Combobox` and `MultiSelect` keeps its soft primary tint and adds a
+2px inset ring in `--roster-ring`. The tint alone was the indicator until
+5.11.0, and it measured 1.17:1 against the panel in light and 1.03:1 in dark
+on Roster's own defaults: a keyboard user couldn't see where they were. The
+ring follows the token you already set against your own surfaces, so it holds
+wherever the panel is: 6.37:1 and 5.61:1 on the defaults. If you set
+`--roster-popover-bg` to a surface `--roster-ring` doesn't contrast with, set
+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 internal 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]));
+```
+
 ### Motion
 
 Two hand-rolled utilities, both of which stop for `prefers-reduced-motion`.
@@ -732,11 +765,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:
 
@@ -773,6 +805,8 @@ Every field therefore has a second prop, **named for the element it reaches**:
 | `Combobox`     | `className` | `inputClassName`     | `optionsClassName`  |
 | `CheckboxGroup`| `className` | —                    | `optionsClassName`  |
 | `RadioGroup`   | `className` | `radioClassName`     | `optionsClassName`, `optionClassName`, `labelClassName`, `optionLabelClassName`, `descriptionClassName`, `messageClassName` |
+| `Slider`       | `className` | `trackClassName`     | `thumbClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
+| `RangeSlider`  | `className` | `thumbClassName`     | `trackClassName`, `chipClassName`, `labelClassName`, `messageClassName` |
 
 `CheckboxGroup` and `RadioGroup` have no single "control" to reach, since they
 hold one per option, so `RadioGroup`'s `radioClassName` lands on every radio
@@ -925,9 +959,16 @@ 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
+  what reaches 3:1 against the panel ([Focus](#focus)).
 - **`Menu` shares the panel, not the anchoring.** Its panel takes the same
   surface, tokens and dark carry, but `Menu` places itself (see
   [Menu](#menu)), writing its own inline `max-height`. It reads the same
@@ -1584,8 +1625,10 @@ import { Menu, MenuButton, MenuItems, MenuItem, MenuSeparator } from "@blakestev
 - **Styling.** `className` on `MenuItems` and on each item merges last, so a
   fill such as `bg-gray-100` takes; the scroll shadows are drawn over it. Its
   ring and separators follow `--roster-border-width`. Items show the pointer
-  cursor, a disabled one `not-allowed`. In forced colors the focused item gets
-  an outline, since its fill is dropped.
+  cursor, a disabled one `not-allowed`. Keyboard focus adds an inset ring in
+  `--roster-ring` to the item's tint, which alone doesn't reach 3:1 against
+  the panel ([Focus](#focus)). In forced colors the focused item gets an
+  outline, since its fill and ring are dropped.
 - **Targets.** Every item is at least 44px tall, and `MenuButton` at least 44
   by 44 whatever its size. `MenuButton plain` renders a bare `<button>` for a
   trigger drawn its own way; keep its target at least 44 by 44 with a hit
@@ -1599,6 +1642,126 @@ that its rows are 44px tall rather than 36, and that with neither an inbox nor
 a theme row it no longer draws an empty band and rule at the top. It keeps its
 own white fill, whatever `--roster-popover-bg` says.
 
+### Slider
+
+A value picked along a track: tapped, dragged, stepped with the keys, or set
+from a named snap point.
+
+```tsx
+import { Slider } from "@blakesteve/roster";
+
+<Slider
+  label="How sure are you?"
+  value={sure}
+  onChange={setSure}
+  snapPoints={[{ value: 100, label: "Certain" }, { value: 75, label: "Likely" }, { value: 50, label: "Toss-up" }]}
+  formatValue={(v) => `${v}%`}
+/>;
+```
+
+- **It starts with a thumb**, in the middle of the range by default.
+  `startValue` moves where it starts, and `defaultValue` sets it outright:
+  `defaultValue={0}` starts it at the low end.
+- **Not set** is opt-in: `defaultValue={null}`, or `value={null}` when
+  controlled, leaves the track empty with no thumb until the first input. A
+  form takes it as a valid answer: under `name` it submits an empty string.
+  Controlled, `value` can go back to `null`, which is how a consumer offers a
+  clear.
+- **Snap points** are named stops, any values and labels: a selectable
+  `Chip` under the track for each, in the track's order, moves the thumb
+  there, and a bead on the rail shows where. They're shortcuts, so dragging
+  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
+  `labels`.
+- **In range.** A value outside `min` to `max` shows, and is said, at the
+  end it's past. A controlled owner that turns a change down (a clamp, say)
+  leaves the next key stepping from the value it kept.
+- **Pointer.** A tap on the track sets the value there; a press on the thumb
+  takes it without a jump, and commits only if the drag moved it. On touch
+  the track waits to see which way a finger goes: across is a drag, down the
+  page scrolls it and sets nothing (and takes no focus), and a tap sets on
+  lift. A pointermove with no press, which WebKit sends when content scrolls
+  under a resting pointer, sets nothing. A second finger is left alone.
+- **Keys.** The arrows step by `step`, PageUp and PageDown by `pageStep` (a
+  tenth of the range by default), Home and End go to the ends. **On an empty
+  slider an arrow or Page key places the thumb at `startValue`, the middle
+  by default**; it doesn't step from anywhere. A key at an end does nothing.
+  From a value between steps, a key goes to the next step that way. Keys
+  always step from the value last set, never from where the thumb is drawn
+  while it eases there, so a burst of presses counts every one. A key the
+  consumer's own `onKeyDown` handled (`preventDefault`) is left to it.
+- **Focus.** By keyboard, the ring is round the thumb; an empty slider rings
+  the track. A disabled slider takes no focus at all.
+- **Form.** Under `name` it submits its value, or an empty string while not
+  set; disabled, nothing, as a disabled input submits nothing. A form's
+  reset puts an uncontrolled slider back where it started.
+- **Targets.** The track is 44px tall and its rail stops 22px short of each
+  end, so the thumb's 44 by 44 target stays on it at every value. Each chip
+  has Chip's 44px-tall target and is at least 44 wide, and the chip row sits
+  8px under the track so its targets never take the thumb's. Under reduced
+  motion the thumb moves without easing. Under `dir="rtl"` the track runs
+  from the right.
+- **Look.** The rail is a light surface edged in `--roster-control-border`,
+  which carries a control edge's 3:1 when there's no thumb to show the
+  slider. Snap points are beads set in the rail, the edge's color on the bare
+  rail and the page's on the fill.
+
+One thumb. Two, for a range, is [RangeSlider](#rangeslider), on the same
+track, so `value` here stays a number.
+
+### RangeSlider
+
+A low and a high along one track: `Slider`'s track, with two thumbs.
+
+```tsx
+import { RangeSlider } from "@blakesteve/roster";
+
+<RangeSlider
+  label="Price"
+  min={0}
+  max={500}
+  step={5}
+  value={price}
+  onChange={setPrice}
+  formatValue={(v) => `$${v}`}
+/>;
+```
+
+- **It starts at the whole range**, `[min, max]`, unless `defaultValue`
+  says otherwise. `value` is `[low, high]`, always low first: a pair given
+  the wrong way round is shown the right way. There's no not-set state; the
+  whole range is what "any" looks like.
+- **Each thumb is a slider** to the keyboard and a screen reader: its own
+  tab stop, named for the slider and its end ("Price Minimum", "Price
+  Maximum", both in `labels`), whose `aria-valuemin` and `aria-valuemax`
+  run to the other thumb. The thumbs meet and never cross: End on the low
+  thumb takes it to the high one. The whole is a group named by the label.
+- **Pointer.** A press takes the nearer thumb: a tap on the track moves it
+  there, a drag carries it. Two thumbs on one spot part by the way the drag
+  first moves, up the range taking the high one. Touch, the resting
+  pointer, the second finger and the keys work as `Slider`'s do.
+- **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.
+- **Form.** Under `name` both values are submitted, low then high, as a
+  multiple select's are: read them with `formData.getAll(name)`.
+- **Focus, targets, motion, RTL and look** as `Slider`'s: the ring is round
+  the focused thumb, each thumb's 44 by 44 target stays on the track at
+  every value.
+
 ### Pagination
 
 Moves through pages of a list, built for a long list browsed on a phone.
@@ -1886,6 +2049,8 @@ function App() {
 | `StepProgress`    | Named steps: a stepper with markers and connectors, or a compact segmented "Step x of y" |
 | `Pullquote`       | A line lifted out of prose, as `<figure>` + `<blockquote>` + `<figcaption>` |
 | `RadioGroup`      | Radio set reporting one `string`; descriptions, error, 44px targets         |
+| `Slider`          | A value along a track, starting in the middle or not set on request; named snap-point chips, a visible number, the full keyboard, 44px targets (see [Slider](#slider)) |
+| `RangeSlider`     | A low and a high on one track: two thumbs that meet and never cross, each its own slider to the keyboard (see [RangeSlider](#rangeslider)) |
 | `Toast`           | Transient floating notice; `Toaster` + the imperative `toast` handle        |
 
 ### Organisms
@@ -1997,6 +2162,32 @@ such as `AvatarStrip`'s `ringClass`, stays exactly as they wrote it.
 
 `npm run build` fails if any unprefixed class reaches `dist/roster.css`.
 
+## Authoring components: cursors
+
+**If it's clickable, it's the pointer.** Every element that does something
+when it's clicked shows `cursor: pointer`, and says so in its classes. A
+browser gives a button the arrow; Tailwind v3's preflight gave it the pointer
+and v4's doesn't, so a `<button>` with no cursor class shows the arrow. Until 5.11.0 the option rows
+in `Select`, `Combobox` and `MultiSelect` showed the arrow while `Menu`'s
+showed the pointer, and `PasswordInput`'s reveal button showed the arrow too.
+
+- A disabled control shows `not-allowed`.
+- A busy one may say so: `Button`'s `loading` shows `progress`.
+- A text field's label keeps the arrow, as a native one does: clicking it puts
+  the caret in the field rather than doing something.
+
+Three things keep another cursor, because they aren't click targets:
+
+- **`Breadcrumbs`' current crumb** is the page you're on, not a link:
+  `default`.
+- **`Tooltip`'s trigger wrapper** isn't necessarily clickable: `default`. A
+  control inside it brings its own pointer.
+- **A drag surface** says what it does: `Carousel`'s track and `Sheet`'s drag
+  handle show `grab`, then `grabbing`.
+
+`src/internal/popups.checks.stories.tsx` reads the computed cursor on a row in
+each popup, with a disabled row as its twin.
+
 ## Development
 
 Storybook is the component playground. Each component has dedicated stories covering all variants, props, and light/dark mode.
@@ -2128,7 +2319,7 @@ like a file count but counts `describe` blocks — 166 against 92 real files.
 Pull requests are welcome. Please:
 
 1. Open an issue or discussion first for significant changes
-2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests)
+2. Follow the existing code style (CVA variants, forwardRef, Storybook stories, unit tests) and the authoring rules above: the `rst:` prefix and cursors
 3. Fill out the pull request template checklist before requesting review
 
 ## License

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/PasswordInput/PasswordInput.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),c=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),S=require("../Input/Input.cjs"),u=i.forwardRef(({revealable:l=!0,defaultRevealed:d=!1,revealed:r,onRevealChange:p,showLabel:y="Show password",hideLabel:f="Hide password",disabled:e,variant:m,error:w,errorMessage:h,className:v,...x},g)=>{const[I,q]=i.useState(d),o=r!==void 0,t=o?r:I,b=()=>{const n=!t;o||q(n),p?.(n)};return s.jsx(S.Input,{ref:g,type:t?"text":"password",disabled:e,variant:m,error:w,errorMessage:h,className:a.cn("rst:[&_input::-ms-reveal]:hidden",v),endIcon:l?s.jsx("button",{type:"button",onClick:b,disabled:e,"aria-label":t?f:y,"aria-pressed":t,className:a.cn("rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity","rst:opacity-70 rst:hover:opacity-100","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",e&&"rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40"),children:s.jsx(j.FontAwesomeIcon,{icon:t?c.faEyeSlash:c.faEye,className:"rst:h-4 rst:w-4","aria-hidden":"true"})}):void 0,...x})});u.displayName="PasswordInput";exports.PasswordInput=u;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),j=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),c=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),a=require("../../../lib/utils.cjs"),S=require("../Input/Input.cjs"),u=i.forwardRef(({revealable:l=!0,defaultRevealed:d=!1,revealed:r,onRevealChange:p,showLabel:y="Show password",hideLabel:f="Hide password",disabled:s,variant:m,error:w,errorMessage:h,className:v,...x},g)=>{const[I,q]=i.useState(d),o=r!==void 0,t=o?r:I,b=()=>{const n=!t;o||q(n),p?.(n)};return e.jsx(S.Input,{ref:g,type:t?"text":"password",disabled:s,variant:m,error:w,errorMessage:h,className:a.cn("rst:[&_input::-ms-reveal]:hidden",v),endIcon:l?e.jsx("button",{type:"button",onClick:b,disabled:s,"aria-label":t?f:y,"aria-pressed":t,className:a.cn("rst:-m-1 rst:flex rst:items-center rst:rounded-sm rst:p-1 rst:transition-opacity","rst:opacity-70 rst:hover:opacity-100","rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",s?"rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40":"rst:cursor-pointer"),children:e.jsx(j.FontAwesomeIcon,{icon:t?c.faEyeSlash:c.faEye,className:"rst:h-4 rst:w-4","aria-hidden":"true"})}):void 0,...x})});u.displayName="PasswordInput";exports.PasswordInput=u;