@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-F4PJZ4ED.js

@@ -0,0 +1,245 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Charts-D7G2BSXH.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+// src/Charts/dataColor.ts
+var DATA_COLORS = [
+  "var(--color-data-1)",
+  "var(--color-data-2)",
+  "var(--color-data-3)",
+  "var(--color-data-4)",
+  "var(--color-data-5)"
+];
+var DATA_COLOR_OTHER = "var(--color-data-other)";
+function dataColor(index) {
+  return DATA_COLORS[index] ?? DATA_COLOR_OTHER;
+}
+function Legend({ items, className }) {
+  return (
+    /*
+     * `role="list"` although a `ul` already has one, which is why the lint
+     * rule that calls it redundant is silenced here rather than obeyed: the
+     * stylesheet takes the markers off, and WebKit answers a marker-less list
+     * as a group of paragraphs, so a reader is no longer told how many series
+     * there are before they are read. The role puts that back.
+     */
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsx("ul", { role: "list", className: cx("crewlet-legend", className), children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "crewlet-legend__item", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-legend__swatch",
+          "aria-hidden": true,
+          style: { "--crewlet-legend-swatch-color": item.color ?? dataColor(index) }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-legend__label", children: item.label }),
+      item.value != null && /* @__PURE__ */ jsx("span", { className: "crewlet-legend__value", children: item.value })
+    ] }, item.id)) })
+  );
+}
+function BarList({
+  data,
+  max,
+  limit,
+  moreLabel = (remaining) => `and ${remaining} more`,
+  emptyLabel = "Nothing recorded in this window",
+  className
+}) {
+  const capped = limit != null;
+  const shown = capped ? data.slice(0, limit) : data;
+  const top = max ?? Math.max(1, ...data.map((datum) => datum.value));
+  const remaining = capped ? Math.max(0, data.length - limit) : 0;
+  if (!shown.length) return /* @__PURE__ */ jsx("p", { className: "crewlet-bar-list__empty", children: emptyLabel });
+  return (
+    // A list, and said to be one: the markers are off, and WebKit drops the
+    // list role with them. See Legend for the same note, including why the
+    // redundant-role rule is silenced rather than obeyed.
+    // eslint-disable-next-line jsx-a11y/no-redundant-roles
+    /* @__PURE__ */ jsxs("ul", { role: "list", className: cx("crewlet-bar-list", className), children: [
+      shown.map((datum, index) => {
+        const width = top > 0 && datum.value > 0 ? Math.max(1, datum.value / top * 100) : 0;
+        const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-bar-list__head", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__label", children: datum.label }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__value", children: datum.display ?? datum.value.toLocaleString() })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__track", "aria-hidden": true, children: width > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "crewlet-bar-list__bar",
+              style: {
+                width: `${width}%`,
+                "--crewlet-bar-list-bar-color": datum.color ?? dataColor(index)
+              }
+            }
+          ) }),
+          datum.sub && /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__sub", children: datum.sub })
+        ] });
+        return /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__item", children: datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
+            onClick: datum.onSelect,
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }) }, datum.id);
+      }),
+      remaining > 0 && /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__more", children: moreLabel(remaining) })
+    ] })
+  );
+}
+function StackedBar({ segments, summary, className }) {
+  const total = segments.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+  const drawn = segments.filter((segment) => segment.value > 0);
+  const parts = drawn.map((segment) => ({
+    label: segment.label,
+    value: segment.value,
+    percent: total > 0 ? Math.round(segment.value / total * 100) : 0
+  }));
+  const sentence = summary ? summary(parts) : parts.map((part) => `${part.label}: ${part.value.toLocaleString()} (${part.percent}%)`).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-stacked-bar", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "crewlet-stacked-bar__track", "aria-hidden": true, children: drawn.map((segment) => {
+      const index = segments.indexOf(segment);
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "crewlet-stacked-bar__segment",
+          style: {
+            width: `${segment.value / total * 100}%`,
+            "--crewlet-stacked-bar-segment-color": segment.color ?? dataColor(index)
+          }
+        },
+        segment.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: sentence })
+  ] });
+}
+function ActivityStrip({ buckets, label, summary, className }) {
+  const peak = Math.max(1, ...buckets.map((bucket) => bucket.v));
+  const total = buckets.reduce((sum, bucket) => sum + bucket.v, 0);
+  const sentence = summary ? summary({ peak, total, buckets: buckets.length }) : `${label}. ${total.toLocaleString()} in ${buckets.length} buckets, peak ${peak.toLocaleString()}.`;
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-activity-strip", className), role: "img", "aria-label": sentence, children: buckets.map((bucket) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("crewlet-activity-strip__cell", bucket.v > 0 && "is-active"),
+      style: {
+        /*
+         * A floor of a fifth, so a bucket with one event in it reads as a
+         * mark rather than as a line nobody can resolve, and an empty one
+         * keeps the baseline hairline that says the bucket existed.
+         */
+        "--crewlet-activity-strip-fill": bucket.v > 0 ? `${Math.max(20, bucket.v / peak * 100)}%` : "10%"
+      }
+    },
+    bucket.t
+  )) });
+}
+function TimeSeries({
+  series,
+  from,
+  to,
+  label,
+  height = "7.5rem",
+  format = (value) => value.toLocaleString(),
+  formatTime = (at) => new Date(at).toLocaleString(),
+  summary,
+  className
+}) {
+  const id = useId();
+  const width = 1e3;
+  const plot = 120;
+  const footer = 18;
+  const head = 6;
+  const span = Math.max(1, to - from);
+  const peaks = series.map((one) => Math.max(0, ...one.points.map((point) => point.v)));
+  const peak = Math.max(1, ...peaks);
+  const x = (at) => (at - from) / span * width;
+  const y = (value) => head + (1 - value / peak) * (plot - head - footer);
+  const sentence = summary ? summary({ from, to, peak, series: series.map((one, index) => ({ name: one.name, peak: peaks[index] ?? 0 })) }) : `${label}. ${formatTime(from)} to ${formatTime(to)}, peak ${format(peak)}.`;
+  return /* @__PURE__ */ jsxs("figure", { className: cx("crewlet-time-series", className), children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "crewlet-chart",
+        viewBox: `0 0 ${width} ${plot}`,
+        preserveAspectRatio: "none",
+        style: { height },
+        role: "img",
+        "aria-label": sentence,
+        children: [
+          [0.25, 0.5, 0.75].map((fraction) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              className: "crewlet-chart__grid-line",
+              x1: 0,
+              x2: width,
+              y1: y(peak * fraction),
+              y2: y(peak * fraction)
+            },
+            fraction
+          )),
+          /* @__PURE__ */ jsx("line", { className: "crewlet-chart__axis-line", x1: 0, x2: width, y1: plot - footer, y2: plot - footer }),
+          series.map((one, index) => {
+            const color = one.color ?? dataColor(index);
+            const points = [...one.points].sort((a, b) => a.t - b.t);
+            if (points.length === 0) return null;
+            const line = points.map((point) => `${x(point.t).toFixed(2)},${y(point.v).toFixed(2)}`).join(" ");
+            const first = points[0];
+            const last = points[points.length - 1];
+            const area = `${x(first.t).toFixed(2)},${plot - footer} ${line} ${x(last.t).toFixed(2)},${plot - footer}`;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: "0.22" }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+              ] }) }),
+              /* @__PURE__ */ jsx("polygon", { points: area, fill: `url(#${id}-${index})` }),
+              /* @__PURE__ */ jsx(
+                "polyline",
+                {
+                  className: "crewlet-chart__series",
+                  points: line,
+                  stroke: color,
+                  vectorEffect: "non-scaling-stroke"
+                }
+              )
+            ] }, one.id);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("figcaption", { className: "crewlet-time-series__scale", children: [
+      /* @__PURE__ */ jsx("span", { children: formatTime(from) }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "peak ",
+        format(peak)
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: formatTime(to) })
+    ] })
+  ] });
+}
+function Sparkline({ values, color = "var(--color-brand-accent)", height = "1.75rem", className }) {
+  const width = 200;
+  const box = 28;
+  if (values.length < 2) return /* @__PURE__ */ jsx("div", { className: cx("crewlet-spark", className), style: { height }, "aria-hidden": true });
+  const peak = Math.max(1, ...values);
+  const step = width / (values.length - 1);
+  const points = values.map((value, index) => `${(index * step).toFixed(2)},${(box - value / peak * (box - 2) - 1).toFixed(2)}`).join(" ");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: cx("crewlet-spark", className),
+      viewBox: `0 0 ${width} ${box}`,
+      preserveAspectRatio: "none",
+      style: { height },
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("polyline", { className: "crewlet-chart__series", points, stroke: color, vectorEffect: "non-scaling-stroke" })
+    }
+  );
+}
+
+export { ActivityStrip, BarList, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, TimeSeries, dataColor };

package/dist/chunk-F6OE5FH3.js

@@ -0,0 +1,49 @@
+import { isComposing, isModalLayerOpen } from './chunk-ITHXJHBB.js';
+import { useRef, useEffect } from 'react';
+
+var TYPING_ROLES = /* @__PURE__ */ new Set(["combobox", "listbox", "textbox", "searchbox", "spinbutton"]);
+function isTyping(element) {
+  if (!(element instanceof HTMLElement)) return false;
+  if (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "SELECT") return true;
+  if (element.isContentEditable || element.closest('[contenteditable=""],[contenteditable="true"]') !== null) {
+    return true;
+  }
+  const role = element.getAttribute("role");
+  return role !== null && TYPING_ROLES.has(role);
+}
+function sameKey(pressed, wanted) {
+  return pressed.toLowerCase() === wanted.toLowerCase();
+}
+function matchesShortcut(event, keys) {
+  const chord = event.ctrlKey || event.metaKey;
+  for (const entry of keys) {
+    if (typeof entry === "string") {
+      if (!chord && !event.altKey && sameKey(event.key, entry) && !isTyping(document.activeElement)) return true;
+      continue;
+    }
+    if (!sameKey(event.key, entry.key)) continue;
+    if (chord !== Boolean(entry.mod)) continue;
+    if (event.shiftKey !== Boolean(entry.shift)) continue;
+    if (event.altKey !== Boolean(entry.alt)) continue;
+    return true;
+  }
+  return false;
+}
+function useShortcut({ keys, onKey, scope = "page", enabled = true }) {
+  const latest = useRef({ keys, onKey });
+  latest.current = { keys, onKey };
+  useEffect(() => {
+    if (!enabled) return;
+    function handle(event) {
+      if (event.defaultPrevented || isComposing(event)) return;
+      if (scope === "page" && isModalLayerOpen()) return;
+      if (!matchesShortcut(event, latest.current.keys)) return;
+      event.preventDefault();
+      latest.current.onKey(event);
+    }
+    window.addEventListener("keydown", handle);
+    return () => window.removeEventListener("keydown", handle);
+  }, [enabled, scope]);
+}
+
+export { matchesShortcut, useShortcut };

package/dist/chunk-FBZAKNSX.js

@@ -0,0 +1,263 @@
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { usePopupLayer } from './chunk-ITHXJHBB.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Menu-6DE7I66I.css';
+import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { MoreVertGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ITEM_SELECTOR = "[role='menuitem'],[role='menuitemradio']";
+function runs(entries) {
+  const out = [];
+  for (const entry of entries) {
+    if (entry.kind === "separator") {
+      out.push({ kind: "separator", key: entry.key });
+      continue;
+    }
+    const last = out[out.length - 1];
+    if (entry.checked === void 0) out.push({ kind: "action", item: entry });
+    else if (last?.kind === "answers") last.items.push(entry);
+    else out.push({ kind: "answers", key: `${entry.key}:answers`, items: [entry] });
+  }
+  return out;
+}
+function Menu({
+  label,
+  items,
+  icon,
+  trigger,
+  triggerVariant = "tertiary",
+  triggerTabIndex,
+  open: controlled,
+  onOpenChange,
+  align = "start",
+  className
+}) {
+  const id = useId();
+  const menuId = `${id}-menu`;
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const open = controlled ?? uncontrolled;
+  const triggerRef = useRef(null);
+  const menu = useRef(null);
+  const opener = useRef(null);
+  const startAt = useRef("first");
+  const [place, setPlace] = useState(null);
+  const container = useLayerContainer();
+  const isControlled = useRef(controlled !== void 0);
+  const report = useRef(onOpenChange);
+  isControlled.current = controlled !== void 0;
+  report.current = onOpenChange;
+  const setOpen = useCallback((next) => {
+    if (!isControlled.current) setUncontrolled(next);
+    report.current?.(next);
+  }, []);
+  const giveFocusBack = useCallback(() => {
+    const back = opener.current;
+    const target = back && back.isConnected && back !== document.body ? back : triggerRef.current;
+    target?.focus();
+  }, []);
+  const close = useCallback(
+    (restore) => {
+      if (restore) giveFocusBack();
+      setOpen(false);
+    },
+    [giveFocusBack, setOpen]
+  );
+  const popup = usePopupLayer({
+    open,
+    onDismiss: (reason) => close(reason !== "outside")
+  });
+  const entries = () => menu.current ? [...menu.current.querySelectorAll(ITEM_SELECTOR)] : [];
+  useLayoutEffect(() => {
+    if (!open) return;
+    const active = document.activeElement;
+    if (!(active instanceof Node && menu.current?.contains(active))) {
+      opener.current = active instanceof HTMLElement ? active : null;
+    }
+  }, [open]);
+  const position = useCallback(() => {
+    const at = triggerRef.current;
+    const box = menu.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const own = box.getBoundingClientRect();
+    const local = {
+      x: (align === "end" ? rect.right - own.width : rect.left) - (inHost ? host.x : 0),
+      y: rect.top - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    const bounds = {
+      x: LAYER_GAP,
+      y: LAYER_GAP,
+      width: host.width - 2 * LAYER_GAP,
+      height: host.height - 2 * LAYER_GAP
+    };
+    if (outsideBounds(local, whole)) {
+      close(true);
+      return;
+    }
+    const spot = placePopup(local, { width: own.width, height: own.height }, bounds, LAYER_GAP);
+    setPlace((was) => was && was.left === spot.left && was.top === spot.top ? was : { left: spot.left, top: spot.top });
+  }, [align, close, container]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  useEffect(() => {
+    if (!open) setPlace(null);
+  }, [open]);
+  const placed = open && place !== null;
+  useLayoutEffect(() => {
+    if (!placed) return;
+    const all = entries();
+    (startAt.current === "last" ? all[all.length - 1] : all[0])?.focus();
+    startAt.current = "first";
+  }, [placed]);
+  function onTriggerKeyDown(event) {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      startAt.current = event.key === "ArrowUp" ? "last" : "first";
+      setOpen(true);
+    }
+  }
+  function onMenuKeyDown(event) {
+    if (event.key !== "Escape" && event.key !== "Tab" && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.stopPropagation();
+    }
+    const all = entries();
+    const at = all.indexOf(document.activeElement);
+    const go = (index) => all[(index + all.length) % all.length]?.focus();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        go(at + 1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        go(at - 1);
+        return;
+      case "Home":
+        event.preventDefault();
+        go(0);
+        return;
+      case "End":
+        event.preventDefault();
+        go(all.length - 1);
+        return;
+      case "Tab":
+        close(true);
+        return;
+      default:
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+          const letter = event.key.toLocaleLowerCase();
+          for (let step = 1; step <= all.length; step++) {
+            const candidate = all[(at + step) % all.length];
+            if ((candidate.textContent ?? "").trim().toLocaleLowerCase().startsWith(letter)) {
+              event.preventDefault();
+              candidate.focus();
+              return;
+            }
+          }
+        }
+    }
+  }
+  function activate(item2) {
+    if (item2.disabled) return;
+    close(true);
+    item2.onSelect();
+  }
+  const described = (entry) => entry.description !== void 0 && entry.description !== null && entry.description !== false && entry.description !== "";
+  const item = (entry) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: entry.checked === void 0 ? "menuitem" : "menuitemradio",
+      "aria-checked": entry.checked,
+      tabIndex: -1,
+      className: cx(
+        "crewlet-menu__item",
+        // A row with a second line is taller than a row of verbs, and says
+        // so: the row height alone would hold both lines in the space meant
+        // for one, and giving every row the taller padding turns six verbs
+        // into a scroller.
+        described(entry) ? "crewlet-menu__item--described" : void 0,
+        entry.danger && "is-danger",
+        entry.disabled && "is-disabled"
+      ),
+      "aria-disabled": entry.disabled || void 0,
+      onClick: () => activate(entry),
+      children: [
+        entry.checked !== void 0 && /* @__PURE__ */ jsx("span", { className: "crewlet-menu__check", "aria-hidden": true, children: entry.checked && /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) }),
+        entry.icon && /* @__PURE__ */ jsx("span", { className: "crewlet-menu__icon", children: entry.icon }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-menu__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-menu__label", children: entry.label }),
+          described(entry) ? /* @__PURE__ */ jsx("span", { className: "crewlet-menu__description", children: entry.description }) : null
+        ] }),
+        entry.hint && /* @__PURE__ */ jsx("span", { className: "crewlet-menu__hint", children: entry.hint })
+      ]
+    },
+    entry.key
+  );
+  const list = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-menu", container !== null && container !== document.body ? "crewlet-menu--in-host" : null, className),
+      id: menuId,
+      role: "menu",
+      "aria-label": label,
+      tabIndex: -1,
+      ref: (el) => {
+        menu.current = el;
+        popup.panelRef(el);
+      },
+      style: place ? { left: place.left, top: place.top, zIndex: popup.zIndex } : { visibility: "hidden" },
+      onKeyDown: onMenuKeyDown,
+      onPointerDown: (event) => event.stopPropagation(),
+      onClick: (event) => event.stopPropagation(),
+      children: runs(items).map(
+        (run) => run.kind === "separator" ? /* @__PURE__ */ jsx("div", { role: "separator", className: "crewlet-menu__separator" }, run.key) : run.kind === "answers" ? /* @__PURE__ */ jsx("div", { role: "group", className: "crewlet-menu__group", children: run.items.map(item) }, run.key) : item(run.item)
+      )
+    }
+  ) : null;
+  const shared = {
+    ref: (el) => {
+      triggerRef.current = el;
+      popup.insideRef(el);
+    },
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    tabIndex: triggerTabIndex,
+    onClick: () => {
+      if (open) {
+        close(true);
+      } else {
+        startAt.current = "first";
+        setOpen(true);
+      }
+    },
+    onKeyDown: onTriggerKeyDown
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
+    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(MoreVertGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
+    list && container ? createPortal(list, container) : null
+  ] });
+}
+
+export { Menu };

package/dist/chunk-FEFTGVMF.js

@@ -0,0 +1,46 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Table-MDOLVUAW.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Table = ({
+  headers,
+  data,
+  caption,
+  captionHidden = false,
+  emptyMessage = "No data available",
+  actionButton,
+  maxHeight,
+  className = ""
+}) => {
+  const columnCount = Math.max(1, headers.length);
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-table", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "crewlet-table__container",
+        style: maxHeight ? { "--crewlet-table-max-height": maxHeight, "--crewlet-table-overflow-y": "auto" } : void 0,
+        children: /* @__PURE__ */ jsxs("table", { className: "crewlet-table__table", children: [
+          caption != null && (captionHidden ? /* @__PURE__ */ jsx("caption", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: caption }) }) : /* @__PURE__ */ jsx("caption", { className: "crewlet-table__caption", children: caption })),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "crewlet-table__header", children: headers.map((header, index) => (
+            // The index is the key because a header is a position: the
+            // columns of one table do not reorder between renders.
+            /* @__PURE__ */ jsx("th", { scope: "col", children: header }, index)
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: data && data.length > 0 ? data.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "crewlet-table__row", children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx("td", { children: cell }, cellIndex)) }, rowIndex)) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "crewlet-table__empty", colSpan: columnCount, children: emptyMessage }) }) })
+        ] })
+      }
+    ),
+    actionButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-table__action-btn",
+        onClick: actionButton.onClick,
+        children: /* @__PURE__ */ jsx("span", { className: "crewlet-table__action-text", children: actionButton.label })
+      }
+    )
+  ] });
+};
+
+export { Table };