import { cn } from "../../utils/cn.mjs";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Navbar/Burger.tsx
/**
* Shared styles for burger menu lines
* Creates the classic hamburger menu appearance with smooth transitions
*/
const lineStyle = "bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300";
/**
* Burger Menu Component
*
* An animated hamburger menu icon that transforms between closed and open states.
* Commonly used in mobile navigation to toggle menu visibility.
*
* Features:
* - Smooth CSS transitions between states (300ms duration)
* - Accessible with proper ARIA attributes
* - Screen reader support with descriptive labels
* - Role-based interaction (switch role for toggle behavior)
* - Responsive sizing (40px × 40px clickable area)
* - Classic three-line hamburger design
*
* Animation States:
* - Closed: Three horizontal parallel lines
* - Open: Top and bottom lines rotate to form an X, middle line fades out
*
* Accessibility Features:
* - `role="switch"` indicates toggle behavior
* - `aria-expanded` reflects current menu state
* - `aria-checked` provides current selection state
* - `aria-controls` links to controlled menu element
* - Dynamic `aria-label` describes current action
*
* @example
* Basic usage:
* ```tsx
* const [isMenuOpen, setIsMenuOpen] = useState(false);
*
* <Burger
*   isActive={isMenuOpen}
*   onClick={() => setIsMenuOpen(!isMenuOpen)}
* />
* ```
*
* @example
* With custom styling:
* ```tsx
* <Burger
*   isActive={isMenuOpen}
*   onClick={toggleMenu}
*   className="lg:hidden"
*   style={{ zIndex: 1000 }}
* />
* ```
*
* @param props - Burger component props
* @returns Animated burger menu JSX element
*/
const Burger = ({ isActive = false, className, ...props }) => /* @__PURE__ */ jsxs("div", {
	className: cn("relative mr-3 size-10 cursor-pointer", className),
	"aria-checked": isActive,
	"aria-expanded": isActive,
	"aria-controls": "mobile-menu",
	role: "switch",
	"aria-label": isActive ? "Close menu" : "Open menu",
	...props,
	children: [
		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "rotate-[-45deg]" : "rotate-0") }), /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "-translate-y-3 opacity-0" : "-translate-y-2 opacity-100") })] }),
		/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "opacity-0" : "opacity-100") }) }),
		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "rotate-[45deg]" : "rotate-0") }), /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "translate-y-3 opacity-0" : "translate-y-2 opacity-100") })] })
	]
});

//#endregion
export { Burger };
//# sourceMappingURL=Burger.mjs.map