react-id-card-generator 1.0.20 → 1.0.22

package/dist/cjs/components/IDCardGenerator.js

@@ -143,7 +143,6 @@ const IDCardGenerator = ({ template, data, side = 'front', scale = 1, className
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight,
                         color: labelColor,
-                        opacity: 0.7,
                         marginRight: 8,
                         alignSelf: labelAlignSelf,
                         whiteSpace: 'nowrap',
@@ -164,7 +163,6 @@ const IDCardGenerator = ({ template, data, side = 'front', scale = 1, className
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight,
                         color: labelColor,
-                        opacity: 0.7,
                         textTransform: labelTextTransform,
                         width: '100%',
                         textAlign: labelTextAlign

package/dist/cjs/components/IDCardGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            marginRight: 8, \r\n            alignSelf: labelAlignSelf, \r\n            whiteSpace: 'nowrap', \r\n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            textTransform: labelTextTransform,\r\n            width: '100%',\r\n            textAlign: labelTextAlign\r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\n"],"names":["useMemo","positionToStyle","fieldStyleToCSS","_jsxs","_jsx","getQrCodeSize","generateQrCodeFromFields"],"mappings":"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"}
+{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            marginRight: 8, \n            alignSelf: labelAlignSelf, \n            whiteSpace: 'nowrap', \n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            textTransform: labelTextTransform,\n            width: '100%',\n            textAlign: labelTextAlign\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\n"],"names":["useMemo","positionToStyle","fieldStyleToCSS","_jsxs","_jsx","getQrCodeSize","generateQrCodeFromFields"],"mappings":"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"}

package/dist/cjs/components/IDCardPreview.js

@@ -162,7 +162,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             marginRight: 8,
                             alignSelf: labelAlignSelf,
                             whiteSpace: 'nowrap',
@@ -183,7 +182,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             textTransform: labelTextTransform,
                             width: '100%',
                             textAlign: labelTextAlign

package/dist/cjs/components/IDCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              marginRight: 8, \r\n              alignSelf: labelAlignSelf, \r\n              whiteSpace: 'nowrap', \r\n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              textTransform: labelTextTransform,\r\n              width: '100%',\r\n              textAlign: labelTextAlign\r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["useMemo","_jsx","positionToStyle","fieldStyleToCSS","_jsxs","_Fragment","getQrCodeSize","generateQrCodeFromFields"],"mappings":"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"}
+{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              marginRight: 8, \n              alignSelf: labelAlignSelf, \n              whiteSpace: 'nowrap', \n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              textTransform: labelTextTransform,\n              width: '100%',\n              textAlign: labelTextAlign\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["useMemo","_jsx","positionToStyle","fieldStyleToCSS","_jsxs","_Fragment","getQrCodeSize","generateQrCodeFromFields"],"mappings":"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"}

package/dist/cjs/core/qrUtils.js

@@ -59,18 +59,19 @@ function getQrCodeSize(width, height = width, scale = 1) {
  */
 function generateQrCodeDataURL(data, size = DEFAULT_QR_SIZE, options) {
     const background = options?.background ?? 'transparent';
-    const isTransparentBackground = background === 'transparent';
+    const normalizedSize = Math.max(MIN_QR_SIZE, Math.round(size));
+    const padding = Math.max(0, Math.round(options?.padding ?? 0));
     const qr = new qrious({
         value: JSON.stringify(data),
-        size,
+        size: normalizedSize,
         level: options?.level || 'H', // High error correction by default
-        padding: options?.padding ?? 0,
-        background,
-        backgroundAlpha: isTransparentBackground ? 0 : 1,
+        padding,
+        background: 'transparent',
+        backgroundAlpha: 0,
         foreground: options?.foreground || 'black',
         foregroundAlpha: 1,
     });
-    return qr.toDataURL('image/png');
+    return renderQrToTargetSize(qr.canvas, normalizedSize, background, padding);
 }
 /**
  * Generate QR code from specific fields in the card data
@@ -119,6 +120,74 @@ function setQrCodeOnElement(elementId, data, size = DEFAULT_QR_SIZE, container =
     }
     return false;
 }
+function renderQrToTargetSize(sourceCanvas, targetSize, background, padding) {
+    if (!sourceCanvas) {
+        return '';
+    }
+    const bounds = getOpaqueBounds(sourceCanvas);
+    const outputCanvas = document.createElement('canvas');
+    outputCanvas.width = targetSize;
+    outputCanvas.height = targetSize;
+    const context = outputCanvas.getContext('2d');
+    if (!context) {
+        return sourceCanvas.toDataURL('image/png');
+    }
+    if (background !== 'transparent') {
+        context.fillStyle = background;
+        context.fillRect(0, 0, targetSize, targetSize);
+    }
+    context.imageSmoothingEnabled = false;
+    const destinationPadding = Math.min(Math.max(0, padding), Math.floor((targetSize - 1) / 2));
+    const destinationSize = Math.max(1, targetSize - (destinationPadding * 2));
+    if (bounds) {
+        context.drawImage(sourceCanvas, bounds.x, bounds.y, bounds.width, bounds.height, destinationPadding, destinationPadding, destinationSize, destinationSize);
+    }
+    else {
+        context.drawImage(sourceCanvas, destinationPadding, destinationPadding, destinationSize, destinationSize);
+    }
+    return outputCanvas.toDataURL('image/png');
+}
+function getOpaqueBounds(canvas) {
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    if (!context) {
+        return null;
+    }
+    const { width, height } = canvas;
+    const { data } = context.getImageData(0, 0, width, height);
+    let minX = width;
+    let minY = height;
+    let maxX = -1;
+    let maxY = -1;
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            const alpha = data[((y * width) + x) * 4 + 3];
+            if (alpha === 0) {
+                continue;
+            }
+            if (x < minX) {
+                minX = x;
+            }
+            if (y < minY) {
+                minY = y;
+            }
+            if (x > maxX) {
+                maxX = x;
+            }
+            if (y > maxY) {
+                maxY = y;
+            }
+        }
+    }
+    if (maxX < minX || maxY < minY) {
+        return null;
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: (maxX - minX) + 1,
+        height: (maxY - minY) + 1,
+    };
+}
 
 exports.generateQrCodeDataURL = generateQrCodeDataURL;
 exports.generateQrCodeFromFields = generateQrCodeFromFields;

package/dist/cjs/core/qrUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\nimport type { IDCardData } from '../types';\n\nconst DEFAULT_QR_SIZE = 200;\nconst MIN_QR_SIZE = 32;\n\nfunction normalizeQrScale(scale = 1): number {\n  return Number.isFinite(scale) && scale > 0 ? scale : 1;\n}\n\nfunction resolveQrTargetElement(\n  elementId: string,\n  container: Document | HTMLElement\n): HTMLElement | null {\n  if (container instanceof HTMLElement) {\n    if (container.id === elementId) {\n      return container;\n    }\n\n    return container.querySelector<HTMLElement>(`#${elementId}`);\n  }\n\n  return container.getElementById(elementId);\n}\n\nfunction resolveQrImageElement(targetElement: HTMLElement | null): HTMLImageElement | null {\n  if (!targetElement) {\n    return null;\n  }\n\n  if (targetElement instanceof HTMLImageElement) {\n    return targetElement;\n  }\n\n  return targetElement.querySelector<HTMLImageElement>('img[data-qr-code-image=\"true\"], img');\n}\n\nfunction hasQrFieldValue(value: IDCardData[string]): boolean {\n  if (value === undefined) {\n    return false;\n  }\n\n  if (typeof value === 'string') {\n    return value.trim().length > 0;\n  }\n\n  if (Array.isArray(value)) {\n    return value.some((item) => String(item).trim().length > 0);\n  }\n\n  return true;\n}\n\nexport function getQrCodeSize(\n  width: number,\n  height = width,\n  scale = 1\n): number {\n  const normalizedWidth = Number.isFinite(width) ? width : 0;\n  const normalizedHeight = Number.isFinite(height) ? height : 0;\n  const hasWidth = normalizedWidth > 0;\n  const hasHeight = normalizedHeight > 0;\n  const baseSize = hasWidth && hasHeight\n    ? Math.min(normalizedWidth, normalizedHeight)\n    : Math.max(normalizedWidth, normalizedHeight);\n\n  if (baseSize <= 0) {\n    return Math.max(MIN_QR_SIZE, Math.round(DEFAULT_QR_SIZE * normalizeQrScale(scale)));\n  }\n\n  return Math.max(MIN_QR_SIZE, Math.round(baseSize * normalizeQrScale(scale)));\n}\n\n/**\n * Generate a QR code as a base64 data URL\n * @param data - Data to encode in the QR code (will be JSON stringified)\n * @param size - QR code size in pixels\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  options?: {\n    level?: 'L' | 'M' | 'Q' | 'H';  // Error correction level\n    padding?: number;\n    background?: string;\n    foreground?: string;\n  }\n): string {\n  const background = options?.background ?? 'transparent';\n  const isTransparentBackground = background === 'transparent';\n  const qr = new (QRious as any)({\n    value: JSON.stringify(data),\n    size,\n    level: options?.level || 'H',  // High error correction by default\n    padding: options?.padding ?? 0,\n    background,\n    backgroundAlpha: isTransparentBackground ? 0 : 1,\n    foreground: options?.foreground || 'black',\n    foregroundAlpha: 1,\n  });\n  return qr.toDataURL('image/png');\n}\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\n  data: IDCardData,\n  fields: string[],\n  size = DEFAULT_QR_SIZE\n): string {\n  const qrData = getQrCodeDataFromFields(data, fields);\n  if (Object.keys(qrData).length === 0) {\n    return '';\n  }\n\n  return generateQrCodeDataURL(qrData, size);\n}\n\nexport function getQrCodeDataFromFields(\n  data: IDCardData,\n  fields: string[]\n): Record<string, unknown> {\n  // Build object with only the specified fields that actually contain data\n  const qrData: Record<string, unknown> = {};\n\n  for (const field of fields) {\n    const value = data[field];\n    if (hasQrFieldValue(value)) {\n      qrData[field] = value;\n    }\n  }\n\n  return qrData;\n}\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\n  elementId: string,\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  container: Document | HTMLElement = document\n): boolean {\n  const qrDataURL = generateQrCodeDataURL(data, size);\n  const targetElement = resolveQrTargetElement(elementId, container);\n  const imgTag = resolveQrImageElement(targetElement);\n\n  if (imgTag) {\n    imgTag.setAttribute('src', qrDataURL);\n    imgTag.setAttribute('data-qr-code-image', 'true');\n    imgTag.style.display = 'block';\n    imgTag.style.opacity = '1';\n    imgTag.style.visibility = 'visible';\n    imgTag.style.backgroundColor = 'transparent';\n    if (targetElement) {\n      targetElement.style.backgroundColor = 'transparent';\n    }\n    return true;\n  }\n  return false;\n}\n"],"names":["QRious"],"mappings":"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"}
+{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\nimport type { IDCardData } from '../types';\n\nconst DEFAULT_QR_SIZE = 200;\nconst MIN_QR_SIZE = 32;\n\ntype QrRenderOptions = {\n  level?: 'L' | 'M' | 'Q' | 'H';\n  padding?: number;\n  background?: string;\n  foreground?: string;\n};\n\nfunction normalizeQrScale(scale = 1): number {\n  return Number.isFinite(scale) && scale > 0 ? scale : 1;\n}\n\nfunction resolveQrTargetElement(\n  elementId: string,\n  container: Document | HTMLElement\n): HTMLElement | null {\n  if (container instanceof HTMLElement) {\n    if (container.id === elementId) {\n      return container;\n    }\n\n    return container.querySelector<HTMLElement>(`#${elementId}`);\n  }\n\n  return container.getElementById(elementId);\n}\n\nfunction resolveQrImageElement(targetElement: HTMLElement | null): HTMLImageElement | null {\n  if (!targetElement) {\n    return null;\n  }\n\n  if (targetElement instanceof HTMLImageElement) {\n    return targetElement;\n  }\n\n  return targetElement.querySelector<HTMLImageElement>('img[data-qr-code-image=\"true\"], img');\n}\n\nfunction hasQrFieldValue(value: IDCardData[string]): boolean {\n  if (value === undefined) {\n    return false;\n  }\n\n  if (typeof value === 'string') {\n    return value.trim().length > 0;\n  }\n\n  if (Array.isArray(value)) {\n    return value.some((item) => String(item).trim().length > 0);\n  }\n\n  return true;\n}\n\nexport function getQrCodeSize(\n  width: number,\n  height = width,\n  scale = 1\n): number {\n  const normalizedWidth = Number.isFinite(width) ? width : 0;\n  const normalizedHeight = Number.isFinite(height) ? height : 0;\n  const hasWidth = normalizedWidth > 0;\n  const hasHeight = normalizedHeight > 0;\n  const baseSize = hasWidth && hasHeight\n    ? Math.min(normalizedWidth, normalizedHeight)\n    : Math.max(normalizedWidth, normalizedHeight);\n\n  if (baseSize <= 0) {\n    return Math.max(MIN_QR_SIZE, Math.round(DEFAULT_QR_SIZE * normalizeQrScale(scale)));\n  }\n\n  return Math.max(MIN_QR_SIZE, Math.round(baseSize * normalizeQrScale(scale)));\n}\n\n/**\n * Generate a QR code as a base64 data URL\n * @param data - Data to encode in the QR code (will be JSON stringified)\n * @param size - QR code size in pixels\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  options?: QrRenderOptions\n): string {\n  const background = options?.background ?? 'transparent';\n  const normalizedSize = Math.max(MIN_QR_SIZE, Math.round(size));\n  const padding = Math.max(0, Math.round(options?.padding ?? 0));\n  const qr = new (QRious as any)({\n    value: JSON.stringify(data),\n    size: normalizedSize,\n    level: options?.level || 'H',  // High error correction by default\n    padding,\n    background: 'transparent',\n    backgroundAlpha: 0,\n    foreground: options?.foreground || 'black',\n    foregroundAlpha: 1,\n  });\n\n  return renderQrToTargetSize(qr.canvas, normalizedSize, background, padding);\n}\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\n  data: IDCardData,\n  fields: string[],\n  size = DEFAULT_QR_SIZE\n): string {\n  const qrData = getQrCodeDataFromFields(data, fields);\n  if (Object.keys(qrData).length === 0) {\n    return '';\n  }\n\n  return generateQrCodeDataURL(qrData, size);\n}\n\nexport function getQrCodeDataFromFields(\n  data: IDCardData,\n  fields: string[]\n): Record<string, unknown> {\n  // Build object with only the specified fields that actually contain data\n  const qrData: Record<string, unknown> = {};\n\n  for (const field of fields) {\n    const value = data[field];\n    if (hasQrFieldValue(value)) {\n      qrData[field] = value;\n    }\n  }\n\n  return qrData;\n}\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\n  elementId: string,\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  container: Document | HTMLElement = document\n): boolean {\n  const qrDataURL = generateQrCodeDataURL(data, size);\n  const targetElement = resolveQrTargetElement(elementId, container);\n  const imgTag = resolveQrImageElement(targetElement);\n\n  if (imgTag) {\n    imgTag.setAttribute('src', qrDataURL);\n    imgTag.setAttribute('data-qr-code-image', 'true');\n    imgTag.style.display = 'block';\n    imgTag.style.opacity = '1';\n    imgTag.style.visibility = 'visible';\n    imgTag.style.backgroundColor = 'transparent';\n    if (targetElement) {\n      targetElement.style.backgroundColor = 'transparent';\n    }\n    return true;\n  }\n  return false;\n}\n\nfunction renderQrToTargetSize(\n  sourceCanvas: HTMLCanvasElement | undefined,\n  targetSize: number,\n  background: string,\n  padding: number\n): string {\n  if (!sourceCanvas) {\n    return '';\n  }\n\n  const bounds = getOpaqueBounds(sourceCanvas);\n  const outputCanvas = document.createElement('canvas');\n  outputCanvas.width = targetSize;\n  outputCanvas.height = targetSize;\n\n  const context = outputCanvas.getContext('2d');\n  if (!context) {\n    return sourceCanvas.toDataURL('image/png');\n  }\n\n  if (background !== 'transparent') {\n    context.fillStyle = background;\n    context.fillRect(0, 0, targetSize, targetSize);\n  }\n\n  context.imageSmoothingEnabled = false;\n  const destinationPadding = Math.min(Math.max(0, padding), Math.floor((targetSize - 1) / 2));\n  const destinationSize = Math.max(1, targetSize - (destinationPadding * 2));\n\n  if (bounds) {\n    context.drawImage(\n      sourceCanvas,\n      bounds.x,\n      bounds.y,\n      bounds.width,\n      bounds.height,\n      destinationPadding,\n      destinationPadding,\n      destinationSize,\n      destinationSize\n    );\n  } else {\n    context.drawImage(\n      sourceCanvas,\n      destinationPadding,\n      destinationPadding,\n      destinationSize,\n      destinationSize\n    );\n  }\n\n  return outputCanvas.toDataURL('image/png');\n}\n\nfunction getOpaqueBounds(\n  canvas: HTMLCanvasElement\n): { x: number; y: number; width: number; height: number } | null {\n  const context = canvas.getContext('2d', { willReadFrequently: true });\n  if (!context) {\n    return null;\n  }\n\n  const { width, height } = canvas;\n  const { data } = context.getImageData(0, 0, width, height);\n\n  let minX = width;\n  let minY = height;\n  let maxX = -1;\n  let maxY = -1;\n\n  for (let y = 0; y < height; y += 1) {\n    for (let x = 0; x < width; x += 1) {\n      const alpha = data[((y * width) + x) * 4 + 3];\n      if (alpha === 0) {\n        continue;\n      }\n\n      if (x < minX) {\n        minX = x;\n      }\n      if (y < minY) {\n        minY = y;\n      }\n      if (x > maxX) {\n        maxX = x;\n      }\n      if (y > maxY) {\n        maxY = y;\n      }\n    }\n  }\n\n  if (maxX < minX || maxY < minY) {\n    return null;\n  }\n\n  return {\n    x: minX,\n    y: minY,\n    width: (maxX - minX) + 1,\n    height: (maxY - minY) + 1,\n  };\n}\n"],"names":["QRious"],"mappings":"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"}

package/dist/esm/components/IDCardGenerator.js

@@ -141,7 +141,6 @@ const IDCardGenerator = ({ template, data, side = 'front', scale = 1, className
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight,
                         color: labelColor,
-                        opacity: 0.7,
                         marginRight: 8,
                         alignSelf: labelAlignSelf,
                         whiteSpace: 'nowrap',
@@ -162,7 +161,6 @@ const IDCardGenerator = ({ template, data, side = 'front', scale = 1, className
                         fontSize: labelFontSize,
                         fontWeight: labelFontWeight,
                         color: labelColor,
-                        opacity: 0.7,
                         textTransform: labelTextTransform,
                         width: '100%',
                         textAlign: labelTextAlign

package/dist/esm/components/IDCardGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            marginRight: 8, \r\n            alignSelf: labelAlignSelf, \r\n            whiteSpace: 'nowrap', \r\n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \r\n            fontWeight: labelFontWeight, \r\n            color: labelColor, \r\n            opacity: 0.7, \r\n            textTransform: labelTextTransform,\r\n            width: '100%',\r\n            textAlign: labelTextAlign\r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"IDCardGenerator.js","sources":["../../../src/components/IDCardGenerator.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardGeneratorProps, FieldMapping, IDCardData, IDCardTemplate } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardGenerator - Renders a completed ID card\r\n * \r\n * Takes a template and user data, then renders the filled card.\r\n * This is the component used to display actual ID cards for individual users.\r\n * \r\n * Example:\r\n * ```tsx\r\n * <IDCardGenerator \r\n *   template={myTemplate}\r\n *   data={{ name: 'John Doe', photo: '...' }}\r\n *   side=\"front\"\r\n * />\r\n * ```\r\n */\r\nexport const IDCardGenerator: React.FC<IDCardGeneratorProps> = ({\r\n  template,\r\n  data,\r\n  side = 'front',\r\n  scale = 1,\r\n  className = '',\r\n  style = {},\r\n  onFieldClick,\r\n  editable = false,\r\n}: IDCardGeneratorProps) => {\r\n  // Get fields for the current side only\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    \r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' | undefined = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: don't set alignItems on container if individual alignments are specified\r\n        // Let labelAlignSelf and textAlignSelf handle it\r\n        if (field.style?.labelVerticalAlign || field.style?.textVerticalAlign) {\r\n          alignItems = undefined;\r\n        } else {\r\n          // Fall back to general verticalAlign if individual ones aren't specified\r\n          if (verticalAlign === 'middle') alignItems = 'center';\r\n          else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n          else alignItems = 'flex-start';\r\n        }\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'pointer' : 'default',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      if (onFieldClick) {\r\n        e.stopPropagation();\r\n        onFieldClick(field);\r\n      }\r\n    };\r\n\r\n    const value = getFieldValue(field, data);\r\n\r\n    switch (field.type) {\r\n      case 'text': {\r\n        // Label style properties\r\n        let labelFontSize = field.style?.labelFontSize;\r\n        if (!labelFontSize || labelFontSize === '0.75em') {\r\n          labelFontSize = '12px';\r\n        } else if (!labelFontSize.endsWith('px')) {\r\n          const num = parseFloat(labelFontSize);\r\n          if (!isNaN(num)) labelFontSize = num + 'px';\r\n          else labelFontSize = '12px';\r\n        }\r\n        const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n        const labelColor = field.style?.labelColor || '#666666';\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n        \r\n        // Text/value style properties (separate from label)\r\n        const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n        const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n        const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n        const textTextTransform = field.style?.textTransform || 'none';\r\n        const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n        \r\n        // For row layout (label on left), use individual span alignment\r\n        if (field.style?.labelPosition === 'left') {\r\n          let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n          else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n          \r\n          let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n          if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n          else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n          \r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            marginRight: 8, \n            alignSelf: labelAlignSelf, \n            whiteSpace: 'nowrap', \n            textTransform: labelTextTransform \r\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor, \r\n            alignSelf: textAlignSelf\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n              </span>\r\n            </div>\r\n          );\r\n        } else {\r\n          // For column layout (label on top), let container alignment handle positioning\r\n          const labelStyle: React.CSSProperties = { \r\n            fontSize: labelFontSize, \n            fontWeight: labelFontWeight, \n            color: labelColor, \n            textTransform: labelTextTransform,\n            width: '100%',\n            textAlign: labelTextAlign\n          };\r\n          \r\n          const textStyle: React.CSSProperties = { \r\n            textTransform: textTextTransform, \r\n            fontSize: textFontSize, \r\n            fontWeight: textFontWeight, \r\n            color: textColor,\r\n            width: '100%',\r\n            textAlign: textTextAlign\r\n          };\r\n          \r\n          return (\r\n            <div\r\n              key={field.id}\r\n              id={field.id}\r\n              style={combinedStyle}\r\n              onClick={handleClick}\r\n              className=\"idcard-field idcard-field-text\"\r\n            >\r\n              {field.label && (\r\n                <span className=\"idcard-field-label\" style={labelStyle}>\r\n                  {field.label}\r\n                </span>\r\n              )}\r\n              <span className=\"idcard-field-value\" style={textStyle}>{String(value || field.placeholder || '')}</span>\r\n            </div>\r\n          );\r\n        }\r\n      }\r\n\r\n      case 'label': {\r\n        const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n            className=\"idcard-field idcard-field-label\"\r\n          >\r\n            <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || ''}</span>\r\n          </div>\r\n        );\r\n      }\r\n\r\n      case 'image':\r\n        return (\r\n          <div\r\n            key={field.id}\r\n            id={field.id}\r\n            style={combinedStyle}\r\n            onClick={handleClick}\r\n          >\r\n            {value ? (\r\n              <img\r\n                src={String(value)}\r\n                alt={field.label || 'Image'}\r\n                style={{\r\n                  width: '100%',\r\n                  display: 'block',\r\n                }}\r\n              />\r\n            ) : (\r\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#e0e0e0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                {field.label || 'Photo'}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\n      case 'qrcode':\n        const qrSize = getQrCodeSize(field.position.width, field.position.height);\n        const qrDataUrl = field.qrFields?.length\n          ? generateQrCodeFromFields(\n              data,\n              field.qrFields,\n              qrSize\n            )\n          : '';\n\n        return (\n          <div\n            key={field.id}\n            id={field.id}\n            style={combinedStyle}\n            onClick={handleClick}\n            className=\"idcard-field idcard-field-qrcode\"\n          >\n            {qrDataUrl ? (\n              <img\n                src={qrDataUrl}\n                alt=\"QR Code\"\n                data-qr-code-image=\"true\"\n                style={{\n                  width: `${qrSize}px`,\n                  height: `${qrSize}px`,\n                  display: 'block',\n                  backgroundColor: 'transparent',\n                  objectFit: 'contain',\n                  objectPosition: 'center',\n                  maxWidth: '100%',\n                  maxHeight: '100%',\n                  flexShrink: 0,\n                }}\n              />\n            ) : (\n              <div\r\n                style={{\r\n                  width: '100%',\r\n                  height: '100%',\r\n                  backgroundColor: '#f0f0f0',\r\n                  display: 'flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  fontSize: '10px',\r\n                  color: '#666',\r\n                }}\r\n              >\r\n                QR Code\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: '#fff',\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <div\r\n      id={side === 'front' ? 'idcardfront' : 'idcardback'}\r\n      className={`idcard-container idcard-${side} ${className}`}\r\n      style={cardStyle}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Get field value from data based on field configuration\r\n */\r\nfunction getFieldValue(field: FieldMapping, data: IDCardData): string | number | undefined {\r\n  if (field.type === 'label') {\r\n    return field.staticText;\r\n  }\r\n\r\n  const value = data[field.fieldKey];\r\n\r\n  // Handle array values (like department)\r\n  if (Array.isArray(value)) {\r\n    return value[0];\r\n  }\r\n\r\n  return value as string | number | undefined;\r\n}\r\n\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/IDCardPreview.js

@@ -160,7 +160,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             marginRight: 8,
                             alignSelf: labelAlignSelf,
                             whiteSpace: 'nowrap',
@@ -181,7 +180,6 @@ const IDCardPreview = ({ template, data, side, scale = 1, showGrid = false, onFi
                             fontSize: labelFontSize,
                             fontWeight: labelFontWeight,
                             color: labelColor,
-                            opacity: 0.7,
                             textTransform: labelTextTransform,
                             width: '100%',
                             textAlign: labelTextAlign

package/dist/esm/components/IDCardPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              marginRight: 8, \r\n              alignSelf: labelAlignSelf, \r\n              whiteSpace: 'nowrap', \r\n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \r\n              fontWeight: labelFontWeight, \r\n              color: labelColor, \r\n              opacity: 0.7, \r\n              textTransform: labelTextTransform,\r\n              width: '100%',\r\n              textAlign: labelTextAlign\r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"IDCardPreview.js","sources":["../../../src/components/IDCardPreview.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { IDCardPreviewProps, FieldMapping } from '../types';\nimport { fieldStyleToCSS, positionToStyle } from '../utils/styleUtils';\nimport { generateQrCodeFromFields, getQrCodeSize } from '../core/qrUtils';\n\r\n/**\r\n * IDCardPreview - Interactive card preview component\r\n * \r\n * Renders an ID card with:\r\n * - Field selection and highlighting\r\n * - Resize handles for selected fields\r\n * - Grid overlay for alignment\r\n * - Dynamic field rendering based on type\r\n * \r\n * Used inside the designer for visual editing\r\n */\r\nexport const IDCardPreview: React.FC<IDCardPreviewProps> = ({\r\n  template,\r\n  data,\r\n  side,\r\n  scale = 1,\r\n  showGrid = false,\r\n  onFieldSelect,\r\n  selectedFieldId,\r\n  editable = true,\r\n  onFieldUpdate,\r\n}: IDCardPreviewProps) => {\r\n  // Get only fields that belong to the current side\r\n  const fieldsToRender = useMemo(() => {\r\n    return template.fields.filter((field: FieldMapping) => field.side === side);\r\n  }, [template.fields, side]);\r\n\r\n  // Get background for current side\r\n  const backgroundImage = side === 'front' ? template.backgrounds.front : template.backgrounds.back;\r\n\r\n  // Render resize handles for selected field\r\n  const renderResizeHandles = (field: FieldMapping) => {\r\n    if (field.id !== selectedFieldId || !editable) return null;\r\n\r\n    const handles = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];\r\n    const handleStyle: React.CSSProperties = {\r\n      position: 'absolute',\r\n      width: '8px',\r\n      height: '8px',\r\n      backgroundColor: '#2196F3',\r\n      border: '1px solid #fff',\r\n      borderRadius: '2px',\r\n      zIndex: 1000,\r\n    };\r\n\r\n    const positions: Record<string, React.CSSProperties> = {\r\n      n: { top: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 'n-resize' },\r\n      s: { bottom: '-4px', left: '50%', transform: 'translateX(-50%)', cursor: 's-resize' },\r\n      e: { right: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'e-resize' },\r\n      w: { left: '-4px', top: '50%', transform: 'translateY(-50%)', cursor: 'w-resize' },\r\n      ne: { top: '-4px', right: '-4px', cursor: 'ne-resize' },\r\n      nw: { top: '-4px', left: '-4px', cursor: 'nw-resize' },\r\n      se: { bottom: '-4px', right: '-4px', cursor: 'se-resize' },\r\n      sw: { bottom: '-4px', left: '-4px', cursor: 'sw-resize' },\r\n    };\r\n\r\n    return handles.map((handle) => (\r\n      <div\r\n        key={handle}\r\n        className={`resize-handle resize-handle-${handle}`}\r\n        style={{ ...handleStyle, ...positions[handle] }}\r\n        data-handle={handle}\r\n      />\r\n    ));\r\n  };\r\n\r\n  // Render a single field\r\n  const renderField = (field: FieldMapping) => {\r\n    const posStyle = positionToStyle(field.position);\r\n    let fieldStyle = fieldStyleToCSS(field.style);\r\n    const isSelected = field.id === selectedFieldId;\r\n\r\n    // Determine flex direction and alignment for text fields\r\n    let flexDirection: 'column' | 'row' = 'column';\r\n    if (field.type === 'text' && field.style?.labelPosition === 'left') flexDirection = 'row';\r\n\r\n    // Map verticalAlign and textAlign to flex properties\r\n    let justifyContent: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';\r\n    if (field.type === 'text') {\r\n      const textAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n      const verticalAlign = field.style?.verticalAlign || 'top';\r\n      \r\n      if (flexDirection === 'column') {\r\n        // For column: verticalAlign controls justifyContent (vertical), textAlign controls alignItems (horizontal)\r\n        if (verticalAlign === 'middle') justifyContent = 'center';\r\n        else if (verticalAlign === 'bottom') justifyContent = 'flex-end';\r\n        else justifyContent = 'flex-start';\r\n        \r\n        if (textAlign === 'center') alignItems = 'center';\r\n        else if (textAlign === 'right') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n      } else {\r\n        // For row: verticalAlign controls alignItems (vertical)\r\n        if (verticalAlign === 'middle') alignItems = 'center';\r\n        else if (verticalAlign === 'bottom') alignItems = 'flex-end';\r\n        else alignItems = 'flex-start';\r\n        // justifyContent can be left as default for row\r\n      }\r\n    }\r\n\r\n    // Remove fontSize for label fields so text field font size does not affect them\r\n    if (field.type === 'label' && fieldStyle.fontSize) {\r\n      const { fontSize, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    // Remove textTransform from container for text and label fields - applied directly to spans\r\n    if ((field.type === 'text' || field.type === 'label') && fieldStyle.textTransform) {\r\n      const { textTransform, ...rest } = fieldStyle;\r\n      fieldStyle = rest;\r\n    }\r\n\r\n    const combinedStyle: React.CSSProperties = {\n      ...posStyle,\n      ...fieldStyle,\n      backgroundColor: field.type === 'qrcode' ? 'transparent' : fieldStyle.backgroundColor,\n      zIndex: field.zIndex || 1,\n      boxSizing: 'border-box',\n      overflow: 'hidden',\n      cursor: editable ? 'move' : 'default',\n      outline: isSelected ? '2px solid #2196F3' : 'none',\n      outlineOffset: '1px',\n      display: field.type === 'text' || field.type === 'qrcode' ? 'flex' : undefined,\n      flexDirection: field.type === 'text' ? flexDirection : undefined,\n      justifyContent: field.type === 'text' ? justifyContent : field.type === 'qrcode' ? 'center' : undefined,\n      alignItems: field.type === 'text' ? alignItems : field.type === 'qrcode' ? 'center' : undefined,\n    };\r\n\r\n    const handleClick = (e: React.MouseEvent) => {\r\n      e.stopPropagation();\r\n      onFieldSelect?.(field);\r\n    };\r\n\r\n    const value = data[field.fieldKey];\r\n\r\n    const content = (() => {\r\n\r\n      switch (field.type) {\r\n        case 'text': {\r\n          // Label style properties\r\n          // Always use px for label font size, default 12px\r\n          let labelFontSize = field.style?.labelFontSize;\r\n          if (!labelFontSize || labelFontSize === '0.75em') {\r\n            labelFontSize = '12px';\r\n          } else if (!labelFontSize.endsWith('px')) {\r\n            const num = parseFloat(labelFontSize);\r\n            if (!isNaN(num)) labelFontSize = num + 'px';\r\n            else labelFontSize = '12px';\r\n          }\r\n          const labelFontWeight = field.style?.labelFontWeight || 'normal';\r\n          const labelColor = field.style?.labelColor || '#666666';\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          const labelTextAlign = field.style?.labelTextAlign || 'left';\r\n          \r\n          // Text/value style properties (separate from label)\r\n          const textFontSize = field.style?.textFontSize || field.style?.fontSize || '1em';\r\n          const textFontWeight = field.style?.textFontWeight || field.style?.fontWeight || 'normal';\r\n          const textColor = field.style?.textColor || field.style?.color || '#000000';\r\n          const textTextTransform = field.style?.textTransform || 'none';\r\n          const textTextAlign = field.style?.textTextAlign || field.style?.textAlign || 'left';\r\n          \r\n          // For row layout (label on left), use individual span alignment\r\n          if (field.style?.labelPosition === 'left') {\r\n            let labelAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.labelVerticalAlign === 'middle') labelAlignSelf = 'center';\r\n            else if (field.style?.labelVerticalAlign === 'bottom') labelAlignSelf = 'flex-end';\r\n            \r\n            let textAlignSelf: React.CSSProperties['alignSelf'] = 'flex-start';\r\n            if (field.style?.textVerticalAlign === 'middle') textAlignSelf = 'center';\r\n            else if (field.style?.textVerticalAlign === 'bottom') textAlignSelf = 'flex-end';\r\n            \r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              marginRight: 8, \n              alignSelf: labelAlignSelf, \n              whiteSpace: 'nowrap', \n              textTransform: labelTextTransform \r\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor, \r\n              alignSelf: textAlignSelf\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={{ width: '100%', textAlign: textTextAlign }}>\r\n                  <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n                </span>\r\n              </>\r\n            );\r\n          } else {\r\n            // For column layout (label on top), let container alignment handle positioning\r\n            const labelStyle: React.CSSProperties = { \r\n              fontSize: labelFontSize, \n              fontWeight: labelFontWeight, \n              color: labelColor, \n              textTransform: labelTextTransform,\n              width: '100%',\n              textAlign: labelTextAlign\n            };\r\n            \r\n            const textStyle: React.CSSProperties = { \r\n              textTransform: textTextTransform, \r\n              fontSize: textFontSize, \r\n              fontWeight: textFontWeight, \r\n              color: textColor,\r\n              width: '100%',\r\n              textAlign: textTextAlign\r\n            };\r\n            \r\n            return (\r\n              <>\r\n                {field.label && (\r\n                  <span style={labelStyle}>\r\n                    {field.label}\r\n                  </span>\r\n                )}\r\n                <span style={textStyle}>{String(value || field.placeholder || field.fieldKey)}</span>\r\n              </>\r\n            );\r\n          }\r\n        }\r\n\r\n        case 'label': {\r\n          const labelTextTransform = field.style?.labelTextTransform || 'none';\r\n          return <span style={{ textTransform: labelTextTransform }}>{field.staticText || field.label || 'Label'}</span>;\r\n        }\r\n\r\n        case 'image':\r\n          return value ? (\r\n            <img\r\n              src={String(value)}\r\n              alt={field.label || 'Image'}\r\n              style={{\r\n                width: '100%',\r\n                display: 'block',\r\n              }}\r\n            />\r\n          ) : (\r\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#e0e0e0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                flexDirection: 'column',\r\n              }}\r\n            >\r\n              <span>📷</span>\r\n              <span>{field.label || 'Photo'}</span>\r\n            </div>\r\n          );\r\n\n        case 'qrcode':\n          const qrSize = getQrCodeSize(field.position.width, field.position.height);\n          const qrDataUrl = field.qrFields?.length\n            ? generateQrCodeFromFields(data, field.qrFields, qrSize)\n            : '';\n\r\n          return qrDataUrl ? (\r\n            <img\n              src={qrDataUrl}\n              alt=\"QR Code\"\n              data-qr-code-image=\"true\"\n              style={{\n                width: `${qrSize}px`,\n                height: `${qrSize}px`,\n                display: 'block',\n                pointerEvents: 'none',\n                backgroundColor: 'transparent',\n                objectFit: 'contain',\n                objectPosition: 'center',\n                maxWidth: '100%',\n                maxHeight: '100%',\n                flexShrink: 0,\n              }}\n            />\n          ) : (\n            <div\r\n              style={{\r\n                width: '100%',\r\n                height: '100%',\r\n                backgroundColor: '#f0f0f0',\r\n                display: 'flex',\r\n                alignItems: 'center',\r\n                justifyContent: 'center',\r\n                fontSize: '10px',\r\n                color: '#666',\r\n                border: '1px dashed #ccc',\r\n              }}\r\n            >\r\n              QR Code\r\n            </div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    })();\r\n\r\n    return (\r\n      <div\r\n        key={field.id}\r\n        id={`preview-${field.id}`}\r\n        style={combinedStyle}\r\n        onClick={handleClick}\r\n        className={`preview-field preview-field-${field.type} ${isSelected ? 'selected' : ''}`}\r\n      >\r\n        {content}\r\n        {renderResizeHandles(field)}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  // Card container style\r\n  const cardStyle: React.CSSProperties = {\r\n    width: Math.round(template.cardSize.width),\r\n    height: Math.round(template.cardSize.height),\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    backgroundColor: backgroundImage ? 'transparent' : '#f5f5f5',\r\n    border: '1px solid #ddd',\r\n  };\r\n\r\n  // Grid overlay style\r\n  const gridStyle: React.CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    height: '100%',\r\n    backgroundImage: showGrid\r\n      ? 'linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)'\r\n      : 'none',\r\n    backgroundSize: '10px 10px',\r\n    pointerEvents: 'none',\r\n    zIndex: 999,\r\n  };\r\n\r\n  const handleContainerClick = () => {\r\n    onFieldSelect?.(null);\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className=\"idcard-preview-container\"\r\n      style={cardStyle}\r\n      onClick={handleContainerClick}\r\n    >\r\n      {/* Background */}\r\n      {backgroundImage && (\r\n        <img\r\n          src={backgroundImage}\r\n          alt={`${side} background`}\r\n          style={{\r\n            position: 'absolute',\r\n            top: 0,\r\n            left: 0,\r\n            width: `${Math.round(template.cardSize.width)}px`,\r\n            height: `${Math.round(template.cardSize.height)}px`,\r\n            zIndex: 0,\r\n            pointerEvents: 'none',\r\n          }}\r\n        />\r\n      )}\r\n\r\n      {/* Fields */}\r\n      {fieldsToRender.map(renderField)}\r\n\r\n      {/* Grid overlay */}\r\n      {showGrid && <div style={gridStyle} />}\r\n\r\n      {/* Empty state */}\r\n      {!backgroundImage && fieldsToRender.length === 0 && (\r\n        <div\r\n          style={{\r\n            position: 'absolute',\r\n            top: '50%',\r\n            left: '50%',\r\n            transform: 'translate(-50%, -50%)',\r\n            textAlign: 'center',\r\n            color: '#999',\r\n            fontSize: '14px',\r\n          }}\r\n        >\r\n          <p>Upload a background image</p>\r\n          <p>and add fields to get started</p>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":";;;;;AAKA;;;;;;;;;;AAUG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,eAAe,EACf,QAAQ,GAAG,IAAI,EACf,aAAa,GACM,KAAI;;AAEvB,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,OAAO,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAmB,KAAK,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;IAC7E,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;;IAG3B,MAAM,eAAe,GAAG,IAAI,KAAK,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI;;AAGjG,IAAA,MAAM,mBAAmB,GAAG,CAAC,KAAmB,KAAI;AAClD,QAAA,IAAI,KAAK,CAAC,EAAE,KAAK,eAAe,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,IAAI;AAE1D,QAAA,MAAM,OAAO,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAC5D,QAAA,MAAM,WAAW,GAAwB;AACvC,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,eAAe,EAAE,SAAS;AAC1B,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,MAAM,EAAE,IAAI;SACb;AAED,QAAA,MAAM,SAAS,GAAwC;AACrD,YAAA,CAAC,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;AAClF,YAAA,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;AACrF,YAAA,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;AACnF,YAAA,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;AAClF,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE;AACvD,YAAA,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE;AACtD,YAAA,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE;AAC1D,YAAA,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE;SAC1D;AAED,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACxBA,aAEE,SAAS,EAAE,CAAA,4BAAA,EAA+B,MAAM,EAAE,EAClD,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,EAAA,aAAA,EAClC,MAAM,EAAA,EAHd,MAAM,CAIX,CACH,CAAC;AACJ,IAAA,CAAC;;AAGD,IAAA,MAAM,WAAW,GAAG,CAAC,KAAmB,KAAI;QAC1C,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAC;QAChD,IAAI,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC;AAC7C,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,KAAK,eAAe;;QAG/C,IAAI,aAAa,GAAqB,QAAQ;AAC9C,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM;YAAE,aAAa,GAAG,KAAK;;QAGzF,IAAI,cAAc,GAAyC,YAAY;QACvE,IAAI,UAAU,GAAyC,YAAY;AACnE,QAAA,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;AACzB,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,aAAa,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,IAAI,MAAM;YAChF,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,aAAa,IAAI,KAAK;AAEzD,YAAA,IAAI,aAAa,KAAK,QAAQ,EAAE;;gBAE9B,IAAI,aAAa,KAAK,QAAQ;oBAAE,cAAc,GAAG,QAAQ;qBACpD,IAAI,aAAa,KAAK,QAAQ;oBAAE,cAAc,GAAG,UAAU;;oBAC3D,cAAc,GAAG,YAAY;gBAElC,IAAI,SAAS,KAAK,QAAQ;oBAAE,UAAU,GAAG,QAAQ;qBAC5C,IAAI,SAAS,KAAK,OAAO;oBAAE,UAAU,GAAG,UAAU;;oBAClD,UAAU,GAAG,YAAY;YAChC;iBAAO;;gBAEL,IAAI,aAAa,KAAK,QAAQ;oBAAE,UAAU,GAAG,QAAQ;qBAChD,IAAI,aAAa,KAAK,QAAQ;oBAAE,UAAU,GAAG,UAAU;;oBACvD,UAAU,GAAG,YAAY;;YAEhC;QACF;;QAGA,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,UAAU,CAAC,QAAQ,EAAE;YACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU;YACxC,UAAU,GAAG,IAAI;QACnB;;AAGA,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,KAAK,UAAU,CAAC,aAAa,EAAE;YACjF,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,GAAG,UAAU;YAC7C,UAAU,GAAG,IAAI;QACnB;AAEA,QAAA,MAAM,aAAa,GAAwB;AACzC,YAAA,GAAG,QAAQ;AACX,YAAA,GAAG,UAAU;AACb,YAAA,eAAe,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,aAAa,GAAG,UAAU,CAAC,eAAe;AACrF,YAAA,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC;AACzB,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS;YACrC,OAAO,EAAE,UAAU,GAAG,mBAAmB,GAAG,MAAM;AAClD,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,SAAS;AAC9E,YAAA,aAAa,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM,GAAG,aAAa,GAAG,SAAS;YAChE,cAAc,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM,GAAG,cAAc,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS;YACvG,UAAU,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS;SAChG;AAED,QAAA,MAAM,WAAW,GAAG,CAAC,CAAmB,KAAI;YAC1C,CAAC,CAAC,eAAe,EAAE;AACnB,YAAA,aAAa,GAAG,KAAK,CAAC;AACxB,QAAA,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AAElC,QAAA,MAAM,OAAO,GAAG,CAAC,MAAK;AAEpB,YAAA,QAAQ,KAAK,CAAC,IAAI;gBAChB,KAAK,MAAM,EAAE;;;AAGX,oBAAA,IAAI,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,aAAa;AAC9C,oBAAA,IAAI,CAAC,aAAa,IAAI,aAAa,KAAK,QAAQ,EAAE;wBAChD,aAAa,GAAG,MAAM;oBACxB;yBAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACxC,wBAAA,MAAM,GAAG,GAAG,UAAU,CAAC,aAAa,CAAC;AACrC,wBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AAAE,4BAAA,aAAa,GAAG,GAAG,GAAG,IAAI;;4BACtC,aAAa,GAAG,MAAM;oBAC7B;oBACA,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,EAAE,eAAe,IAAI,QAAQ;oBAChE,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,UAAU,IAAI,SAAS;oBACvD,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,EAAE,kBAAkB,IAAI,MAAM;oBACpE,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,EAAE,cAAc,IAAI,MAAM;;AAG5D,oBAAA,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,EAAE,YAAY,IAAI,KAAK,CAAC,KAAK,EAAE,QAAQ,IAAI,KAAK;AAChF,oBAAA,MAAM,cAAc,GAAG,KAAK,CAAC,KAAK,EAAE,cAAc,IAAI,KAAK,CAAC,KAAK,EAAE,UAAU,IAAI,QAAQ;AACzF,oBAAA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,SAAS,IAAI,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,SAAS;oBAC3E,MAAM,iBAAiB,GAAG,KAAK,CAAC,KAAK,EAAE,aAAa,IAAI,MAAM;AAC9D,oBAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE,aAAa,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,IAAI,MAAM;;oBAGpF,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,EAAE;wBACzC,IAAI,cAAc,GAAqC,YAAY;AACnE,wBAAA,IAAI,KAAK,CAAC,KAAK,EAAE,kBAAkB,KAAK,QAAQ;4BAAE,cAAc,GAAG,QAAQ;AACtE,6BAAA,IAAI,KAAK,CAAC,KAAK,EAAE,kBAAkB,KAAK,QAAQ;4BAAE,cAAc,GAAG,UAAU;wBAElF,IAAI,aAAa,GAAqC,YAAY;AAClE,wBAAA,IAAI,KAAK,CAAC,KAAK,EAAE,iBAAiB,KAAK,QAAQ;4BAAE,aAAa,GAAG,QAAQ;AACpE,6BAAA,IAAI,KAAK,CAAC,KAAK,EAAE,iBAAiB,KAAK,QAAQ;4BAAE,aAAa,GAAG,UAAU;AAEhF,wBAAA,MAAM,UAAU,GAAwB;AACtC,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,UAAU,EAAE,eAAe;AAC3B,4BAAA,KAAK,EAAE,UAAU;AACjB,4BAAA,WAAW,EAAE,CAAC;AACd,4BAAA,SAAS,EAAE,cAAc;AACzB,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,aAAa,EAAE;yBAChB;AAED,wBAAA,MAAM,SAAS,GAAwB;AACrC,4BAAA,aAAa,EAAE,iBAAiB;AAChC,4BAAA,QAAQ,EAAE,YAAY;AACtB,4BAAA,UAAU,EAAE,cAAc;AAC1B,4BAAA,KAAK,EAAE,SAAS;AAChB,4BAAA,SAAS,EAAE;yBACZ;wBAED,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,CAAC,KAAK,KACVF,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,UAAU,EAAA,QAAA,EACpB,KAAK,CAAC,KAAK,EAAA,CACP,CACR,EACDA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,EAAA,QAAA,EACtDA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,SAAS,EAAA,QAAA,EAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAA,CAAQ,EAAA,CAChF,CAAA,EAAA,CACN;oBAEP;yBAAO;;AAEL,wBAAA,MAAM,UAAU,GAAwB;AACtC,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,UAAU,EAAE,eAAe;AAC3B,4BAAA,KAAK,EAAE,UAAU;AACjB,4BAAA,aAAa,EAAE,kBAAkB;AACjC,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,SAAS,EAAE;yBACZ;AAED,wBAAA,MAAM,SAAS,GAAwB;AACrC,4BAAA,aAAa,EAAE,iBAAiB;AAChC,4BAAA,QAAQ,EAAE,YAAY;AACtB,4BAAA,UAAU,EAAE,cAAc;AAC1B,4BAAA,KAAK,EAAE,SAAS;AAChB,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,SAAS,EAAE;yBACZ;AAED,wBAAA,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACG,KAAK,CAAC,KAAK,KACVF,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,UAAU,EAAA,QAAA,EACpB,KAAK,CAAC,KAAK,EAAA,CACP,CACR,EACDA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,SAAS,EAAA,QAAA,EAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAA,CAAQ,CAAA,EAAA,CACpF;oBAEP;gBACF;gBAEA,KAAK,OAAO,EAAE;oBACZ,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,EAAE,kBAAkB,IAAI,MAAM;AACpE,oBAAA,OAAOA,cAAM,KAAK,EAAE,EAAE,aAAa,EAAE,kBAAkB,EAAE,EAAA,QAAA,EAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,IAAI,OAAO,GAAQ;gBAChH;AAEA,gBAAA,KAAK,OAAO;oBACV,OAAO,KAAK,IACVA,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,EAClB,GAAG,EAAE,KAAK,CAAC,KAAK,IAAI,OAAO,EAC3B,KAAK,EAAE;AACL,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,OAAO,EAAE,OAAO;AACjB,yBAAA,EAAA,CACD,KAEFC,IAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,MAAM,EAAE,MAAM;AACd,4BAAA,eAAe,EAAE,SAAS;AAC1B,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,aAAa,EAAE,QAAQ;yBACxB,EAAA,QAAA,EAAA,CAEDD,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,cAAA,EAAA,CAAe,EACfA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,KAAK,CAAC,KAAK,IAAI,OAAO,EAAA,CAAQ,CAAA,EAAA,CACjC,CACP;AAEH,gBAAA,KAAK,QAAQ;AACX,oBAAA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;AACzE,oBAAA,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE;0BAC9B,wBAAwB,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM;0BACrD,EAAE;AAEN,oBAAA,OAAO,SAAS,IACdA,aACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,SAAS,wBACM,MAAM,EACzB,KAAK,EAAE;4BACL,KAAK,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;4BACpB,MAAM,EAAE,CAAA,EAAG,MAAM,CAAA,EAAA,CAAI;AACrB,4BAAA,OAAO,EAAE,OAAO;AAChB,4BAAA,aAAa,EAAE,MAAM;AACrB,4BAAA,eAAe,EAAE,aAAa;AAC9B,4BAAA,SAAS,EAAE,SAAS;AACpB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,SAAS,EAAE,MAAM;AACjB,4BAAA,UAAU,EAAE,CAAC;AACd,yBAAA,EAAA,CACD,KAEFA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,MAAM,EAAE,MAAM;AACd,4BAAA,eAAe,EAAE,SAAS;AAC1B,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE,QAAQ;AACxB,4BAAA,QAAQ,EAAE,MAAM;AAChB,4BAAA,KAAK,EAAE,MAAM;AACb,4BAAA,MAAM,EAAE,iBAAiB;AAC1B,yBAAA,EAAA,QAAA,EAAA,SAAA,EAAA,CAGG,CACP;AAEH,gBAAA;AACE,oBAAA,OAAO,IAAI;;QAEjB,CAAC,GAAG;QAEJ,QACEC,cAEE,EAAE,EAAE,WAAW,KAAK,CAAC,EAAE,CAAA,CAAE,EACzB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,CAAA,4BAAA,EAA+B,KAAK,CAAC,IAAI,IAAI,UAAU,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAErF,OAAO,EACP,mBAAmB,CAAC,KAAK,CAAC,CAAA,EAAA,EAPtB,KAAK,CAAC,EAAE,CAQT;AAEV,IAAA,CAAC;;AAGD,IAAA,MAAM,SAAS,GAAwB;QACrC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC;QAC1C,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC5C,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,eAAe,GAAG,aAAa,GAAG,SAAS;AAC5D,QAAA,MAAM,EAAE,gBAAgB;KACzB;;AAGD,IAAA,MAAM,SAAS,GAAwB;AACrC,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,eAAe,EAAE;AACf,cAAE;AACF,cAAE,MAAM;AACV,QAAA,cAAc,EAAE,WAAW;AAC3B,QAAA,aAAa,EAAE,MAAM;AACrB,QAAA,MAAM,EAAE,GAAG;KACZ;IAED,MAAM,oBAAoB,GAAG,MAAK;AAChC,QAAA,aAAa,GAAG,IAAI,CAAC;AACvB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAG5B,eAAe,KACdD,GAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAE,CAAA,EAAG,IAAI,CAAA,WAAA,CAAa,EACzB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA,EAAA,CAAI;AACjD,oBAAA,MAAM,EAAE,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA,EAAA,CAAI;AACnD,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,aAAa,EAAE,MAAM;AACtB,iBAAA,EAAA,CACD,CACH,EAGA,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAG/B,QAAQ,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,SAAS,EAAA,CAAI,EAGrC,CAAC,eAAe,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,KAC9CC,IAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,IAAI,EAAE,KAAK;AACX,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,SAAS,EAAE,QAAQ;AACnB,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,QAAQ,EAAE,MAAM;AACjB,iBAAA,EAAA,QAAA,EAAA,CAEDD,mDAAgC,EAChCA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,+BAAA,EAAA,CAAoC,IAChC,CACP,CAAA,EAAA,CACG;AAEV;;;;"}

package/dist/esm/core/qrUtils.js

@@ -57,18 +57,19 @@ function getQrCodeSize(width, height = width, scale = 1) {
  */
 function generateQrCodeDataURL(data, size = DEFAULT_QR_SIZE, options) {
     const background = options?.background ?? 'transparent';
-    const isTransparentBackground = background === 'transparent';
+    const normalizedSize = Math.max(MIN_QR_SIZE, Math.round(size));
+    const padding = Math.max(0, Math.round(options?.padding ?? 0));
     const qr = new QRious({
         value: JSON.stringify(data),
-        size,
+        size: normalizedSize,
         level: options?.level || 'H', // High error correction by default
-        padding: options?.padding ?? 0,
-        background,
-        backgroundAlpha: isTransparentBackground ? 0 : 1,
+        padding,
+        background: 'transparent',
+        backgroundAlpha: 0,
         foreground: options?.foreground || 'black',
         foregroundAlpha: 1,
     });
-    return qr.toDataURL('image/png');
+    return renderQrToTargetSize(qr.canvas, normalizedSize, background, padding);
 }
 /**
  * Generate QR code from specific fields in the card data
@@ -117,6 +118,74 @@ function setQrCodeOnElement(elementId, data, size = DEFAULT_QR_SIZE, container =
     }
     return false;
 }
+function renderQrToTargetSize(sourceCanvas, targetSize, background, padding) {
+    if (!sourceCanvas) {
+        return '';
+    }
+    const bounds = getOpaqueBounds(sourceCanvas);
+    const outputCanvas = document.createElement('canvas');
+    outputCanvas.width = targetSize;
+    outputCanvas.height = targetSize;
+    const context = outputCanvas.getContext('2d');
+    if (!context) {
+        return sourceCanvas.toDataURL('image/png');
+    }
+    if (background !== 'transparent') {
+        context.fillStyle = background;
+        context.fillRect(0, 0, targetSize, targetSize);
+    }
+    context.imageSmoothingEnabled = false;
+    const destinationPadding = Math.min(Math.max(0, padding), Math.floor((targetSize - 1) / 2));
+    const destinationSize = Math.max(1, targetSize - (destinationPadding * 2));
+    if (bounds) {
+        context.drawImage(sourceCanvas, bounds.x, bounds.y, bounds.width, bounds.height, destinationPadding, destinationPadding, destinationSize, destinationSize);
+    }
+    else {
+        context.drawImage(sourceCanvas, destinationPadding, destinationPadding, destinationSize, destinationSize);
+    }
+    return outputCanvas.toDataURL('image/png');
+}
+function getOpaqueBounds(canvas) {
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    if (!context) {
+        return null;
+    }
+    const { width, height } = canvas;
+    const { data } = context.getImageData(0, 0, width, height);
+    let minX = width;
+    let minY = height;
+    let maxX = -1;
+    let maxY = -1;
+    for (let y = 0; y < height; y += 1) {
+        for (let x = 0; x < width; x += 1) {
+            const alpha = data[((y * width) + x) * 4 + 3];
+            if (alpha === 0) {
+                continue;
+            }
+            if (x < minX) {
+                minX = x;
+            }
+            if (y < minY) {
+                minY = y;
+            }
+            if (x > maxX) {
+                maxX = x;
+            }
+            if (y > maxY) {
+                maxY = y;
+            }
+        }
+    }
+    if (maxX < minX || maxY < minY) {
+        return null;
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: (maxX - minX) + 1,
+        height: (maxY - minY) + 1,
+    };
+}
 
 export { generateQrCodeDataURL, generateQrCodeFromFields, getQrCodeDataFromFields, getQrCodeSize, setQrCodeOnElement };
 //# sourceMappingURL=qrUtils.js.map

package/dist/esm/core/qrUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\nimport type { IDCardData } from '../types';\n\nconst DEFAULT_QR_SIZE = 200;\nconst MIN_QR_SIZE = 32;\n\nfunction normalizeQrScale(scale = 1): number {\n  return Number.isFinite(scale) && scale > 0 ? scale : 1;\n}\n\nfunction resolveQrTargetElement(\n  elementId: string,\n  container: Document | HTMLElement\n): HTMLElement | null {\n  if (container instanceof HTMLElement) {\n    if (container.id === elementId) {\n      return container;\n    }\n\n    return container.querySelector<HTMLElement>(`#${elementId}`);\n  }\n\n  return container.getElementById(elementId);\n}\n\nfunction resolveQrImageElement(targetElement: HTMLElement | null): HTMLImageElement | null {\n  if (!targetElement) {\n    return null;\n  }\n\n  if (targetElement instanceof HTMLImageElement) {\n    return targetElement;\n  }\n\n  return targetElement.querySelector<HTMLImageElement>('img[data-qr-code-image=\"true\"], img');\n}\n\nfunction hasQrFieldValue(value: IDCardData[string]): boolean {\n  if (value === undefined) {\n    return false;\n  }\n\n  if (typeof value === 'string') {\n    return value.trim().length > 0;\n  }\n\n  if (Array.isArray(value)) {\n    return value.some((item) => String(item).trim().length > 0);\n  }\n\n  return true;\n}\n\nexport function getQrCodeSize(\n  width: number,\n  height = width,\n  scale = 1\n): number {\n  const normalizedWidth = Number.isFinite(width) ? width : 0;\n  const normalizedHeight = Number.isFinite(height) ? height : 0;\n  const hasWidth = normalizedWidth > 0;\n  const hasHeight = normalizedHeight > 0;\n  const baseSize = hasWidth && hasHeight\n    ? Math.min(normalizedWidth, normalizedHeight)\n    : Math.max(normalizedWidth, normalizedHeight);\n\n  if (baseSize <= 0) {\n    return Math.max(MIN_QR_SIZE, Math.round(DEFAULT_QR_SIZE * normalizeQrScale(scale)));\n  }\n\n  return Math.max(MIN_QR_SIZE, Math.round(baseSize * normalizeQrScale(scale)));\n}\n\n/**\n * Generate a QR code as a base64 data URL\n * @param data - Data to encode in the QR code (will be JSON stringified)\n * @param size - QR code size in pixels\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  options?: {\n    level?: 'L' | 'M' | 'Q' | 'H';  // Error correction level\n    padding?: number;\n    background?: string;\n    foreground?: string;\n  }\n): string {\n  const background = options?.background ?? 'transparent';\n  const isTransparentBackground = background === 'transparent';\n  const qr = new (QRious as any)({\n    value: JSON.stringify(data),\n    size,\n    level: options?.level || 'H',  // High error correction by default\n    padding: options?.padding ?? 0,\n    background,\n    backgroundAlpha: isTransparentBackground ? 0 : 1,\n    foreground: options?.foreground || 'black',\n    foregroundAlpha: 1,\n  });\n  return qr.toDataURL('image/png');\n}\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\n  data: IDCardData,\n  fields: string[],\n  size = DEFAULT_QR_SIZE\n): string {\n  const qrData = getQrCodeDataFromFields(data, fields);\n  if (Object.keys(qrData).length === 0) {\n    return '';\n  }\n\n  return generateQrCodeDataURL(qrData, size);\n}\n\nexport function getQrCodeDataFromFields(\n  data: IDCardData,\n  fields: string[]\n): Record<string, unknown> {\n  // Build object with only the specified fields that actually contain data\n  const qrData: Record<string, unknown> = {};\n\n  for (const field of fields) {\n    const value = data[field];\n    if (hasQrFieldValue(value)) {\n      qrData[field] = value;\n    }\n  }\n\n  return qrData;\n}\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\n  elementId: string,\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  container: Document | HTMLElement = document\n): boolean {\n  const qrDataURL = generateQrCodeDataURL(data, size);\n  const targetElement = resolveQrTargetElement(elementId, container);\n  const imgTag = resolveQrImageElement(targetElement);\n\n  if (imgTag) {\n    imgTag.setAttribute('src', qrDataURL);\n    imgTag.setAttribute('data-qr-code-image', 'true');\n    imgTag.style.display = 'block';\n    imgTag.style.opacity = '1';\n    imgTag.style.visibility = 'visible';\n    imgTag.style.backgroundColor = 'transparent';\n    if (targetElement) {\n      targetElement.style.backgroundColor = 'transparent';\n    }\n    return true;\n  }\n  return false;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"qrUtils.js","sources":["../../../src/core/qrUtils.ts"],"sourcesContent":["import QRious from 'qrious';\nimport type { IDCardData } from '../types';\n\nconst DEFAULT_QR_SIZE = 200;\nconst MIN_QR_SIZE = 32;\n\ntype QrRenderOptions = {\n  level?: 'L' | 'M' | 'Q' | 'H';\n  padding?: number;\n  background?: string;\n  foreground?: string;\n};\n\nfunction normalizeQrScale(scale = 1): number {\n  return Number.isFinite(scale) && scale > 0 ? scale : 1;\n}\n\nfunction resolveQrTargetElement(\n  elementId: string,\n  container: Document | HTMLElement\n): HTMLElement | null {\n  if (container instanceof HTMLElement) {\n    if (container.id === elementId) {\n      return container;\n    }\n\n    return container.querySelector<HTMLElement>(`#${elementId}`);\n  }\n\n  return container.getElementById(elementId);\n}\n\nfunction resolveQrImageElement(targetElement: HTMLElement | null): HTMLImageElement | null {\n  if (!targetElement) {\n    return null;\n  }\n\n  if (targetElement instanceof HTMLImageElement) {\n    return targetElement;\n  }\n\n  return targetElement.querySelector<HTMLImageElement>('img[data-qr-code-image=\"true\"], img');\n}\n\nfunction hasQrFieldValue(value: IDCardData[string]): boolean {\n  if (value === undefined) {\n    return false;\n  }\n\n  if (typeof value === 'string') {\n    return value.trim().length > 0;\n  }\n\n  if (Array.isArray(value)) {\n    return value.some((item) => String(item).trim().length > 0);\n  }\n\n  return true;\n}\n\nexport function getQrCodeSize(\n  width: number,\n  height = width,\n  scale = 1\n): number {\n  const normalizedWidth = Number.isFinite(width) ? width : 0;\n  const normalizedHeight = Number.isFinite(height) ? height : 0;\n  const hasWidth = normalizedWidth > 0;\n  const hasHeight = normalizedHeight > 0;\n  const baseSize = hasWidth && hasHeight\n    ? Math.min(normalizedWidth, normalizedHeight)\n    : Math.max(normalizedWidth, normalizedHeight);\n\n  if (baseSize <= 0) {\n    return Math.max(MIN_QR_SIZE, Math.round(DEFAULT_QR_SIZE * normalizeQrScale(scale)));\n  }\n\n  return Math.max(MIN_QR_SIZE, Math.round(baseSize * normalizeQrScale(scale)));\n}\n\n/**\n * Generate a QR code as a base64 data URL\n * @param data - Data to encode in the QR code (will be JSON stringified)\n * @param size - QR code size in pixels\n * @param options - Customization options (error correction level, colors, etc.)\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeDataURL(\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  options?: QrRenderOptions\n): string {\n  const background = options?.background ?? 'transparent';\n  const normalizedSize = Math.max(MIN_QR_SIZE, Math.round(size));\n  const padding = Math.max(0, Math.round(options?.padding ?? 0));\n  const qr = new (QRious as any)({\n    value: JSON.stringify(data),\n    size: normalizedSize,\n    level: options?.level || 'H',  // High error correction by default\n    padding,\n    background: 'transparent',\n    backgroundAlpha: 0,\n    foreground: options?.foreground || 'black',\n    foregroundAlpha: 1,\n  });\n\n  return renderQrToTargetSize(qr.canvas, normalizedSize, background, padding);\n}\n\r\n/**\r\n * Generate QR code from specific fields in the card data\r\n * Only includes fields that exist in the data object\r\n * @param data - Full card data object\r\n * @param fields - Array of field keys to include in QR code\r\n * @param size - QR code size in pixels\r\n * @returns Base64 PNG data URL\r\n */\r\nexport function generateQrCodeFromFields(\n  data: IDCardData,\n  fields: string[],\n  size = DEFAULT_QR_SIZE\n): string {\n  const qrData = getQrCodeDataFromFields(data, fields);\n  if (Object.keys(qrData).length === 0) {\n    return '';\n  }\n\n  return generateQrCodeDataURL(qrData, size);\n}\n\nexport function getQrCodeDataFromFields(\n  data: IDCardData,\n  fields: string[]\n): Record<string, unknown> {\n  // Build object with only the specified fields that actually contain data\n  const qrData: Record<string, unknown> = {};\n\n  for (const field of fields) {\n    const value = data[field];\n    if (hasQrFieldValue(value)) {\n      qrData[field] = value;\n    }\n  }\n\n  return qrData;\n}\n\r\n/**\r\n * Set QR code image src on a DOM element\r\n */\r\nexport function setQrCodeOnElement(\n  elementId: string,\n  data: Record<string, unknown>,\n  size = DEFAULT_QR_SIZE,\n  container: Document | HTMLElement = document\n): boolean {\n  const qrDataURL = generateQrCodeDataURL(data, size);\n  const targetElement = resolveQrTargetElement(elementId, container);\n  const imgTag = resolveQrImageElement(targetElement);\n\n  if (imgTag) {\n    imgTag.setAttribute('src', qrDataURL);\n    imgTag.setAttribute('data-qr-code-image', 'true');\n    imgTag.style.display = 'block';\n    imgTag.style.opacity = '1';\n    imgTag.style.visibility = 'visible';\n    imgTag.style.backgroundColor = 'transparent';\n    if (targetElement) {\n      targetElement.style.backgroundColor = 'transparent';\n    }\n    return true;\n  }\n  return false;\n}\n\nfunction renderQrToTargetSize(\n  sourceCanvas: HTMLCanvasElement | undefined,\n  targetSize: number,\n  background: string,\n  padding: number\n): string {\n  if (!sourceCanvas) {\n    return '';\n  }\n\n  const bounds = getOpaqueBounds(sourceCanvas);\n  const outputCanvas = document.createElement('canvas');\n  outputCanvas.width = targetSize;\n  outputCanvas.height = targetSize;\n\n  const context = outputCanvas.getContext('2d');\n  if (!context) {\n    return sourceCanvas.toDataURL('image/png');\n  }\n\n  if (background !== 'transparent') {\n    context.fillStyle = background;\n    context.fillRect(0, 0, targetSize, targetSize);\n  }\n\n  context.imageSmoothingEnabled = false;\n  const destinationPadding = Math.min(Math.max(0, padding), Math.floor((targetSize - 1) / 2));\n  const destinationSize = Math.max(1, targetSize - (destinationPadding * 2));\n\n  if (bounds) {\n    context.drawImage(\n      sourceCanvas,\n      bounds.x,\n      bounds.y,\n      bounds.width,\n      bounds.height,\n      destinationPadding,\n      destinationPadding,\n      destinationSize,\n      destinationSize\n    );\n  } else {\n    context.drawImage(\n      sourceCanvas,\n      destinationPadding,\n      destinationPadding,\n      destinationSize,\n      destinationSize\n    );\n  }\n\n  return outputCanvas.toDataURL('image/png');\n}\n\nfunction getOpaqueBounds(\n  canvas: HTMLCanvasElement\n): { x: number; y: number; width: number; height: number } | null {\n  const context = canvas.getContext('2d', { willReadFrequently: true });\n  if (!context) {\n    return null;\n  }\n\n  const { width, height } = canvas;\n  const { data } = context.getImageData(0, 0, width, height);\n\n  let minX = width;\n  let minY = height;\n  let maxX = -1;\n  let maxY = -1;\n\n  for (let y = 0; y < height; y += 1) {\n    for (let x = 0; x < width; x += 1) {\n      const alpha = data[((y * width) + x) * 4 + 3];\n      if (alpha === 0) {\n        continue;\n      }\n\n      if (x < minX) {\n        minX = x;\n      }\n      if (y < minY) {\n        minY = y;\n      }\n      if (x > maxX) {\n        maxX = x;\n      }\n      if (y > maxY) {\n        maxY = y;\n      }\n    }\n  }\n\n  if (maxX < minX || maxY < minY) {\n    return null;\n  }\n\n  return {\n    x: minX,\n    y: minY,\n    width: (maxX - minX) + 1,\n    height: (maxY - minY) + 1,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -326,6 +326,12 @@ interface UseFieldMappingOptions {
 }
 declare function useFieldMapping(options?: UseFieldMappingOptions): UseFieldMappingReturn;
 
+type QrRenderOptions = {
+    level?: 'L' | 'M' | 'Q' | 'H';
+    padding?: number;
+    background?: string;
+    foreground?: string;
+};
 /**
  * Generate a QR code as a base64 data URL
  * @param data - Data to encode in the QR code (will be JSON stringified)
@@ -333,12 +339,7 @@ declare function useFieldMapping(options?: UseFieldMappingOptions): UseFieldMapp
  * @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;
+declare function generateQrCodeDataURL(data: Record<string, unknown>, size?: number, options?: QrRenderOptions): string;
 /**
  * Generate QR code from specific fields in the card data
  * Only includes fields that exist in the data object

package/dist/types/core/qrUtils.d.ts

@@ -1,4 +1,10 @@
 import type { IDCardData } from '../types';
+type QrRenderOptions = {
+    level?: 'L' | 'M' | 'Q' | 'H';
+    padding?: number;
+    background?: string;
+    foreground?: string;
+};
 export declare function getQrCodeSize(width: number, height?: number, scale?: number): number;
 /**
  * Generate a QR code as a base64 data URL
@@ -7,12 +13,7 @@ export declare function getQrCodeSize(width: number, height?: number, scale?: nu
  * @param options - Customization options (error correction level, colors, etc.)
  * @returns Base64 PNG data URL
  */
-export declare function generateQrCodeDataURL(data: Record<string, unknown>, size?: number, options?: {
-    level?: 'L' | 'M' | 'Q' | 'H';
-    padding?: number;
-    background?: string;
-    foreground?: string;
-}): string;
+export declare function generateQrCodeDataURL(data: Record<string, unknown>, size?: number, options?: QrRenderOptions): string;
 /**
  * Generate QR code from specific fields in the card data
  * Only includes fields that exist in the data object
@@ -27,3 +28,4 @@ export declare function getQrCodeDataFromFields(data: IDCardData, fields: string
  * Set QR code image src on a DOM element
  */
 export declare function setQrCodeOnElement(elementId: string, data: Record<string, unknown>, size?: number, container?: Document | HTMLElement): boolean;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-id-card-generator",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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",