Utilities

import { getSolidColor } from 'qrdx';

const color = getSolidColor({
  type: 'linear',
  stops: [
    { offset: 0, color: '#ff6b6b' },
    { offset: 1, color: '#4ecdc4' }
  ],
  x1: 0, y1: 0, x2: 1, y2: 1
});
// Returns: "#ff6b6b"

import { hexToRgb } from 'qrdx';

const rgb = hexToRgb('#ff6b6b');
// Returns: { r: 255, g: 107, b: 107 }

import { getContrastRatio } from 'qrdx';

const ratio = getContrastRatio('#000000', '#ffffff');
// Returns: 21

import { getContrastLevel } from 'qrdx';

const level = getContrastLevel(4.5);
// Returns: { level: 'AA', warning: false, message: 'Good contrast' }

import { getLuminance } from 'qrdx';

const luminance = getLuminance(255, 255, 255);
// Returns: 1.0 (white)

import { validateSize } from 'qrdx';

const validation = validateSize(512, 512);
if (validation.isValid) {
  console.log("Valid size");
} else {
  console.error(validation.error);
}

import { SUPPORTS_PATH2D } from 'qrdx';

if (SUPPORTS_PATH2D) {
  // Use optimized rendering
} else {
  // Use fallback
}

import { getContrastRatio, getContrastLevel } from 'qrdx';
import { useState } from 'react';

export default function ContrastChecker() {
  const [fgColor, setFgColor] = useState('#000000');
  const [bgColor, setBgColor] = useState('#ffffff');

  const ratio = getContrastRatio(fgColor, bgColor);
  const level = getContrastLevel(ratio);

  return (
    <div>
      <input
        type="color"
        value={fgColor}
        onChange={(e) => setFgColor(e.target.value)}
      />
      <input
        type="color"
        value={bgColor}
        onChange={(e) => setBgColor(e.target.value)}
      />
      <p>Ratio: {ratio.toFixed(2)}:1</p>
      <p>Level: {level.level}</p>
      <p>{level.message}</p>
    </div>
  );
}

import { validateSize } from 'qrdx';
import { useState } from 'react';

export default function SizeCalculator() {
  const [width, setWidth] = useState(512);
  const [height, setHeight] = useState(512);

  const validation = validateSize(width, height);

  return (
    <div>
      <input
        type="number"
        value={width}
        onChange={(e) => setWidth(Number(e.target.value))}
      />
      <input
        type="number"
        value={height}
        onChange={(e) => setHeight(Number(e.target.value))}
      />
      <p>{validation.isValid ? 'Valid' : validation.error}</p>
    </div>
  );
}