From c5f45d4fbead52215242d88fe1d331e38716c989 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Fri, 28 Nov 2025 17:13:14 -0300 Subject: [PATCH 1/3] 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 (
{/* Signer fields */} {fields.signer && fields.signer.length > 0 && (
{fields.signer.map(renderField)} From 15b4d3b3e8ec37dc562367ab63bcfa8f7a4577d7 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Fri, 28 Nov 2025 17:27:51 -0300 Subject: [PATCH 2/3] feat: background color css --- demo/src/App.css | 5 ++++- src/index.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/demo/src/App.css b/demo/src/App.css index d35cdd3..29e2693 100644 --- a/demo/src/App.css +++ b/demo/src/App.css @@ -444,8 +444,11 @@ header { eSign Component Customization via CSS Variables =========================================== */ -/* Example: Customize the controls area */ +/* Example: Customize the eSign component */ .superdoc-esign-container { + /* Document viewer background */ + --superdoc-esign-document-background: #f9fafb; + /* Remove the gap between viewer and controls */ --superdoc-esign-controls-gap: 0; diff --git a/src/index.tsx b/src/index.tsx index 75d2fce..5291037 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -485,7 +485,12 @@ const SuperDocESign = forwardRef< ref={containerRef} className="superdoc-esign-document-viewer" data-testid="superdoc-scroll-container" - style={{ height: documentHeight, overflow: "auto" }} + style={{ + height: documentHeight, + overflow: "auto", + backgroundColor: + "var(--superdoc-esign-document-background, transparent)", + }} />
From 63c0c21d6289433e316314e062f9ed62cc1637f8 Mon Sep 17 00:00:00 2001 From: Caio Pizzol Date: Thu, 11 Dec 2025 15:41:08 -0300 Subject: [PATCH 3/3] feat: new css styles --- demo/src/App.css | 51 +++++++++++++++++++++++++++++++------------- package.json | 4 +++- src/index.tsx | 55 ++++++------------------------------------------ src/styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++++ vite.config.ts | 39 ++++++++++++++++------------------ 5 files changed, 115 insertions(+), 85 deletions(-) create mode 100644 src/styles.css diff --git a/demo/src/App.css b/demo/src/App.css index 29e2693..e7f97ae 100644 --- a/demo/src/App.css +++ b/demo/src/App.css @@ -441,26 +441,47 @@ header { } /* =========================================== - eSign Component Customization via CSS Variables + eSign Component Customization Example =========================================== */ -/* Example: Customize the eSign component */ +/* + * The eSign component exposes CSS classes that you can target directly. + * No special CSS variables needed - just write standard CSS! + * + * Available classes: + * .superdoc-esign-container - Root container (also accepts className prop) + * .superdoc-esign-document - Document section wrapper + * .superdoc-esign-document-toolbar - Toolbar with download button + * .superdoc-esign-document-controls - Control buttons container + * .superdoc-esign-document-viewer - Scroll container (SuperDoc mounts inside) + * .superdoc-esign-controls - Bottom section with fields + submit + * .superdoc-esign-fields - Signer fields container + * .superdoc-esign-actions - Action buttons container + * .superdoc-esign-form-actions - Form submit button container + */ + +/* Example: Card-like styling */ .superdoc-esign-container { - /* Document viewer background */ - --superdoc-esign-document-background: #f9fafb; + border: 1px solid #e5e7eb; + border-radius: 12px; + overflow: hidden; +} - /* Remove the gap between viewer and controls */ - --superdoc-esign-controls-gap: 0; +.superdoc-esign-document-viewer { + background: #f9fafb; +} - /* 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; +.superdoc-esign-controls { + margin-top: 0; /* Remove gap between viewer and controls */ + padding: 16px 20px; + background: #f9fafb; + border-top: 1px solid #e5e7eb; +} - /* Adjust spacing between fields and actions */ - --superdoc-esign-fields-gap: 16px; +.superdoc-esign-fields { + margin-bottom: 16px; +} - /* Adjust gap between action buttons */ - --superdoc-esign-actions-gap: 12px; +.superdoc-esign-actions { + gap: 12px; } \ No newline at end of file diff --git a/package.json b/package.json index e97432f..6ab03b7 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "types": "./dist/index.d.ts", "import": "./dist/index.mjs", "require": "./dist/index.js" - } + }, + "./styles.css": "./src/styles.css" }, "files": [ "dist", + "src/styles.css", "README.md" ], "scripts": { diff --git a/src/index.tsx b/src/index.tsx index 9972c15..b15e8f9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -390,13 +390,7 @@ const SuperDocESign = forwardRef +
{/* Document viewer section */} -
+
{documentControls && ( -
-
- {documentControls} -
+
+
{documentControls}
)}
{/* Controls section - separate from document */} -
+
{/* Signer fields */} {fields.signer && fields.signer.length > 0 && ( -
+
{fields.signer.map(renderField)}
)} diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..6bdf738 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,51 @@ +/** + * SuperDoc eSign - Default Styles + * + * These styles provide sensible defaults for the eSign component. + * Import this file to get a basic layout, or skip it and write your own CSS. + * + * Usage: + * import '@superdoc-dev/esign/styles.css'; + * + * All classes can be customized with standard CSS: + * + * .superdoc-esign-container - Root container (also accepts className prop) + * .superdoc-esign-document - Document section wrapper + * .superdoc-esign-document-toolbar - Toolbar with download button + * .superdoc-esign-document-controls - Control buttons container + * .superdoc-esign-document-viewer - Scroll container (SuperDoc mounts inside) + * .superdoc-esign-controls - Bottom section with fields + submit + * .superdoc-esign-fields - Signer fields container + * .superdoc-esign-actions - Action buttons container + * .superdoc-esign-form-actions - Form submit button container (alias for actions) + */ + +.superdoc-esign-document { + display: flex; + flex-direction: column; +} + +.superdoc-esign-document-toolbar { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 8px 12px; +} + +.superdoc-esign-document-controls { + display: flex; + gap: 8px; +} + +.superdoc-esign-controls { + margin-top: 20px; +} + +.superdoc-esign-fields { + margin-bottom: 20px; +} + +.superdoc-esign-actions { + display: flex; + gap: 10px; +} diff --git a/vite.config.ts b/vite.config.ts index ce4a033..4b2f280 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,25 +3,22 @@ import dts from 'vite-plugin-dts'; import react from '@vitejs/plugin-react'; export default defineConfig({ - build: { - lib: { - entry: 'src/index.tsx', - formats: ['es', 'cjs'], - fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'), - }, - rollupOptions: { - external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'], - }, + build: { + lib: { + entry: 'src/index.tsx', + formats: ['es', 'cjs'], + fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'), }, - plugins: [ - react(), - dts() - ], - test: { - environment: 'jsdom', - setupFiles: ['./src/test/setup.ts'], - globals: true, - clearMocks: true, - restoreMocks: true - } -}); \ No newline at end of file + rollupOptions: { + external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'superdoc'], + }, + }, + plugins: [react(), dts()], + test: { + environment: 'jsdom', + setupFiles: ['./src/test/setup.ts'], + globals: true, + clearMocks: true, + restoreMocks: true, + }, +});