From 1ebe68efeb2e9061ed99e05780b0f3c0bcbdc03d Mon Sep 17 00:00:00 2001
From: Rami Bitar <rbitar@gmail.com>
Date: Tue, 9 Jun 2026 16:06:15 -0400
Subject: [PATCH] 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     |  6 +++++-
 components/elements/Card.tsx       |  1 -
 components/elements/Image.tsx      | 26 ++++++++++++++------------
 components/elements/Typography.tsx |  1 -
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/elements/Button.tsx b/components/elements/Button.tsx
index 65dc458..69ce2be 100644
--- a/components/elements/Button.tsx
+++ b/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 }
diff --git a/components/elements/Card.tsx b/components/elements/Card.tsx
index ac9c65d..7cc5616 100644
--- a/components/elements/Card.tsx
+++ b/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}
     >
diff --git a/components/elements/Image.tsx b/components/elements/Image.tsx
index e4307a8..11cbc5d 100644
--- a/components/elements/Image.tsx
+++ b/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
-      data-slot="image"
-      src={src}
-      alt={alt}
-      height={height}
-      width={width}
-      className={cn(
-        objectFitStyles[objectFit],
-        circle ? "rounded-full" : "rounded-md",
-        className
-      )}
-    />
+    <span className="inline-block">
+      <NextImage
+        src={src}
+        alt={alt}
+        height={height}
+        width={width}
+        className={cn(
+          objectFitStyles[objectFit],
+          circle ? "rounded-full" : "rounded-md",
+          className
+        )}
+      />
+    </span>
   )
 }
 
diff --git a/components/elements/Typography.tsx b/components/elements/Typography.tsx
index ad0e3ac..cca04e9 100644
--- a/components/elements/Typography.tsx
+++ b/components/elements/Typography.tsx
@@ -102,7 +102,6 @@ function Typography({
 
   return (
     <Comp
-      data-slot="typography"
       data-variant={variant}
       className={cn(
         variantStyles[variant],