mm

packages/ui-web-headless/common/Slot.tsx

@@ -0,0 +1,33 @@
+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";