Wrap delegated Button/Image in DOM element, remove data-slot attributes

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

components/elements/Button.tsx

@@ -20,7 +20,11 @@ export interface ButtonProps
 }
 
 function Button({ variant = "default", size = "default", ...props }: ButtonProps) {
-  return <ShadcnButton variant={variant} size={size} {...props} />
+  return (
+    <span className="inline-block">
+      <ShadcnButton variant={variant} size={size} {...props} />
+    </span>
+  )
 }
 
 export { Button }

components/elements/Card.tsx

@@ -31,7 +31,6 @@ function Card({
 }: CardProps) {
   return (
     <ShadcnCard
-      data-slot="element-card"
       className={cn("overflow-hidden pt-0", className)}
       {...props}
     >

components/elements/Image.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import NextImage from "next/image"
 
 import { cn } from "@/lib/utils"
 
@@ -37,8 +38,8 @@ function Image({
   className,
 }: ImageProps) {
   return (
-    <img
-      data-slot="image"
+    <span className="inline-block">
+      <NextImage
         src={src}
         alt={alt}
         height={height}
@@ -49,6 +50,7 @@ function Image({
           className
         )}
       />
+    </span>
   )
 }
 

components/elements/Typography.tsx

@@ -102,7 +102,6 @@ function Typography({
 
   return (
     <Comp
-      data-slot="typography"
       data-variant={variant}
       className={cn(
         variantStyles[variant],