@crewlethq/ui 0.4.3 → 0.5.0

package/dist/chunk-ESCO4XYW.js

@@ -1,144 +0,0 @@
-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-F4PJZ4ED.js

@@ -1,245 +0,0 @@
-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-PNFASD6F.js

@@ -1,98 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './Avatar-P2KRQM2B.css';
-import { useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
-var getInitials = (name) => {
-  if (!name) return "?";
-  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
-  if (words.length === 0) return "?";
-  return words.slice(0, 2).map((word) => (Array.from(word)[0] ?? "").toUpperCase()).join("") || "?";
-};
-var TINT_COUNT = 10;
-var avatarTint = (seed) => {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i += 1) {
-    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
-  }
-  return hash % TINT_COUNT;
-};
-function avatarPixels(size) {
-  return typeof size === "number" ? size : AVATAR_SIZES[size];
-}
-function avatarSquareCorner(pixels) {
-  if (pixels < 23) return "var(--radius-xs)";
-  if (pixels < 36) return "var(--radius-md)";
-  return "var(--radius-lg)";
-}
-var Avatar = ({
-  src,
-  name,
-  size = "md",
-  shape = "square",
-  tone = "neutral",
-  variant = "solid",
-  decorative = false,
-  colorSeed,
-  className,
-  style,
-  ...rest
-}) => {
-  const [imageFailed, setImageFailed] = useState(false);
-  useEffect(() => {
-    setImageFailed(false);
-  }, [src]);
-  const step = typeof size === "number" ? null : size;
-  const pixels = avatarPixels(size);
-  const measured = step === null ? {
-    width: pixels,
-    height: pixels,
-    fontSize: Math.max(9, Math.round(pixels * 0.36)),
-    // And its corner, for the same reason: the stylesheet's square steps
-    // move the radius with the box, so an arbitrary box that took one
-    // fixed step would be squarer or rounder than every step beside it.
-    ...shape === "square" ? { borderRadius: avatarSquareCorner(pixels) } : {}
-  } : {};
-  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
-  const classes = cx(
-    "crewlet-avatar",
-    `crewlet-avatar--${shape}`,
-    step === null ? null : `crewlet-avatar--${step}`,
-    className
-  );
-  if (src && !imageFailed) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        ...rest,
-        className: cx(classes, "crewlet-avatar--image", variant === "dashed" && "crewlet-avatar--dashed"),
-        style: { ...measured, ...style },
-        src,
-        alt: decorative ? "" : name ?? "",
-        "aria-hidden": decorative ? true : void 0,
-        onError: () => setImageFailed(true)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...rest,
-      className: cx(
-        classes,
-        "crewlet-avatar--fallback",
-        `crewlet-avatar--${tone}`,
-        variant === "dashed" && "crewlet-avatar--dashed",
-        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
-      ),
-      style: { ...measured, ...style },
-      role: decorative ? void 0 : "img",
-      "aria-hidden": decorative ? true : void 0,
-      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
-      children: getInitials(name)
-    }
-  );
-};
-
-export { AVATAR_SIZES, Avatar, avatarPixels, avatarSquareCorner, avatarTint, getInitials };

package/dist/chunk-PZSWF74H.js

@@ -1,15 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './StatusDot-HA2L2FSX.css';
-import { jsx } from 'react/jsx-runtime';
-
-function StatusDot({ tone = "neutral", pulse = false, className }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "aria-hidden": true,
-      className: cx("crewlet-status-dot", `crewlet-status-dot--${tone}`, pulse && "is-pulsing", className)
-    }
-  );
-}
-
-export { StatusDot };