react-id-card-generator 1.0.2 → 1.0.4

package/dist/esm/core/exportUtils.js

@@ -1,4 +1,4 @@
-import html2canvas from '../node_modules/html2canvas/dist/html2canvas.esm.js';
+import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
 import { setQrCodeOnElement } from './qrUtils.js';
 

package/dist/esm/hooks/useIDCardTemplate.js

@@ -29,25 +29,42 @@ function useIDCardTemplate(initialTemplate) {
     }, []);
     // Update specific properties of a field
     const updateField = useCallback((fieldId, updates) => {
-        setTemplateState((prev) => ({
-            ...prev,
-            updatedAt: new Date().toISOString(),
-            fields: prev.fields.map((field) => field.id === fieldId ? { ...field, ...updates } : field),
-        }));
+        if (!fieldId || !updates)
+            return;
+        setTemplateState((prev) => {
+            const fieldExists = prev.fields.some((field) => field?.id === fieldId);
+            if (!fieldExists)
+                return prev;
+            return {
+                ...prev,
+                updatedAt: new Date().toISOString(),
+                fields: prev.fields.map((field) => field?.id === fieldId ? { ...field, ...updates } : field).filter(Boolean),
+            };
+        });
     }, []);
     // Add a new field to the template
     const addField = useCallback((field) => {
+        if (!field || !field.type || !field.position) {
+            console.warn('Invalid field object provided to addField:', field);
+            return;
+        }
+        const validField = {
+            ...field,
+            id: field.id || generateId('field'),
+        };
         setTemplateState((prev) => ({
             ...prev,
             updatedAt: new Date().toISOString(),
-            fields: [...prev.fields, { ...field, id: field.id || generateId('field') }],
+            fields: [...prev.fields.filter(Boolean), validField],
         }));
     }, []);
     const removeField = useCallback((fieldId) => {
+        if (!fieldId)
+            return;
         setTemplateState((prev) => ({
             ...prev,
             updatedAt: new Date().toISOString(),
-            fields: prev.fields.filter((field) => field.id !== fieldId),
+            fields: prev.fields.filter((field) => field?.id && field.id !== fieldId),
         }));
     }, []);
     const setBackground = useCallback((side, imageData) => {
@@ -94,9 +111,11 @@ function useIDCardTemplate(initialTemplate) {
         }));
     }, []);
     const duplicateField = useCallback((fieldId) => {
+        if (!fieldId)
+            return;
         setTemplateState((prev) => {
-            const field = prev.fields.find((f) => f.id === fieldId);
-            if (!field)
+            const field = prev.fields.find((f) => f?.id === fieldId);
+            if (!field || !field.position)
                 return prev;
             const newField = {
                 ...field,
@@ -110,15 +129,17 @@ function useIDCardTemplate(initialTemplate) {
             return {
                 ...prev,
                 updatedAt: new Date().toISOString(),
-                fields: [...prev.fields, newField],
+                fields: [...prev.fields.filter(Boolean), newField],
             };
         });
     }, []);
     const moveFieldToSide = useCallback((fieldId, side) => {
+        if (!fieldId || !side)
+            return;
         setTemplateState((prev) => ({
             ...prev,
             updatedAt: new Date().toISOString(),
-            fields: prev.fields.map((field) => field.id === fieldId ? { ...field, side } : field),
+            fields: prev.fields.map((field) => field?.id === fieldId ? { ...field, side } : field).filter(Boolean),
         }));
     }, []);
     const reset = useCallback(() => {
@@ -131,8 +152,16 @@ function useIDCardTemplate(initialTemplate) {
             validationErrors: errors.map((e) => `${e.field}: ${e.message}`),
         };
     }, [template]);
+    // Ensure template always has valid fields array
+    const safeTemplate = useMemo(() => ({
+        ...template,
+        fields: template.fields.filter((field) => Boolean(field) &&
+            Boolean(field.id) &&
+            Boolean(field.type) &&
+            Boolean(field.position)),
+    }), [template]);
     return {
-        template,
+        template: safeTemplate,
         setTemplate,
         updateField,
         addField,

package/dist/esm/hooks/useIDCardTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIDCardTemplate.js","sources":["../../../src/hooks/useIDCardTemplate.ts"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\r\nimport type {\r\n  IDCardTemplate,\r\n  FieldMapping,\r\n  CardSize,\r\n  CardOrientation,\r\n  CardSides,\r\n  UseIDCardTemplateReturn,\r\n} from '../types';\r\nimport { createDefaultTemplate, generateId } from '../storage/templateStorage';\r\nimport { validateTemplate } from '../utils/validators';\r\n\r\n/**\r\n * Hook for managing ID card template state\r\n * Provides methods for updating fields, backgrounds, and card properties\r\n * Automatically updates the template's updatedAt timestamp on changes\r\n * \r\n * @param initialTemplate - Optional existing template to start with\r\n * @returns Template state and helper methods\r\n */\r\nexport function useIDCardTemplate(\r\n  initialTemplate?: Partial<IDCardTemplate>\r\n): UseIDCardTemplateReturn {\r\n  const [template, setTemplateState] = useState<IDCardTemplate>(() => {\r\n    if (initialTemplate) {\r\n      return {\r\n        ...createDefaultTemplate(),\r\n        ...initialTemplate,\r\n        updatedAt: new Date().toISOString(),\r\n      };\r\n    }\r\n    return createDefaultTemplate();\r\n  });\r\n\r\n  const setTemplate = useCallback((newTemplate: IDCardTemplate) => {\r\n    setTemplateState({\r\n      ...newTemplate,\r\n      updatedAt: new Date().toISOString(),\r\n    });\r\n  }, []);\r\n\r\n  // Update specific properties of a field\r\n  const updateField = useCallback((fieldId: string, updates: Partial<FieldMapping>) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: prev.fields.map((field: FieldMapping) =>\r\n        field.id === fieldId ? { ...field, ...updates } : field\r\n      ),\r\n    }));\r\n  }, []);\r\n\r\n  // Add a new field to the template\r\n  const addField = useCallback((field: FieldMapping) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: [...prev.fields, { ...field, id: field.id || generateId('field') }],\r\n    }));\r\n  }, []);\r\n\r\n  const removeField = useCallback((fieldId: string) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: prev.fields.filter((field: FieldMapping) => field.id !== fieldId),\r\n    }));\r\n  }, []);\r\n\r\n  const setBackground = useCallback((side: 'front' | 'back', imageData: string) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      backgrounds: {\r\n        ...prev.backgrounds,\r\n        [side]: imageData,\r\n      },\r\n    }));\r\n  }, []);\r\n\r\n  const setCardSize = useCallback((size: CardSize) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      cardSize: size,\r\n    }));\r\n  }, []);\r\n\r\n  const setOrientation = useCallback((orientation: CardOrientation) => {\r\n    setTemplateState((prev: IDCardTemplate) => {\r\n      // Swap dimensions if orientation changes\r\n      const shouldSwap =\r\n        (orientation === 'portrait' && prev.cardSize.width > prev.cardSize.height) ||\r\n        (orientation === 'landscape' && prev.cardSize.height > prev.cardSize.width);\r\n\r\n      return {\r\n        ...prev,\r\n        updatedAt: new Date().toISOString(),\r\n        orientation,\r\n        cardSize: shouldSwap\r\n          ? {\r\n              ...prev.cardSize,\r\n              width: prev.cardSize.height,\r\n              height: prev.cardSize.width,\r\n            }\r\n          : prev.cardSize,\r\n      };\r\n    });\r\n  }, []);\r\n\r\n  const setSides = useCallback((sides: CardSides) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      sides,\r\n    }));\r\n  }, []);\r\n\r\n  const duplicateField = useCallback((fieldId: string) => {\r\n    setTemplateState((prev: IDCardTemplate) => {\r\n      const field = prev.fields.find((f: FieldMapping) => f.id === fieldId);\r\n      if (!field) return prev;\r\n\r\n      const newField: FieldMapping = {\r\n        ...field,\r\n        id: generateId('field'),\r\n        position: {\r\n          ...field.position,\r\n          x: field.position.x + 10,\r\n          y: field.position.y + 10,\r\n        },\r\n      };\r\n\r\n      return {\r\n        ...prev,\r\n        updatedAt: new Date().toISOString(),\r\n        fields: [...prev.fields, newField],\r\n      };\r\n    });\r\n  }, []);\r\n\r\n  const moveFieldToSide = useCallback((fieldId: string, side: 'front' | 'back') => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: prev.fields.map((field: FieldMapping) =>\r\n        field.id === fieldId ? { ...field, side } : field\r\n      ),\r\n    }));\r\n  }, []);\r\n\r\n  const reset = useCallback(() => {\r\n    setTemplateState(createDefaultTemplate());\r\n  }, []);\r\n\r\n  const validationResult = useMemo(() => {\r\n    const errors = validateTemplate(template);\r\n    return {\r\n      isValid: errors.length === 0,\r\n      validationErrors: errors.map((e) => `${e.field}: ${e.message}`),\r\n    };\r\n  }, [template]);\r\n\r\n  return {\r\n    template,\r\n    setTemplate,\r\n    updateField,\r\n    addField,\r\n    removeField,\r\n    setBackground,\r\n    setCardSize,\r\n    setOrientation,\r\n    setSides,\r\n    duplicateField,\r\n    moveFieldToSide,\r\n    reset,\r\n    isValid: validationResult.isValid,\r\n    validationErrors: validationResult.validationErrors,\r\n  };\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useIDCardTemplate.js","sources":["../../../src/hooks/useIDCardTemplate.ts"],"sourcesContent":["import { useState, useCallback, useMemo } from 'react';\r\nimport type {\r\n  IDCardTemplate,\r\n  FieldMapping,\r\n  CardSize,\r\n  CardOrientation,\r\n  CardSides,\r\n  UseIDCardTemplateReturn,\r\n} from '../types';\r\nimport { createDefaultTemplate, generateId } from '../storage/templateStorage';\r\nimport { validateTemplate } from '../utils/validators';\r\n\r\n/**\r\n * Hook for managing ID card template state\r\n * Provides methods for updating fields, backgrounds, and card properties\r\n * Automatically updates the template's updatedAt timestamp on changes\r\n * \r\n * @param initialTemplate - Optional existing template to start with\r\n * @returns Template state and helper methods\r\n */\r\nexport function useIDCardTemplate(\r\n  initialTemplate?: Partial<IDCardTemplate>\r\n): UseIDCardTemplateReturn {\r\n  const [template, setTemplateState] = useState<IDCardTemplate>(() => {\r\n    if (initialTemplate) {\r\n      return {\r\n        ...createDefaultTemplate(),\r\n        ...initialTemplate,\r\n        updatedAt: new Date().toISOString(),\r\n      };\r\n    }\r\n    return createDefaultTemplate();\r\n  });\r\n\r\n  const setTemplate = useCallback((newTemplate: IDCardTemplate) => {\r\n    setTemplateState({\r\n      ...newTemplate,\r\n      updatedAt: new Date().toISOString(),\r\n    });\r\n  }, []);\r\n\r\n  // Update specific properties of a field\r\n  const updateField = useCallback((fieldId: string, updates: Partial<FieldMapping>) => {\r\n    if (!fieldId || !updates) return;\r\n    \r\n    setTemplateState((prev: IDCardTemplate) => {\r\n      const fieldExists = prev.fields.some((field: FieldMapping) => field?.id === fieldId);\r\n      if (!fieldExists) return prev;\r\n      \r\n      return {\r\n        ...prev,\r\n        updatedAt: new Date().toISOString(),\r\n        fields: prev.fields.map((field: FieldMapping) =>\r\n          field?.id === fieldId ? { ...field, ...updates } : field\r\n        ).filter(Boolean),\r\n      };\r\n    });\r\n  }, []);\r\n\r\n  // Add a new field to the template\r\n  const addField = useCallback((field: FieldMapping) => {\r\n    if (!field || !field.type || !field.position) {\r\n      console.warn('Invalid field object provided to addField:', field);\r\n      return;\r\n    }\r\n    \r\n    const validField = {\r\n      ...field,\r\n      id: field.id || generateId('field'),\r\n    };\r\n    \r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: [...prev.fields.filter(Boolean), validField],\r\n    }));\r\n  }, []);\r\n\r\n  const removeField = useCallback((fieldId: string) => {\r\n    if (!fieldId) return;\r\n    \r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: prev.fields.filter((field: FieldMapping) => field?.id && field.id !== fieldId),\r\n    }));\r\n  }, []);\r\n\r\n  const setBackground = useCallback((side: 'front' | 'back', imageData: string) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      backgrounds: {\r\n        ...prev.backgrounds,\r\n        [side]: imageData,\r\n      },\r\n    }));\r\n  }, []);\r\n\r\n  const setCardSize = useCallback((size: CardSize) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      cardSize: size,\r\n    }));\r\n  }, []);\r\n\r\n  const setOrientation = useCallback((orientation: CardOrientation) => {\r\n    setTemplateState((prev: IDCardTemplate) => {\r\n      // Swap dimensions if orientation changes\r\n      const shouldSwap =\r\n        (orientation === 'portrait' && prev.cardSize.width > prev.cardSize.height) ||\r\n        (orientation === 'landscape' && prev.cardSize.height > prev.cardSize.width);\r\n\r\n      return {\r\n        ...prev,\r\n        updatedAt: new Date().toISOString(),\r\n        orientation,\r\n        cardSize: shouldSwap\r\n          ? {\r\n              ...prev.cardSize,\r\n              width: prev.cardSize.height,\r\n              height: prev.cardSize.width,\r\n            }\r\n          : prev.cardSize,\r\n      };\r\n    });\r\n  }, []);\r\n\r\n  const setSides = useCallback((sides: CardSides) => {\r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      sides,\r\n    }));\r\n  }, []);\r\n\r\n  const duplicateField = useCallback((fieldId: string) => {\r\n    if (!fieldId) return;\r\n    \r\n    setTemplateState((prev: IDCardTemplate) => {\r\n      const field = prev.fields.find((f: FieldMapping) => f?.id === fieldId);\r\n      if (!field || !field.position) return prev;\r\n\r\n      const newField: FieldMapping = {\r\n        ...field,\r\n        id: generateId('field'),\r\n        position: {\r\n          ...field.position,\r\n          x: field.position.x + 10,\r\n          y: field.position.y + 10,\r\n        },\r\n      };\r\n\r\n      return {\r\n        ...prev,\r\n        updatedAt: new Date().toISOString(),\r\n        fields: [...prev.fields.filter(Boolean), newField],\r\n      };\r\n    });\r\n  }, []);\r\n\r\n  const moveFieldToSide = useCallback((fieldId: string, side: 'front' | 'back') => {\r\n    if (!fieldId || !side) return;\r\n    \r\n    setTemplateState((prev: IDCardTemplate) => ({\r\n      ...prev,\r\n      updatedAt: new Date().toISOString(),\r\n      fields: prev.fields.map((field: FieldMapping) =>\r\n        field?.id === fieldId ? { ...field, side } : field\r\n      ).filter(Boolean),\r\n    }));\r\n  }, []);\r\n\r\n  const reset = useCallback(() => {\r\n    setTemplateState(createDefaultTemplate());\r\n  }, []);\r\n\r\n  const validationResult = useMemo(() => {\r\n    const errors = validateTemplate(template);\r\n    return {\r\n      isValid: errors.length === 0,\r\n      validationErrors: errors.map((e) => `${e.field}: ${e.message}`),\r\n    };\r\n  }, [template]);\r\n\r\n  // Ensure template always has valid fields array\r\n  const safeTemplate = useMemo(() => ({\r\n    ...template,\r\n    fields: template.fields.filter((field): field is FieldMapping => \r\n      Boolean(field) && \r\n      Boolean(field.id) && \r\n      Boolean(field.type) && \r\n      Boolean(field.position)\r\n    ),\r\n  }), [template]);\r\n\r\n  return {\r\n    template: safeTemplate,\r\n    setTemplate,\r\n    updateField,\r\n    addField,\r\n    removeField,\r\n    setBackground,\r\n    setCardSize,\r\n    setOrientation,\r\n    setSides,\r\n    duplicateField,\r\n    moveFieldToSide,\r\n    reset,\r\n    isValid: validationResult.isValid,\r\n    validationErrors: validationResult.validationErrors,\r\n  };\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,484 @@
+import React from 'react';
+
+/**
+ * Position and dimensions of a field on the card
+ * All values are in pixels relative to the card's top-left corner
+ */
+interface FieldPosition {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * CSS-like styling options for text and container fields
+ * Values should be valid CSS strings (e.g., '12px', '#000000', '50%')
+ */
+interface FieldStyle {
+    fontSize?: string;
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontFamily?: string;
+    color?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    backgroundColor?: string;
+    borderRadius?: string;
+    padding?: string;
+    border?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+}
+/**
+ * Available field types for ID cards
+ * - text: Dynamic text data (name, ID, etc.)
+ * - image: Photos or logos
+ * - qrcode: QR codes generated from card data
+ * - label: Static text that doesn't change
+ */
+type FieldType = 'text' | 'image' | 'qrcode' | 'label';
+/**
+ * A single field on the ID card (text, image, QR code, etc.)
+ * This defines what the field displays and how it's styled
+ */
+interface FieldMapping {
+    id: string;
+    fieldKey: string;
+    label?: string;
+    placeholder?: string;
+    type: FieldType;
+    side: 'front' | 'back';
+    position: FieldPosition;
+    style?: FieldStyle;
+    required?: boolean;
+    qrFields?: string[];
+    aspectRatio?: number;
+    staticText?: string;
+    zIndex?: number;
+}
+type CardOrientation = 'portrait' | 'landscape';
+type CardSides = 'single' | 'double';
+/**
+ * Physical dimensions of the ID card
+ */
+interface CardSize {
+    width: number;
+    height: number;
+    unit: 'px' | 'mm' | 'in';
+}
+/**
+ * Background images for card sides (base64 data URLs or HTTP URLs)
+ */
+interface CardBackground {
+    front?: string;
+    back?: string;
+}
+/**
+ * Complete ID card template definition
+ * This is the reusable template that can be filled with different user data
+ */
+interface IDCardTemplate {
+    id: string;
+    name: string;
+    version: string;
+    createdAt: string;
+    updatedAt: string;
+    orientation: CardOrientation;
+    sides: CardSides;
+    cardSize: CardSize;
+    backgrounds: CardBackground;
+    fields: FieldMapping[];
+    metadata?: Record<string, unknown>;
+}
+/**
+ * User data to fill into the card template
+ * Keys should match fieldKey values in FieldMapping
+ * Example: { name: 'John Doe', photo: 'data:image/jpeg;base64,...' }
+ */
+interface IDCardData {
+    [key: string]: string | number | boolean | string[] | undefined;
+}
+/**
+ * Options for exporting cards to PDF or images
+ */
+interface ExportOptions {
+    format: 'pdf' | 'png' | 'jpeg';
+    scale?: number;
+    quality?: number;
+    filename?: string;
+    pages?: ('front' | 'back')[];
+    includeBleed?: boolean;
+    bleedSize?: number;
+}
+/**
+ * Result from an export operation
+ */
+interface ExportResult {
+    success: boolean;
+    blob?: Blob;
+    dataUrl?: string;
+    error?: string;
+}
+/**
+ * Props for IDCardGenerator - renders a filled ID card
+ */
+interface IDCardGeneratorProps {
+    template: IDCardTemplate;
+    data: IDCardData;
+    side?: 'front' | 'back';
+    scale?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    onFieldClick?: (field: FieldMapping) => void;
+    editable?: boolean;
+}
+/**
+ * Props for IDCardDesigner - the visual template builder
+ */
+interface IDCardDesignerProps {
+    initialTemplate?: Partial<IDCardTemplate>;
+    onSave: (template: IDCardTemplate) => void;
+    onCancel?: () => void;
+    availableFields?: FieldDefinition[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Definition of a field type available in the designer
+ */
+interface FieldDefinition {
+    key: string;
+    label: string;
+    type: FieldType;
+    defaultStyle?: FieldStyle;
+    required?: boolean;
+}
+/**
+ * Props for IDCardPreview - interactive card preview with editing
+ */
+interface IDCardPreviewProps {
+    template: IDCardTemplate;
+    data: IDCardData;
+    side: 'front' | 'back';
+    scale?: number;
+    showGrid?: boolean;
+    onFieldSelect?: (field: FieldMapping | null) => void;
+    selectedFieldId?: string | null;
+    editable?: boolean;
+    onFieldUpdate?: (field: FieldMapping) => void;
+}
+/**
+ * Return value from useIDCardTemplate hook
+ * Provides template state management and helper methods
+ */
+interface UseIDCardTemplateReturn {
+    template: IDCardTemplate;
+    setTemplate: (template: IDCardTemplate) => void;
+    updateField: (fieldId: string, updates: Partial<FieldMapping>) => void;
+    addField: (field: FieldMapping) => void;
+    removeField: (fieldId: string) => void;
+    setBackground: (side: 'front' | 'back', imageData: string) => void;
+    setCardSize: (size: CardSize) => void;
+    setOrientation: (orientation: CardOrientation) => void;
+    setSides: (sides: CardSides) => void;
+    duplicateField: (fieldId: string) => void;
+    moveFieldToSide: (fieldId: string, side: 'front' | 'back') => void;
+    reset: () => void;
+    isValid: boolean;
+    validationErrors: string[];
+}
+/**
+ * Return value from useIDCardExport hook
+ * Handles exporting cards to PDF or images
+ */
+interface UseIDCardExportReturn {
+    exportAsPDF: (options?: Partial<ExportOptions>) => Promise<ExportResult>;
+    exportAsImage: (options?: Partial<ExportOptions>) => Promise<ExportResult>;
+    isExporting: boolean;
+    progress: number;
+    error: string | null;
+}
+/**
+ * Return value from useFieldMapping hook
+ * Handles field selection, dragging, and resizing
+ */
+interface UseFieldMappingReturn {
+    selectedField: FieldMapping | null;
+    selectField: (field: FieldMapping | null) => void;
+    updatePosition: (position: Partial<FieldPosition>) => void;
+    updateStyle: (style: Partial<FieldStyle>) => void;
+    isDragging: boolean;
+    isResizing: boolean;
+    startDrag: (e: React.MouseEvent) => void;
+    startResize: (e: React.MouseEvent, handle: string) => void;
+}
+interface TemplateStorage {
+    save: (key: string, template: IDCardTemplate) => Promise<void>;
+    load: (key: string) => Promise<IDCardTemplate | null>;
+    list: () => Promise<string[]>;
+    remove: (key: string) => Promise<void>;
+}
+interface DragState {
+    isDragging: boolean;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+    fieldId: string | null;
+}
+interface ResizeState {
+    isResizing: boolean;
+    handle: 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | null;
+    startX: number;
+    startY: number;
+    startWidth: number;
+    startHeight: number;
+    fieldId: string | null;
+}
+
+/**
+ * IDCardGenerator - Renders a completed ID card
+ *
+ * Takes a template and user data, then renders the filled card.
+ * This is the component used to display actual ID cards for individual users.
+ *
+ * Example:
+ * ```tsx
+ * <IDCardGenerator
+ *   template={myTemplate}
+ *   data={{ name: 'John Doe', photo: '...' }}
+ *   side="front"
+ * />
+ * ```
+ */
+declare const IDCardGenerator: React.FC<IDCardGeneratorProps>;
+
+/**
+ * IDCardDesigner - Visual drag-and-drop template builder
+ *
+ * Allows users to:
+ * - Add and position fields on the card
+ * - Upload background images
+ * - Configure field styles (fonts, colors, etc.)
+ * - Choose card orientation and sides
+ * - Preview the card with sample data
+ */
+/**
+ * IDCardDesigner - Visual drag-and-drop ID card template builder
+ */
+declare const IDCardDesigner: React.FC<IDCardDesignerProps>;
+
+/**
+ * IDCardPreview - Interactive card preview component
+ *
+ * Renders an ID card with:
+ * - Field selection and highlighting
+ * - Resize handles for selected fields
+ * - Grid overlay for alignment
+ * - Dynamic field rendering based on type
+ *
+ * Used inside the designer for visual editing
+ */
+declare const IDCardPreview: React.FC<IDCardPreviewProps>;
+
+/**
+ * Hook for managing ID card template state
+ * Provides methods for updating fields, backgrounds, and card properties
+ * Automatically updates the template's updatedAt timestamp on changes
+ *
+ * @param initialTemplate - Optional existing template to start with
+ * @returns Template state and helper methods
+ */
+declare function useIDCardTemplate(initialTemplate?: Partial<IDCardTemplate>): UseIDCardTemplateReturn;
+
+interface ExportConfig {
+    frontElementId?: string;
+    backElementId?: string;
+    data?: IDCardData;
+    qrElementId?: string;
+    qrFields?: string[];
+}
+declare function useIDCardExport(config?: ExportConfig): UseIDCardExportReturn;
+
+interface UseFieldMappingOptions {
+    onFieldUpdate?: (field: FieldMapping) => void;
+    containerRef?: React.RefObject<HTMLElement>;
+    gridSize?: number;
+    snapToGrid?: boolean;
+}
+declare function useFieldMapping(options?: UseFieldMappingOptions): UseFieldMappingReturn;
+
+/**
+ * Generate a QR code as a base64 data URL
+ * @param data - Data to encode in the QR code (will be JSON stringified)
+ * @param size - QR code size in pixels
+ * @param options - Customization options (error correction level, colors, etc.)
+ * @returns Base64 PNG data URL
+ */
+declare function generateQrCodeDataURL(data: Record<string, unknown>, size?: number, options?: {
+    level?: 'L' | 'M' | 'Q' | 'H';
+    padding?: number;
+    background?: string;
+    foreground?: string;
+}): string;
+/**
+ * Generate QR code from specific fields in the card data
+ * Only includes fields that exist in the data object
+ * @param data - Full card data object
+ * @param fields - Array of field keys to include in QR code
+ * @param size - QR code size in pixels
+ * @returns Base64 PNG data URL
+ */
+declare function generateQrCodeFromFields(data: IDCardData, fields: string[], size?: number): string;
+/**
+ * Set QR code image src on a DOM element
+ */
+declare function setQrCodeOnElement(elementId: string, data: Record<string, unknown>, size?: number, container?: Document | HTMLElement): boolean;
+
+interface DownloadIDCardOptions {
+    frontElementId?: string;
+    backElementId?: string;
+    filename?: string;
+    data?: IDCardData;
+    qrElementId?: string;
+    qrFields?: string[];
+    format?: 'pdf' | 'png' | 'jpeg';
+    scale?: number;
+    quality?: number;
+}
+/**
+ * Download ID card(s) as a PDF file
+ * Captures DOM elements and converts them to a multi-page PDF
+ * @param options - Configuration for PDF export
+ * @returns Export result with success status and any errors
+ */
+declare function downloadIDCardAsPDF(options: DownloadIDCardOptions): Promise<ExportResult>;
+/**
+ * Download ID card as image (PNG or JPEG)
+ */
+declare function downloadIDCardAsImage(options: DownloadIDCardOptions): Promise<ExportResult>;
+/**
+ * Export ID card with unified options
+ */
+declare function exportIDCard(options: ExportOptions & {
+    frontElementId?: string;
+    backElementId?: string;
+    data?: IDCardData;
+    qrElementId?: string;
+    qrFields?: string[];
+}): Promise<ExportResult>;
+
+/**
+ * Save a template to browser localStorage
+ * @param key - Unique identifier for the template
+ * @param template - The template to save
+ * @throws Error if localStorage is unavailable or quota exceeded
+ */
+declare function saveTemplateToLocal(key: string, template: IDCardTemplate): void;
+/**
+ * Load a template from browser localStorage
+ * @param key - Template identifier
+ * @returns The template, or null if not found or invalid
+ */
+declare function loadTemplateFromLocal(key: string): IDCardTemplate | null;
+/**
+ * Get all saved template keys from localStorage
+ * @returns Array of template keys (without the prefix)
+ */
+declare function listTemplatesFromLocal(): string[];
+/**
+ * Remove a template from localStorage
+ * @param key - Template identifier to remove
+ */
+declare function removeTemplateFromLocal(key: string): void;
+/**
+ * Export a template as a downloadable JSON file
+ * @param template - The template to export
+ * @param filename - Optional custom filename (defaults to template name)
+ */
+declare function exportTemplateAsJSON(template: IDCardTemplate, filename?: string): void;
+/**
+ * Import a template from a JSON file
+ * @param file - The JSON file to read
+ * @returns Promise that resolves to the parsed template
+ */
+declare function importTemplateFromJSON(file: File): Promise<IDCardTemplate>;
+/**
+ * Convert an image file to a base64 data URL
+ * Useful for embedding images in templates
+ * @param file - Image file (JPG, PNG, etc.)
+ * @returns Promise that resolves to a base64 data URL
+ */
+declare function imageFileToBase64(file: File): Promise<string>;
+/**
+ * Generate a unique ID with timestamp and random component
+ * @param prefix - Prefix for the ID (e.g., 'field', 'template')
+ * @returns Unique string like 'field_1703234567890_abc123def'
+ */
+declare function generateId(prefix?: string): string;
+/**
+ * Create a default template
+ */
+declare function createDefaultTemplate(name?: string): IDCardTemplate;
+
+interface ValidationError {
+    field: string;
+    message: string;
+}
+/**
+ * Validate a complete ID card template
+ * Checks for required fields, valid dimensions, and proper field configuration
+ * @param template - The template to validate
+ * @returns Array of validation errors (empty if valid)
+ */
+declare function validateTemplate(template: IDCardTemplate): ValidationError[];
+/**
+ * Validate a single field's configuration
+ * @param field - The field to validate
+ * @param index - Field index (for error messages)
+ * @returns Array of validation errors
+ */
+declare function validateField(field: FieldMapping, index: number): ValidationError[];
+/**
+ * Validate card size against standard dimensions
+ */
+declare function validateCardSize(size: CardSize): boolean;
+/**
+ * Check if a field is within card bounds
+ */
+declare function isFieldInBounds(field: FieldMapping, cardSize: CardSize): boolean;
+
+/**
+ * Convert a style object with kebab-case keys to React camelCase
+ * Useful when importing styles from external sources
+ */
+declare function toReactStyle(styleObj: Record<string, unknown> | undefined): React.CSSProperties;
+/**
+ * Convert FieldStyle to React CSS properties
+ * @param style - The field style object
+ * @returns React-compatible CSS properties object
+ */
+declare function fieldStyleToCSS(style: FieldStyle | undefined): React.CSSProperties;
+/**
+ * Merge multiple style objects
+ */
+declare function mergeStyles(...styles: (React.CSSProperties | undefined)[]): React.CSSProperties;
+/**
+ * Generate position styles from field position
+ */
+declare function positionToStyle(position: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): React.CSSProperties;
+/**
+ * Default styles for different field types
+ */
+declare const defaultFieldStyles: Record<string, FieldStyle>;
+/**
+ * CSS class name generator
+ */
+declare function cn(...classes: (string | undefined | null | false)[]): string;
+
+export { IDCardDesigner, IDCardGenerator, IDCardPreview, cn, createDefaultTemplate, defaultFieldStyles, downloadIDCardAsImage, downloadIDCardAsPDF, exportIDCard, exportTemplateAsJSON, fieldStyleToCSS, generateId, generateQrCodeDataURL, generateQrCodeFromFields, imageFileToBase64, importTemplateFromJSON, isFieldInBounds, listTemplatesFromLocal, loadTemplateFromLocal, mergeStyles, positionToStyle, removeTemplateFromLocal, saveTemplateToLocal, setQrCodeOnElement, toReactStyle, useFieldMapping, useIDCardExport, useIDCardTemplate, validateCardSize, validateField, validateTemplate };
+export type { CardBackground, CardOrientation, CardSides, CardSize, DragState, ExportOptions, ExportResult, FieldDefinition, FieldMapping, FieldPosition, FieldStyle, FieldType, IDCardData, IDCardDesignerProps, IDCardGeneratorProps, IDCardPreviewProps, IDCardTemplate, ResizeState, TemplateStorage, UseFieldMappingReturn, UseIDCardExportReturn, UseIDCardTemplateReturn };

package/dist/types/components/IDCardDesigner.d.ts

@@ -15,4 +15,3 @@ import './IDCardDesigner.css';
  * IDCardDesigner - Visual drag-and-drop ID card template builder
  */
 export declare const IDCardDesigner: React.FC<IDCardDesignerProps>;
-export default IDCardDesigner;

package/dist/types/components/IDCardGenerator.d.ts

@@ -16,4 +16,3 @@ import type { IDCardGeneratorProps } from '../types';
  * ```
  */
 export declare const IDCardGenerator: React.FC<IDCardGeneratorProps>;
-export default IDCardGenerator;

package/dist/types/components/IDCardPreview.d.ts

@@ -12,4 +12,3 @@ import type { IDCardPreviewProps } from '../types';
  * Used inside the designer for visual editing
  */
 export declare const IDCardPreview: React.FC<IDCardPreviewProps>;
-export default IDCardPreview;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-id-card-generator",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A flexible React library for designing, configuring, and generating ID cards with drag-and-drop field positioning",
   "main": "dist/cjs/index.js",
+  "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -10,6 +11,10 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
       "types": "./dist/types/index.d.ts"
+    },
+    "./styles.css": {
+      "import": "./dist/esm/styles.css",
+      "require": "./dist/cjs/styles.css"
     }
   },
   "files": [