import {
  Morph,
  useMorph,
  useMorphContext,
  useFLIPClipPath,
  useCSSGridMorph,
  useViewTransitions,
} from '@mks2508/mks-ui/react';

import { Morph, useMorphContext } from '@mks2508/mks-ui/react';

function MorphExample() {
  return (
    <Morph
      technique="flip-clip-path"
      duration={300}
      onMorphStart={() => console.log('Starting...')}
      onMorphEnd={() => console.log('Done!')}
    >
      {/* Children can use useMorphContext() */}
    </Morph>
  );
}

import { useMorph } from '@mks2508/mks-ui/react';

function CustomMorph() {
  const fromRef = useRef<HTMLDivElement>(null);
  const toRef = useRef<HTMLDivElement>(null);

  const { morph, isMorphing } = useMorph({
    technique: 'flip-clip-path',
    duration: 300,
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  });

  const handleMorph = async () => {
    if (!isMorphing()) {
      await morph(fromRef.current, toRef.current);
    }
  };

  return (
    <>
      <div ref={fromRef} onClick={handleMorph}>From</div>
      <div ref={toRef}>To</div>
    </>
  );
}

import { useFLIPClipPath } from '@mks2508/mks-ui/react';

const flipClip = useFLIPClipPath({
  duration: 300,
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
});

// Morph from one element to another
await flipClip.morph(fromElement, toElement, {
  clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)', // optional custom clip-path
});

import { useCSSGridMorph } from '@mks2508/mks-ui/react';

const gridMorph = useCSSGridMorph({
  duration: 300,
  easing: 'ease',
});

// Expand container
await gridMorph.expand(containerRef);

// Collapse container
await gridMorph.collapse(containerRef);

// Toggle state
await gridMorph.toggle(containerRef);

import { useViewTransitions } from '@mks2508/mks-ui/react';

const viewTrans = useViewTransitions();

// Check browser support
if (viewTrans.isSupported()) {
  await viewTrans.startTransition(async () => {
    // Make DOM changes here
    // The browser will automatically morph between states
  });
}