@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-2PRH365R.js

@@ -0,0 +1,74 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Checkbox-VGW26YLQ.css';
+import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Checkbox = forwardRef(function Checkbox2({
+  label,
+  description,
+  tone = "default",
+  framed = false,
+  indeterminate = false,
+  onCheckedChange,
+  onChange,
+  className = "",
+  disabled,
+  id,
+  "aria-describedby": describedBy,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const labelId = `${inputId}-label`;
+  const descriptionId = description ? `${inputId}-description` : void 0;
+  const box = useRef(null);
+  const attach = useCallback(
+    (el) => {
+      box.current = el;
+      if (el) el.indeterminate = indeterminate;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref, indeterminate]
+  );
+  useEffect(() => {
+    if (box.current) box.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cx(
+        "crewlet-checkbox",
+        tone === "danger" && "crewlet-checkbox--danger",
+        framed && "crewlet-checkbox--framed",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: attach,
+            id: inputId,
+            type: "checkbox",
+            className: "crewlet-checkbox__control",
+            disabled,
+            "aria-labelledby": labelId,
+            "aria-describedby": cx(descriptionId, describedBy) || void 0,
+            onChange: (event) => {
+              onChange?.(event);
+              onCheckedChange?.(event.target.checked);
+            },
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-checkbox__text", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__label", id: labelId, children: label }),
+          description ? /* @__PURE__ */ jsx("span", { className: "crewlet-checkbox__description", id: descriptionId, children: description }) : null
+        ] })
+      ]
+    }
+  );
+});
+
+export { Checkbox };

package/dist/chunk-2ZQMA2WB.js

@@ -0,0 +1,57 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Link-6BEFNMN2.css';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { OpenInNewGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var Link = forwardRef(function Link2({
+  variant = "default",
+  size = "body",
+  external = false,
+  newTabLabel = "(opens in a new tab)",
+  block = false,
+  asChild = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = cx(
+    "crewlet-link",
+    `crewlet-link--${variant}`,
+    `crewlet-link--${size}`,
+    block && "crewlet-link--block",
+    className
+  );
+  const externalMark = external ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(OpenInNewGlyph, { className: "crewlet-link__external", size: "sm" }),
+    " ",
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: newTabLabel })
+  ] }) : null;
+  const externalAttributes = external ? { target: "_blank", rel: "noreferrer" } : { target: rest.target, rel: rest.rel };
+  if (asChild) {
+    const child = Children.only(children);
+    if (!isValidElement(child)) {
+      throw new Error("Link with asChild expects exactly one valid React element child.");
+    }
+    const childEl = child;
+    return cloneElement(
+      childEl,
+      {
+        ...rest,
+        ...externalAttributes,
+        className: cx(childEl.props["className"], classes)
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        childEl.props["children"],
+        externalMark
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxs("a", { ...rest, ...externalAttributes, ref, className: classes, children: [
+    children,
+    externalMark
+  ] });
+});
+
+export { Link };

package/dist/chunk-3CZ7XAVY.js

@@ -0,0 +1,139 @@
+import { EmptyValue } from './chunk-EUCC37WY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './RelativeTime-EBAQPGO2.css';
+import { useSyncExternalStore } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var now = Date.now();
+var listeners = /* @__PURE__ */ new Set();
+var timer = 0;
+function tick() {
+  now = Date.now();
+  for (const listener of [...listeners]) listener();
+}
+function onVisible() {
+  if (document.visibilityState === "visible") tick();
+}
+function start() {
+  if (timer) return;
+  timer = setInterval(() => {
+    if (typeof document === "undefined" || document.visibilityState === "visible") tick();
+  }, 1e3);
+  if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisible);
+}
+function stop() {
+  if (!timer) return;
+  clearInterval(timer);
+  timer = 0;
+  if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisible);
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  start();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) stop();
+  };
+}
+function useNow() {
+  return useSyncExternalStore(
+    subscribe,
+    () => now,
+    () => now
+  );
+}
+function currentNow() {
+  return now;
+}
+
+// src/RelativeTime/format.ts
+var SECOND = 1e3;
+var MINUTE = 60;
+var HOUR = 60 * MINUTE;
+var DAY = 24 * HOUR;
+var RELATIVE_DAYS = 30;
+function toInstant(value) {
+  if (value === null || value === void 0 || value === "") return null;
+  if (value instanceof Date) {
+    const at2 = value.getTime();
+    return Number.isNaN(at2) ? null : at2;
+  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  const text = /[zZ]|[+-]\d\d:?\d\d$/.test(value) ? value : `${value}Z`;
+  const at = Date.parse(text);
+  return Number.isNaN(at) ? null : at;
+}
+function onDate(at) {
+  return new Date(at).toLocaleDateString(void 0, { year: "numeric", month: "short", day: "2-digit" });
+}
+function formatRelative(value, now2) {
+  const at = toInstant(value);
+  if (at === null) return null;
+  const seconds = Math.round((now2 - at) / SECOND);
+  if (seconds < 0) return formatUntil(value, now2);
+  if (seconds < 5) return "just now";
+  if (seconds < MINUTE) return `${seconds}s ago`;
+  const minutes = Math.floor(seconds / MINUTE);
+  if (minutes < MINUTE) return `${minutes}m ago`;
+  const hours = Math.floor(seconds / HOUR);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(seconds / DAY);
+  if (days < RELATIVE_DAYS) return `${days}d ago`;
+  return onDate(at);
+}
+function formatUntil(value, now2) {
+  const at = toInstant(value);
+  if (at === null) return null;
+  const seconds = Math.round((at - now2) / SECOND);
+  if (seconds <= 0) return "due";
+  if (seconds < MINUTE) return `in ${seconds}s`;
+  const minutes = Math.floor(seconds / MINUTE);
+  if (minutes < MINUTE) return `in ${minutes}m`;
+  const hours = Math.floor(seconds / HOUR);
+  if (hours < 24) return `in ${hours}h`;
+  return `in ${Math.floor(seconds / DAY)}d`;
+}
+function formatElapsed(value, now2) {
+  const at = toInstant(value);
+  if (at === null) return null;
+  const seconds = Math.max(0, Math.round((now2 - at) / SECOND));
+  if (seconds < MINUTE) return `${seconds}s`;
+  const minutes = Math.floor(seconds / MINUTE);
+  if (minutes < MINUTE) return `${minutes}m ${seconds % MINUTE}s`;
+  const hours = Math.floor(seconds / HOUR);
+  return `${hours}h ${Math.floor(seconds % HOUR / MINUTE)}m`;
+}
+function formatExact(value) {
+  const at = toInstant(value);
+  if (at === null) return null;
+  return new Date(at).toLocaleString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+}
+function toISO(value) {
+  const at = toInstant(value);
+  return at === null ? null : new Date(at).toISOString();
+}
+function RelativeTime({
+  value,
+  mode = "relative",
+  now: now2,
+  emptyLabel = "Not reported",
+  className,
+  ...rest
+}) {
+  const ticking = useNow();
+  const at = now2 ?? ticking;
+  const iso = toISO(value);
+  const text = mode === "elapsed" ? formatElapsed(value, at) : formatRelative(value, at);
+  if (iso === null || text === null) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  return /* @__PURE__ */ jsx("time", { ...rest, className: cx("crewlet-relative-time", className), dateTime: iso, title: formatExact(value) ?? iso, children: text });
+}
+
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow };

package/dist/chunk-3EYF6HKB.js

@@ -0,0 +1,135 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SidebarNav-QGSFKZYA.css';
+import { useId, useState } from 'react';
+import { KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function SidebarNav({ label, className, children }) {
+  return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
+}
+function NavGroup({ label, className, children }) {
+  const id = useId();
+  const named = label !== void 0 && label !== null && label !== false && label !== "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-nav-group", className),
+      role: named ? "group" : void 0,
+      "aria-labelledby": named ? id : void 0,
+      children: [
+        named ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-group__label", id, children: label }) : null,
+        children
+      ]
+    }
+  );
+}
+function NavItem({
+  label,
+  icon,
+  badge,
+  badgeTone = "neutral",
+  href,
+  current = false,
+  disabledReason,
+  renderLink,
+  onClick,
+  children,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  expandLabel,
+  className
+}) {
+  const id = useId();
+  const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);
+  const open = expanded ?? ownExpanded;
+  const nested = children !== void 0 && children !== null && children !== false;
+  const inert = disabledReason !== void 0;
+  function toggle() {
+    const next = !open;
+    if (expanded === void 0) setOwnExpanded(next);
+    onExpandedChange?.(next);
+  }
+  const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__icon", "aria-hidden": true, children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__label", children: label }),
+    badge ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__badge", badgeTone === "attention" && "crewlet-nav-item__badge--attention"), children: badge }) : null
+  ] });
+  const rowClass = "crewlet-nav-item__row";
+  let row;
+  if (inert) {
+    row = /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: rowClass,
+        role: "link",
+        "aria-disabled": "true",
+        "aria-describedby": `${id}-reason`,
+        tabIndex: 0,
+        title: disabledReason,
+        children: inside
+      }
+    );
+  } else if (renderLink) {
+    row = renderLink({
+      className: rowClass,
+      children: inside,
+      ...href === void 0 ? {} : { href },
+      ...current ? { "aria-current": "page" } : {},
+      ...onClick === void 0 ? {} : { onClick }
+    });
+  } else if (href !== void 0) {
+    row = /* @__PURE__ */ jsx("a", { className: rowClass, href, "aria-current": current ? "page" : void 0, onClick, children: inside });
+  } else {
+    row = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: rowClass,
+        "aria-current": current ? "page" : void 0,
+        "aria-expanded": nested ? open : void 0,
+        "aria-controls": nested ? `${id}-children` : void 0,
+        onClick: (event) => {
+          onClick?.(event);
+          if (nested) toggle();
+        },
+        children: [
+          inside,
+          nested ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) }) : null
+        ]
+      }
+    );
+  }
+  const separateToggle = nested && (renderLink !== void 0 || href !== void 0) && !inert;
+  return (
+    // NO SECOND MARK OF THE CURRENT ROW HERE. The style is drawn from
+    // `aria-current` on the row itself, which is what keeps the picture and
+    // what a screen reader is told from coming apart; a `data-current` beside
+    // it would be a second answer to one question, and the first stylesheet to
+    // read the wrong one is the one that disagrees.
+    /* @__PURE__ */ jsxs("div", { className: cx("crewlet-nav-item", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-item__head", children: [
+        row,
+        separateToggle ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-nav-item__toggle",
+            "aria-expanded": open,
+            "aria-controls": `${id}-children`,
+            "aria-label": expandLabel ?? (typeof label === "string" ? `${label} sections` : "Sections"),
+            onClick: toggle,
+            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) })
+          }
+        ) : null
+      ] }),
+      inert ? /* @__PURE__ */ jsx(VisuallyHidden, { id: `${id}-reason`, children: disabledReason }) : null,
+      nested ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-item__children", id: `${id}-children`, hidden: !open, children }) : null
+    ] })
+  );
+}
+SidebarNav.Group = NavGroup;
+SidebarNav.Item = NavItem;
+
+export { NavGroup, NavItem, SidebarNav };

package/dist/chunk-3ZP55QZE.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Callout-S7QDWHDL.css';
+import { ErrorGlyph, WarningGlyph, CheckCircleGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var GLYPHS = {
+  neutral: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  info: /* @__PURE__ */ jsx(InfoGlyph, { size: "md" }),
+  success: /* @__PURE__ */ jsx(CheckCircleGlyph, { size: "md" }),
+  warning: /* @__PURE__ */ jsx(WarningGlyph, { size: "md" }),
+  danger: /* @__PURE__ */ jsx(ErrorGlyph, { size: "md" })
+};
+var Callout = ({
+  variant = "info",
+  title,
+  icon,
+  layout = "card",
+  action,
+  live,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    ...rest,
+    "aria-live": live,
+    className: cx("crewlet-callout", `crewlet-callout--${variant}`, `crewlet-callout--${layout}`, className),
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-callout__icon", "aria-hidden": true, children: icon ?? GLYPHS[variant] }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-callout__content", children: [
+        title ? /* @__PURE__ */ jsx("span", { className: "crewlet-callout__title", children: title }) : null,
+        children
+      ] }),
+      action ? /* @__PURE__ */ jsx("div", { className: "crewlet-callout__action", children: action }) : null
+    ]
+  }
+);
+
+export { Callout };

package/dist/chunk-53DVJCVW.js

@@ -0,0 +1,14 @@
+import { useLayerContainer } from './chunk-7RPGY3JE.js';
+import { useRef, useLayoutEffect } from 'react';
+
+function LayerNodeBridge({ onNode }) {
+  const container = useLayerContainer();
+  const report = useRef(onNode);
+  report.current = onNode;
+  useLayoutEffect(() => {
+    report.current(container && container !== document.body ? container : null);
+  }, [container]);
+  return null;
+}
+
+export { LayerNodeBridge };

package/dist/chunk-5C5YMZQU.js

@@ -0,0 +1,51 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './OrgLabel-D7U6QJZD.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function OrgLabel(props) {
+  const { layout = "node", icon, iconRing = "none", iconSize = "md", className } = props;
+  const zone = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        "crewlet-org-label__icon",
+        iconRing === "dashed" && "crewlet-org-label__icon--dashed",
+        iconSize === "lg" && "crewlet-org-label__icon--lg"
+      ),
+      "aria-hidden": "true",
+      children: icon
+    }
+  );
+  if (layout === "row") {
+    return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-org-label", "crewlet-org-label--row", className), "data-tone": props.tone, children: [
+      zone,
+      /* @__PURE__ */ jsx(Words, { ...props }),
+      /* @__PURE__ */ jsx(Slot, { trailing: props.trailing })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    zone,
+    /* @__PURE__ */ jsx(Words, { ...props, className }),
+    /* @__PURE__ */ jsx(Slot, { trailing: props.trailing })
+  ] });
+}
+function Words({
+  name,
+  caption,
+  captionMarks,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-org-label__text", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-org-label__name", children: name }),
+    (caption !== void 0 || captionMarks !== void 0) && /* @__PURE__ */ jsxs("span", { className: "crewlet-org-label__caption", children: [
+      caption !== void 0 && /* @__PURE__ */ jsx("span", { className: "crewlet-org-label__kind", children: caption }),
+      captionMarks
+    ] })
+  ] });
+}
+function Slot({ trailing }) {
+  if (trailing === void 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-org-label__trailing", children: trailing });
+}
+
+export { OrgLabel };

package/dist/chunk-5EKIWVOR.js

@@ -0,0 +1,132 @@
+import { isComposing } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Toolbar-IP6LXN45.css';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var COMPOSITE = [
+  '[role="radiogroup"]',
+  '[role="tablist"]',
+  '[role="listbox"]',
+  '[role="menu"]',
+  '[role="menubar"]',
+  '[role="tree"]',
+  '[role="grid"]',
+  '[role="toolbar"]'
+].join(",");
+var FIELD = 'input:not([type="checkbox"]):not([type="radio"]):not([type="button"]),textarea,select';
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[contenteditable="true"]',
+  "[tabindex]"
+].join(",");
+function candidates(root) {
+  return [...root.querySelectorAll(FOCUSABLE)].filter(
+    (element) => !element.disabled && !element.closest("[hidden],[inert]") && // Rendered, where the browser can say so: a control the narrow layout
+    // has hidden is not a stop the arrows may land on.
+    (typeof element.checkVisibility !== "function" || element.checkVisibility())
+  );
+}
+function toolbarStops(root) {
+  const stops = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const element of candidates(root)) {
+    const owner = element.closest(COMPOSITE);
+    if (!owner || owner === root) {
+      stops.push({ focus: element, owned: [element] });
+      continue;
+    }
+    if (seen.has(owner)) continue;
+    seen.add(owner);
+    const inside = candidates(owner);
+    const chosen = inside.find((el) => el.getAttribute("tabindex") === "0") ?? inside.find((el) => el.getAttribute("aria-checked") === "true" || el.getAttribute("aria-selected") === "true") ?? inside[0] ?? element;
+    stops.push({ focus: chosen, owned: inside.length > 0 ? inside : [element] });
+  }
+  return stops;
+}
+function stopHolding(stops, active) {
+  if (!active) return -1;
+  return stops.findIndex((stop) => stop.owned.some((el) => el === active || el.contains(active)));
+}
+function Toolbar({ label, mode = "toolbar", sticky = false, className, children, ...rest }) {
+  const root = useRef(null);
+  const [at, setAt] = useState(0);
+  const roving = mode === "toolbar";
+  useEffect(() => {
+    const element = root.current;
+    if (!element || !roving) return;
+    const stops = toolbarStops(element);
+    if (stops.length === 0) return;
+    const active = Math.min(at, stops.length - 1);
+    stops.forEach((stop, index) => {
+      for (const owned of stop.owned) owned.tabIndex = index === active && owned === stop.focus ? 0 : -1;
+    });
+  });
+  const onFocus = useCallback(
+    (event) => {
+      const element = root.current;
+      if (!element || !roving) return;
+      const index = stopHolding(toolbarStops(element), event.target);
+      if (index >= 0) setAt(index);
+    },
+    [roving]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      const element = root.current;
+      if (!element || !roving || event.defaultPrevented || isComposing(event)) return;
+      const key = event.key;
+      if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "Home" && key !== "End") return;
+      const target = event.target;
+      if (target.matches(FIELD) || target.closest('[data-toolbar-keys="own"]')) return;
+      const stops = toolbarStops(element);
+      if (stops.length === 0) return;
+      const here = stopHolding(stops, target);
+      if (here < 0) return;
+      if (key === "ArrowLeft" || key === "ArrowRight") {
+        const inside = stops[here]?.owned ?? [];
+        const position = inside.indexOf(target);
+        if (inside.length > 1 && position >= 0) {
+          if (key === "ArrowRight" && position < inside.length - 1) return;
+          if (key === "ArrowLeft" && position > 0) return;
+        }
+      }
+      const last = stops.length - 1;
+      const next = key === "Home" ? 0 : key === "End" ? last : key === "ArrowRight" ? (here + 1) % stops.length : (here - 1 + stops.length) % stops.length;
+      const stop = stops[next];
+      if (!stop) return;
+      event.preventDefault();
+      setAt(next);
+      stop.focus.focus();
+    },
+    [roving]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: root,
+      className: cx("crewlet-toolbar", sticky && "crewlet-toolbar--sticky", className),
+      role: roving ? "toolbar" : "group",
+      "aria-label": label,
+      "aria-orientation": roving ? "horizontal" : void 0,
+      onKeyDown,
+      onFocus,
+      children
+    }
+  );
+}
+function ToolbarWide({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-toolbar__wide", className), children });
+}
+function ToolbarOverflow({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-toolbar__overflow", className), children });
+}
+Toolbar.Wide = ToolbarWide;
+Toolbar.Overflow = ToolbarOverflow;
+
+export { Toolbar, ToolbarOverflow, ToolbarWide };