@crewlethq/ui 0.4.4 → 0.5.1

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

package/dist/chunk-R66KLW7S.js

@@ -1,143 +0,0 @@
-import { SegmentedControl } from './chunk-7PEFUMQJ.js';
-import { LightModeGlyph, ComputerGlyph, DarkModeGlyph } from '@crewlethq/icons/glyphs';
-import { useState, useEffect, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var THEMES = ["system", "light", "dark"];
-var DENSITIES = ["normal", "compact", "comfortable"];
-function read(key, allowed, fallback) {
-  try {
-    const held = globalThis.localStorage?.getItem(key);
-    return allowed.includes(held) ? held : fallback;
-  } catch {
-    return fallback;
-  }
-}
-function write(key, value) {
-  try {
-    globalThis.localStorage?.setItem(key, value);
-  } catch {
-  }
-}
-function root() {
-  return typeof document === "undefined" ? null : document.documentElement;
-}
-function applyTheme(theme) {
-  const el = root();
-  if (!el) return;
-  if (theme === "system") el.removeAttribute("data-theme");
-  else el.setAttribute("data-theme", theme);
-}
-function applyDensity(density) {
-  const el = root();
-  if (!el) return;
-  if (density === "normal") el.removeAttribute("data-density");
-  else el.setAttribute("data-density", density);
-}
-function useThemePreference({
-  storageKey
-}) {
-  const [theme, setTheme] = useState(() => read(storageKey, THEMES, "system"));
-  useEffect(() => {
-    applyTheme(theme);
-  }, [theme]);
-  const choose = useCallback(
-    (next) => {
-      setTheme(next);
-      applyTheme(next);
-      write(storageKey, next);
-    },
-    [storageKey]
-  );
-  return [theme, choose];
-}
-function useDensityPreference({
-  storageKey
-}) {
-  const [density, setDensity] = useState(
-    () => read(storageKey, DENSITIES, "normal")
-  );
-  useEffect(() => {
-    applyDensity(density);
-  }, [density]);
-  const choose = useCallback(
-    (next) => {
-      setDensity(next);
-      applyDensity(next);
-      write(storageKey, next);
-    },
-    [storageKey]
-  );
-  return [density, choose];
-}
-function applyStoredPreferences({ themeKey, densityKey }) {
-  const theme = themeKey ? read(themeKey, THEMES, "system") : "system";
-  const density = densityKey ? read(densityKey, DENSITIES, "normal") : "normal";
-  applyTheme(theme);
-  applyDensity(density);
-  return { theme, density };
-}
-function ThemeSwitcher({
-  storageKey = "crewlet_theme",
-  label = "Theme",
-  lightLabel = "Light",
-  systemLabel = "Follow the system",
-  darkLabel = "Dark",
-  size = "sm",
-  className
-}) {
-  const [theme, choose] = useThemePreference({ storageKey });
-  return /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      label,
-      semantics: "radio",
-      size,
-      className,
-      value: theme,
-      onValueChange: choose,
-      options: [
-        { value: "light", icon: /* @__PURE__ */ jsx(LightModeGlyph, {}), srLabel: lightLabel, title: lightLabel },
-        { value: "system", icon: /* @__PURE__ */ jsx(ComputerGlyph, {}), srLabel: systemLabel, title: systemLabel },
-        { value: "dark", icon: /* @__PURE__ */ jsx(DarkModeGlyph, {}), srLabel: darkLabel, title: darkLabel }
-      ]
-    }
-  );
-}
-function DensitySwitcher({
-  storageKey = "crewlet_density",
-  label = "Density",
-  compactLabel = "Compact",
-  normalLabel = "Normal",
-  comfortableLabel = "Comfortable",
-  compactMark = "S",
-  normalMark = "M",
-  comfortableMark = "L",
-  size = "sm",
-  className
-}) {
-  const [density, choose] = useDensityPreference({ storageKey });
-  return /* @__PURE__ */ jsx(
-    SegmentedControl,
-    {
-      label,
-      semantics: "radio",
-      size,
-      className,
-      value: density,
-      onValueChange: choose,
-      options: [
-        { value: "compact", label: compactMark, srLabel: compactLabel, title: compactLabel },
-        { value: "normal", label: normalMark, srLabel: normalLabel, title: normalLabel },
-        {
-          value: "comfortable",
-          label: comfortableMark,
-          srLabel: comfortableLabel,
-          title: comfortableLabel
-        }
-      ]
-    }
-  );
-}
-
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference };