import { cn } from "../../utils/cn.mjs";
import { Button } from "../Button/Button.mjs";
import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
import { jsx } from "react/jsx-runtime";

//#region src/components/DropDown/index.tsx
/**
* DropDown Component
*
* A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.
* Supports hover, focus, and controlled visibility states with proper accessibility features.
*
* @example
* ```tsx
* // Basic hover dropdown
* <DropDown identifier="menu">
*   <DropDown.Trigger identifier="menu">
*     Open Menu
*   </DropDown.Trigger>
*   <DropDown.Panel identifier="menu" isOverable>
*     <div>Menu content</div>
*   </DropDown.Panel>
* </DropDown>
*
* // Focus-based dropdown for accessibility
* <DropDown identifier="accessible-menu">
*   <DropDown.Trigger identifier="accessible-menu">
*     Keyboard Accessible Menu
*   </DropDown.Trigger>
*   <DropDown.Panel identifier="accessible-menu" isFocusable>
*     <div>Accessible content</div>
*   </DropDown.Panel>
* </DropDown>
*
* // Controlled dropdown
* <DropDown identifier="controlled">
*   <DropDown.Trigger identifier="controlled">
*     Controlled Menu
*   </DropDown.Trigger>
*   <DropDown.Panel identifier="controlled" isHidden={!isOpen}>
*     <div>Controlled content</div>
*   </DropDown.Panel>
* </DropDown>
* ```
*
* @component
* @accessibility
* - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)
* - Supports keyboard navigation with focus management
* - Screen reader compatible with proper role and labeling
* - Maintains focus trap within dropdown when needed
*/
const DropDown = ({ children, className, identifier,...props }) => /* @__PURE__ */ jsx("div", {
	className: cn(`group/dropdown relative flex`, className),
	"aria-label": `DropDown ${identifier}`,
	id: `dropdown-container-${identifier}`,
	...props,
	children
});
/**
* DropDown.Trigger Component
*
* The clickable/focusable element that controls the dropdown panel visibility.
* Built on top of the Button component with enhanced dropdown-specific behaviors.
*
* @example
* ```tsx
* <DropDown.Trigger identifier="menu">
*   <div>Click to open</div>
* </DropDown.Trigger>
* ```
*
* @component
* @accessibility
* - Automatically generates appropriate ARIA attributes
* - Maintains proper focus management across browsers
* - Works with keyboard navigation (Tab, Enter, Space)
* - Announces dropdown state to screen readers
*
* @note Don't nest Button components inside the Trigger - it's already a button
*/
const Trigger = ({ children, identifier, className, label,...props }) => /* @__PURE__ */ jsx(Button, {
	className: cn("w-full cursor-pointer", className),
	label: label ?? `Open panel ${identifier}`,
	"aria-haspopup": "true",
	"aria-controls": `dropdown-panel-${identifier}`,
	id: `dropdown-trigger-${identifier}`,
	onClick: (e) => {
		e.currentTarget.focus();
	},
	variant: "none",
	...props,
	children
});
/**
* Alignment options for the dropdown panel relative to the trigger
*/
let DropDownAlign = /* @__PURE__ */ function(DropDownAlign$1) {
	/** Align panel to the start (left in LTR, right in RTL) of the trigger */
	DropDownAlign$1["START"] = "start";
	/** Align panel to the end (right in LTR, left in RTL) of the trigger */
	DropDownAlign$1["END"] = "end";
	return DropDownAlign$1;
}({});
/**
* DropDown.Panel Component
*
* The content area that appears when the dropdown is triggered.
* Supports multiple trigger methods (hover, focus, controlled) with smooth animations.
*
* @example
* ```tsx
* // Hover-triggered panel
* <DropDown.Panel identifier="menu" isOverable>
*   <div>Content appears on hover</div>
* </DropDown.Panel>
*
* // Focus-triggered panel (accessible)
* <DropDown.Panel identifier="menu" isFocusable>
*   <div>Content appears on focus</div>
* </DropDown.Panel>
*
* // Controlled panel
* <DropDown.Panel identifier="menu" isHidden={!isOpen}>
*   <div>Content visibility controlled externally</div>
* </DropDown.Panel>
*
* // Right-aligned panel
* <DropDown.Panel identifier="menu" align={DropDownAlign.END} isOverable>
*   <div>Right-aligned content</div>
* </DropDown.Panel>
* ```
*
* @component
* @accessibility
* - Proper ARIA attributes (role, aria-labelledby, aria-hidden)
* - Smooth height transitions with MaxHeightSmoother
* - Keyboard navigation support when isFocusable is enabled
* - Screen reader announcements for state changes
*/
const Panel = ({ children, isHidden = void 0, isOverable = false, isFocusable = false, align = DropDownAlign.START, identifier, className,...props }) => /* @__PURE__ */ jsx("div", {
	className: cn("absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", className),
	"aria-hidden": isHidden,
	role: "region",
	"aria-labelledby": `dropdown-trigger-${identifier}`,
	id: `dropdown-panel-${identifier}`,
	children: /* @__PURE__ */ jsx(MaxHeightSmoother, {
		isHidden,
		className: cn("overflow-x-visible", isHidden === false && "invisible", isHidden === true && "visible", isOverable && "group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]", isFocusable && "group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]"),
		...props,
		children
	})
});
DropDown.Trigger = Trigger;
DropDown.Panel = Panel;

//#endregion
export { DropDown, DropDownAlign };
//# sourceMappingURL=index.mjs.map