@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-QEUY3A5P.js

@@ -0,0 +1,186 @@
+import { Count } from './chunk-BHHIIK3M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tabs-VLICJFVB.css';
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function tabStop(items, selected) {
+  if (selected >= 0 && !items[selected]?.disabled) return selected;
+  return items.findIndex((item) => !item.disabled);
+}
+function useRoving(count, select, { followFocus = false } = {}) {
+  const buttons = useRef([]);
+  const [landed, setLanded] = useState(null);
+  function step(from, by) {
+    for (let i = 0; i < count; i += 1) {
+      const at = ((from + by * i) % count + count) % count;
+      const el = buttons.current[at];
+      if (el && !el.disabled) return at;
+    }
+    return null;
+  }
+  function moveTo(key, at, vertical) {
+    if (count === 0) return null;
+    switch (key) {
+      case "ArrowRight":
+        return step(at + 1, 1);
+      case "ArrowLeft":
+        return step(at - 1, -1);
+      case "ArrowDown":
+        return vertical ? step(at + 1, 1) : null;
+      case "ArrowUp":
+        return vertical ? step(at - 1, -1) : null;
+      case "Home":
+        return step(0, 1);
+      case "End":
+        return step(count - 1, -1);
+      default:
+        return null;
+    }
+  }
+  const onFocusAt = (index) => {
+    if (followFocus) setLanded(index);
+  };
+  const onKeyDown = (event, vertical) => {
+    const at = buttons.current.findIndex((button) => button === document.activeElement);
+    if (at < 0) return;
+    const next = moveTo(event.key, at, vertical);
+    if (next === null) return;
+    event.preventDefault();
+    buttons.current[next]?.focus();
+    onFocusAt(next);
+    select?.(next);
+  };
+  return {
+    buttons,
+    onKeyDown,
+    onFocusAt,
+    /*
+     * Where the stop belongs, or null for "on the caller's selection, as
+     * ever". Bounded by the CURRENT count, because a row whose options
+     * changed under a remembered index would otherwise put its only stop past
+     * its own end, where Tab finds nothing at all.
+     */
+    focused: followFocus && landed !== null && landed < count ? landed : null
+  };
+}
+function tabId(panelId, value) {
+  return `${panelId}-tab-${value}`;
+}
+function reveal(nav) {
+  const active = nav.querySelector(".crewlet-tabs__tab.is-active");
+  if (!active) return;
+  const row = nav.getBoundingClientRect();
+  const tab = active.getBoundingClientRect();
+  if (tab.left < row.left) nav.scrollLeft -= row.left - tab.left;
+  else if (tab.right > row.right) nav.scrollLeft += tab.right - row.right;
+}
+function Tabs({
+  items,
+  variant = "pill",
+  size = "md",
+  ariaLabel,
+  className = "",
+  value,
+  onValueChange,
+  panelId,
+  renderItem
+}) {
+  const navRef = useRef(null);
+  const { buttons, onKeyDown } = useRoving(items.length, null);
+  useLayoutEffect(() => {
+    if (variant !== "underline") return;
+    const nav = navRef.current;
+    if (!nav) return;
+    const update = () => {
+      const active = nav.querySelector(".crewlet-tabs__tab.is-active");
+      if (!active) {
+        nav.style.setProperty("--crewlet-tabs-slider-width", "0px");
+        return;
+      }
+      const navRect = nav.getBoundingClientRect();
+      const activeRect = active.getBoundingClientRect();
+      const left = activeRect.left - navRect.left + nav.scrollLeft;
+      nav.style.setProperty("--crewlet-tabs-slider-left", `${left}px`);
+      nav.style.setProperty("--crewlet-tabs-slider-width", `${activeRect.width}px`);
+    };
+    update();
+    reveal(nav);
+    const mutation = new MutationObserver(update);
+    nav.querySelectorAll(".crewlet-tabs__tab").forEach((tab) => {
+      mutation.observe(tab, { attributes: true, attributeFilter: ["class"] });
+    });
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
+    resize?.observe(nav);
+    return () => {
+      mutation.disconnect();
+      resize?.disconnect();
+    };
+  }, [variant, value, items]);
+  const rootClass = cx("crewlet-tabs", `crewlet-tabs--${variant}`, `crewlet-tabs--${size}`, className);
+  const selected = tabStop(
+    items,
+    Math.max(
+      0,
+      items.findIndex((item) => item.value === value)
+    )
+  );
+  const rows = items.map((item, index) => {
+    const isActive = value !== void 0 && value === item.value;
+    const tabClassName = cx(
+      "crewlet-tabs__tab",
+      isActive && "is-active",
+      item.disabled && "is-disabled"
+    );
+    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: item.icon }) : null,
+      /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: item.label }),
+      item.count != null ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+    ] });
+    const onSelect = () => {
+      if (item.disabled) return;
+      onValueChange?.(item.value);
+    };
+    if (renderItem) {
+      return /* @__PURE__ */ jsx(React.Fragment, { children: renderItem({ item, className: tabClassName, isActive, onSelect, children }) }, item.value);
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (el) => {
+          buttons.current[index] = el;
+        },
+        type: "button",
+        role: "tab",
+        id: panelId ? tabId(panelId, item.value) : void 0,
+        "aria-selected": isActive,
+        "aria-controls": panelId,
+        tabIndex: index === selected ? 0 : -1,
+        disabled: item.disabled,
+        className: tabClassName,
+        onClick: onSelect,
+        onKeyDown: (event) => onKeyDown(event, false),
+        children
+      },
+      item.value
+    );
+  });
+  if (renderItem) {
+    return /* @__PURE__ */ jsx("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: rows });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
+}
+function TabPanel({ id, value, children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id,
+      "aria-labelledby": tabId(id, value),
+      className: cx("crewlet-tab-panel", className),
+      children
+    }
+  );
+}
+
+export { TabPanel, Tabs, tabId, tabStop, useRoving };

package/dist/chunk-QNCVHRZL.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatGroup-TGB6AEKM.css';
+import { jsx } from 'react/jsx-runtime';
+
+function StatGroup({ columns = 4, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-stat-group", className),
+      style: { "--crewlet-stat-group-cols": columns, ...rest.style },
+      children
+    }
+  );
+}
+
+export { StatGroup };

package/dist/chunk-QVE4GJAT.js

@@ -0,0 +1,15 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Container-3TSKMGNI.css';
+import { jsx } from 'react/jsx-runtime';
+
+var Container = ({
+  size = "lg",
+  className,
+  children,
+  ...rest
+}) => {
+  const classes = cx("crewlet-container", `crewlet-container--${size}`, className);
+  return /* @__PURE__ */ jsx("div", { ...rest, className: classes, children });
+};
+
+export { Container };

package/dist/chunk-QYOFACSP.js

@@ -0,0 +1,36 @@
+import { Avatar } from './chunk-PNFASD6F.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EntityChip-LUCPZBBG.css';
+import { Children, isValidElement, cloneElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function EntityChip({
+  name,
+  href,
+  asChild = false,
+  variant = "agent",
+  size = "sm",
+  className,
+  children,
+  ...rest
+}) {
+  const classes = cx("crewlet-entity-chip", href !== void 0 || asChild ? "crewlet-entity-chip--link" : null, className);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { name, size, variant: variant === "human" ? "dashed" : "solid", decorative: true }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-entity-chip__name", children: name })
+  ] });
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("EntityChip with asChild expects exactly one valid React element child.");
+    }
+    const element = child;
+    return cloneElement(element, { ...rest, className: cx(element.props["className"], classes) }, inner);
+  }
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx("a", { ...rest, className: classes, href, children: inner });
+  }
+  return /* @__PURE__ */ jsx("span", { ...rest, className: classes, children: inner });
+}
+
+export { EntityChip };

package/dist/chunk-RA2ULG6H.js

@@ -0,0 +1,29 @@
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './EmptyState-C6HRBGT7.css';
+import { InboxGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function EmptyState({
+  icon,
+  illustration,
+  title,
+  description,
+  action,
+  size = "default",
+  headingLevel,
+  className,
+  ...rest
+}) {
+  const contextLevel = useHeadingLevel();
+  const level = headingLevel ?? contextLevel;
+  const Heading = level === "none" ? "div" : headingTag(level);
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-empty-state", `crewlet-empty-state--${size}`, className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-empty-state__mark", "aria-hidden": true, children: illustration ?? icon ?? /* @__PURE__ */ jsx(InboxGlyph, { size: size === "compact" ? "xl" : 32 }) }),
+    /* @__PURE__ */ jsx(Heading, { className: "crewlet-empty-state__title", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "crewlet-empty-state__description", children: description }),
+    action ? /* @__PURE__ */ jsx("div", { className: "crewlet-empty-state__action", children: action }) : null
+  ] });
+}
+
+export { EmptyState };

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 };