@crewlethq/ui 0.17.1 → 0.18.0

package/dist/chunk-YM3GJHGW.js

@@ -0,0 +1,69 @@
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { presenceLabels, presenceOrder } from './chunk-S35G6PNC.js';
+import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenceStack-QSXQJND5.css';
+import { isCrewletCharacter } from '@crewlethq/icons/characters';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PresenceStack({ members, self = true, max = 4, size = "sm", onSelect, label, labels, className }) {
+  if (!Number.isInteger(max) || max < 1) {
+    throw new RangeError(`PresenceStack max must be a whole number of at least 1; it was ${max}`);
+  }
+  const text = presenceLabels(labels);
+  const ordered = presenceOrder(members);
+  if (ordered.length === 0 && !self) return null;
+  const shown = ordered.slice(0, max);
+  const hidden = ordered.slice(max);
+  const here = label ?? text.here(ordered.length, self);
+  const spoken = [here, ...ordered.map((member) => text.member(member))].join(". ");
+  const badge = (member) => /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      name: member.name,
+      kind: member.kind,
+      src: member.src,
+      character: member.character !== void 0 && isCrewletCharacter(member.character) ? member.character : void 0,
+      hue: member.kind === "agent" ? member.hue : void 0,
+      size,
+      decorative: true,
+      className: cx(
+        "crewlet-presence-stack__badge",
+        member.hue !== void 0 && member.activity !== "idle" && presenceHueClass(member.hue),
+        member.hue !== void 0 && member.activity !== "idle" && "crewlet-presence-stack__badge--present",
+        member.activity === "idle" && "crewlet-presence-stack__badge--idle"
+      )
+    }
+  );
+  const more = hidden.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
+    "+",
+    hidden.length
+  ] }) : null;
+  const style = { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px` };
+  if (onSelect === void 0) {
+    if (ordered.length === 0) return null;
+    return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-avatar-stack", "crewlet-presence-stack", className), style, role: "img", "aria-label": spoken, children: [
+      shown.map((member) => /* @__PURE__ */ jsx("span", { className: cx("crewlet-avatar-stack__member", "crewlet-presence-stack__member", `crewlet-presence-stack__member--${member.kind}`), children: badge(member) }, member.id)),
+      more
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-avatar-stack", "crewlet-presence-stack", className), style, role: "group", "aria-label": here, children: [
+    shown.map((member) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("crewlet-avatar-stack__member", "crewlet-presence-stack__member", `crewlet-presence-stack__member--${member.kind}`),
+        "aria-label": text.member(member),
+        title: text.member(member),
+        onClick: () => onSelect(member),
+        children: badge(member)
+      },
+      member.id
+    )),
+    more,
+    hidden.length > 0 ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `${text.more(hidden.length)}: ${hidden.map((member) => text.member(member)).join(", ")}` }) : null
+  ] });
+}
+
+export { PresenceStack };