fix(v4): forward refs in Button asChild variants

apps/v4/registry/bases/radix/ui/button.test.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+
+import { Button } from "./button"
+
+describe("radix button", () => {
+  it("is a forwardRef component", () => {
+    expect(Button.$$typeof).toBe(Symbol.for("react.forward_ref"))
+  })
+
+  it("renders an asChild child without wrapping", () => {
+    const html = renderToStaticMarkup(
+      <Button asChild>
+        <span>Action</span>
+      </Button>
+    )
+
+    expect(html).toMatch(/^<span\b[^>]*>Action<\/span>$/)
+    expect(html).not.toContain("<button")
+  })
+})

apps/v4/registry/bases/radix/ui/button.tsx

@@ -34,27 +34,35 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
+type ButtonProps = React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
-  }) {
+  }
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false,
+    ...props
+  },
+  ref
+) {
   const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       data-variant={variant}
       data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   )
-}
+})
+
+Button.displayName = "Button"
 
 export { Button, buttonVariants }

apps/v4/registry/new-york-v4/ui/button.test.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+
+import { Button } from "./button"
+
+describe("new-york Button", () => {
+  it("is a forwardRef component", () => {
+    expect(Button.$$typeof).toBe(Symbol.for("react.forward_ref"))
+  })
+
+  it("renders an asChild child without wrapping", () => {
+    const html = renderToStaticMarkup(
+      <Button asChild>
+        <span>Action</span>
+      </Button>
+    )
+
+    expect(html).toMatch(/^<span\b[^>]*>Action<\/span>$/)
+    expect(html).not.toContain("<button")
+  })
+})

apps/v4/registry/new-york-v4/ui/button.tsx

@@ -38,27 +38,35 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
+type ButtonProps = React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
-  }) {
+  }
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false,
+    ...props
+  },
+  ref
+) {
   const Comp = asChild ? Slot.Root : "button"
 
   return (
     <Comp
+      ref={ref}
       data-slot="button"
       data-variant={variant}
       data-size={size}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
   )
-}
+})
+
+Button.displayName = "Button"
 
 export { Button, buttonVariants }