@crewlethq/ui 0.4.3 → 0.5.0

package/dist/{chunk-HQNHV7D6.js → chunk-LFHCXZO5.js}

@@ -1,7 +1,7 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DiffList-3EX64AAE.css';
-import { DifferenceGlyph, RemoveGlyph, AddGlyph, ArrowForwardGlyph } from '@crewlethq/icons/glyphs';
+import { DiffGlyph, MinusGlyph, PlusGlyph, ArrowRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DIFF_LIST_LABELS = {
@@ -11,9 +11,9 @@ var DIFF_LIST_LABELS = {
   to: "to"
 };
 var GLYPHS = {
-  added: AddGlyph,
-  removed: RemoveGlyph,
-  changed: DifferenceGlyph
+  added: PlusGlyph,
+  removed: MinusGlyph,
+  changed: DiffGlyph
 };
 function DiffList({ rows, emptyMessage, labels: overrides, className }) {
   const labels = overrides ? { ...DIFF_LIST_LABELS, ...overrides } : DIFF_LIST_LABELS;
@@ -37,9 +37,9 @@ function DiffList({ rows, emptyMessage, labels: overrides, className }) {
               /* @__PURE__ */ jsx(VisuallyHidden, { children: labels[row.kind] })
             ] }),
             /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__path", children: row.path }),
-            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__value", children: row.kind === "added" ? row.to : row.kind === "removed" ? row.from : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__value", children: row.kind === "added" ? /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__to", children: row.to }) : row.kind === "removed" ? /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__from", children: row.from }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__from", children: row.from }),
-              /* @__PURE__ */ jsx(ArrowForwardGlyph, { className: "crewlet-diff-list__arrow", size: "sm" }),
+              /* @__PURE__ */ jsx(ArrowRightGlyph, { className: "crewlet-diff-list__arrow", size: "sm" }),
               /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.to }),
               /* @__PURE__ */ jsx("span", { className: "crewlet-diff-list__to", children: row.to })
             ] }) })

package/dist/{chunk-LWKJQTOM.js → chunk-MICH6QSJ.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-5KPQ6D7N.js';
+import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';

package/dist/chunk-N3DPO6HG.js

@@ -0,0 +1,226 @@
+import { Kbd } from './chunk-KJ34ZBBI.js';
+import { Modal } from './chunk-IG27QX7Q.js';
+import { useListbox } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-DSUY5F4E.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CommandPalette-C5AMKGN2.css';
+import { useId, useMemo } from 'react';
+import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function CommandPalette(props) {
+  return props.open ? /* @__PURE__ */ jsx(Palette, { ...props }) : null;
+}
+function Palette({
+  open: _open,
+  onClose,
+  label = "Search",
+  query,
+  onQueryChange,
+  groups,
+  placeholder = "Search",
+  lead,
+  footer,
+  escapeHint = false,
+  emptyMessage = "Nothing matches that search.",
+  pendingMessage = "Searching\u2026",
+  resultsLabel = "Results",
+  scopes,
+  scope,
+  onScopeChange,
+  groupsScope,
+  scopesLabel = "Search in",
+  className,
+  ...rest
+}) {
+  const id = useId();
+  const stale = scopes !== void 0 && groupsScope !== scope;
+  const shown = useMemo(() => stale ? [] : groups, [stale, groups]);
+  const flat = useMemo(() => shown.flatMap((group) => group.items), [shown]);
+  const listbox = useListbox({
+    id,
+    open: true,
+    count: flat.length,
+    popup: false,
+    onCommit: (at) => {
+      const item = flat[at];
+      if (!item) return;
+      item.onSelect();
+      onClose();
+    },
+    onClose
+  });
+  const tabId = (scopeId) => `${id}-scope-${scopeId}`;
+  const panelId = `${id}-panel`;
+  const current = scopes?.find((candidate) => candidate.id === scope);
+  function choose(next) {
+    if (!onScopeChange || next === scope) return;
+    onScopeChange(next);
+    listbox.setActive(0);
+  }
+  function onKeyDown(event) {
+    if (listbox.onKeyDown(event)) return;
+    if (!scopes || scopes.length === 0 || isComposing(event)) return;
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    let step = 0;
+    if (event.key === "Tab") step = event.shiftKey ? -1 : 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowRight") step = 1;
+    else if (query === "" && !event.shiftKey && event.key === "ArrowLeft") step = -1;
+    if (step === 0) return;
+    event.preventDefault();
+    const at = scopes.findIndex((candidate) => candidate.id === scope);
+    const next = scopes[(at + step + scopes.length) % scopes.length];
+    if (next) choose(next.id);
+  }
+  const active = listbox.active;
+  let index = -1;
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      ...rest,
+      open: true,
+      onClose,
+      placement: "top",
+      size: "md",
+      ariaLabel: label,
+      showCloseButton: false,
+      flush: true,
+      className: cx("crewlet-palette", className),
+      footerStart: footer,
+      children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            appearance: "command",
+            containerClassName: "crewlet-palette__field",
+            leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+            trailing: escapeHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, "aria-hidden": true, className: "crewlet-palette__escape", children: "Esc" }) : void 0,
+            value: query,
+            onChange: (event) => {
+              onQueryChange(event.target.value);
+              listbox.setActive(0);
+            },
+            onKeyDown,
+            placeholder,
+            role: "combobox",
+            "aria-label": label,
+            "aria-expanded": true,
+            "aria-controls": listbox.listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": active >= 0 ? listbox.optionId(active) : void 0,
+            "aria-describedby": current ? tabId(current.id) : void 0,
+            autoComplete: "off",
+            spellCheck: false
+          }
+        ),
+        scopes ? /* @__PURE__ */ jsx("div", { className: "crewlet-palette__scopes", role: "tablist", "aria-label": scopesLabel, children: scopes.map((candidate) => {
+          const selected = candidate.id === scope;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: tabId(candidate.id),
+              className: cx("crewlet-palette__scope", selected && "is-active"),
+              "aria-selected": selected,
+              "aria-controls": panelId,
+              tabIndex: -1,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => choose(candidate.id),
+              children: [
+                candidate.label,
+                candidate.count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: candidate.count }) : null
+              ]
+            },
+            candidate.id
+          );
+        }) }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "crewlet-palette__results",
+            ref: listbox.listRef,
+            ...scopes ? { id: panelId, role: "tabpanel", "aria-labelledby": current ? tabId(current.id) : void 0 } : {},
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "crewlet-palette__lead", "aria-live": "polite", children: lead }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "crewlet-palette__list",
+                  id: listbox.listId,
+                  role: "listbox",
+                  "aria-label": resultsLabel,
+                  "aria-busy": stale || void 0,
+                  children: shown.map((group) => (
+                    // Named by the id of its own heading, never by the heading's text:
+                    // `aria-label` would repeat words already on screen, and
+                    // `aria-labelledby` given a name with a space in it splits on it.
+                    /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${group.id}`, children: [
+                      /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: `${id}-group-${group.id}`, role: "presentation", children: group.label }),
+                      group.items.map((item) => {
+                        index += 1;
+                        const mine = index;
+                        return (
+                          /*
+                           * NOT A BUTTON, and not focusable: focus never leaves the
+                           * field, so a row is reached by the arrows and by the pointer.
+                           *
+                           * The two rules turned off here are both asking for the shape
+                           * this pattern is defined NOT to have. A combobox points at
+                           * its active option with `aria-activedescendant`, which
+                           * requires that the option itself never take focus, and the
+                           * keys that take a row (Enter) are handled on the field,
+                           * where the rule cannot see them. Making a row focusable
+                           * would put one tab stop per result between the field and
+                           * itself, which is the defect this replaced. The axe run in
+                           * the suite beside this file is what actually holds the
+                           * surface accessible.
+                           */
+                          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              id: listbox.optionId(mine),
+                              className: "crewlet-listbox__option crewlet-palette__row",
+                              role: "option",
+                              "aria-selected": mine === active,
+                              onMouseEnter: listbox.optionHandlers(mine).onMouseEnter,
+                              onMouseDown: (event) => event.preventDefault(),
+                              onClick: () => {
+                                item.onSelect();
+                                onClose();
+                              },
+                              children: [
+                                item.icon !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__icon", "aria-hidden": "true", children: item.icon }) : null,
+                                /* @__PURE__ */ jsxs("span", { className: "crewlet-palette__text", children: [
+                                  /* @__PURE__ */ jsx("span", { className: "crewlet-palette__label", children: item.label }),
+                                  item.hint !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    " ",
+                                    /* @__PURE__ */ jsx("span", { className: "crewlet-palette__hint", children: item.hint })
+                                  ] }) : null
+                                ] }),
+                                item.meta !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-palette__meta", children: item.meta }) : null
+                              ]
+                            },
+                            item.id
+                          )
+                        );
+                      })
+                    ] }, group.id)
+                  ))
+                }
+              ),
+              flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-palette__empty", children: stale ? pendingMessage : emptyMessage }) : null
+            ]
+          }
+        ),
+        current ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx("span", { children: current.label }, current.id) }) }) : null
+      ]
+    }
+  );
+}
+
+export { CommandPalette };

package/dist/{chunk-S4GZWSKR.js → chunk-OM5E3TTK.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AddPill-DFWXYLIQ.css';
+import './AddPill-IJQYCY6C.css';
 import { useState, useId, useRef, useCallback, useEffect, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-3QRYCPXQ.js → chunk-OPKIKM35.js}

@@ -1,17 +1,17 @@
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Copyable-5PNRFOLS.css';
 import { useCallback } from 'react';
-import { CheckGlyph, ErrorGlyph, ContentCopyGlyph } from '@crewlethq/icons/glyphs';
+import { CheckGlyph, CircleAlertGlyph, CopyGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function copyGlyph(state) {
   if (state === "copied") return /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" });
-  if (state === "failed") return /* @__PURE__ */ jsx(ErrorGlyph, { size: "sm" });
-  return /* @__PURE__ */ jsx(ContentCopyGlyph, { size: "sm" });
+  if (state === "failed") return /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" });
+  return /* @__PURE__ */ jsx(CopyGlyph, { size: "sm" });
 }
 function CopyStatus({ state, copiedMessage, failedMessage }) {
   return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: state === "copied" ? copiedMessage : state === "failed" ? failedMessage : "" }) });
@@ -24,7 +24,7 @@ function CopyButton({
   copiedMessage = "copied to the clipboard",
   failedMessage = "the browser refused the clipboard",
   size = "small",
-  variant = "tertiary",
+  variant = "ghost",
   title,
   resetMs,
   failedResetMs,

package/dist/{chunk-5EKIWVOR.js → chunk-PGRPNDWM.js}

@@ -1,6 +1,6 @@
-import { isComposing } from './chunk-ITHXJHBB.js';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toolbar-IP6LXN45.css';
+import './Toolbar-HUOSMNTH.css';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-LFJ6UJTI.js → chunk-PQNILU27.js}

@@ -1,11 +1,11 @@
-import { Kbd } from './chunk-SFZOKW2G.js';
-import { FormField, Textarea, Input } from './chunk-O6232G37.js';
+import { Kbd } from './chunk-KJ34ZBBI.js';
+import { FormField, Textarea, Input } from './chunk-DSUY5F4E.js';
 import { announce } from './chunk-RSAQOKH3.js';
-import { isComposing } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
-import { ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, AddGlyph } from '@crewlethq/icons/glyphs';
+import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var minted = 0;
@@ -163,7 +163,7 @@ function ListInput({
           size: "sm",
           variant: "soft-brand",
           label: addLabel(itemName),
-          icon: /* @__PURE__ */ jsx(AddGlyph, {}),
+          icon: /* @__PURE__ */ jsx(PlusGlyph, {}),
           disabled: disabled || draft.trim() === "",
           onClick: add
         }
@@ -210,7 +210,7 @@ function ListInput({
                   {
                     size: "sm",
                     label: moveUpLabel(itemName, position),
-                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, {}),
+                    icon: /* @__PURE__ */ jsx(ArrowUpGlyph, {}),
                     disabled: disabled || index === 0,
                     onClick: () => move(index, -1, "up"),
                     ref: (el) => {
@@ -224,7 +224,7 @@ function ListInput({
                   {
                     size: "sm",
                     label: moveDownLabel(itemName, position),
-                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, {}),
+                    icon: /* @__PURE__ */ jsx(ArrowDownGlyph, {}),
                     disabled: disabled || index === count - 1,
                     onClick: () => move(index, 1, "down"),
                     ref: (el) => {
@@ -240,7 +240,7 @@ function ListInput({
                   size: "sm",
                   variant: "ghost-danger",
                   label: removeLabel(itemName, position),
-                  icon: /* @__PURE__ */ jsx(CloseGlyph, {}),
+                  icon: /* @__PURE__ */ jsx(XGlyph, {}),
                   disabled,
                   onClick: () => remove(index)
                 }

package/dist/{chunk-QNCVHRZL.js → chunk-QVAFL2LE.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-TGB6AEKM.css';
+import './StatGroup-HVG6O62W.css';
 import { jsx } from 'react/jsx-runtime';
 
 function StatGroup({ columns = 4, className, children, ...rest }) {

package/dist/{chunk-QEUY3A5P.js → chunk-QY7UU5ZB.js}

@@ -1,6 +1,6 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-VLICJFVB.css';
+import './Tabs-XCNPHA7B.css';
 import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -107,10 +107,11 @@ function Tabs({
     update();
     reveal(nav);
     const mutation = new MutationObserver(update);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
     nav.querySelectorAll(".crewlet-tabs__tab").forEach((tab) => {
       mutation.observe(tab, { attributes: true, attributeFilter: ["class"] });
+      resize?.observe(tab);
     });
-    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
     resize?.observe(nav);
     return () => {
       mutation.disconnect();

package/dist/{chunk-ITHXJHBB.js → chunk-R25RGPUB.js}

@@ -79,6 +79,7 @@ function onKeyDown(event) {
     return;
   }
   if (event.key !== "Tab") return;
+  if (event.defaultPrevented) return;
   const modal = top("modal");
   const panel = modal?.panel();
   if (!modal || !panel) return;

package/dist/{chunk-KLJCCMF3.js → chunk-R6735B37.js}

@@ -1,5 +1,5 @@
-import { Tag } from './chunk-S2XHHEW4.js';
-import './PricingCard-JFI7RYXP.css';
+import { Tag } from './chunk-74KMX7YH.js';
+import './PricingCard-7EFXRSD2.css';
 import { forwardRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-3ZP55QZE.js → chunk-R6FBDTP3.js}

@@ -1,14 +1,14 @@
 import { cx } from './chunk-ODEQTPFM.js';
 import './Callout-S7QDWHDL.css';
-import { ErrorGlyph, WarningGlyph, CheckCircleGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
+import { CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var GLYPHS = {
   neutral: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
   info: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
-  success: /* @__PURE__ */ jsx(CheckCircleGlyph, { size: "md" }),
-  warning: /* @__PURE__ */ jsx(WarningGlyph, { size: "md" }),
-  danger: /* @__PURE__ */ jsx(ErrorGlyph, { size: "md" })
+  success: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "md" }),
+  warning: /* @__PURE__ */ jsx(TriangleAlertGlyph, { size: "md" }),
+  danger: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "md" })
 };
 var Callout = ({
   variant = "info",

package/dist/{chunk-7FZ53WDJ.js → chunk-RIAZM6L3.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-5KPQ6D7N.js';
+import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';