@crewlethq/ui 0.75.3 → 0.76.0

package/dist/{chunk-4OX2WVXO.js → chunk-PMBJMNBX.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-PYJLHHYF.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-OXB45TG2.js → chunk-RIAPCEB5.js}

@@ -1,11 +1,11 @@
 import { Select } from './chunk-VK45YJLH.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-EE3DJMSQ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { Input } from './chunk-DCQ2VTBB.js';
+import { Input } from './chunk-FB3TCNQP.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-YZPKNZZI.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/{chunk-HJBHP66O.js → chunk-RJWO2PC5.js}

@@ -1,8 +1,8 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { Spinner } from './chunk-XSPCITPN.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Stepper-32INSYF7.css';
+import './Stepper-YQBNYCIS.css';
 import './StepList-A4YVU4JI.css';
 import { CircleCheckGlyph, CircleAlertGlyph, LockGlyph, CircleStopGlyph, ClockGlyph, CheckGlyph, TriangleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-NTQPJJAN.js → chunk-RTMNULTL.js}

@@ -1,4 +1,4 @@
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { Card } from './chunk-4AUTALJA.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-C3SCONKY.js → chunk-RVSNBUIU.js}

@@ -1,7 +1,8 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-3MJQAHHA.css';
+import './ChoiceButtons-T3GG6VLG.css';
 import { useId } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function ChoiceButtons({
@@ -65,7 +66,8 @@ function ChoiceButtons({
                 isRecommended ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   " ",
                   /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__note", children: recommendedLabel })
-                ] }) : null
+                ] }) : null,
+                isChosen ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-buttons__check", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckGlyph, {}) }) : null
               ]
             },
             option.value

package/dist/{chunk-SRDZVY5M.js → chunk-SK5SLGZH.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-PYJLHHYF.js';
+import { SegmentedControl } from './chunk-BKXUZCZX.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-CMTLQOJY.js → chunk-T24HBEU6.js}

@@ -1,5 +1,5 @@
 import { normalizeHex, parseColourInput } from './chunk-7W3LYIOC.js';
-import { FormField, Input, InputAffix } from './chunk-DCQ2VTBB.js';
+import { FormField, Input, InputAffix } from './chunk-FB3TCNQP.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorField-2OIOWT3Z.css';
 import { useId, useState } from 'react';

package/dist/{chunk-EEVATVP5.js → chunk-TJIBTHWJ.js}

@@ -1,6 +1,6 @@
 import { useReorder } from './chunk-MPVMB2DV.js';
-import { Input } from './chunk-DCQ2VTBB.js';
-import { Menu } from './chunk-KNAHKQD4.js';
+import { Input } from './chunk-FB3TCNQP.js';
+import { Menu } from './chunk-OQG4P5KU.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-GAUBP247.js → chunk-TKUAGWNR.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-3XDT5ZWL.js';
 import { useReorder } from './chunk-MPVMB2DV.js';
-import { Checkbox } from './chunk-EAR2F5OA.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-HMOGLAXY.js → chunk-TPCBPGSB.js}

@@ -1,7 +1,7 @@
 import { SlideStage } from './chunk-RMEBFYL7.js';
 import { useReorder } from './chunk-MPVMB2DV.js';
 import { Kbd, isApplePlatform } from './chunk-ANTAQAR4.js';
-import { Menu } from './chunk-KNAHKQD4.js';
+import { Menu } from './chunk-OQG4P5KU.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideFilmstrip-BLGBCLEU.css';

package/dist/{chunk-CFXDWGQI.js → chunk-TPIMOGOZ.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-PLL7ZJHY.js';
-import { FormField, Input } from './chunk-DCQ2VTBB.js';
+import { FormField, Input } from './chunk-FB3TCNQP.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {

package/dist/{chunk-HDLUG3MA.js → chunk-UY3FWQWG.js}

@@ -1,10 +1,10 @@
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Menu } from './chunk-KNAHKQD4.js';
+import { Menu } from './chunk-OQG4P5KU.js';
 import { PeekContext, AsideContext, ResizeHandle, clampSize } from './chunk-PIYJNCN7.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { focusables, useModalLayer, isComposing, layerCount } from './chunk-H5XTJ7GJ.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { returnFocus } from './chunk-NUZHC6MM.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-RQHN4J5P.js → chunk-UYF2B2TH.js}

@@ -1,4 +1,4 @@
-import { StatusCard } from './chunk-NTQPJJAN.js';
+import { StatusCard } from './chunk-RTMNULTL.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './RefusalCard-UM67F5HB.css';
 import { LockGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-I5OIKDX2.js → chunk-VERJCAJ4.js}

@@ -1,4 +1,4 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tag-JTJVZM2D.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-PKVWCKS2.js → chunk-VG3SIJ3M.js}

@@ -1,5 +1,5 @@
 import { Link } from './chunk-QF5UNP4T.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { Avatar } from './chunk-KTIQSSME.js';

package/dist/{chunk-BAHLBMCH.js → chunk-WK4FQPYW.js}

@@ -1,9 +1,9 @@
 import { useListbox } from './chunk-7KHM2FZH.js';
-import { Tag } from './chunk-I5OIKDX2.js';
+import { Tag } from './chunk-VERJCAJ4.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
+import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-MZXEHKJD.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-4RKTZSEW.js → chunk-WL4TC4YZ.js}

@@ -1,4 +1,4 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SettingsTable-6DUFAFXG.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-SBHAKX2T.js → chunk-X5FKORDM.js}

@@ -1,11 +1,11 @@
-import { Stepper } from './chunk-HJBHP66O.js';
+import { Stepper } from './chunk-RJWO2PC5.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SetupWizard-WDOFFNIM.css';
-import { useId, useRef, useEffect, createElement } from 'react';
+import './SetupWizard-2SUMQEWU.css';
+import { useId, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -14,6 +14,16 @@ var LABELS = {
   asideToggle: "Preview"
 };
 var PHONE = `(width < ${breakpoint.phone})`;
+var STILL_ROW = { overflows: false, left: false, right: false };
+function stepRowOf(scroller) {
+  const steps = scroller.querySelectorAll("li");
+  if (steps.length === 0) return STILL_ROW;
+  const box = scroller.getBoundingClientRect();
+  const boxes = [...steps].map((step) => step.getBoundingClientRect());
+  const left = Math.min(...boxes.map((r) => r.left)) < box.left - 0.5;
+  const right = Math.max(...boxes.map((r) => r.right)) > box.right + 0.5;
+  return { overflows: scroller.scrollWidth > scroller.clientWidth + 0.5 || left || right, left, right };
+}
 function SetupWizard({
   title,
   headingLevel,
@@ -31,6 +41,7 @@ function SetupWizard({
   aside,
   asideLabel,
   footer,
+  primaryAction,
   footerStart,
   wide = false,
   labels,
@@ -45,12 +56,35 @@ function SetupWizard({
   const contentLevel = nextHeadingLevel(stepLevel);
   const headingId = useId();
   const headingRef = useRef(null);
+  const stepsRef = useRef(null);
+  const [row, setRow] = useState(STILL_ROW);
   const shown = useRef(current);
   useEffect(() => {
     if (shown.current === current) return;
     shown.current = current;
     headingRef.current?.focus();
   }, [current]);
+  const measure = useCallback(() => {
+    const scroller = stepsRef.current;
+    if (!scroller) return;
+    const next = stepRowOf(scroller);
+    setRow((was) => was.overflows === next.overflows && was.left === next.left && was.right === next.right ? was : next);
+  }, []);
+  useEffect(() => {
+    if (!phone) return;
+    const scroller = stepsRef.current;
+    const here = scroller?.querySelector('[aria-current="step"]')?.closest("li");
+    if (!scroller || !here) return;
+    const box = scroller.getBoundingClientRect();
+    const step2 = here.getBoundingClientRect();
+    scroller.scrollLeft += step2.left + step2.width / 2 - (box.left + box.width / 2);
+    measure();
+  }, [phone, current, measure]);
+  useEffect(() => {
+    if (!phone) return;
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [phone, measure]);
   if (aside !== void 0 && aside !== null && !asideLabel) {
     throw new TypeError("SetupWizard needs an asideLabel with an aside: it names the aside\u2019s landmark");
   }
@@ -95,12 +129,38 @@ function SetupWizard({
           )
         ] }),
         /* @__PURE__ */ jsxs("nav", { className: "crewlet-setup-wizard__rail", "aria-label": stepsLabel, children: [
-          phone && step ? /* @__PURE__ */ jsxs("p", { className: "crewlet-setup-wizard__position", children: [
-            text.progress(position + 1, steps.length),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__position-step", children: step.label })
+          phone && step ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("p", { className: "crewlet-setup-wizard__position", children: [
+              text.progress(position + 1, steps.length),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__position-step", children: step.label })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "crewlet-setup-wizard__progress",
+                "aria-hidden": "true",
+                style: { "--crewlet-setup-wizard-progress": String((position + 1) / steps.length) }
+              }
+            )
           ] }) : null,
-          stepper
+          phone ? (
+            // A ROW THAT OVERFLOWS IS A SCROLLER THE KEYBOARD CAN REACH: it
+            // takes focus and a name only while it hides steps, since a pill
+            // that only labels its step takes no focus of its own.
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: stepsRef,
+                className: "crewlet-setup-wizard__steps",
+                "data-fade-left": row.left ? "" : void 0,
+                "data-fade-right": row.right ? "" : void 0,
+                onScroll: measure,
+                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": stepsLabel } : {},
+                children: stepper
+              }
+            )
+          ) : stepper
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [
           createElement(
@@ -114,7 +174,10 @@ function SetupWizard({
         asideBlock === null ? null : phone ? /* @__PURE__ */ jsx(Disclosure, { className: "crewlet-setup-wizard__preview", title: text.asideToggle, headingLevel: stepLevel, children: asideBlock }) : asideBlock,
         /* @__PURE__ */ jsxs("footer", { className: "crewlet-setup-wizard__footer", children: [
           footerStart ? /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-start", children: footerStart }) : null,
-          /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__footer-end", children: footer })
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-setup-wizard__footer-end", children: [
+            footer,
+            primaryAction ? /* @__PURE__ */ jsx("span", { className: "crewlet-setup-wizard__primary", children: primaryAction }) : null
+          ] })
         ] })
       ] })
     }

package/dist/{chunk-4DL2BQJE.js → chunk-YL7AR6PR.js}

@@ -1,4 +1,4 @@
-import { EditingStatus } from './chunk-VLGGLLKH.js';
+import { EditingStatus } from './chunk-624X3RVA.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-TF74KS36.js → chunk-YQDRJZ5J.js}

@@ -3,7 +3,7 @@ import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-HBDA76EZ.js';
 import { Skeleton } from './chunk-BRLZXYPA.js';
-import { Input } from './chunk-DCQ2VTBB.js';
+import { Input } from './chunk-FB3TCNQP.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-7OFVR7X4.js → chunk-ZKLEAK7M.js}

@@ -4,7 +4,7 @@ import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Card } from './chunk-4AUTALJA.js';
 import { AvatarStack } from './chunk-BT3GB7HC.js';
 import { ArtifactKindGround } from './chunk-NHLNHH4J.js';
-import { Checkbox } from './chunk-EAR2F5OA.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-OUUHIA3B.js → chunk-ZMIVQGAB.js}

@@ -1,11 +1,11 @@
 import { Select } from './chunk-VK45YJLH.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-SRDZVY5M.js';
+import { HueSwatch } from './chunk-SK5SLGZH.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Checkbox } from './chunk-EAR2F5OA.js';
+import { Checkbox } from './chunk-LMQG3VPG.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
-import { FormField, Input } from './chunk-DCQ2VTBB.js';
-import { Menu } from './chunk-KNAHKQD4.js';
+import { FormField, Input } from './chunk-FB3TCNQP.js';
+import { Menu } from './chunk-OQG4P5KU.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-352FPJ2Q.js → chunk-ZW5SRQ5M.js}

@@ -1,4 +1,4 @@
-import { HuePicker } from './chunk-SRDZVY5M.js';
+import { HuePicker } from './chunk-SK5SLGZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-I22MUEG7.js';

package/dist/generated/index.d.ts

@@ -47,6 +47,7 @@ export * from '../Charts/index.js';
 export * from '../ChatThread/index.js';
 export * from '../Checkbox/index.js';
 export * from '../ChoiceButtons/index.js';
+export * from '../ChoiceCards/index.js';
 export * from '../ChoiceList/index.js';
 export * from '../CodeBlock/index.js';
 export * from '../ColorChip/index.js';