Animate Slot

1//Copyright (c) 2025 Elliot Sutton
2 
3'use client';
4 
5import { cn } from '@/lib/utils';
6import { motion, isMotionComponent, type HTMLMotionProps } from 'motion/react';
7import * as React from 'react';
8 
9type AnyProps = Record<string, unknown>;
10 
11type DOMMotionProps<T extends HTMLElement = HTMLElement> = Omit<
12  HTMLMotionProps<keyof HTMLElementTagNameMap>,
13  'ref'
14> & { ref?: React.Ref<T> };
15 
16type WithAsChild<Base extends object> =
17  | (Base & { asChild: true; children: React.ReactElement })
18  | (Base & { asChild?: false | undefined });
19 
20type SlotProps<T extends HTMLElement = HTMLElement> = {
21  // eslint-disable-next-line @typescript-eslint/no-explicit-any
22  children?: any;
23} & DOMMotionProps<T>;
24 
25function mergeRefs<T>(
26  ...refs: (React.Ref<T> | undefined)[]
27): React.RefCallback<T> {
28  return (node) => {
29    refs.forEach((ref) => {
30      if (!ref) return;
31      if (typeof ref === 'function') {
32        ref(node);
33      } else {
34        (ref as React.RefObject<T | null>).current = node;
35      }
36    });
37  };
38}
39 
40function mergeProps<T extends HTMLElement>(
41  childProps: AnyProps,
42  slotProps: DOMMotionProps<T>,
43): AnyProps {
44  const merged: AnyProps = { ...childProps, ...slotProps };
45 
46  if (childProps.className || slotProps.className) {
47    merged.className = cn(
48      childProps.className as string,
49      slotProps.className as string,
50    );
51  }
52 
53  if (childProps.style || slotProps.style) {
54    merged.style = {
55      ...(childProps.style as React.CSSProperties),
56      ...(slotProps.style as React.CSSProperties),
57    };
58  }
59 
60  return merged;
61}
62 
63function Slot<T extends HTMLElement = HTMLElement>({
64  children,
65  ref,
66  ...props
67}: SlotProps<T>) {
68  const isAlreadyMotion =
69    typeof children.type === 'object' &&
70    children.type !== null &&
71    isMotionComponent(children.type);
72 
73  const Base = React.useMemo(
74    () =>
75      isAlreadyMotion
76        ? (children.type as React.ElementType)
77        : motion.create(children.type as React.ElementType),
78    [isAlreadyMotion, children.type],
79  );
80 
81  if (!React.isValidElement(children)) return null;
82 
83  const { ref: childRef, ...childProps } = children.props as AnyProps;
84 
85  const mergedProps = mergeProps(childProps, props);
86 
87  return (
88    <Base {...mergedProps} ref={mergeRefs(childRef as React.Ref<T>, ref)} />
89  );
90}
91 
92export {
93  Slot,
94  type SlotProps,
95  type WithAsChild,
96  type DOMMotionProps,
97  type AnyProps,
98};