@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-RDGD7Z7I.js

@@ -0,0 +1,350 @@
+import { Tag } from './chunk-S2XHHEW4.js';
+import { useListbox } from './chunk-GTOUGQQK.js';
+import { isComposing } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { announce } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TagsInput-W4P36PRJ.css';
+import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';
+import { CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var textOf = (option) => option.label ?? option.value;
+var TagsInput = forwardRef(function TagsInput2({
+  value,
+  onChange,
+  options,
+  allowCustom = true,
+  ordered = false,
+  placeholder = "Add a tag, press Enter or comma",
+  tagVariant = "neutral",
+  monospace = false,
+  submitKeys = ["Enter", ","],
+  disabled = false,
+  className = "",
+  id,
+  dedupe = true,
+  label = "Values",
+  focusOnMount = false,
+  emptyMessage = (query) => `Nothing matches "${query}"`,
+  removeLabel = (name) => `Remove ${name}`,
+  moveEarlierLabel = (name) => `Move ${name} earlier`,
+  moveLaterLabel = (name) => `Move ${name} later`,
+  addedMessage = (name) => `Added ${name}`,
+  pastedMessage = (count) => `Added ${count} values`,
+  removedMessage = (name) => `Removed ${name}`,
+  movedMessage = (name, position, count) => `Moved ${name} to position ${position} of ${count}`,
+  chosenLabel = (name) => `Chosen: ${name}`,
+  "aria-label": ariaLabel,
+  "aria-labelledby": labelledBy,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid
+}, ref) {
+  const [draft, setDraft] = useState("");
+  const [open, setOpen] = useState(false);
+  const field = useRef(null);
+  const chips = useRef(null);
+  const list = useRef(null);
+  const generatedId = useId();
+  const fieldId = id ?? generatedId;
+  useImperativeHandle(ref, () => ({ focus: () => field.current?.focus() }));
+  useEffect(() => {
+    if (focusOnMount) field.current?.focus();
+  }, [focusOnMount]);
+  const picking = options !== void 0;
+  const byValue = useMemo(
+    () => new Map((options ?? []).map((option) => [option.value, option])),
+    [options]
+  );
+  const nameOf = (held) => {
+    const option = byValue.get(held);
+    return option ? textOf(option) : held;
+  };
+  const needle = draft.trim().toLowerCase();
+  const offered = useMemo(() => {
+    if (!picking) return [];
+    const all = options ?? [];
+    if (needle === "") return [...all];
+    return all.filter(
+      (option) => textOf(option).toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle) || (option.description ?? "").toLowerCase().includes(needle)
+    );
+  }, [options, picking, needle]);
+  const groups = useMemo(() => {
+    const out = [];
+    for (const option of offered) {
+      const group = out.find((candidate) => candidate.name === option.group);
+      if (group) group.items.push(option);
+      else out.push({ name: option.group, items: [option] });
+    }
+    return out;
+  }, [offered]);
+  const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const showing = picking && open && !disabled;
+  const lists = showing && flat.length > 0;
+  const nothingMatches = showing && flat.length === 0 && needle !== "";
+  const wanted = useRef(null);
+  useLayoutEffect(() => {
+    const want = wanted.current;
+    if (!want) return;
+    wanted.current = null;
+    const list2 = chips.current;
+    const control = (index2, prefer) => {
+      const chip = list2?.querySelector(`[data-chip="${index2}"]`);
+      if (!chip) return null;
+      const order = prefer === "remove" ? ["button:not([data-move])"] : prefer === "earlier" ? ['[data-move="earlier"]', '[data-move="later"]', "button:not([data-move])"] : ['[data-move="later"]', '[data-move="earlier"]', "button:not([data-move])"];
+      for (const selector of order) {
+        const el = chip.querySelector(selector);
+        if (el && !el.disabled) return el;
+      }
+      return null;
+    };
+    (control(want.index, want.prefer) ?? control(want.index - 1, want.prefer) ?? field.current)?.focus();
+  });
+  function add(raw) {
+    const next = raw.trim();
+    if (!next || disabled) return;
+    if (dedupe && value.some((held) => held.toLowerCase() === next.toLowerCase())) {
+      setDraft("");
+      return;
+    }
+    onChange([...value, next]);
+    announce(addedMessage(nameOf(next)));
+    setDraft("");
+  }
+  function toggle(option) {
+    if (disabled) return;
+    if (value.includes(option.value)) {
+      onChange(value.filter((held) => held !== option.value));
+      announce(removedMessage(textOf(option)));
+      return;
+    }
+    onChange([...value, option.value]);
+    announce(addedMessage(textOf(option)));
+  }
+  function removeAt(index2) {
+    if (disabled) return;
+    const held = value[index2];
+    if (held === void 0) return;
+    onChange(value.filter((_, at) => at !== index2));
+    announce(removedMessage(nameOf(held)));
+    wanted.current = { index: index2, prefer: "remove" };
+  }
+  function move(index2, by) {
+    const to = index2 + by;
+    if (disabled || to < 0 || to >= value.length) return;
+    const next = [...value];
+    [next[index2], next[to]] = [next[to], next[index2]];
+    onChange(next);
+    announce(movedMessage(nameOf(value[index2]), to + 1, value.length));
+    wanted.current = { index: to, prefer: by === -1 ? "earlier" : "later" };
+  }
+  function chipKeys(event, index2) {
+    if (!event.altKey || isComposing(event)) return;
+    const back = event.key === "ArrowUp" || event.key === "ArrowLeft";
+    if (!back && event.key !== "ArrowDown" && event.key !== "ArrowRight") return;
+    event.preventDefault();
+    move(index2, back ? -1 : 1);
+  }
+  const listbox = useListbox({
+    id: fieldId,
+    open: lists || nothingMatches,
+    count: flat.length,
+    onCommit: (index2) => {
+      const option = flat[index2];
+      if (option) toggle(option);
+    },
+    onClose: () => setOpen(false)
+  });
+  useEffect(() => {
+    const box = list.current;
+    const row = box?.querySelector('[data-active="true"]');
+    if (!box || !row) return;
+    const bounds = box.getBoundingClientRect();
+    const spot = row.getBoundingClientRect();
+    if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
+    else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
+  }, [listbox.active, flat.length, lists]);
+  function onKeyDown(event) {
+    if (isComposing(event)) return;
+    if (picking && !showing && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      setOpen(true);
+      return;
+    }
+    if (listbox.onKeyDown(event)) return;
+    if (submitKeys.includes(event.key)) {
+      event.preventDefault();
+      if (picking && !allowCustom) {
+        setOpen(true);
+        return;
+      }
+      add(draft);
+      return;
+    }
+    if (event.key === "Backspace" && draft === "" && value.length > 0) {
+      event.preventDefault();
+      const last = value.length - 1;
+      onChange(value.slice(0, last));
+      announce(removedMessage(nameOf(value[last])));
+    }
+  }
+  function onPaste(event) {
+    if (picking) return;
+    const text = event.clipboardData.getData("text");
+    if (!text.includes(",") && !text.includes("\n")) return;
+    event.preventDefault();
+    const parts = text.split(/[,\n]+/).map((part) => part.trim()).filter(Boolean);
+    if (parts.length === 0) return;
+    const seen2 = dedupe ? new Set(value.map((held) => held.toLowerCase())) : null;
+    const added = [];
+    for (const part of parts) {
+      if (seen2?.has(part.toLowerCase())) continue;
+      added.push(part);
+      seen2?.add(part.toLowerCase());
+    }
+    if (added.length === 0) return;
+    onChange([...value, ...added]);
+    announce(added.length === 1 ? addedMessage(added[0]) : pastedMessage(added.length));
+  }
+  function onInputChange(event) {
+    setDraft(event.target.value);
+    if (picking) setOpen(true);
+  }
+  const seen = /* @__PURE__ */ new Map();
+  const keyed = value.map((held) => {
+    const nth = seen.get(held) ?? 0;
+    seen.set(held, nth + 1);
+    return { held, key: nth === 0 ? held : `${held}#${nth}` };
+  });
+  let index = -1;
+  const rows = groups.map((group, position) => {
+    const items = group.items.map((option) => {
+      index += 1;
+      const at = index;
+      const chosen = value.includes(option.value);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: listbox.optionId(at),
+          role: "option",
+          "aria-selected": chosen,
+          "data-active": at === listbox.active || void 0,
+          className: cx("crewlet-listbox__option", at === listbox.active && "is-highlight"),
+          ...listbox.optionHandlers(at),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-tags-input__option-tick", "aria-hidden": "true", children: chosen ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-tags-input__option-label", children: textOf(option) }),
+            option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.description }) : null
+          ]
+        },
+        option.value
+      );
+    });
+    if (group.name === void 0) return items;
+    const headingId = `${fieldId}-group-${position}`;
+    return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": headingId, children: [
+      /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__heading", id: headingId, role: "presentation", children: group.name }),
+      items
+    ] }, group.name);
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-tags-input", disabled && "is-disabled", className), children: [
+    value.length > 0 ? /* @__PURE__ */ jsx("ul", { ref: chips, className: "crewlet-tags-input__chips", "aria-label": chosenLabel(label), children: keyed.map(({ held, key }, at) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "data-chip": at,
+        className: "crewlet-tags-input__chip",
+        children: [
+          ordered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                "data-move": "earlier",
+                label: moveEarlierLabel(nameOf(held)),
+                icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+                disabled: disabled || at === 0,
+                onClick: () => move(at, -1),
+                onKeyDown: (event) => chipKeys(event, at)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                "data-move": "later",
+                label: moveLaterLabel(nameOf(held)),
+                icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+                disabled: disabled || at === value.length - 1,
+                onClick: () => move(at, 1),
+                onKeyDown: (event) => chipKeys(event, at)
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            Tag,
+            {
+              variant: tagVariant,
+              monospace,
+              onRemove: disabled ? void 0 : () => removeAt(at),
+              removeAriaLabel: removeLabel(nameOf(held)),
+              onKeyDown: ordered ? (event) => chipKeys(event, at) : void 0,
+              children: nameOf(held)
+            }
+          )
+        ]
+      },
+      key
+    )) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-tags-input__field", ref: listbox.anchorRef, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: field,
+          id: fieldId,
+          className: "crewlet-tags-input__box",
+          type: "text",
+          role: picking ? "combobox" : void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": labelledBy,
+          "aria-autocomplete": picking ? "list" : void 0,
+          "aria-expanded": picking ? lists : void 0,
+          "aria-controls": lists ? listbox.listId : void 0,
+          "aria-activedescendant": lists ? listbox.optionId(listbox.active) : void 0,
+          "aria-describedby": describedBy,
+          "aria-invalid": invalid || void 0,
+          value: draft,
+          placeholder,
+          disabled,
+          autoComplete: "off",
+          spellCheck: false,
+          onChange: onInputChange,
+          onClick: () => picking && setOpen(true),
+          onKeyDown,
+          onPaste,
+          onBlur: () => {
+            if (picking) setOpen(false);
+            else add(draft);
+          }
+        }
+      ),
+      lists ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            list.current = el;
+            listbox.listRef(el);
+          },
+          id: listbox.listId,
+          className: "crewlet-tags-input__list crewlet-listbox",
+          role: "listbox",
+          "aria-multiselectable": "true",
+          "aria-label": label,
+          children: rows
+        }
+      ) : null,
+      nothingMatches ? /* @__PURE__ */ jsx("div", { ref: listbox.listRef, className: "crewlet-tags-input__list", children: /* @__PURE__ */ jsx("div", { className: "crewlet-listbox__empty", children: emptyMessage(draft.trim()) }) }) : null
+    ] })
+  ] });
+});
+
+export { TagsInput };

package/dist/chunk-RK4XPHVG.js

@@ -0,0 +1,16 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Eyebrow-5NREGHQH.css';
+import { jsx } from 'react/jsx-runtime';
+
+var Eyebrow = ({
+  as: As = "span",
+  variant = "muted",
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cx("crewlet-eyebrow", `crewlet-eyebrow--${variant}`, className);
+  return /* @__PURE__ */ jsx(As, { ...rest, className: classes, children });
+};
+
+export { Eyebrow };

package/dist/chunk-RSAQOKH3.js

@@ -0,0 +1,38 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { useCallback, useSyncExternalStore } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var said = { text: "", n: 0 };
+var listeners = /* @__PURE__ */ new Set();
+var mounted = 0;
+function subscribe(listener) {
+  mounted += 1;
+  listeners.add(listener);
+  return () => {
+    mounted -= 1;
+    listeners.delete(listener);
+    if (mounted === 0) said = { text: "", n: said.n + 1 };
+  };
+}
+function announce(text) {
+  if (text === "") return;
+  if (mounted === 0) {
+    console.warn("[crewlet] announce() was called with no <Announcer> mounted, so nothing was said:", text);
+    return;
+  }
+  said = { text, n: said.n + 1 };
+  for (const listener of [...listeners]) listener();
+}
+function useAnnouncer() {
+  return useCallback(announce, []);
+}
+function Announcer({ label = "Notifications" }) {
+  const current = useSyncExternalStore(
+    subscribe,
+    () => said,
+    () => said
+  );
+  return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", "aria-label": label, children: /* @__PURE__ */ jsx("span", { children: current.text }, current.n) }) });
+}
+
+export { Announcer, announce, useAnnouncer };

package/dist/chunk-S2XHHEW4.js

@@ -0,0 +1,84 @@
+import { StatusDot } from './chunk-PZSWF74H.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tag-VNZEYLB6.css';
+import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Tag(props) {
+  const {
+    variant = "neutral",
+    appearance = "soft",
+    size = "sm",
+    leadingIcon,
+    dot = false,
+    count,
+    monospace = false,
+    animateIn = false,
+    onClick,
+    pressed,
+    onRemove,
+    removeAriaLabel = "Remove tag",
+    className,
+    children,
+    ...rest
+  } = props;
+  const presses = onClick !== void 0;
+  const acts = presses || onRemove !== void 0;
+  const split = presses && onRemove !== void 0;
+  if (acts && size === "xs") {
+    console.warn('[crewlet] Tag size="xs" cannot act: an interactive tag starts at "sm", so its target clears 24px. Drawn at "sm".');
+  }
+  const drawnSize = acts && size === "xs" ? "sm" : size;
+  const classes = cx(
+    "crewlet-tag",
+    `crewlet-tag--${variant}`,
+    `crewlet-tag--${appearance}`,
+    `crewlet-tag--${drawnSize}`,
+    monospace && "crewlet-tag--monospace",
+    animateIn && "crewlet-tag--animate-in",
+    // The 24px target floor, on every form that takes a press: the pill that
+    // is itself a button, the pill holding a press and a remove, and the inert
+    // pill whose only control is the remove at its trailing edge.
+    acts && "crewlet-tag--acts",
+    presses && !split && "crewlet-tag--actionable",
+    split && "crewlet-tag--split",
+    // The press is its own element when the pill holds two controls, so the
+    // boundary the press state draws is put on the pill from here.
+    split && pressed === true && "is-pressed",
+    className
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: variant, className: "crewlet-tag__dot" }) : null,
+    leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tag__icon", "aria-hidden": true, children: leadingIcon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-tag__label", children }),
+    count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-tag__count", children: count })
+  ] });
+  const remove = onRemove === void 0 ? null : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "crewlet-tag__remove",
+      onClick: (event) => {
+        event.stopPropagation();
+        onRemove();
+      },
+      "aria-label": removeAriaLabel,
+      children: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" })
+    }
+  );
+  if (split) {
+    return /* @__PURE__ */ jsxs("span", { ...rest, className: classes, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-tag__press", onClick, "aria-pressed": pressed === true, children: inner }),
+      remove
+    ] });
+  }
+  if (presses) {
+    return /* @__PURE__ */ jsx("button", { ...rest, type: "button", className: classes, onClick, "aria-pressed": pressed === true, children: inner });
+  }
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: classes, children: [
+    inner,
+    remove
+  ] });
+}
+
+export { Tag };

package/dist/chunk-S4GZWSKR.js

@@ -0,0 +1,137 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AddPill-DFWXYLIQ.css';
+import { useState, useId, useRef, useCallback, useEffect, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ADD_PILL_MS = 200;
+function AddPill({
+  label,
+  sections,
+  size = "sm",
+  layout = "split",
+  tabIndex,
+  onOpen,
+  className
+}) {
+  const [phase, setPhase] = useState("closed");
+  const ids = useId();
+  const closing = useRef(null);
+  const group = useRef(null);
+  const mark = useRef(null);
+  const first = useRef(null);
+  const open = phase === "preview" || phase === "locked";
+  const close = useCallback((restore) => {
+    if (closing.current !== null) clearTimeout(closing.current);
+    setPhase((was) => was === "closed" ? was : "closing");
+    closing.current = setTimeout(() => {
+      setPhase((was) => was === "closing" ? "closed" : was);
+      closing.current = null;
+    }, ADD_PILL_MS);
+    if (restore) mark.current?.focus();
+  }, []);
+  useEffect(
+    () => () => {
+      if (closing.current !== null) clearTimeout(closing.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!open) return void 0;
+    const elsewhere = (event) => {
+      if (!group.current?.contains(event.target)) close(false);
+    };
+    document.addEventListener("mousedown", elsewhere);
+    return () => document.removeEventListener("mousedown", elsewhere);
+  }, [open, close]);
+  const press = (event) => {
+    event.stopPropagation();
+    if (phase === "locked") {
+      close(false);
+      return;
+    }
+    onOpen?.();
+    setPhase("locked");
+    requestAnimationFrame(() => first.current?.focus());
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || phase === "closed") return;
+    event.stopPropagation();
+    close(true);
+  };
+  const onBlur = (event) => {
+    if (!open) return;
+    const to = event.relatedTarget;
+    if (to !== null && group.current?.contains(to)) return;
+    if (to !== null) close(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-add-pill", className),
+      "data-phase": phase,
+      "data-size": size,
+      "data-layout": layout,
+      ref: group,
+      onBlur,
+      onMouseLeave: () => {
+        if (phase === "preview") close(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-add-pill__mark",
+            "aria-label": label,
+            title: label,
+            "aria-expanded": open,
+            tabIndex,
+            ref: mark,
+            onKeyDown,
+            onMouseEnter: () => setPhase((was) => was === "locked" ? was : "preview"),
+            onClick: press,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-add-pill__disc", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9" }) })
+            ]
+          }
+        ),
+        phase !== "closed" && /* @__PURE__ */ jsxs("div", { className: "crewlet-add-pill__sections", "aria-hidden": phase === "closing" || void 0, children: [
+          sections.map((section, at) => {
+            const refused = section.disabled === true || section.disabledReason !== void 0;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              at > 0 && /* @__PURE__ */ jsx("span", { className: "crewlet-add-pill__divider", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "crewlet-add-pill__section",
+                  "aria-label": section.label,
+                  title: section.label,
+                  "aria-disabled": refused || void 0,
+                  "aria-describedby": section.disabledReason === void 0 ? void 0 : `${ids}-${section.key}`,
+                  tabIndex,
+                  ref: at === 0 ? first : void 0,
+                  onKeyDown,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    if (refused) return;
+                    close(false);
+                    section.onSelect();
+                  },
+                  children: section.icon
+                }
+              )
+            ] }, section.key);
+          }),
+          sections.map(
+            (section) => section.disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: `${ids}-${section.key}`, children: section.disabledReason }, `why-${section.key}`)
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ADD_PILL_MS, AddPill };

package/dist/chunk-SFZOKW2G.js

@@ -0,0 +1,52 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Kbd-W66MXQI5.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const hinted = navigator.userAgentData?.platform;
+  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || navigator.userAgent);
+}
+var NAMED = {
+  Mod: { apple: ["\u2318", "Command"], other: ["Ctrl", "Control"] },
+  Ctrl: { apple: ["\u2303", "Control"], other: ["Ctrl", "Control"] },
+  Alt: { apple: ["\u2325", "Option"], other: ["Alt", "Alt"] },
+  Shift: { apple: ["\u21E7", "Shift"], other: ["Shift", "Shift"] },
+  Enter: { apple: ["\u21B5", "Return"], other: ["Enter", "Enter"] },
+  Escape: { apple: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Backspace: { apple: ["\u232B", "Delete"], other: ["Backspace", "Backspace"] },
+  Delete: { apple: ["\u2326", "Forward delete"], other: ["Del", "Delete"] },
+  Tab: { apple: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
+  Space: { apple: ["Space", "Space"], other: ["Space", "Space"] },
+  ArrowUp: { apple: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
+  ArrowDown: { apple: ["\u2193", "Down arrow"], other: ["\u2193", "Down arrow"] },
+  ArrowLeft: { apple: ["\u2190", "Left arrow"], other: ["\u2190", "Left arrow"] },
+  ArrowRight: { apple: ["\u2192", "Right arrow"], other: ["\u2192", "Right arrow"] },
+  ContextMenu: { apple: ["Menu", "Menu key"], other: ["Menu", "Menu key"] },
+  "+": { apple: ["+", "Plus"], other: ["+", "Plus"] },
+  "-": { apple: ["-", "Minus"], other: ["-", "Minus"] },
+  "=": { apple: ["=", "Equals"], other: ["=", "Equals"] }
+};
+function keyGlyph(key, apple) {
+  const named = NAMED[key];
+  if (named) {
+    const [glyph, spoken] = apple ? named.apple : named.other;
+    return { glyph, spoken };
+  }
+  const shown = [...key].length === 1 ? key.toLocaleUpperCase() : key;
+  return { glyph: shown, spoken: shown };
+}
+var Kbd = ({ subtle = false, keys, apple, className, children, ...rest }) => {
+  if (keys === void 0) {
+    return /* @__PURE__ */ jsx("kbd", { ...rest, className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle", className), children });
+  }
+  const onApple = apple ?? isApplePlatform();
+  const mapped = keys.map((key) => keyGlyph(key, onApple));
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: cx("crewlet-kbd-combo", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-kbd-keys", "aria-hidden": true, children: mapped.map((key, index) => /* @__PURE__ */ jsx("kbd", { className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle"), children: key.glyph }, index)) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: mapped.map((key) => key.spoken).join(" plus ") })
+  ] });
+};
+
+export { Kbd, isApplePlatform, keyGlyph };