@questpie/admin 3.2.4 → 3.2.6

package/dist/client/components/primitives/select-multi.mjs

@@ -9,9 +9,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
 import { useIsMobile } from "../../hooks/use-media-query.mjs";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.mjs";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../ui/drawer.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import { useDeferredValue, useId, useState } from "react";
+import { useCallback, useDeferredValue, useId, useMemo, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -41,297 +40,156 @@ const EMPTY_OPTIONS = [];
 * />
 * ```
 */
-function SelectMulti(t0) {
-	const $ = c(160);
-	const { value, onChange, options: staticOptions, loadOptions, queryKey, prefetchOnMount: t1, maxSelections, loading: t2, emptyMessage: t3, placeholder: t4, disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle: t5, maxVisibleChips: t6 } = t0;
-	const prefetchOnMount = t1 === void 0 ? false : t1;
-	const externalLoading = t2 === void 0 ? false : t2;
-	const emptyMessage = t3 === void 0 ? "No options found" : t3;
-	const placeholder = t4 === void 0 ? "Select..." : t4;
-	const drawerTitle = t5 === void 0 ? "Select options" : t5;
-	const maxVisibleChips = t6 === void 0 ? 3 : t6;
+function SelectMulti({ value, onChange, options: staticOptions, loadOptions, queryKey, prefetchOnMount = false, maxSelections, loading: externalLoading = false, emptyMessage = "No options found", placeholder = "Select...", disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle = "Select options", maxVisibleChips = 3 }) {
 	const resolvedValue = value ?? EMPTY_VALUE;
 	const resolvedStaticOptions = staticOptions ?? EMPTY_OPTIONS;
 	const resolveText = useResolveText();
 	const i18n = useSafeI18n();
-	let t7;
-	if ($[0] !== i18n) {
-		t7 = (key) => i18n?.t(key) ?? key;
-		$[0] = i18n;
-		$[1] = t7;
-	} else t7 = $[1];
-	const translate = t7;
+	const translate = useCallback((key) => i18n?.t(key) ?? key, [i18n]);
 	const locale = i18n?.locale ?? "en";
-	let t8;
-	if ($[2] !== translate) {
-		t8 = (key_0, fallback) => {
-			const message = translate(key_0);
-			return message && message !== key_0 ? message : fallback;
-		};
-		$[2] = translate;
-		$[3] = t8;
-	} else t8 = $[3];
-	const t = t8;
-	let t9;
-	if ($[4] !== placeholder || $[5] !== resolveText) {
-		t9 = resolveText(placeholder);
-		$[4] = placeholder;
-		$[5] = resolveText;
-		$[6] = t9;
-	} else t9 = $[6];
-	const resolvedPlaceholder = t9;
-	let t10;
-	if ($[7] !== emptyMessage || $[8] !== resolveText) {
-		t10 = resolveText(emptyMessage);
-		$[7] = emptyMessage;
-		$[8] = resolveText;
-		$[9] = t10;
-	} else t10 = $[9];
-	const resolvedEmptyMessage = t10;
-	let t11;
-	if ($[10] !== drawerTitle || $[11] !== resolveText) {
-		t11 = resolveText(drawerTitle);
-		$[10] = drawerTitle;
-		$[11] = resolveText;
-		$[12] = t11;
-	} else t11 = $[12];
-	const resolvedDrawerTitle = t11;
+	const t = (key, fallback) => {
+		const message = translate(key);
+		return message && message !== key ? message : fallback;
+	};
+	const resolvedPlaceholder = resolveText(placeholder);
+	const resolvedEmptyMessage = resolveText(emptyMessage);
+	const resolvedDrawerTitle = resolveText(drawerTitle);
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const instanceId = useId();
 	const deferredSearch = useDeferredValue(search);
 	const isMobile = useIsMobile();
-	let t12;
-	if ($[13] !== resolvedStaticOptions) {
-		t12 = flattenOptions(resolvedStaticOptions);
-		$[13] = resolvedStaticOptions;
-		$[14] = t12;
-	} else t12 = $[14];
-	const flatStaticOptions = t12;
-	let t13;
-	if ($[15] !== deferredSearch || $[16] !== instanceId || $[17] !== queryKey) {
-		t13 = queryKey ? queryKey(deferredSearch) : [
+	const flatStaticOptions = useMemo(() => flattenOptions(resolvedStaticOptions), [resolvedStaticOptions]);
+	const { data: dynamicOptions = [], isFetching } = useQuery({
+		queryKey: useMemo(() => queryKey ? queryKey(deferredSearch) : [
 			"select-multi",
 			instanceId,
 			deferredSearch
-		];
-		$[15] = deferredSearch;
-		$[16] = instanceId;
-		$[17] = queryKey;
-		$[18] = t13;
-	} else t13 = $[18];
-	const loadOptionsKey = t13;
-	let t14;
-	if ($[19] !== deferredSearch || $[20] !== loadOptions) {
-		t14 = () => loadOptions?.(deferredSearch) ?? Promise.resolve([]);
-		$[19] = deferredSearch;
-		$[20] = loadOptions;
-		$[21] = t14;
-	} else t14 = $[21];
-	const t15 = !!loadOptions && (open || prefetchOnMount);
-	let t16;
-	if ($[22] !== loadOptionsKey || $[23] !== t14 || $[24] !== t15) {
-		t16 = {
-			queryKey: loadOptionsKey,
-			queryFn: t14,
-			enabled: t15,
-			staleTime: 3e4,
-			gcTime: 3e5
-		};
-		$[22] = loadOptionsKey;
-		$[23] = t14;
-		$[24] = t15;
-		$[25] = t16;
-	} else t16 = $[25];
-	const { data: t17, isFetching } = useQuery(t16);
-	let t18;
-	if ($[26] !== t17) {
-		t18 = t17 === void 0 ? [] : t17;
-		$[26] = t17;
-		$[27] = t18;
-	} else t18 = $[27];
-	const dynamicOptions = t18;
-	let t19;
-	bb0: {
-		if (!loadOptions) {
-			t19 = flatStaticOptions;
-			break bb0;
-		}
-		if (flatStaticOptions.length === 0) {
-			t19 = dynamicOptions;
-			break bb0;
-		}
-		let t20$1;
-		if ($[28] !== dynamicOptions || $[29] !== flatStaticOptions) {
-			const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce(_temp, /* @__PURE__ */ new Map());
-			t20$1 = Array.from(mergedMap.values());
-			$[28] = dynamicOptions;
-			$[29] = flatStaticOptions;
-			$[30] = t20$1;
-		} else t20$1 = $[30];
-		t19 = t20$1;
-	}
-	const allOptions = t19;
-	let t20;
-	if ($[31] !== locale || $[32] !== resolveText || $[33] !== translate) {
-		t20 = (option) => resolveOptionLabel({
-			value: option.value,
-			label: option.label,
+		], [
+			queryKey,
+			deferredSearch,
+			instanceId
+		]),
+		queryFn: () => loadOptions?.(deferredSearch) ?? Promise.resolve([]),
+		enabled: !!loadOptions && (open || prefetchOnMount),
+		staleTime: 3e4,
+		gcTime: 5 * 6e4
+	});
+	const allOptions = useMemo(() => {
+		if (!loadOptions) return flatStaticOptions;
+		if (flatStaticOptions.length === 0) return dynamicOptions;
+		const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce((map, opt) => new Map(map).set(opt.value, opt), /* @__PURE__ */ new Map());
+		return Array.from(mergedMap.values());
+	}, [
+		loadOptions,
+		dynamicOptions,
+		flatStaticOptions
+	]);
+	const getOptionLabel = useCallback((option) => resolveOptionLabel({
+		value: option.value,
+		label: option.label,
+		resolveText,
+		t: translate,
+		locale
+	}), [
+		locale,
+		resolveText,
+		translate
+	]);
+	const filteredOptions = useMemo(() => {
+		if (loadOptions) return allOptions;
+		if (!search) return allOptions;
+		return allOptions.filter((opt) => getOptionLabel(opt).toLowerCase().includes(search.toLowerCase()));
+	}, [
+		allOptions,
+		search,
+		loadOptions,
+		getOptionLabel
+	]);
+	const getLabel = useCallback((val) => {
+		return resolveOptionLabel({
+			value: val,
+			label: allOptions.find((opt) => opt.value === val)?.label,
 			resolveText,
 			t: translate,
 			locale
 		});
-		$[31] = locale;
-		$[32] = resolveText;
-		$[33] = translate;
-		$[34] = t20;
-	} else t20 = $[34];
-	const getOptionLabel = t20;
-	let t21;
-	bb1: {
-		if (loadOptions) {
-			t21 = allOptions;
-			break bb1;
-		}
-		if (!search) {
-			t21 = allOptions;
-			break bb1;
+	}, [
+		allOptions,
+		locale,
+		resolveText,
+		translate
+	]);
+	const findOption = useCallback((val) => allOptions.find((opt) => opt.value === val), [allOptions]);
+	const handleToggle = useCallback((selectedValue) => {
+		const typedValue = selectedValue;
+		if (resolvedValue.includes(typedValue)) onChange(resolvedValue.filter((v) => v !== typedValue));
+		else {
+			if (maxSelections && resolvedValue.length >= maxSelections) return;
+			onChange([...resolvedValue, typedValue]);
 		}
-		let t22$1;
-		if ($[35] !== allOptions || $[36] !== getOptionLabel || $[37] !== search) {
-			let t23$1;
-			if ($[39] !== getOptionLabel || $[40] !== search) {
-				t23$1 = (opt_0) => getOptionLabel(opt_0).toLowerCase().includes(search.toLowerCase());
-				$[39] = getOptionLabel;
-				$[40] = search;
-				$[41] = t23$1;
-			} else t23$1 = $[41];
-			t22$1 = allOptions.filter(t23$1);
-			$[35] = allOptions;
-			$[36] = getOptionLabel;
-			$[37] = search;
-			$[38] = t22$1;
-		} else t22$1 = $[38];
-		t21 = t22$1;
-	}
-	const filteredOptions = t21;
-	let t22;
-	if ($[42] !== allOptions || $[43] !== locale || $[44] !== resolveText || $[45] !== translate) {
-		t22 = (val) => {
-			return resolveOptionLabel({
-				value: val,
-				label: allOptions.find((opt_1) => opt_1.value === val)?.label,
-				resolveText,
-				t: translate,
-				locale
-			});
-		};
-		$[42] = allOptions;
-		$[43] = locale;
-		$[44] = resolveText;
-		$[45] = translate;
-		$[46] = t22;
-	} else t22 = $[46];
-	const getLabel = t22;
-	let t23;
-	if ($[47] !== maxSelections || $[48] !== onChange || $[49] !== resolvedValue) {
-		t23 = (selectedValue) => {
-			const typedValue = selectedValue;
-			if (resolvedValue.includes(typedValue)) onChange(resolvedValue.filter((v) => v !== typedValue));
-			else {
-				if (maxSelections && resolvedValue.length >= maxSelections) return;
-				onChange([...resolvedValue, typedValue]);
-			}
-		};
-		$[47] = maxSelections;
-		$[48] = onChange;
-		$[49] = resolvedValue;
-		$[50] = t23;
-	} else t23 = $[50];
-	const handleToggle = t23;
-	let t24;
-	if ($[51] !== onChange || $[52] !== resolvedValue) {
-		t24 = (removedValue, e) => {
-			e?.preventDefault();
-			e?.stopPropagation();
-			onChange(resolvedValue.filter((v_0) => v_0 !== removedValue));
-		};
-		$[51] = onChange;
-		$[52] = resolvedValue;
-		$[53] = t24;
-	} else t24 = $[53];
-	const handleRemove = t24;
-	let t25;
-	if ($[54] !== onChange) {
-		t25 = (e_0) => {
-			e_0.preventDefault();
-			e_0.stopPropagation();
-			onChange([]);
-		};
-		$[54] = onChange;
-		$[55] = t25;
-	} else t25 = $[55];
-	const handleClearAll = t25;
-	let t26;
-	if ($[56] !== disabled || $[57] !== handleClearAll || $[58] !== resolvedValue.length) {
-		t26 = (event) => {
-			if (resolvedValue.length > 0 && !disabled && (event.key === "Backspace" || event.key === "Delete")) handleClearAll(event);
-		};
-		$[56] = disabled;
-		$[57] = handleClearAll;
-		$[58] = resolvedValue.length;
-		$[59] = t26;
-	} else t26 = $[59];
-	const handleTriggerKeyDown = t26;
+	}, [
+		resolvedValue,
+		onChange,
+		maxSelections
+	]);
+	const handleRemove = useCallback((removedValue, e) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		onChange(resolvedValue.filter((v) => v !== removedValue));
+	}, [resolvedValue, onChange]);
+	const handleClearAll = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onChange([]);
+	}, [onChange]);
+	const handleTriggerKeyDown = useCallback((event) => {
+		if (resolvedValue.length > 0 && !disabled && (event.key === "Backspace" || event.key === "Delete")) handleClearAll(event);
+	}, [
+		disabled,
+		handleClearAll,
+		resolvedValue.length
+	]);
 	const showLoading = isFetching || externalLoading;
 	const canAddMore = !maxSelections || resolvedValue.length < maxSelections;
-	let t27;
-	let t28;
-	let t29;
-	let t30;
-	let t31;
-	let t32;
-	let t33;
-	let t34;
-	if ($[60] !== ariaInvalid || $[61] !== className || $[62] !== disabled || $[63] !== getLabel || $[64] !== handleRemove || $[65] !== id || $[66] !== maxVisibleChips || $[67] !== open || $[68] !== resolvedPlaceholder || $[69] !== resolvedValue || $[70] !== t) {
-		const visibleChips = resolvedValue.slice(0, maxVisibleChips);
-		const hiddenCount = resolvedValue.length - maxVisibleChips;
-		t27 = id;
-		t28 = "combobox";
-		t29 = "select-multi-list";
-		t30 = open;
-		t31 = ariaInvalid;
-		t32 = 0;
-		const t35$1 = disabled && "cursor-not-allowed opacity-50";
-		const t36$1 = ariaInvalid && "border-destructive ring-destructive/20";
-		if ($[79] !== className || $[80] !== t35$1 || $[81] !== t36$1) {
-			t33 = cn("qa-select-multi control-surface font-chrome flex h-auto min-h-[var(--control-height)] w-full flex-wrap items-center gap-1 px-3 py-1.5 text-sm", "hover:bg-surface-low focus-within:border-border-strong focus-within:ring-ring/20 aria-expanded:border-border-strong aria-expanded:ring-ring/20 focus-within:ring-3 aria-expanded:ring-3", t35$1, t36$1, className);
-			$[79] = className;
-			$[80] = t35$1;
-			$[81] = t36$1;
-			$[82] = t33;
-		} else t33 = $[82];
-		t34 = resolvedValue.length === 0 ? /* @__PURE__ */ jsx("span", {
+	const visibleChips = resolvedValue.slice(0, maxVisibleChips);
+	const hiddenCount = resolvedValue.length - maxVisibleChips;
+	const TriggerContent = /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "combobox",
+		"aria-controls": "select-multi-list",
+		"aria-expanded": open,
+		"aria-invalid": ariaInvalid,
+		tabIndex: 0,
+		className: cn("qa-select-multi control-surface font-chrome flex h-auto min-h-[var(--control-height)] w-full flex-wrap items-center gap-1 px-3 py-1.5 text-sm", "hover:bg-surface-low focus-within:border-border-strong focus-within:ring-ring/20 aria-expanded:border-border-strong aria-expanded:ring-ring/20 focus-within:ring-3 aria-expanded:ring-3", disabled && "cursor-not-allowed opacity-50", ariaInvalid && "border-destructive ring-destructive/20", className),
+		children: [resolvedValue.length === 0 ? /* @__PURE__ */ jsx("span", {
 			className: "text-muted-foreground text-xs",
 			children: resolvedPlaceholder
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleChips.map((val_0) => /* @__PURE__ */ jsxs(Badge, {
-			variant: "secondary",
-			className: "min-h-7 gap-1 pr-1",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "max-w-24 truncate",
-				children: getLabel(val_0)
-			}), !disabled && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				title: t("field.removeItem", "Remove option"),
-				onPointerDown: (e_1) => handleRemove(val_0, e_1),
-				onClick: (e_2) => handleRemove(val_0, e_2),
-				className: "hover:bg-muted-foreground/20 inline-flex size-5 items-center justify-center rounded-full transition-colors",
-				children: /* @__PURE__ */ jsx(Icon, {
-					icon: "ph:x",
-					className: "size-2.5"
-				})
-			})]
-		}, String(val_0))), hiddenCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleChips.map((val) => {
+			const chipOption = findOption(val);
+			return /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: cn("min-h-7 gap-1 pr-1", chipOption?.className),
+				children: [
+					chipOption?.icon,
+					/* @__PURE__ */ jsx("span", {
+						className: "max-w-24 truncate",
+						children: getLabel(val)
+					}),
+					!disabled && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						title: t("field.removeItem", "Remove option"),
+						onPointerDown: (e) => handleRemove(val, e),
+						onClick: (e) => handleRemove(val, e),
+						className: "hover:bg-muted-foreground/20 inline-flex size-5 items-center justify-center rounded-full transition-colors",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:x",
+							className: "size-2.5"
+						})
+					})
+				]
+			}, String(val));
+		}), hiddenCount > 0 && /* @__PURE__ */ jsxs(Badge, {
 			variant: "outline",
 			className: "text-muted-foreground",
 			children: [
@@ -339,317 +197,116 @@ function SelectMulti(t0) {
 				hiddenCount,
 				" more"
 			]
-		})] });
-		$[60] = ariaInvalid;
-		$[61] = className;
-		$[62] = disabled;
-		$[63] = getLabel;
-		$[64] = handleRemove;
-		$[65] = id;
-		$[66] = maxVisibleChips;
-		$[67] = open;
-		$[68] = resolvedPlaceholder;
-		$[69] = resolvedValue;
-		$[70] = t;
-		$[71] = t27;
-		$[72] = t28;
-		$[73] = t29;
-		$[74] = t30;
-		$[75] = t31;
-		$[76] = t32;
-		$[77] = t33;
-		$[78] = t34;
-	} else {
-		t27 = $[71];
-		t28 = $[72];
-		t29 = $[73];
-		t30 = $[74];
-		t31 = $[75];
-		t32 = $[76];
-		t33 = $[77];
-		t34 = $[78];
-	}
-	let t35;
-	if ($[83] !== disabled || $[84] !== handleClearAll || $[85] !== resolvedValue.length || $[86] !== t) {
-		t35 = resolvedValue.length > 0 && !disabled && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			title: t("common.clear", "Clear all"),
-			onPointerDown: handleClearAll,
-			onClick: handleClearAll,
-			className: "hover:bg-muted inline-flex size-6 items-center justify-center rounded-md opacity-60 transition-[background-color,opacity] hover:opacity-100",
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:x",
-				className: "size-3"
-			})
-		});
-		$[83] = disabled;
-		$[84] = handleClearAll;
-		$[85] = resolvedValue.length;
-		$[86] = t;
-		$[87] = t35;
-	} else t35 = $[87];
-	let t36;
-	if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
-		t36 = /* @__PURE__ */ jsx(Icon, {
-			icon: "ph:plus",
-			className: "size-3.5 opacity-50"
-		});
-		$[88] = t36;
-	} else t36 = $[88];
-	let t37;
-	if ($[89] !== t35) {
-		t37 = /* @__PURE__ */ jsxs("div", {
+		})] }), /* @__PURE__ */ jsxs("div", {
 			className: "ml-auto flex shrink-0 items-center gap-1",
-			children: [t35, t36]
-		});
-		$[89] = t35;
-		$[90] = t37;
-	} else t37 = $[90];
-	let t38;
-	if ($[91] !== t27 || $[92] !== t28 || $[93] !== t29 || $[94] !== t30 || $[95] !== t31 || $[96] !== t32 || $[97] !== t33 || $[98] !== t34 || $[99] !== t37) {
-		t38 = /* @__PURE__ */ jsxs("div", {
-			id: t27,
-			role: t28,
-			"aria-controls": t29,
-			"aria-expanded": t30,
-			"aria-invalid": t31,
-			tabIndex: t32,
-			className: t33,
-			children: [t34, t37]
-		});
-		$[91] = t27;
-		$[92] = t28;
-		$[93] = t29;
-		$[94] = t30;
-		$[95] = t31;
-		$[96] = t32;
-		$[97] = t33;
-		$[98] = t34;
-		$[99] = t37;
-		$[100] = t38;
-	} else t38 = $[100];
-	const TriggerContent = t38;
-	const t39 = !loadOptions;
-	let t40;
-	if ($[101] !== t) {
-		t40 = t("ui.searchPlaceholder", "Search...");
-		$[101] = t;
-		$[102] = t40;
-	} else t40 = $[102];
-	let t41;
-	if ($[103] !== search || $[104] !== t40) {
-		t41 = /* @__PURE__ */ jsx(CommandInput, {
-			placeholder: t40,
-			value: search,
-			onValueChange: setSearch
-		});
-		$[103] = search;
-		$[104] = t40;
-		$[105] = t41;
-	} else t41 = $[105];
-	let t42;
-	if ($[106] !== showLoading) {
-		t42 = showLoading && /* @__PURE__ */ jsx("div", {
-			className: "flex items-center justify-center py-6",
-			children: /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:circle-notch",
-				className: "text-muted-foreground size-4 animate-spin"
-			})
-		});
-		$[106] = showLoading;
-		$[107] = t42;
-	} else t42 = $[107];
-	let t43;
-	if ($[108] !== resolvedEmptyMessage) {
-		t43 = /* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage });
-		$[108] = resolvedEmptyMessage;
-		$[109] = t43;
-	} else t43 = $[109];
-	let t44;
-	if ($[110] !== canAddMore || $[111] !== filteredOptions || $[112] !== getOptionLabel || $[113] !== handleToggle || $[114] !== resolvedValue) {
-		let t45$1;
-		if ($[116] !== canAddMore || $[117] !== getOptionLabel || $[118] !== handleToggle || $[119] !== resolvedValue) {
-			t45$1 = (option_1) => {
-				const isSelected_0 = resolvedValue.includes(option_1.value);
-				const isDisabled = option_1.disabled || !isSelected_0 && !canAddMore;
-				return /* @__PURE__ */ jsxs(CommandItem, {
-					value: String(option_1.value),
-					onSelect: handleToggle,
-					disabled: isDisabled,
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: cn("flex size-4 items-center justify-center border", isSelected_0 ? "border-foreground bg-foreground text-background" : "border-muted-foreground/30"),
-							children: isSelected_0 && /* @__PURE__ */ jsx(Icon, {
-								icon: "ph:check",
-								className: "size-3"
-							})
-						}),
-						option_1.icon,
-						/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							children: getOptionLabel(option_1)
-						})
-					]
-				}, String(option_1.value));
-			};
-			$[116] = canAddMore;
-			$[117] = getOptionLabel;
-			$[118] = handleToggle;
-			$[119] = resolvedValue;
-			$[120] = t45$1;
-		} else t45$1 = $[120];
-		t44 = filteredOptions.map(t45$1);
-		$[110] = canAddMore;
-		$[111] = filteredOptions;
-		$[112] = getOptionLabel;
-		$[113] = handleToggle;
-		$[114] = resolvedValue;
-		$[115] = t44;
-	} else t44 = $[115];
-	let t45;
-	if ($[121] !== t44) {
-		t45 = /* @__PURE__ */ jsx(CommandGroup, { children: t44 });
-		$[121] = t44;
-		$[122] = t45;
-	} else t45 = $[122];
-	let t46;
-	if ($[123] !== t42 || $[124] !== t43 || $[125] !== t45) {
-		t46 = /* @__PURE__ */ jsxs(CommandList, { children: [
-			t42,
-			t43,
-			t45
-		] });
-		$[123] = t42;
-		$[124] = t43;
-		$[125] = t45;
-		$[126] = t46;
-	} else t46 = $[126];
-	let t47;
-	if ($[127] !== maxSelections || $[128] !== resolvedValue.length) {
-		t47 = maxSelections && /* @__PURE__ */ jsxs("div", {
-			className: "text-muted-foreground border-t p-2 text-center text-xs tabular-nums",
-			children: [
-				resolvedValue.length,
-				" / ",
-				maxSelections,
-				" selected"
-			]
-		});
-		$[127] = maxSelections;
-		$[128] = resolvedValue.length;
-		$[129] = t47;
-	} else t47 = $[129];
-	let t48;
-	if ($[130] !== t39 || $[131] !== t41 || $[132] !== t46 || $[133] !== t47) {
-		t48 = /* @__PURE__ */ jsxs(Command, {
-			shouldFilter: t39,
-			children: [
-				t41,
-				t46,
-				t47
-			]
-		});
-		$[130] = t39;
-		$[131] = t41;
-		$[132] = t46;
-		$[133] = t47;
-		$[134] = t48;
-	} else t48 = $[134];
-	const CommandContent = t48;
-	if (isMobile) {
-		let t49$1;
-		if ($[135] !== TriggerContent || $[136] !== disabled || $[137] !== handleTriggerKeyDown) {
-			t49$1 = /* @__PURE__ */ jsx(DrawerTrigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx("button", {
-					type: "button",
-					disabled,
-					onKeyDown: handleTriggerKeyDown,
-					className: "w-full text-left",
-					children: TriggerContent
+			children: [resolvedValue.length > 0 && !disabled && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				title: t("common.clear", "Clear all"),
+				onPointerDown: handleClearAll,
+				onClick: handleClearAll,
+				className: "hover:bg-muted inline-flex size-6 items-center justify-center rounded-md opacity-60 transition-[background-color,opacity] hover:opacity-100",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-3"
 				})
-			});
-			$[135] = TriggerContent;
-			$[136] = disabled;
-			$[137] = handleTriggerKeyDown;
-			$[138] = t49$1;
-		} else t49$1 = $[138];
-		let t50$1;
-		if ($[139] !== resolvedDrawerTitle) {
-			t50$1 = /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) });
-			$[139] = resolvedDrawerTitle;
-			$[140] = t50$1;
-		} else t50$1 = $[140];
-		let t51$1;
-		if ($[141] !== CommandContent) {
-			t51$1 = /* @__PURE__ */ jsx("div", {
-				className: "px-4 pb-6",
-				children: CommandContent
-			});
-			$[141] = CommandContent;
-			$[142] = t51$1;
-		} else t51$1 = $[142];
-		let t52;
-		if ($[143] !== t50$1 || $[144] !== t51$1) {
-			t52 = /* @__PURE__ */ jsxs(DrawerContent, { children: [t50$1, t51$1] });
-			$[143] = t50$1;
-			$[144] = t51$1;
-			$[145] = t52;
-		} else t52 = $[145];
-		let t53;
-		if ($[146] !== open || $[147] !== t49$1 || $[148] !== t52) {
-			t53 = /* @__PURE__ */ jsxs(Drawer, {
-				open,
-				onOpenChange: setOpen,
-				children: [t49$1, t52]
-			});
-			$[146] = open;
-			$[147] = t49$1;
-			$[148] = t52;
-			$[149] = t53;
-		} else t53 = $[149];
-		return t53;
-	}
-	let t49;
-	if ($[150] !== TriggerContent || $[151] !== disabled || $[152] !== handleTriggerKeyDown) {
-		t49 = /* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("button", {
+			}), /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:plus",
+				className: "size-3.5 opacity-50"
+			})]
+		})]
+	});
+	const CommandContent = /* @__PURE__ */ jsxs(Command, {
+		shouldFilter: !loadOptions,
+		children: [
+			/* @__PURE__ */ jsx(CommandInput, {
+				placeholder: t("ui.searchPlaceholder", "Search..."),
+				value: search,
+				onValueChange: setSearch
+			}),
+			/* @__PURE__ */ jsxs(CommandList, { children: [
+				showLoading && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-center py-6",
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:circle-notch",
+						className: "text-muted-foreground size-4 animate-spin"
+					})
+				}),
+				/* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage }),
+				/* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option) => {
+					const isSelected = resolvedValue.includes(option.value);
+					const isDisabled = option.disabled || !isSelected && !canAddMore;
+					const description = option.description ? resolveText(option.description) : void 0;
+					return /* @__PURE__ */ jsxs(CommandItem, {
+						value: String(option.value),
+						onSelect: handleToggle,
+						disabled: isDisabled,
+						className: cn("items-start", option.className),
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center border", isSelected ? "border-foreground bg-foreground text-background" : "border-muted-foreground/30"),
+								children: isSelected && /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:check",
+									className: "size-3"
+								})
+							}),
+							option.icon,
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-1 flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: getOptionLabel(option)
+								}), description && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground truncate text-xs",
+									children: description
+								})]
+							})
+						]
+					}, String(option.value));
+				}) })
+			] }),
+			maxSelections && /* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground border-t p-2 text-center text-xs tabular-nums",
+				children: [
+					resolvedValue.length,
+					" / ",
+					maxSelections,
+					" selected"
+				]
+			})
+		]
+	});
+	if (isMobile) return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(DrawerTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled,
+				onKeyDown: handleTriggerKeyDown,
+				className: "w-full text-left",
+				children: TriggerContent
+			})
+		}), /* @__PURE__ */ jsxs(DrawerContent, { children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) }), /* @__PURE__ */ jsx("div", {
+			className: "px-4 pb-6",
+			children: CommandContent
+		})] })]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			disabled,
 			onKeyDown: handleTriggerKeyDown,
 			className: "w-full text-left",
 			children: TriggerContent
-		}) });
-		$[150] = TriggerContent;
-		$[151] = disabled;
-		$[152] = handleTriggerKeyDown;
-		$[153] = t49;
-	} else t49 = $[153];
-	let t50;
-	if ($[154] !== CommandContent) {
-		t50 = /* @__PURE__ */ jsx(PopoverContent, {
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-(--anchor-width) p-0",
 			align: "start",
 			children: CommandContent
-		});
-		$[154] = CommandContent;
-		$[155] = t50;
-	} else t50 = $[155];
-	let t51;
-	if ($[156] !== open || $[157] !== t49 || $[158] !== t50) {
-		t51 = /* @__PURE__ */ jsxs(Popover, {
-			open,
-			onOpenChange: setOpen,
-			children: [t49, t50]
-		});
-		$[156] = open;
-		$[157] = t49;
-		$[158] = t50;
-		$[159] = t51;
-	} else t51 = $[159];
-	return t51;
-}
-function _temp(map, opt) {
-	return new Map(map).set(opt.value, opt);
+		})]
+	});
 }
 
 //#endregion