"use client";
import { cn } from "./index3.js";
import { Popover, PopoverPopup, PopoverTrigger } from "./index79.js";
import { Kbd } from "./index83.js";
import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandNamespace, CommandSeparator } from "./index389.js";
import { cva } from "class-variance-authority";
import { ChevronDown } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/molecules/forms/ComboboxMenu/ComboboxMenu.tsx
var comboboxTriggerVariants = cva("inline-flex items-center justify-between gap-2 whitespace-nowrap", {
	variants: {
		size: {
			sm: "h-8 px-3 text-sm",
			md: "h-9 px-3.5 py-2.5 text-sm",
			lg: "h-10 px-4 text-base"
		},
		variant: {
			default: "border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
			outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
			ghost: "hover:bg-accent hover:text-accent-foreground transition-colors duration-200 ease-smooth motion-reduce:transition-none",
			primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-0 transition-colors duration-200 ease-smooth motion-reduce:transition-none"
		}
	},
	defaultVariants: {
		size: "md",
		variant: "default"
	}
});
var comboboxContentVariants = cva("", {
	variants: { width: {
		auto: "w-auto min-w-[200px]",
		sm: "w-[200px]",
		md: "w-[248px]",
		lg: "w-[320px]",
		full: "w-[var(--transform-origin-x)]"
	} },
	defaultVariants: { width: "auto" }
});
cva("relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", {
	variants: { variant: {
		default: "text-foreground data-[selected=true]:bg-muted data-[selected=true]:text-foreground",
		destructive: "text-destructive data-[selected=true]:bg-destructive/10 data-[selected=true]:text-destructive"
	} },
	defaultVariants: { variant: "default" }
});
function ComboboxHeader({ avatar, title, subtitle, children, className, ...props }) {
	if (children) return /* @__PURE__ */ jsx("div", {
		"data-slot": "combobox-header",
		className: cn("border-b border-border px-4 py-3", className),
		...props,
		children
	});
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "combobox-header",
		className: cn("border-b border-border px-4 py-3", className),
		...props,
		children: /* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-3",
			children: [avatar, /* @__PURE__ */ jsxs("div", {
				className: "flex min-w-0 flex-col",
				children: [title && /* @__PURE__ */ jsx("span", {
					className: "truncate text-sm font-semibold text-foreground",
					children: title
				}), subtitle && /* @__PURE__ */ jsx("span", {
					className: "truncate text-sm text-muted-foreground",
					children: subtitle
				})]
			})]
		})
	});
}
function ComboboxShortcut({ className, children, ...props }) {
	return /* @__PURE__ */ jsx(Kbd, {
		variant: "outline",
		size: "xs",
		className: cn("ms-auto", className),
		...props,
		children
	});
}
function ComboboxMenu({ options = [], groups = [], value, onValueChange, placeholder = "Select an option...", searchPlaceholder = "Search...", emptyText = "No results found.", multiple = false, disabled = false, searchable = true, trigger, header, dir = "ltr", size, variant, width, triggerClassName, contentClassName, open: controlledOpen, onOpenChange, side = "bottom", align = "start", maxHeight = 256 }) {
	const [internalOpen, setInternalOpen] = React.useState(false);
	const isControlled = controlledOpen !== void 0;
	const open = isControlled ? controlledOpen : internalOpen;
	const handleOpenChange = React.useCallback((newOpen) => {
		if (!isControlled) setInternalOpen(newOpen);
		onOpenChange?.(newOpen);
	}, [isControlled, onOpenChange]);
	const selectedValues = React.useMemo(() => {
		if (!value) return [];
		return Array.isArray(value) ? value : [value];
	}, [value]);
	const allOptions = React.useMemo(() => {
		if (groups.length > 0) return groups.flatMap((g) => g.options);
		return options;
	}, [options, groups]);
	const selectedLabels = React.useMemo(() => {
		return selectedValues.map((v) => allOptions.find((opt) => opt.value === v)?.label).filter(Boolean).join(", ");
	}, [selectedValues, allOptions]);
	const handleSelect = React.useCallback((optionValue) => {
		if (multiple) {
			const newValues = selectedValues.includes(optionValue) ? selectedValues.filter((v) => v !== optionValue) : [...selectedValues, optionValue];
			onValueChange?.(newValues);
		} else {
			onValueChange?.(optionValue);
			handleOpenChange(false);
		}
	}, [
		multiple,
		selectedValues,
		onValueChange,
		handleOpenChange
	]);
	const isRtl = dir === "rtl";
	const renderOption = (option) => {
		const isSelected = selectedValues.includes(option.value);
		return /* @__PURE__ */ jsxs(CommandItem, {
			value: option.value,
			onSelect: () => handleSelect(option.value),
			disabled: option.disabled,
			"data-checked": isSelected,
			className: cn("mx-1.5 my-px cursor-pointer", "flex items-center gap-2 overflow-hidden rounded-sm p-2", "text-base leading-6", "bg-card! data-selected:bg-card! hover:bg-accent!", "transition-colors duration-150 ease-smooth motion-reduce:transition-none", isSelected && "bg-primary/10! data-selected:bg-primary/10! hover:bg-primary/20!", option.disabled && "text-muted-foreground", isRtl && "text-right"),
			dir,
			children: [
				option.icon && /* @__PURE__ */ jsx("span", {
					className: cn("size-4 shrink-0 text-muted-foreground", option.disabled && "opacity-50"),
					children: option.icon
				}),
				/* @__PURE__ */ jsxs("div", {
					className: "flex flex-1 items-center gap-2",
					children: [/* @__PURE__ */ jsx("span", {
						className: "font-medium text-foreground",
						children: option.label
					}), option.subtitle && /* @__PURE__ */ jsx("span", {
						className: "font-normal text-secondary-foreground",
						children: option.subtitle
					})]
				}),
				option.description && /* @__PURE__ */ jsx("span", {
					className: "text-xs text-muted-foreground",
					children: option.description
				}),
				option.shortcut && /* @__PURE__ */ jsx(ComboboxShortcut, { children: option.shortcut })
			]
		}, option.value);
	};
	const renderContent = () => {
		if (groups.length > 0) return groups.map((group, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
			group.label && /* @__PURE__ */ jsx(CommandGroup, {
				heading: group.label,
				children: group.options.map(renderOption)
			}),
			!group.label && group.options.map(renderOption),
			index < groups.length - 1 && /* @__PURE__ */ jsx(CommandSeparator, { className: "my-1" })
		] }, group.label));
		return options.map(renderOption);
	};
	return /* @__PURE__ */ jsxs(Popover, {
		open,
		onOpenChange: handleOpenChange,
		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
			disabled,
			className: cn(!trigger && comboboxTriggerVariants({
				size,
				variant
			}), !trigger && "rounded-full font-semibold", triggerClassName),
			render: trigger,
			children: !trigger && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
				className: cn("truncate", !selectedLabels && "text-muted-foreground"),
				children: selectedLabels || placeholder
			}), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-5 shrink-0 transition-transform duration-200 ease-smooth motion-reduce:transition-none", variant === "primary" ? "opacity-100" : "opacity-50", open && "rotate-180") })] })
		}), /* @__PURE__ */ jsxs(PopoverPopup, {
			side,
			align: isRtl ? align === "start" ? "end" : align === "end" ? "start" : align : align,
			className: cn("p-0 shadow-lg", comboboxContentVariants({ width }), contentClassName),
			children: [header && /* @__PURE__ */ jsx(ComboboxHeader, {
				avatar: header.avatar,
				title: header.title,
				subtitle: header.subtitle,
				children: header.children
			}), /* @__PURE__ */ jsxs(CommandNamespace, {
				dir,
				className: cn(isRtl && "[&_[cmdk-input-wrapper]]:flex-row-reverse"),
				children: [searchable && /* @__PURE__ */ jsx(CommandInput, {
					placeholder: searchPlaceholder,
					className: cn(isRtl && "text-right")
				}), /* @__PURE__ */ jsxs(CommandList, {
					style: { maxHeight },
					className: "py-1",
					children: [/* @__PURE__ */ jsx(CommandEmpty, {
						className: cn(isRtl && "text-right"),
						children: emptyText
					}), renderContent()]
				})]
			})]
		})]
	});
}
function ComboboxRoot({ children, open, onOpenChange, defaultOpen = false }) {
	return /* @__PURE__ */ jsx(Popover, {
		open,
		onOpenChange,
		defaultOpen,
		children
	});
}
function ComboboxTrigger({ className, children, ...props }) {
	return /* @__PURE__ */ jsx(PopoverTrigger, {
		className,
		...props,
		children
	});
}
function ComboboxContent({ className, children, dir = "ltr", searchable = true, searchPlaceholder = "Search...", emptyText = "No results found.", side = "bottom", align = "start", ...props }) {
	const isRtl = dir === "rtl";
	return /* @__PURE__ */ jsx(PopoverPopup, {
		side,
		align: isRtl ? align === "start" ? "end" : align === "end" ? "start" : align : align,
		className: cn("w-[248px] p-0 shadow-lg", className),
		...props,
		children: /* @__PURE__ */ jsxs(CommandNamespace, {
			dir,
			className: cn(isRtl && "[&_[cmdk-input-wrapper]]:flex-row-reverse"),
			children: [searchable && /* @__PURE__ */ jsx(CommandInput, {
				placeholder: searchPlaceholder,
				className: cn(isRtl && "text-right")
			}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, {
				className: cn(isRtl && "text-right"),
				children: emptyText
			}), children] })]
		})
	});
}
function ComboboxItem({ className, children, icon, subtitle, shortcut, selected, destructive = false, dir = "ltr", ...props }) {
	return /* @__PURE__ */ jsxs(CommandItem, {
		"data-checked": selected,
		dir,
		className: cn("mx-1.5 my-px cursor-pointer", "flex items-center gap-2 overflow-hidden rounded-sm p-2", "text-base leading-6", "bg-card! data-selected:bg-card! hover:bg-accent!", "transition-colors duration-150 ease-smooth motion-reduce:transition-none", selected && "bg-primary/10! data-selected:bg-primary/10! hover:bg-primary/20!", destructive && "text-destructive focus:text-destructive", dir === "rtl" && "text-right", className),
		...props,
		children: [
			icon && /* @__PURE__ */ jsx("span", {
				className: cn("size-4 shrink-0", destructive ? "text-destructive" : "text-muted-foreground"),
				children: icon
			}),
			/* @__PURE__ */ jsx("span", {
				className: "flex-1 font-medium text-foreground",
				children
			}),
			subtitle && /* @__PURE__ */ jsx("span", {
				className: "font-normal text-muted-foreground",
				children: subtitle
			}),
			shortcut && /* @__PURE__ */ jsx(ComboboxShortcut, { children: shortcut })
		]
	});
}
var ComboboxGroup = ({ className, dir = "ltr", ...props }) => {
	return /* @__PURE__ */ jsx(CommandGroup, {
		className: cn(dir === "rtl" && "[&_[cmdk-group-heading]]:text-right", className),
		...props
	});
};
function ComboboxSeparator(props) {
	return /* @__PURE__ */ jsx(CommandSeparator, {
		className: "my-1",
		...props
	});
}
ComboboxMenu.displayName = "ComboboxMenu";
ComboboxRoot.displayName = "ComboboxRoot";
ComboboxTrigger.displayName = "ComboboxTrigger";
ComboboxContent.displayName = "ComboboxContent";
ComboboxItem.displayName = "ComboboxItem";
ComboboxGroup.displayName = "ComboboxGroup";
ComboboxSeparator.displayName = "ComboboxSeparator";
ComboboxHeader.displayName = "ComboboxHeader";
ComboboxShortcut.displayName = "ComboboxShortcut";
//#endregion
export { ComboboxContent, ComboboxGroup, ComboboxHeader, ComboboxItem, ComboboxMenu, ComboboxRoot, ComboboxSeparator, ComboboxShortcut, ComboboxTrigger, comboboxContentVariants, comboboxTriggerVariants };

//# sourceMappingURL=index390.js.map