From c5f45d4fbead52215242d88fe1d331e38716c989 Mon Sep 17 00:00:00 2001
From: Caio Pizzol <caio@harbourshare.com>
Date: Fri, 28 Nov 2025 17:13:14 -0300
Subject: [PATCH] feat: css classes for comp customization

---
 demo/src/App.css | 22 ++++++++++++++++++++++
 src/index.tsx    | 16 +++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/demo/src/App.css b/demo/src/App.css
index 56e8431..d35cdd3 100644
--- a/demo/src/App.css
+++ b/demo/src/App.css
@@ -438,4 +438,26 @@ header {
     .header-nav {
         gap: 1.5rem;
     }
+}
+
+/* ===========================================
+   eSign Component Customization via CSS Variables
+   =========================================== */
+
+/* Example: Customize the controls area */
+.superdoc-esign-container {
+    /* Remove the gap between viewer and controls */
+    --superdoc-esign-controls-gap: 0;
+
+    /* Style the controls area */
+    --superdoc-esign-controls-padding: 16px 20px;
+    --superdoc-esign-controls-background: #f9fafb;
+    --superdoc-esign-controls-border-top: 1px solid #e5e7eb;
+    --superdoc-esign-controls-border-radius: 0 0 12px 12px;
+
+    /* Adjust spacing between fields and actions */
+    --superdoc-esign-fields-gap: 16px;
+
+    /* Adjust gap between action buttons */
+    --superdoc-esign-actions-gap: 12px;
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index d013a33..75d2fce 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -417,7 +417,10 @@ const SuperDocESign = forwardRef<
     return (
       <div
         className="superdoc-esign-actions superdoc-esign-form-actions"
-        style={{ display: "flex", gap: "10px" }}
+        style={{
+          display: "flex",
+          gap: "var(--superdoc-esign-actions-gap, 10px)",
+        }}
       >
         <SubmitButton
           onClick={handleSubmit}
@@ -489,14 +492,21 @@ const SuperDocESign = forwardRef<
       {/* Controls section - separate from document */}
       <div
         className="superdoc-esign-controls"
-        style={{ marginTop: "20px" }}
+        style={{
+          marginTop: "var(--superdoc-esign-controls-gap, 20px)",
+          padding: "var(--superdoc-esign-controls-padding, 0)",
+          backgroundColor:
+            "var(--superdoc-esign-controls-background, transparent)",
+          borderTop: "var(--superdoc-esign-controls-border-top, none)",
+          borderRadius: "var(--superdoc-esign-controls-border-radius, 0)",
+        }}
         data-testid="superdoc-esign-controls"
       >
         {/* Signer fields */}
         {fields.signer && fields.signer.length > 0 && (
           <div
             className="superdoc-esign-fields"
-            style={{ marginBottom: "20px" }}
+            style={{ marginBottom: "var(--superdoc-esign-fields-gap, 20px)" }}
             data-testid="superdoc-esign-fields"
           >
             {fields.signer.map(renderField)}