@crewlethq/ui 0.84.2 → 0.86.0

package/dist/chunk-REWKR3S4.js

@@ -0,0 +1,73 @@
+import { SidebarNav, NavItem } from './chunk-BRK3HXGZ.js';
+import { Select } from './chunk-3IWZVEXA.js';
+import { Text } from './chunk-O5CEG7TQ.js';
+import { Card } from './chunk-U2IQNDDR.js';
+import './RailList-N2ZBPRM2.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RAIL_LIST_LABELS = {
+  counted: "items",
+  option: (label, count) => count === void 0 ? label : `${label} (${count.toLocaleString()})`
+};
+var elsewhere = (event) => event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+function RailList({
+  label,
+  items,
+  value,
+  onChange,
+  toolbar,
+  note,
+  children,
+  renderLink,
+  labels: overrides,
+  className
+}) {
+  const words = overrides ? { ...RAIL_LIST_LABELS, ...overrides } : RAIL_LIST_LABELS;
+  const chosen = items.find((item) => item.key === value);
+  const about = chosen?.description;
+  const picker = /* @__PURE__ */ jsx("span", { className: "crewlet-rail-list__picker", children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ariaLabel: label,
+      size: "sm",
+      width: "auto",
+      value,
+      options: items.map((item) => ({ value: item.key, label: words.option(item.label, item.count), text: item.label })),
+      onChange: (next) => onChange(String(next))
+    }
+  ) });
+  const bar = toolbar === void 0 || toolbar === null ? /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar crewlet-rail-list__bar--picker-only", children: picker }) : /* @__PURE__ */ jsx("div", { className: "crewlet-rail-list__bar", children: typeof toolbar === "function" ? toolbar(picker) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    picker,
+    toolbar
+  ] }) });
+  return /* @__PURE__ */ jsx(Card, { padding: "none", className, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list", children: [
+    bar,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__rail", children: [
+        /* @__PURE__ */ jsx(SidebarNav, { label, dense: true, children: items.map((item) => /* @__PURE__ */ jsx(
+          NavItem,
+          {
+            label: item.label,
+            href: item.href,
+            current: item.key === value,
+            count: item.count === void 0 ? void 0 : { value: item.count.toLocaleString(), label: words.counted },
+            renderLink,
+            onClick: (event) => {
+              if (item.href !== void 0 && elsewhere(event)) return;
+              event.preventDefault();
+              onChange(item.key);
+            }
+          },
+          item.key
+        )) }),
+        note !== void 0 && note !== null && note !== false ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "tertiary", className: "crewlet-rail-list__note", children: note }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-rail-list__list", children: [
+        about !== void 0 && about !== null && about !== false && about !== "" ? /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", tone: "secondary", className: "crewlet-rail-list__about", children: about }) : null,
+        children
+      ] })
+    ] })
+  ] }) });
+}
+
+export { RAIL_LIST_LABELS, RailList };

package/dist/{chunk-WMO722J2.js → chunk-TBQFZV4H.js}

@@ -1,4 +1,4 @@
-import { ContrastLevelTag } from './chunk-2ZSCHQOA.js';
+import { ContrastLevelTag } from './chunk-WMSXPF7T.js';
 import { Popover } from './chunk-EC6EUIAD.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';

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

@@ -3,8 +3,8 @@ import { Spinner } from './chunk-XSPCITPN.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Stepper-YQBNYCIS.css';
-import './StepList-A4YVU4JI.css';
-import { CircleCheckGlyph, CircleAlertGlyph, LockGlyph, CircleStopGlyph, ClockGlyph, CheckGlyph, TriangleAlertGlyph } from '@crewlethq/icons/glyphs';
+import './StepList-OAJ45IBX.css';
+import { CircleCheckGlyph, CircleAlertGlyph, LockGlyph, CircleStopGlyph, CircleDashedGlyph, ClockGlyph, CheckGlyph, TriangleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Fragment as Fragment$1 } from 'react';
 
@@ -128,17 +128,26 @@ function Stepper({
     )
   );
 }
-var STEP_STATES = ["running", "done", "failed", "refused", "stopped", "waiting"];
+var STEP_STATES = [
+  "running",
+  "done",
+  "failed",
+  "refused",
+  "stopped",
+  "waiting",
+  "pending"
+];
 var STEP_STATE_LABELS = {
   running: "Running",
   done: "Done",
   failed: "Failed",
   refused: "Not permitted",
   stopped: "Stopped",
-  waiting: "Waiting for your approval"
+  waiting: "Waiting for your approval",
+  pending: "Not started"
 };
 function StepStateMark({ state, className }) {
-  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-step-mark", `crewlet-step-mark--${state}`, className), "aria-hidden": "true", children: state === "running" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : state === "done" ? /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "sm" }) : state === "failed" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) : state === "refused" ? /* @__PURE__ */ jsx(LockGlyph, { size: "sm" }) : state === "stopped" ? /* @__PURE__ */ jsx(CircleStopGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ClockGlyph, { size: "sm" }) });
+  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-step-mark", `crewlet-step-mark--${state}`, className), "aria-hidden": "true", children: state === "running" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : state === "done" ? /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "sm" }) : state === "failed" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) : state === "refused" ? /* @__PURE__ */ jsx(LockGlyph, { size: "sm" }) : state === "stopped" ? /* @__PURE__ */ jsx(CircleStopGlyph, { size: "sm" }) : state === "pending" ? /* @__PURE__ */ jsx(CircleDashedGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ClockGlyph, { size: "sm" }) });
 }
 function stepDetailPieces(text) {
   const pieces = [];

package/dist/chunk-TRZS7DLB.js

@@ -0,0 +1,159 @@
+import { FormField, Label, Input } from './chunk-O7N6W52M.js';
+import { Button } from './chunk-DGXZ635L.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { announce } from './chunk-2G355KDJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './KeyValueRows-US5KW7JK.css';
+import { useId, useRef, useEffect } from 'react';
+import { TrashGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function keyValueRowsLabels(keyLabel, valueLabel = "Value") {
+  const item = keyLabel.toLocaleLowerCase();
+  return {
+    key: (position) => `${keyLabel} ${position}`,
+    value: (key, position) => key ? `${valueLabel} for ${key}` : `${valueLabel} for ${item} ${position}`,
+    remove: (key, position) => key ? `Remove ${key}` : `Remove ${item} ${position}`,
+    add: `Add ${item}`,
+    removed: (key, position) => key ? `Removed ${key}` : `Removed ${item} ${position}`
+  };
+}
+function KeyValueRows(props) {
+  const {
+    label,
+    hideLabel = false,
+    keyLabel,
+    valueLabel = "Value",
+    value: rows,
+    onChange,
+    keyPlaceholder,
+    valuePlaceholder,
+    secret = false,
+    keyReadOnly,
+    keyError,
+    valueError,
+    empty,
+    helper,
+    error,
+    disabled = false,
+    labels: overrides,
+    className,
+    createRow
+  } = props;
+  const words = { ...keyValueRowsLabels(keyLabel, valueLabel), ...overrides };
+  const base = useId();
+  const minted = useRef(0);
+  const keyFields = useRef(/* @__PURE__ */ new Map());
+  const addButton = useRef(null);
+  const focusNext = useRef(null);
+  useEffect(() => {
+    const want = focusNext.current;
+    if (want === null) return;
+    focusNext.current = null;
+    if (want === "add") addButton.current?.focus();
+    else keyFields.current.get(want.id)?.focus();
+  });
+  const blank = () => createRow ? createRow() : { id: `${base}-${minted.current += 1}`, key: "", value: "" };
+  const edit = (id, change) => onChange(rows.map((row) => row.id === id ? { ...row, ...change } : row));
+  const add = () => {
+    const row = blank();
+    focusNext.current = { id: row.id };
+    onChange([...rows, row]);
+  };
+  const remove = (index) => {
+    const gone = rows[index];
+    const next = rows.filter((_, i) => i !== index);
+    const neighbour = next[index] ?? next[index - 1];
+    focusNext.current = neighbour ? { id: neighbour.id } : "add";
+    onChange(next);
+    announce(words.removed(gone.key.trim(), index + 1));
+  };
+  const placeholderFor = (row) => typeof valuePlaceholder === "function" ? valuePlaceholder(row) : valuePlaceholder;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      as: "fieldset",
+      label,
+      hideLabel,
+      helper,
+      error,
+      className: cx("crewlet-key-value-rows", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__body", children: [
+        rows.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__table", children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__head", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(Label, { as: "span", children: keyLabel }),
+            /* @__PURE__ */ jsx(Label, { as: "span", children: valueLabel })
+          ] }),
+          rows.map((row, index) => {
+            const position = index + 1;
+            const key = row.key.trim();
+            return /* @__PURE__ */ jsxs("div", { className: "crewlet-key-value-rows__row", children: [
+              /* @__PURE__ */ jsx(FormField, { label: words.key(position), hideLabel: true, error: keyError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: (element) => {
+                    if (element) keyFields.current.set(row.id, element);
+                    else keyFields.current.delete(row.id);
+                  },
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  appearance: "reference",
+                  value: row.key,
+                  placeholder: keyPlaceholder,
+                  readOnly: keyReadOnly?.(row) ?? false,
+                  disabled,
+                  autoComplete: "off",
+                  spellCheck: false,
+                  onChange: (event) => edit(row.id, { key: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(FormField, { label: words.value(key, position), hideLabel: true, error: valueError?.(row, index), children: (field) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: field.id,
+                  "aria-describedby": field.describedBy,
+                  "aria-invalid": field.invalid || void 0,
+                  error: field.invalid,
+                  type: secret ? "password" : "text",
+                  autoComplete: secret ? "new-password" : "off",
+                  spellCheck: false,
+                  value: row.value,
+                  placeholder: placeholderFor(row),
+                  disabled,
+                  onChange: (event) => edit(row.id, { value: event.target.value })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost-danger",
+                  label: words.remove(key, position),
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  disabled,
+                  onClick: () => remove(index)
+                }
+              )
+            ] }, row.id);
+          })
+        ] }) : empty !== void 0 && empty !== null && empty !== false ? /* @__PURE__ */ jsx("p", { className: "crewlet-key-value-rows__empty", children: empty }) : null,
+        /* @__PURE__ */ jsx("div", { className: "crewlet-key-value-rows__add", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: addButton,
+            variant: "ghost",
+            size: "small",
+            flush: true,
+            leadingIcon: /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }),
+            disabled,
+            onClick: add,
+            children: words.add
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+export { KeyValueRows, keyValueRowsLabels };

package/dist/{chunk-K6RWEQ6P.js → chunk-WRZPO4YL.js}

@@ -1,7 +1,7 @@
-import { Stepper } from './chunk-RJWO2PC5.js';
+import { Stepper } from './chunk-TMML7BHT.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
 import { useMediaMatch } from './chunk-YJQXESOJ.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SetupWizard-Y2PFPBCZ.css';

package/dist/{chunk-DD7RBNT4.js → chunk-XH55NRHO.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-4MJN2KN6.js';
 import { Section } from './chunk-WFCWPXJN.js';
 import { Composer } from './chunk-EBVZHVPD.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { ArtifactPanel } from './chunk-5ILRWUE7.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-6RW2MUTY.js → chunk-XU7RQNT6.js}

@@ -1,7 +1,7 @@
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './ChoiceList-JN4PPNFW.css';
+import './ChoiceList-ZQMZTEZX.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-AQNP3KQU.js → chunk-Y7PPKQFQ.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-3IWZVEXA.js';
 import { Modal } from './chunk-ZXXZESCD.js';
-import { CopyButton } from './chunk-T5GBTXNC.js';
+import { CopyButton } from './chunk-ETNQYT5O.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { useMediaMatch } from './chunk-YJQXESOJ.js';

package/dist/generated/index.d.ts

@@ -23,6 +23,7 @@ export * from '../ArtifactNameCell/index.js';
 export * from '../ArtifactPanel/index.js';
 export * from '../AsideLayout/index.js';
 export * from '../AttachmentChip/index.js';
+export * from '../AttentionList/index.js';
 export * from '../AuthLayout/index.js';
 export * from '../Avatar/index.js';
 export * from '../AvatarPicker/index.js';
@@ -121,6 +122,7 @@ export * from '../InlineRef/index.js';
 export * from '../Input/index.js';
 export * from '../Kbd/index.js';
 export * from '../KeyChip/index.js';
+export * from '../KeyValueRows/index.js';
 export * from '../Layer/index.js';
 export * from '../LayersList/index.js';
 export * from '../Layout/index.js';
@@ -138,6 +140,7 @@ export * from '../LogoSlot/index.js';
 export * from '../Markdown/index.js';
 export * from '../MarkdownEditor/index.js';
 export * from '../MediaMatch/index.js';
+export * from '../MemberPicker/index.js';
 export * from '../MentionChip/index.js';
 export * from '../MentionMenu/index.js';
 export * from '../Menu/index.js';
@@ -173,6 +176,7 @@ export * from '../PropertyList/index.js';
 export * from '../ProposalCard/index.js';
 export * from '../Prose/index.js';
 export * from '../QrCode/index.js';
+export * from '../RailList/index.js';
 export * from '../ReactionBar/index.js';
 export * from '../ReadingPane/index.js';
 export * from '../ReceiptStrip/index.js';