@blakesteve/roster 5.11.0 → 5.12.0

package/README.md

@@ -555,6 +555,27 @@ 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`.
@@ -744,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:
 
@@ -939,9 +959,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
@@ -1650,6 +1673,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 +1751,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.

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;

package/dist/components/atoms/Select/Select.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { Fragment as D } from "react";
-import { Description as F } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
+import { Fragment as F } from "react";
+import { Description as D } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
 import { Field as I } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
 import { Label as L } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
 import { Listbox as T, ListboxButton as _, ListboxOptions as w, ListboxOption as S } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
@@ -12,12 +12,13 @@ import { cn as s } from "../../../lib/utils.js";
 import { isFieldInvalid as j, withoutInvalidProps as C } from "../../../internal/field-invalid.js";
 import { selectTriggerVariants as E } from "./select-variants.js";
 import { PopupOption as H } from "../../../internal/PopupOption.js";
-import { useDarkScope as R, POPUP_ANCHOR as W, POPUP_WIDTH_OF_BUTTON as K, POPUP_PANEL as M, popupInDarkPalette as V } from "../../../internal/popup.js";
-const ot = ({
+import { useDarkScope as K, POPUP_ANCHOR as R, POPUP_WIDTH_OF_BUTTON as W, POPUP_PANEL as M, popupInDarkPalette as V } from "../../../internal/popup.js";
+import { useKeyFocus as Z } from "../../../internal/key-focus.js";
+const nt = ({
   options: l,
   value: m,
-  onChange: h,
-  placeholder: u = "Select an option",
+  onChange: u,
+  placeholder: h = "Select an option",
   disabled: c = !1,
   variant: d,
   size: e,
@@ -30,7 +31,8 @@ const ot = ({
   label: f,
   ...x
 }) => {
-  const o = l.find((r) => r.value === m), i = !!a || v, k = j(i, x), O = C(x), { ref: g, inDarkScope: y } = R();
+  Z();
+  const o = l.find((r) => r.value === m), i = !!a || v, k = j(i, x), y = C(x), { ref: O, inDarkScope: g } = K();
   return (
     /* `...props` is spread here, and was not before. The prop type has always
            extended `HTMLAttributes<HTMLDivElement>`, so `id`, `data-*` and the
@@ -47,16 +49,16 @@ const ot = ({
       {
         disabled: c,
         className: s("rst:flex rst:flex-col rst:gap-1.5", P),
-        ...O,
+        ...y,
         children: [
           f && /* @__PURE__ */ t(L, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: f }),
           /* @__PURE__ */ t(
             T,
             {
               value: m ?? void 0,
-              onChange: h,
+              onChange: u,
               disabled: c,
-              children: /* @__PURE__ */ n("div", { ref: g, className: "rst:relative", children: [
+              children: /* @__PURE__ */ n("div", { ref: O, className: "rst:relative", children: [
                 /* @__PURE__ */ n(
                   _,
                   {
@@ -73,7 +75,7 @@ const ot = ({
                             "rst:block rst:truncate",
                             !o && "rst:text-gray-500 rst:dark:text-gray-400"
                           ),
-                          children: o ? o.label : u
+                          children: o ? o.label : h
                         }
                       ),
                       /* @__PURE__ */ t(
@@ -101,18 +103,18 @@ const ot = ({
                 /* @__PURE__ */ t(
                   U,
                   {
-                    as: D,
+                    as: F,
                     leave: "rst:transition rst:ease-in rst:duration-100",
                     leaveFrom: "rst:opacity-100",
                     leaveTo: "rst:opacity-0",
                     children: /* @__PURE__ */ t(
                       w,
                       {
-                        anchor: W,
+                        anchor: R,
                         className: s(
-                          V(y, d) && "dark",
+                          V(g, d) && "dark",
                           M,
-                          K,
+                          W,
                           b
                         ),
                         children: l.map((r) => /* @__PURE__ */ t(
@@ -134,7 +136,7 @@ const ot = ({
             }
           ),
           (p || a) && /* @__PURE__ */ t(
-            F,
+            D,
             {
               className: s(
                 "rst:text-xs rst:text-left",
@@ -149,5 +151,5 @@ const ot = ({
   );
 };
 export {
-  ot as Select
+  nt as Select
 };

package/dist/components/molecules/Carousel/Carousel.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Be=require("react"),$e=require("../../atoms/Button/Button.cjs"),T=require("../../../lib/utils.cjs"),ze=require("../../../lib/labels.cjs"),He=require("../../../internal/motion.cjs"),d=require("./carousel-math.cjs"),U=require("./carousel-layout.cjs");function Ue(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const f in o)if(f!=="default"){const x=Object.getOwnPropertyDescriptor(o,f);Object.defineProperty(a,f,x.get?x:{enumerable:!0,get:()=>o[f]})}}return a.default=o,Object.freeze(a)}const n=Ue(Be),Ve={position:(o,a)=>`${o} of ${a}`},We=o=>Math.min(3e3,500+o*.35),Xe='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',V=o=>typeof o=="number"?`${o}px`:o;function se(o){const a=parseFloat(o);return Number.isFinite(a)?a:0}const Ge="rst:hidden rst:[@media(any-hover:hover)]:inline-flex",Je="rst:hidden rst:[@media(any-hover:hover)]:flex";function oe({direction:o}){return c.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c.jsx("path",{d:o==="prev"?"M12.5 4.5 7 10l5.5 5.5":"M7.5 4.5 13 10l-5.5 5.5"})})}const le={overflowing:null,canScrollPrev:!1,canScrollNext:!1,index:0},Ke=n.forwardRef(function({"aria-label":a,"aria-labelledby":f,children:x,itemWidth:I,perView:R,gap:W=12,gutter:X=16,bleed:ce=!1,snap:k="start",snapStrictness:ie="mandatory",oneAtATime:ae=!1,arrows:j="hover",arrowPlacement:M="controls",renderArrows:L,prevLabel:ue,nextLabel:de,prevIcon:fe,nextIcon:ge,arrowButtonProps:ve,fade:pe=!1,scrollbar:me=!1,showPosition:G=!1,labels:be,onIndexChange:J,onScrollStateChange:K,itemClassName:xe,listClassName:he,className:Se,style:ye,...we},Ne){const Q=ze.withLabels(Ve,be),p=n.useRef(null),Y=`${n.useId()}-list`,Z=n.Children.toArray(x),E=Z.length,[l,Te]=n.useState(le),ee=n.useRef(le),[Ie,Le]=n.useState(""),[Ee,Pe]=n.useState(!1),O=n.useRef({onIndexChange:J,onScrollStateChange:K});n.useEffect(()=>{O.current={onIndexChange:J,onScrollStateChange:K}});const g=n.useCallback(()=>{const e=p.current;if(!e)return null;const t=e.getBoundingClientRect(),r=getComputedStyle(e),s=t.left+e.clientLeft-e.scrollLeft;return{items:Array.from(e.children).map(u=>{const b=u.getBoundingClientRect();return{start:b.left-s,end:b.right-s}}),scrollLeft:e.scrollLeft,clientWidth:e.clientWidth,scrollWidth:e.scrollWidth,paddingStart:se(r.scrollPaddingInlineStart||r.scrollPaddingLeft),paddingEnd:se(r.scrollPaddingInlineEnd||r.scrollPaddingRight),align:k}},[k]),h=n.useCallback(()=>{const e=g();if(!e)return;const t={overflowing:d.overflows(e),canScrollPrev:d.canScrollPrev(e),canScrollNext:d.canScrollNext(e),index:e.items.length?d.currentIndex(e):0},r=ee.current;r.overflowing===t.overflowing&&r.canScrollPrev===t.canScrollPrev&&r.canScrollNext===t.canScrollNext&&r.index===t.index||(ee.current=t,Te(t),r.index!==t.index&&O.current.onIndexChange?.(t.index),(r.canScrollPrev!==t.canScrollPrev||r.canScrollNext!==t.canScrollNext)&&O.current.onScrollStateChange?.({canScrollPrev:t.canScrollPrev,canScrollNext:t.canScrollNext}))},[g]),Ce=JSON.stringify([W,X,I,R]);n.useLayoutEffect(()=>{const e=p.current;if(!e)return;h();let t=0;const r=()=>{t||(t=requestAnimationFrame(()=>{t=0,h()}))};e.addEventListener("scroll",r,{passive:!0});const s=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>h()),i=()=>{s?.observe(e),Array.from(e.children).forEach(b=>s?.observe(b))};i();const u=typeof MutationObserver>"u"?null:new MutationObserver(()=>{i(),h()});return u?.observe(e,{childList:!0}),()=>{e.removeEventListener("scroll",r),s?.disconnect(),u?.disconnect(),t&&cancelAnimationFrame(t)}},[h,E,Ce]),n.useLayoutEffect(()=>{const e=p.current;if(e&&(Pe(!e.querySelector(Xe)),f)){const t=f.split(/\s+/).map(r=>document.getElementById(r)?.textContent?.trim()??"").filter(Boolean).join(" ");Le(t)}},[x,f]);const S=n.useRef(null),v=n.useCallback(()=>{const e=p.current,t=S.current;t&&(S.current=null,window.clearTimeout(t.timer),e?.removeEventListener("scrollend",t.done),e&&(e.style.scrollSnapType="",delete e.dataset.settling))},[]),m=n.useCallback((e,t)=>{const r=p.current;if(!r)return;if(v(),t!=="smooth"||He.prefersReducedMotion()||Math.abs(r.scrollLeft-e)<1){r.style.scrollSnapType="none",r.scrollTo({left:e,behavior:"instant"}),r.style.scrollSnapType="";return}r.style.scrollSnapType="none",r.dataset.settling="";const i=r.scrollLeft,u=()=>{Math.abs(r.scrollLeft-i)<.5||v()};S.current={timer:window.setTimeout(v,We(Math.abs(r.scrollLeft-e))),done:u,target:e},r.addEventListener("scrollend",u),r.scrollTo({left:e,behavior:"smooth"})},[v]),P=n.useCallback(e=>{const t=g();if(!t)return;const r=S.current?{...t,scrollLeft:S.current.target}:t;m(d.pageTarget(r,e),"smooth")},[g,m]);n.useImperativeHandle(Ne,()=>({scrollToIndex:(e,t)=>{const r=g();if(!r||!r.items.length)return;const s=Math.min(Math.max(0,Math.round(e)),r.items.length-1);m(d.snapPosition(r,s),t?.behavior??"smooth")},scrollPrev:()=>P(-1),scrollNext:()=>P(1)}),[g,P,m]),n.useEffect(()=>v,[v]);const D=n.useRef(null),_=n.useRef(null),A=n.useRef(null);n.useLayoutEffect(()=>{const e=A.current;if(!e)return;const t=e==="prev"?D.current:_.current,r=e==="prev"?_.current:D.current,s=e==="prev"?!l.canScrollPrev:!l.canScrollNext,i=document.activeElement;s&&(i!==t&&i!==document.body&&i!==null||r&&!r.disabled&&r.focus())},[l.canScrollPrev,l.canScrollNext]);const y=n.useRef(null),w=n.useRef(!1),Re=e=>{e.pointerType!=="mouse"||e.button!==0||l.overflowing&&(v(),w.current=!1,y.current={pointerId:e.pointerId,x0:e.clientX,scroll0:e.currentTarget.scrollLeft,dragging:!1})},ke=e=>{const t=y.current;if(!t||e.pointerId!==t.pointerId)return;const r=e.currentTarget,s=e.clientX-t.x0;if(!t.dragging){if(Math.abs(s)<=d.CAROUSEL_DRAG_THRESHOLD)return;t.dragging=!0,r.dataset.dragging="",r.style.scrollSnapType="none",window.getSelection?.()?.removeAllRanges();try{r.setPointerCapture(e.pointerId)}catch{}}r.scrollLeft=t.scroll0-s},F=e=>{const t=y.current;if(!t||e.pointerId!==t.pointerId||(y.current=null,!t.dragging))return;const r=e.currentTarget;delete r.dataset.dragging,w.current=e.type==="pointerup",window.setTimeout(()=>{w.current=!1},0);const s=g();s?m(d.snapPosition(s,d.nearestIndex(s)),"smooth"):r.style.scrollSnapType=""},je=e=>{!w.current||e.detail===0||(w.current=!1,e.preventDefault(),e.stopPropagation())},Me=e=>{l.overflowing&&e.preventDefault()},Oe=e=>{const t=e.currentTarget,r=e.target;if(r===t||y.current?.dragging)return;let s=!1;try{s=r.matches(":focus-visible")}catch{s=!1}if(!s)return;const i=r.closest("[data-carousel-item]");if(!i||i.parentElement!==t)return;const u=g();if(!u)return;const b=Array.prototype.indexOf.call(t.children,i);m(d.snapPosition(u,b),"instant")},[De,_e]=n.useState(0);n.useEffect(()=>{const e=window.setTimeout(()=>_e(l.index),150);return()=>window.clearTimeout(e)},[l.index]);const te=a??Ie,re=e=>te?`${e} ${te}`:e,q=j!=="none"&&l.overflowing!==!1,Ae=j==="hover"?Ge:"rst:inline-flex",ne=e=>{const t=e==="prev",{className:r,...s}=ve??{};return c.jsx($e.Button,{type:"button",variant:"outline",colorScheme:"neutral",size:"icon",...s,"aria-label":t?ue??re("Previous"):de??re("Next"),"aria-controls":Y,disabled:t?!l.canScrollPrev:!l.canScrollNext,onClick:()=>P(t?-1:1),ref:t?D:_,onFocus:()=>{A.current=e},onBlur:i=>{i.relatedTarget&&(A.current=null)},"data-carousel-arrow":e,className:T.cn("rst:size-11 rst:shrink-0 rst:rounded-full",M==="overlay"&&!L&&"rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",Ae,r),children:t?fe??c.jsx(oe,{direction:"prev"}):ge??c.jsx(oe,{direction:"next"})})},C=q?ne("prev"):null,B=q?ne("next"):null,N=G&&E?c.jsx("p",{"aria-live":"polite",className:"rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75","data-carousel-position":"",children:Q.position(De+1,E)}):null;let $=null;L?$=L({prev:C,next:B,position:N}):M==="controls"&&(C||N)&&($=c.jsxs("div",{className:T.cn("rst:mb-2 rst:items-center rst:justify-end rst:gap-2",!N&&j==="hover"?Je:"rst:flex"),"data-carousel-controls":"",children:[N&&c.jsx("div",{className:"rst:mr-auto",children:N}),C,B]}));const z=pe&&l.overflowing&&(l.canScrollPrev||l.canScrollNext)?`linear-gradient(to right, ${l.canScrollPrev?"transparent, black 48px":"black"}, ${l.canScrollNext?"black calc(100% - 48px), transparent":"black"})`:void 0,H=I===void 0&&R!==void 0,Fe={"--rst-cv-gap":V(W),"--rst-cv-gutter":V(X),...H?U.perViewVars(R):{},...z?{maskImage:z,WebkitMaskImage:z}:{}},qe=I!==void 0?{width:V(I)}:H?{width:U.FLUID_ITEM_WIDTH}:void 0;return c.jsxs("div",{className:T.cn("rst:min-w-0",Se),style:ye,...we,children:[$,c.jsxs("div",{className:"rst:relative",children:[c.jsx("ul",{ref:p,id:Y,role:"list","aria-label":a,"aria-labelledby":a?void 0:f,tabIndex:Ee&&l.overflowing?0:void 0,"data-overflowing":l.overflowing?"":void 0,onPointerDown:Re,onPointerMove:ke,onPointerUp:F,onPointerCancel:F,onLostPointerCapture:F,onClickCapture:je,onDragStart:Me,onFocus:Oe,style:Fe,className:T.cn("rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden","rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)","rst:overscroll-x-contain",ie==="mandatory"?"rst:snap-x rst:snap-mandatory":"rst:snap-x rst:snap-proximity",ce&&"rst:-mx-(--rst-cv-gutter)",!me&&"rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",H&&U.FLUID_CLASSES,"rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",he),children:Z.map((e,t)=>c.jsx("li",{"data-carousel-item":"","aria-label":G?Q.position(t+1,E):void 0,style:qe,className:T.cn("rst:shrink-0",k==="start"?"rst:snap-start":"rst:snap-center",ae&&"rst:snap-always",xe),children:e},n.isValidElement(e)&&e.key!=null?e.key:t))}),!L&&M==="overlay"&&q&&c.jsxs(c.Fragment,{children:[c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:C})}),c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:B})})]})]})]})});exports.Carousel=Ke;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Be=require("react"),$e=require("../../atoms/Button/Button.cjs"),T=require("../../../lib/utils.cjs"),ze=require("../../../lib/labels.cjs"),He=require("../../../internal/motion.cjs"),d=require("./carousel-math.cjs"),U=require("./carousel-layout.cjs"),Ue=require("../../../internal/key-focus.cjs");function Ve(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const f in o)if(f!=="default"){const x=Object.getOwnPropertyDescriptor(o,f);Object.defineProperty(a,f,x.get?x:{enumerable:!0,get:()=>o[f]})}}return a.default=o,Object.freeze(a)}const n=Ve(Be),We={position:(o,a)=>`${o} of ${a}`},Xe=o=>Math.min(3e3,500+o*.35),Ge='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])',V=o=>typeof o=="number"?`${o}px`:o;function se(o){const a=parseFloat(o);return Number.isFinite(a)?a:0}const Je="rst:hidden rst:[@media(any-hover:hover)]:inline-flex",Ke="rst:hidden rst:[@media(any-hover:hover)]:flex";function oe({direction:o}){return c.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:c.jsx("path",{d:o==="prev"?"M12.5 4.5 7 10l5.5 5.5":"M7.5 4.5 13 10l-5.5 5.5"})})}const le={overflowing:null,canScrollPrev:!1,canScrollNext:!1,index:0},Qe=n.forwardRef(function({"aria-label":a,"aria-labelledby":f,children:x,itemWidth:I,perView:C,gap:W=12,gutter:X=16,bleed:ce=!1,snap:R="start",snapStrictness:ie="mandatory",oneAtATime:ae=!1,arrows:j="hover",arrowPlacement:M="controls",renderArrows:L,prevLabel:ue,nextLabel:de,prevIcon:fe,nextIcon:ge,arrowButtonProps:ve,fade:pe=!1,scrollbar:me=!1,showPosition:G=!1,labels:be,onIndexChange:J,onScrollStateChange:K,itemClassName:xe,listClassName:he,className:ye,style:Se,...we},Ne){Ue.useKeyFocus();const Q=ze.withLabels(We,be),p=n.useRef(null),Y=`${n.useId()}-list`,Z=n.Children.toArray(x),E=Z.length,[l,Te]=n.useState(le),ee=n.useRef(le),[Ie,Le]=n.useState(""),[Ee,Pe]=n.useState(!1),O=n.useRef({onIndexChange:J,onScrollStateChange:K});n.useEffect(()=>{O.current={onIndexChange:J,onScrollStateChange:K}});const g=n.useCallback(()=>{const e=p.current;if(!e)return null;const t=e.getBoundingClientRect(),r=getComputedStyle(e),s=t.left+e.clientLeft-e.scrollLeft;return{items:Array.from(e.children).map(u=>{const b=u.getBoundingClientRect();return{start:b.left-s,end:b.right-s}}),scrollLeft:e.scrollLeft,clientWidth:e.clientWidth,scrollWidth:e.scrollWidth,paddingStart:se(r.scrollPaddingInlineStart||r.scrollPaddingLeft),paddingEnd:se(r.scrollPaddingInlineEnd||r.scrollPaddingRight),align:R}},[R]),h=n.useCallback(()=>{const e=g();if(!e)return;const t={overflowing:d.overflows(e),canScrollPrev:d.canScrollPrev(e),canScrollNext:d.canScrollNext(e),index:e.items.length?d.currentIndex(e):0},r=ee.current;r.overflowing===t.overflowing&&r.canScrollPrev===t.canScrollPrev&&r.canScrollNext===t.canScrollNext&&r.index===t.index||(ee.current=t,Te(t),r.index!==t.index&&O.current.onIndexChange?.(t.index),(r.canScrollPrev!==t.canScrollPrev||r.canScrollNext!==t.canScrollNext)&&O.current.onScrollStateChange?.({canScrollPrev:t.canScrollPrev,canScrollNext:t.canScrollNext}))},[g]),ke=JSON.stringify([W,X,I,C]);n.useLayoutEffect(()=>{const e=p.current;if(!e)return;h();let t=0;const r=()=>{t||(t=requestAnimationFrame(()=>{t=0,h()}))};e.addEventListener("scroll",r,{passive:!0});const s=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>h()),i=()=>{s?.observe(e),Array.from(e.children).forEach(b=>s?.observe(b))};i();const u=typeof MutationObserver>"u"?null:new MutationObserver(()=>{i(),h()});return u?.observe(e,{childList:!0}),()=>{e.removeEventListener("scroll",r),s?.disconnect(),u?.disconnect(),t&&cancelAnimationFrame(t)}},[h,E,ke]),n.useLayoutEffect(()=>{const e=p.current;if(e&&(Pe(!e.querySelector(Ge)),f)){const t=f.split(/\s+/).map(r=>document.getElementById(r)?.textContent?.trim()??"").filter(Boolean).join(" ");Le(t)}},[x,f]);const y=n.useRef(null),v=n.useCallback(()=>{const e=p.current,t=y.current;t&&(y.current=null,window.clearTimeout(t.timer),e?.removeEventListener("scrollend",t.done),e&&(e.style.scrollSnapType="",delete e.dataset.settling))},[]),m=n.useCallback((e,t)=>{const r=p.current;if(!r)return;if(v(),t!=="smooth"||He.prefersReducedMotion()||Math.abs(r.scrollLeft-e)<1){r.style.scrollSnapType="none",r.scrollTo({left:e,behavior:"instant"}),r.style.scrollSnapType="";return}r.style.scrollSnapType="none",r.dataset.settling="";const i=r.scrollLeft,u=()=>{Math.abs(r.scrollLeft-i)<.5||v()};y.current={timer:window.setTimeout(v,Xe(Math.abs(r.scrollLeft-e))),done:u,target:e},r.addEventListener("scrollend",u),r.scrollTo({left:e,behavior:"smooth"})},[v]),P=n.useCallback(e=>{const t=g();if(!t)return;const r=y.current?{...t,scrollLeft:y.current.target}:t;m(d.pageTarget(r,e),"smooth")},[g,m]);n.useImperativeHandle(Ne,()=>({scrollToIndex:(e,t)=>{const r=g();if(!r||!r.items.length)return;const s=Math.min(Math.max(0,Math.round(e)),r.items.length-1);m(d.snapPosition(r,s),t?.behavior??"smooth")},scrollPrev:()=>P(-1),scrollNext:()=>P(1)}),[g,P,m]),n.useEffect(()=>v,[v]);const D=n.useRef(null),F=n.useRef(null),_=n.useRef(null);n.useLayoutEffect(()=>{const e=_.current;if(!e)return;const t=e==="prev"?D.current:F.current,r=e==="prev"?F.current:D.current,s=e==="prev"?!l.canScrollPrev:!l.canScrollNext,i=document.activeElement;s&&(i!==t&&i!==document.body&&i!==null||r&&!r.disabled&&r.focus())},[l.canScrollPrev,l.canScrollNext]);const S=n.useRef(null),w=n.useRef(!1),Ce=e=>{e.pointerType!=="mouse"||e.button!==0||l.overflowing&&(v(),w.current=!1,S.current={pointerId:e.pointerId,x0:e.clientX,scroll0:e.currentTarget.scrollLeft,dragging:!1})},Re=e=>{const t=S.current;if(!t||e.pointerId!==t.pointerId)return;const r=e.currentTarget,s=e.clientX-t.x0;if(!t.dragging){if(Math.abs(s)<=d.CAROUSEL_DRAG_THRESHOLD)return;t.dragging=!0,r.dataset.dragging="",r.style.scrollSnapType="none",window.getSelection?.()?.removeAllRanges();try{r.setPointerCapture(e.pointerId)}catch{}}r.scrollLeft=t.scroll0-s},A=e=>{const t=S.current;if(!t||e.pointerId!==t.pointerId||(S.current=null,!t.dragging))return;const r=e.currentTarget;delete r.dataset.dragging,w.current=e.type==="pointerup",window.setTimeout(()=>{w.current=!1},0);const s=g();s?m(d.snapPosition(s,d.nearestIndex(s)),"smooth"):r.style.scrollSnapType=""},je=e=>{!w.current||e.detail===0||(w.current=!1,e.preventDefault(),e.stopPropagation())},Me=e=>{l.overflowing&&e.preventDefault()},Oe=e=>{const t=e.currentTarget,r=e.target;if(r===t||S.current?.dragging)return;let s=!1;try{s=r.matches(":focus-visible, [data-key-focus]")}catch{s=!1}if(!s)return;const i=r.closest("[data-carousel-item]");if(!i||i.parentElement!==t)return;const u=g();if(!u)return;const b=Array.prototype.indexOf.call(t.children,i);m(d.snapPosition(u,b),"instant")},[De,Fe]=n.useState(0);n.useEffect(()=>{const e=window.setTimeout(()=>Fe(l.index),150);return()=>window.clearTimeout(e)},[l.index]);const te=a??Ie,re=e=>te?`${e} ${te}`:e,q=j!=="none"&&l.overflowing!==!1,_e=j==="hover"?Je:"rst:inline-flex",ne=e=>{const t=e==="prev",{className:r,...s}=ve??{};return c.jsx($e.Button,{type:"button",variant:"outline",colorScheme:"neutral",size:"icon",...s,"aria-label":t?ue??re("Previous"):de??re("Next"),"aria-controls":Y,disabled:t?!l.canScrollPrev:!l.canScrollNext,onClick:()=>P(t?-1:1),ref:t?D:F,onFocus:()=>{_.current=e},onBlur:i=>{i.relatedTarget&&(_.current=null)},"data-carousel-arrow":e,className:T.cn("rst:size-11 rst:shrink-0 rst:rounded-full",M==="overlay"&&!L&&"rst:bg-[var(--roster-popover-bg)] rst:elevation-raised rst:hover:bg-[var(--roster-popover-bg)] rst:disabled:invisible",_e,r),children:t?fe??c.jsx(oe,{direction:"prev"}):ge??c.jsx(oe,{direction:"next"})})},k=q?ne("prev"):null,B=q?ne("next"):null,N=G&&E?c.jsx("p",{"aria-live":"polite",className:"rst:font-ui rst:m-0 rst:text-sm rst:tabular-nums rst:opacity-75","data-carousel-position":"",children:Q.position(De+1,E)}):null;let $=null;L?$=L({prev:k,next:B,position:N}):M==="controls"&&(k||N)&&($=c.jsxs("div",{className:T.cn("rst:mb-2 rst:items-center rst:justify-end rst:gap-2",!N&&j==="hover"?Ke:"rst:flex"),"data-carousel-controls":"",children:[N&&c.jsx("div",{className:"rst:mr-auto",children:N}),k,B]}));const z=pe&&l.overflowing&&(l.canScrollPrev||l.canScrollNext)?`linear-gradient(to right, ${l.canScrollPrev?"transparent, black 48px":"black"}, ${l.canScrollNext?"black calc(100% - 48px), transparent":"black"})`:void 0,H=I===void 0&&C!==void 0,Ae={"--rst-cv-gap":V(W),"--rst-cv-gutter":V(X),...H?U.perViewVars(C):{},...z?{maskImage:z,WebkitMaskImage:z}:{}},qe=I!==void 0?{width:V(I)}:H?{width:U.FLUID_ITEM_WIDTH}:void 0;return c.jsxs("div",{className:T.cn("rst:min-w-0",ye),style:Se,...we,children:[$,c.jsxs("div",{className:"rst:relative",children:[c.jsx("ul",{ref:p,id:Y,role:"list","aria-label":a,"aria-labelledby":a?void 0:f,tabIndex:Ee&&l.overflowing?0:void 0,"data-overflowing":l.overflowing?"":void 0,onPointerDown:Ce,onPointerMove:Re,onPointerUp:A,onPointerCancel:A,onLostPointerCapture:A,onClickCapture:je,onDragStart:Me,onFocus:Oe,style:Ae,className:T.cn("rst:m-0 rst:flex rst:list-none rst:overflow-x-auto rst:overflow-y-hidden","rst:gap-(--rst-cv-gap) rst:px-(--rst-cv-gutter) rst:py-1 rst:scroll-px-(--rst-cv-gutter)","rst:overscroll-x-contain",ie==="mandatory"?"rst:snap-x rst:snap-mandatory":"rst:snap-x rst:snap-proximity",ce&&"rst:-mx-(--rst-cv-gutter)",!me&&"rst:[scrollbar-width:none] rst:[&::-webkit-scrollbar]:hidden",H&&U.FLUID_CLASSES,"rst:data-overflowing:cursor-grab rst:data-dragging:cursor-grabbing rst:data-dragging:select-none","rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-inset",he),children:Z.map((e,t)=>c.jsx("li",{"data-carousel-item":"","aria-label":G?Q.position(t+1,E):void 0,style:qe,className:T.cn("rst:shrink-0",R==="start"?"rst:snap-start":"rst:snap-center",ae&&"rst:snap-always",xe),children:e},n.isValidElement(e)&&e.key!=null?e.key:t))}),!L&&M==="overlay"&&q&&c.jsxs(c.Fragment,{children:[c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:start-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:k})}),c.jsx("div",{className:"rst:pointer-events-none rst:absolute rst:inset-y-0 rst:end-1 rst:flex rst:items-center",children:c.jsx("div",{className:"rst:pointer-events-auto",children:B})})]})]})]})});exports.Carousel=Qe;