@crewlethq/ui 0.39.0 → 0.40.0

package/dist/chunk-INVSUFJK.js

@@ -0,0 +1,71 @@
+import { SidebarNav } from './chunk-E7QLG3PG.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SectionFrame-M62UUVFQ.css';
+import { useState, useId } from 'react';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SectionFrame({ columnWidth, folded = false, className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-section-frame", className),
+      "data-folded": folded || void 0,
+      style: { "--crewlet-section-frame-column": columnWidth },
+      children
+    }
+  );
+}
+function SectionFrameNav({ scope, current, location, openOnArrival = false, children }) {
+  const [open, setOpen] = useState(openOnArrival);
+  const [openedAt, setOpenedAt] = useState(location);
+  const [picked, setPicked] = useState(null);
+  if (openedAt !== location) {
+    setOpenedAt(location);
+    setOpen(picked !== location && openOnArrival);
+    setPicked(null);
+  }
+  const listId = useId();
+  function pick(event) {
+    const link = event.target.closest("a[href]");
+    if (!link) return;
+    setOpen(false);
+    const to = link.getAttribute("href");
+    if (to !== null && to !== location) setPicked(to);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-section-frame__nav", "data-open": open || void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-section-frame__toggle",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen((was) => !was),
+        children: [
+          current?.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-section-frame__toggle-icon", "aria-hidden": "true", children: current.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-section-frame__toggle-name", children: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-section-frame__toggle-prefix", children: [
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: scope }),
+              " Section",
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: ":" })
+            ] }),
+            " ",
+            current.label
+          ] }) : `${scope} sections` }),
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs", "aria-hidden": "true", className: "crewlet-section-frame__chevron" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: listId, className: "crewlet-section-frame__list", onClick: pick, children: /* @__PURE__ */ jsx(SidebarNav, { label: `${scope} sections`, children }) })
+  ] });
+}
+function SectionFrameBody({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-section-frame__body", className), children });
+}
+SectionFrame.Nav = SectionFrameNav;
+SectionFrame.Body = SectionFrameBody;
+
+export { SectionFrame, SectionFrameBody, SectionFrameNav };

package/dist/{chunk-4LRAJXHL.js → chunk-JSWOXRRE.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { EmptyState } from './chunk-RA2ULG6H.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-DYB66CNM.js → chunk-KKNHMXTE.js}

@@ -6,7 +6,7 @@ import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';
-import './AppShell-NDU4XMGF.css';
+import './AppShell-NPSWZ3XW.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
@@ -231,10 +231,13 @@ function ShellDrawer({
     }
   );
 }
-function AppShellRail({ header, footer, className, children }) {
+function AppShellRail({ header, search, footer, className, children }) {
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-app-shell__rail-inner", className), children: [
     header ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-head", children: header }) : null,
-    /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-body", children }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-app-shell__rail-body", children: [
+      search ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-search", children: search }) : null,
+      children
+    ] }),
     footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
   ] });
 }

package/dist/{chunk-ZMDYQ2HH.js → chunk-KWWP3D7M.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-2QZ2VPHR.js';
+import { SegmentedControl } from './chunk-4OK4DX3V.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-46RL3E54.js → chunk-M6NQ4XGK.js}

@@ -1,4 +1,4 @@
-import { useRoving } from './chunk-RKKO7QHH.js';
+import { useRoving } from './chunk-EGMQURBR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './LayersList-TBNF4XGL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunk-OHGH7O6T.js

@@ -0,0 +1,19 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LockedLabel-VQEGEB7G.css';
+import { KeyGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+function LockedLabel({ children, reason, mark = true, className }) {
+  if (reason === void 0 || reason === "") return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-locked-label", className), title: reason, children: [
+    children,
+    mark ? /* @__PURE__ */ jsx(KeyGlyph, { size: "xs", "aria-hidden": "true", className: "crewlet-locked-label__key" }) : null,
+    /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+      ", ",
+      reason
+    ] })
+  ] });
+}
+
+export { LockedLabel };

package/dist/{chunk-4ISUIS6F.js → chunk-OOC7Q67K.js}

@@ -1,3 +1,3 @@
 import './HitArea-QUOS6ZDJ.css';
-import './Tabs-WIF7457H.css';
+import './Tabs-S7F4RWAN.css';
 import './SegmentedControl-B7XCUOML.css';

package/dist/{chunk-XNXK5MA4.js → chunk-PCT47E7O.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CatalogTile-TGR2ZZVQ.css';
+import './CatalogTile-XL4XLFUH.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-X3UYTAOG.js → chunk-PFZOFAQ6.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-QV4JP242.js').then(
+  loading ??= import('./Editor-IRDQ3JDZ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

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