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,18 +38,19 @@ function Image({
   className,
 }: ImageProps) {
   return (
-    <img
+    <span className="inline-block">
-      data-slot="image"
+      <NextImage
-      src={src}
+        src={src}
-      alt={alt}
+        alt={alt}
-      height={height}
+        height={height}
-      width={width}
+        width={width}
-      className={cn(
+        className={cn(
-        objectFitStyles[objectFit],
+          objectFitStyles[objectFit],
-        circle ? "rounded-full" : "rounded-md",
+          circle ? "rounded-full" : "rounded-md",
-        className
+          className
-      )}
+        )}
-    />
+      />
+    </span>
   )
 }
 

components/elements/Typography.tsx

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