import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { useBoundingClientRect } from "../../hooks/useBoundingClientRect.js";
import { concat } from "../../utils/classNames.js";
import "./expandable.theme.css.js";
const Expandable = React.forwardRef(({ className, children, style, animate, isOpen, ...nativeProps }, ref) => {
  const contentRef = React.useRef(null);
  const [{ height }] = useBoundingClientRect(contentRef);
  return jsx("div", { ...nativeProps, className: concat("arm-expandable", className), style: {
    ...animate ? { "--arm-expandable-height": `${height}px` } : {},
    ...style || {}
  }, "data-animate": !!animate, "data-is-open": !!isOpen, ref, children: jsx("div", { ref: contentRef, className: "arm-expandable-content", children }) });
});
Expandable.displayName = "Expandable";
Expandable.defaultProps = {
  animate: true
};
export {
  Expandable
};
//# sourceMappingURL=expandable.component.js.map
