Interactive Components

/**
 * Accordion component for collapsible content
 * @param defaultActiveKey - Default active key(s)
 * @param activeKey - Controlled active key(s)
 * @param onSelect - Selection handler
 * @param flush - Flush variant
 */
function Accordion(props: AccordionProps): JSX.Element;

interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Default active key(s) */
  defaultActiveKey?: string | string[];
  /** Controlled active key(s) */
  activeKey?: string | string[];
  /** Selection handler */
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
  /** Flush variant */
  flush?: boolean;
  /** Allow multiple panels open */
  alwaysOpen?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AccordionItem component for individual accordion panels
 * @param eventKey - Unique event key
 */
function AccordionItem(props: AccordionItemProps): JSX.Element;

interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Unique event key */
  eventKey: string;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AccordionHeader component for accordion headers
 * @param onClick - Click handler
 */
function AccordionHeader(props: AccordionHeaderProps): JSX.Element;

interface AccordionHeaderProps extends React.HTMLAttributes<HTMLElement> {
  /** Click handler */
  onClick?: React.MouseEventHandler;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AccordionBody component for accordion bodies
 */
function AccordionBody(props: AccordionBodyProps): JSX.Element;

interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AccordionButton component for accordion toggle
 * @param onClick - Click handler
 */
function AccordionButton(props: AccordionButtonProps): JSX.Element;

interface AccordionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Click handler */
  onClick?: React.MouseEventHandler;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * Hook for accordion button functionality
 * @param eventKey - Event key for the accordion item
 * @returns Button props and handlers
 */
function useAccordionButton(eventKey: string, onClick?: React.MouseEventHandler): {
  onClick: React.MouseEventHandler;
};

import { Accordion } from "react-bootstrap";

// Basic accordion
<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="1">
    <Accordion.Header>Accordion Item #2</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

// Flush accordion (no borders)
<Accordion flush>
  <Accordion.Item eventKey="0">
    <Accordion.Header>Flush Accordion Item #1</Accordion.Header>
    <Accordion.Body>Content for flush accordion.</Accordion.Body>
  </Accordion.Item>
</Accordion>

// Always open (multiple panels can be open)
<Accordion alwaysOpen>
  <Accordion.Item eventKey="0">
    <Accordion.Header>Always Open Item #1</Accordion.Header>
    <Accordion.Body>This accordion can have multiple items open.</Accordion.Body>
  </Accordion.Item>
  <Accordion.Item eventKey="1">
    <Accordion.Header>Always Open Item #2</Accordion.Header>
    <Accordion.Body>Both items can be open simultaneously.</Accordion.Body>
  </Accordion.Item>
</Accordion>

/**
 * Carousel component for rotating content
 * @param activeIndex - Active slide index
 * @param onSelect - Slide selection handler
 * @param controls - Show navigation controls
 * @param indicators - Show slide indicators
 * @param interval - Auto-advance interval
 * @param pause - Pause behavior
 * @param wrap - Wrap around behavior
 * @param fade - Fade transition
 * @param slide - Slide transition
 * @param touch - Touch support
 */
function Carousel(props: CarouselProps): JSX.Element;

interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Active slide index */
  activeIndex?: number;
  /** Slide selection handler */
  onSelect?: (selectedIndex: number, e?: any) => void;
  /** Show navigation controls */
  controls?: boolean;
  /** Show slide indicators */
  indicators?: boolean;
  /** Auto-advance interval (ms) */
  interval?: number | null;
  /** Pause behavior */
  pause?: "hover" | false;
  /** Wrap around behavior */
  wrap?: boolean;
  /** Fade transition */
  fade?: boolean;
  /** Slide transition */
  slide?: boolean;
  /** Touch support */
  touch?: boolean;
  /** Previous icon */
  prevIcon?: React.ReactNode;
  /** Previous label */
  prevLabel?: React.ReactNode;
  /** Next icon */
  nextIcon?: React.ReactNode;
  /** Next label */
  nextLabel?: React.ReactNode;
  /** Slide handler */
  onSlide?: (selectedIndex: number, direction: string) => void;
  /** Slid handler */
  onSlid?: (selectedIndex: number, direction: string) => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CarouselItem component for individual carousel slides
 * @param interval - Slide-specific interval
 */
function CarouselItem(props: CarouselItemProps): JSX.Element;

interface CarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Slide-specific interval */
  interval?: number;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CarouselCaption component for slide captions
 */
function CarouselCaption(props: CarouselCaptionProps): JSX.Element;

interface CarouselCaptionProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Carousel } from "react-bootstrap";

// Basic carousel
<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Second slide"
    />
    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

// Controlled carousel
const [index, setIndex] = useState(0);

<Carousel activeIndex={index} onSelect={handleSelect}>
  <Carousel.Item>
    <img src="slide1.jpg" alt="Slide 1" />
  </Carousel.Item>
  <Carousel.Item>
    <img src="slide2.jpg" alt="Slide 2" />
  </Carousel.Item>
</Carousel>

// Fade transition
<Carousel fade>
  <Carousel.Item>
    <img src="slide1.jpg" alt="Slide 1" />
  </Carousel.Item>
  <Carousel.Item>
    <img src="slide2.jpg" alt="Slide 2" />
  </Carousel.Item>
</Carousel>

/**
 * Dropdown component for dropdown menus
 * @param show - Show/hide state
 * @param onToggle - Toggle handler
 * @param drop - Drop direction
 * @param align - Menu alignment
 * @param autoClose - Auto close behavior
 */
function Dropdown(props: DropdownProps): JSX.Element;

interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show/hide state */
  show?: boolean;
  /** Toggle handler */
  onToggle?: (show: boolean, event: React.SyntheticEvent, source: { source: string }) => void;
  /** Drop direction */
  drop?: "up" | "down" | "start" | "end";
  /** Menu alignment */
  align?: "start" | "end" | { sm?: "start" | "end"; md?: "start" | "end"; lg?: "start" | "end"; xl?: "start" | "end"; xxl?: "start" | "end" };
  /** Auto close behavior */
  autoClose?: boolean | "inside" | "outside";
  /** Selection handler */
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
  /** Focus first item on show */
  focusFirstItemOnShow?: boolean;
  /** Navbar context */
  navbar?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * DropdownToggle component for dropdown toggles
 * @param split - Split button variant
 * @param variant - Button variant
 * @param size - Button size
 * @param disabled - Disabled state
 */
function DropdownToggle(props: DropdownToggleProps): JSX.Element;

interface DropdownToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Split button variant */
  split?: boolean;
  /** Button variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  /** Button size */
  size?: "sm" | "lg";
  /** Disabled state */
  disabled?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * DropdownMenu component for dropdown menus
 * @param align - Menu alignment
 * @param flip - Flip behavior
 * @param show - Show/hide state
 * @param renderOnMount - Render when mounted
 * @param popperConfig - Popper configuration
 */
function DropdownMenu(props: DropdownMenuProps): JSX.Element;

interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Menu alignment */
  align?: "start" | "end" | { sm?: "start" | "end"; md?: "start" | "end"; lg?: "start" | "end"; xl?: "start" | "end"; xxl?: "start" | "end" };
  /** Flip behavior */
  flip?: boolean;
  /** Show/hide state */
  show?: boolean;
  /** Render when mounted */
  renderOnMount?: boolean;
  /** Popper configuration */
  popperConfig?: any;
  /** Root close event */
  rootCloseEvent?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * DropdownItem component for dropdown items
 * @param active - Active state
 * @param disabled - Disabled state
 * @param eventKey - Event key
 * @param href - Link URL
 */
function DropdownItem(props: DropdownItemProps): JSX.Element;

interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Event key */
  eventKey?: string;
  /** Link URL */
  href?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Dropdown, ButtonGroup } from "react-bootstrap";

// Basic dropdown
<Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

// Split dropdown
<Dropdown as={ButtonGroup}>
  <Button variant="success">Split Button</Button>

  <Dropdown.Toggle split variant="success" id="dropdown-split-basic" />

  <Dropdown.Menu>
    <Dropdown.Item eventKey="1">Action</Dropdown.Item>
    <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
    <Dropdown.Item eventKey="3" active>
      Active Item
    </Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

// Dropup
<Dropdown drop="up">
  <Dropdown.Toggle variant="secondary">
    Dropup
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#">Action</Dropdown.Item>
    <Dropdown.Item href="#">Another action</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

/**
 * Collapse component for collapsible content
 * @param in - Show/hide state
 * @param mountOnEnter - Mount on enter
 * @param unmountOnExit - Unmount on exit
 * @param appear - Appear animation
 * @param timeout - Animation timeout
 * @param onEnter - Enter handler
 * @param onEntering - Entering handler
 * @param onEntered - Entered handler
 * @param onExit - Exit handler
 * @param onExiting - Exiting handler
 * @param onExited - Exited handler
 * @param dimension - Collapse dimension
 * @param getDimensionValue - Get dimension value
 */
function Collapse(props: CollapseProps): JSX.Element;

interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show/hide state */
  in?: boolean;
  /** Mount on enter */
  mountOnEnter?: boolean;
  /** Unmount on exit */
  unmountOnExit?: boolean;
  /** Appear animation */
  appear?: boolean;
  /** Animation timeout */
  timeout?: number;
  /** Enter handler */
  onEnter?: (node: HTMLElement) => void;
  /** Entering handler */
  onEntering?: (node: HTMLElement) => void;
  /** Entered handler */
  onEntered?: (node: HTMLElement) => void;
  /** Exit handler */
  onExit?: (node: HTMLElement) => void;
  /** Exiting handler */
  onExiting?: (node: HTMLElement) => void;
  /** Exited handler */
  onExited?: (node: HTMLElement) => void;
  /** Collapse dimension */
  dimension?: "height" | "width" | (() => "height" | "width");
  /** Get dimension value */
  getDimensionValue?: (dimension: "height" | "width", element: HTMLElement) => number;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Collapse, Button, Card } from "react-bootstrap";

function CollapseExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        Click to toggle
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          <Card>
            <Card.Body>
              Some placeholder content for the collapse component.
            </Card.Body>
          </Card>
        </div>
      </Collapse>
    </>
  );
}

/**
 * Tabs component for tabbed content
 * @param activeKey - Active tab key
 * @param defaultActiveKey - Default active tab key
 * @param onSelect - Tab selection handler
 * @param id - Unique identifier
 * @param mountOnEnter - Mount tab content on enter
 * @param unmountOnExit - Unmount tab content on exit
 * @param variant - Tab variant
 * @param fill - Fill available space
 * @param justify - Justify content
 */
function Tabs(props: TabsProps): JSX.Element;

interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab selection handler */
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
  /** Unique identifier */
  id?: string;
  /** Mount tab content on enter */
  mountOnEnter?: boolean;
  /** Unmount tab content on exit */
  unmountOnExit?: boolean;
  /** Tab variant */
  variant?: "tabs" | "pills";
  /** Fill available space */
  fill?: boolean;
  /** Justify content */
  justify?: boolean;
  /** Tab transition */
  transition?: boolean | React.ComponentType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * Tab component for individual tabs
 * @param eventKey - Unique event key
 * @param title - Tab title
 * @param disabled - Disabled state
 * @param tabClassName - Tab CSS class
 * @param tabAttrs - Tab attributes
 */
function Tab(props: TabProps): JSX.Element;

interface TabProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Unique event key */
  eventKey: string;
  /** Tab title */
  title: React.ReactNode;
  /** Disabled state */
  disabled?: boolean;
  /** Tab CSS class */
  tabClassName?: string;
  /** Tab attributes */
  tabAttrs?: any;
}

import { Tabs, Tab } from "react-bootstrap";

// Basic tabs
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
  <Tab eventKey="home" title="Home">
    <div className="p-3">Home content</div>
  </Tab>
  <Tab eventKey="profile" title="Profile">
    <div className="p-3">Profile content</div>
  </Tab>
  <Tab eventKey="contact" title="Contact" disabled>
    <div className="p-3">Contact content</div>
  </Tab>
</Tabs>

// Controlled tabs
const [key, setKey] = useState('home');

<Tabs
  id="controlled-tab-example"
  activeKey={key}
  onSelect={(k) => setKey(k)}
>
  <Tab eventKey="home" title="Home">
    Home content
  </Tab>
  <Tab eventKey="profile" title="Profile">
    Profile content
  </Tab>
</Tabs>

// Pills variant
<Tabs variant="pills" defaultActiveKey="tab-1">
  <Tab eventKey="tab-1" title="Tab 1">
    Tab 1 content
  </Tab>
  <Tab eventKey="tab-2" title="Tab 2">
    Tab 2 content
  </Tab>
</Tabs>

/**
 * TabContainer component for controlled tab behavior
 * @param activeKey - Currently active tab key
 * @param defaultActiveKey - Default active tab key
 * @param onSelect - Tab selection handler
 * @param transition - Transition component for tab panes
 * @param id - Container ID
 * @param mountOnEnter - Mount pane on enter
 * @param unmountOnExit - Unmount pane on exit
 */
function TabContainer(props: TabContainerProps): JSX.Element;

interface TabContainerProps {
  /** Currently active tab key */
  activeKey?: string;
  /** Default active tab key */
  defaultActiveKey?: string;
  /** Tab selection handler */
  onSelect?: (eventKey: string | null, event?: React.SyntheticEvent) => void;
  /** Transition component for tab panes */
  transition?: boolean | React.ComponentType;
  /** Container ID */
  id?: string;
  /** Mount pane on enter transition */
  mountOnEnter?: boolean;
  /** Unmount pane on exit transition */
  unmountOnExit?: boolean;
  /** Child elements */
  children?: React.ReactNode;
}

/**
 * TabContent component for tab pane container
 */
function TabContent(props: TabContentProps): JSX.Element;

interface TabContentProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * TabPane component for individual tab content
 * @param eventKey - Tab identifier
 * @param active - Active state
 * @param transition - Transition component
 * @param mountOnEnter - Mount on enter transition
 * @param unmountOnExit - Unmount on exit transition
 * @param onEnter - Enter callback
 * @param onEntering - Entering callback
 * @param onEntered - Entered callback
 * @param onExit - Exit callback
 * @param onExiting - Exiting callback
 * @param onExited - Exited callback
 */
function TabPane(props: TabPaneProps): JSX.Element;

interface TabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Tab identifier */
  eventKey?: string;
  /** Active state */
  active?: boolean;
  /** Transition component */
  transition?: boolean | React.ComponentType;
  /** Mount on enter transition */
  mountOnEnter?: boolean;
  /** Unmount on exit transition */
  unmountOnExit?: boolean;
  /** Enter transition callback */
  onEnter?: (element: HTMLElement, isAppearing: boolean) => void;
  /** Entering transition callback */
  onEntering?: (element: HTMLElement, isAppearing: boolean) => void;
  /** Entered transition callback */
  onEntered?: (element: HTMLElement, isAppearing: boolean) => void;
  /** Exit transition callback */
  onExit?: (element: HTMLElement) => void;
  /** Exiting transition callback */
  onExiting?: (element: HTMLElement) => void;
  /** Exited transition callback */
  onExited?: (element: HTMLElement) => void;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { TabContainer, Nav, TabContent, TabPane } from "react-bootstrap";

// Manual tab control with separate Nav and TabContent
<TabContainer id="left-tabs-example" defaultActiveKey="first">
  <Row>
    <Col sm={3}>
      <Nav variant="pills" className="flex-column">
        <Nav.Item>
          <Nav.Link eventKey="first">Tab 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="second">Tab 2</Nav.Link>
        </Nav.Item>
      </Nav>
    </Col>
    <Col sm={9}>
      <TabContent>
        <TabPane eventKey="first">
          <p>First tab content</p>
        </TabPane>
        <TabPane eventKey="second">
          <p>Second tab content</p>
        </TabPane>
      </TabContent>
    </Col>
  </Row>
</TabContainer>

// Controlled with custom transition
<TabContainer
  activeKey={activeKey}
  onSelect={setActiveKey}
  transition={Fade}
  mountOnEnter
  unmountOnExit
>
  <Nav variant="tabs">
    <Nav.Item>
      <Nav.Link eventKey="home">Home</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="profile">Profile</Nav.Link>
    </Nav.Item>
  </Nav>
  <TabContent>
    <TabPane eventKey="home">
      <h4>Home Content</h4>
    </TabPane>
    <TabPane eventKey="profile">
      <h4>Profile Content</h4>
    </TabPane>
  </TabContent>
</TabContainer>