streamlit-react-components 1.0.5__py3-none-any.whl → 1.0.6__py3-none-any.whl

streamlit_react_components/common/__init__.py

@@ -9,6 +9,7 @@ from .step_indicator import step_indicator
 from .button_group import button_group
 from .chart_legend import chart_legend
 from .plotly_chart import plotly_chart
+from .smart_chart import smart_chart
 
 __all__ = [
     "panel",
@@ -20,4 +21,5 @@ __all__ = [
     "button_group",
     "chart_legend",
     "plotly_chart",
+    "smart_chart",
 ]

streamlit_react_components/common/button_group.py

@@ -16,6 +16,7 @@ def button_group(
     buttons: List[Dict[str, Any]],
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[str]:
     """
@@ -33,6 +34,8 @@ def button_group(
                  - className: Tailwind CSS classes for this button (optional)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -59,11 +62,18 @@ def button_group(
         if clicked == "approve":
             approve_item()
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     return _component(
         component="button_group",
         buttons=buttons,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/chart_legend.py

@@ -16,6 +16,7 @@ def chart_legend(
     items: List[Dict[str, str]],
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> None:
     """
@@ -27,6 +28,8 @@ def chart_legend(
                - label: Legend label text
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Example:
@@ -39,11 +42,18 @@ def chart_legend(
             ]
         )
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     _component(
         component="chart_legend",
         items=items,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/data_table.py

@@ -18,6 +18,7 @@ def data_table(
     show_header: bool = True,
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[Dict[str, Any]]:
     """
@@ -34,6 +35,8 @@ def data_table(
         show_header: Whether to show the header row (default True)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -53,6 +56,12 @@ def data_table(
         if clicked:
             st.write(f"Clicked row: {clicked['rowData']}")
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     return _component(
         component="data_table",
         columns=columns,
@@ -60,6 +69,7 @@ def data_table(
         showHeader=show_header,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/metric_row.py

@@ -18,6 +18,7 @@ def metric_row(
     value_color: str = "",
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> None:
     """
@@ -29,12 +30,20 @@ def metric_row(
         value_color: Tailwind text color class for the value (e.g., "text-green-400")
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Example:
         metric_row(label="Mean", value="78.4%")
         metric_row(label="Trend", value="↑ +0.4%/mo", value_color="text-green-400")
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     _component(
         component="metric_row",
         label=label,
@@ -42,6 +51,7 @@ def metric_row(
         valueColor=value_color,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/panel.py

@@ -16,6 +16,7 @@ def panel(
     children: str = "",
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> None:
     """
@@ -25,6 +26,8 @@ def panel(
         children: HTML content to render inside the panel
         style: Inline CSS styles as a dictionary (e.g., {"background": "#1e293b"})
         class_name: Tailwind CSS classes (e.g., "bg-slate-900 p-4")
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Example:
@@ -33,11 +36,18 @@ def panel(
             class_name="mt-4"
         )
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     _component(
         component="panel",
         children=children,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/plotly_chart.py

@@ -134,6 +134,7 @@ def plotly_chart(
     modal_title: str = "",
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[Dict[str, Any]]:
     """
@@ -162,6 +163,8 @@ def plotly_chart(
         modal_title: Title displayed in dialog header when expanded
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -249,6 +252,12 @@ def plotly_chart(
     else:
         raise ValueError("Either 'figure' or 'data' parameter is required")
 
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     # Render the component
     result = _component(
         component="plotly_chart",
@@ -262,6 +271,7 @@ def plotly_chart(
         modalTitle=modal_title,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/section_header.py

@@ -18,6 +18,7 @@ def section_header(
     actions: Optional[List[Dict[str, Any]]] = None,
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[str]:
     """
@@ -39,6 +40,8 @@ def section_header(
                    st.switch_page() (optional)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -77,6 +80,12 @@ def section_header(
         if clicked == "home":
             st.switch_page("pages/home.py")
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     return _component(
         component="section_header",
         title=title,
@@ -84,6 +93,7 @@ def section_header(
         actions=actions or [],
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/smart_chart.py

@@ -0,0 +1,327 @@
+"""SmartChart component - Simplified chart creation for line, gauge, and waterfall charts."""
+
+from typing import Dict, Any, Optional, List, Union
+from .plotly_chart import plotly_chart, _dataframe_to_figure
+
+
+def _dataframe_to_gauge(
+    data: Any,
+    value_column: str,
+    min_value: Optional[float],
+    max_value: Optional[float],
+    threshold_low: Optional[float],
+    threshold_medium: Optional[float],
+    threshold_high: Optional[float],
+    title: Optional[str],
+) -> Dict[str, Any]:
+    """Convert a DataFrame to a Plotly gauge indicator figure."""
+    from ..themes import get_active_theme
+
+    # Validate required column exists
+    if value_column not in data.columns:
+        raise ValueError(f"Column '{value_column}' not found in DataFrame. Available columns: {list(data.columns)}")
+
+    # Extract value (first row if multiple)
+    value = float(data[value_column].iloc[0])
+
+    # Auto-calculate min/max if not provided
+    if min_value is None:
+        min_value = 0
+    if max_value is None:
+        max_value = float(data[value_column].max() * 1.2)
+
+    # Validate threshold ordering
+    if threshold_low is not None and threshold_medium is not None and threshold_low >= threshold_medium:
+        raise ValueError("threshold_low must be less than threshold_medium")
+    if threshold_medium is not None and threshold_high is not None and threshold_medium >= threshold_high:
+        raise ValueError("threshold_medium must be less than threshold_high")
+
+    # Get theme colors
+    theme = get_active_theme()
+    primary = theme['colors']['primary']
+    success = theme['colors']['success']
+    warning = theme['colors']['warning']
+    error = theme['colors']['error']
+
+    # Build gauge configuration
+    gauge_config = {
+        'axis': {'range': [min_value, max_value]},
+        'bar': {'color': primary}
+    }
+
+    # Add colored threshold ranges
+    if threshold_low is not None or threshold_medium is not None or threshold_high is not None:
+        steps = []
+        if threshold_low is not None:
+            steps.append({'range': [min_value, threshold_low], 'color': error})
+        if threshold_medium is not None:
+            start = threshold_low if threshold_low is not None else min_value
+            steps.append({'range': [start, threshold_medium], 'color': warning})
+        if threshold_high is not None:
+            start = threshold_medium if threshold_medium is not None else min_value
+            steps.append({'range': [start, threshold_high], 'color': success})
+            # Add a final green band if there's space
+            if threshold_high < max_value:
+                steps.append({'range': [threshold_high, max_value], 'color': success})
+
+        gauge_config['steps'] = steps
+
+    return {
+        'data': [{
+            'type': 'indicator',
+            'mode': 'gauge+number',
+            'value': value,
+            'title': {'text': title or ''},
+            'gauge': gauge_config,
+            'domain': {'x': [0, 1], 'y': [0, 1]}
+        }],
+        'layout': {}
+    }
+
+
+def _dataframe_to_waterfall(
+    data: Any,
+    category_column: str,
+    value_column: str,
+    measure_column: Optional[str],
+    title: Optional[str],
+) -> Dict[str, Any]:
+    """Convert a DataFrame to a Plotly waterfall figure."""
+    from ..themes import get_active_theme
+
+    # Validate required columns exist
+    if category_column not in data.columns:
+        raise ValueError(f"Column '{category_column}' not found in DataFrame. Available columns: {list(data.columns)}")
+    if value_column not in data.columns:
+        raise ValueError(f"Column '{value_column}' not found in DataFrame. Available columns: {list(data.columns)}")
+
+    categories = data[category_column].tolist()
+    values = data[value_column].tolist()
+
+    # Use measure_column if provided, otherwise auto-detect
+    if measure_column and measure_column in data.columns:
+        measures = data[measure_column].tolist()
+    else:
+        # Auto-detect: zero values are likely totals
+        measures = ['total' if v == 0 else 'relative' for v in values]
+
+    # Get theme colors
+    theme = get_active_theme()
+    success = theme['colors']['success']
+    error = theme['colors']['error']
+    info = theme['colors']['info']
+
+    return {
+        'data': [{
+            'type': 'waterfall',
+            'x': categories,
+            'y': values,
+            'measure': measures,
+            'connector': {'line': {'color': '#475569'}},  # slate-600
+            'increasing': {'marker': {'color': success}},
+            'decreasing': {'marker': {'color': error}},
+            'totals': {'marker': {'color': info}},
+        }],
+        'layout': {
+            'title': title or '',
+            'showlegend': False,
+            'xaxis': {'title': category_column},
+            'yaxis': {'title': 'Value'}
+        }
+    }
+
+
+def smart_chart(
+    data: Any,
+    chart_type: str,
+    # Line chart parameters
+    x: Optional[str] = None,
+    y: Optional[Union[str, List[str]]] = None,
+    # Gauge chart parameters
+    value_column: Optional[str] = None,
+    min_value: Optional[float] = None,
+    max_value: Optional[float] = None,
+    threshold_low: Optional[float] = None,
+    threshold_medium: Optional[float] = None,
+    threshold_high: Optional[float] = None,
+    # Waterfall chart parameters
+    category_column: Optional[str] = None,
+    value_column_waterfall: Optional[str] = None,
+    measure_column: Optional[str] = None,
+    # Common parameters
+    title: Optional[str] = None,
+    color: Optional[str] = None,
+    # Pass-through to plotly_chart
+    on_click: bool = False,
+    on_select: bool = False,
+    on_hover: bool = False,
+    on_relayout: bool = False,
+    expandable: bool = False,
+    modal_title: str = "",
+    # Styling
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
+    key: Optional[str] = None,
+) -> Optional[Dict[str, Any]]:
+    """
+    Create a smart chart that automatically switches between line, gauge, and waterfall charts.
+
+    This is a wrapper component that simplifies chart creation by transforming DataFrames
+    into appropriate Plotly figure configurations based on the specified chart_type.
+
+    Args:
+        data: pandas DataFrame containing the data to plot
+        chart_type: Type of chart to create - 'line', 'gauge', or 'waterfall'
+
+        # Line Chart Parameters
+        x: Column name for x-axis (required for line charts)
+        y: Column name(s) for y-axis - string or list of strings (required for line charts)
+
+        # Gauge Chart Parameters
+        value_column: Column name containing the value to display (required for gauge charts)
+        min_value: Minimum value for gauge range (auto-calculated if not provided)
+        max_value: Maximum value for gauge range (auto-calculated if not provided)
+        threshold_low: Low threshold value (red zone below this)
+        threshold_medium: Medium threshold value (amber zone)
+        threshold_high: High threshold value (green zone above this)
+
+        # Waterfall Chart Parameters
+        category_column: Column name for categories (required for waterfall charts)
+        value_column_waterfall: Column name for values (required for waterfall charts)
+        measure_column: Optional column specifying 'relative' or 'total' for each row.
+                       If not provided, auto-detects: zeros are 'total', non-zeros are 'relative'
+
+        # Common Parameters
+        title: Chart title
+        color: Column name for color grouping (line charts only)
+        on_click: Enable click events
+        on_select: Enable selection events (box/lasso)
+        on_hover: Enable hover events
+        on_relayout: Enable relayout events (zoom/pan)
+        expandable: Show expand button to open chart in full-page dialog
+        modal_title: Title displayed in dialog header when expanded
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+        key: Unique key for the component
+
+    Returns:
+        Event dict with 'type' and event data, or None if no event.
+
+    Examples:
+        # Line Chart
+        import pandas as pd
+
+        df = pd.DataFrame({
+            'month': ['Jan', 'Feb', 'Mar', 'Apr'],
+            'revenue': [100, 150, 120, 180],
+            'costs': [60, 90, 70, 100]
+        })
+
+        smart_chart(
+            data=df,
+            chart_type='line',
+            x='month',
+            y=['revenue', 'costs'],
+            title='Monthly Performance'
+        )
+
+        # Gauge Chart
+        df_gauge = pd.DataFrame({'conversion_rate': [73.5]})
+
+        smart_chart(
+            data=df_gauge,
+            chart_type='gauge',
+            value_column='conversion_rate',
+            min_value=0,
+            max_value=100,
+            threshold_low=30,
+            threshold_medium=70,
+            threshold_high=90,
+            title='Conversion Rate'
+        )
+
+        # Waterfall Chart
+        df_waterfall = pd.DataFrame({
+            'category': ['Sales', 'Consulting', 'Net Revenue', 'Purchases', 'Other', 'Profit'],
+            'amount': [60, 80, 0, -40, -20, 0],
+            'measure': ['relative', 'relative', 'total', 'relative', 'relative', 'total']
+        })
+
+        smart_chart(
+            data=df_waterfall,
+            chart_type='waterfall',
+            category_column='category',
+            value_column_waterfall='amount',
+            measure_column='measure',
+            title='Revenue Breakdown'
+        )
+    """
+    # Validate DataFrame
+    if data is None or (hasattr(data, 'empty') and data.empty):
+        raise ValueError("DataFrame cannot be None or empty")
+
+    # Validate chart_type
+    valid_types = ['line', 'gauge', 'waterfall']
+    if chart_type not in valid_types:
+        raise ValueError(f"Invalid chart_type: '{chart_type}'. Must be one of: {', '.join(valid_types)}")
+
+    # Route to appropriate transformer and validate required parameters
+    if chart_type == 'line':
+        if x is None or y is None:
+            raise ValueError("Line chart requires 'x' and 'y' parameters")
+
+        # Validate columns exist
+        if x not in data.columns:
+            raise ValueError(f"Column '{x}' not found in DataFrame. Available columns: {list(data.columns)}")
+
+        y_cols = [y] if isinstance(y, str) else y
+        for y_col in y_cols:
+            if y_col not in data.columns:
+                raise ValueError(f"Column '{y_col}' not found in DataFrame. Available columns: {list(data.columns)}")
+
+        # Use existing _dataframe_to_figure for line charts
+        figure = _dataframe_to_figure(data, x, y, color, 'line', title)
+
+    elif chart_type == 'gauge':
+        if value_column is None:
+            raise ValueError("Gauge chart requires 'value_column' parameter")
+
+        figure = _dataframe_to_gauge(
+            data,
+            value_column,
+            min_value,
+            max_value,
+            threshold_low,
+            threshold_medium,
+            threshold_high,
+            title
+        )
+
+    elif chart_type == 'waterfall':
+        if category_column is None or value_column_waterfall is None:
+            raise ValueError("Waterfall chart requires 'category_column' and 'value_column_waterfall' parameters")
+
+        figure = _dataframe_to_waterfall(
+            data,
+            category_column,
+            value_column_waterfall,
+            measure_column,
+            title
+        )
+
+    # Delegate to plotly_chart
+    return plotly_chart(
+        figure=figure,
+        on_click=on_click,
+        on_select=on_select,
+        on_hover=on_hover,
+        on_relayout=on_relayout,
+        expandable=expandable,
+        modal_title=modal_title or title or "",
+        style=style,
+        class_name=class_name,
+        theme=theme,
+        key=key,
+    )

streamlit_react_components/common/stat_card.py

@@ -25,6 +25,7 @@ def stat_card(
     action: Optional[Dict[str, str]] = None,
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[str]:
     """
@@ -52,6 +53,8 @@ def stat_card(
                 - className: Optional Tailwind classes for custom styling
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -116,6 +119,12 @@ def stat_card(
             }
         )
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     return _component(
         component="stat_card",
         label=label,
@@ -130,6 +139,7 @@ def stat_card(
         action=action,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/common/step_indicator.py

@@ -17,6 +17,7 @@ def step_indicator(
     current_step: int,
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
     key: Optional[str] = None,
 ) -> Optional[int]:
     """
@@ -27,6 +28,8 @@ def step_indicator(
         current_step: Current active step (1-indexed)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+               Set to False to disable theming for this component.
         key: Unique key for the component
 
     Returns:
@@ -40,12 +43,19 @@ def step_indicator(
         if step:
             st.session_state.step = step
     """
+    # Resolve theme (None = use global, False = disable)
+    from ..themes import get_active_theme
+    resolved_theme = None
+    if theme is not False:
+        resolved_theme = theme if theme is not None else get_active_theme()
+
     return _component(
         component="step_indicator",
         steps=steps,
         currentStep=current_step,
         style=style,
         className=class_name,
+        theme=resolved_theme,
         key=key,
         default=None,
     )

streamlit_react_components/form/__init__.py

@@ -3,9 +3,11 @@
 from .form_select import form_select
 from .form_slider import form_slider
 from .checkbox_group import checkbox_group
+from .radio_group import radio_group
 
 __all__ = [
     "form_select",
     "form_slider",
     "checkbox_group",
+    "radio_group",
 ]