import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { ButtonUnstyled } from "../button/ButtonUnstyled.js";
import { IconRotator } from "../icon/IconRotator.js";
import { getIcon } from "../icon/iconConfig.js";
import { Typography } from "../typography/Typography.js";
/**
 * **Server Component**
 * This is mostly an internal component, but can also be used to implement a
 * custom header implementation if needed. This might really be a client
 * component in practice since the `onClick` prop must be provided.
 *
 * @example Custom Header
 * ```tsx
 * import type { ExpansionPanelProps } from "@react-md/core";
 * import {
 *   ExpansionPanel,
 *   ExpansionPanelHeader,
 * } from "@react-md/core";
 * import type { ReactElement } from "react";
 * const { useId } from "react";
 *
 * export type CustomExpansionPanelProps = ExpansionPanelProps & { id: string; };
 *
 * export function CustomExpansionPanel(props: CustomExpansionPanelProps): ReactElement {
 *   const {
 *     id,
 *     disabled,
 *     onExpandClick,
 *     expanded,
 *     disableTransition,
 *     headerChildren,
 *   } = props;
 *
 *   return (
 *     <ExpansionPanel
 *       {...props}
 *       header={(
 *         <ExpansionPanelHeader
 *           aria-disabled={disabled || undefined}
 *           id={id}
 *           onClick={onExpandClick}
 *           expanded={expanded}
 *           disableTransition={disableTransition}
 *           // whatever props and any custom implementation
 *         >
 *           {headerChildren}
 *         </ExpansionPanelHeader>
 *       )}
 *     />
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Updated to be wrapped by the {@link Typography}
 * component and rendered as an `<h6>`.
 */ export const ExpansionPanelHeader = /*#__PURE__*/ forwardRef(function ExpansionPanelHeader(props, ref) {
    const { id, headingType = "subtitle-1", headingProps, iconRotatorProps, icon: propIcon, expanded, className, children, beforeChildren, afterChildren, disableTransition = false, ...remaining } = props;
    const icon = getIcon("expander", propIcon);
    return /*#__PURE__*/ _jsxs(Typography, {
        ref: ref,
        type: headingType,
        margin: "none",
        ...headingProps,
        className: cnb("rmd-expansion-panel__heading", headingProps?.className),
        children: [
            beforeChildren,
            /*#__PURE__*/ _jsxs(ButtonUnstyled, {
                ...remaining,
                "aria-expanded": expanded,
                id: id,
                className: cnb("rmd-expansion-panel__button", className),
                children: [
                    children,
                    icon && /*#__PURE__*/ _jsx(IconRotator, {
                        ...iconRotatorProps,
                        rotated: expanded,
                        disableTransition: disableTransition,
                        children: icon
                    })
                ]
            }),
            afterChildren
        ]
    });
});

//# sourceMappingURL=ExpansionPanelHeader.js.map