feat(Slot): Add custom Slot component

Author: PrettyCoffee

bun.lock

@@ -26,7 +26,6 @@
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
-    "@radix-ui/react-slot": "1.2.4",
     "@radix-ui/react-switch": "1.2.6",
     "@radix-ui/react-tooltip": "1.2.8",
     "@types/react": "19.2.8",

package.json

@@ -8,10 +8,9 @@ import {
   useState,
 } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
-
 import { Button } from "components/ui/button"
 import { Portal } from "components/utility/portal"
+import { Slot } from "components/utility/slot"
 import { useDropdownNavigation } from "hooks/use-dropdown-navigation"
 import { useFocus } from "hooks/use-focus"
 import { cn } from "utils/cn"

src/components/ui/auto-complete/auto-complete.tsx

@@ -5,10 +5,10 @@ import {
   PropsWithChildren,
 } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Link } from "wouter"
 
+import { Slot } from "components/utility/slot"
 import {
   AsChildProp,
   ClassNameProp,

src/components/ui/button/button.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren, useId, ReactNode, isValidElement } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
-
+import { Slot } from "components/utility/slot"
 import { ClassNameProp } from "types/base-props"
 import { cn } from "utils/cn"
 import { vstack } from "utils/styles"

src/components/ui/input-label.tsx

@@ -1,8 +1,8 @@
 import { PropsWithChildren, useEffect, useRef, useState } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
 import { motion } from "motion/react"
 
+import { Slot } from "components/utility/slot"
 import { ClassNameProp } from "types/base-props"
 import { cn } from "utils/cn"
 

src/components/utility/auto-animate-height.tsx

@@ -1,7 +1,6 @@
 import { PropsWithChildren } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
-
+import { Slot } from "components/utility/slot"
 import {
   AsChildProp,
   ClassNameProp,

src/components/utility/scroll-area.tsx

@@ -0,0 +1,96 @@
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  type PropsWithChildren,
+  type Ref,
+  type RefCallback,
+  cloneElement,
+  isValidElement,
+} from "react"
+
+const isFunction = (value: unknown): value is (...args: unknown[]) => unknown =>
+  typeof value === "function"
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null
+
+const mergeRefs = <T,>(...refs: unknown[]): RefCallback<T> | undefined => {
+  if (refs.every(ref => ref == null)) {
+    return
+  }
+
+  return (value: T | null) => {
+    refs.forEach(ref => {
+      if (!ref) return
+
+      if (isFunction(ref)) {
+        ref(value)
+      } else if (isObject(ref) && "current" in ref) {
+        ref["current"] = value
+      }
+    })
+  }
+}
+
+const mergeFunctions =
+  (slotFn: unknown, childFn: unknown) =>
+  (...args: unknown[]) => {
+    if (isFunction(slotFn)) slotFn(...args)
+    if (isFunction(childFn)) childFn(...args)
+  }
+
+const mergeClassNames = (slot: unknown, child: unknown) =>
+  [child, slot]
+    .filter(className => className && typeof className === "string")
+    .join(" ")
+
+const mergeStyles = (slot: CSSProperties, child: CSSProperties) => ({
+  ...slot,
+  ...child,
+})
+
+const mergeProps = (
+  slotProps: Record<string, unknown>,
+  childProps: Record<string, unknown>
+) => {
+  const result: Record<string, unknown> = { ...childProps }
+
+  for (const key in slotProps) {
+    const slotValue = slotProps[key]
+    const childValue = childProps[key]
+
+    if (key === "ref") {
+      result[key] = mergeRefs(slotValue, childValue)
+    } else if (key === "className") {
+      result[key] = mergeClassNames(slotValue, childValue)
+    } else if (key === "style" && isObject(slotValue) && isObject(childValue)) {
+      result[key] = mergeStyles(slotValue, childValue)
+    } else if (/^on[A-Z]/.test(key)) {
+      result[key] = mergeFunctions(slotValue, childValue)
+    } else {
+      result[key] = childValue ?? slotValue
+    }
+  }
+
+  return result
+}
+
+type SlotProps = PropsWithChildren<
+  HTMLAttributes<HTMLElement> & {
+    ref?: Ref<HTMLElement>
+  }
+>
+
+export const Slot = ({ children, ...slotProps }: SlotProps) => {
+  if (!isValidElement(children)) {
+    throw new Error("Slot requires a single React element as child.")
+  }
+
+  return cloneElement(
+    children,
+    mergeProps(
+      slotProps as Record<string, unknown>,
+      children.props as Record<string, unknown>
+    )
+  )
+}

src/components/utility/slot.tsx

@@ -11,8 +11,7 @@ import {
   useState,
 } from "react"
 
-import { Slot } from "@radix-ui/react-slot"
-
+import { Slot } from "components/utility/slot"
 import { AsChildProp, ClassNameProp } from "types/base-props"
 import { createContext } from "utils/create-context"