import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { box } from "../box/styles.js";
import { cssUtils } from "../cssUtils.js";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-app-bar");
/**
 * Apply the `className`s for a tree component. This will be type-safe if using
 * typescript.
 *
 * @remarks \@since 6.0.0
 */ export function appBar(options = {}) {
    const { className, theme = "primary", stacked, height = stacked ? "auto" : "normal", position = "static", pagePosition = "top", scrollbarOffset = position === "fixed", align, grid, gridColumns, gridName, justify, reversed, surfaceColor, disableWrap = true, disablePadding, disableElevation } = options;
    const surface = theme === "surface";
    const clear = theme === "clear";
    return cnb(styles({
        surface,
        [height]: height !== "normal",
        fixed: position !== "static",
        stacked,
        sticky: position === "sticky",
        [pagePosition]: position !== "static",
        elevated: position !== "static" && !disableElevation,
        "scrollbar-offset": scrollbarOffset,
        "static-scrollbar-offset": position === "static" && scrollbarOffset
    }), box({
        align,
        stacked,
        fullWidth: true,
        grid,
        gridColumns,
        gridName,
        justify,
        reversed,
        disableWrap,
        disablePadding
    }), cssUtils({
        backgroundColor: !surface && !clear ? theme : undefined,
        surfaceColor
    }), className);
}
/**
 * **Server Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { AppBar, AppBarTitle, Button } from "@react-md/core";
 * import MenuIcon from "@react-md/material-icons/MenuIcon";
 * import MoreVertIcon from "@react-md/material-icons/MoreVertIcon";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   return (
 *     <AppBar>
 *       <Button aria-label="Navigation"><MenuIcon /></Button>
 *       <AppBarTitle>My Main Title</AppBarTitle>
 *       <Button aria-label="Options"><MoreVertIcon /></Button>
 *     </AppBar>
 *   );
 * }
 * ```
 *
 * @remarks
 * \@since 6.0.0 The `AppBar` was updated to use `gap` for spacing
 * instead of requiring the `AppBarNav` and `AppBarAction` components.
 */ export const AppBar = /*#__PURE__*/ forwardRef(function AppBar(props, ref) {
    const { className, theme, stacked, height, align, grid, gridName, justify, reversed, gridColumns, disableWrap, disablePadding, position, pagePosition, surfaceColor, scrollbarOffset, disableElevation, as: Component = position ? "header" : "div", children, ...remaining } = props;
    return /*#__PURE__*/ _jsx(Component, {
        ...remaining,
        className: appBar({
            className,
            theme,
            position,
            pagePosition,
            disableElevation,
            scrollbarOffset,
            height,
            grid,
            gridName,
            gridColumns,
            align,
            stacked,
            justify,
            reversed,
            surfaceColor,
            disableWrap,
            disablePadding
        }),
        ref: ref,
        children: children
    });
});

//# sourceMappingURL=AppBar.js.map