@lax-wp/design-system/dist/components/data-display/diff-viewer/DiffViewer.d.ts

A comprehensive React + TypeScript design system built with Vite, providing reusable UI components for the LAX web portal applications. Features a complete set of form components, data display elements, and interactive controls with full TypeScript suppor

import { type Change } from "diff";
/**
 * Available diff types for comparison
 */
export type DiffType = "words" | "lines" | "chars";
/**
 * Theme variants for diff display
 */
export type DiffTheme = "default" | "minimal" | "github";
/**
 * Props for the DiffViewer component
 */
export interface DiffViewerProps {
    /** The original/old text content */
    oldText: string;
    /** The new/updated text content */
    newText: string;
    /** Type of diff comparison to perform */
    diffType?: DiffType;
    /** Visual theme for the diff display */
    theme?: DiffTheme;
    /** Whether to show line numbers (for line diffs) */
    showLineNumbers?: boolean;
    /** Whether to enable word wrapping */
    wordWrap?: boolean;
    /** Additional CSS classes for the wrapper */
    className?: string;
    /** Additional CSS classes for diff segments */
    segmentClassName?: string;
    /** Custom styles for added content */
    addedClassName?: string;
    /** Custom styles for removed content */
    removedClassName?: string;
    /** Custom styles for unchanged content */
    unchangedClassName?: string;
    /** Whether to ignore case differences */
    ignoreCase?: boolean;
    /** Whether to ignore whitespace (for line diffs only) */
    ignoreWhitespace?: boolean;
    /** Maximum width for the diff container */
    maxWidth?: string | number;
    /** Custom aria-label for accessibility */
    "aria-label"?: string;
    /** Callback when diff changes are calculated */
    onDiffCalculated?: (changes: Change[]) => void;
}
/**
 * DiffViewer component displays text differences with visual highlighting
 *
 * @example
 * ```tsx
 * <DiffViewer
 *   oldText="Hello world"
 *   newText="Hello beautiful world"
 *   diffType="words"
 *   theme="github"
 * />
 * ```
 */
export declare const DiffViewer: import("react").ForwardRefExoticComponent<DiffViewerProps & import("react").RefAttributes<HTMLDivElement>>;
/**
 * Legacy export for backward compatibility
 */
export declare const InlineDiffHighlighter: import("react").ForwardRefExoticComponent<DiffViewerProps & import("react").RefAttributes<HTMLDivElement>>;