@gfazioli/mantine-flip/dist/esm/FlipTarget/FlipTarget.mjs

Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.

'use client';
import React, { forwardRef, cloneElement } from 'react';
import { useProps, isElement, createEventHandler } from '@mantine/core';
import { useFlipContext } from '../Flip.context.mjs';

const defaultProps = {
  refProp: "ref"
};
const FlipTarget = forwardRef((props, ref) => {
  const { children, refProp, ...others } = useProps("FlipTarget", defaultProps, props);
  if (!isElement(children)) {
    throw new Error(
      "Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
    );
  }
  const ctx = useFlipContext();
  const onClick = createEventHandler(
    children.props.onClick,
    () => ctx.toggleFlip()
  );
  return /* @__PURE__ */ React.createElement("div", { ref, ...others }, cloneElement(children, {
    onClick,
    "data-flipped": ctx.flipped ? true : void 0
  }));
});
FlipTarget.displayName = "FlipTarget";

export { FlipTarget };
//# sourceMappingURL=FlipTarget.mjs.map