import { C as Icon, _ as CommandItem, b as FormMessageList, d as FormGroup, f as FormDescription, g as CommandInput, h as CommandGroup, l as PopoverContent, m as CommandEmpty, p as Command, s as Popover, t as SplittedInputDiff, u as PopoverTrigger, v as CommandList, x as FormLabel, y as P } from "./splitted-input-diff-kvHJ6NHp.js";
import { Zt as cn, nn as Slot } from "./connect-MjNGHHUz-BfDIyhte.js";
import { t as cva } from "./dist-SvvKgIin.js";
import React, { useCallback, useEffect, useId, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region node_modules/@powerhousedao/document-engineering/dist/src/scalars/components/fragments/button/button.js
const buttonVariants = cva(cn("inline-flex items-center justify-center gap-2", "whitespace-nowrap rounded-md text-sm font-medium", "transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:pointer-events-none", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"), {
	variants: { variant: {
		default: "",
		outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
		ghost: "hover:bg-accent hover:text-accent-foreground"
	} },
	defaultVariants: { variant: "default" }
});
const Button = React.forwardRef(({ variant, className, asChild = false, ...props }, ref) => {
	return jsx(asChild ? Slot : "button", {
		className: cn(buttonVariants({
			variant,
			className
		})),
		ref,
		...props
	});
});
Button.displayName = "Button";
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/render-icon.js
const renderIcon = (IconComponent, className) => {
	if (typeof IconComponent === "string") return jsx(Icon, {
		name: IconComponent,
		size: 16,
		className
	});
	return IconComponent && jsx(IconComponent, { className: cn("size-4", className) });
};
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/command-list-item.js
const CommandListItem = ({ options = [], selectedValues, multiple, selectionIcon, selectionIconPosition, hasAnyIcon, toggleOption, tabIndex, className }) => {
	return jsx(Fragment$1, { children: options.map((opt) => {
		const isSelected = selectedValues.includes(opt.value);
		return jsxs(CommandItem, {
			tabIndex,
			keywords: [opt.label, opt.value],
			value: opt.value,
			onSelect: () => {
				if (!opt.disabled) toggleOption(opt.value);
			},
			disabled: opt.disabled,
			className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900", opt.disabled && "!pointer-events-auto cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent", className),
			role: "option",
			"aria-selected": isSelected,
			children: [
				selectionIcon === "auto" && (multiple ? jsx("div", {
					className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", isSelected && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
					children: isSelected && jsx(Icon, {
						name: "Checkmark",
						size: 16
					})
				}) : jsx("div", {
					className: cn("relative size-4 rounded-full border", isSelected ? "border-gray-900 dark:border-gray-400" : "border-gray-800 dark:border-gray-400", "bg-transparent dark:bg-transparent"),
					children: isSelected && jsx("div", { className: "absolute left-1/2 top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-900 dark:bg-gray-400" })
				})),
				selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && jsx("div", {
					className: "size-4",
					children: selectionIconPosition === "left" && isSelected && jsx(Icon, {
						name: "Checkmark",
						size: 16,
						className: "text-gray-900 dark:text-gray-50"
					})
				}),
				renderIcon(opt.icon, "text-gray-700 dark:text-gray-400"),
				jsx("span", {
					className: cn("flex-1 truncate text-[14px] font-normal leading-4", "text-gray-700 dark:text-gray-500", opt.disabled && "text-gray-600 dark:text-gray-600"),
					children: opt.label
				}),
				selectionIcon === "checkmark" && selectionIconPosition === "right" && jsx("div", {
					className: "size-4",
					children: isSelected && jsx(Icon, {
						name: "Checkmark",
						size: 16,
						className: "text-gray-900 dark:text-gray-50"
					})
				})
			]
		}, `favorite-${opt.value}`);
	}) });
};
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/content.js
const Content = ({ searchable, commandListRef, multiple, selectedValues, selectionIcon, selectionIconPosition, options = [], toggleAll, toggleOption, favoriteOptions = [] }) => {
	const allOptions = [...favoriteOptions, ...options];
	const enabledOptions = allOptions.filter((opt) => !opt.disabled);
	const hasAnyIcon = allOptions.some((opt) => opt.icon);
	const cmdkSearch = P((state) => state.search);
	useEffect(() => {
		commandListRef.current?.scrollTo({
			top: 0,
			behavior: "instant"
		});
	}, [commandListRef, cmdkSearch]);
	return jsxs("div", {
		className: cn("select__content"),
		children: [searchable && jsx(CommandInput, {
			placeholder: "Search...",
			onKeyDown: (e) => {
				if (!([
					"ArrowUp",
					"ArrowDown",
					"Enter"
				].includes(e.key) && enabledOptions.length > 0)) e.stopPropagation();
			},
			wrapperClassName: "rounded-t",
			className: "text-gray-900 dark:text-gray-50 select__search"
		}), jsxs(CommandList, {
			ref: commandListRef,
			tabIndex: !searchable ? 0 : void 0,
			className: "select__list",
			children: [
				jsx(CommandEmpty, {
					className: "p-4 text-center text-[14px] font-normal leading-5 text-gray-700 dark:text-gray-400",
					children: "No results found."
				}),
				multiple && cmdkSearch === "" && jsx(CommandGroup, {
					className: "pb-0",
					children: jsx(CommandItem, {
						value: "select-all",
						onSelect: toggleAll,
						disabled: false,
						className: cn("cursor-pointer", "data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900"),
						role: "option",
						"aria-selected": selectedValues.length === enabledOptions.length,
						children: jsxs("div", {
							className: "flex w-full items-center gap-2",
							children: [
								selectionIcon === "auto" && jsx("div", {
									className: cn("flex size-4 items-center justify-center rounded-md border", "border-gray-700 dark:border-gray-400", selectedValues.length === enabledOptions.length && "bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black"),
									children: selectedValues.length === enabledOptions.length && jsx(Icon, {
										name: "Checkmark",
										size: 16
									})
								}),
								selectionIcon === "checkmark" && !(selectionIconPosition === "right" && hasAnyIcon) && jsx("div", {
									className: "size-4",
									children: selectionIconPosition === "left" && selectedValues.length === enabledOptions.length && jsx(Icon, {
										name: "Checkmark",
										size: 16,
										className: "text-gray-900 dark:text-gray-50"
									})
								}),
								jsx("span", {
									className: "text-[14px] font-semibold leading-4 text-gray-900 dark:text-gray-50",
									children: selectedValues.length === enabledOptions.length ? "Deselect All" : "Select All"
								}),
								selectionIcon === "checkmark" && selectionIconPosition === "right" && jsx("div", {
									className: "ml-auto size-4",
									children: selectedValues.length === enabledOptions.length && jsx(Icon, {
										name: "Checkmark",
										size: 16,
										className: "text-gray-900 dark:text-gray-50"
									})
								})
							]
						})
					})
				}),
				jsxs(CommandGroup, {
					className: multiple && cmdkSearch === "" ? "pt-0" : void 0,
					children: [
						jsx(CommandListItem, {
							options: favoriteOptions,
							selectedValues,
							multiple,
							selectionIcon,
							selectionIconPosition,
							hasAnyIcon,
							toggleOption,
							tabIndex: !searchable ? 0 : void 0,
							className: "select__list-item-favorite"
						}),
						favoriteOptions.length > 0 && jsx("div", { className: "my-1 border-b border-gray-300 dark:border-gray-600" }),
						jsx(CommandListItem, {
							options,
							selectedValues,
							multiple,
							selectionIcon,
							selectionIconPosition,
							hasAnyIcon,
							toggleOption,
							tabIndex: !searchable ? 0 : void 0,
							className: "select__list-item"
						})
					]
				})
			]
		})]
	});
};
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/select-diff.js
const SelectDiff = ({ value = "", label, required, viewMode, baseValue = "", baseIcon, icon }) => {
	return jsxs(FormGroup, { children: [label && jsx(FormLabel, {
		disabled: true,
		required,
		children: label
	}), jsx(SplittedInputDiff, {
		baseValue,
		value,
		viewMode,
		diffMode: "sentences",
		baseIcon,
		icon
	})] });
};
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/selected-content.js
const SelectedContent = ({ selectedValues, options = [], multiple, searchable, placeholder, handleClear }) => {
	if (selectedValues.length === 0) return jsxs("div", {
		className: cn("mx-auto flex w-full items-center", placeholder ? "justify-between gap-2" : "justify-end"),
		children: [placeholder && jsx("span", {
			className: "text-[14px] font-normal leading-5 truncate text-gray-600 dark:text-gray-500",
			children: placeholder
		}), searchable ? jsx(Icon, {
			name: "CaretSort",
			size: 16,
			className: "cursor-pointer text-gray-700 dark:text-gray-400"
		}) : jsx(Icon, {
			name: "ChevronDown",
			size: 16,
			className: "cursor-pointer text-gray-700 dark:text-gray-400"
		})]
	});
	return jsxs("div", {
		className: cn("flex w-full items-center justify-between gap-2", "select__list-item--selected"),
		children: [jsx("div", {
			className: cn("max-w-full truncate text-gray-900 dark:text-gray-50", !multiple && "flex items-center gap-2"),
			children: selectedValues.map((value, index) => {
				const option = options.find((o) => o.value === value);
				return !multiple ? jsxs("div", {
					className: cn("flex items-center gap-2 truncate"),
					children: [renderIcon(option?.icon), jsx("span", {
						className: cn("truncate text-[14px] font-normal leading-5"),
						children: option?.label
					})]
				}, value) : jsx("span", {
					className: cn("text-[14px] font-normal leading-5", index !== selectedValues.length - 1 && "mr-1"),
					children: index !== selectedValues.length - 1 ? `${option?.label},` : option?.label
				}, value);
			})
		}), jsxs("div", {
			className: "flex items-center justify-between gap-2",
			children: [multiple && selectedValues.length > 0 && jsx("div", {
				onClick: (e) => {
					e.preventDefault();
					e.stopPropagation();
					handleClear();
				},
				className: "size-4 p-0",
				children: jsx(Icon, {
					name: "XmarkLight",
					size: 16,
					className: "cursor-pointer text-gray-700 dark:text-gray-400"
				})
			}), searchable ? jsx(Icon, {
				name: "CaretSort",
				size: 16,
				className: "cursor-pointer text-gray-700 dark:text-gray-400"
			}) : jsx(Icon, {
				name: "ChevronDown",
				size: 16,
				className: "cursor-pointer text-gray-700 dark:text-gray-400"
			})]
		})]
	});
};
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/use-select.js
function useSelect({ options = [], multiple = false, clearable = true, defaultValue, value, onChange }) {
	const isInternalChange = useRef(false);
	const commandListRef = useRef(null);
	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
	const [selectedValues, setSelectedValues] = useState(() => {
		const initialValue = value ?? defaultValue ?? [];
		if (initialValue === "") return [];
		return Array.isArray(initialValue) ? initialValue : [initialValue];
	});
	useEffect(() => {
		if (isInternalChange.current) {
			isInternalChange.current = false;
			return;
		}
		const newValue = value ?? defaultValue ?? [];
		if (newValue === "") setSelectedValues([]);
		else setSelectedValues(Array.isArray(newValue) ? newValue : [newValue]);
	}, [value]);
	const handleOpenChange = useCallback((open) => {
		setIsPopoverOpen(open);
	}, []);
	const toggleOption = useCallback((optionValue) => {
		isInternalChange.current = true;
		let newValues;
		if (multiple) newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
		else {
			if (selectedValues[0] === optionValue && !clearable) {
				setIsPopoverOpen(false);
				return;
			}
			newValues = selectedValues[0] === optionValue ? [] : [optionValue];
			setIsPopoverOpen(false);
		}
		setSelectedValues(newValues);
		onChange?.(multiple ? newValues : newValues[0] ?? "");
	}, [
		multiple,
		clearable,
		selectedValues,
		onChange
	]);
	const handleClear = useCallback(() => {
		isInternalChange.current = true;
		setSelectedValues([]);
		onChange?.(multiple ? [] : "");
	}, [multiple, onChange]);
	const toggleAll = useCallback(() => {
		isInternalChange.current = true;
		const enabledOptions = options.filter((opt) => !opt.disabled).map((opt) => opt.value);
		const newValues = selectedValues.length === enabledOptions.length ? [] : enabledOptions;
		setSelectedValues(newValues);
		onChange?.(multiple ? newValues : newValues[0]);
	}, [
		options,
		selectedValues,
		multiple,
		onChange
	]);
	const prevMultiple = useRef(multiple);
	useEffect(() => {
		if (prevMultiple.current === multiple) return;
		prevMultiple.current = multiple;
		if (!multiple && selectedValues.length > 1) {
			isInternalChange.current = true;
			setSelectedValues([selectedValues[0]]);
			onChange?.(selectedValues[0]);
			return;
		}
		if (selectedValues.length > 0) {
			isInternalChange.current = true;
			onChange?.(multiple ? [selectedValues[0]] : selectedValues[0]);
		}
	}, [multiple]);
	return {
		selectedValues,
		isPopoverOpen,
		commandListRef,
		toggleOption,
		handleClear,
		toggleAll,
		handleOpenChange
	};
}
//#endregion
//#region node_modules/@powerhousedao/document-engineering/dist/src/ui/components/data-entry/select/select.js
const Select = React.forwardRef(({ options = [], favoriteOptions = [], defaultValue, value, onChange, onBlur, id: propId, name, label, required, disabled, errors = [], warnings = [], multiple, selectionIcon = "auto", selectionIconPosition = "left", searchable, clearable = true, description, placeholder, className, contentClassName, contentAlign = "start", viewMode = "edition", baseValue, baseIcon, ...props }, ref) => {
	const prefix = useId();
	const id = propId ?? `${prefix}-select`;
	const allOptions = [...favoriteOptions, ...options];
	const { selectedValues, isPopoverOpen, commandListRef, toggleOption, handleClear, toggleAll, handleOpenChange } = useSelect({
		options: allOptions,
		multiple,
		clearable,
		defaultValue,
		value,
		onChange
	});
	const onTriggerBlur = useCallback((e) => {
		if (!isPopoverOpen) onBlur?.(e);
	}, [onBlur, isPopoverOpen]);
	const selectedLabels = selectedValues.map((val) => allOptions.find((opt) => opt.value === val)?.label ?? val).join(", ");
	const baseLabels = baseValue !== void 0 && baseValue !== "" ? (Array.isArray(baseValue) ? baseValue : [baseValue]).map((val) => allOptions.find((opt) => opt.value === val)?.label ?? val).join(", ") : baseValue;
	const icon = selectedValues.length === 1 ? allOptions.find((opt) => opt.value === selectedValues[0])?.icon : void 0;
	if (viewMode === "edition") return jsxs(FormGroup, { children: [
		label && jsx(FormLabel, {
			htmlFor: id,
			required,
			disabled,
			hasError: errors.length > 0,
			inline: false,
			onClick: (e) => {
				e.preventDefault();
				e.target.control?.focus();
			},
			children: label
		}),
		jsxs(Popover, {
			open: isPopoverOpen,
			onOpenChange: (open) => {
				handleOpenChange(open);
				if (!open && document.activeElement?.id !== id) onBlur?.({ target: {} });
			},
			children: [jsx(PopoverTrigger, {
				asChild: true,
				children: jsx(Button, {
					id,
					name,
					type: "button",
					role: "combobox",
					onBlur: onTriggerBlur,
					onKeyDown: (e) => {
						if (isPopoverOpen || /^[0-9]$/.test(e.key) || !/^[a-zA-Z]$/.test(e.key)) return;
						handleOpenChange(true);
					},
					disabled,
					"aria-invalid": errors.length > 0,
					"aria-label": label ? void 0 : multiple ? "Multi select" : "Select",
					"aria-required": required,
					"aria-expanded": isPopoverOpen,
					className: cn("flex h-9 w-full items-center justify-between px-3 py-2", "dark:border-charcoal-700 dark:bg-charcoal-900 rounded-md border border-gray-300 bg-white", "hover:border-gray-300 hover:bg-gray-100", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800", "dark:focus:ring-charcoal-300 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "dark:focus-visible:ring-charcoal-300 focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0", disabled && ["!pointer-events-auto cursor-not-allowed bg-gray-50", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900 hover:border-gray-300 hover:bg-gray-50"], "select", className),
					...props,
					ref,
					children: jsx(SelectedContent, {
						selectedValues,
						options: allOptions,
						multiple,
						searchable,
						placeholder,
						handleClear
					})
				})
			}), jsx(PopoverContent, {
				align: contentAlign,
				onEscapeKeyDown: (e) => {
					e.preventDefault();
					handleOpenChange(false);
				},
				className: contentClassName,
				children: jsx(Command, {
					defaultValue: !multiple && selectedValues[0] ? allOptions.find((opt) => opt.value === selectedValues[0])?.label : void 0,
					children: jsx(Content, {
						favoriteOptions,
						searchable,
						commandListRef,
						multiple,
						selectedValues,
						selectionIcon,
						selectionIconPosition,
						options,
						toggleAll,
						toggleOption
					})
				})
			})]
		}),
		description && jsx(FormDescription, { children: description }),
		warnings.length > 0 && jsx(FormMessageList, {
			messages: warnings,
			type: "warning"
		}),
		errors.length > 0 && jsx(FormMessageList, {
			messages: errors,
			type: "error"
		})
	] });
	return jsx(SelectDiff, {
		value: selectedLabels,
		label,
		required,
		viewMode,
		baseValue: baseLabels,
		baseIcon: renderIcon(baseIcon),
		icon: renderIcon(icon)
	});
});
Select.displayName = "Select";
//#endregion
export { buttonVariants as i, SelectDiff as n, Button as r, Select as t };

//# sourceMappingURL=select-Z-3s_k3i.js.map