Feedback Components

class Alert:
    """
    Alert component for displaying messages and notifications.
    
    Args:
        children: Alert content (text or components)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        color (str): Alert color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        dismissable (bool): Show close button for dismissing alert
        is_open (bool): Control alert visibility
        fade (bool): Enable fade animation when dismissing
        duration (int): Auto-dismiss after milliseconds (0 = no auto-dismiss)
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color="primary", dismissable=False, is_open=True, fade=True, duration=0, **kwargs): ...

class Badge:
    """
    Badge component for counts, labels, and status indicators.
    
    Args:
        children: Badge content (text or number)
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        color (str): Badge color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        pill (bool): Rounded pill style
        href (str): Make badge a link
        external_link (bool): Open link in new tab
        target (str): Link target
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color="primary", pill=False, href=None, external_link=False, target=None, **kwargs): ...

class Progress:
    """
    Progress bar component for showing completion status.
    
    Args:
        children: Progress bar content (optional label)
        id (str): Component identifier for callbacks
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        value (int|float): Current progress value
        max (int|float): Maximum progress value
        striped (bool): Add striped pattern
        animated (bool): Animate striped pattern
        color (str): Progress bar color - "primary", "secondary", "success", "info", "warning", "danger"
        bar_style (dict): Styles for progress bar element
        bar_class_name (str): CSS classes for progress bar element
        label (str): Progress label text
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 value=0, max=100, striped=False, animated=False, color=None,
                 bar_style=None, bar_class_name=None, label=None, **kwargs): ...

class Spinner:
    """
    Loading spinner component for indicating processing.
    
    Args:
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        size (str): Spinner size - "sm"
        color (str): Spinner color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark", "muted"
        type (str): Spinner type - "border" (default) or "grow"
        spinner_style (dict): Styles for spinner element
        spinner_class_name (str): CSS classes for spinner element
    """
    def __init__(self, id=None, style=None, class_name=None, size=None, color=None,
                 type="border", spinner_style=None, spinner_class_name=None, **kwargs): ...

class Toast:
    """
    Toast notification component for temporary messages.
    
    Args:
        children: Toast content
        id (str): Component identifier for callbacks
        header (str|component): Toast header content
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        is_open (bool): Control toast visibility
        dismissable (bool): Show close button
        icon (str): Icon class for toast header
        duration (int): Auto-dismiss after milliseconds (0 = no auto-dismiss)
    """
    def __init__(self, children=None, id=None, header=None, style=None, class_name=None,
                 is_open=False, dismissable=True, icon=None, duration=4000, **kwargs): ...

import dash_bootstrap_components as dbc
from dash import html

# Different alert colors
alerts = html.Div([
    dbc.Alert("Primary alert", color="primary", className="mb-2"),
    dbc.Alert("Secondary alert", color="secondary", className="mb-2"),
    dbc.Alert("Success alert", color="success", className="mb-2"),
    dbc.Alert("Info alert", color="info", className="mb-2"),
    dbc.Alert("Warning alert", color="warning", className="mb-2"),
    dbc.Alert("Danger alert", color="danger", className="mb-2"),
    dbc.Alert("Light alert", color="light", className="mb-2"),
    dbc.Alert("Dark alert", color="dark"),
])

from dash import callback, Input, Output

# Alert with dismiss functionality
dismissable_alert = html.Div([
    dbc.Alert(
        "This alert can be dismissed!",
        id="dismissable-alert",
        dismissable=True,
        is_open=True,
        color="warning",
    ),
    dbc.Button("Show Alert Again", id="show-alert-btn", color="primary"),
])

@callback(
    Output("dismissable-alert", "is_open"),
    [Input("show-alert-btn", "n_clicks")],
)
def show_alert(n_clicks):
    if n_clicks:
        return True
    return False

# Alert that auto-dismisses after 5 seconds
auto_dismiss_alert = html.Div([
    dbc.Button("Show Timed Alert", id="timed-alert-btn", color="info"),
    dbc.Alert(
        "This alert will disappear in 5 seconds!",
        id="timed-alert",
        is_open=False,
        duration=5000,
        color="info",
    ),
])

@callback(
    Output("timed-alert", "is_open"),
    [Input("timed-alert-btn", "n_clicks")],
)
def show_timed_alert(n_clicks):
    if n_clicks:
        return True
    return False

# Different badge styles and colors
badges = html.Div([
    html.H4([
        "Notifications ",
        dbc.Badge("4", color="danger", pill=True),
    ], className="mb-3"),
    html.P([
        "Messages ",
        dbc.Badge("New", color="success"),
        " and alerts ",
        dbc.Badge("2", color="warning", pill=True),
    ], className="mb-3"),
    html.Div([
        dbc.Badge("Primary", color="primary", className="me-1"),
        dbc.Badge("Secondary", color="secondary", className="me-1"),
        dbc.Badge("Success", color="success", className="me-1"),
        dbc.Badge("Info", color="info", className="me-1"),
        dbc.Badge("Warning", color="warning", className="me-1"),
        dbc.Badge("Danger", color="danger", className="me-1"),
        dbc.Badge("Light", color="light", className="me-1"),
        dbc.Badge("Dark", color="dark"),
    ], className="mb-3"),
    html.Div([
        dbc.Badge("Pill Primary", color="primary", pill=True, className="me-1"),
        dbc.Badge("Pill Success", color="success", pill=True, className="me-1"),
        dbc.Badge("Pill Danger", color="danger", pill=True),
    ]),
])

from dash import callback, Input, Output, dcc
import time

# Different progress bar styles
progress_bars = html.Div([
    html.H5("Basic Progress", className="mb-2"),
    dbc.Progress(value=25, className="mb-3"),
    
    html.H5("Colored Progress", className="mb-2"),
    dbc.Progress(value=60, color="success", className="mb-3"),
    
    html.H5("Striped Progress", className="mb-2"),
    dbc.Progress(value=75, striped=True, color="info", className="mb-3"),
    
    html.H5("Animated Progress", className="mb-2"),
    dbc.Progress(value=40, striped=True, animated=True, color="warning", className="mb-3"),
    
    html.H5("Progress with Label", className="mb-2"),
    dbc.Progress(value=85, label="85%", color="danger"),
])

# Interactive progress bar
interactive_progress = html.Div([
    dbc.Button("Start Progress", id="progress-btn", color="primary"),
    dbc.Progress(id="progress-bar", value=0, className="mt-3"),
    dcc.Interval(id="progress-interval", interval=100, n_intervals=0, disabled=True),
])

@callback(
    [Output("progress-interval", "disabled"), Output("progress-bar", "value")],
    [Input("progress-btn", "n_clicks"), Input("progress-interval", "n_intervals")],
)
def update_progress(btn_clicks, n_intervals):
    if btn_clicks and n_intervals < 100:
        return False, n_intervals
    return True, 0 if not btn_clicks else 100

# Different spinner types and sizes
spinners = html.Div([
    html.H5("Border Spinners", className="mb-3"),
    html.Div([
        dbc.Spinner(color="primary", className="me-2"),
        dbc.Spinner(color="success", className="me-2"),
        dbc.Spinner(color="danger", className="me-2"),
        dbc.Spinner(size="sm", color="info"),
    ], className="mb-4"),
    
    html.H5("Grow Spinners", className="mb-3"),
    html.Div([
        dbc.Spinner(type="grow", color="primary", className="me-2"),
        dbc.Spinner(type="grow", color="success", className="me-2"),
        dbc.Spinner(type="grow", color="danger", className="me-2"),
        dbc.Spinner(type="grow", size="sm", color="info"),
    ]),
])

# Spinner with loading content
loading_spinner = html.Div([
    dbc.Button("Load Data", id="load-btn", color="primary"),
    html.Div(id="loading-content", className="mt-3"),
])

@callback(
    Output("loading-content", "children"),
    [Input("load-btn", "n_clicks")],
    prevent_initial_call=True
)
def show_loading(n_clicks):
    if n_clicks:
        time.sleep(2)  # Simulate loading
        return dbc.Alert("Data loaded successfully!", color="success")
    return dbc.Spinner(color="primary")

from dash import callback, Input, Output

# Toast notification system
toast_example = html.Div([
    dbc.ButtonGroup([
        dbc.Button("Success Toast", id="success-toast-btn", color="success"),
        dbc.Button("Warning Toast", id="warning-toast-btn", color="warning"),
        dbc.Button("Error Toast", id="error-toast-btn", color="danger"),
    ]),
    
    # Toast container
    html.Div([
        dbc.Toast(
            "Operation completed successfully!",
            id="success-toast",
            header="Success",
            icon="success",
            is_open=False,
            dismissable=True,
            duration=4000,
            style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
        ),
        dbc.Toast(
            "Please check your input and try again.",
            id="warning-toast",
            header="Warning",
            icon="warning",
            is_open=False,
            dismissable=True,
            duration=4000,
            style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
        ),
        dbc.Toast(
            "An error occurred while processing your request.",
            id="error-toast",
            header="Error",
            icon="danger",
            is_open=False,
            dismissable=True,
            duration=6000,
            style={"position": "fixed", "top": 66, "right": 10, "width": 350, "zIndex": 1050},
        ),
    ]),
])

@callback(
    Output("success-toast", "is_open"),
    [Input("success-toast-btn", "n_clicks")],
)
def show_success_toast(n_clicks):
    return bool(n_clicks)

@callback(
    Output("warning-toast", "is_open"),
    [Input("warning-toast-btn", "n_clicks")],
)
def show_warning_toast(n_clicks):
    return bool(n_clicks)

@callback(
    Output("error-toast", "is_open"),
    [Input("error-toast-btn", "n_clicks")],
)
def show_error_toast(n_clicks):
    return bool(n_clicks)

# Complete status dashboard with various feedback components
status_dashboard = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("System Status"),
                dbc.CardBody([
                    html.Div([
                        html.Span("Database: "),
                        dbc.Badge("Online", color="success", pill=True),
                    ], className="mb-2"),
                    html.Div([
                        html.Span("API: "),
                        dbc.Badge("Healthy", color="success", pill=True),
                    ], className="mb-2"),
                    html.Div([
                        html.Span("Cache: "),
                        dbc.Badge("Warning", color="warning", pill=True),
                    ]),
                ])
            ])
        ], width=6),
        dbc.Col([
            dbc.Card([
                dbc.CardHeader("Processing Status"),
                dbc.CardBody([
                    html.P("Data Processing Progress:", className="mb-1"),
                    dbc.Progress(value=73, label="73%", color="info", className="mb-3"),
                    html.P("Queue Status:", className="mb-1"),
                    dbc.Progress(value=45, striped=True, animated=True, color="warning"),
                ])
            ])
        ], width=6),
    ], className="mb-4"),
    dbc.Row([
        dbc.Col([
            dbc.Alert([
                html.H4("System Maintenance", className="alert-heading"),
                html.P("Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM EST."),
                html.Hr(),
                html.P("Please save your work before this time.", className="mb-0"),
            ], color="info", className="mb-3"),
            dbc.Alert("All systems operational", color="success", dismissable=True),
        ])
    ])
])