@nice2dev/ui-printing 1.1.6 → 1.1.9

package/src/print-button/PrintButton.module.css

@@ -21,39 +21,91 @@
   border: none;
   cursor: pointer;
   font-weight: 500;
-  transition: background 0.15s, opacity 0.15s;
+  transition:
+    background 0.15s,
+    opacity 0.15s;
   white-space: nowrap;
 }
-.triggerDisabled { opacity: 0.5; cursor: not-allowed; }
+.triggerDisabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 /* Variants */
-.variant-primary { background: var(--nice-primary-hover, #2563eb); color: var(--nice-bg, #FFF); }
-.variant-primary:not(.triggerDisabled):hover { background: var(--nice-primary-dark, #1d4ed8); }
-.variant-secondary { background: var(--nice-bg-secondary, #f8fafc); color: var(--nice-text, #1e293b); border: 1px solid var(--nice-border, #e2e8f0); }
-.variant-secondary:not(.triggerDisabled):hover { background: var(--nice-border, #e2e8f0); }
-.variant-ghost { background: transparent; color: var(--nice-primary-hover, #2563eb); }
-.variant-ghost:not(.triggerDisabled):hover { background: var(--nice-primary-bg, #eff6ff); }
+.variant-primary {
+  background: var(--nice-primary-hover, #2563eb);
+  color: var(--nice-text-on-primary, #fff);
+}
+.variant-primary:not(.triggerDisabled):hover {
+  background: var(--nice-primary-dark, #1d4ed8);
+}
+.variant-secondary {
+  background: var(--nice-bg-secondary, #f8fafc);
+  color: var(--nice-text, #1e293b);
+  border: 1px solid var(--nice-border, #e2e8f0);
+}
+.variant-secondary:not(.triggerDisabled):hover {
+  background: var(--nice-border, #e2e8f0);
+}
+.variant-ghost {
+  background: transparent;
+  color: var(--nice-primary-hover, #2563eb);
+}
+.variant-ghost:not(.triggerDisabled):hover {
+  background: var(--nice-primary-bg, #eff6ff);
+}
 
 /* Sizes */
-.size-sm { padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px); font-size: 12px; border-radius: var(--nice-radius-md, 6px) 0 0 var(--nice-radius-md, 6px); }
-.size-md { padding: var(--nice-space-2, 8px) var(--nice-space-3-5, 14px); font-size: 14px; border-radius: var(--nice-radius-lg, 8px) 0 0 var(--nice-radius-lg, 8px); }
-.size-lg { padding: var(--nice-space-2-5, 10px) 18px; font-size: 15px; border-radius: var(--nice-radius-lg, 10px) 0 0 var(--nice-radius-lg, 10px); }
+.size-sm {
+  padding: var(--nice-space-1-25, 5px) var(--nice-space-2-5, 10px);
+  font-size: 12px;
+  border-radius: var(--nice-radius-md, 6px) 0 0 var(--nice-radius-md, 6px);
+}
+.size-md {
+  padding: var(--nice-space-2, 8px) var(--nice-space-3-5, 14px);
+  font-size: 14px;
+  border-radius: var(--nice-radius-lg, 8px) 0 0 var(--nice-radius-lg, 8px);
+}
+.size-lg {
+  padding: var(--nice-space-2-5, 10px) 18px;
+  font-size: 15px;
+  border-radius: var(--nice-radius-lg, 10px) 0 0 var(--nice-radius-lg, 10px);
+}
 
 /* Main action part */
-.mainAction { flex: 1; border-right: 1px solid var(--nice-overlay-light-20, rgba(255, 255, 255, 0.2)); }
-.variant-secondary .mainAction { border-right-color: var(--nice-border, #e2e8f0); }
-.variant-ghost .mainAction { border-right-color: var(--nice-primary-bg, #dbeafe); }
+.mainAction {
+  flex: 1;
+  border-right: 1px solid var(--nice-overlay-light-20, rgba(255, 255, 255, 0.2));
+}
+.variant-secondary .mainAction {
+  border-right-color: var(--nice-border, #e2e8f0);
+}
+.variant-ghost .mainAction {
+  border-right-color: var(--nice-primary-bg, #dbeafe);
+}
 
 /* Dropdown toggle */
 .dropdownToggle {
   padding: 0 var(--nice-space-2, 8px) !important;
 }
-.size-sm.dropdownToggle { border-radius: 0 var(--nice-radius-md, 6px) var(--nice-radius-md, 6px) 0; }
-.size-md.dropdownToggle { border-radius: 0 var(--nice-radius-lg, 8px) var(--nice-radius-lg, 8px) 0; }
-.size-lg.dropdownToggle { border-radius: 0 var(--nice-radius-lg, 10px) var(--nice-radius-lg, 10px) 0; }
+.size-sm.dropdownToggle {
+  border-radius: 0 var(--nice-radius-md, 6px) var(--nice-radius-md, 6px) 0;
+}
+.size-md.dropdownToggle {
+  border-radius: 0 var(--nice-radius-lg, 8px) var(--nice-radius-lg, 8px) 0;
+}
+.size-lg.dropdownToggle {
+  border-radius: 0 var(--nice-radius-lg, 10px) var(--nice-radius-lg, 10px) 0;
+}
 
-.chevron { display: inline-block; transition: transform 0.2s; font-size: 12px; }
-.chevronUp { transform: scaleY(-1); }
+.chevron {
+  display: inline-block;
+  transition: transform 0.2s;
+  font-size: 12px;
+}
+.chevronUp {
+  transform: scaleY(-1);
+}
 
 /* Dropdown panel */
 .dropdown {
@@ -61,16 +113,22 @@
   top: calc(100% + 6px);
   right: 0;
   min-width: 220px;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-lg, 10px);
   box-shadow: 0 8px 32px var(--nice-overlay-12, rgba(0, 0, 0, 0.12));
   z-index: 1000;
   overflow: hidden;
 }
-.dark .dropdown { background: var(--nice-text, #1e293b); border-color: var(--nice-text, #334155); box-shadow: 0 8px 32px var(--nice-overlay-50, rgba(0, 0, 0, 0.5)); }
+.dark .dropdown {
+  background: var(--nice-bg-secondary, #1e293b);
+  border-color: var(--nice-border-color, #334155);
+  box-shadow: 0 8px 32px var(--nice-overlay-50, rgba(0, 0, 0, 0.5));
+}
 
-.section { padding: var(--nice-space-3, 12px) var(--nice-space-3-5, 14px); }
+.section {
+  padding: var(--nice-space-3, 12px) var(--nice-space-3-5, 14px);
+}
 .sectionLabel {
   display: block;
   font-size: 11px;
@@ -81,8 +139,13 @@
   margin-bottom: var(--nice-space-2, 8px);
 }
 
-.divider { height: 1px; background: var(--nice-bg-secondary, #f1f5f9); }
-.dark .divider { background: var(--nice-text, #334155); }
+.divider {
+  height: 1px;
+  background: var(--nice-bg-secondary, #f1f5f9);
+}
+.dark .divider {
+  background: var(--nice-bg-tertiary, #334155);
+}
 
 /* Copies row */
 .copiesRow {
@@ -91,8 +154,11 @@
   gap: var(--nice-space-2-5, 10px);
 }
 .copiesBtn {
-  width: 30px; height: 30px;
-  display: flex; align-items: center; justify-content: center;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--nice-bg-secondary, #f8fafc);
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-md, 6px);
@@ -100,8 +166,13 @@
   font-size: 16px;
   color: var(--nice-text-secondary, #475569);
 }
-.copiesBtn:disabled { opacity: 0.4; cursor: default; }
-.copiesBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
+.copiesBtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.copiesBtn:not(:disabled):hover {
+  background: var(--nice-border, #e2e8f0);
+}
 .copiesValue {
   flex: 1;
   text-align: center;
@@ -109,7 +180,9 @@
   font-weight: 600;
   color: var(--nice-text, #1e293b);
 }
-.dark .copiesValue { color: var(--nice-bg-secondary, #f1f5f9); }
+.dark .copiesValue {
+  color: var(--nice-text-primary, #f1f5f9);
+}
 
 /* Printer select */
 .printerSelect {
@@ -122,8 +195,15 @@
   color: var(--nice-text, #1e293b);
   cursor: pointer;
 }
-.dark .printerSelect { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); color: var(--nice-bg-secondary, #f1f5f9); }
-.printerSelect:focus { outline: none; border-color: var(--nice-primary-hover, #2563eb); }
+.dark .printerSelect {
+  background: var(--nice-bg-primary, #0f172a);
+  border-color: var(--nice-border-color, #334155);
+  color: var(--nice-text-primary, #f1f5f9);
+}
+.printerSelect:focus {
+  outline: none;
+  border-color: var(--nice-primary-hover, #2563eb);
+}
 
 .printerStatus {
   display: flex;
@@ -132,19 +212,33 @@
   margin-top: var(--nice-space-1-5, 6px);
   font-size: 12px;
 }
-.printerDot { width: 7px; height: 7px; border-radius: var(--nice-radius-full, 50%); }
-.dot-ready { background: var(--nice-success-dark, #16a34a); }
-.dot-busy { background: var(--nice-warning, #f59e0b); }
-.dot-offline { background: var(--nice-text-muted, #94a3b8); }
-.dot-error { background: var(--nice-danger-dark, #dc2626); }
-.printerStatusLabel { color: var(--nice-text-secondary, #64748b); }
+.printerDot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--nice-radius-full, 50%);
+}
+.dot-ready {
+  background: var(--nice-success-dark, #16a34a);
+}
+.dot-busy {
+  background: var(--nice-warning, #f59e0b);
+}
+.dot-offline {
+  background: var(--nice-text-muted, #94a3b8);
+}
+.dot-error {
+  background: var(--nice-danger-dark, #dc2626);
+}
+.printerStatusLabel {
+  color: var(--nice-text-secondary, #64748b);
+}
 
 /* Submit button */
 .submitBtn {
   width: 100%;
   padding: 9px var(--nice-space-3-5, 14px);
   background: var(--nice-primary-hover, #2563eb);
-  color: var(--nice-bg, #FFF);
+  color: var(--nice-text-on-primary, #fff);
   border: none;
   border-radius: var(--nice-radius-lg, 8px);
   cursor: pointer;
@@ -152,16 +246,26 @@
   font-weight: 600;
   text-align: center;
 }
-.submitBtn:hover:not(:disabled) { background: var(--nice-primary-dark, #1d4ed8); }
-.submitBtn:disabled { opacity: 0.5; cursor: not-allowed; }
+.submitBtn:hover:not(:disabled) {
+  background: var(--nice-primary-dark, #1d4ed8);
+}
+.submitBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
 /* Spinner */
 .spinner {
   display: inline-block;
-  width: 14px; height: 14px;
+  width: 14px;
+  height: 14px;
   border: 2px solid var(--nice-overlay-light-30, rgba(255, 255, 255, 0.3));
-  border-top-color: var(--nice-bg, #FFF);
+  border-top-color: var(--nice-bg, #fff);
   border-radius: var(--nice-radius-full, 50%);
   animation: spin 0.7s linear infinite;
 }
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/print-preview/NicePrintPreview.tsx

@@ -1,4 +1,4 @@
-import { useNiceTranslation } from '@nice2dev/ui';
+import { NiceIcon, useNiceTranslation } from '@nice2dev/ui';
 import React, { useState, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -89,7 +89,7 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
     fontSize: (field.style.fontSize ?? 10) * zoom,
     fontWeight: field.style.fontWeight ?? 'normal',
     fontStyle: field.style.fontStyle ?? 'normal',
-    color: field.style.color ?? 'var(--text-primary, #0f172a)',
+    color: field.style.color ?? 'var(--nice-text-primary, #0f172a)',
     textAlign: field.style.textAlign ?? 'left',
     backgroundColor: field.style.backgroundColor,
     transform: field.style.rotation ? `rotate(${field.style.rotation}deg)` : undefined,
@@ -127,14 +127,14 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
       <div
         style={{
           ...baseStyle,
-          background: 'var(--bg-secondary, #f8fafc)',
-          border: '1px dashed var(--border-color, #e2e8f0)',
+          background: 'var(--nice-bg-secondary, #f8fafc)',
+          border: '1px dashed var(--nice-border-color, #e2e8f0)',
           alignItems: 'center',
           justifyContent: 'center',
           fontSize: 10 * zoom,
         }}
       >
-        {field.type === 'qr' ? '⬛' : '▮▌▮'} {value}
+        <NiceIcon name={field.type === 'qr' ? 'qr-code' : 'barcode'} size={12 * zoom} /> {value}
       </div>
     );
   }
@@ -143,11 +143,11 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
       <div
         style={{
           ...baseStyle,
-          borderBottom: '1px solid var(--text-primary, #0f172a)',
+          borderBottom: '1px solid var(--nice-border-color, #0f172a)',
           alignItems: 'flex-end',
         }}
       >
-        <span style={{ fontSize: 8 * zoom, color: 'var(--text-muted, #94a3b8)' }}>
+        <span style={{ fontSize: 8 * zoom, color: 'var(--nice-text-muted, #94a3b8)' }}>
           {field.label}
         </span>
       </div>
@@ -158,7 +158,7 @@ const RenderedField: React.FC<RenderedFieldProps> = ({ field, data, zoom }) => {
       <div
         style={{
           ...baseStyle,
-          borderBottom: `${field.style.borderWidth ?? 1}px ${field.style.borderStyle ?? 'solid'} ${field.style.borderColor ?? 'var(--text-primary, #0f172a)'}`,
+          borderBottom: `${field.style.borderWidth ?? 1}px ${field.style.borderStyle ?? 'solid'} ${field.style.borderColor ?? 'var(--nice-text-primary, #0f172a)'}`,
         }}
       />
     );
@@ -319,7 +319,7 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
             </>
           )}
           {entities.length === 0 && sampleData && (
-            <span className={styles.sampleBadge}>Przykładowe dane</span>
+            <span className={styles.sampleBadge}>{t('printing.sampleData', 'Sample data')}</span>
           )}
         </div>
 
@@ -341,17 +341,17 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
             className={styles.printBtn}
             onClick={() => onPrint?.({ copies: 1, printerId: '' })}
           >
-            {t('printPreview.print', 'Drukuj')}
+            {t('printPreview.print', 'Print')}
           </button>
           {asPopup && (
             <button
               type="button"
               className={styles.zoomBtn}
               onClick={handleClose}
-              aria-label={t('common.close', 'Zamknij')}
-              title={t('common.close', 'Zamknij')}
+              aria-label={t('close', 'Close')}
+              title={t('close', 'Close')}
             >
-              ✕
+              <NiceIcon name="close" size={16} />
             </button>
           )}
         </div>
@@ -368,7 +368,8 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
         <span>
           {template.paperSize} · {template.orientation === 'portrait' ? 'Pion' : 'Poziom'}
         </span>
-        {template.sections.reduce((acc, s) => acc + s.fields.length, 0)} pól
+        {template.sections.reduce((acc, s) => acc + s.fields.length, 0)}{' '}
+        {t('printing.fields', 'fields')}
       </div>
     </div>
   );
@@ -382,7 +383,7 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
       style={{
         position: 'fixed',
         inset: 0,
-        background: 'color-mix(in srgb, var(--text-primary, #000) 50%, transparent)',
+        background: 'color-mix(in srgb, var(--nice-text-primary, #000) 50%, transparent)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -400,9 +401,10 @@ export const NicePrintPreview: React.FC<NicePrintPreviewProps> = ({
         role="dialog"
         aria-modal="true"
         style={{
-          background: 'var(--bg-elevated, var(--bg-primary, #ffffff))',
+          background: 'var(--nice-bg-elevated, var(--nice-bg-primary, #ffffff))',
           borderRadius: 12,
-          boxShadow: '0 20px 60px color-mix(in srgb, var(--text-primary, #000) 30%, transparent)',
+          boxShadow:
+            '0 20px 60px color-mix(in srgb, var(--nice-text-primary, #000) 30%, transparent)',
           maxWidth: '90vw',
           maxHeight: '90vh',
           overflow: 'auto',

package/src/print-preview/PrintPreview.module.css

@@ -7,7 +7,10 @@
   font-size: 14px;
   color: var(--nice-text, #1e293b);
 }
-.dark { background: var(--nice-text, #1e293b); color: var(--nice-bg-secondary, #f1f5f9); }
+.dark {
+  background: var(--nice-bg-secondary, #1e293b);
+  color: var(--nice-text-primary, #f1f5f9);
+}
 
 /* Header bar */
 .headerBar {
@@ -15,13 +18,20 @@
   align-items: center;
   gap: var(--nice-space-3, 12px);
   padding: var(--nice-space-2, 8px) var(--nice-space-4, 16px);
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border-bottom: 1px solid var(--nice-border, #e2e8f0);
   flex-shrink: 0;
 }
-.dark .headerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
+.dark .headerBar {
+  background: var(--nice-bg-primary, #0f172a);
+  border-color: var(--nice-border-color, #334155);
+}
 
-.entityNav { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); }
+.entityNav {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-5, 6px);
+}
 .navBtn {
   padding: var(--nice-space-1, 4px) var(--nice-space-2, 8px);
   background: var(--nice-bg-secondary, #f8fafc);
@@ -32,9 +42,19 @@
   line-height: 1;
   color: var(--nice-text-secondary, #475569);
 }
-.navBtn:disabled { opacity: 0.4; cursor: default; }
-.navBtn:not(:disabled):hover { background: var(--nice-border, #e2e8f0); }
-.navLabel { color: var(--nice-text-secondary, #64748b); font-size: 13px; min-width: 48px; text-align: center; }
+.navBtn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.navBtn:not(:disabled):hover {
+  background: var(--nice-border, #e2e8f0);
+}
+.navLabel {
+  color: var(--nice-text-secondary, #64748b);
+  font-size: 13px;
+  min-width: 48px;
+  text-align: center;
+}
 
 .sampleBadge {
   padding: var(--nice-space-0-75, 3px) var(--nice-space-2-5, 10px);
@@ -45,10 +65,18 @@
   color: var(--nice-warning-dark, #854d0e);
 }
 
-.zoomBar { display: flex; align-items: center; gap: var(--nice-space-1-5, 6px); margin-left: auto; }
+.zoomBar {
+  display: flex;
+  align-items: center;
+  gap: var(--nice-space-1-5, 6px);
+  margin-left: auto;
+}
 .zoomBtn {
-  width: 28px; height: 28px;
-  display: flex; align-items: center; justify-content: center;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: var(--nice-bg-secondary, #f8fafc);
   border: 1px solid var(--nice-border, #e2e8f0);
   border-radius: var(--nice-radius-sm, 4px);
@@ -56,20 +84,29 @@
   font-size: 15px;
   color: var(--nice-text-secondary, #475569);
 }
-.zoomBtn:hover { background: var(--nice-border, #e2e8f0); }
-.zoomLabel { font-size: 13px; min-width: 42px; text-align: center; color: var(--nice-text-secondary, #64748b); }
+.zoomBtn:hover {
+  background: var(--nice-border, #e2e8f0);
+}
+.zoomLabel {
+  font-size: 13px;
+  min-width: 42px;
+  text-align: center;
+  color: var(--nice-text-secondary, #64748b);
+}
 
 .printBtn {
   padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
   background: var(--nice-primary-hover, #2563eb);
-  color: var(--nice-bg, #FFF);
+  color: var(--nice-text-on-primary, #fff);
   border: none;
   border-radius: var(--nice-radius-md, 6px);
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
 }
-.printBtn:hover { background: var(--nice-primary-dark, #1d4ed8); }
+.printBtn:hover {
+  background: var(--nice-primary-dark, #1d4ed8);
+}
 
 /* Canvas area */
 .canvas {
@@ -84,13 +121,15 @@
 /* Page paper */
 .page {
   position: relative;
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   box-shadow: 0 4px 32px var(--nice-overlay-20, rgba(0, 0, 0, 0.18));
   border-radius: var(--nice-radius-sm, 2px);
   overflow: hidden;
   flex-shrink: 0;
 }
-.dark .page { box-shadow: 0 4px 32px var(--nice-overlay-60, rgba(0, 0, 0, 0.6)); }
+.dark .page {
+  box-shadow: 0 4px 32px var(--nice-overlay-60, rgba(0, 0, 0, 0.6));
+}
 
 /* Watermark */
 .watermark {
@@ -113,10 +152,13 @@
   align-items: center;
   gap: var(--nice-space-4, 16px);
   padding: var(--nice-space-1-5, 6px) var(--nice-space-4, 16px);
-  background: var(--nice-bg, #FFF);
+  background: var(--nice-bg, #fff);
   border-top: 1px solid var(--nice-border, #e2e8f0);
   font-size: 12px;
   color: var(--nice-text-muted, #94a3b8);
   flex-shrink: 0;
 }
-.dark .footerBar { background: var(--nice-text, #0f172a); border-color: var(--nice-text, #334155); }
+.dark .footerBar {
+  background: var(--nice-bg-primary, #0f172a);
+  border-color: var(--nice-border-color, #334155);
+}