@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-GTOUGQQK.js

@@ -0,0 +1,147 @@
+import { usePopupLayer, isComposing } from './chunk-ITHXJHBB.js';
+import './Listbox-X2DOTSQA.css';
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+function useListbox({
+  id,
+  open,
+  count,
+  onCommit,
+  onClose,
+  tabCommits = false,
+  popup = true
+}) {
+  const [at, setAt] = useState(0);
+  const active = count === 0 ? -1 : Math.min(Math.max(at, 0), count - 1);
+  const listId = `${id}-listbox`;
+  const layer = usePopupLayer({ open: open && popup, onDismiss: () => onClose() });
+  const list = useRef(null);
+  const listRef = useCallback(
+    (el) => {
+      list.current = el;
+      layer.panelRef(el);
+    },
+    [layer]
+  );
+  useEffect(() => {
+    const box = list.current;
+    const row = box?.querySelector('[aria-selected="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;
+  }, [active, count, open]);
+  function onKeyDown(event) {
+    if (!open || isComposing(event)) return false;
+    if (event.key === "Escape") {
+      if (!popup) return false;
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+      return true;
+    }
+    if (count === 0) return false;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setAt((active + 1) % count);
+        return true;
+      case "ArrowUp":
+        event.preventDefault();
+        setAt((active - 1 + count) % count);
+        return true;
+      case "Enter":
+        event.preventDefault();
+        onCommit(active);
+        return true;
+      case "Tab":
+        if (!tabCommits || event.shiftKey) return false;
+        event.preventDefault();
+        onCommit(active);
+        return true;
+      default:
+        return false;
+    }
+  }
+  return {
+    active,
+    setActive: setAt,
+    listId,
+    listRef,
+    anchorRef: layer.insideRef,
+    optionId: (index) => `${listId}-${index}`,
+    onKeyDown,
+    optionHandlers: (index) => ({
+      onMouseDown: (event) => {
+        event.preventDefault();
+        onCommit(index);
+      },
+      onMouseEnter: () => setAt(index)
+    })
+  };
+}
+var TYPE_AHEAD_WINDOW = 500;
+function useOptionKeys({ listbox, count, disabled, textOf }) {
+  const typed = useRef({ text: "", at: 0 });
+  const { active, setActive } = listbox;
+  const step = useCallback(
+    (from, by) => {
+      if (count === 0) return -1;
+      for (let i = 0; i < count; i += 1) {
+        const at = ((from + by * i) % count + count) % count;
+        if (!disabled?.(at)) return at;
+      }
+      return -1;
+    },
+    [count, disabled]
+  );
+  const opening = useCallback((chosen) => chosen >= 0 && !disabled?.(chosen) ? chosen : Math.max(step(0, 1), 0), [disabled, step]);
+  const typeAhead = useCallback(
+    (key) => {
+      if (!textOf) return false;
+      const now = Date.now();
+      const run = now - typed.current.at < TYPE_AHEAD_WINDOW ? typed.current.text + key : key;
+      typed.current = { text: run, at: now };
+      const from = active < 0 ? 0 : active + (run.length === 1 ? 1 : 0);
+      for (let i = 0; i < count; i += 1) {
+        const at = ((from + i) % count + count) % count;
+        if (disabled?.(at)) continue;
+        if (textOf(at).toLowerCase().startsWith(run.toLowerCase())) {
+          setActive(at);
+          return true;
+        }
+      }
+      return false;
+    },
+    [active, count, disabled, setActive, textOf]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const by = event.key === "ArrowDown" ? 1 : -1;
+        const next = step(active + by, by);
+        if (next >= 0) setActive(next);
+        return true;
+      }
+      if (event.key === "Home" || event.key === "End") {
+        event.preventDefault();
+        const next = event.key === "Home" ? step(0, 1) : step(count - 1, -1);
+        if (next >= 0) setActive(next);
+        return true;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        if (typeAhead(event.key)) {
+          event.preventDefault();
+          return true;
+        }
+      }
+      return false;
+    },
+    [active, count, setActive, step, typeAhead]
+  );
+  return { onKeyDown, step, opening };
+}
+
+export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys };

package/dist/chunk-GUIF6Q6N.js

@@ -0,0 +1,143 @@
+import { SegmentedControl } from './chunk-ARMRX2YV.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 };

package/dist/chunk-GXQ3B46I.js

@@ -0,0 +1,216 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './CalendarGrid-V6TQ5QKS.css';
+import { useRef, useMemo, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sameDay = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
+function compareDays(a, b) {
+  if (a.year !== b.year) return a.year - b.year;
+  if (a.month !== b.month) return a.month - b.month;
+  return a.day - b.day;
+}
+var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+function shiftDay(date, days) {
+  const moved = new Date(date.year, date.month, date.day + days);
+  return { year: moved.getFullYear(), month: moved.getMonth(), day: moved.getDate() };
+}
+function shiftMonth(date, months) {
+  const target = new Date(date.year, date.month + months, 1);
+  const year = target.getFullYear();
+  const month = target.getMonth();
+  return { year, month, day: Math.min(date.day, daysInMonth(year, month)) };
+}
+var today = () => {
+  const now = /* @__PURE__ */ new Date();
+  return { year: now.getFullYear(), month: now.getMonth(), day: now.getDate() };
+};
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var WEEKDAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var WEEKDAY_MARKS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var cellId = (date) => `${date.year}-${date.month}-${date.day}`;
+function CalendarGrid({
+  label,
+  year,
+  month,
+  focused,
+  onFocusedChange,
+  onMonthChange,
+  onSelect,
+  selected,
+  inRange,
+  isDisabled,
+  onHover,
+  firstDayOfWeek = 0,
+  showOutsideDays = true,
+  dayLabel,
+  monthNames = MONTH_NAMES,
+  weekdayNames = WEEKDAY_NAMES,
+  weekdayMarks = WEEKDAY_MARKS,
+  className
+}) {
+  const grid = useRef(null);
+  const weeks = useMemo(() => {
+    const total = daysInMonth(year, month);
+    const lead = (new Date(year, month, 1).getDay() - firstDayOfWeek + 7) % 7;
+    const cells = [];
+    for (let i = 0; i < lead; i += 1) {
+      cells.push({ date: shiftDay({ year, month, day: 1 }, i - lead), inMonth: false });
+    }
+    for (let day = 1; day <= total; day += 1) cells.push({ date: { year, month, day }, inMonth: true });
+    while (cells.length % 7 !== 0 || cells.length < 42) {
+      cells.push({ date: shiftDay({ year, month, day: total }, cells.length - lead - total + 1), inMonth: false });
+    }
+    const rows = [];
+    for (let at = 0; at < cells.length; at += 7) rows.push(cells.slice(at, at + 7));
+    return rows;
+  }, [year, month, firstDayOfWeek]);
+  const now = useMemo(today, []);
+  const stop = useMemo(() => {
+    const cells = weeks.flat().filter((cell) => cell.inMonth || showOutsideDays);
+    return cells.find((cell) => sameDay(cell.date, focused))?.date ?? cells[0]?.date;
+  }, [weeks, showOutsideDays, focused]);
+  const moving = useRef(false);
+  useEffect(() => {
+    const box = grid.current;
+    if (!box) return;
+    const inside = moving.current || box.contains(document.activeElement);
+    moving.current = false;
+    if (!inside) return;
+    box.querySelector(`[data-day="${cellId(focused)}"]`)?.focus();
+  }, [focused]);
+  function goTo(next, byKey = false) {
+    moving.current = moving.current || byKey;
+    onFocusedChange(next);
+    if (next.year !== year || next.month !== month) onMonthChange?.(next.year, next.month);
+  }
+  function onKeyDown(event, date) {
+    const step = (days) => {
+      event.preventDefault();
+      goTo(shiftDay(date, days), true);
+    };
+    switch (event.key) {
+      case "ArrowLeft":
+        return step(-1);
+      case "ArrowRight":
+        return step(1);
+      case "ArrowUp":
+        return step(-7);
+      case "ArrowDown":
+        return step(7);
+      case "Home": {
+        event.preventDefault();
+        const from = (new Date(date.year, date.month, date.day).getDay() - firstDayOfWeek + 7) % 7;
+        return goTo(shiftDay(date, -from), true);
+      }
+      case "End": {
+        event.preventDefault();
+        const from = (new Date(date.year, date.month, date.day).getDay() - firstDayOfWeek + 7) % 7;
+        return goTo(shiftDay(date, 6 - from), true);
+      }
+      case "PageUp":
+        event.preventDefault();
+        return goTo(shiftMonth(date, event.shiftKey ? -12 : -1), true);
+      case "PageDown":
+        event.preventDefault();
+        return goTo(shiftMonth(date, event.shiftKey ? 12 : 1), true);
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (!isDisabled?.(date)) onSelect(date);
+        return;
+      default:
+        return;
+    }
+  }
+  const nameOf = (date) => dayLabel ? dayLabel(date) : `${weekdayNames[new Date(date.year, date.month, date.day).getDay()]} ${date.day} ${monthNames[date.month]} ${date.year}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: grid,
+      role: "grid",
+      "aria-label": label,
+      tabIndex: -1,
+      className: cx("crewlet-calendar", className),
+      onMouseLeave: onHover ? () => onHover(null) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { role: "row", className: "crewlet-calendar__weekdays", children: weekdayMarks.map((_mark, at) => {
+          const weekday = (at + firstDayOfWeek) % 7;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "columnheader",
+              "aria-label": weekdayNames[weekday],
+              className: "crewlet-calendar__weekday",
+              children: weekdayMarks[weekday]
+            },
+            weekday
+          );
+        }) }),
+        weeks.map((week) => /* @__PURE__ */ jsx("div", { role: "row", className: "crewlet-calendar__week", children: week.map(({ date, inMonth }) => {
+          if (!inMonth && !showOutsideDays) {
+            return /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "gridcell",
+                className: "crewlet-calendar__day is-blank"
+              },
+              cellId(date)
+            );
+          }
+          const disabled = isDisabled?.(date) ?? false;
+          const chosen = selected?.some((day) => sameDay(day, date)) ?? false;
+          const between = !chosen && (inRange?.(date) ?? false);
+          const isToday = sameDay(date, now);
+          const opensRange = chosen && (inRange?.(shiftDay(date, 1)) ?? false);
+          const closesRange = chosen && (inRange?.(shiftDay(date, -1)) ?? false);
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              role: "gridcell",
+              "data-day": cellId(date),
+              "aria-label": nameOf(date),
+              "aria-selected": chosen,
+              "aria-disabled": disabled || void 0,
+              "aria-current": isToday ? "date" : void 0,
+              tabIndex: stop && sameDay(date, stop) ? 0 : -1,
+              className: cx(
+                "crewlet-calendar__day",
+                !inMonth && "is-outside",
+                disabled && "is-disabled",
+                chosen && "is-selected",
+                between && "is-in-range",
+                opensRange && "is-range-start",
+                closesRange && "is-range-end",
+                isToday && "is-today"
+              ),
+              onClick: () => {
+                if (disabled) return;
+                goTo(date);
+                onSelect(date);
+              },
+              onKeyDown: (event) => onKeyDown(event, date),
+              onMouseEnter: onHover && !disabled ? () => onHover(date) : void 0,
+              children: date.day
+            },
+            cellId(date)
+          );
+        }) }, cellId(week[0].date)))
+      ]
+    }
+  );
+}
+
+export { CalendarGrid, compareDays, daysInMonth, sameDay, shiftDay, shiftMonth, today };

package/dist/chunk-H4FBTAYS.js

@@ -0,0 +1,130 @@
+import { TreeGrid } from './chunk-5SDBMKUO.js';
+import { createTreeModel } from './chunk-NTRZGNEX.js';
+import { OrgLabel } from './chunk-5C5YMZQU.js';
+import { AddPill } from './chunk-S4GZWSKR.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './OrgTable-VWMFC3TB.css';
+import { useMemo, useRef, useImperativeHandle, useCallback } from 'react';
+import { KeyboardArrowDownGlyph, KeyboardArrowUpGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  expandAll: "Expand all",
+  collapseAll: "Collapse all"
+};
+function OrgTable({
+  rows,
+  renderCell,
+  tone,
+  controls = true,
+  labels,
+  ref,
+  className,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const depths = useMemo(() => createTreeModel(rows).depth, [rows]);
+  const grid = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focusNode: (id) => grid.current?.focusNode(id),
+      expandAll: () => grid.current?.expandAll(),
+      collapseAll: () => grid.current?.collapseAll()
+    }),
+    []
+  );
+  const cell = useCallback(
+    (id, column, context) => {
+      if (column !== 1) return renderCell(id, column, context);
+      const depth = depths.get(id) ?? 0;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          OrgTableWire,
+          {
+            depth,
+            tone: tone?.(id),
+            trunk: depth > 0 || context.expandable(id) && context.expanded(id)
+          }
+        ),
+        renderCell(id, column, context)
+      ] });
+    },
+    [depths, renderCell, tone]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-org-table", className), children: [
+    controls && /*
+     * THE CHEVRONS THE ROWS THEMSELVES TURN, pointed at every row at once.
+     * They wore the plus and the minus, which is the drawing the add on
+     * every row under them wears: one mark meant "Expand all" at the
+     * table's top edge and "Add to this row" nine times below it. Down is
+     * what an open row's own chevron points at, so the pair reads as the
+     * state it puts the whole table into.
+     */
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-org-table__controls", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: text.expandAll,
+          title: text.expandAll,
+          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, {}),
+          onClick: () => grid.current?.expandAll()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: text.collapseAll,
+          title: text.collapseAll,
+          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, {}),
+          onClick: () => grid.current?.collapseAll()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      TreeGrid,
+      {
+        ...rest,
+        ref: grid,
+        rows,
+        renderCell: cell,
+        labels,
+        className: "crewlet-org-table__grid"
+      }
+    )
+  ] });
+}
+function OrgTableWire({
+  depth,
+  tone,
+  trunk
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "crewlet-org-table__wire",
+      "aria-hidden": "true",
+      "data-trunk": trunk ? "" : void 0,
+      "data-root": depth === 0 ? "" : void 0,
+      "data-tone": tone,
+      style: { "--crewlet-org-table-depth": depth }
+    }
+  );
+}
+function OrgTableName({ tone, ...content }) {
+  return /* @__PURE__ */ jsx(OrgLabel, { layout: "row", ...content, ...tone ? { tone } : {} });
+}
+function OrgTableActions({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-org-table__actions", className), children });
+}
+function OrgTableAdd({ onOpen, className, ...pill }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-org-table__add", className), onClickCapture: () => onOpen?.(), children: /* @__PURE__ */ jsx(AddPill, { ...pill }) });
+}
+
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName };

package/dist/chunk-HOXGBLEY.js

@@ -0,0 +1,37 @@
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PageHeader-6EYWQXRE.css';
+import { createElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PageHeader({
+  title,
+  headingLevel,
+  description,
+  badges,
+  actions,
+  titleId,
+  className,
+  children,
+  ...rest
+}) {
+  const level = useHeadingLevel();
+  const heading = createElement(
+    headingTag(headingLevel ?? level),
+    { className: "crewlet-page-header__title", id: titleId },
+    title
+  );
+  return /* @__PURE__ */ jsxs("header", { ...rest, className: cx("crewlet-page-header", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-page-header__lead", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-page-header__titles", children: [
+        heading,
+        badges ? /* @__PURE__ */ jsx("div", { className: "crewlet-page-header__badges", children: badges }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx("p", { className: "crewlet-page-header__description", children: description }) : null,
+      children
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-page-header__actions", children: actions }) : null
+  ] });
+}
+
+export { PageHeader };