@heroui/navbar/dist/chunk-AXD3Q2ZA.mjs

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.

"use client";
import {
  useNavbarContext
} from "./chunk-IGERPFKH.mjs";

// src/navbar-menu-toggle.tsx
import { useToggleButton as useAriaToggleButton } from "@react-aria/button";
import { forwardRef } from "@heroui/system";
import { useDOMRef } from "@heroui/react-utils";
import { dataAttr, mergeProps } from "@heroui/shared-utils";
import { useToggleState } from "@react-stately/toggle";
import { useFocusRing } from "@react-aria/focus";
import { useHover } from "@react-aria/interactions";
import { useMemo } from "react";
import { cn } from "@heroui/theme";
import { jsx, jsxs } from "react/jsx-runtime";
var NavbarMenuToggle = forwardRef((props, ref) => {
  var _a;
  const {
    as,
    icon,
    className,
    onChange,
    autoFocus,
    srOnlyText: srOnlyTextProp,
    ...otherProps
  } = props;
  const Component = as || "button";
  const domRef = useDOMRef(ref);
  const { slots, classNames, isMenuOpen, setIsMenuOpen } = useNavbarContext();
  const handleChange = (isOpen) => {
    onChange == null ? void 0 : onChange(isOpen);
    setIsMenuOpen(isOpen);
  };
  const state = useToggleState({ ...otherProps, isSelected: isMenuOpen, onChange: handleChange });
  const { buttonProps, isPressed } = useAriaToggleButton(props, state, domRef);
  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });
  const { isHovered, hoverProps } = useHover({});
  const toggleStyles = cn(classNames == null ? void 0 : classNames.toggle, className);
  const child = useMemo(() => {
    if (typeof icon === "function") {
      return icon(isMenuOpen != null ? isMenuOpen : false);
    }
    return icon || /* @__PURE__ */ jsx("span", { className: slots.toggleIcon({ class: classNames == null ? void 0 : classNames.toggleIcon }) });
  }, [icon, isMenuOpen, slots.toggleIcon, classNames == null ? void 0 : classNames.toggleIcon]);
  const srOnlyText = useMemo(() => {
    if (srOnlyTextProp) {
      return srOnlyTextProp;
    }
    return state.isSelected ? "close navigation menu" : "open navigation menu";
  }, [srOnlyTextProp, isMenuOpen]);
  return /* @__PURE__ */ jsxs(
    Component,
    {
      ref: domRef,
      className: (_a = slots.toggle) == null ? void 0 : _a.call(slots, { class: toggleStyles }),
      "data-focus-visible": dataAttr(isFocusVisible),
      "data-hover": dataAttr(isHovered),
      "data-open": dataAttr(isMenuOpen),
      "data-pressed": dataAttr(isPressed),
      ...mergeProps(buttonProps, focusProps, hoverProps, otherProps),
      children: [
        /* @__PURE__ */ jsx("span", { className: slots.srOnly(), children: srOnlyText }),
        child
      ]
    }
  );
});
NavbarMenuToggle.displayName = "HeroUI.NavbarMenuToggle";
var navbar_menu_toggle_default = NavbarMenuToggle;

export {
  navbar_menu_toggle_default
};