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

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

import type { ALSPreviewCardRootProps, ALSPreviewCardTriggerProps, ALSPreviewCardPortalProps, ALSPreviewCardPositionerProps, ALSPreviewCardPopupProps, ALSPreviewCardArrowProps, ALSPreviewCardImageProps, ALSPreviewCardTitleProps, ALSPreviewCardDescriptionProps, ALSPreviewCardContentProps, ALSPreviewCardAlign, ALSPreviewCardSide, ALSPreviewCardVariant, ALSPreviewCardSize } from "./ALSPreviewCard";
/**
 * ALSPreviewCard - A preview card that appears when hovering over a link.
 * Shows contextual preview content like images, titles, and descriptions.
 *
 * @example
 * ```tsx
 * <ALSPreviewCard.Root>
 *   <p>
 *     Check out our{" "}
 *     <ALSPreviewCard.Trigger href="/docs">documentation</ALSPreviewCard.Trigger>
 *     {" "}for more info.
 *   </p>
 *   <ALSPreviewCard.Portal>
 *     <ALSPreviewCard.Positioner>
 *       <ALSPreviewCard.Popup>
 *         <ALSPreviewCard.Arrow />
 *         <ALSPreviewCard.Image src="/preview.jpg" alt="Documentation" />
 *         <ALSPreviewCard.Title>Documentation</ALSPreviewCard.Title>
 *         <ALSPreviewCard.Description>
 *           Learn how to use our product with comprehensive guides.
 *         </ALSPreviewCard.Description>
 *       </ALSPreviewCard.Popup>
 *     </ALSPreviewCard.Positioner>
 *   </ALSPreviewCard.Portal>
 * </ALSPreviewCard.Root>
 * ```
 */
export declare const ALSPreviewCard: {
    /** Root component that groups all preview card parts */
    Root: import("react").FC<ALSPreviewCardRootProps>;
    /** Trigger link that opens the preview card on hover */
    Trigger: import("react").ForwardRefExoticComponent<ALSPreviewCardTriggerProps & import("react").RefAttributes<HTMLAnchorElement>>;
    /** Portal that moves the popup to a different DOM location */
    Portal: import("react").FC<ALSPreviewCardPortalProps>;
    /** Positioner that positions the popup relative to the trigger */
    Positioner: import("react").ForwardRefExoticComponent<ALSPreviewCardPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
    /** Popup container for the preview content */
    Popup: import("react").ForwardRefExoticComponent<ALSPreviewCardPopupProps & import("react").RefAttributes<HTMLDivElement>>;
    /** Arrow pointing to the trigger element */
    Arrow: import("react").ForwardRefExoticComponent<ALSPreviewCardArrowProps & import("react").RefAttributes<HTMLDivElement>>;
    /** Image component for preview thumbnails */
    Image: import("react").ForwardRefExoticComponent<ALSPreviewCardImageProps & import("react").RefAttributes<HTMLImageElement>>;
    /** Title heading for the preview */
    Title: import("react").ForwardRefExoticComponent<ALSPreviewCardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
    /** Description text for the preview */
    Description: import("react").ForwardRefExoticComponent<ALSPreviewCardDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
    /** Generic content wrapper for custom content */
    Content: import("react").ForwardRefExoticComponent<ALSPreviewCardContentProps & import("react").RefAttributes<HTMLDivElement>>;
};
export type { ALSPreviewCardRootProps, ALSPreviewCardTriggerProps, ALSPreviewCardPortalProps, ALSPreviewCardPositionerProps, ALSPreviewCardPopupProps, ALSPreviewCardArrowProps, ALSPreviewCardImageProps, ALSPreviewCardTitleProps, ALSPreviewCardDescriptionProps, ALSPreviewCardContentProps, ALSPreviewCardAlign, ALSPreviewCardSide, ALSPreviewCardVariant, ALSPreviewCardSize, };
//# sourceMappingURL=index.d.ts.map