From 497e0660cabcc4dbe237b96827654b02dae42c8a Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 5 Jan 2026 10:37:00 +0000
Subject: [PATCH] Improve useSurface() to include onSurface prop

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/src/components/Button/Button.tsx |  6 ++----
 packages/ui/src/hooks/useSurface.tsx         | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 9bfbb6c789..b23bf3b197 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -46,9 +46,7 @@ export const Button = forwardRef(
       ...rest
     } = cleanedProps;
 
-    const { surface } = useSurface();
-
-    const surfaceToUse = onSurface || surface;
+    const { surface } = useSurface({ onSurface });
 
     return (
       <RAButton
@@ -56,7 +54,7 @@ export const Button = forwardRef(
         ref={ref}
         isPending={loading}
         {...dataAttributes}
-        {...(surfaceToUse ? { 'data-surface': surfaceToUse } : {})}
+        {...(surface ? { 'data-surface': surface } : {})}
         {...rest}
       >
         {({ isPending }) => (
diff --git a/packages/ui/src/hooks/useSurface.tsx b/packages/ui/src/hooks/useSurface.tsx
index 50047bf721..4a2bacfd35 100644
--- a/packages/ui/src/hooks/useSurface.tsx
+++ b/packages/ui/src/hooks/useSurface.tsx
@@ -28,6 +28,11 @@ export interface SurfaceProviderProps {
   children: ReactNode;
 }
 
+/** @public */
+export interface UseSurfaceOptions {
+  onSurface?: Responsive<Surface>;
+}
+
 const SurfaceContext = createContext<SurfaceContextValue>({
   surface: undefined,
 });
@@ -53,8 +58,15 @@ export const SurfaceProvider = ({
  * Hook to access the current surface context.
  * Returns the current surface level, or undefined if no provider is present.
  *
+ * @param options - Optional configuration
+ * @param options.onSurface - Override the context surface with a specific surface value
  * @public
  */
-export const useSurface = (): SurfaceContextValue => {
-  return useContext(SurfaceContext);
+export const useSurface = (
+  options?: UseSurfaceOptions,
+): SurfaceContextValue => {
+  const context = useContext(SurfaceContext);
+  return {
+    surface: options?.onSurface || context.surface,
+  };
 };