@lax-wp/design-system/dist/components/data-display/label-value/LabelValue.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 React, { type ReactNode } from 'react';
/**
 * Available label value size options
 */
export type LabelValueSize = 'small' | 'medium' | 'large';
/**
 * Available highlight color options
 */
export type HighlightColor = 'success' | 'warning' | 'error' | 'info';
/**
 * Theme mode for styling
 */
export type ThemeMode = 'light' | 'dark';
/**
 * Upload handler function type
 */
export type UploadHandler = (file: File) => void | Promise<void>;
/**
 * Master data item interface
 */
export interface MasterDataItem {
    is_master_data?: boolean;
    reference?: string;
    group_technical_name?: string;
    currency_code?: string;
}
/**
 * Risk details interface
 */
export interface RiskDetails {
    color?: string;
    description?: string;
    [key: string]: any;
}
/**
 * Master data modal component props
 */
export interface MasterDataModalProps {
    isVisible: boolean;
    onClose: () => void;
    masterdataInfo: any;
}
/**
 * Risk details card component props
 */
export interface RiskDetailsCardProps {
    riskDetails: RiskDetails;
    maxWidth?: string;
    showAllRisksSuggestions?: boolean;
}
/**
 * Props for the LabelValue component
 */
export interface LabelValueProps {
    /** The label text to display */
    label?: string;
    /** The value to display */
    value?: string | number | boolean | ReactNode;
    /** Additional CSS classes */
    className?: string;
    /** Data type for formatting */
    type?: 'string' | 'number' | 'boolean' | 'currency' | 'date' | 'datetime' | 'percentage' | 'url';
    /** Tags to display with the label */
    tags?: Array<{
        label: string;
        color?: string;
        value?: string;
    }>;
    /** Tooltip text for the help icon */
    tooltip?: string;
    /** Master data item information */
    items?: MasterDataItem;
    /** Whether the value has been modified */
    isModified?: boolean;
    /** Whether the value has been changed */
    isChanged?: boolean;
    /** Size variant */
    size?: LabelValueSize;
    /** Whether the value is highlighted */
    isHighlighted?: boolean;
    /** Deleted value for diff display */
    deletedValue?: string;
    /** Highlight color for changes */
    highlightColor?: HighlightColor;
    /** Whether search is active */
    isSearchActive?: boolean;
    /** Whether to show original boolean value */
    originalValue?: boolean;
    /** Whether to show diff between old and new values */
    showDiff?: boolean;
    /** Theme mode */
    theme?: ThemeMode;
    /** Upload handler function */
    onUpload?: UploadHandler;
    /** Whether the component accepts file uploads */
    acceptsUpload?: boolean;
    /** Master data modal component */
    MasterDataModal?: React.ComponentType<MasterDataModalProps>;
    /** Risk analysis data */
    riskDetails?: RiskDetails;
    /** Whether risk analysis is open */
    isRiskAnalysisOpen?: boolean;
    /** Custom risk details card component */
    RiskDetailsCard?: React.ComponentType<RiskDetailsCardProps>;
    /** Custom aria-label for accessibility */
    'aria-label'?: string;
}
/**
 * LabelValue component displays a label-value pair with various formatting options
 *
 * @example
 * ```tsx
 * <LabelValue
 *   label="Status"
 *   value="Active"
 *   type="string"
 *   size="medium"
 * />
 * <LabelValue
 *   label="Price"
 *   value={99.99}
 *   type="currency"
 *   items={{ currency_code: 'USD' }}
 * />
 * <LabelValue
 *   label="Upload File"
 *   acceptsUpload
 *   onUpload={handleUpload}
 * />
 * ```
 */
export declare const LabelValue: React.ForwardRefExoticComponent<LabelValueProps & React.RefAttributes<HTMLDivElement>>;