[BUG] Morphing Dialog Basic Example causes hydration errors

[illia1f]

Short Description

The MorphingDialogTrigger component causes nested button hydration errors when wrapping custom buttons.

Problem Details

The MorphingDialogTrigger component currently renders as a motion.button wrapper, which causes invalid HTML structure and hydration errors when developers need to wrap custom button elements. This is particularly problematic in the example morphing-dialog-basic-1.tsx where a button is nested inside the trigger.

Current problematic structure:
<MorphingDialogTrigger className="..."> <button type="button"> {/* ... */} <PlusIcon /> </button> </MorphingDialogTrigger>

This results in:

• Invalid HTML - Buttons cannot be nested according to HTML spec
• React hydration errors
• Accessibility issues
• Event handling problems - Click events may conflict

Proposed Solutions

1. Implement asChild Pattern (Recommended)
2. Refactor Example to Remove Nested Button

---

Would you like me to prepare a pull request for this fix with asChild pattern?

[illia1f]

I discovered that the codebase already implements asChild pattern in MorphingPopoverTrigger (see components/core/morphing-popover.tsx). This same pattern should be applied to MorphingDialogTrigger for consistency and to solve the hydration error issue.