@drvillo/react-browser-e-signing 0.1.0 → 0.1.2

package/README.md

@@ -21,6 +21,7 @@ pnpm add @drvillo/react-browser-e-signing
 
 ```tsx
 import { defaults, modifyPdf, sha256, useFieldPlacement } from '@drvillo/react-browser-e-signing'
+import '@drvillo/react-browser-e-signing/styles.css'
 ```
 
 Use the demo app for a complete end-to-end integration:
@@ -67,18 +68,46 @@ pnpm demo
 - `SigningResult`
 - `PdfPageDimensions`
 
-## Tailwind Consumer Setup
+## Styling and Theming
 
-This package ships Tailwind classes in components. Add the package path to your Tailwind content scan:
+Library components are style-agnostic:
 
-```js
-// tailwind.config.js
-export default {
-  content: [
-    './src/**/*.{ts,tsx}',
-    './node_modules/@drvillo/react-browser-e-signing/src/**/*.{ts,tsx}',
-  ],
+- components expose `data-slot` attributes for all key DOM parts
+- stateful elements expose `data-state`
+- each component root accepts `className`
+- no Tailwind setup is required in consumer apps
+
+### Option 1: Use default styles
+
+```tsx
+import '@drvillo/react-browser-e-signing/styles.css'
+```
+
+### Option 2: Bring your own styles
+
+Skip the default stylesheet and target slots from your app CSS:
+
+```css
+[data-slot='field-palette-button'] {
+  border-radius: 999px;
+  border: 1px solid #111827;
+  background: #ffffff;
 }
+
+[data-slot='field-palette-button'][data-state='selected'] {
+  background: #111827;
+  color: #ffffff;
+}
+```
+
+### Slot constants
+
+Use exported slot constants to avoid string literals:
+
+```tsx
+import { SLOTS } from '@drvillo/react-browser-e-signing'
+
+const selector = `[data-slot="${SLOTS.fieldPaletteButton}"]`
 ```
 
 ## Development Scripts
@@ -96,6 +125,7 @@ pnpm typecheck
 
 - `PdfViewer` sets `react-pdf` worker from CDN by default using the runtime PDF.js version.
 - Browser test config skips execution when Playwright Chromium is not available in the environment.
+- Demo theme switcher (`default` / `custom`) shows how a container app can fully re-theme the same components.
 
 ## Limitations
 

package/dist/index.d.ts

@@ -2,6 +2,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
 
+declare const SIGNATURE_FONTS: readonly ["Caveat", "Homemade Apple", "Reenie Beanie", "Mr Dafoe", "Pacifico", "Qwitcher Grypen"];
+declare function loadSignatureFont(fontFamily: string): Promise<void>;
+
 interface PdfViewerProps {
     pdfData: ArrayBuffer | null;
     numPages: number;
@@ -14,8 +17,9 @@ interface PdfViewerProps {
         heightPt: number;
     }) => void;
     renderOverlay?: (pageIndex: number) => ReactNode;
+    className?: string;
 }
-declare function PdfViewer({ pdfData, numPages, scale, onScaleChange, onDocumentLoadSuccess, onPageDimensions, renderOverlay, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
+declare function PdfViewer({ pdfData, numPages, scale, onScaleChange, onDocumentLoadSuccess, onPageDimensions, renderOverlay, className, }: PdfViewerProps): react_jsx_runtime.JSX.Element;
 
 type FieldType = 'signature' | 'fullName' | 'title' | 'date';
 interface FieldPlacement {
@@ -76,28 +80,32 @@ interface FieldOverlayProps {
     onUpdateField: (fieldId: string, partial: Partial<FieldPlacement>) => void;
     onRemoveField: (fieldId: string) => void;
     preview: SignatureFieldPreview;
+    className?: string;
 }
-declare function FieldOverlay({ pageIndex, fields, selectedFieldType, onAddField, onUpdateField, onRemoveField, preview, }: FieldOverlayProps): react_jsx_runtime.JSX.Element;
+declare function FieldOverlay({ pageIndex, fields, selectedFieldType, onAddField, onUpdateField, onRemoveField, preview, className, }: FieldOverlayProps): react_jsx_runtime.JSX.Element;
 
 interface SignatureFieldProps {
     field: FieldPlacement;
     onUpdateField: (fieldId: string, partial: Partial<FieldPlacement>) => void;
     onRemoveField: (fieldId: string) => void;
     preview: SignatureFieldPreview;
+    className?: string;
 }
-declare function SignatureField({ field, onUpdateField, onRemoveField, preview }: SignatureFieldProps): react_jsx_runtime.JSX.Element;
+declare function SignatureField({ field, onUpdateField, onRemoveField, preview, className }: SignatureFieldProps): react_jsx_runtime.JSX.Element;
 
 interface FieldPaletteProps {
     selectedFieldType: FieldType | null;
     onSelectFieldType: (fieldType: FieldType | null) => void;
+    className?: string;
 }
-declare function FieldPalette({ selectedFieldType, onSelectFieldType }: FieldPaletteProps): react_jsx_runtime.JSX.Element;
+declare function FieldPalette({ selectedFieldType, onSelectFieldType, className }: FieldPaletteProps): react_jsx_runtime.JSX.Element;
 
 interface SignerDetailsPanelProps {
     signerInfo: SignerInfo;
     onSignerInfoChange: (nextSignerInfo: SignerInfo) => void;
+    className?: string;
 }
-declare function SignerDetailsPanel({ signerInfo, onSignerInfoChange }: SignerDetailsPanelProps): react_jsx_runtime.JSX.Element;
+declare function SignerDetailsPanel({ signerInfo, onSignerInfoChange, className }: SignerDetailsPanelProps): react_jsx_runtime.JSX.Element;
 
 interface SignaturePreviewProps {
     signerName: string;
@@ -105,13 +113,15 @@ interface SignaturePreviewProps {
     signatureDataUrl: string | null;
     isRendering: boolean;
     onStyleChange: (nextStyle: SignatureStyle) => void;
+    className?: string;
 }
-declare function SignaturePreview({ signerName, style, signatureDataUrl, isRendering, onStyleChange, }: SignaturePreviewProps): react_jsx_runtime.JSX.Element;
+declare function SignaturePreview({ signerName, style, signatureDataUrl, isRendering, onStyleChange, className, }: SignaturePreviewProps): react_jsx_runtime.JSX.Element;
 
 interface SignaturePadProps {
     onDrawn: (signatureDataUrl: string) => void;
+    className?: string;
 }
-declare function SignaturePad({ onDrawn }: SignaturePadProps): react_jsx_runtime.JSX.Element;
+declare function SignaturePad({ onDrawn, className }: SignaturePadProps): react_jsx_runtime.JSX.Element;
 
 interface SigningCompleteProps {
     signerName: string;
@@ -121,8 +131,9 @@ interface SigningCompleteProps {
     downloadUrl: string;
     fileName?: string;
     onReset: () => void;
+    className?: string;
 }
-declare function SigningComplete({ signerName, fieldCount, signedAt, documentHash, downloadUrl, fileName, onReset, }: SigningCompleteProps): react_jsx_runtime.JSX.Element;
+declare function SigningComplete({ signerName, fieldCount, signedAt, documentHash, downloadUrl, fileName, onReset, className, }: SigningCompleteProps): react_jsx_runtime.JSX.Element;
 
 type PdfInput = File | Blob | ArrayBuffer | Uint8Array | null;
 declare function usePdfDocument(pdfInput: PdfInput): {
@@ -178,15 +189,63 @@ declare function modifyPdf({ pdfBytes, fields, signer, signatureDataUrl, pageDim
 declare function mapToPoints(field: FieldPlacement, page: PdfPageDimensions): PointRect;
 declare function mapFromPoints(rect: PointRect, page: PdfPageDimensions): Pick<FieldPlacement, 'xPercent' | 'yPercent' | 'widthPercent' | 'heightPercent'>;
 
-declare const SIGNATURE_FONTS: readonly ["Dancing Script", "Great Vibes", "Sacramento", "Alex Brush"];
-declare function loadSignatureFont(fontFamily: string): Promise<void>;
-
 declare function sha256(data: Uint8Array): Promise<string>;
 
+declare const SLOTS: {
+    readonly pdfViewer: "pdf-viewer";
+    readonly pdfViewerEmpty: "pdf-viewer-empty";
+    readonly pdfViewerToolbar: "pdf-viewer-toolbar";
+    readonly pdfViewerPageCount: "pdf-viewer-page-count";
+    readonly pdfViewerZoom: "pdf-viewer-zoom";
+    readonly pdfViewerZoomButton: "pdf-viewer-zoom-button";
+    readonly pdfViewerZoomValue: "pdf-viewer-zoom-value";
+    readonly pdfViewerPages: "pdf-viewer-pages";
+    readonly pdfViewerPage: "pdf-viewer-page";
+    readonly pdfViewerLoading: "pdf-viewer-loading";
+    readonly pdfViewerError: "pdf-viewer-error";
+    readonly fieldOverlay: "field-overlay";
+    readonly signatureField: "signature-field";
+    readonly signatureFieldContent: "signature-field-content";
+    readonly signatureFieldLabel: "signature-field-label";
+    readonly signatureFieldPreview: "signature-field-preview";
+    readonly signatureFieldPreviewImage: "signature-field-preview-image";
+    readonly signatureFieldPreviewText: "signature-field-preview-text";
+    readonly signatureFieldRemove: "signature-field-remove";
+    readonly signatureFieldResize: "signature-field-resize";
+    readonly fieldPalette: "field-palette";
+    readonly fieldPaletteButton: "field-palette-button";
+    readonly signerPanel: "signer-panel";
+    readonly signerPanelHeading: "signer-panel-heading";
+    readonly signerPanelLabel: "signer-panel-label";
+    readonly signerPanelInput: "signer-panel-input";
+    readonly signaturePreview: "signature-preview";
+    readonly signaturePreviewHeading: "signature-preview-heading";
+    readonly signaturePreviewModeToggle: "signature-preview-mode-toggle";
+    readonly signaturePreviewModeButton: "signature-preview-mode-button";
+    readonly signaturePreviewFontLabel: "signature-preview-font-label";
+    readonly signaturePreviewFontSelect: "signature-preview-font-select";
+    readonly signaturePreviewDisplay: "signature-preview-display";
+    readonly signaturePreviewImage: "signature-preview-image";
+    readonly signaturePreviewPlaceholder: "signature-preview-placeholder";
+    readonly signaturePad: "signature-pad";
+    readonly signaturePadCanvas: "signature-pad-canvas";
+    readonly signaturePadActions: "signature-pad-actions";
+    readonly signaturePadClear: "signature-pad-clear";
+    readonly signingComplete: "signing-complete";
+    readonly signingCompleteHeading: "signing-complete-heading";
+    readonly signingCompleteDetails: "signing-complete-details";
+    readonly signingCompleteHash: "signing-complete-hash";
+    readonly signingCompleteHashLabel: "signing-complete-hash-label";
+    readonly signingCompleteHashValue: "signing-complete-hash-value";
+    readonly signingCompleteActions: "signing-complete-actions";
+    readonly signingCompleteDownload: "signing-complete-download";
+    readonly signingCompleteReset: "signing-complete-reset";
+};
+
 declare const defaults: {
-    readonly SIGNATURE_FONTS: readonly ["Dancing Script", "Great Vibes", "Sacramento", "Alex Brush"];
+    readonly SIGNATURE_FONTS: readonly ["Caveat", "Homemade Apple", "Reenie Beanie", "Mr Dafoe", "Pacifico", "Qwitcher Grypen"];
     readonly DEFAULT_FIELD_WIDTH_PERCENT: 25;
     readonly DEFAULT_FIELD_HEIGHT_PERCENT: 5;
 };
 
-export { FieldOverlay, FieldPalette, type FieldPlacement, type FieldType, type PdfPageDimensions, PdfViewer, SIGNATURE_FONTS, SignatureField, type SignatureFieldPreview, SignaturePad, SignaturePreview, type SignatureStyle, SignerDetailsPanel, type SignerInfo, SigningComplete, type SigningResult, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, useSignatureRenderer };
+export { FieldOverlay, FieldPalette, type FieldPlacement, type FieldType, type PdfPageDimensions, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, type SignatureFieldPreview, SignaturePad, SignaturePreview, type SignatureStyle, SignerDetailsPanel, type SignerInfo, SigningComplete, type SigningResult, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, useSignatureRenderer };