Interactive Components

/**
 * Dropdown container component
 * @param props.disabled - Disable dropdown interactions
 * @param props.direction - Dropdown direction ('up', 'down', 'left', 'right')
 * @param props.group - Apply button group styling
 * @param props.isOpen - Control dropdown visibility (required)
 * @param props.nav - Apply navigation styling
 * @param props.inNavbar - Optimize for navbar usage
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.toggle - Function to toggle dropdown (required)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - DropdownToggle and DropdownMenu components
 */
function Dropdown(props: {
  disabled?: boolean;
  direction?: 'up' | 'down' | 'left' | 'right';
  group?: boolean;
  isOpen: boolean;
  nav?: boolean;
  inNavbar?: boolean;
  tag?: React.ElementType;
  toggle: () => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Dropdown toggle button
 * @param props.caret - Show dropdown caret icon
 * @param props.color - Button color theme
 * @param props.disabled - Disable the toggle
 * @param props.outline - Use outline button style
 * @param props.size - Button size ('sm' or 'lg')
 * @param props.split - Render as split button
 * @param props.tag - HTML element to render as
 * @param props.nav - Apply navigation styling
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Toggle button content
 */
function DropdownToggle(props: {
  caret?: boolean;
  color?: string;
  disabled?: boolean;
  outline?: boolean;
  size?: 'sm' | 'lg';
  split?: boolean;
  tag?: React.ElementType;
  nav?: boolean;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

/**
 * Dropdown menu container  
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.children - DropdownItem components
 * @param props.right - Align menu to the right (deprecated, use end)
 * @param props.end - Align menu to the end
 * @param props.flip - Enable flip behavior
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 */
function DropdownMenu(props: {
  tag?: React.ElementType;
  children?: React.ReactNode;
  right?: boolean;
  end?: boolean;
  flip?: boolean;
  className?: string;
  cssModule?: object;
}): JSX.Element;

/**
 * Individual dropdown menu item
 * @param props.active - Mark item as active
 * @param props.disabled - Disable the item
 * @param props.divider - Render as divider line
 * @param props.header - Render as header text
 * @param props.toggle - Function to close dropdown on click
 * @param props.tag - HTML element to render as
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Item content
 */
function DropdownItem(props: {
  active?: boolean;
  disabled?: boolean;
  divider?: boolean;
  header?: boolean;
  toggle?: () => void;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

/**
 * Bootstrap collapse component
 * @param props.isOpen - Control collapse visibility (required)
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.navbar - Apply navbar-specific styling
 * @param props.delay - Transition delay configuration
 * @param props.onOpened - Callback when collapse finishes opening
 * @param props.onClosed - Callback when collapse finishes closing
 * @param props.children - Collapsible content
 */
function Collapse(props: {
  isOpen: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  navbar?: boolean;
  delay?: object;
  onOpened?: () => void;
  onClosed?: () => void;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Bootstrap carousel component
 * @param props.activeIndex - Currently active slide index
 * @param props.next - Function to go to next slide
 * @param props.previous - Function to go to previous slide
 * @param props.keyboard - Enable keyboard navigation
 * @param props.pause - Pause behavior ('hover' or false)
 * @param props.ride - Auto-play behavior ('carousel')
 * @param props.interval - Auto-advance interval in milliseconds
 * @param props.children - CarouselItem components
 * @param props.mouseEnter - Mouse enter handler
 * @param props.mouseExit - Mouse exit handler
 * @param props.slide - Enable slide animations
 * @param props.cssModule - CSS Module mapping object
 * @param props.className - Additional CSS classes
 * @param props.tag - HTML element to render as (default: 'div')
 */
function Carousel(props: {
  activeIndex?: number;
  next?: () => void;
  previous?: () => void;
  keyboard?: boolean;
  pause?: 'hover' | false;
  ride?: 'carousel';
  interval?: number | false;
  children?: React.ReactNode;
  mouseEnter?: () => void;
  mouseExit?: () => void;
  slide?: boolean;
  cssModule?: object;
  className?: string;
  tag?: React.ElementType;
}): JSX.Element;

/**
 * Bootstrap accordion container component
 * @param props.open - Currently open accordion items (string or array)
 * @param props.toggle - Function to toggle accordion items
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.stayOpen - Allow multiple items to stay open
 * @param props.flush - Remove borders and rounded corners
 * @param props.children - AccordionItem components
 */
function Accordion(props: {
  open?: string | string[];
  toggle?: (id: string) => void;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  stayOpen?: boolean;
  flush?: boolean;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Individual accordion section
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - AccordionHeader and AccordionBody components
 */
function AccordionItem(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Accordion item header component
 * @param props.tag - HTML element to render as (default: 'h2')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.targetId - ID of the accordion body to toggle
 * @param props.children - Header content
 */
function AccordionHeader(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  targetId?: string;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Accordion collapsible body component
 * @param props.accordionId - ID that matches the header targetId
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Accordion body content
 */
function AccordionBody(props: {
  accordionId?: string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Bootstrap offcanvas sidebar component
 * @param props.autoFocus - Auto focus on open (default: true)
 * @param props.backdrop - Show backdrop and close on click (default: true)
 * @param props.backdropClassName - CSS class for backdrop element
 * @param props.backdropTransition - Backdrop transition configuration
 * @param props.container - Container element for portal (default: 'body')
 * @param props.direction - Slide direction (default: 'start')
 * @param props.fade - Enable fade transition (default: true)
 * @param props.innerRef - Ref for dialog element
 * @param props.isOpen - Control offcanvas visibility (required)
 * @param props.keyboard - Close on Escape key (default: true)
 * @param props.labelledBy - ID of labelling element for ARIA
 * @param props.offcanvasTransition - Offcanvas transition configuration
 * @param props.onClosed - Callback when offcanvas closes
 * @param props.onEnter - Callback when entering
 * @param props.onExit - Callback when exiting
 * @param props.onOpened - Callback when offcanvas opens
 * @param props.returnFocusAfterClose - Return focus to trigger after close (default: true)
 * @param props.role - ARIA role (default: 'dialog')
 * @param props.scrollable - Allow body scrolling when open (default: false)
 * @param props.style - Inline styles
 * @param props.toggle - Function to toggle offcanvas
 * @param props.trapFocus - Trap focus within offcanvas (default: false)
 * @param props.unmountOnClose - Unmount on close (default: true)
 * @param props.zIndex - Z-index value (default: 1050)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Offcanvas content (OffcanvasHeader, OffcanvasBody)
 */
function Offcanvas(props: {
  autoFocus?: boolean;
  backdrop?: boolean;
  backdropClassName?: string;
  backdropTransition?: object;
  container?: string | Element | (() => Element);
  direction?: 'start' | 'end' | 'top' | 'bottom';
  fade?: boolean;
  innerRef?: React.Ref;
  isOpen: boolean;
  keyboard?: boolean;
  labelledBy?: string;
  offcanvasTransition?: object;
  onClosed?: () => void;
  onEnter?: () => void;
  onExit?: () => void;
  onOpened?: () => void;
  returnFocusAfterClose?: boolean;
  role?: string;
  scrollable?: boolean;
  style?: React.CSSProperties;
  toggle?: () => void;
  trapFocus?: boolean;
  unmountOnClose?: boolean;
  zIndex?: number | string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

import { 
  Dropdown, 
  DropdownToggle, 
  DropdownMenu, 
  DropdownItem 
} from 'reactstrap';

function BasicDropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={() => setDropdownOpen(!dropdownOpen)}>
      <DropdownToggle caret>
        Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Another Action</DropdownItem>
        <DropdownItem divider />
        <DropdownItem>Something else here</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

import { Button, Collapse, Card, CardBody } from 'reactstrap';

function CollapseExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button color="primary" onClick={() => setIsOpen(!isOpen)}>
        Toggle
      </Button>
      <Collapse isOpen={isOpen}>
        <Card>
          <CardBody>
            This content will collapse and expand!
          </CardBody>
        </Card>
      </Collapse>
    </div>
  );
}