@blakesteve/roster 5.2.0 → 5.3.0

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

@@ -1,19 +1,20 @@
 "use client";
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import B, { Fragment as M } from "react";
-import { Description as H } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as V } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
-import { Label as W } from "../../../node_modules/@headlessui/react/dist/components/label/label.js";
-import { Listbox as Y, ListboxButton as C, ListboxOptions as K, ListboxOption as X } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
-import { Transition as Z } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { FontAwesomeIcon as S } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as q, faXmark as G } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import H, { 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 K, ListboxButton as X, ListboxOptions as Z, ListboxOption as q } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
+import { Transition as G } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { FontAwesomeIcon as _ } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as J, faXmark as Q } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as s } from "../../../lib/utils.js";
-import { selectTriggerVariants as J } from "../Select/select-variants.js";
-import { Chip as _ } from "../Chip/Chip.js";
-import { PopupOption as Q } from "../../../internal/PopupOption.js";
-import { useDarkScope as z, POPUP_ANCHOR as tt, POPUP_WIDTH_OF_BUTTON as rt, POPUP_PANEL as et, popupInDarkPalette as st } from "../../../internal/popup.js";
-const bt = ({
+import { isFieldInvalid as z, withoutInvalidProps as tt } from "../../../internal/field-invalid.js";
+import { selectTriggerVariants as rt } from "../Select/select-variants.js";
+import { Chip as T } from "../Chip/Chip.js";
+import { PopupOption as et } from "../../../internal/PopupOption.js";
+import { useDarkScope as st, POPUP_ANCHOR as nt, POPUP_WIDTH_OF_BUTTON as ot, POPUP_PANEL as at, popupInDarkPalette as it } from "../../../internal/popup.js";
+const It = ({
   options: u,
   value: n,
   onChange: p,
@@ -21,10 +22,10 @@ const bt = ({
   disabled: i = !1,
   variant: v,
   size: o,
-  error: T,
-  className: F,
-  triggerClassName: L,
-  optionsClassName: R,
+  error: F,
+  className: L,
+  triggerClassName: R,
+  optionsClassName: D,
   helperText: x,
   errorMessage: h,
   label: b,
@@ -33,47 +34,48 @@ const bt = ({
   clearable: N = !1,
   chipColorScheme: k = "neutral",
   chipVariant: w = "outline",
-  clearLabel: D = "Clear selection",
-  removeLabel: j = (l) => `Remove ${l}`,
-  ...E
+  clearLabel: j = "Clear selection",
+  removeLabel: E = (l) => `Remove ${l}`,
+  ...I
 }) => {
-  const l = !!h || T, a = n.length > 0, y = new Map(u.map((t, e) => [t.value, e])), d = n.map((t) => ({
+  const l = !!h || F, U = z(l, I), $ = tt(I), a = n.length > 0, P = new Map(u.map((t, e) => [t.value, e])), d = n.map((t) => ({
     value: t,
     label: u.find((e) => e.value === t)?.label ?? String(t)
   })).sort(
-    (t, e) => (y.get(t.value) ?? Number.POSITIVE_INFINITY) - (y.get(e.value) ?? Number.POSITIVE_INFINITY)
-  ), I = g === void 0 ? d : d.slice(0, g), P = d.length - I.length, { ref: U, inDarkScope: $ } = z(), O = B.useRef(null);
+    (t, e) => (P.get(t.value) ?? Number.POSITIVE_INFINITY) - (P.get(e.value) ?? Number.POSITIVE_INFINITY)
+  ), y = g === void 0 ? d : d.slice(0, g), O = d.length - y.length, { ref: A, inDarkScope: B } = st(), S = H.useRef(null);
   return /* @__PURE__ */ c(
-    V,
+    Y,
     {
       disabled: i,
-      className: s("rst:flex rst:flex-col rst:gap-1.5", F),
-      ...E,
+      className: s("rst:flex rst:flex-col rst:gap-1.5", L),
+      ...$,
       children: [
-        b && /* @__PURE__ */ r(W, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: b }),
-        /* @__PURE__ */ r(Y, { value: n, onChange: p, disabled: i, multiple: !0, children: /* @__PURE__ */ c("div", { ref: U, className: "rst:relative", children: [
+        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(K, { value: n, onChange: p, disabled: i, multiple: !0, children: /* @__PURE__ */ c("div", { ref: A, className: "rst:relative", children: [
           /* @__PURE__ */ c(
             "div",
             {
               className: s(
-                J({ variant: v, size: o, error: l }),
+                rt({ variant: v, size: o, error: l }),
                 "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",
                 N && a && "rst:pr-16",
                 /* The ring is on the shell and fires from `focus-within`, because
                    the element that actually takes focus is the invisible button
                    stretched across it — and, deliberately, from a dismiss
-                   control too: those are inside the field and should light it. */
-                "rst:focus-within:ring-2 rst:focus-within:ring-ring",
+                   control too: those are inside the field and should light it.
+                   One pixel heavier than the edge, as Select's trigger is. */
+                "rst:focus-within:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-within:ring-ring",
                 i && "rst:opacity-50 rst:cursor-not-allowed",
-                L
+                R
               ),
               children: [
                 /* @__PURE__ */ r(
-                  C,
+                  X,
                   {
-                    ref: O,
-                    "aria-invalid": l || void 0,
+                    ref: S,
+                    "aria-invalid": U || 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: /* @__PURE__ */ r("span", { className: "rst:sr-only", children: a ? m === "count" ? `${n.length} selected` : d.map((t) => t.label).join(", ") : f })
                   }
@@ -97,15 +99,15 @@ const bt = ({
                     ]
                   }
                 ),
-                a && m === "chips" && I.map((t, e) => /* @__PURE__ */ r(
-                  _,
+                a && m === "chips" && y.map((t, e) => /* @__PURE__ */ r(
+                  T,
                   {
                     size: "sm",
                     variant: w,
                     colorScheme: k,
                     disabled: i,
-                    onRemove: () => p(n.filter((A) => A !== t.value)),
-                    removeLabel: j(t.label),
+                    onRemove: () => p(n.filter((M) => M !== t.value)),
+                    removeLabel: E(t.label),
                     className: s(
                       "rst:relative rst:max-w-[12rem] rst:pointer-events-none",
                       "rst:[&_button]:pointer-events-auto",
@@ -115,8 +117,8 @@ const bt = ({
                   },
                   `${e}-${String(t.value)}`
                 )),
-                P > 0 && m === "chips" && /* @__PURE__ */ c(
-                  _,
+                O > 0 && m === "chips" && /* @__PURE__ */ c(
+                  T,
                   {
                     size: "sm",
                     variant: w,
@@ -125,7 +127,7 @@ const bt = ({
                     className: "rst:pointer-events-none rst:relative rst:text-inherit rst:border-current/70 rst:dark:text-inherit rst:dark:border-current/70",
                     children: [
                       "+",
-                      P
+                      O
                     ]
                   }
                 ),
@@ -137,9 +139,9 @@ const bt = ({
                       o === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                     ),
                     children: /* @__PURE__ */ r(
-                      S,
+                      _,
                       {
-                        icon: q,
+                        icon: J,
                         className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                         "aria-hidden": "true"
                       }
@@ -152,9 +154,9 @@ const bt = ({
                     type: "button",
                     disabled: i,
                     onClick: () => {
-                      p([]), O.current?.focus();
+                      p([]), S.current?.focus();
                     },
-                    "aria-label": D,
+                    "aria-label": j,
                     className: s(
                       /* `w-6` is not decoration: WCAG 2.5.8 asks 24x24 CSS px and
                          a bare 14px icon measured 20px wide. The spacing exception
@@ -167,9 +169,9 @@ const bt = ({
                       o === "sm" ? "rst:right-7" : "rst:right-8"
                     ),
                     children: /* @__PURE__ */ r(
-                      S,
+                      _,
                       {
-                        icon: G,
+                        icon: Q,
                         className: "rst:h-3.5 rst:w-3.5",
                         "aria-hidden": "true"
                       }
@@ -180,26 +182,26 @@ const bt = ({
             }
           ),
           /* @__PURE__ */ r(
-            Z,
+            G,
             {
-              as: M,
+              as: V,
               leave: "rst:transition rst:ease-in rst:duration-100",
               leaveFrom: "rst:opacity-100",
               leaveTo: "rst:opacity-0",
               children: /* @__PURE__ */ r(
-                K,
+                Z,
                 {
-                  anchor: tt,
+                  anchor: nt,
                   className: s(
-                    st($, v) && "dark",
-                    et,
-                    rt,
-                    R
+                    it(B, v) && "dark",
+                    at,
+                    ot,
+                    D
                   ),
                   children: u.map((t) => /* @__PURE__ */ r(
-                    Q,
+                    et,
                     {
-                      as: X,
+                      as: q,
                       value: t.value,
                       disabled: t.disabled,
                       size: o,
@@ -213,7 +215,7 @@ const bt = ({
           )
         ] }) }),
         (x || h) && /* @__PURE__ */ r(
-          H,
+          W,
           {
             className: s(
               "rst:text-xs rst:text-left",
@@ -227,5 +229,5 @@ const bt = ({
   );
 };
 export {
-  bt as MultiSelect
+  It 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:w,error:m,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:w,error:m,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 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 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;

package/dist/components/atoms/PasswordInput/PasswordInput.js

@@ -43,7 +43,7 @@ const C = i.forwardRef(
             "aria-label": t ? m : p,
             "aria-pressed": t,
             className: a(
-              "rst:-m-1 rst:flex rst:items-center rst:rounded rst:p-1 rst:transition-opacity",
+              "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",
               r && "rst:cursor-not-allowed rst:opacity-40 rst:hover:opacity-40"

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"),g=require("react"),y=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),k=require("../../../node_modules/@headlessui/react/dist/components/field/field.cjs"),S=require("../../../node_modules/@headlessui/react/dist/components/label/label.cjs"),n=require("../../../node_modules/@headlessui/react/dist/components/listbox/listbox.cjs"),D=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),L=require("../../../node_modules/@fortawesome/react-fontawesome/dist/index.cjs"),T=require("../../../node_modules/@fortawesome/free-solid-svg-icons/index.cjs"),r=require("../../../lib/utils.cjs"),F=require("./select-variants.cjs"),_=require("../../../internal/PopupOption.cjs"),s=require("../../../internal/popup.cjs"),R=({options:l,value:d,onChange:f,placeholder:h="Select an option",disabled:x=!1,variant:u,size:a,error:b,className:v,triggerClassName:j,optionsClassName:P,helperText:p,errorMessage:i,label:m,...q})=>{const c=l.find(e=>e.value===d),o=!!i||b,{ref:N,inDarkScope:O}=s.useDarkScope();return t.jsxs(k.Field,{disabled:x,className:r.cn("rst:flex rst:flex-col rst:gap-1.5",v),...q,children:[m&&t.jsx(S.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:f,disabled:x,children:t.jsxs("div",{ref:N,className:"rst:relative",children:[t.jsxs(n.ListboxButton,{"aria-invalid":o||void 0,className:r.cn(F.selectTriggerVariants({variant:u,size:a,error:o}),j),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:h}),t.jsx("span",{className:r.cn("rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",a==="sm"?"rst:pr-2.5":"rst:pr-3"),children:t.jsx(L.FontAwesomeIcon,{icon:T.faChevronDown,className:"rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500","aria-hidden":"true"})})]}),t.jsx(D.Transition,{as:g.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(O,u)&&"dark",s.POPUP_PANEL,s.POPUP_WIDTH_OF_BUTTON,P),children:l.map(e=>t.jsx(_.PopupOption,{as:n.ListboxOption,value:e.value,disabled:e.disabled,size:a,children:e.label},e.value))})})]})}),(p||i)&&t.jsx(y.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:i||p})]})};exports.Select=R;
+"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;

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

@@ -1,35 +1,36 @@
 "use client";
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { Fragment as g } from "react";
-import { Description as y } from "../../../node_modules/@headlessui/react/dist/components/description/description.js";
-import { Field as D } from "../../../node_modules/@headlessui/react/dist/components/field/field.js";
+import { Fragment as D } from "react";
+import { Description as F } 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 F, ListboxButton as T, ListboxOptions as _, ListboxOption as I } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
-import { Transition as S } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-import { FontAwesomeIcon as U } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faChevronDown as w } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
-import { cn as e } from "../../../lib/utils.js";
-import { selectTriggerVariants as A } from "./select-variants.js";
-import { PopupOption as B } from "../../../internal/PopupOption.js";
-import { useDarkScope as j, POPUP_ANCHOR as C, POPUP_WIDTH_OF_BUTTON as E, POPUP_PANEL as H, popupInDarkPalette as R } from "../../../internal/popup.js";
-const tt = ({
+import { Listbox as T, ListboxButton as _, ListboxOptions as w, ListboxOption as S } from "../../../node_modules/@headlessui/react/dist/components/listbox/listbox.js";
+import { Transition as U } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+import { FontAwesomeIcon as A } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faChevronDown as B } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+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 = ({
   options: l,
   value: m,
-  onChange: x,
-  placeholder: h = "Select an option",
+  onChange: h,
+  placeholder: u = "Select an option",
   disabled: c = !1,
   variant: d,
-  size: s,
-  error: u,
-  className: v,
+  size: e,
+  error: v,
+  className: P,
   triggerClassName: N,
-  optionsClassName: P,
+  optionsClassName: b,
   helperText: p,
   errorMessage: a,
   label: f,
-  ...b
+  ...x
 }) => {
-  const o = l.find((r) => r.value === m), i = !!a || u, { ref: k, inDarkScope: O } = j();
+  const o = l.find((r) => r.value === m), i = !!a || v, k = j(i, x), O = C(x), { ref: g, inDarkScope: y } = R();
   return (
     /* `...props` is spread here, and was not before. The prop type has always
            extended `HTMLAttributes<HTMLDivElement>`, so `id`, `data-*` and the
@@ -42,52 +43,52 @@ const tt = ({
            which is the one path assistive tech actually follows. Before those
            existed there was no way to describe this trigger at all. */
     /* @__PURE__ */ n(
-      D,
+      I,
       {
         disabled: c,
-        className: e("rst:flex rst:flex-col rst:gap-1.5", v),
-        ...b,
+        className: s("rst:flex rst:flex-col rst:gap-1.5", P),
+        ...O,
         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(
-            F,
+            T,
             {
               value: m ?? void 0,
-              onChange: x,
+              onChange: h,
               disabled: c,
-              children: /* @__PURE__ */ n("div", { ref: k, className: "rst:relative", children: [
+              children: /* @__PURE__ */ n("div", { ref: g, className: "rst:relative", children: [
                 /* @__PURE__ */ n(
-                  T,
+                  _,
                   {
-                    "aria-invalid": i || void 0,
-                    className: e(
-                      A({ variant: d, size: s, error: i }),
+                    "aria-invalid": k || void 0,
+                    className: s(
+                      E({ variant: d, size: e, error: i }),
                       N
                     ),
                     children: [
                       /* @__PURE__ */ t(
                         "span",
                         {
-                          className: e(
+                          className: s(
                             "rst:block rst:truncate",
                             !o && "rst:text-gray-500 rst:dark:text-gray-400"
                           ),
-                          children: o ? o.label : h
+                          children: o ? o.label : u
                         }
                       ),
                       /* @__PURE__ */ t(
                         "span",
                         {
-                          className: e(
+                          className: s(
                             "rst:pointer-events-none rst:absolute rst:inset-y-0 rst:right-0 rst:flex rst:items-center",
                             /* Clearance tracks the size's own right padding, the way
                                Input's icon inset tracks its horizontal padding. */
-                            s === "sm" ? "rst:pr-2.5" : "rst:pr-3"
+                            e === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                           ),
                           children: /* @__PURE__ */ t(
-                            U,
+                            A,
                             {
-                              icon: w,
+                              icon: B,
                               className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                               "aria-hidden": "true"
                             }
@@ -98,29 +99,29 @@ const tt = ({
                   }
                 ),
                 /* @__PURE__ */ t(
-                  S,
+                  U,
                   {
-                    as: g,
+                    as: D,
                     leave: "rst:transition rst:ease-in rst:duration-100",
                     leaveFrom: "rst:opacity-100",
                     leaveTo: "rst:opacity-0",
                     children: /* @__PURE__ */ t(
-                      _,
+                      w,
                       {
-                        anchor: C,
-                        className: e(
-                          R(O, d) && "dark",
-                          H,
-                          E,
-                          P
+                        anchor: W,
+                        className: s(
+                          V(y, d) && "dark",
+                          M,
+                          K,
+                          b
                         ),
                         children: l.map((r) => /* @__PURE__ */ t(
-                          B,
+                          H,
                           {
-                            as: I,
+                            as: S,
                             value: r.value,
                             disabled: r.disabled,
-                            size: s,
+                            size: e,
                             children: r.label
                           },
                           r.value
@@ -133,9 +134,9 @@ const tt = ({
             }
           ),
           (p || a) && /* @__PURE__ */ t(
-            y,
+            F,
             {
-              className: e(
+              className: s(
                 "rst:text-xs rst:text-left",
                 i ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
               ),
@@ -148,5 +149,5 @@ const tt = ({
   );
 };
 export {
-  tt as Select
+  ot as Select
 };

package/dist/components/atoms/Select/select-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:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:shadow-sm rst:ring-1 rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:text-sm rst:group rst:relative rst:cursor-default rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",{variants:{size:{sm:"rst:py-2 rst:pl-3 rst:pr-8",default:"rst:py-2.5 rst:pl-4 rst:pr-9",lg:"rst:py-2.5 rst:pl-4 rst:pr-9"}},defaultVariants:{size:"default"}});exports.selectOptionVariants=s;exports.selectTriggerVariants=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:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",{variants:{variant:{white:"rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",soft:"rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",slate:"rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",outline:"rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:ring-[color:var(--roster-control-border)]",ghost:"rst:bg-transparent rst:text-gray-700 rst:ring-transparent rst:hover:bg-gray-100 rst:hover:text-gray-900 rst:dark:text-gray-300 rst:dark:hover:bg-gray-800 rst:dark:hover:text-gray-100"},size:{sm:"rst:h-9 rst:pl-3 rst:pr-9",default:"rst:h-10 rst:pl-4 rst:pr-10",lg:"rst:h-11 rst:pl-4 rst:pr-10"},error:{true:"rst:ring-error-500 rst:text-error-600 rst:focus-visible:ring-error-500 rst:dark:ring-error-500 rst:dark:text-error-400 rst:dark:focus-visible:ring-error-400",false:""}},defaultVariants:{variant:"outline",size:"default",error:!1}}),s=r.cva("rst:text-sm rst:group rst:relative rst:cursor-default rst:select-none rst:py-2.5 rst:pl-4 rst:pr-9 rst:transition-colors rst:text-inherit rst:data-focus:bg-primary-100 rst:data-focus:text-primary-900 rst:dark:data-focus:bg-primary-900/30 rst:dark:data-focus:text-primary-100 rst:data-selected:bg-gray-50 rst:dark:data-selected:bg-gray-700/50 rst:data-disabled:opacity-50 rst:data-disabled:cursor-not-allowed",{variants:{size:{sm:"rst:py-2 rst:pl-3 rst:pr-8",default:"rst:py-2.5 rst:pl-4 rst:pr-9",lg:"rst:py-2.5 rst:pl-4 rst:pr-9"}},defaultVariants:{size:"default"}});exports.selectOptionVariants=s;exports.selectTriggerVariants=t;

package/dist/components/atoms/Select/select-variants.js

@@ -9,8 +9,15 @@ const s = /* @__PURE__ */ r(
        Height used to be a side effect of `py-2.5` plus the line box, and the
        base carried `sm:leading-6` — which made this the only control in the
        library whose height changed at a breakpoint: 40px on mobile, 44px from
-       `sm` up. It is now an explicit height at every width. */
-  "rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:shadow-sm rst:ring-1 rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
+       `sm` up. It is now an explicit height at every width.
+  
+       The trigger draws its edge as a bare `ring`, which reads
+       `--roster-border-width` so it matches Input's `border` at any width. Its
+       focus ring is that width plus a pixel rather than a literal `ring-2`:
+       with the edge set to 2px, a 2px focus ring would change only the color,
+       and focus would stop being a heavier line. Unset, it computes to 2px, as
+       before. */
+  "rst:font-ui rst:relative rst:flex rst:w-full rst:cursor-pointer rst:disabled:cursor-not-allowed rst:disabled:opacity-50 rst:items-center rst:rounded-md rst:h-10 rst:pl-4 rst:pr-10 rst:text-left rst:text-sm rst:font-medium rst:elevation-control rst:ring rst:ring-inset rst:transition-all rst:focus:outline-hidden rst:focus-visible:ring-[length:calc(var(--roster-border-width,1px)+1px)] rst:focus-visible:ring-ring",
   {
     variants: {
       variant: {

package/dist/components/atoms/Switch/switch-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:before:absolute rst:before:top-1/2 rst:before:left-1/2 rst:before:size-11 rst:before:-translate-x-1/2 rst:before:-translate-y-1/2 rst:before:content-[''] rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",{variants:{variant:{primary:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-primary-500 rst:focus-visible:ring-ring",success:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-green-500 rst:focus-visible:ring-ring",danger:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-error-500 rst:focus-visible:ring-ring",neutral:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-gray-600 rst:dark:data-[checked]:bg-gray-500 rst:focus-visible:ring-ring"},size:{xs:"rst:h-4 rst:w-7",sm:"rst:h-5 rst:w-9",md:"rst:h-6 rst:w-11",lg:"rst:h-7 rst:w-14"}},defaultVariants:{variant:"primary",size:"md"}}),s=r.cva("rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:shadow rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",{variants:{size:{xs:"rst:h-3 rst:w-3 rst:translate-x-0 rst:group-data-[checked]:translate-x-3",sm:"rst:h-4 rst:w-4 rst:translate-x-0 rst:group-data-[checked]:translate-x-4",md:"rst:h-5 rst:w-5 rst:translate-x-0 rst:group-data-[checked]:translate-x-5",lg:"rst:h-6 rst:w-6 rst:translate-x-0 rst:group-data-[checked]:translate-x-7"}},defaultVariants:{size:"md"}});exports.switchThumbVariants=s;exports.switchTrackVariants=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:before:absolute rst:before:top-1/2 rst:before:left-1/2 rst:before:size-11 rst:before:-translate-x-1/2 rst:before:-translate-y-1/2 rst:before:content-[''] rst:font-ui rst:group rst:relative rst:inline-flex rst:shrink-0 rst:cursor-pointer rst:rounded-full rst:border-2 rst:border-transparent rst:transition-colors rst:duration-200 rst:ease-in-out rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:disabled:cursor-not-allowed rst:disabled:opacity-50",{variants:{variant:{primary:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-primary-500 rst:focus-visible:ring-ring",success:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-green-500 rst:focus-visible:ring-ring",danger:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-error-500 rst:focus-visible:ring-ring",neutral:"rst:bg-gray-200 rst:dark:bg-gray-700 rst:data-[checked]:bg-gray-600 rst:dark:data-[checked]:bg-gray-500 rst:focus-visible:ring-ring"},size:{xs:"rst:h-4 rst:w-7",sm:"rst:h-5 rst:w-9",md:"rst:h-6 rst:w-11",lg:"rst:h-7 rst:w-14"}},defaultVariants:{variant:"primary",size:"md"}}),s=r.cva("rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:elevation-control rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",{variants:{size:{xs:"rst:h-3 rst:w-3 rst:translate-x-0 rst:group-data-[checked]:translate-x-3",sm:"rst:h-4 rst:w-4 rst:translate-x-0 rst:group-data-[checked]:translate-x-4",md:"rst:h-5 rst:w-5 rst:translate-x-0 rst:group-data-[checked]:translate-x-5",lg:"rst:h-6 rst:w-6 rst:translate-x-0 rst:group-data-[checked]:translate-x-7"}},defaultVariants:{size:"md"}});exports.switchThumbVariants=s;exports.switchTrackVariants=t;

package/dist/components/atoms/Switch/switch-variants.js

@@ -22,7 +22,7 @@ const s = /* @__PURE__ */ r(
     }
   }
 ), a = /* @__PURE__ */ r(
-  "rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:shadow rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",
+  "rst:pointer-events-none rst:inline-block rst:rounded-full rst:bg-white rst:elevation-control rst:ring-0 rst:transition rst:duration-200 rst:ease-in-out rst:transform",
   {
     variants: {
       size: {

package/dist/components/atoms/Textarea/Textarea.cjs

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