@camstack/ui-library 1.2.261 → 1.2.262

package/dist/composites/role-node-pill.d.ts

@@ -1,14 +1,21 @@
 /**
-* RoleNodePill — one pipeline role and the node that hosts it, tinted by that
-* node's palette colour (agent-settings `color`, else stable hash).
+* RoleNodePill — a node tinted by its palette colour (agent-settings `color`,
+* else stable hash). With a `roleLabel`, shows role · node · colour (Assignments).
+* Without, colour icon + name only (Nodes selector and similar).
 */
 import type { NodeColorId } from "@camstack/types";
-import type { JSX } from "react";
+import type { JSX, ReactNode } from "react";
 export interface RoleNodePillProps {
-	readonly roleLabel: string;
+	/** When omitted, the pill is colour icon + node name only. */
+	readonly roleLabel?: string;
 	readonly nodeName: string;
 	readonly colorId: NodeColorId;
 	readonly emphasized?: boolean;
 	readonly pinned?: boolean;
+	/** When set, the pill is a selectable control (`role="tab"`). */
+	readonly onSelect?: () => void;
+	readonly disabled?: boolean;
+	/** Extra trailing content inside the pill (e.g. "offline"). */
+	readonly trailing?: ReactNode;
 }
-export declare function RoleNodePill({ roleLabel, nodeName, colorId, emphasized, pinned }: RoleNodePillProps): JSX.Element;
+export declare function RoleNodePill({ roleLabel, nodeName, colorId, emphasized, pinned, onSelect, disabled, trailing }: RoleNodePillProps): JSX.Element;

package/dist/index.cjs

@@ -32854,26 +32854,51 @@ var NODE_RING_CLASS = {
 	"node-g": "ring-node-g/45",
 	"node-h": "ring-node-h/45"
 };
-function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false, onSelect, disabled = false, trailing }) {
+	const title = roleLabel !== void 0 ? pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}` : nodeName;
+	const className = cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId]), onSelect !== void 0 && !disabled && "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", disabled && "cursor-not-allowed opacity-50");
+	const colorIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)),
+		"aria-hidden": true
+	});
+	const body = roleLabel !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pin, {
+			className: "h-2.5 w-2.5 shrink-0 opacity-80",
+			"aria-label": "pinned"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "shrink-0",
+			children: roleLabel
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			children: nodeName
+		}),
+		colorIcon
+	] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		colorIcon,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("min-w-0 truncate font-medium", emphasized ? nodeTextColorClass(colorId) : "text-foreground"),
+			children: nodeName
+		}),
+		trailing
+	] });
+	if (onSelect !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
-		title: pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}`,
-		className: cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId])),
-		children: [
-			pinned && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Pin, {
-				className: "h-2.5 w-2.5 shrink-0 opacity-80",
-				"aria-label": "pinned"
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "shrink-0",
-				children: roleLabel
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
-				children: nodeName
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)) })
-		]
+		title,
+		disabled,
+		onClick: onSelect,
+		className,
+		children: body
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-testid": "role-node-pill",
+		title,
+		className,
+		children: body
 	});
 }
 //#endregion

package/dist/index.js

@@ -32830,26 +32830,51 @@ var NODE_RING_CLASS = {
 	"node-g": "ring-node-g/45",
 	"node-h": "ring-node-h/45"
 };
-function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false }) {
-	return /* @__PURE__ */ jsxs("span", {
+function RoleNodePill({ roleLabel, nodeName, colorId, emphasized = false, pinned = false, onSelect, disabled = false, trailing }) {
+	const title = roleLabel !== void 0 ? pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}` : nodeName;
+	const className = cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId]), onSelect !== void 0 && !disabled && "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40", disabled && "cursor-not-allowed opacity-50");
+	const colorIcon = /* @__PURE__ */ jsx("span", {
+		className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)),
+		"aria-hidden": true
+	});
+	const body = roleLabel !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		pinned && /* @__PURE__ */ jsx(Pin, {
+			className: "h-2.5 w-2.5 shrink-0 opacity-80",
+			"aria-label": "pinned"
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: roleLabel
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
+			children: nodeName
+		}),
+		colorIcon
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		colorIcon,
+		/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate font-medium", emphasized ? nodeTextColorClass(colorId) : "text-foreground"),
+			children: nodeName
+		}),
+		trailing
+	] });
+	if (onSelect !== void 0) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "tab",
+		"aria-selected": emphasized,
 		"data-testid": "role-node-pill",
-		title: pinned ? `${roleLabel} pinned on ${nodeName}` : `${roleLabel} on ${nodeName}`,
-		className: cn("inline-flex max-w-full items-center gap-1 rounded-full px-2 py-0.5 text-[10px] leading-tight ring-1 ring-inset", emphasized ? cn("role-node-pill-emphasized font-semibold ring-2", NODE_BG_EMPHASIZED_CLASS[colorId], NODE_RING_CLASS[colorId], nodeTextColorClass(colorId)) : cn("font-medium text-foreground-muted ring-border/60", NODE_BG_SOFT_CLASS[colorId])),
-		children: [
-			pinned && /* @__PURE__ */ jsx(Pin, {
-				className: "h-2.5 w-2.5 shrink-0 opacity-80",
-				"aria-label": "pinned"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "shrink-0",
-				children: roleLabel
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: cn("min-w-0 truncate", emphasized ? nodeTextColorClass(colorId) : "text-foreground-subtle"),
-				children: nodeName
-			}),
-			/* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 shrink-0 rounded-full", nodeColorClass(colorId)) })
-		]
+		title,
+		disabled,
+		onClick: onSelect,
+		className,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("span", {
+		"data-testid": "role-node-pill",
+		title,
+		className,
+		children: body
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.261",
+  "version": "1.2.262",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",