@waysnx/ui-media

🤖 AI agents & LLMs: See LLM.md (shipped with this package) for a structured integration guide — QR/barcode, signatures, image/video/audio, OCR, and color picker.

Media and visual components for modern SaaS applications.

Provides QR/barcode generation and scanning, signature capture, image/video/audio players, image cropping, OCR, and color picking.

Installation

npm install @waysnx/ui-media

import '@waysnx/ui-media/dist/index.css';

Components

QR & Barcode

| Component | Description | |-----------|-------------| | QRCode | Generate QR codes with PNG download | | Barcode | Generate barcodes (Code128, EAN, etc.) with SVG download | | QRScanner | Camera-based QR code scanner UI | | BarcodeScanner | Camera-based barcode scanner UI |

Signature

| Component | Description | |-----------|-------------| | SignaturePad | Canvas signature capture with clear/save | | SignatureViewer | Display saved signature with verified badge |

Media Viewers

| Component | Description | |-----------|-------------| | ImageViewer | Image gallery with thumbnails and navigation | | VideoPlayer | HTML5 video player with controls | | AudioPlayer | Audio player with progress bar |

Visual Tools

| Component | Description | |-----------|-------------| | ColorPicker | Color picker with spectrum, hue, and swatches | | Cropper | Image cropper with aspect ratio presets | | OCRScanner | Drag-drop file upload with OCR text extraction |

Hooks

| Hook | Description | |------|-------------| | useSignature() | Canvas drawing state for SignaturePad |

Usage

import { QRCode, SignaturePad, VideoPlayer } from '@waysnx/ui-media';

function App() {
  return (
    <>
      <QRCode value="https://example.com" size={200} />
      <SignaturePad onSave={(data) => console.log(data)} />
      <VideoPlayer src="/video.mp4" poster="/thumb.jpg" />
    </>
  );
}

Theming

All components use --wx-adv-* CSS tokens:

:root {
  --wx-adv-qr-bg: #ffffff;
  --wx-adv-qr-fg: #000000;
  --wx-adv-signature-pen-color: #1e293b;
  --wx-adv-viewer-radius: 12px;
  --wx-adv-colorpicker-radius: 12px;
}

Dark mode is automatic via [data-theme="dark"].

License

Apache-2.0 © WaysNX Technologies Private Limited