@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-EN6K2IFA.js

@@ -0,0 +1,256 @@
+import { Kbd } from './chunk-SFZOKW2G.js';
+import { FormField, Textarea, Input } from './chunk-O6232G37.js';
+import { isComposing } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import './ListInput-O7LJKOIG.css';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, AddGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var minted = 0;
+var mint = () => `item-${minted += 1}`;
+var capitalized = (text) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
+function ListInput({
+  label,
+  itemName,
+  value,
+  onChange,
+  multiline = false,
+  helper,
+  error,
+  placeholder,
+  disabled = false,
+  optional,
+  enterHint = true,
+  addLabel = (name) => `Add ${name}`,
+  itemLabel = (name, position) => `${name} ${position}`,
+  newItemLabel = (name) => `New ${name}`,
+  moveUpLabel = (name, position) => `Move ${name} ${position} up`,
+  moveDownLabel = (name, position) => `Move ${name} ${position} down`,
+  removeLabel = (name, position) => `Remove ${name} ${position}`,
+  addedMessage = (name, position) => `Added ${name} ${position}`,
+  removedMessage = (name, position) => `Removed ${name} ${position}`,
+  movedMessage = (name, position, count) => `Moved ${name} to position ${position} of ${count}`
+}) {
+  const [draft, setDraft] = useState("");
+  const ids = useRef([]);
+  const emitted = useRef(null);
+  if (value !== emitted.current && value.length !== ids.current.length) {
+    ids.current = value.map(mint);
+  }
+  const inputs = useRef(/* @__PURE__ */ new Map());
+  const ups = useRef(/* @__PURE__ */ new Map());
+  const downs = useRef(/* @__PURE__ */ new Map());
+  const addBox = useRef(null);
+  const focusNext = useRef(null);
+  useLayoutEffect(() => {
+    const want = focusNext.current;
+    if (!want) return;
+    focusNext.current = null;
+    if (want.target === "add") {
+      addBox.current?.focus();
+      return;
+    }
+    const up = ups.current.get(want.id);
+    const down = downs.current.get(want.id);
+    const box = inputs.current.get(want.id);
+    const order = want.target === "up" ? [up, down, box] : want.target === "down" ? [down, up, box] : [box];
+    order.find((el) => el && !el.disabled)?.focus();
+  });
+  function emit(next, nextIds, said) {
+    ids.current = nextIds;
+    emitted.current = next;
+    onChange(next);
+    if (said) announce(said);
+  }
+  const name = capitalized(itemName);
+  const count = value.length;
+  function add() {
+    const text = draft.trim();
+    if (!text || disabled) return;
+    emit(
+      [...value, text],
+      [...ids.current, mint()],
+      addedMessage(itemName, `${count + 1} of ${count + 1}`)
+    );
+    setDraft("");
+    focusNext.current = { id: "", target: "add" };
+  }
+  function move(index, by, target) {
+    const to = index + by;
+    if (disabled || to < 0 || to >= count) return;
+    const next = [...value];
+    const nextIds = [...ids.current];
+    [next[index], next[to]] = [next[to], next[index]];
+    [nextIds[index], nextIds[to]] = [nextIds[to], nextIds[index]];
+    focusNext.current = { id: nextIds[to], target };
+    emit(next, nextIds, movedMessage(itemName, to + 1, count));
+  }
+  function remove(index) {
+    if (disabled) return;
+    const next = value.filter((_, at) => at !== index);
+    const nextIds = ids.current.filter((_, at) => at !== index);
+    const neighbour = nextIds[index] ?? nextIds[index - 1];
+    focusNext.current = neighbour ? { id: neighbour, target: "input" } : { id: "", target: "add" };
+    emit(next, nextIds, removedMessage(itemName, `${index + 1} of ${count}`));
+  }
+  const acts = (event) => event.key === "Enter" && !(multiline && event.shiftKey) && !isComposing(event);
+  function itemKeys(event, index) {
+    if (isComposing(event)) return;
+    if (event.altKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+      event.preventDefault();
+      move(index, event.key === "ArrowUp" ? -1 : 1, "input");
+      return;
+    }
+    if (!acts(event)) return;
+    event.preventDefault();
+    const next = ids.current[index + 1];
+    if (next) inputs.current.get(next)?.focus();
+    else addBox.current?.focus();
+  }
+  const control = (props) => (
+    /*
+     * ONE LINE THAT GROWS, never a fixed block of rows. A list of sentences
+     * read as a list wants each item on its own line; a two-row textarea per
+     * item made three of them 256px where the console draws 111, and the
+     * second row was empty in every one of them. `autoResize` starts at one
+     * line and takes as many as the sentence needs.
+     */
+    multiline ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        rows: 1,
+        autoResize: true,
+        "aria-label": props.label,
+        value: props.value,
+        placeholder: props.placeholder,
+        disabled,
+        spellCheck: true,
+        trailing: props.trailing,
+        onChange: (event) => props.onChange(event.target.value),
+        onKeyDown: props.onKeyDown,
+        ref: props.ref
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": props.label,
+        value: props.value,
+        placeholder: props.placeholder,
+        disabled,
+        autoComplete: "off",
+        spellCheck: true,
+        trailing: props.trailing,
+        onChange: (event) => props.onChange(event.target.value),
+        onKeyDown: props.onKeyDown,
+        ref: props.ref
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      as: "fieldset",
+      label,
+      optional,
+      helper,
+      error,
+      className: "crewlet-list-input",
+      labelAction: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "soft-brand",
+          label: addLabel(itemName),
+          icon: /* @__PURE__ */ jsx(AddGlyph, {}),
+          disabled: disabled || draft.trim() === "",
+          onClick: add
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-list-input__add", children: control({
+          label: newItemLabel(itemName),
+          value: draft,
+          placeholder,
+          trailing: enterHint ? /* @__PURE__ */ jsx(Kbd, { subtle: true, children: "Enter" }) : void 0,
+          onChange: setDraft,
+          onKeyDown: (event) => {
+            if (!acts(event)) return;
+            event.preventDefault();
+            add();
+          },
+          ref: (el) => {
+            addBox.current = el;
+          }
+        }) }),
+        count > 0 ? /* @__PURE__ */ jsx("ol", { className: "crewlet-list-input__items", children: value.map((item, index) => {
+          const key = ids.current[index];
+          const position = `${index + 1} of ${count}`;
+          return /* @__PURE__ */ jsxs("li", { className: "crewlet-list-input__item", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-list-input__index", "aria-hidden": "true", children: index + 1 }),
+            control({
+              label: itemLabel(name, position),
+              value: item,
+              onChange: (next) => {
+                const list = [...value];
+                list[index] = next;
+                emit(list, ids.current);
+              },
+              onKeyDown: (event) => itemKeys(event, index),
+              ref: (el) => {
+                if (el) inputs.current.set(key, el);
+                else inputs.current.delete(key);
+              }
+            }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__actions", children: [
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-list-input__move", children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    label: moveUpLabel(itemName, position),
+                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, {}),
+                    disabled: disabled || index === 0,
+                    onClick: () => move(index, -1, "up"),
+                    ref: (el) => {
+                      if (el) ups.current.set(key, el);
+                      else ups.current.delete(key);
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    label: moveDownLabel(itemName, position),
+                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, {}),
+                    disabled: disabled || index === count - 1,
+                    onClick: () => move(index, 1, "down"),
+                    ref: (el) => {
+                      if (el) downs.current.set(key, el);
+                      else downs.current.delete(key);
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost-danger",
+                  label: removeLabel(itemName, position),
+                  icon: /* @__PURE__ */ jsx(CloseGlyph, {}),
+                  disabled,
+                  onClick: () => remove(index)
+                }
+              )
+            ] })
+          ] }, key);
+        }) }) : null
+      ]
+    }
+  );
+}
+
+export { ListInput };

package/dist/chunk-EPOOQZYA.js

@@ -0,0 +1,118 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FilterChip-GTGLLOXE.css';
+import { createContext, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GroupContext = createContext(null);
+var FILTER_CHIP_ATTRIBUTE = "data-crewlet-filter-chip";
+function FilterChip({
+  pressed,
+  onPressedChange,
+  count,
+  value,
+  className,
+  onClick,
+  children,
+  ...rest
+}) {
+  const group = useContext(GroupContext);
+  const radio = group?.semantics === "radio";
+  const on = radio ? value !== void 0 && group.value === value : pressed === true;
+  const activate = () => {
+    if (radio) {
+      const next = on && group.allowNone ? null : value ?? null;
+      group.choose(next);
+      onPressedChange?.(next !== null);
+      return;
+    }
+    onPressedChange?.(!on);
+  };
+  const state = radio ? { role: "radio", "aria-checked": on } : { "aria-pressed": on };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      ...state,
+      type: "button",
+      ...{ [FILTER_CHIP_ATTRIBUTE]: "" },
+      ...radio ? {} : { tabIndex: rest.tabIndex },
+      className: cx("crewlet-filter-chip", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) activate();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-filter-chip__label", children }),
+        count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-filter-chip__count", children: count })
+      ]
+    }
+  );
+}
+var reachable = (chip) => !chip.disabled && chip.getAttribute("aria-disabled") !== "true";
+function moveTo(key, from, total) {
+  if (key === "ArrowRight" || key === "ArrowDown") return (from + 1) % total;
+  if (key === "ArrowLeft" || key === "ArrowUp") return (from - 1 + total) % total;
+  if (key === "Home") return 0;
+  if (key === "End") return total - 1;
+  return null;
+}
+function FilterChipGroup({
+  label,
+  semantics = "toggle",
+  value,
+  onValueChange,
+  allowNone = false,
+  hideLabel = false,
+  className,
+  children
+}) {
+  const row = useRef(null);
+  const labelId = useId();
+  const chips = useCallback(
+    () => row.current === null ? [] : [...row.current.querySelectorAll(`[${FILTER_CHIP_ATTRIBUTE}]`)],
+    []
+  );
+  useLayoutEffect(() => {
+    if (semantics !== "radio") return;
+    const all = chips();
+    const chosen = all.findIndex((chip) => chip.getAttribute("aria-checked") === "true" && reachable(chip));
+    const stop = chosen < 0 ? all.findIndex(reachable) : chosen;
+    all.forEach((chip, index) => {
+      chip.tabIndex = index === stop ? 0 : -1;
+    });
+  });
+  const choose = useCallback(
+    (next) => {
+      onValueChange?.(next);
+    },
+    [onValueChange]
+  );
+  const onKeyDown = (event) => {
+    if (semantics !== "radio") return;
+    const open = chips().filter(reachable);
+    const from = open.indexOf(document.activeElement);
+    if (from < 0 || open.length === 0) return;
+    const to = moveTo(event.key, from, open.length);
+    if (to === null) return;
+    event.preventDefault();
+    open[to]?.focus();
+    open[to]?.click();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: row,
+      role: semantics === "radio" ? "radiogroup" : "group",
+      "aria-labelledby": labelId,
+      className: cx("crewlet-filter-chip-group", className),
+      onKeyDown,
+      children: [
+        hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-filter-chip-group__label", children: label }),
+        /* @__PURE__ */ jsx(GroupContext.Provider, { value: { semantics, value, choose, allowNone }, children })
+      ]
+    }
+  );
+}
+
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup };

package/dist/chunk-ESCO4XYW.js

@@ -0,0 +1,144 @@
+import { Modal } from './chunk-2EOKFKHX.js';
+import { useListbox } from './chunk-GTOUGQQK.js';
+import { Input } from './chunk-O6232G37.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CommandPalette-CSJDUCQA.css';
+import { useId, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CommandPalette({ open, ...rest }) {
+  return open ? /* @__PURE__ */ jsx(Palette, { ...rest }) : null;
+}
+function Palette({
+  onClose,
+  label = "Search",
+  query,
+  onQueryChange,
+  groups,
+  placeholder = "Search",
+  footer,
+  emptyMessage = "Nothing matches that search.",
+  resultsLabel = "Results",
+  className,
+  ...rest
+}) {
+  const id = useId();
+  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  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 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",
+            value: query,
+            onChange: (event) => {
+              onQueryChange(event.target.value);
+              listbox.setActive(0);
+            },
+            onKeyDown: listbox.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,
+            autoComplete: "off",
+            spellCheck: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "crewlet-palette__results",
+            ref: listbox.listRef,
+            id: listbox.listId,
+            role: "listbox",
+            "aria-label": resultsLabel,
+            children: groups.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",
+                        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__ */ jsx("span", { className: "crewlet-palette__label", children: item.label }),
+                          item.hint !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: item.hint }) : null
+                        ]
+                      },
+                      item.id
+                    )
+                  );
+                })
+              ] }, group.id)
+            ))
+          }
+        ),
+        flat.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-palette__empty", children: emptyMessage }) : null
+      ]
+    }
+  );
+}
+
+export { CommandPalette };

package/dist/chunk-EUCC37WY.js

@@ -0,0 +1,14 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EmptyValue-4B6ODXHT.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_VALUE = "\u2013";
+function EmptyValue({ label = "Not reported", className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-empty-value", className), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: EMPTY_VALUE }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+  ] });
+}
+
+export { EMPTY_VALUE, EmptyValue };

package/dist/chunk-EV6IMYJ6.js

@@ -0,0 +1,62 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Switch-U4OWK4CL.css';
+import { forwardRef, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Switch = forwardRef(function Switch2({
+  label,
+  description,
+  framed = false,
+  onCheckedChange,
+  onChange,
+  className = "",
+  disabled,
+  id,
+  "aria-describedby": describedBy,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const labelId = `${inputId}-label`;
+  const descriptionId = description ? `${inputId}-description` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cx(
+        "crewlet-switch",
+        framed && "crewlet-switch--framed",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-switch__track", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "checkbox",
+              role: "switch",
+              className: "crewlet-switch__control",
+              disabled,
+              "aria-labelledby": labelId,
+              "aria-describedby": cx(descriptionId, describedBy) || void 0,
+              onChange: (event) => {
+                onChange?.(event);
+                onCheckedChange?.(event.target.checked);
+              },
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switch__thumb", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-switch__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-switch__label", id: labelId, children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: "crewlet-switch__description", id: descriptionId, children: description }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+export { Switch };

package/dist/chunk-F27EPQ7D.js

@@ -0,0 +1,68 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './IconButton-VQGNMJDI.css';
+import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var IconButton = forwardRef(function IconButton2({
+  label,
+  icon,
+  size = "md",
+  variant = "ghost",
+  pressed,
+  disabledReason,
+  className,
+  type = "button",
+  asChild = false,
+  disabled,
+  onClick,
+  title,
+  children,
+  ...rest
+}, ref) {
+  const reasonId = useId();
+  const classes = cx("crewlet-icon-btn", `crewlet-icon-btn--${size}`, `crewlet-icon-btn--${variant}`, className);
+  const content = icon ?? children;
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("IconButton with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(childEl, {
+      ...rest,
+      "aria-label": label,
+      title: title ?? label,
+      className: cx(childEl.props.className, classes)
+    });
+  }
+  const inert = disabledReason !== void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...rest,
+        ref,
+        type,
+        className: classes,
+        disabled,
+        title: title ?? label,
+        "aria-label": label,
+        "aria-pressed": pressed,
+        "aria-disabled": inert || void 0,
+        "aria-describedby": inert ? cx(rest["aria-describedby"], reasonId) : rest["aria-describedby"],
+        onClick: (event) => {
+          if (inert) {
+            event.preventDefault();
+            return;
+          }
+          onClick?.(event);
+        },
+        children: content
+      }
+    ),
+    inert ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }) : null
+  ] });
+});
+
+export { IconButton };