@blakesteve/roster 5.6.0 → 5.8.0

package/dist/components/atoms/LoadingDots/LoadingDots.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useState as l, useEffect as m } from "react";
+import { cn as a } from "../../../lib/utils.js";
+const u = [
+  { rest: "rst:opacity-100", delay: "0s" },
+  { rest: "rst:opacity-60", delay: "0.2s" },
+  { rest: "rst:opacity-30", delay: "0.4s" }
+];
+function g({ label: s = "Loading", announce: r = !0, className: o }) {
+  const [i, n] = l("");
+  return m(() => {
+    const t = setTimeout(() => n(s), 50);
+    return () => clearTimeout(t);
+  }, [s]), /* @__PURE__ */ c(
+    "span",
+    {
+      role: r ? "status" : void 0,
+      className: a("rst:inline-flex rst:items-center rst:gap-[0.25em] rst:align-middle", o),
+      "data-loading-dots": "",
+      children: [
+        u.map((t, d) => /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: a(
+              "rst:block rst:h-[0.4em] rst:w-[0.4em] rst:rounded-full rst:bg-current rst:animate-dot",
+              /* Forced colors drop backgrounds; these keep the text's color. */
+              "rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[CanvasText]",
+              t.rest
+            ),
+            style: { animationDelay: t.delay, animationFillMode: "backwards" }
+          },
+          d
+        )),
+        /* @__PURE__ */ e("span", { className: "rst:sr-only", children: r ? i : s })
+      ]
+    }
+  );
+}
+export {
+  g as LoadingDots
+};

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

package/dist/components/atoms/MultiSelect/MultiSelect.d.ts

@@ -70,6 +70,8 @@ export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivEleme
      * tell apart, so this takes the label rather than being a constant.
      */
     removeLabel?: (label: string) => string;
+    /** With `display="count"`, how many are chosen: "3 selected". Shown, and said. */
+    countLabel?: (count: number) => string;
 }
-declare const MultiSelect: ({ options, value, onChange, placeholder, disabled, variant, size, error, className, triggerClassName, optionsClassName, helperText, errorMessage, label, display, maxChips, clearable, chipColorScheme, chipVariant, clearLabel, removeLabel, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, placeholder, disabled, variant, size, error, className, triggerClassName, optionsClassName, helperText, errorMessage, label, display, maxChips, clearable, chipColorScheme, chipVariant, clearLabel, removeLabel, countLabel, ...props }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export { MultiSelect };

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

@@ -1,65 +1,66 @@
 "use client";
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-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 { 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 = ({
+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 { 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 { 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 { 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 = ({
   options: u,
-  value: n,
+  value: o,
   onChange: p,
   placeholder: f = "Select options",
-  disabled: i = !1,
+  disabled: l = !1,
   variant: v,
-  size: o,
-  error: F,
-  className: L,
-  triggerClassName: R,
-  optionsClassName: D,
+  size: i,
+  error: R,
+  className: D,
+  triggerClassName: L,
+  optionsClassName: j,
   helperText: x,
   errorMessage: h,
   label: b,
-  display: m = "chips",
+  display: c = "chips",
   maxChips: g,
   clearable: N = !1,
   chipColorScheme: k = "neutral",
   chipVariant: w = "outline",
-  clearLabel: j = "Clear selection",
-  removeLabel: E = (l) => `Remove ${l}`,
-  ...I
+  clearLabel: E = "Clear selection",
+  removeLabel: U = (e) => `Remove ${e}`,
+  countLabel: I = (e) => `${e} selected`,
+  ...P
 }) => {
-  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) => ({
+  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) => ({
     value: t,
-    label: u.find((e) => e.value === t)?.label ?? String(t)
+    label: u.find((s) => s.value === t)?.label ?? String(t)
   })).sort(
-    (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(
-    Y,
+    (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);
+  return /* @__PURE__ */ d(
+    C,
     {
-      disabled: i,
-      className: s("rst:flex rst:flex-col rst:gap-1.5", L),
-      ...$,
+      disabled: l,
+      className: n("rst:flex rst:flex-col rst:gap-1.5", D),
+      ...A,
       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(
+        b && /* @__PURE__ */ r(K, { 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",
             {
-              className: s(
-                rt({ variant: v, size: o, error: l }),
+              className: n(
+                et({ variant: v, size: i, 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",
+                i === "sm" ? "rst:min-h-9" : i === "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
@@ -67,17 +68,17 @@ const It = ({
                    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",
-                R
+                l && "rst:opacity-50 rst:cursor-not-allowed",
+                L
               ),
               children: [
                 /* @__PURE__ */ r(
-                  X,
+                  Z,
                   {
-                    ref: S,
-                    "aria-invalid": U || void 0,
+                    ref: _,
+                    "aria-invalid": $ || 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 })
+                    children: /* @__PURE__ */ r("span", { className: "rst:sr-only", children: a ? c === "count" ? I(o.length) : m.map((t) => t.label).join(", ") : f })
                   }
                 ),
                 !a && /* @__PURE__ */ r(
@@ -88,37 +89,34 @@ const It = ({
                     children: f
                   }
                 ),
-                a && m === "count" && /* @__PURE__ */ c(
+                a && c === "count" && /* @__PURE__ */ r(
                   "span",
                   {
                     "aria-hidden": "true",
                     className: "rst:pointer-events-none rst:relative rst:block rst:truncate",
-                    children: [
-                      n.length,
-                      " selected"
-                    ]
+                    children: I(o.length)
                   }
                 ),
-                a && m === "chips" && y.map((t, e) => /* @__PURE__ */ r(
-                  T,
+                a && c === "chips" && O.map((t, s) => /* @__PURE__ */ r(
+                  F,
                   {
                     size: "sm",
                     variant: w,
                     colorScheme: k,
-                    disabled: i,
-                    onRemove: () => p(n.filter((M) => M !== t.value)),
-                    removeLabel: E(t.label),
-                    className: s(
+                    disabled: l,
+                    onRemove: () => p(o.filter((H) => H !== t.value)),
+                    removeLabel: U(t.label),
+                    className: n(
                       "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: /* @__PURE__ */ r("span", { className: "rst:block rst:truncate", children: t.label })
                   },
-                  `${e}-${String(t.value)}`
+                  `${s}-${String(t.value)}`
                 )),
-                O > 0 && m === "chips" && /* @__PURE__ */ c(
-                  T,
+                S > 0 && c === "chips" && /* @__PURE__ */ d(
+                  F,
                   {
                     size: "sm",
                     variant: w,
@@ -127,21 +125,21 @@ const It = ({
                     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
+                      S
                     ]
                   }
                 ),
                 /* @__PURE__ */ r(
                   "span",
                   {
-                    className: s(
+                    className: n(
                       "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"
+                      i === "sm" ? "rst:pr-2.5" : "rst:pr-3"
                     ),
                     children: /* @__PURE__ */ r(
-                      _,
+                      T,
                       {
-                        icon: J,
+                        icon: Q,
                         className: "rst:h-3.5 rst:w-3.5 rst:text-gray-400 rst:dark:text-gray-500",
                         "aria-hidden": "true"
                       }
@@ -152,12 +150,12 @@ const It = ({
                   "button",
                   {
                     type: "button",
-                    disabled: i,
+                    disabled: l,
                     onClick: () => {
-                      p([]), S.current?.focus();
+                      p([]), _.current?.focus();
                     },
-                    "aria-label": j,
-                    className: s(
+                    "aria-label": E,
+                    className: n(
                       /* `w-6` is not decoration: WCAG 2.5.8 asks 24x24 CSS px and
                          a bare 14px icon measured 20px wide. The spacing exception
                          does not apply, because this sits inside the trigger's own
@@ -166,12 +164,12 @@ const It = ({
                       "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"
+                      i === "sm" ? "rst:right-7" : "rst:right-8"
                     ),
                     children: /* @__PURE__ */ r(
-                      _,
+                      T,
                       {
-                        icon: Q,
+                        icon: z,
                         className: "rst:h-3.5 rst:w-3.5",
                         "aria-hidden": "true"
                       }
@@ -182,29 +180,29 @@ const It = ({
             }
           ),
           /* @__PURE__ */ r(
-            G,
+            J,
             {
-              as: V,
+              as: W,
               leave: "rst:transition rst:ease-in rst:duration-100",
               leaveFrom: "rst:opacity-100",
               leaveTo: "rst:opacity-0",
               children: /* @__PURE__ */ r(
-                Z,
+                q,
                 {
-                  anchor: nt,
-                  className: s(
-                    it(B, v) && "dark",
+                  anchor: ot,
+                  className: n(
+                    lt(M, v) && "dark",
                     at,
-                    ot,
-                    D
+                    it,
+                    j
                   ),
                   children: u.map((t) => /* @__PURE__ */ r(
-                    et,
+                    st,
                     {
-                      as: q,
+                      as: G,
                       value: t.value,
                       disabled: t.disabled,
-                      size: o,
+                      size: i,
                       children: t.label
                     },
                     t.value
@@ -215,11 +213,11 @@ const It = ({
           )
         ] }) }),
         (x || h) && /* @__PURE__ */ r(
-          W,
+          Y,
           {
-            className: s(
+            className: n(
               "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"
+              e ? "rst:text-error-600 rst:dark:text-error-400 rst:font-medium" : "rst:text-gray-500 rst:dark:text-gray-400"
             ),
             children: h || x
           }
@@ -229,5 +227,5 @@ const It = ({
   );
 };
 export {
-  It as MultiSelect
+  Pt as MultiSelect
 };

package/dist/components/atoms/Progress/Progress.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),c=require("../../../lib/utils.cjs"),G=require("../../../lib/labels.cjs"),H=require("./progress-values.cjs"),O={percent:r=>`${r}%`,count:(r,s)=>`${r} of ${s}`,indeterminate:"Loading",status:(r,s)=>r?`${r}: ${s}`:s},b={default:"rst:bg-primary-600 rst:dark:bg-primary-400",success:"rst:bg-success-600 rst:dark:bg-success-400",warning:"rst:bg-amber-700 rst:dark:bg-amber-400",error:"rst:bg-error-600 rst:dark:bg-error-400"},P={default:"rst:border-primary-600 rst:dark:border-primary-400",success:"rst:border-success-600 rst:dark:border-success-400",warning:"rst:border-amber-700 rst:dark:border-amber-400",error:"rst:border-error-600 rst:dark:border-error-400"},p="rst:bg-[var(--roster-skeleton)]",R="rst:forced-colors:outline-solid rst:forced-colors:outline-1",h="rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]",T={sm:"rst:h-1.5",md:"rst:h-2.5"};function V(r,s,t){const[m,n]=u.useState(r),e=u.useRef(r),l=u.useRef(Number.NEGATIVE_INFINITY),a=u.useRef(r);return u.useEffect(()=>{if(a.current=r,r===e.current)return;const f=t?0:Math.max(0,l.current+s-Date.now()),g=setTimeout(()=>{a.current!==e.current&&(l.current=Date.now(),e.current=a.current,n(a.current))},f);return()=>clearTimeout(g)},[r,s,t]),m}function _({value:r,max:s=100,variant:t="continuous",segments:m,status:n="default",size:e="md",rounded:l=!0,busy:a=!1,label:f,valueText:g,announce:j=!0,announceEvery:y=1500,labels:v,className:x}){const i=G.withLabels(O,v),{known:w,fraction:k,percent:I,states:L,done:E,applicable:S,complete:$}=H.progressValues({value:r,max:s,variant:t,segments:m}),q=g??(t==="segmented"?i.count(E,S):w?i.percent(I):i.indeterminate),F=$,A=V(i.status(f,q),y,F),N=a&&"rst:animate-pulse rst:motion-reduce:animate-none",C=t==="segmented"?o.jsx("div",{"aria-hidden":"true",className:c.cn("rst:flex rst:w-full",e==="sm"?"rst:gap-0.5":"rst:gap-1",T[e],N),"data-progress-track":"",children:L.map((d,D)=>o.jsx("span",{className:c.cn("rst:h-full rst:min-w-0 rst:flex-1",l?"rst:rounded-full":"rst:rounded-sm",d==="done"&&[b[n],h],d==="current"&&[p,"rst:border-2",P[n]],d==="remaining"&&[p,R],d==="na"&&"rst:border rst:border-dashed rst:border-gray-500 rst:dark:border-gray-400"),"data-segment":d},D))}):o.jsx("div",{"aria-hidden":"true",className:c.cn("rst:relative rst:w-full rst:overflow-hidden rst:rounded-full",T[e],p,R,N),"data-progress-track":"",children:w?o.jsx("div",{className:c.cn("rst:h-full rst:rounded-full rst:transition-[width] rst:motion-reduce:transition-none",b[n],h),style:{width:`${k*100}%`,minWidth:k>0?e==="sm"?"0.375rem":"0.625rem":void 0},"data-progress-fill":""}):o.jsx("div",{className:c.cn("rst:absolute rst:inset-y-0 rst:left-0 rst:w-[30%] rst:rounded-full rst:animate-progress-travel",b[n],h),"data-progress-fill":"indeterminate"})});return o.jsxs("div",{className:c.cn("rst:w-full",x),"data-progress":t,"data-status":n,children:[C,j&&o.jsx("span",{role:"status",className:"rst:sr-only","data-progress-status":"",children:A})]})}exports.Progress=_;

package/dist/components/atoms/Progress/Progress.d.ts

@@ -0,0 +1,62 @@
+import { SegmentState } from './progress-values';
+export type ProgressStatus = "default" | "success" | "warning" | "error";
+/** A segment's state: finished, under way, still to come, or not part of this one. */
+export type ProgressSegmentState = SegmentState;
+/** Every word Progress says. Pass any of them in `labels` to replace it. */
+export interface ProgressLabels {
+    /** A continuous value as said: "45%". */
+    percent: (percent: number) => string;
+    /** A segmented value as said: "3 of 8". Segments that don't apply aren't counted. */
+    count: (done: number, total: number) => string;
+    /** Said when there's no value to give. */
+    indeterminate: string;
+    /** The label and the value together: "Uploading photos: 45%". */
+    status: (label: string | undefined, value: string) => string;
+}
+export interface ProgressProps {
+    /**
+     * How far, from 0 to `max`. Leave it out for indeterminate: work under way
+     * with no figure, drawn as a pill crossing the track.
+     */
+    value?: number | null;
+    /** The whole: 100 by default; for segmented, the number of segments. */
+    max?: number;
+    /**
+     * - `"continuous"`: one filled track, for a fraction (bytes, percent).
+     * - `"segmented"`: one cell per unit, for a count of discrete things:
+     *   "twelve of sixteen" reads without a number beside it.
+     */
+    variant?: "continuous" | "segmented";
+    /** Segmented: each segment's state, when there's more to say than done and not done. */
+    segments?: ProgressSegmentState[];
+    status?: ProgressStatus;
+    size?: "sm" | "md";
+    /** Segmented: round each cell into a capsule (the default), or keep them square. */
+    rounded?: boolean;
+    /**
+     * The value stands but work goes on (a server finishing what it was sent):
+     * the bar breathes in place. Stops under reduced motion.
+     */
+    busy?: boolean;
+    /** What's progressing, for the status a screen reader hears: "Uploading photos". */
+    label?: string;
+    /** The value as said, in place of the percent or the count: "3 of 8 files". */
+    valueText?: string;
+    /** Give the value to screen readers in a polite status region. Off when something else already says it. */
+    announce?: boolean;
+    /** The least time between two announcements, in milliseconds. */
+    announceEvery?: number;
+    /** The component's own words, replaced; any left out stay English. */
+    labels?: Partial<ProgressLabels>;
+    className?: string;
+}
+/**
+ * How far through something is: a continuous bar, or a segmented one.
+ *
+ * The bar is a picture and is hidden from screen readers; a status region
+ * beside it carries the value as text, because a changed `aria-label` isn't
+ * reliably announced and a `progressbar` may beep or speak on every update.
+ * Most screens want ProgressField, which adds a visible label and value.
+ */
+declare function Progress({ value, max, variant, segments, status, size, rounded, busy, label, valueText: valueOverride, announce, announceEvery, labels: overrides, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export { Progress };

package/dist/components/atoms/Progress/Progress.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as a, jsxs as H } from "react/jsx-runtime";
+import { useState as _, useRef as b, useEffect as K } from "react";
+import { cn as d } from "../../../lib/utils.js";
+import { withLabels as O } from "../../../lib/labels.js";
+import { progressValues as V } from "./progress-values.js";
+const B = {
+  percent: (r) => `${r}%`,
+  count: (r, s) => `${r} of ${s}`,
+  indeterminate: "Loading",
+  status: (r, s) => r ? `${r}: ${s}` : s
+}, g = {
+  default: "rst:bg-primary-600 rst:dark:bg-primary-400",
+  success: "rst:bg-success-600 rst:dark:bg-success-400",
+  warning: "rst:bg-amber-700 rst:dark:bg-amber-400",
+  error: "rst:bg-error-600 rst:dark:bg-error-400"
+}, M = {
+  default: "rst:border-primary-600 rst:dark:border-primary-400",
+  success: "rst:border-success-600 rst:dark:border-success-400",
+  warning: "rst:border-amber-700 rst:dark:border-amber-400",
+  error: "rst:border-error-600 rst:dark:border-error-400"
+}, p = "rst:bg-[var(--roster-skeleton)]", T = "rst:forced-colors:outline-solid rst:forced-colors:outline-1", h = "rst:forced-colors:forced-color-adjust-none rst:forced-colors:bg-[Highlight]", y = { sm: "rst:h-1.5", md: "rst:h-2.5" };
+function P(r, s, e) {
+  const [u, o] = _(r), t = b(r), l = b(Number.NEGATIVE_INFINITY), n = b(r);
+  return K(() => {
+    if (n.current = r, r === t.current) return;
+    const m = e ? 0 : Math.max(0, l.current + s - Date.now()), f = setTimeout(() => {
+      n.current !== t.current && (l.current = Date.now(), t.current = n.current, o(n.current));
+    }, m);
+    return () => clearTimeout(f);
+  }, [r, s, e]), u;
+}
+function U({
+  value: r,
+  max: s = 100,
+  variant: e = "continuous",
+  segments: u,
+  status: o = "default",
+  size: t = "md",
+  rounded: l = !0,
+  busy: n = !1,
+  label: m,
+  valueText: f,
+  announce: I = !0,
+  announceEvery: L = 1500,
+  labels: v,
+  className: E
+}) {
+  const i = O(B, v), { known: w, fraction: k, percent: R, states: $, done: F, applicable: A, complete: C } = V({ value: r, max: s, variant: e, segments: u }), D = f ?? (e === "segmented" ? i.count(F, A) : w ? i.percent(R) : i.indeterminate), S = C, j = P(i.status(m, D), L, S), N = n && "rst:animate-pulse rst:motion-reduce:animate-none", x = e === "segmented" ? /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: d("rst:flex rst:w-full", t === "sm" ? "rst:gap-0.5" : "rst:gap-1", y[t], N),
+      "data-progress-track": "",
+      children: $.map((c, G) => /* @__PURE__ */ a(
+        "span",
+        {
+          className: d(
+            "rst:h-full rst:min-w-0 rst:flex-1",
+            l ? "rst:rounded-full" : "rst:rounded-sm",
+            c === "done" && [g[o], h],
+            /* Under way: the track inside a border of the fill's color. */
+            c === "current" && [p, "rst:border-2", M[o]],
+            c === "remaining" && [p, T],
+            /* Not part of this one: a dashed outline, neither filled nor to
+               fill. Gray-500 on light and gray-400 on dark clear 3:1. */
+            c === "na" && "rst:border rst:border-dashed rst:border-gray-500 rst:dark:border-gray-400"
+          ),
+          "data-segment": c
+        },
+        G
+      ))
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: d("rst:relative rst:w-full rst:overflow-hidden rst:rounded-full", y[t], p, T, N),
+      "data-progress-track": "",
+      children: w ? /* @__PURE__ */ a(
+        "div",
+        {
+          className: d(
+            "rst:h-full rst:rounded-full rst:transition-[width] rst:motion-reduce:transition-none",
+            g[o],
+            h
+          ),
+          style: { width: `${k * 100}%`, minWidth: k > 0 ? t === "sm" ? "0.375rem" : "0.625rem" : void 0 },
+          "data-progress-fill": ""
+        }
+      ) : /* @__PURE__ */ a(
+        "div",
+        {
+          className: d("rst:absolute rst:inset-y-0 rst:left-0 rst:w-[30%] rst:rounded-full rst:animate-progress-travel", g[o], h),
+          "data-progress-fill": "indeterminate"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ H("div", { className: d("rst:w-full", E), "data-progress": e, "data-status": o, children: [
+    x,
+    I && /* @__PURE__ */ a("span", { role: "status", className: "rst:sr-only", "data-progress-status": "", children: j })
+  ] });
+}
+export {
+  U as Progress
+};

package/dist/components/atoms/Progress/progress-values.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function u({value:t,max:c=100,variant:a="continuous",segments:h}){const s=Number.isFinite(c)?Math.max(0,c):100,e=t!=null&&Number.isFinite(t),n=e&&s>0?Math.min(1,Math.max(0,t/s)):0,m=n>=1?100:n<=0?0:Math.min(99,Math.max(1,Math.round(n*100))),r=a==="segmented"?h??Array.from({length:Math.floor(s)},(o,d)=>e&&d<Math.floor(t)?"done":"remaining"):[],l=r.filter(o=>o==="done").length,i=r.filter(o=>o!=="na").length,g=a==="segmented"?i>0&&l===i:e&&n>=1;return{known:e,fraction:n,percent:m,states:r,done:l,applicable:i,complete:g}}exports.progressValues=u;

package/dist/components/atoms/Progress/progress-values.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The numbers a Progress shows and says, worked out once so the bar, the
+ * status and a ProgressField's visible value can't disagree.
+ */
+export type SegmentState = "done" | "current" | "remaining" | "na";
+export interface ProgressValues {
+    /** Whether there's a figure at all; without one, the bar is indeterminate. */
+    known: boolean;
+    /** 0 to 1. */
+    fraction: number;
+    /** The percent as said and shown: 1 to 99 while under way, never rounded to 0 or 100. */
+    percent: number;
+    /** Segmented: every segment's state. */
+    states: SegmentState[];
+    done: number;
+    /** Segments that count: all but `na`. */
+    applicable: number;
+    /** Nothing left: the value is at the whole, or every applicable segment is done. */
+    complete: boolean;
+}
+export declare function progressValues({ value, max, variant, segments, }: {
+    value?: number | null;
+    max?: number;
+    variant?: "continuous" | "segmented";
+    segments?: SegmentState[];
+}): ProgressValues;

package/dist/components/atoms/Progress/progress-values.js

@@ -0,0 +1,12 @@
+function f({
+  value: n,
+  max: c = 100,
+  variant: a = "continuous",
+  segments: m
+}) {
+  const s = Number.isFinite(c) ? Math.max(0, c) : 100, o = n != null && Number.isFinite(n), t = o && s > 0 ? Math.min(1, Math.max(0, n / s)) : 0, l = t >= 1 ? 100 : t <= 0 ? 0 : Math.min(99, Math.max(1, Math.round(t * 100))), r = a === "segmented" ? m ?? Array.from({ length: Math.floor(s) }, (e, d) => o && d < Math.floor(n) ? "done" : "remaining") : [], h = r.filter((e) => e === "done").length, i = r.filter((e) => e !== "na").length, M = a === "segmented" ? i > 0 && h === i : o && t >= 1;
+  return { known: o, fraction: t, percent: l, states: r, done: h, applicable: i, complete: M };
+}
+export {
+  f as progressValues
+};

package/dist/components/atoms/Skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),c=require("../../../lib/utils.cjs"),k={sm:"rst:text-xs",md:"rst:text-sm",lg:"rst:text-base",inherit:""},f={xs:"rst:h-6 rst:w-6",sm:"rst:h-8 rst:w-8",md:"rst:h-10 rst:w-10",lg:"rst:h-12 rst:w-12",xl:"rst:h-16 rst:w-16"},b={sm:"rst:rounded-sm",md:"rst:rounded-md",lg:"rst:rounded-lg",xl:"rst:rounded-xl",full:"rst:rounded-full"},h="rst:animate-skeleton rst:forced-colors:outline-solid rst:forced-colors:outline-1";function S({shape:s="line",size:r,lines:a=1,width:e,height:u,radius:i,className:l}){if(s==="circle"){const o=r&&r in f?r:"md";return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:shrink-0 rst:rounded-full rst:border rst:border-transparent",f[o],h,l),"data-skeleton":"circle"})}if(s==="block")return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block rst:w-full",b[i??"lg"],h,l),style:{height:u??"8rem",width:e},"data-skeleton":"block"});const m=r&&r in k?r:"md",n=Math.max(1,Math.floor(a)),j=o=>{const d=o===n-1;return t.jsxs("span",{className:c.cn("rst:relative rst:block",n>1&&!d&&"rst:w-full"),style:{width:n>1?d?e??"60%":void 0:e},children:[" ",t.jsx("span",{className:c.cn("rst:absolute rst:inset-x-0 rst:top-1/2 rst:h-[0.7em] rst:-translate-y-1/2",b[i??"sm"],h)})]},o)};return t.jsx("span",{"aria-hidden":"true",className:c.cn("rst:block",k[m],l),"data-skeleton":"line",children:Array.from({length:n},(o,d)=>j(d))})}function g({loading:s,skeleton:r,label:a="Loading",announce:e=!0,children:u,className:i}){const[l,m]=x.useState("");return x.useEffect(()=>{const n=setTimeout(()=>m(s&&e?a:""),s?50:0);return()=>clearTimeout(n)},[s,a,e]),t.jsxs(t.Fragment,{children:[t.jsx("span",{role:"status",className:"rst:sr-only","data-skeleton-status":"",children:l}),t.jsx("div",{"aria-busy":s||void 0,className:i,"data-skeleton-region":s?"loading":"ready",children:s?t.jsx("div",{"aria-hidden":"true",children:r}):u})]})}exports.Skeleton=S;exports.SkeletonRegion=g;