@crewlethq/ui 0.38.0 → 0.40.0

package/dist/{chunk-YQG4PZGC.js → chunk-QRKT4XTT.js}

@@ -1,12 +1,12 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DataTable } from './chunk-A23KDROH.js';
 import { DateTimePicker } from './chunk-UB6MLXUL.js';
+import { DataTable } from './chunk-FXBGEANQ.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-TYONQSOK.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { Menu } from './chunk-D6FEHY5G.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-BJI3RFXG.js → chunk-S4DREXGM.js}

@@ -1,5 +1,5 @@
 import { BrandLockup } from './chunk-7KBNFFM3.js';
-import { Card } from './chunk-ZK3VYY7L.js';
+import { Card } from './chunk-INHXF2CL.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AuthLayout-ODHBUPHQ.css';
 import { useId } from 'react';

package/dist/{chunk-GDDE4UM7.js → chunk-SEC2GR2V.js}

@@ -1,6 +1,6 @@
 import { CopyButton } from './chunk-W46LPU4R.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CodeBlock-GYNJ2HI6.css';
+import './CodeBlock-N5ETJF24.css';
 import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-YEVG2X5R.js → chunk-SNQRGH4A.js}

@@ -1,4 +1,4 @@
-import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
+import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';

package/dist/chunk-T6MXORP5.js

@@ -0,0 +1,116 @@
+import { SetByLine } from './chunk-ODOJJGXH.js';
+import { Link } from './chunk-FBSEJO2C.js';
+import { DescriptionList, DescriptionListItem } from './chunk-MFS6F2P7.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PropertyList-SCYM66LL.css';
+import { useId, Fragment } from 'react';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+
+function absent(value) {
+  return value === null || value === void 0 || value === "";
+}
+function drawnSetBy(item) {
+  if (!item.setBy) return void 0;
+  if (absent(item.value) && !item.setBy.cleared) return void 0;
+  return item.setBy;
+}
+function attributions(items) {
+  const out = items.map(() => void 0);
+  let start = -1;
+  let key = "";
+  const close = (end) => {
+    if (start < 0) return;
+    out[end] = {
+      setBy: drawnSetBy(items[start]),
+      labels: items.slice(start, end + 1).map((item) => item.label)
+    };
+    start = -1;
+    key = "";
+  };
+  items.forEach((item, i) => {
+    const line = drawnSetBy(item);
+    if (!line) {
+      close(i - 1);
+      return;
+    }
+    const next = [line.actor, line.ago, line.turnHref, line.cleared, item.change].join("\0");
+    if (start >= 0 && next === key) return;
+    close(i - 1);
+    start = i;
+    key = next;
+  });
+  close(items.length - 1);
+  return out;
+}
+function PropertyList({
+  groups,
+  headings = "eyebrow",
+  emptyLabel = "Not set",
+  turnLabel,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: ariaLabel ? "group" : void 0,
+      "aria-label": ariaLabel,
+      className: cx("crewlet-property-list", `crewlet-property-list--${headings}`, className),
+      children: groups.map((group, index) => {
+        const headingId = `${id}-group-${index}`;
+        const collapsed = group.whenAllAbsent !== void 0 && group.items.every((item) => absent(item.value));
+        const lines = collapsed ? [] : attributions(group.items);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          group.name ? /* @__PURE__ */ jsx("div", { id: headingId, className: "crewlet-property-list__heading", children: group.name }) : null,
+          collapsed ? /* @__PURE__ */ jsx("p", { className: "crewlet-property-list__empty", children: group.whenAllAbsent }) : /* @__PURE__ */ jsx(
+            DescriptionList,
+            {
+              className: "crewlet-property-list__group",
+              "aria-labelledby": group.name ? headingId : void 0,
+              children: group.items.map((item, row) => {
+                const line = lines[row];
+                return /* @__PURE__ */ jsxs(
+                  DescriptionListItem,
+                  {
+                    term: item.title || item.identifierLabel ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        title: item.title,
+                        className: item.identifierLabel ? "crewlet-property-list__identifier" : void 0,
+                        children: item.label
+                      }
+                    ) : item.label,
+                    children: [
+                      /* @__PURE__ */ jsx(Value, { item, emptyLabel }),
+                      line ? /* @__PURE__ */ jsx(
+                        SetByLine,
+                        {
+                          setBy: line.setBy,
+                          fields: line.labels,
+                          turnLabel,
+                          className: "crewlet-property-list__set-by"
+                        }
+                      ) : null
+                    ]
+                  },
+                  item.label
+                );
+              })
+            }
+          )
+        ] }, group.name ?? index);
+      })
+    }
+  );
+}
+function Value({ item, emptyLabel }) {
+  if (absent(item.value)) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  if (item.href) {
+    return /* @__PURE__ */ jsx(Link, { href: item.href, size: "inherit", children: item.value });
+  }
+  return /* @__PURE__ */ jsx(Fragment$1, { children: item.value });
+}
+
+export { PropertyList };

package/dist/{chunk-OTCXRJ7D.js → chunk-U2XAJONO.js}

@@ -2,7 +2,7 @@ import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { ArtifactKindGround } from './chunk-UBZDYOCA.js';
-import { Card } from './chunk-ZK3VYY7L.js';
+import { Card } from './chunk-INHXF2CL.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
 import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';

package/dist/{chunk-3ZUINC7C.js → chunk-WYYCPV46.js}

@@ -1,5 +1,5 @@
-import { Kbd } from './chunk-SMBKXWML.js';
 import { FormField, Textarea, Input } from './chunk-TYONQSOK.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
@@ -24,6 +24,7 @@ function ListInput({
   disabled = false,
   optional,
   enterHint = true,
+  focusOnMount = false,
   addLabel = (name) => `Add ${name}`,
   itemLabel = (name, position) => `${name} ${position}`,
   newItemLabel = (name) => `New ${name}`,
@@ -45,6 +46,10 @@ function ListInput({
   const downs = useRef(/* @__PURE__ */ new Map());
   const addBox = useRef(null);
   const focusNext = useRef(null);
+  const focusAtMount = useRef(focusOnMount);
+  useLayoutEffect(() => {
+    if (focusAtMount.current) addBox.current?.focus();
+  }, []);
   useLayoutEffect(() => {
     const want = focusNext.current;
     if (!want) return;

package/dist/chunk-X4IXXLWM.js

@@ -0,0 +1,306 @@
+import { StatusDot } from './chunk-WIATRXEJ.js';
+import { useRoving, tabStop } from './chunk-EGMQURBR.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { Menu } from './chunk-D6FEHY5G.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HitArea-QUOS6ZDJ.css';
+import './Tabs-S7F4RWAN.css';
+import React, { useRef, useImperativeHandle, useLayoutEffect, useState } from 'react';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function foldTabs({
+  widths,
+  current,
+  space,
+  gap,
+  more
+}) {
+  const all = widths.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, widths.length - 1);
+  if (all <= space) return [];
+  let used = more + (current >= 0 ? (widths[current] ?? 0) + gap : 0);
+  const kept = new Set(current >= 0 ? [current] : []);
+  for (let i = 0; i < widths.length; i++) {
+    if (i === current) continue;
+    const next = used + (widths[i] ?? 0) + gap;
+    if (next > space) break;
+    used = next;
+    kept.add(i);
+  }
+  return widths.map((_, i) => i).filter((i) => !kept.has(i));
+}
+function noteFits({
+  widths,
+  space,
+  gap,
+  note
+}) {
+  if (note <= 0) return false;
+  const tabs = widths.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, widths.length - 1);
+  return tabs + gap + note <= space;
+}
+var NOTHING_FOLDED = { folded: [], note: true };
+var px = (value) => parseFloat(value) || 0;
+var widthOf = (el) => el ? el.getBoundingClientRect().width : 0;
+function useFold(enabled, box, row, values, current) {
+  const [fold, setFold] = useState(NOTHING_FOLDED);
+  const signature = values.join("\n");
+  useLayoutEffect(() => {
+    const outer = box.current;
+    const inner = row.current;
+    if (!enabled || !outer || !inner) return;
+    const keys = signature === "" ? [] : signature.split("\n");
+    const measure = () => {
+      const boxStyle = getComputedStyle(outer);
+      let space = outer.clientWidth - px(boxStyle.paddingLeft) - px(boxStyle.paddingRight);
+      const rowStyle = getComputedStyle(inner);
+      const gap = px(rowStyle.columnGap);
+      let more = widthOf(outer.querySelector("[data-tabs-more]"));
+      if (inner !== outer) {
+        space -= px(rowStyle.paddingLeft) + px(rowStyle.paddingRight) + px(rowStyle.borderLeftWidth) + px(rowStyle.borderRightWidth);
+        more += px(boxStyle.columnGap) - gap;
+      }
+      const trailing = outer.querySelector("[data-tabs-trailing]");
+      if (trailing) space -= widthOf(trailing) + gap;
+      const widths = [...inner.querySelectorAll(".crewlet-tabs__tab")].map(widthOf);
+      const next = foldTabs({ widths, current: current ? keys.indexOf(current) : -1, space, gap, more }).map((i) => keys[i]).filter((key) => key !== void 0);
+      const note = noteFits({ widths, space, gap, note: widthOf(outer.querySelector("[data-tabs-note]")) });
+      setFold(
+        (was) => was.note === note && was.folded.join("\n") === next.join("\n") ? was : { folded: next, note }
+      );
+    };
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(measure);
+    watch.observe(outer);
+    for (const item of outer.querySelectorAll(
+      ".crewlet-tabs__tab, [data-tabs-more], [data-tabs-note], [data-tabs-trailing]"
+    )) {
+      watch.observe(item);
+    }
+    return () => watch.disconnect();
+  }, [enabled, box, row, signature, current]);
+  return enabled ? fold : NOTHING_FOLDED;
+}
+var FOLDED = { "aria-hidden": true, inert: true };
+var SHOWN = {};
+function figureOf(count) {
+  if (count === null || count === void 0 || count === "") return void 0;
+  return typeof count === "number" ? count.toLocaleString() : count;
+}
+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,
+  trailing,
+  overflow = "scroll",
+  moreLabel = "More",
+  moreMenuLabel,
+  note,
+  ref
+}) {
+  const navRef = useRef(null);
+  const boxRef = useRef(null);
+  const folding = overflow === "menu";
+  const boxed = folding && !renderItem;
+  useImperativeHandle(ref, () => boxed ? boxRef.current : navRef.current, [boxed]);
+  const { buttons, onKeyDown } = useRoving(items.length, null);
+  const fold = useFold(
+    folding,
+    boxed ? boxRef : navRef,
+    navRef,
+    items.map((item) => item.value),
+    value
+  );
+  const isFolded = (item) => fold.folded.includes(item.value);
+  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);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(update) : null;
+    nav.querySelectorAll(".crewlet-tabs__tab").forEach((tab) => {
+      mutation.observe(tab, { attributes: true, attributeFilter: ["class"] });
+      resize?.observe(tab);
+    });
+    resize?.observe(nav);
+    return () => {
+      mutation.disconnect();
+      resize?.disconnect();
+    };
+  }, [variant, value, items]);
+  const rootClass = cx(
+    "crewlet-tabs",
+    `crewlet-tabs--${variant}`,
+    `crewlet-tabs--${size}`,
+    folding && "crewlet-tabs--fold",
+    !boxed && className
+  );
+  const selected = tabStop(
+    items.map((item) => ({ disabled: item.disabled || isFolded(item) })),
+    Math.max(
+      0,
+      items.findIndex((item) => item.value === value)
+    )
+  );
+  const rows = items.map((item, index) => {
+    const isActive = value !== void 0 && value === item.value;
+    const folded = isFolded(item);
+    const tabClassName = cx(
+      "crewlet-tabs__tab",
+      HIT_AREA_CLASS,
+      isActive && "is-active",
+      item.disabled && "is-disabled",
+      folded && "is-folded"
+    );
+    const icon = item.live ? /* @__PURE__ */ jsx(StatusDot, { tone: "info", pulse: true }) : item.icon;
+    const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: icon }) : null,
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__label", children: [
+        item.label,
+        item.live ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${item.live}` }) : null
+      ] }),
+      item.marker ? item.marker.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.marker.count }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label })
+      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null && item.count !== "" ? /* @__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,
+        folded,
+        foldProps: folded ? FOLDED : SHOWN
+      }) }, 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,
+        ...folded ? FOLDED : SHOWN,
+        onClick: onSelect,
+        onKeyDown: (event) => onKeyDown(event, false),
+        children
+      },
+      item.value
+    );
+  });
+  const out = folding ? items.filter(isFolded) : [];
+  const more = folding ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("crewlet-tabs__more", out.length === 0 && "is-folded"),
+      "data-tabs-more": "",
+      ...out.length === 0 ? FOLDED : SHOWN,
+      children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          label: moreMenuLabel ?? (ariaLabel ? `More of ${ariaLabel}` : moreLabel),
+          trigger: moreLabel,
+          trailingIcon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs", "aria-hidden": "true" }),
+          triggerVariant: "ghost",
+          align: "end",
+          items: out.map(
+            (item) => ({
+              key: item.value,
+              label: item.menuLabel ?? (typeof item.label === "string" ? item.label : item.value),
+              hint: figureOf(item.count),
+              disabled: item.disabled,
+              ...item.live ? { icon: /* @__PURE__ */ jsx(StatusDot, { tone: "info", pulse: true }), description: item.live } : {},
+              ...!item.live && item.marker ? { description: item.marker.label } : {},
+              onSelect: () => onValueChange?.(item.value)
+            })
+          )
+        }
+      )
+    }
+  ) : null;
+  const noteNode = folding && note ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx("crewlet-tabs__note", !fold.note && "is-folded"),
+      "data-tabs-note": "",
+      ...fold.note ? {} : { "aria-hidden": true },
+      children: note
+    }
+  ) : null;
+  if (renderItem) {
+    return /* @__PURE__ */ jsxs("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: [
+      rows,
+      more,
+      noteNode,
+      folding && trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__trailing", "data-tabs-trailing": "", children: trailing }) : trailing
+    ] });
+  }
+  const list = /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
+  if (!boxed) return list;
+  return /* @__PURE__ */ jsxs("div", { ref: boxRef, className: cx("crewlet-tabs-fold", `crewlet-tabs-fold--${variant}`, className), children: [
+    list,
+    more,
+    noteNode
+  ] });
+}
+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 };

package/dist/{chunk-PAQXOP2M.js → chunk-XGBUUQDU.js}

@@ -1,7 +1,7 @@
-import { Modal } from './chunk-SVGARBDY.js';
+import { Modal } from './chunk-IAGYPTEJ.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-TYONQSOK.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';