@camstack/ui-library 1.2.113 → 1.2.114

package/dist/composites/device-select-filter.d.ts

@@ -20,6 +20,12 @@ export interface DeviceSelectCandidate {
     readonly name: string;
     readonly location?: string | null;
     readonly features?: readonly string[];
+    /** Name of the container this device lives in, when it has one. */
+    readonly parentName?: string | null;
+}
+/** A picker option that still knows where its device is. */
+export interface DeviceOption extends ConfigOption {
+    readonly location: string | null;
 }
 /**
  * Does a device satisfy the filter?
@@ -37,13 +43,33 @@ export declare function deviceOptionLabel(device: DeviceSelectCandidate): string
  * (value = the device id as a string). Sorted case-insensitively by label so
  * the picker order is stable.
  */
-export declare function devicesToOptions(devices: readonly DeviceSelectCandidate[], filter?: DeviceSelectFilter): ConfigOption[];
+/** `Location · type · in Container` — the parts a name alone does not say. */
+export declare function deviceOptionDescription(device: DeviceSelectCandidate): string;
+export declare function devicesToOptions(devices: readonly DeviceSelectCandidate[], filter?: DeviceSelectFilter): DeviceOption[];
+export interface DeviceFacets {
+    readonly locations: readonly string[];
+    readonly types: readonly string[];
+}
+/** The distinct locations and types on offer — the chips above the search. */
+export declare function deviceFacets(devices: readonly DeviceSelectCandidate[]): DeviceFacets;
+export interface FacetSelection {
+    readonly location?: string;
+    readonly type?: string;
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+export declare function matchesFacets(device: DeviceSelectCandidate, facets: FacetSelection): boolean;
+export interface SuggestedPartition<T extends DeviceOption> {
+    readonly suggested: readonly T[];
+    readonly others: readonly T[];
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+export declare function partitionSuggested<T extends DeviceOption>(options: readonly T[], location: string | null | undefined): SuggestedPartition<T>;
 /**
  * Free-text option filter — case-insensitive AND over whitespace tokens, each
  * matched against the option's `value` + `label` (so a device is found by name,
  * id, or location). An empty query returns every option in order.
  */
-export declare function filterDeviceOptions(options: readonly ConfigOption[], query: string): ConfigOption[];
+export declare function filterDeviceOptions<T extends ConfigOption>(options: readonly T[], query: string): T[];
 /**
  * Resolve the currently-selected values into options IN SELECTION ORDER (so
  * chips stay stable while searching). A selected value with no matching option

package/dist/index.cjs

@@ -6903,6 +6903,7 @@ function intersects(a, b) {
 */
 function deviceMatchesFilter(device, filter) {
 	if (filter?.excludeDeviceId !== void 0 && device.id === filter.excludeDeviceId) return false;
+	if (filter?.excludeTypes !== void 0 && filter.excludeTypes.includes(device.type)) return false;
 	const hasCaps = filter?.caps !== void 0 && filter.caps.length > 0;
 	const hasTypes = filter?.types !== void 0 && filter.types.length > 0;
 	if (!hasCaps && !hasTypes) return true;
@@ -6919,12 +6920,52 @@ function deviceOptionLabel(device) {
 * (value = the device id as a string). Sorted case-insensitively by label so
 * the picker order is stable.
 */
+/** `Location · type · in Container` — the parts a name alone does not say. */
+function deviceOptionDescription(device) {
+	const parts = [];
+	if (typeof device.location === "string" && device.location.length > 0) parts.push(device.location);
+	parts.push(device.type);
+	if (typeof device.parentName === "string" && device.parentName.length > 0) parts.push(`in ${device.parentName}`);
+	return parts.join(" · ");
+}
 function devicesToOptions(devices, filter) {
 	return devices.filter((d) => deviceMatchesFilter(d, filter)).map((d) => ({
 		value: String(d.id),
-		label: deviceOptionLabel(d)
+		label: deviceOptionLabel(d),
+		description: deviceOptionDescription(d),
+		location: typeof d.location === "string" && d.location.length > 0 ? d.location : null
 	})).toSorted((a, b) => a.label.localeCompare(b.label));
 }
+/** The distinct locations and types on offer — the chips above the search. */
+function deviceFacets(devices) {
+	const locations = /* @__PURE__ */ new Set();
+	const types = /* @__PURE__ */ new Set();
+	for (const d of devices) {
+		if (typeof d.location === "string" && d.location.length > 0) locations.add(d.location);
+		types.add(d.type);
+	}
+	return {
+		locations: [...locations].toSorted((a, b) => a.localeCompare(b)),
+		types: [...types].toSorted((a, b) => a.localeCompare(b))
+	};
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+function matchesFacets(device, facets) {
+	if (facets.location !== void 0 && device.location !== facets.location) return false;
+	if (facets.type !== void 0 && device.type !== facets.type) return false;
+	return true;
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+function partitionSuggested(options, location) {
+	if (location === null || location === void 0 || location.length === 0) return {
+		suggested: [],
+		others: [...options]
+	};
+	return {
+		suggested: options.filter((o) => o.location === location),
+		others: options.filter((o) => o.location !== location)
+	};
+}
 /**
 * Free-text option filter — case-insensitive AND over whitespace tokens, each
 * matched against the option's `value` + `label` (so a device is found by name,
@@ -6934,7 +6975,7 @@ function filterDeviceOptions(options, query) {
 	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 	if (tokens.length === 0) return [...options];
 	return options.filter((opt) => {
-		const hay = `${opt.value} ${opt.label}`.toLowerCase();
+		const hay = `${opt.value} ${opt.label} ${opt.description ?? ""}`.toLowerCase();
 		return tokens.every((t) => hay.includes(t));
 	});
 }
@@ -6973,21 +7014,61 @@ var DESC_CLASS$1 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
 /** The compact projection of the listAll rows the device fields consume. */
 function toCandidates(rows) {
 	if (!Array.isArray(rows)) return [];
+	const nameById = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (typeof row !== "object" || row === null) continue;
+		const r = row;
+		if (typeof r.id === "number" && typeof r.name === "string") nameById.set(r.id, r.name);
+	}
 	const out = [];
 	for (const row of rows) {
 		if (typeof row !== "object" || row === null) continue;
 		const r = row;
 		if (typeof r.id !== "number" || typeof r.type !== "string" || typeof r.name !== "string") continue;
+		const parentName = typeof r.parentDeviceId === "number" ? nameById.get(r.parentDeviceId) ?? null : null;
 		out.push({
 			id: r.id,
 			type: r.type,
 			name: r.name,
 			location: typeof r.location === "string" ? r.location : null,
-			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : []
+			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : [],
+			parentName
 		});
 	}
 	return out;
 }
+var FACET_CHIP = "rounded-full border px-1.5 py-0.5 text-[10px] leading-4 transition-colors cursor-pointer";
+var FACET_CHIP_ON = `${FACET_CHIP} border-primary bg-primary/10 text-primary`;
+var FACET_CHIP_OFF = `${FACET_CHIP} border-border text-foreground-subtle hover:bg-surface-hover`;
+var GROUP_HEADING = "px-2.5 pt-1.5 pb-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle";
+/** One row of facet chips: `All` plus every distinct value. */
+function FacetRow({ label, values, active, onPick }) {
+	if (values.length < 2) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-1 mb-1",
+		role: "group",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-foreground-subtle mr-0.5",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: active === void 0 ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				onClick: () => onPick(void 0),
+				children: "All"
+			}),
+			values.map((v) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: active === v ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				"aria-pressed": active === v,
+				onClick: () => onPick(active === v ? void 0 : v),
+				children: v
+			}, v))
+		]
+	});
+}
 function FieldShell({ label, description, required, translationFn, children }) {
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -7035,7 +7116,16 @@ function DeviceSelectField({ field, value, onChange, disabled, translationFn })
 }
 function DeviceMultiSelectField({ field, value, onChange, disabled, translationFn }) {
 	const { data } = useDeviceManagerListAll({});
-	const options = (0, react$1.useMemo)(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const smart = field.suggestLocation !== void 0;
+	const [facets, setFacets] = (0, react$1.useState)({});
+	const candidates = (0, react$1.useMemo)(() => toCandidates(data), [data]);
+	const facetValues = (0, react$1.useMemo)(() => deviceFacets(candidates.filter((c) => c.id !== field.deviceFilter?.excludeDeviceId)), [candidates, field.deviceFilter?.excludeDeviceId]);
+	const candidatesInScope = (0, react$1.useMemo)(() => smart ? candidates.filter((c) => matchesFacets(c, facets)) : candidates, [
+		candidates,
+		facets,
+		smart
+	]);
+	const options = (0, react$1.useMemo)(() => devicesToOptions(candidatesInScope, field.deviceFilter), [candidatesInScope, field.deviceFilter]);
 	const selected = Array.isArray(value) ? value.map(String) : [];
 	const isDisabled = disabled === true || field.disabled === true;
 	const atMax = field.maxItems !== void 0 && selected.length >= field.maxItems;
@@ -7045,7 +7135,13 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 	const inputRef = (0, react$1.useRef)(null);
 	const blurTimer = (0, react$1.useRef)(null);
 	const selectedOptions = (0, react$1.useMemo)(() => selectedDeviceOptions(options, selected), [options, selected]);
-	const filtered = (0, react$1.useMemo)(() => filterDeviceOptions(options, query), [options, query]);
+	const searched = (0, react$1.useMemo)(() => filterDeviceOptions(options, query), [options, query]);
+	const partition = (0, react$1.useMemo)(() => partitionSuggested(searched, smart ? field.suggestLocation : null), [
+		searched,
+		smart,
+		field.suggestLocation
+	]);
+	const filtered = (0, react$1.useMemo)(() => [...partition.suggested, ...partition.others], [partition]);
 	const toggle = (optValue) => {
 		if (isDisabled) return;
 		if (selected.includes(optValue)) onChange(selected.filter((v) => v !== optValue));
@@ -7095,6 +7191,23 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 					})]
 				}, opt.value))
 			}),
+			smart && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FacetRow, {
+				label: "Location",
+				values: facetValues.locations,
+				active: facets.location,
+				onPick: (location) => setFacets((f) => ({
+					...f,
+					location
+				}))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FacetRow, {
+				label: "Type",
+				values: facetValues.types,
+				active: facets.type,
+				onPick: (type) => setFacets((f) => ({
+					...f,
+					type
+				}))
+			})] }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: INPUT_SHELL + (isDisabled ? " opacity-50" : ""),
 				children: [
@@ -7144,7 +7257,12 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 				}) : filtered.map((opt, i) => {
 					const checked = selected.includes(opt.value);
 					const blockedByMax = !checked && atMax;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					const suggestedCount = partition.suggested.length;
+					const heading = !smart ? null : i === 0 && suggestedCount > 0 ? `Suggested · ${field.suggestLocation ?? ""}` : i === suggestedCount && suggestedCount > 0 ? "Other devices" : null;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [heading !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: GROUP_HEADING,
+						children: heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						role: "option",
 						"aria-selected": checked,
@@ -7159,11 +7277,17 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: ["flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border", checked ? "border-primary bg-primary text-white" : "border-border"].join(" "),
 							children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-2.5 w-2.5" })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate text-foreground",
-							children: opt.label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "block truncate text-foreground",
+								children: opt.label
+							}), opt.description !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "block truncate text-[10px] text-foreground-subtle",
+								children: opt.description
+							})]
 						})]
-					}, opt.value);
+					})] }, opt.value);
 				})
 			}),
 			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {

package/dist/index.js

@@ -6879,6 +6879,7 @@ function intersects(a, b) {
 */
 function deviceMatchesFilter(device, filter) {
 	if (filter?.excludeDeviceId !== void 0 && device.id === filter.excludeDeviceId) return false;
+	if (filter?.excludeTypes !== void 0 && filter.excludeTypes.includes(device.type)) return false;
 	const hasCaps = filter?.caps !== void 0 && filter.caps.length > 0;
 	const hasTypes = filter?.types !== void 0 && filter.types.length > 0;
 	if (!hasCaps && !hasTypes) return true;
@@ -6895,12 +6896,52 @@ function deviceOptionLabel(device) {
 * (value = the device id as a string). Sorted case-insensitively by label so
 * the picker order is stable.
 */
+/** `Location · type · in Container` — the parts a name alone does not say. */
+function deviceOptionDescription(device) {
+	const parts = [];
+	if (typeof device.location === "string" && device.location.length > 0) parts.push(device.location);
+	parts.push(device.type);
+	if (typeof device.parentName === "string" && device.parentName.length > 0) parts.push(`in ${device.parentName}`);
+	return parts.join(" · ");
+}
 function devicesToOptions(devices, filter) {
 	return devices.filter((d) => deviceMatchesFilter(d, filter)).map((d) => ({
 		value: String(d.id),
-		label: deviceOptionLabel(d)
+		label: deviceOptionLabel(d),
+		description: deviceOptionDescription(d),
+		location: typeof d.location === "string" && d.location.length > 0 ? d.location : null
 	})).toSorted((a, b) => a.label.localeCompare(b.label));
 }
+/** The distinct locations and types on offer — the chips above the search. */
+function deviceFacets(devices) {
+	const locations = /* @__PURE__ */ new Set();
+	const types = /* @__PURE__ */ new Set();
+	for (const d of devices) {
+		if (typeof d.location === "string" && d.location.length > 0) locations.add(d.location);
+		types.add(d.type);
+	}
+	return {
+		locations: [...locations].toSorted((a, b) => a.localeCompare(b)),
+		types: [...types].toSorted((a, b) => a.localeCompare(b))
+	};
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+function matchesFacets(device, facets) {
+	if (facets.location !== void 0 && device.location !== facets.location) return false;
+	if (facets.type !== void 0 && device.type !== facets.type) return false;
+	return true;
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+function partitionSuggested(options, location) {
+	if (location === null || location === void 0 || location.length === 0) return {
+		suggested: [],
+		others: [...options]
+	};
+	return {
+		suggested: options.filter((o) => o.location === location),
+		others: options.filter((o) => o.location !== location)
+	};
+}
 /**
 * Free-text option filter — case-insensitive AND over whitespace tokens, each
 * matched against the option's `value` + `label` (so a device is found by name,
@@ -6910,7 +6951,7 @@ function filterDeviceOptions(options, query) {
 	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 	if (tokens.length === 0) return [...options];
 	return options.filter((opt) => {
-		const hay = `${opt.value} ${opt.label}`.toLowerCase();
+		const hay = `${opt.value} ${opt.label} ${opt.description ?? ""}`.toLowerCase();
 		return tokens.every((t) => hay.includes(t));
 	});
 }
@@ -6949,21 +6990,61 @@ var DESC_CLASS$1 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
 /** The compact projection of the listAll rows the device fields consume. */
 function toCandidates(rows) {
 	if (!Array.isArray(rows)) return [];
+	const nameById = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (typeof row !== "object" || row === null) continue;
+		const r = row;
+		if (typeof r.id === "number" && typeof r.name === "string") nameById.set(r.id, r.name);
+	}
 	const out = [];
 	for (const row of rows) {
 		if (typeof row !== "object" || row === null) continue;
 		const r = row;
 		if (typeof r.id !== "number" || typeof r.type !== "string" || typeof r.name !== "string") continue;
+		const parentName = typeof r.parentDeviceId === "number" ? nameById.get(r.parentDeviceId) ?? null : null;
 		out.push({
 			id: r.id,
 			type: r.type,
 			name: r.name,
 			location: typeof r.location === "string" ? r.location : null,
-			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : []
+			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : [],
+			parentName
 		});
 	}
 	return out;
 }
+var FACET_CHIP = "rounded-full border px-1.5 py-0.5 text-[10px] leading-4 transition-colors cursor-pointer";
+var FACET_CHIP_ON = `${FACET_CHIP} border-primary bg-primary/10 text-primary`;
+var FACET_CHIP_OFF = `${FACET_CHIP} border-border text-foreground-subtle hover:bg-surface-hover`;
+var GROUP_HEADING = "px-2.5 pt-1.5 pb-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle";
+/** One row of facet chips: `All` plus every distinct value. */
+function FacetRow({ label, values, active, onPick }) {
+	if (values.length < 2) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-1 mb-1",
+		role: "group",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[10px] text-foreground-subtle mr-0.5",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: active === void 0 ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				onClick: () => onPick(void 0),
+				children: "All"
+			}),
+			values.map((v) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: active === v ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				"aria-pressed": active === v,
+				onClick: () => onPick(active === v ? void 0 : v),
+				children: v
+			}, v))
+		]
+	});
+}
 function FieldShell({ label, description, required, translationFn, children }) {
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -7011,7 +7092,16 @@ function DeviceSelectField({ field, value, onChange, disabled, translationFn })
 }
 function DeviceMultiSelectField({ field, value, onChange, disabled, translationFn }) {
 	const { data } = useDeviceManagerListAll({});
-	const options = useMemo(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const smart = field.suggestLocation !== void 0;
+	const [facets, setFacets] = useState({});
+	const candidates = useMemo(() => toCandidates(data), [data]);
+	const facetValues = useMemo(() => deviceFacets(candidates.filter((c) => c.id !== field.deviceFilter?.excludeDeviceId)), [candidates, field.deviceFilter?.excludeDeviceId]);
+	const candidatesInScope = useMemo(() => smart ? candidates.filter((c) => matchesFacets(c, facets)) : candidates, [
+		candidates,
+		facets,
+		smart
+	]);
+	const options = useMemo(() => devicesToOptions(candidatesInScope, field.deviceFilter), [candidatesInScope, field.deviceFilter]);
 	const selected = Array.isArray(value) ? value.map(String) : [];
 	const isDisabled = disabled === true || field.disabled === true;
 	const atMax = field.maxItems !== void 0 && selected.length >= field.maxItems;
@@ -7021,7 +7111,13 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 	const inputRef = useRef(null);
 	const blurTimer = useRef(null);
 	const selectedOptions = useMemo(() => selectedDeviceOptions(options, selected), [options, selected]);
-	const filtered = useMemo(() => filterDeviceOptions(options, query), [options, query]);
+	const searched = useMemo(() => filterDeviceOptions(options, query), [options, query]);
+	const partition = useMemo(() => partitionSuggested(searched, smart ? field.suggestLocation : null), [
+		searched,
+		smart,
+		field.suggestLocation
+	]);
+	const filtered = useMemo(() => [...partition.suggested, ...partition.others], [partition]);
 	const toggle = (optValue) => {
 		if (isDisabled) return;
 		if (selected.includes(optValue)) onChange(selected.filter((v) => v !== optValue));
@@ -7071,6 +7167,23 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 					})]
 				}, opt.value))
 			}),
+			smart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FacetRow, {
+				label: "Location",
+				values: facetValues.locations,
+				active: facets.location,
+				onPick: (location) => setFacets((f) => ({
+					...f,
+					location
+				}))
+			}), /* @__PURE__ */ jsx(FacetRow, {
+				label: "Type",
+				values: facetValues.types,
+				active: facets.type,
+				onPick: (type) => setFacets((f) => ({
+					...f,
+					type
+				}))
+			})] }),
 			/* @__PURE__ */ jsxs("div", {
 				className: INPUT_SHELL + (isDisabled ? " opacity-50" : ""),
 				children: [
@@ -7120,7 +7233,12 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 				}) : filtered.map((opt, i) => {
 					const checked = selected.includes(opt.value);
 					const blockedByMax = !checked && atMax;
-					return /* @__PURE__ */ jsxs("button", {
+					const suggestedCount = partition.suggested.length;
+					const heading = !smart ? null : i === 0 && suggestedCount > 0 ? `Suggested · ${field.suggestLocation ?? ""}` : i === suggestedCount && suggestedCount > 0 ? "Other devices" : null;
+					return /* @__PURE__ */ jsxs("div", { children: [heading !== null && /* @__PURE__ */ jsx("div", {
+						className: GROUP_HEADING,
+						children: heading
+					}), /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						role: "option",
 						"aria-selected": checked,
@@ -7135,11 +7253,17 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 						children: [/* @__PURE__ */ jsx("span", {
 							className: ["flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border", checked ? "border-primary bg-primary text-white" : "border-border"].join(" "),
 							children: checked && /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5" })
-						}), /* @__PURE__ */ jsx("span", {
-							className: "truncate text-foreground",
-							children: opt.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "block truncate text-foreground",
+								children: opt.label
+							}), opt.description !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "block truncate text-[10px] text-foreground-subtle",
+								children: opt.description
+							})]
 						})]
-					}, opt.value);
+					})] }, opt.value);
 				})
 			}),
 			description && /* @__PURE__ */ jsx("p", {

package/package.json

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