34 lines
876 B
TypeScript
34 lines
876 B
TypeScript
import { mergeProps } from "@base-ui/react";
|
|
import * as React from "react";
|
|
import { cn } from "tailwind-variants";
|
|
|
|
export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Slot = React.forwardRef<HTMLElement, SlotProps>(
|
|
({ children, className: externalClassName, ...restProps }, ref) => {
|
|
if (!React.isValidElement(children)) {
|
|
return null;
|
|
}
|
|
|
|
const child = children as React.ReactElement<Record<string, unknown>>;
|
|
const childProps = child.props || {};
|
|
|
|
const mergedClassName = cn(
|
|
childProps.className as string | undefined,
|
|
externalClassName,
|
|
);
|
|
|
|
const otherMergedProps = mergeProps(childProps, restProps);
|
|
|
|
return React.cloneElement(child, {
|
|
...otherMergedProps,
|
|
className: mergedClassName,
|
|
ref,
|
|
});
|
|
},
|
|
);
|
|
|
|
Slot.displayName = "Slot";
|