@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-V2XMNLMS.js

@@ -0,0 +1,52 @@
+import { useAnnouncer } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TagGroup-APC2EFH4.css';
+import { useState, useRef, Children } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TagGroup({
+  label,
+  max = 6,
+  moreLabel = (hidden) => `+${hidden} more`,
+  expandedMessage = (total) => `Showing all ${total}.`,
+  className,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const announce = useAnnouncer();
+  const list = useRef(null);
+  const all = Children.toArray(children);
+  const shown = open ? all : all.slice(0, max);
+  const hidden = all.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ref: list,
+      tabIndex: -1,
+      className: cx("crewlet-tag-group", className),
+      "aria-label": `${label}, ${all.length}`,
+      children: [
+        shown.map((tag, index) => (
+          // Keyed by position: the list only ever grows at the end, as the tail
+          // is revealed, so no item ever changes the index it sits at.
+          /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: tag }, index)
+        )),
+        hidden > 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-tag-group__more",
+            onClick: () => {
+              setOpen(true);
+              list.current?.focus();
+              announce(expandedMessage(all.length));
+            },
+            children: moreLabel(hidden)
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+export { TagGroup };

package/dist/chunk-V663QU4R.js

@@ -0,0 +1,51 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+// src/utils/useClipboard.ts
+function useClipboard({ resetMs = 2e3 } = {}) {
+  const [state, setState] = useState("idle");
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const copy = useCallback(
+    async (text) => {
+      const ok = await writeClipboard(typeof text === "function" ? text() : text);
+      setState(ok ? "copied" : "failed");
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setState("idle"), resetMs);
+      return ok;
+    },
+    [resetMs]
+  );
+  return { state, copy };
+}
+async function writeClipboard(text) {
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  return execCommandCopy(text);
+}
+function execCommandCopy(text) {
+  if (typeof document === "undefined" || typeof document.execCommand !== "function") return false;
+  const field = document.createElement("textarea");
+  field.value = text;
+  field.setAttribute("readonly", "");
+  field.style.position = "fixed";
+  field.style.top = "-1000px";
+  field.style.opacity = "0";
+  const held = document.activeElement;
+  document.body.appendChild(field);
+  try {
+    field.select();
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    field.remove();
+    if (held instanceof HTMLElement && held.isConnected) held.focus();
+  }
+}
+
+export { useClipboard };

package/dist/chunk-W4ENKCXJ.js

@@ -0,0 +1,40 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Layout-2ZCV3IGF.css';
+import { jsx } from 'react/jsx-runtime';
+
+function gapClass(gap) {
+  return gap !== void 0 && `crewlet-layout--gap-${gap}`;
+}
+function flexClasses(base, { gap, align, justify, wrap }, className) {
+  return cx(
+    base,
+    gapClass(gap),
+    align && `crewlet-layout--align-${align}`,
+    justify && `crewlet-layout--justify-${justify}`,
+    wrap && "crewlet-layout--wrap",
+    className
+  );
+}
+function Stack({ gap, align, justify, wrap, as: Tag = "div", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: flexClasses("crewlet-stack", { gap, align, justify, wrap }, className), children });
+}
+function Inline({
+  gap,
+  align = "center",
+  justify,
+  wrap,
+  as: Tag = "div",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: flexClasses("crewlet-inline", { gap, align, justify, wrap }, className), children });
+}
+function Spacer({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, "aria-hidden": true, className: cx("crewlet-spacer", className) });
+}
+function AutoGrid({ min = "md", gap = 4, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx("crewlet-auto-grid", `crewlet-auto-grid--${min}`, gapClass(gap), className), children });
+}
+
+export { AutoGrid, Inline, Spacer, Stack };

package/dist/chunk-W5J7R5EB.js

@@ -0,0 +1,107 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Skeleton-V735HRGM.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var range = (n) => Array.from({ length: Math.max(0, n) }, (_, i) => i);
+var clampColumns = (n) => Math.min(4, Math.max(1, Math.round(n)));
+var line = (...modifiers) => cx("crewlet-skeleton__line", ...modifiers.map((modifier) => `crewlet-skeleton__line--${modifier}`));
+var Placeholder = ({
+  variant = "card",
+  rows = 1,
+  rowHeight,
+  columns = 1,
+  count = 4,
+  className = "",
+  style,
+  width = "100%",
+  height = 400,
+  borderRadius = 12,
+  marginTop = 32,
+  marginBottom = 0
+}) => {
+  const rootClass = (...modifiers) => cx("crewlet-skeleton", `crewlet-skeleton--${variant}`, ...modifiers, className);
+  switch (variant) {
+    case "box":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style: { marginTop, marginBottom, ...style }, "aria-hidden": true, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "crewlet-skeleton__glow-box",
+          style: {
+            height: typeof height === "number" ? `${height}px` : height,
+            width: typeof width === "number" ? `${width}px` : width,
+            borderRadius: `${borderRadius}px`
+          },
+          children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__glow-wave" })
+        }
+      ) });
+    case "text":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: line(i === 0 ? "title" : "text", ...i === rows - 1 ? ["short"] : []),
+          style: rowHeight === void 0 ? void 0 : { height: rowHeight }
+        },
+        i
+      )) });
+    case "card":
+      return /* @__PURE__ */ jsxs("div", { className: rootClass(), style, "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("div", { className: line("title") }),
+        /* @__PURE__ */ jsx("div", { className: line("text") }),
+        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+      ] });
+    case "grid": {
+      const cols = clampColumns(columns);
+      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__card", children: [
+        /* @__PURE__ */ jsx("div", { className: line("title") }),
+        /* @__PURE__ */ jsx("div", { className: line("text") }),
+        /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+      ] }, i)) });
+    }
+    case "list":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(rows).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-item", children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__avatar" }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__list-content", children: [
+          /* @__PURE__ */ jsx("div", { className: line("title") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "short") })
+        ] })
+      ] }, i)) });
+    case "table":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: /* @__PURE__ */ jsxs("table", { className: "crewlet-skeleton__table", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: range(columns).map((i) => /* @__PURE__ */ jsx("th", { className: "crewlet-skeleton__th", children: /* @__PURE__ */ jsx("div", { className: line("title") }) }, i)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: range(rows).map((rowIndex) => /* @__PURE__ */ jsx("tr", { className: "crewlet-skeleton__tr", children: range(columns).map((colIndex) => /* @__PURE__ */ jsx("td", { className: "crewlet-skeleton__td", children: /* @__PURE__ */ jsx("div", { className: line("text") }) }, colIndex)) }, rowIndex)) })
+      ] }) });
+    case "info-grid": {
+      const cols = clampColumns(columns);
+      return /* @__PURE__ */ jsx("div", { className: rootClass(`crewlet-skeleton--cols-${cols}`), style, "aria-hidden": true, children: range(rows * cols).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__info-item", children: [
+        /* @__PURE__ */ jsx("div", { className: line("label") }),
+        /* @__PURE__ */ jsx("div", { className: line("value") })
+      ] }, i)) });
+    }
+    case "pricing-card":
+      return /* @__PURE__ */ jsx("div", { className: rootClass(), style, "aria-hidden": true, children: range(count).map((i) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-header", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle" }),
+          /* @__PURE__ */ jsx("div", { className: line("heading") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-description", children: [
+          /* @__PURE__ */ jsx("div", { className: line("text") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "wide") }),
+          /* @__PURE__ */ jsx("div", { className: line("text", "three-quarter") })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__pricing-card-features", children: range(5).map((f) => /* @__PURE__ */ jsxs("div", { className: "crewlet-skeleton__pricing-card-feature", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__circle crewlet-skeleton__circle--small" }),
+          /* @__PURE__ */ jsx("div", { className: line("feature") })
+        ] }, f)) }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__button" })
+      ] }, i)) });
+    default:
+      return /* @__PURE__ */ jsx("div", { className: cx("crewlet-skeleton", className), style, "aria-hidden": true, children: /* @__PURE__ */ jsx("div", { className: "crewlet-skeleton__line" }) });
+  }
+};
+var Skeleton = ({ label, ...placeholder }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Placeholder, { ...placeholder }),
+  label === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: label }) })
+] });
+
+export { Skeleton };

package/dist/chunk-WNI2WSJF.js

@@ -0,0 +1,27 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './BrandLockup-6ISDEHPJ.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function BrandLockup({ name, mark, context, href, renderLink, className }) {
+  const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
+    mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__mark", "aria-hidden": true, children: mark }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-brand__name", children: name })
+  ] });
+  const linkProps = {
+    className: "crewlet-brand__home",
+    children: inside,
+    "aria-label": name,
+    ...href === void 0 ? {} : { href }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-brand", className), children: [
+    renderLink ? renderLink(linkProps) : href === void 0 ? (
+      // Not a link, because it goes nowhere. An anchor with no href is
+      // announced as text anyway, and one with href="#" navigates the page
+      // it is meant to be the way out of.
+      /* @__PURE__ */ jsx("span", { className: "crewlet-brand__home", children: inside })
+    ) : /* @__PURE__ */ jsx("a", { className: "crewlet-brand__home", href, "aria-label": name, children: inside }),
+    context ? /* @__PURE__ */ jsx("span", { className: "crewlet-brand__context", children: context }) : null
+  ] });
+}
+
+export { BrandLockup };

package/dist/chunk-XDTYBF2F.js

@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// src/Fullscreen/useFullscreen.ts
+function fullscreenSupported() {
+  return typeof document !== "undefined" && document.fullscreenEnabled === true && typeof Element.prototype.requestFullscreen === "function";
+}
+function useFullscreen(ref) {
+  const [supported] = useState(fullscreenSupported);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    if (!supported) return;
+    const read = () => setActive(document.fullscreenElement === ref.current);
+    read();
+    document.addEventListener("fullscreenchange", read);
+    return () => document.removeEventListener("fullscreenchange", read);
+  }, [supported, ref]);
+  const enter = useCallback(() => {
+    const element = ref.current;
+    if (!element || !supported || document.fullscreenElement === element) return;
+    void element.requestFullscreen().catch(() => {
+    });
+  }, [ref, supported]);
+  const exit = useCallback(() => {
+    if (typeof document === "undefined" || document.fullscreenElement !== ref.current) return;
+    if (typeof document.exitFullscreen !== "function") return;
+    void document.exitFullscreen().catch(() => {
+    });
+  }, [ref]);
+  const toggle = useCallback(() => {
+    if (document.fullscreenElement === ref.current) exit();
+    else enter();
+  }, [enter, exit, ref]);
+  return { supported, active, enter, exit, toggle };
+}
+
+export { useFullscreen };

package/dist/chunk-XN4JBAN3.js

@@ -0,0 +1,32 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './DescriptionList-YYY3V3O6.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DescriptionList({
+  dense = false,
+  items,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "dl",
+    {
+      ...rest,
+      className: cx("crewlet-description-list", dense && "crewlet-description-list--dense", className),
+      children: [
+        items?.map(([term, detail], index) => /* @__PURE__ */ jsx(DescriptionListItem, { term, children: detail }, index)),
+        children
+      ]
+    }
+  );
+}
+function DescriptionListItem({ term, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-description-list__pair", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "crewlet-description-list__term", children: term }),
+    /* @__PURE__ */ jsx("dd", { className: "crewlet-description-list__detail", children })
+  ] });
+}
+DescriptionList.Item = DescriptionListItem;
+
+export { DescriptionList, DescriptionListItem };

package/dist/chunk-XV6WRMBC.js

@@ -0,0 +1,211 @@
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { usePopupLayer } from './chunk-ITHXJHBB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tooltip-LKQF7CE4.css';
+import { useId, useState, useRef, useCallback, useEffect, useLayoutEffect, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from '@crewlethq/tokens';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ms(value) {
+  return Number.parseFloat(value);
+}
+function attach(ref, el) {
+  if (typeof ref === "function") {
+    const release = ref(el);
+    return typeof release === "function" ? release : () => void ref(null);
+  }
+  if (!ref) return () => {
+  };
+  const box = ref;
+  box.current = el;
+  return () => {
+    box.current = null;
+  };
+}
+var OPEN_DELAY = ms(motion.duration.slow);
+var CLOSE_DELAY = ms(motion.duration.base);
+function Tooltip({
+  content,
+  placement = "top",
+  disabled = false,
+  openDelay = OPEN_DELAY,
+  closeDelay = CLOSE_DELAY,
+  className,
+  children
+}) {
+  const id = useId();
+  const panelId = `${id}-tooltip`;
+  const [open, setOpen] = useState(false);
+  const anchor = useRef(null);
+  const panel = useRef(null);
+  const timer = useRef(void 0);
+  const over = useRef({ pointer: false, focus: false });
+  const [place, setPlace] = useState(null);
+  const container = useLayerContainer();
+  const clear = useCallback(() => {
+    if (timer.current !== void 0) clearTimeout(timer.current);
+    timer.current = void 0;
+  }, []);
+  const show = useCallback(
+    (delay) => {
+      clear();
+      if (disabled) return;
+      if (delay <= 0) {
+        setOpen(true);
+        return;
+      }
+      timer.current = setTimeout(() => setOpen(true), delay);
+    },
+    [clear, disabled]
+  );
+  const hide = useCallback(
+    (delay) => {
+      clear();
+      const leave = () => {
+        if (over.current.pointer || over.current.focus) return;
+        setOpen(false);
+      };
+      if (delay <= 0) {
+        leave();
+        return;
+      }
+      timer.current = setTimeout(leave, delay);
+    },
+    [clear]
+  );
+  const layer = usePopupLayer({ open, onDismiss: () => {
+    over.current = { pointer: false, focus: false };
+    clear();
+    setOpen(false);
+  } });
+  useEffect(() => clear, [clear]);
+  useEffect(() => {
+    if (disabled) {
+      clear();
+      setOpen(false);
+    }
+  }, [disabled, clear]);
+  const position = useCallback(() => {
+    const at = anchor.current;
+    const box = panel.current;
+    if (!at || !box || !container) return;
+    const inHost = container !== document.body;
+    const host = inHost ? container.getBoundingClientRect() : viewportBounds();
+    const rect = at.getBoundingClientRect();
+    const own = box.getBoundingClientRect();
+    const local = {
+      x: rect.x + rect.width / 2 - own.width / 2 - (inHost ? host.x : 0),
+      y: rect.y - (inHost ? host.y : 0),
+      width: rect.width,
+      height: rect.height
+    };
+    const whole = { x: 0, y: 0, width: host.width, height: host.height };
+    const bounds = {
+      x: LAYER_GAP,
+      y: LAYER_GAP,
+      width: host.width - 2 * LAYER_GAP,
+      height: host.height - 2 * LAYER_GAP
+    };
+    if (outsideBounds({ ...local, x: rect.x - (inHost ? host.x : 0) }, whole)) {
+      setOpen(false);
+      return;
+    }
+    const spot = placePopup(local, { width: own.width, height: own.height }, bounds, LAYER_GAP, placement === "top" ? "above" : "below");
+    setPlace(
+      (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side ? was : spot
+    );
+  }, [container, placement]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    position();
+    const onLayout = () => position();
+    container?.addEventListener(LAYER_REPOSITION_EVENT, onLayout);
+    window.addEventListener("resize", onLayout);
+    window.addEventListener("scroll", onLayout, true);
+    return () => {
+      container?.removeEventListener(LAYER_REPOSITION_EVENT, onLayout);
+      window.removeEventListener("resize", onLayout);
+      window.removeEventListener("scroll", onLayout, true);
+    };
+  }, [open, container, position]);
+  useEffect(() => {
+    if (!open) setPlace(null);
+  }, [open]);
+  const child = children;
+  const describedBy = child.props["aria-describedby"];
+  const ownRef = child.props["ref"];
+  const trigger = cloneElement(child, {
+    ref: (el) => {
+      anchor.current = el;
+      layer.insideRef(el);
+      const release = attach(ownRef, el);
+      return () => {
+        anchor.current = null;
+        layer.insideRef(null);
+        release();
+      };
+    },
+    "aria-describedby": open ? cx(describedBy, panelId) : describedBy,
+    onPointerEnter: (event) => {
+      over.current.pointer = true;
+      show(openDelay);
+      child.props["onPointerEnter"]?.(event);
+    },
+    onPointerLeave: (event) => {
+      over.current.pointer = false;
+      hide(closeDelay);
+      child.props["onPointerLeave"]?.(event);
+    },
+    // Focus opens with NO delay: a keyboard reader who reached this control
+    // asked for it, and there is no pointer passing over anything.
+    onFocus: (event) => {
+      over.current.focus = true;
+      show(0);
+      child.props["onFocus"]?.(event);
+    },
+    onBlur: (event) => {
+      over.current.focus = false;
+      hide(0);
+      child.props["onBlur"]?.(event);
+    }
+  });
+  const style = place ? { left: place.left, top: place.top, zIndex: layer.zIndex } : (
+    // Laid out but not painted: the panel has to have a size before it can be
+    // placed, and a panel drawn at the layer's corner for one frame is a flash.
+    { visibility: "hidden", zIndex: layer.zIndex }
+  );
+  const panelNode = open ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (el) => {
+        panel.current = el;
+        layer.panelRef(el);
+      },
+      id: panelId,
+      role: "tooltip",
+      className: cx(
+        "crewlet-tooltip",
+        `crewlet-tooltip--${place?.side ?? (placement === "top" ? "above" : "below")}`,
+        container !== null && container !== document.body ? "crewlet-tooltip--in-host" : "crewlet-tooltip--fixed",
+        className
+      ),
+      style,
+      onPointerEnter: () => {
+        over.current.pointer = true;
+        clear();
+      },
+      onPointerLeave: () => {
+        over.current.pointer = false;
+        hide(closeDelay);
+      },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    panelNode && container ? createPortal(panelNode, container) : null
+  ] });
+}
+
+export { Tooltip };

package/dist/chunk-YLYOWZ4V.js

@@ -0,0 +1,33 @@
+import { useAnnouncer } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './NewItemsNotice-T4DSSPVV.css';
+import { useRef, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var plural = (count, noun) => `${count} ${noun}${count === 1 ? "" : "s"}`;
+function NewItemsNotice({
+  count,
+  noun,
+  onShow,
+  label = (n, word) => `Show ${plural(n, word)} that finished while you were reading`,
+  announcement = (n, word) => `${plural(n, word)} finished while you were reading.`,
+  className,
+  ...rest
+}) {
+  const announce = useAnnouncer();
+  const showing = count > 0;
+  const said = useRef(false);
+  useEffect(() => {
+    if (!showing) {
+      said.current = false;
+      return;
+    }
+    if (said.current) return;
+    said.current = true;
+    announce(announcement(count, noun));
+  }, [showing, count, noun, announce, announcement]);
+  if (!showing) return null;
+  return /* @__PURE__ */ jsx("button", { ...rest, type: "button", className: cx("crewlet-new-items", className), onClick: onShow, children: label(count, noun) });
+}
+
+export { NewItemsNotice };