Interactive Components

class DropdownMenu:
    """
    Dropdown menu component with button trigger and menu items.
    
    Args:
        children: Menu items (DropdownMenuItem components)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        label (str): Button label text
        direction (str): Menu direction - "down", "up", "left", "right"
        size (str): Button size - "sm", "lg"
        color (str): Button color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        caret (bool): Show dropdown caret
        nav (bool): Style for use in navigation
        in_navbar (bool): Style for use in navbar
        toggle_style (dict): Styles for toggle button
        toggle_class_name (str): CSS classes for toggle button
        menu_style (dict): Styles for dropdown menu
        menu_class_name (str): CSS classes for dropdown menu
        disabled (bool): Disable dropdown
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 label="Toggle Dropdown", direction="down", size=None, color="primary",
                 caret=True, nav=False, in_navbar=False, toggle_style=None, toggle_class_name=None,
                 menu_style=None, menu_class_name=None, disabled=False, **kwargs): ...

class DropdownMenuItem:
    """
    Individual item for dropdown menus.
    
    Args:
        children: Item content (text or components)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        href (str): Link URL
        external_link (bool): Open link in new tab
        target (str): Link target
        disabled (bool): Disable menu item
        header (bool): Style as section header
        divider (bool): Style as divider (ignore children)
        active (bool): Active state styling
        n_clicks (int): Number of clicks (for callbacks)
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 href=None, external_link=False, target=None, disabled=False,
                 header=False, divider=False, active=False, n_clicks=0, **kwargs): ...

class Collapse:
    """
    Collapsible content component.
    
    Args:
        children: Collapsible content
        id (str): Component identifier for callbacks
        is_open (bool): Control collapse visibility
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        navbar (bool): Style for navbar collapse
        dimension (str): Collapse dimension - "height" (default) or "width"
    """
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
                 navbar=False, dimension="height", **kwargs): ...

class Fade:
    """
    Fade transition component for smooth show/hide animations.
    
    Args:
        children: Content to fade in/out
        id (str): Component identifier for callbacks
        is_in (bool): Control fade visibility
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        appear (bool): Apply transition on initial mount
        enter (bool): Enable enter transitions
        exit (bool): Enable exit transitions
        timeout (dict|int): Transition timeout (int or dict with enter/exit keys)
    """
    def __init__(self, children=None, id=None, is_in=True, style=None, class_name=None,
                 appear=False, enter=True, exit=True, timeout=None, **kwargs): ...

class Offcanvas:
    """
    Offcanvas component for sidebar panels and navigation.
    
    Args:
        children: Offcanvas content
        id (str): Component identifier for callbacks
        is_open (bool): Control offcanvas visibility
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        placement (str): Panel placement - "start", "end", "top", "bottom"
        backdrop (bool): Show backdrop overlay
        scrollable (bool): Allow body scrolling when open
        keyboard (bool): Close with Escape key
        title (str): Offcanvas title
        close_button (bool): Show close button
    """
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
                 placement="start", backdrop=True, scrollable=False, keyboard=True,
                 title=None, close_button=True, **kwargs): ...

class Tooltip:
    """
    Tooltip component for contextual information on hover.
    
    Args:
        children: Tooltip content
        id (str): Component identifier
        target (str): ID of target element to attach tooltip
        placement (str): Tooltip placement - "top", "bottom", "left", "right", "auto"
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        delay (dict|int): Show/hide delay (int or dict with show/hide keys)
        trigger (str): Trigger event - "hover", "focus", "click"
        offset (list): Tooltip offset [x, y]
        autohide (bool): Auto-hide tooltip
        fade (bool): Enable fade animation
    """
    def __init__(self, children=None, id=None, target=None, placement="top",
                 style=None, class_name=None, delay=None, trigger="hover",
                 offset=None, autohide=True, fade=True, **kwargs): ...

class Popover:
    """
    Popover component for rich contextual overlays.
    
    Args:
        children: Popover content
        id (str): Component identifier for callbacks
        target (str): ID of target element to attach popover
        placement (str): Popover placement - "top", "bottom", "left", "right", "auto"
        is_open (bool): Control popover visibility
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        trigger (str): Trigger event - "click", "hover", "focus"
        delay (dict|int): Show/hide delay
        offset (list): Popover offset [x, y]
        fade (bool): Enable fade animation
        title (str): Popover title
    """
    def __init__(self, children=None, id=None, target=None, placement="top", is_open=False,
                 style=None, class_name=None, trigger="click", delay=None, offset=None,
                 fade=True, title=None, **kwargs): ...

class PopoverHeader:
    """
    Header component for popovers.
    
    Args:
        children: Header content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class PopoverBody:
    """
    Body component for popover content.
    
    Args:
        children: Body content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

import dash_bootstrap_components as dbc
from dash import html, callback, Input, Output

# Basic dropdown menu
dropdown = dbc.DropdownMenu(
    children=[
        dbc.DropdownMenuItem("Action", id="action-item"),
        dbc.DropdownMenuItem("Another action", id="another-action"),
        dbc.DropdownMenuItem(divider=True),
        dbc.DropdownMenuItem("Separated link", id="separated-link"),
    ],
    label="Dropdown",
    color="primary",
)

# Output for dropdown selections
dropdown_output = html.Div(id="dropdown-output")

@callback(
    Output("dropdown-output", "children"),
    [Input("action-item", "n_clicks"), Input("another-action", "n_clicks"), Input("separated-link", "n_clicks")],
    prevent_initial_call=True
)
def handle_dropdown_click(action_clicks, another_clicks, separated_clicks):
    ctx = callback_context
    if ctx.triggered:
        button_id = ctx.triggered[0]['prop_id'].split('.')[0]
        return f"You clicked: {button_id}"
    return "No selection"

from dash import callback, Input, Output, State

# Collapsible content with toggle button
collapse_example = html.Div([
    dbc.Button("Toggle Collapse", id="collapse-button", color="primary", className="mb-3"),
    dbc.Collapse([
        dbc.Card([
            dbc.CardBody([
                html.H4("Collapsible Content"),
                html.P("This content can be collapsed and expanded."),
                html.P("It's useful for showing/hiding detailed information."),
            ])
        ])
    ], id="collapse-content", is_open=False),
])

@callback(
    Output("collapse-content", "is_open"),
    [Input("collapse-button", "n_clicks")],
    [State("collapse-content", "is_open")],
)
def toggle_collapse(n_clicks, is_open):
    if n_clicks:
        return not is_open
    return is_open

# Tooltips with different placements
tooltips_example = html.Div([
    html.Div([
        dbc.Button("Top", id="tooltip-top", color="primary", className="me-2"),
        dbc.Tooltip("Tooltip on top", target="tooltip-top", placement="top"),
        
        dbc.Button("Bottom", id="tooltip-bottom", color="primary", className="me-2"),
        dbc.Tooltip("Tooltip on bottom", target="tooltip-bottom", placement="bottom"),
        
        dbc.Button("Left", id="tooltip-left", color="primary", className="me-2"),
        dbc.Tooltip("Tooltip on left", target="tooltip-left", placement="left"),
        
        dbc.Button("Right", id="tooltip-right", color="primary"),
        dbc.Tooltip("Tooltip on right", target="tooltip-right", placement="right"),
    ], className="mb-4"),
    
    # Complex tooltip content
    html.Div([
        dbc.Badge("Hover me", id="complex-tooltip-target", color="info", className="p-2"),
        dbc.Tooltip([
            html.Strong("Complex Tooltip"),
            html.Br(),
            "This tooltip contains HTML content with ",
            html.Em("formatting"),
            " and multiple lines.",
        ], target="complex-tooltip-target"),
    ]),
])

from dash import callback, Input, Output, State

# Popover with rich content
popover_example = html.Div([
    dbc.Button("Click for Popover", id="popover-button", color="success"),
    dbc.Popover([
        dbc.PopoverHeader("Popover Title"),
        dbc.PopoverBody([
            html.P("This popover contains rich content:"),
            html.Ul([
                html.Li("List item 1"),
                html.Li("List item 2"),
                html.Li("List item 3"),
            ]),
            dbc.Button("Action", size="sm", color="primary"),
        ]),
    ], target="popover-button", placement="right", is_open=False, id="popover"),
])

@callback(
    Output("popover", "is_open"),
    [Input("popover-button", "n_clicks")],
    [State("popover", "is_open")],
)
def toggle_popover(n_clicks, is_open):
    if n_clicks:
        return not is_open
    return is_open

from dash import callback, Input, Output, State

# Offcanvas sidebar navigation
offcanvas_example = html.Div([
    dbc.Button("Open Sidebar", id="offcanvas-button", color="dark"),
    dbc.Offcanvas([
        html.H4("Navigation Menu"),
        html.Hr(),
        dbc.Nav([
            dbc.NavItem(dbc.NavLink("Home", href="/")),
            dbc.NavItem(dbc.NavLink("About", href="/about")),
            dbc.NavItem(dbc.NavLink("Services", href="/services")),
            dbc.NavItem(dbc.NavLink("Contact", href="/contact")),
        ], vertical=True, pills=True),
        html.Hr(),
        html.P("Additional sidebar content can go here."),
    ], id="offcanvas", title="Menu", is_open=False),
])

@callback(
    Output("offcanvas", "is_open"),
    [Input("offcanvas-button", "n_clicks")],
    [State("offcanvas", "is_open")],
)
def toggle_offcanvas(n_clicks, is_open):
    if n_clicks:
        return not is_open
    return is_open

from dash import callback, Input, Output, State

# Content with fade transition
fade_example = html.Div([
    dbc.Button("Toggle Fade", id="fade-button", color="info", className="mb-3"),
    dbc.Fade([
        dbc.Alert([
            html.H4("Fade Alert", className="alert-heading"),
            html.P("This alert fades in and out smoothly."),
            html.P("Fade transitions provide smooth visual feedback.", className="mb-0"),
        ], color="info"),
    ], id="fade-content", is_in=True),
])

@callback(
    Output("fade-content", "is_in"),
    [Input("fade-button", "n_clicks")],
    [State("fade-content", "is_in")],
)
def toggle_fade(n_clicks, is_in):
    if n_clicks:
        return not is_in
    return is_in

# Dropdown with organized sections
advanced_dropdown = dbc.DropdownMenu([
    dbc.DropdownMenuItem("Settings", header=True),
    dbc.DropdownMenuItem("Profile", id="profile-item"),
    dbc.DropdownMenuItem("Preferences", id="preferences-item"),
    dbc.DropdownMenuItem("Account", id="account-item"),
    dbc.DropdownMenuItem(divider=True),
    dbc.DropdownMenuItem("Actions", header=True),
    dbc.DropdownMenuItem("Export Data", id="export-item"),
    dbc.DropdownMenuItem("Import Data", id="import-item"),
    dbc.DropdownMenuItem(divider=True),
    dbc.DropdownMenuItem("Sign Out", id="signout-item", className="text-danger"),
], label="User Menu", color="secondary", direction="down")

# Complex interactive component combining multiple elements
interactive_dashboard = dbc.Card([
    dbc.CardHeader([
        html.Div([
            html.H5("Interactive Dashboard", className="mb-0"),
            dbc.DropdownMenu([
                dbc.DropdownMenuItem("Refresh", id="refresh-dashboard"),
                dbc.DropdownMenuItem("Export", id="export-dashboard"),
                dbc.DropdownMenuItem(divider=True),
                dbc.DropdownMenuItem("Settings", id="dashboard-settings"),
            ], label="Options", size="sm", color="outline-secondary"),
        ], className="d-flex justify-content-between align-items-center"),
    ]),
    dbc.CardBody([
        dbc.Row([
            dbc.Col([
                dbc.Button("Show Details", id="details-toggle", color="primary", size="sm"),
                html.Span(" Hover for info", id="info-target", className="ms-2 text-muted"),
                dbc.Tooltip("This shows additional details", target="info-target"),
            ], width=6),
            dbc.Col([
                dbc.Button("Open Panel", id="panel-toggle", color="success", size="sm"),
            ], width=6),
        ], className="mb-3"),
        dbc.Collapse([
            dbc.Alert("Detailed information is now visible!", color="info"),
        ], id="details-collapse", is_open=False),
        dbc.Fade([
            dbc.Card([
                dbc.CardBody("Additional panel content appears here."),
            ], color="light"),
        ], id="panel-fade", is_in=False),
    ]),
])

@callback(
    Output("details-collapse", "is_open"),
    [Input("details-toggle", "n_clicks")],
    [State("details-collapse", "is_open")],
)
def toggle_details(n_clicks, is_open):
    if n_clicks:
        return not is_open
    return is_open

@callback(
    Output("panel-fade", "is_in"),
    [Input("panel-toggle", "n_clicks")],
    [State("panel-fade", "is_in")],
)
def toggle_panel(n_clicks, is_in):
    if n_clicks:
        return not is_in
    return is_in