Core Components

/**
 * Standard button component with various styling options
 * @param props - Button configuration and event handlers
 */
function Button(props: ButtonProps): JSX.Element;

/**
 * Button styled as an anchor link
 * @param props - Anchor button configuration  
 */
function AnchorButton(props: AnchorButtonProps): JSX.Element;

interface ButtonProps extends ButtonSharedPropsAndAttributes {
  type?: "button" | "submit" | "reset";
}

interface AnchorButtonProps extends ButtonSharedProps {
  href?: string;
  target?: string;
  rel?: string;
}

interface ButtonSharedProps extends IntentProps, Props {
  active?: boolean;
  alignText?: Alignment;
  children?: React.ReactNode;
  disabled?: boolean;
  ellipsizeText?: boolean;
  endIcon?: IconName | MaybeElement;
  fill?: boolean;
  icon?: IconName | MaybeElement; 
  large?: boolean; // deprecated, use size="large"
  loading?: boolean;
  minimal?: boolean; // deprecated, use variant="minimal"
  outlined?: boolean; // deprecated, use variant="outlined"
  rightIcon?: IconName | MaybeElement; // deprecated, use endIcon
  size?: Size;
  small?: boolean; // deprecated, use size="small"
  text?: React.ReactNode;
  textClassName?: string;
  variant?: ButtonVariant;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

import { Button, AnchorButton, Intent, Size, ButtonVariant } from "@blueprintjs/core";

// Basic button
<Button text="Click me" onClick={() => console.log("clicked")} />

// Button with intent and icon
<Button 
  intent={Intent.PRIMARY}
  icon="add"
  text="Add Item"
  size={Size.LARGE}
  onClick={handleAdd}
/>

// Modern variant approach
<Button 
  variant={ButtonVariant.OUTLINED}
  endIcon="arrow-right"
  text="Continue"
  onClick={handleContinue}
/>

// Anchor button
<AnchorButton 
  href="https://example.com"
  target="_blank"
  text="Visit Site"
  endIcon="external-link"
/>

/**
 * Groups buttons together with consistent spacing and styling
 * @param props - Group configuration and styling options
 */
function ButtonGroup(props: ButtonGroupProps): JSX.Element;

interface ButtonGroupProps extends Props {
  alignText?: Alignment;
  fill?: boolean;
  large?: boolean;
  minimal?: boolean;
  small?: boolean;
  vertical?: boolean;
  children?: React.ReactNode;
}

/**
 * Basic card container with elevation and padding
 * @param props - Card styling and content configuration
 */
function Card(props: CardProps): JSX.Element;

/**
 * List container optimized for displaying multiple cards
 * @param props - Card list configuration
 */
function CardList(props: CardListProps): JSX.Element;

interface CardProps extends Props {
  elevation?: Elevation;
  interactive?: boolean;
  compact?: boolean;
  selected?: boolean;
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
  children?: React.ReactNode;
}

interface CardListProps extends Props {
  bordered?: boolean;
  compact?: boolean; 
  children?: React.ReactNode;
}

import { Card, CardList, Elevation } from "@blueprintjs/core";

// Basic card
<Card elevation={Elevation.TWO}>
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</Card>

// Interactive card
<Card 
  interactive 
  elevation={Elevation.ONE}
  onClick={() => console.log("card clicked")}
>
  Click me!
</Card>

// Card list
<CardList bordered>
  <Card>First card</Card>
  <Card>Second card</Card>
</CardList>

/**
 * Highlighted content block with optional icon and intent styling
 * @param props - Callout content and styling configuration
 */
function Callout(props: CalloutProps): JSX.Element;

interface CalloutProps extends IntentProps, Props {
  icon?: IconName | MaybeElement;
  title?: React.ReactNode;
  compact?: boolean;
  children?: React.ReactNode;
}

import { Callout, Intent } from "@blueprintjs/core";

// Basic callout
<Callout title="Information">
  This is some important information.
</Callout>

// Callout with intent
<Callout 
  intent={Intent.WARNING}
  icon="warning-sign"
  title="Warning"
>
  Please review your input before proceeding.
</Callout>

/**
 * Modal alert dialog for confirmations and notifications
 * @param props - Alert configuration and event handlers
 */
function Alert(props: AlertProps): JSX.Element;

interface AlertProps extends OverlayLifecycleProps, Props {
  canEscapeKeyCancel?: boolean;
  canOutsideClickCancel?: boolean;
  cancelButtonText?: React.ReactNode;
  confirmButtonText?: React.ReactNode;
  icon?: IconName | MaybeElement;
  intent?: Intent;
  loading?: boolean;
  onCancel?: (evt?: React.SyntheticEvent<HTMLElement>) => void;
  onConfirm?: (evt?: React.SyntheticEvent<HTMLElement>) => void;
  children?: React.ReactNode;
}

/**
 * Visual separator line with optional title
 * @param props - Divider styling and content options
 */
function Divider(props: DividerProps): JSX.Element;

interface DividerProps extends Props {
  tagName?: keyof JSX.IntrinsicElements;
}

/**
 * Collapsible content container with smooth enter/exit animations
 * @param props - Collapse state and animation configuration
 */
function Collapse(props: CollapseProps): JSX.Element;

interface CollapseProps extends Props {
  isOpen: boolean;
  keepChildrenMounted?: boolean;
  transitionDuration?: number;
  children?: React.ReactNode;
}

/**
 * Scalable vector icon component
 * @param props - Icon name, size, and styling options
 */
function Icon(props: IconProps): JSX.Element;

interface IconProps extends IntentProps, Props {
  icon: IconName | MaybeElement;
  size?: number;
  color?: string;
  htmlTitle?: string;
  title?: string | false | null;
  tagName?: keyof JSX.IntrinsicElements;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

enum IconSize {
  STANDARD = 16,
  LARGE = 20
}

type IconName = string; // One of 300+ available icon names

// Layout and alignment
enum Alignment {
  CENTER = "center",
  LEFT = "left", 
  RIGHT = "right"
}

// Component sizing
enum Size {
  SMALL = "small",
  MEDIUM = "medium",
  LARGE = "large"
}

// Button styling variants
enum ButtonVariant {
  SOLID = "solid",
  OUTLINED = "outlined",
  MINIMAL = "minimal"
}

// Overlay lifecycle
interface OverlayLifecycleProps {
  onOpening?: (node: HTMLElement) => void;
  onOpened?: (node: HTMLElement) => void;
  onClosing?: (node: HTMLElement) => void;
  onClosed?: (node: HTMLElement) => void;
}