// src/components/utils/Transition.tsx
import { useEffect, useState } from "react";

// src/utils/bagFunctions.ts
var resolve = (children, bag) => {
  if (typeof children === "function") {
    return children(bag);
  }
  return children ?? void 0;
};
var BagFunctionUtil = {
  resolve
};

// src/components/utils/Transition.tsx
function Transition({
  children,
  show,
  includeAnimation = true
}) {
  const [isOpen, setIsOpen] = useState(show);
  const [isTransitioning, setIsTransitioning] = useState(!isOpen);
  const isUsingReducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : true;
  useEffect(() => {
    setIsOpen(show);
    setIsTransitioning(true);
  }, [show]);
  const onAnimationEnd = () => setIsTransitioning(false);
  const bag = {
    isOpen,
    isTransitioning,
    isUsingReducedMotion,
    data: {
      "data-open": isOpen && !isTransitioning ? "" : void 0,
      "data-opening": isOpen && isTransitioning ? "" : void 0,
      "data-closing": !isOpen && isTransitioning ? "" : void 0,
      "data-closed": !isOpen && !isTransitioning ? "" : void 0
    },
    handlers: {
      onTransitionEnd: () => setIsTransitioning(false),
      onTransitionCancel: () => setIsTransitioning(false),
      onAnimationEnd: includeAnimation ? onAnimationEnd : void 0
    }
  };
  return BagFunctionUtil.resolve(children, bag);
}
export {
  Transition
};
//# sourceMappingURL=Transition.js.map