@als-tp/als-react-ts-ui/dist/components/ALSPreviewCard/ALSPreviewCard.d.ts

A comprehensive React TypeScript UI component library built with Base UI by ALSInnovation

import * as React from "react";
/** Alignment options for the preview card popup */
export type ALSPreviewCardAlign = "start" | "center" | "end";
/** Side positioning options for the preview card popup */
export type ALSPreviewCardSide = "top" | "bottom" | "left" | "right";
/** Visual variant options for the preview card */
export type ALSPreviewCardVariant = "default" | "compact" | "rich";
/** Size options for the preview card */
export type ALSPreviewCardSize = "sm" | "md" | "lg";
/**
 * Props for the ALSPreviewCard Root component
 */
export interface ALSPreviewCardRootProps {
    /** Whether the preview card is initially open (uncontrolled) */
    defaultOpen?: boolean;
    /** Whether the preview card is currently open (controlled) */
    open?: boolean;
    /** Callback when the preview card open state changes */
    onOpenChange?: (open: boolean) => void;
    /** Content to be rendered inside the preview card context */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Trigger component
 */
export interface ALSPreviewCardTriggerProps {
    /** URL that the trigger link points to */
    href: string;
    /** How long to wait before opening the preview card (ms) */
    delay?: number;
    /** How long to wait before closing the preview card (ms) */
    closeDelay?: number;
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Content to be rendered inside the trigger */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Portal component
 */
export interface ALSPreviewCardPortalProps {
    /** Container element to render the portal into */
    container?: HTMLElement | null;
    /** Whether to keep the portal mounted when closed */
    keepMounted?: boolean;
    /** Content to be rendered inside the portal */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Positioner component
 */
export interface ALSPreviewCardPositionerProps {
    /** Which side of the anchor to position the popup */
    side?: ALSPreviewCardSide;
    /** Distance between the anchor and popup (px) */
    sideOffset?: number;
    /** Alignment relative to the specified side */
    align?: ALSPreviewCardAlign;
    /** Additional offset along the alignment axis (px) */
    alignOffset?: number;
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Content to be rendered inside the positioner */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Popup component
 */
export interface ALSPreviewCardPopupProps {
    /** Visual variant of the popup */
    variant?: ALSPreviewCardVariant;
    /** Size of the popup */
    size?: ALSPreviewCardSize;
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Content to be rendered inside the popup */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Arrow component
 */
export interface ALSPreviewCardArrowProps {
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the ALSPreviewCard Image component
 */
export interface ALSPreviewCardImageProps {
    /** Image source URL */
    src: string;
    /** Image alt text for accessibility */
    alt: string;
    /** Image width */
    width?: number;
    /** Image height */
    height?: number;
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
}
/**
 * Props for the ALSPreviewCard Title component
 */
export interface ALSPreviewCardTitleProps {
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Title content */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Description component
 */
export interface ALSPreviewCardDescriptionProps {
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Description content */
    children: React.ReactNode;
}
/**
 * Props for the ALSPreviewCard Content component
 */
export interface ALSPreviewCardContentProps {
    /** Additional CSS classes */
    className?: string;
    /** Inline styles */
    style?: React.CSSProperties;
    /** Content to be rendered */
    children: React.ReactNode;
}
/**
 * Root component that groups all parts of the preview card.
 * Provides context for variant and size to child components.
 */
export declare const ALSPreviewCardRoot: React.FC<ALSPreviewCardRootProps>;
/**
 * Trigger component that opens the preview card on hover.
 * Renders as an anchor element.
 */
export declare const ALSPreviewCardTrigger: React.ForwardRefExoticComponent<ALSPreviewCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
/**
 * Portal component that moves the popup to a different part of the DOM.
 */
export declare const ALSPreviewCardPortal: React.FC<ALSPreviewCardPortalProps>;
/**
 * Positioner component that positions the popup against the trigger.
 */
export declare const ALSPreviewCardPositioner: React.ForwardRefExoticComponent<ALSPreviewCardPositionerProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Popup component that contains the preview card content.
 * Provides context for variant and size to child components.
 */
export declare const ALSPreviewCardPopup: React.ForwardRefExoticComponent<ALSPreviewCardPopupProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Arrow component that displays a visual pointer to the anchor.
 */
export declare const ALSPreviewCardArrow: React.ForwardRefExoticComponent<ALSPreviewCardArrowProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Image component for displaying a preview image.
 */
export declare const ALSPreviewCardImage: React.ForwardRefExoticComponent<ALSPreviewCardImageProps & React.RefAttributes<HTMLImageElement>>;
/**
 * Title component for the preview card heading.
 */
export declare const ALSPreviewCardTitle: React.ForwardRefExoticComponent<ALSPreviewCardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
/**
 * Description component for the preview card body text.
 */
export declare const ALSPreviewCardDescription: React.ForwardRefExoticComponent<ALSPreviewCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
/**
 * Content component for wrapping custom preview card content.
 */
export declare const ALSPreviewCardContent: React.ForwardRefExoticComponent<ALSPreviewCardContentProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=ALSPreviewCard.d.ts.map