streamlit-react-components 1.7.3__py3-none-any.whl → 1.8.0__py3-none-any.whl

streamlit_react_components/form/__init__.py

@@ -2,12 +2,14 @@
 
 from .form_select import form_select
 from .form_slider import form_slider
+from .form_date_slider import form_date_slider
 from .checkbox_group import checkbox_group
 from .radio_group import radio_group
 
 __all__ = [
     "form_select",
     "form_slider",
+    "form_date_slider",
     "checkbox_group",
     "radio_group",
 ]

streamlit_react_components/form/checkbox_group.py

@@ -19,6 +19,7 @@ def checkbox_group(
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
     theme: Optional[Dict[str, Any]] = None,
+    defer_update: bool = False,
     key: Optional[str] = None,
 ) -> List[str]:
     """
@@ -36,7 +37,10 @@ def checkbox_group(
         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
+        defer_update: If True, don't trigger Streamlit rerun on change.
+                      Value is stored locally and sent on next rerun (e.g., Apply button).
+                      Requires 'key' to be set.
+        key: Unique key for the component (required if defer_update=True)
 
     Returns:
         List of checked item IDs
@@ -60,6 +64,16 @@ def checkbox_group(
             items=[...],
             layout="horizontal"
         )
+
+        # Deferred update (no rerun until Apply button clicked)
+        selected = checkbox_group(
+            label="Parameters",
+            items=[...],
+            defer_update=True,
+            key="params_checkbox"
+        )
+        if st.button("Apply"):
+            st.rerun()
     """
     # Get default checked items
     default_checked = [item["id"] for item in items if item.get("checked", False)]
@@ -78,6 +92,8 @@ def checkbox_group(
         style=style,
         className=class_name,
         theme=resolved_theme,
+        deferUpdate=defer_update,
+        componentKey=key,
         key=key,
         default=default_checked,
     )

streamlit_react_components/form/form_date_slider.py

@@ -0,0 +1,147 @@
+"""FormDateSlider component - A date slider with optional range selection."""
+
+import streamlit.components.v1 as components
+from pathlib import Path
+from datetime import date, timedelta
+from typing import Dict, Any, Optional, Union, Tuple
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+def form_date_slider(
+    label: str,
+    min_val: date,
+    max_val: date,
+    value: Union[date, Tuple[date, date]],
+    step_type: Optional[str] = "month",
+    step: Optional[timedelta] = None,
+    format: str = "YYYY-MM",
+    color: str = "blue",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    theme: Optional[Dict[str, Any]] = None,
+    defer_update: bool = False,
+    key: Optional[str] = None,
+) -> Union[date, Tuple[date, date]]:
+    """
+    Display a date slider with single or range selection.
+
+    Args:
+        label: Label text for the slider
+        min_val: Minimum selectable date
+        max_val: Maximum selectable date
+        value: Current value - single date or tuple of (start, end) for range mode
+        step_type: Step granularity - "month", "quarter", "year", "week", "day", or None
+                   When set to a calendar unit, snaps to boundaries (e.g., 1st of month).
+                   When "day" or None, uses the `step` timedelta parameter.
+        step: Step increment as timedelta (only used when step_type is "day" or None)
+              Defaults to timedelta(days=1)
+        format: Display format string - "YYYY-MM", "YYYY-MM-DD", "MMM YYYY", etc.
+        color: Accent color - preset name or hex value
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        theme: Optional theme dictionary. If None, uses active global theme.
+        defer_update: If True, don't trigger Streamlit rerun on change.
+        key: Unique key for the component
+
+    Returns:
+        Single date if value was a date, or tuple (start, end) if value was a tuple
+
+    Example:
+        # Monthly range selection
+        start, end = form_date_slider(
+            label="Date Range",
+            min_val=date(2024, 1, 1),
+            max_val=date(2025, 12, 31),
+            value=(date(2024, 3, 1), date(2024, 9, 1)),
+            step_type="month",
+            format="YYYY-MM",
+            key="date_range"
+        )
+
+        # Single month selection
+        selected = form_date_slider(
+            label="Select Month",
+            min_val=date(2024, 1, 1),
+            max_val=date(2025, 12, 31),
+            value=date(2024, 6, 1),
+            step_type="month",
+            format="YYYY-MM",
+            key="single_month"
+        )
+
+        # Daily stepping with custom interval
+        selected = form_date_slider(
+            label="Select Date",
+            min_val=date(2024, 1, 1),
+            max_val=date(2024, 12, 31),
+            value=date(2024, 6, 15),
+            step_type="day",
+            step=timedelta(days=7),  # Weekly steps
+            format="YYYY-MM-DD",
+            key="weekly_date"
+        )
+    """
+    # Determine if range mode based on value type
+    is_range = isinstance(value, (tuple, list))
+
+    # Convert dates to ISO strings
+    min_val_str = min_val.isoformat()
+    max_val_str = max_val.isoformat()
+
+    if is_range:
+        value_data = [value[0].isoformat(), value[1].isoformat()]
+        default_data = value_data
+    else:
+        value_data = value.isoformat()
+        default_data = value_data
+
+    # Convert step timedelta to days if provided
+    step_days = None
+    if step is not None:
+        step_days = step.days
+    elif step_type in ("day", None):
+        step_days = 1  # Default to 1 day
+
+    # 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()
+
+    result = _component(
+        component="form_date_slider",
+        label=label,
+        minVal=min_val_str,
+        maxVal=max_val_str,
+        value=value_data,
+        stepType=step_type,
+        stepDays=step_days,
+        format=format,
+        color=color,
+        style=style,
+        className=class_name,
+        theme=resolved_theme,
+        deferUpdate=defer_update,
+        componentKey=key,
+        key=key,
+        default=default_data,
+    )
+
+    # Parse result back to date objects
+    if result is None:
+        return value
+
+    if is_range:
+        if isinstance(result, (list, tuple)) and len(result) == 2:
+            return (date.fromisoformat(result[0]), date.fromisoformat(result[1]))
+        return value
+    else:
+        if isinstance(result, str):
+            return date.fromisoformat(result)
+        return value

streamlit_react_components/form/form_select.py

@@ -20,6 +20,7 @@ def form_select(
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
     theme: Optional[Dict[str, Any]] = None,
+    defer_update: bool = False,
     key: Optional[str] = None,
 ) -> str:
     """
@@ -36,7 +37,10 @@ def form_select(
         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
+        defer_update: If True, don't trigger Streamlit rerun on change.
+                      Value is stored locally and sent on next rerun (e.g., Apply button).
+                      Requires 'key' to be set.
+        key: Unique key for the component (required if defer_update=True)
 
     Returns:
         The currently selected value
@@ -57,6 +61,16 @@ def form_select(
                 {"label": "Scenarios", "options": ["Q2 Demand Surge"]}
             ]
         )
+
+        # Deferred update (no rerun until Apply button clicked)
+        site = form_select(
+            label="Site",
+            options=["AML_14", "ADL", "Devens"],
+            defer_update=True,
+            key="site_select"
+        )
+        if st.button("Apply"):
+            st.rerun()
     """
     # Resolve theme (None = use global, False = disable)
     from ..themes import get_active_theme
@@ -73,6 +87,8 @@ def form_select(
         style=style,
         className=class_name,
         theme=resolved_theme,
+        deferUpdate=defer_update,
+        componentKey=key,
         key=key,
         default=value,
     )

streamlit_react_components/form/form_slider.py

@@ -23,6 +23,7 @@ def form_slider(
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
     theme: Optional[Dict[str, Any]] = None,
+    defer_update: bool = False,
     key: Optional[str] = None,
 ) -> float:
     """
@@ -41,7 +42,10 @@ def form_slider(
         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
+        defer_update: If True, don't trigger Streamlit rerun on change.
+                      Value is stored locally and sent on next rerun (e.g., Apply button).
+                      Requires 'key' to be set.
+        key: Unique key for the component (required if defer_update=True)
 
     Returns:
         The current slider value
@@ -65,6 +69,18 @@ def form_slider(
             max_val=100,
             color="#ff5733"
         )
+
+        # Deferred update (no rerun until Apply button clicked)
+        threshold = form_slider(
+            label="Threshold",
+            value=50,
+            min_val=0,
+            max_val=100,
+            defer_update=True,
+            key="threshold_slider"
+        )
+        if st.button("Apply"):
+            st.rerun()
     """
     # Resolve theme (None = use global, False = disable)
     from ..themes import get_active_theme
@@ -84,6 +100,8 @@ def form_slider(
         style=style,
         className=class_name,
         theme=resolved_theme,
+        deferUpdate=defer_update,
+        componentKey=key,
         key=key,
         default=value,
     )

streamlit_react_components/form/radio_group.py

@@ -19,6 +19,7 @@ def radio_group(
     style: Optional[Dict[str, Any]] = None,
     class_name: str = "",
     theme: Optional[Dict[str, Any]] = None,
+    defer_update: bool = False,
     key: Optional[str] = None,
 ) -> Optional[str]:
     """
@@ -36,7 +37,10 @@ def radio_group(
         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
+        defer_update: If True, don't trigger Streamlit rerun on change.
+                      Value is stored locally and sent on next rerun (e.g., Apply button).
+                      Requires 'key' to be set.
+        key: Unique key for the component (required if defer_update=True)
 
     Returns:
         ID of the selected item (string), or None if nothing selected
@@ -51,6 +55,16 @@ def radio_group(
             ]
         )
         # Returns: "credit" (only one can be selected)
+
+        # Deferred update (no rerun until Apply button clicked)
+        selected = radio_group(
+            label="Payment Method",
+            items=[...],
+            defer_update=True,
+            key="payment_radio"
+        )
+        if st.button("Apply"):
+            st.rerun()
     """
     # Get default selected item (first checked item)
     default_selected = None
@@ -73,6 +87,8 @@ def radio_group(
         style=style,
         className=class_name,
         theme=resolved_theme,
+        deferUpdate=defer_update,
+        componentKey=key,
         key=key,
         default=default_selected,
     )

streamlit_react_components/styled_container.py

@@ -0,0 +1,193 @@
+"""
+Styled container component for wrapping native Streamlit components with Tailwind styling.
+
+This module provides a context manager that enables Tailwind CSS-like styling
+for native Streamlit components (st.slider, st.button, st.text_input, etc.).
+
+Supports:
+- All Tailwind utility classes
+- Opacity modifiers (bg-blue-500/50)
+- Hover, focus, and active variants
+- Transitions and animations
+"""
+
+from contextlib import contextmanager
+from typing import Dict, Any, Optional, Generator
+import uuid
+
+import streamlit as st
+
+from .tailwind import parse_tailwind_classes
+
+
+@contextmanager
+def styled_container(
+    *classes: str,
+    style: Optional[Dict[str, Any]] = None,
+    key: Optional[str] = None,
+) -> Generator[None, None, None]:
+    """
+    Context manager for styling native Streamlit components with Tailwind classes.
+
+    Wraps Streamlit components in a styled container with support for Tailwind CSS
+    utility classes, including hover:, focus:, and active: variants.
+
+    Args:
+        *classes: Tailwind CSS class names (e.g., "bg-slate-800", "hover:bg-slate-700")
+        style: Optional dict of additional inline CSS properties to merge
+        key: Optional unique key for the container (auto-generated if not provided)
+
+    Yields:
+        None - use as a context manager with 'with' statement
+
+    Example:
+        Basic usage with Tailwind classes::
+
+            with styled_container("bg-slate-800", "border", "border-blue-500", "rounded-xl", "p-4"):
+                st.slider("Risk Threshold", 0, 100, 75)
+                st.button("Apply")
+
+        With hover and focus states::
+
+            with styled_container(
+                "bg-slate-800",
+                "border-2",
+                "border-slate-600",
+                "rounded-xl",
+                "p-6",
+                "transition-all",
+                "duration-200",
+                "hover:bg-slate-700",
+                "hover:border-blue-500",
+                "focus:border-blue-400"
+            ):
+                st.text_input("Username")
+                st.text_input("Password", type="password")
+                st.button("Login")
+
+        With opacity modifiers::
+
+            with styled_container(
+                "bg-rose-500/20",
+                "border",
+                "border-rose-500/50",
+                "rounded-lg",
+                "p-4"
+            ):
+                st.write("Rose-tinted container")
+
+        With gradient backgrounds::
+
+            with styled_container(
+                "bg-gradient-to-br",
+                "from-slate-800",
+                "to-slate-900",
+                "rounded-2xl",
+                "p-6"
+            ):
+                st.metric("Revenue", "$12,450", "+8.2%")
+
+        With custom inline styles::
+
+            with styled_container(
+                "bg-slate-800",
+                "rounded-lg",
+                style={"min-height": "200px", "box-shadow": "0 0 20px rgba(59,130,246,0.3)"}
+            ):
+                st.write("Custom styled container")
+
+    Note:
+        - The focus: variant uses :focus-within, which triggers when any child
+          element (like an input) receives focus
+        - Transitions work with hover/focus states for smooth animations
+        - Gradient classes (from-, to-, via-) work with bg-gradient-to-* classes
+    """
+    # Generate unique container ID
+    container_id = key or f"stc-{uuid.uuid4().hex[:8]}"
+
+    # Parse classes into categorized CSS dicts
+    parsed = parse_tailwind_classes(classes)
+
+    # Merge with custom style dict
+    if style:
+        parsed["base"].update(style)
+
+    # Build CSS rules for each state
+    css_blocks = []
+
+    # Use a more specific selector that targets the container's parent block
+    selector = f'[data-testid="stVerticalBlock"]:has(> [data-stc-id="{container_id}"])'
+
+    # Base styles
+    if parsed["base"]:
+        base_css = "; ".join(f"{k}: {v}" for k, v in parsed["base"].items())
+        css_blocks.append(f"{selector} {{ {base_css} }}")
+
+    # Hover styles
+    if parsed["hover"]:
+        hover_css = "; ".join(f"{k}: {v}" for k, v in parsed["hover"].items())
+        css_blocks.append(f"{selector}:hover {{ {hover_css} }}")
+
+    # Focus styles (uses :focus-within for child focus)
+    if parsed["focus"]:
+        focus_css = "; ".join(f"{k}: {v}" for k, v in parsed["focus"].items())
+        css_blocks.append(f"{selector}:focus-within {{ {focus_css} }}")
+
+    # Active styles
+    if parsed["active"]:
+        active_css = "; ".join(f"{k}: {v}" for k, v in parsed["active"].items())
+        css_blocks.append(f"{selector}:active {{ {active_css} }}")
+
+    # Inject CSS and marker element
+    css_content = "\n        ".join(css_blocks)
+    st.markdown(
+        f"""
+        <style>
+        {css_content}
+        </style>
+        <div data-stc-id="{container_id}" style="display:none;"></div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    yield
+
+
+# Convenience function for inline style conversion
+def css(*classes: str, **extra_styles: str) -> str:
+    """
+    Convert Tailwind classes to an inline CSS string.
+
+    Useful for applying Tailwind-like styles to st.markdown HTML content.
+
+    Args:
+        *classes: Tailwind CSS class names
+        **extra_styles: Additional CSS properties as keyword arguments
+
+    Returns:
+        CSS string suitable for inline style attribute
+
+    Example:
+        >>> css("bg-slate-800", "p-4", "rounded-lg")
+        'background-color: #1e293b; padding: 1rem; border-radius: 0.5rem'
+
+        >>> css("text-blue-500", font_size="20px")
+        'color: #3b82f6; font-size: 20px'
+
+        With st.markdown::
+
+            st.markdown(
+                f'<div style="{css("bg-slate-800", "p-4", "rounded-lg")}">Content</div>',
+                unsafe_allow_html=True
+            )
+    """
+    from .tailwind import tw
+
+    styles = tw(*classes)
+
+    # Add extra styles (convert underscores to hyphens)
+    for key, value in extra_styles.items():
+        css_key = key.replace("_", "-")
+        styles[css_key] = value
+
+    return "; ".join(f"{k}: {v}" for k, v in styles.items())