Extension Components

def RichTextEditor(
    id=None,
    value="",  # HTML content
    placeholder="",  # Placeholder text
    labels=None,  # UI labels configuration
    **kwargs
): 
    """
    Rich text WYSIWYG editor component.
    
    Parameters:
    - id: Component ID for callbacks
    - value: HTML content string
    - placeholder: Placeholder text when empty
    - labels: Custom labels for editor UI elements
    """

def CodeHighlight(
    code="",  # Source code string
    language="javascript",  # Programming language
    withCopyButton=True,  # Show copy button
    copyLabel="Copy code",  # Copy button label
    copiedLabel="Copied!",  # Copied confirmation label
    **kwargs
): 
    """
    Syntax highlighted code block display.
    
    Parameters:
    - code: Source code to highlight
    - language: Programming language for syntax highlighting
    - withCopyButton: Show copy to clipboard button
    - copyLabel: Text for copy button
    - copiedLabel: Text shown after copying
    """

def InlineCodeHighlight(
    code="",  # Inline code string
    language="javascript",  # Programming language
    **kwargs
): 
    """
    Inline syntax highlighted code.
    
    Parameters:
    - code: Inline code snippet
    - language: Programming language for highlighting
    """

def CodeHighlightTabs(
    children=None,  # Tab content
    **kwargs
): 
    """
    Tabbed interface for multiple code examples.
    
    Parameters:
    - children: Code highlighting components in tabs
    """

def Carousel(
    children=None,  # Carousel slides
    withIndicators=True,  # Show dot indicators
    withControls=True,  # Show prev/next buttons
    slidesToScroll=1,  # Slides to scroll at once
    slideSize="100%",  # Individual slide size
    slideGap="md",  # Gap between slides
    align="center",  # Slide alignment
    orientation="horizontal",  # "horizontal" | "vertical"
    height="auto",  # Carousel height
    loop=False,  # Enable infinite loop
    dragFree=False,  # Free drag without snap
    speed=10,  # Transition speed
    **kwargs
): 
    """
    Carousel container for image/content slides.
    
    Parameters:
    - children: CarouselSlide components
    - withIndicators: Show position indicator dots
    - withControls: Show navigation arrows
    - slidesToScroll: Number of slides to move
    - slideSize: Size of each slide
    - slideGap: Spacing between slides
    - align: Slide alignment in container
    - orientation: Scroll direction
    - height: Carousel container height
    - loop: Enable infinite scrolling
    - dragFree: Allow free dragging
    - speed: Animation speed
    """

def CarouselSlide(
    children=None,  # Slide content
    **kwargs
): 
    """
    Individual carousel slide.
    
    Parameters:
    - children: Content for this slide
    """

def Notification(
    children=None,  # Notification content
    title="",  # Notification title
    color="blue",  # Notification color
    radius="sm",  # Border radius
    icon=None,  # Notification icon
    withCloseButton=True,  # Show close button
    loading=False,  # Show loading indicator
    withBorder=False,  # Add border
    **kwargs
): 
    """
    Individual notification component.
    
    Parameters:
    - children: Notification message content
    - title: Notification title text
    - color: Color theme for notification
    - radius: Border radius
    - icon: Icon element for notification
    - withCloseButton: Show dismiss button
    - loading: Show loading spinner
    - withBorder: Add notification border
    """

def NotificationProvider(
    children=None,  # App content
    position="top-right",  # Notification position
    autoClose=4000,  # Auto-close delay (ms)
    transitionDuration=250,  # Animation duration
    containerWidth=440,  # Notification container width
    notificationMaxHeight=200,  # Max notification height
    limit=5,  # Maximum notifications shown
    **kwargs
): 
    """
    Provider for notification system management.
    
    Parameters:
    - children: Application content
    - position: Where notifications appear
    - autoClose: Auto-dismiss delay in milliseconds
    - transitionDuration: Animation duration
    - containerWidth: Notification container width
    - notificationMaxHeight: Maximum height per notification
    - limit: Maximum concurrent notifications
    """

def NavigationProgress(
    progress=0,  # Progress value (0-100)
    **kwargs
): 
    """
    Navigation progress bar component.
    
    Parameters:
    - progress: Progress percentage (0-100)
    """

def NavigationProgressProvider(
    children=None,  # App content
    **kwargs
): 
    """
    Provider for navigation progress management.
    
    Parameters:
    - children: Application content with navigation
    """

def Collapse(
    children=None,  # Collapsible content
    in_=False,  # Expanded state
    transitionDuration=200,  # Animation duration
    transitionTimingFunction="ease",  # Transition timing
    **kwargs
): 
    """
    Collapsible content container.
    
    Parameters:
    - children: Content to show/hide
    - in_: Whether content is expanded
    - transitionDuration: Animation duration in ms
    - transitionTimingFunction: CSS timing function
    """

def Overlay(
    color="dark",  # Overlay color
    opacity=0.6,  # Overlay opacity
    blur=None,  # Background blur amount
    center=False,  # Center overlay content
    **kwargs
): 
    """
    Overlay background component.
    
    Parameters:
    - color: Overlay background color
    - opacity: Overlay transparency (0-1)
    - blur: Background blur intensity
    - center: Center overlay content
    """

def Modal(
    children=None,  # Modal content
    opened=False,  # Modal open state
    onClose=None,  # Close callback
    title="",  # Modal title
    size="md",  # Modal size
    centered=False,  # Center modal vertically
    withCloseButton=True,  # Show close button
    closeOnClickOutside=True,  # Close on backdrop click
    closeOnEscape=True,  # Close on escape key
    trapFocus=True,  # Trap focus in modal
    lockScroll=True,  # Prevent body scroll
    **kwargs
): 
    """
    Modal dialog component.
    
    Parameters:
    - children: Modal content
    - opened: Whether modal is visible
    - onClose: Function called when modal closes
    - title: Modal title text
    - size: Modal size preset or custom width
    - centered: Center modal vertically
    - withCloseButton: Show X close button
    - closeOnClickOutside: Close when clicking backdrop
    - closeOnEscape: Close with escape key
    - trapFocus: Keep focus within modal
    - lockScroll: Prevent background scrolling
    """

def Drawer(
    children=None,  # Drawer content
    opened=False,  # Drawer open state
    onClose=None,  # Close callback
    title="",  # Drawer title
    position="left",  # "left" | "right" | "top" | "bottom"
    size="md",  # Drawer size
    withCloseButton=True,  # Show close button
    closeOnClickOutside=True,  # Close on backdrop click
    closeOnEscape=True,  # Close on escape key
    trapFocus=True,  # Trap focus in drawer
    lockScroll=True,  # Prevent body scroll
    **kwargs
): 
    """
    Slide-out drawer component.
    
    Parameters:
    - children: Drawer content
    - opened: Whether drawer is visible
    - onClose: Function called when drawer closes
    - title: Drawer title text
    - position: Which side drawer slides from
    - size: Drawer size
    - withCloseButton: Show close button
    - closeOnClickOutside: Close when clicking outside
    - closeOnEscape: Close with escape key
    - trapFocus: Keep focus within drawer
    - lockScroll: Prevent background scrolling
    """

def Affix(
    children=None,  # Fixed content
    position={"bottom": 20, "right": 20},  # Position object
    zIndex=1000,  # Z-index value
    **kwargs
): 
    """
    Fixed position element (floating button, etc.).
    
    Parameters:
    - children: Content to fix in position
    - position: Position object with top/bottom/left/right
    - zIndex: CSS z-index value
    """

def Spoiler(
    children=None,  # Content to hide/show
    maxHeight=100,  # Height before hiding
    showLabel="Show more",  # Expand button text
    hideLabel="Hide",  # Collapse button text
    **kwargs
): 
    """
    Content spoiler with show/hide toggle.
    
    Parameters:
    - children: Content that may be hidden
    - maxHeight: Height threshold for hiding
    - showLabel: Text for expand button
    - hideLabel: Text for collapse button
    """

import dash_mantine_components as dmc

editor = dmc.RichTextEditor(
    id="content-editor",
    placeholder="Start writing your content...",
    value="<p>Initial content with <strong>formatting</strong></p>"
)

code_examples = dmc.Stack([
    dmc.Text("Python Code Example", weight=500),
    dmc.CodeHighlight(
        code='''
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Generate first 10 Fibonacci numbers
for i in range(10):
    print(f"F({i}) = {fibonacci(i)}")
        '''.strip(),
        language="python",
        withCopyButton=True
    ),
    
    dmc.Text("Inline code: ", span=True),
    dmc.InlineCodeHighlight(code="print('Hello World')", language="python")
])

carousel = dmc.Carousel([
    dmc.CarouselSlide([
        dmc.Image(
            src="https://example.com/image1.jpg",
            alt="Image 1",
            height=400
        )
    ]),
    dmc.CarouselSlide([
        dmc.Image(
            src="https://example.com/image2.jpg", 
            alt="Image 2",
            height=400
        )
    ]),
    dmc.CarouselSlide([
        dmc.Image(
            src="https://example.com/image3.jpg",
            alt="Image 3", 
            height=400
        )
    ])
], withIndicators=True, withControls=True, loop=True)

modal_demo = dmc.Stack([
    dmc.Button("Open Modal", id="modal-button"),
    
    dmc.Modal([
        dmc.Stack([
            dmc.Text("This is modal content"),
            dmc.Text("You can put any components here."),
            dmc.Group([
                dmc.Button("Cancel", variant="outline", id="modal-cancel"),
                dmc.Button("Confirm", id="modal-confirm")
            ], position="right")
        ])
    ], title="Confirmation", id="demo-modal", centered=True)
])

app_with_notifications = dmc.NotificationProvider([
    dmc.Container([
        dmc.Button("Show Success", id="success-btn", color="green"),
        dmc.Button("Show Error", id="error-btn", color="red", ml="sm"),
        dmc.Button("Show Info", id="info-btn", color="blue", ml="sm"),
        
        # Your app content here
        dmc.Text("Application content with notifications")
    ])
], position="top-right", autoClose=5000)

# Callback to show notifications
@callback(
    Output("notifications-container", "children"),
    Input("success-btn", "n_clicks"),
    Input("error-btn", "n_clicks"), 
    Input("info-btn", "n_clicks"),
    prevent_initial_call=True
)
def show_notifications(success, error, info):
    ctx = callback_context
    if not ctx.triggered:
        return []
        
    button_id = ctx.triggered[0]["prop_id"].split(".")[0]
    
    if button_id == "success-btn":
        return dmc.Notification(
            "Operation completed successfully!", 
            title="Success",
            color="green",
            icon="✓"
        )
    elif button_id == "error-btn":
        return dmc.Notification(
            "An error occurred while processing.",
            title="Error", 
            color="red",
            icon="✗"
        )
    elif button_id == "info-btn":
        return dmc.Notification(
            "Here's some useful information.",
            title="Information",
            color="blue",
            icon="ℹ"
        )

collapsible_demo = dmc.Stack([
    dmc.Button("Toggle Content", id="collapse-btn", variant="outline"),
    
    dmc.Collapse([
        dmc.Paper([
            dmc.Text("This content can be hidden and shown"),
            dmc.Text("It animates smoothly when toggling"),
            dmc.Image(src="https://example.com/image.jpg", height=200)
        ], p="md", shadow="sm")
    ], id="collapse-content")
])

@callback(
    Output("collapse-content", "in_"),
    Input("collapse-btn", "n_clicks"),
    prevent_initial_call=True
)
def toggle_collapse(n_clicks):
    return n_clicks % 2 == 1