@camstack/ui-library 1.2.331 → 1.2.332

package/dist/composites/grouped-tile-picker.d.ts

@@ -1,20 +1,17 @@
-/**
-* `GroupedTilePicker` — choose ONE "type of thing" from tiles grouped by who
-* provides it (an AI profile kind, a notification-target kind…): an uppercase
-* group label, then a grid of icon + label tiles. The pre-modal of a
-* create-flow whose form depends on the choice.
-*
-* The tile is deliberately not a `Button`: a vertical icon-over-label card in
-* a grid, which toolbar-button chrome fights. One place owns that look so the
-* pickers stay identical.
-*/
-import type { JSX, ReactNode } from "react";
+import { type JSX, type ReactNode } from "react";
 export interface TilePickerTile {
 	/** Unique within the picker; handed back to `onPick`. */
 	readonly key: string;
 	readonly label: string;
 	readonly icon: ReactNode;
 	readonly testId?: string;
+	/**
+	* Extra facts for the tile (supported operations, a shared-capability list).
+	* A tap target beside the name — it does not choose the tile.
+	*/
+	readonly detail?: ReactNode;
+	/** Accessible name of the detail control. Required when `detail` is set. */
+	readonly detailLabel?: string;
 }
 export interface TilePickerGroup {
 	readonly id: string;

package/dist/index.cjs

@@ -14504,6 +14504,9 @@ function AccountSignInField({ field, values, disabled, onAction, onChangeMany })
 		if (Object.keys(patch).length > 0) onChangeMany?.(patch);
 		const nextChoices = choicesOf(result["choices"]);
 		setChoices(nextChoices.length > 1 ? nextChoices : []);
+		const picked = typeof result["gatewayId"] === "string" && result["gatewayId"].length > 0;
+		const summary = typeof result["summary"] === "string" ? result["summary"] : null;
+		if (summary !== null && !picked && nextChoices.length < 2) setError(summary);
 		setPhase("idle");
 		setPaste("");
 		setAttemptId(null);
@@ -31013,13 +31016,13 @@ function InfoBox({ field }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: `rounded-md border-l-4 px-3 py-2.5 ${styles.border} ${styles.bg}`,
 			children: [field.label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: `text-xs font-semibold mb-0.5 ${styles.text}`,
+				className: field.content.length > 0 ? `text-xs font-semibold mb-0.5 ${styles.text}` : "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line break-words",
 				children: field.label
 			}), isHtml ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "text-xs text-foreground-subtle leading-relaxed info-html-content",
 				dangerouslySetInnerHTML: { __html: sanitizeInfoHtml(field.content) }
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line",
+			}) : field.content.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line break-words",
 				children: field.content
 			})]
 		})
@@ -61148,28 +61151,61 @@ function FormField$1({ label, description, error, required, children, orientatio
 }
 //#endregion
 //#region src/composites/grouped-tile-picker.tsx
+/**
+* `GroupedTilePicker` — choose ONE "type of thing" from tiles grouped by who
+* provides it (an AI profile kind, a notification-target kind…): an uppercase
+* group label, then a grid of icon + label tiles. The pre-modal of a
+* create-flow whose form depends on the choice.
+*
+* The tile is deliberately not a `Button`: a vertical icon-over-label card in
+* a grid, which toolbar-button chrome fights. One place owns that look so the
+* pickers stay identical.
+*/
 function GroupedTilePicker({ groups, onPick, emptyMessage }) {
+	const [openKey, setOpenKey] = (0, react$1.useState)(null);
+	const openTile = openKey === null ? null : groups.flatMap((group) => group.tiles).find((tile) => tile.key === openKey) ?? null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-4",
-		children: [groups.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "text-xs text-foreground-subtle",
-			children: emptyMessage
-		}), groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
-			children: group.label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
-			children: group.tiles.map((tile) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				type: "button",
-				"data-testid": tile.testId,
-				onClick: () => onPick(tile.key),
-				className: "flex flex-col items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-3 text-xs transition-colors hover:border-primary/50 hover:bg-surface-hover",
-				children: [tile.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "text-center font-medium text-foreground",
-					children: tile.label
-				})]
-			}, tile.key))
-		})] }, group.id))]
+		children: [
+			groups.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-xs text-foreground-subtle",
+				children: emptyMessage
+			}),
+			groups.map((group) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
+				children: group.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
+				children: group.tiles.map((tile) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						"data-testid": tile.testId,
+						onClick: () => onPick(tile.key),
+						className: "flex h-full w-full flex-col items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-3 text-xs transition-colors hover:border-primary/50 hover:bg-surface-hover",
+						children: [tile.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-center font-medium text-foreground",
+							children: tile.label
+						})]
+					}), tile.detail !== void 0 && tile.detailLabel !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "absolute top-1 right-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							icon: Info,
+							"aria-label": tile.detailLabel,
+							onClick: () => setOpenKey((current) => current === tile.key ? null : tile.key)
+						})
+					})]
+				}, tile.key))
+			})] }, group.id)),
+			openTile?.detail !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomSheet, {
+				open: true,
+				onClose: () => setOpenKey(null),
+				children: openTile.detail
+			})
+		]
 	});
 }
 //#endregion

package/dist/index.js

@@ -14480,6 +14480,9 @@ function AccountSignInField({ field, values, disabled, onAction, onChangeMany })
 		if (Object.keys(patch).length > 0) onChangeMany?.(patch);
 		const nextChoices = choicesOf(result["choices"]);
 		setChoices(nextChoices.length > 1 ? nextChoices : []);
+		const picked = typeof result["gatewayId"] === "string" && result["gatewayId"].length > 0;
+		const summary = typeof result["summary"] === "string" ? result["summary"] : null;
+		if (summary !== null && !picked && nextChoices.length < 2) setError(summary);
 		setPhase("idle");
 		setPaste("");
 		setAttemptId(null);
@@ -30989,13 +30992,13 @@ function InfoBox({ field }) {
 		children: /* @__PURE__ */ jsxs("div", {
 			className: `rounded-md border-l-4 px-3 py-2.5 ${styles.border} ${styles.bg}`,
 			children: [field.label && /* @__PURE__ */ jsx("p", {
-				className: `text-xs font-semibold mb-0.5 ${styles.text}`,
+				className: field.content.length > 0 ? `text-xs font-semibold mb-0.5 ${styles.text}` : "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line break-words",
 				children: field.label
 			}), isHtml ? /* @__PURE__ */ jsx("div", {
 				className: "text-xs text-foreground-subtle leading-relaxed info-html-content",
 				dangerouslySetInnerHTML: { __html: sanitizeInfoHtml(field.content) }
-			}) : /* @__PURE__ */ jsx("p", {
-				className: "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line",
+			}) : field.content.length > 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-foreground-subtle leading-relaxed whitespace-pre-line break-words",
 				children: field.content
 			})]
 		})
@@ -61124,28 +61127,61 @@ function FormField$1({ label, description, error, required, children, orientatio
 }
 //#endregion
 //#region src/composites/grouped-tile-picker.tsx
+/**
+* `GroupedTilePicker` — choose ONE "type of thing" from tiles grouped by who
+* provides it (an AI profile kind, a notification-target kind…): an uppercase
+* group label, then a grid of icon + label tiles. The pre-modal of a
+* create-flow whose form depends on the choice.
+*
+* The tile is deliberately not a `Button`: a vertical icon-over-label card in
+* a grid, which toolbar-button chrome fights. One place owns that look so the
+* pickers stay identical.
+*/
 function GroupedTilePicker({ groups, onPick, emptyMessage }) {
+	const [openKey, setOpenKey] = useState(null);
+	const openTile = openKey === null ? null : groups.flatMap((group) => group.tiles).find((tile) => tile.key === openKey) ?? null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "space-y-4",
-		children: [groups.length === 0 && /* @__PURE__ */ jsx("p", {
-			className: "text-xs text-foreground-subtle",
-			children: emptyMessage
-		}), groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
-			className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
-			children: group.label
-		}), /* @__PURE__ */ jsx("div", {
-			className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
-			children: group.tiles.map((tile) => /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"data-testid": tile.testId,
-				onClick: () => onPick(tile.key),
-				className: "flex flex-col items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-3 text-xs transition-colors hover:border-primary/50 hover:bg-surface-hover",
-				children: [tile.icon, /* @__PURE__ */ jsx("span", {
-					className: "text-center font-medium text-foreground",
-					children: tile.label
-				})]
-			}, tile.key))
-		})] }, group.id))]
+		children: [
+			groups.length === 0 && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-foreground-subtle",
+				children: emptyMessage
+			}),
+			groups.map((group) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
+				children: group.label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-2 gap-2 sm:grid-cols-3",
+				children: group.tiles.map((tile) => /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						"data-testid": tile.testId,
+						onClick: () => onPick(tile.key),
+						className: "flex h-full w-full flex-col items-center gap-1.5 rounded-lg border border-border bg-surface px-3 py-3 text-xs transition-colors hover:border-primary/50 hover:bg-surface-hover",
+						children: [tile.icon, /* @__PURE__ */ jsx("span", {
+							className: "text-center font-medium text-foreground",
+							children: tile.label
+						})]
+					}), tile.detail !== void 0 && tile.detailLabel !== void 0 && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-1 right-1",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							icon: Info,
+							"aria-label": tile.detailLabel,
+							onClick: () => setOpenKey((current) => current === tile.key ? null : tile.key)
+						})
+					})]
+				}, tile.key))
+			})] }, group.id)),
+			openTile?.detail !== void 0 && /* @__PURE__ */ jsx(BottomSheet, {
+				open: true,
+				onClose: () => setOpenKey(null),
+				children: openTile.detail
+			})
+		]
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.331",
+  "version": "1.2.332",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",