streamlit-react-components 0.1.1__py3-none-any.whl → 1.0.1__py3-none-any.whl

{streamlit_react_components-0.1.1.dist-info → streamlit_react_components-1.0.1.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: streamlit-react-components
-Version: 0.1.1
+Version: 1.0.1
 Summary: Reusable React-based Streamlit components with Tailwind CSS styling
 License: MIT
 Project-URL: Homepage, https://github.com/your-org/streamlit-react-components
@@ -19,7 +19,7 @@ Requires-Dist: streamlit>=1.24.0
 
 # Streamlit React Components
 
-A collection of 11 reusable React-based Streamlit components with Tailwind CSS styling. All components support custom inline styles and Tailwind class names.
+A collection of 12 reusable React-based Streamlit components with Tailwind CSS styling. All components support custom inline styles and Tailwind class names.
 
 ## Installation
 
@@ -34,7 +34,7 @@ import streamlit as st
 from streamlit_react_components import (
     panel, section_header, stat_card, metric_row,
     data_table, step_indicator, button_group, chart_legend,
-    form_select, form_slider, checkbox_group
+    plotly_chart, form_select, form_slider, checkbox_group
 )
 ```
 
@@ -123,11 +123,15 @@ actions = [
 | `id` | `str` | Unique identifier (returned on click) |
 | `label` | `str` | Button text (optional) |
 | `icon` | `str` | Emoji/icon (optional) |
-| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
+| `href` | `str` | URL for link actions. External URLs (http/https) open in new tab (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = section_header(
     title="Executive Summary",
     icon="📊",
@@ -137,8 +141,31 @@ clicked = section_header(
     ]
 )
 
-if clicked == "refresh":
-    st.rerun()
+# Using hex colors and custom styling
+clicked = section_header(
+    title="Custom Actions",
+    actions=[
+        {"id": "custom", "label": "Custom", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px", "borderRadius": "20px"}}
+    ]
+)
+
+# External link (opens in new tab)
+section_header(
+    title="Resources",
+    actions=[
+        {"id": "docs", "label": "Documentation", "href": "https://docs.example.com", "icon": "📚"},
+        {"id": "github", "label": "GitHub", "href": "https://github.com", "color": "slate"}
+    ]
+)
+
+# Internal page navigation
+clicked = section_header(
+    title="Settings",
+    actions=[{"id": "home", "label": "Home", "icon": "🏠"}]
+)
+if clicked == "home":
+    st.switch_page("pages/home.py")
 ```
 
 ---
@@ -161,13 +188,17 @@ stat_card(
 
 #### Colors
 
-| Color | Border | Text |
-|-------|--------|------|
+Supports preset color names or hex values:
+
+| Preset | Border | Text |
+|--------|--------|------|
 | `"blue"` | `border-blue-500` | `text-blue-400` |
 | `"green"` | `border-green-500` | `text-green-400` |
 | `"red"` | `border-red-500` | `text-red-400` |
 | `"yellow"` | `border-yellow-500` | `text-yellow-400` |
 | `"purple"` | `border-purple-500` | `text-purple-400` |
+| `"slate"` | `border-slate-500` | `text-slate-400` |
+| `"#xxxxxx"` | Custom hex color | Custom hex color |
 
 #### Example
 
@@ -182,6 +213,9 @@ with col3:
     stat_card(label="Below (Underutil)", value="1", color="yellow")
 with col4:
     stat_card(label="Avg OEE", value="78.4%", color="blue")
+
+# Using hex color
+stat_card(label="Custom Color", value="42", color="#ff5733")
 ```
 
 ---
@@ -364,12 +398,15 @@ buttons = [
 | `id` | `str` | Unique identifier (returned on click) |
 | `label` | `str` | Button text (optional) |
 | `icon` | `str` | Emoji/icon (optional) |
-| `color` | `str` | `"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"` |
+| `color` | `str` | Preset (`"blue"`, `"green"`, `"red"`, `"yellow"`, `"purple"`, `"slate"`) or hex (e.g., `"#94a3b8"`) |
 | `disabled` | `bool` | Disable the button |
+| `style` | `dict` | Inline CSS styles for this button (optional) |
+| `className` | `str` | Tailwind classes for this button (optional) |
 
 #### Example
 
 ```python
+# Using preset colors
 clicked = button_group(
     buttons=[
         {"id": "view", "icon": "👁️", "label": "View"},
@@ -378,6 +415,14 @@ clicked = button_group(
     ]
 )
 
+# Using hex colors and custom styling
+clicked = button_group(
+    buttons=[
+        {"id": "custom", "icon": "🎨", "color": "#ff5733"},
+        {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+    ]
+)
+
 if clicked == "delete":
     st.warning("Delete clicked!")
 ```
@@ -427,7 +472,163 @@ chart_legend(
 
 ---
 
-### 9. Form Select
+### 9. Plotly Chart
+
+Render Plotly charts with full interactivity and event callbacks.
+
+```python
+plotly_chart(
+    # Data source (one required)
+    figure: Any = None,            # Plotly figure or dict
+    data: DataFrame = None,        # pandas DataFrame
+
+    # DataFrame options (when using data=)
+    x: str = None,                 # Column name for x-axis
+    y: str | list = None,          # Column name(s) for y-axis
+    color: str = None,             # Column name for color grouping
+    chart_type: str = "line",      # "line", "bar", "scatter", "area", "pie", "histogram"
+    title: str = None,             # Chart title
+
+    # Plotly config
+    config: dict = None,           # Plotly config options
+
+    # Event callbacks
+    on_click: bool = False,        # Enable click events
+    on_select: bool = False,       # Enable selection events
+    on_hover: bool = False,        # Enable hover events
+    on_relayout: bool = False,     # Enable zoom/pan events
+
+    # Expandable dialog
+    expandable: bool = False,      # Show expand button
+    modal_title: str = "",         # Dialog header title
+
+    # Styling
+    style: dict = None,
+    class_name: str = "",
+    key: str = None
+) -> dict | None                   # Returns event dict or None
+```
+
+#### Using Plotly Figure
+
+```python
+import plotly.graph_objects as go
+
+fig = go.Figure(
+    data=[
+        go.Scatter(x=[1,2,3,4,5], y=[10,15,13,17,20], mode='lines+markers', name='Sales'),
+        go.Bar(x=[1,2,3,4,5], y=[5,8,6,9,12], name='Orders')
+    ],
+    layout=go.Layout(title='Sales Dashboard')
+)
+
+event = plotly_chart(
+    figure=fig,
+    on_click=True,
+    on_select=True,
+    style={"height": "400px"}
+)
+
+if event and event['type'] == 'click':
+    st.write(f"Clicked: {event['points']}")
+```
+
+#### Using DataFrame
+
+```python
+import pandas as pd
+
+df = pd.DataFrame({
+    'month': ['Jan', 'Feb', 'Mar', 'Apr'],
+    'sales': [100, 150, 120, 180],
+    'orders': [50, 75, 60, 90]
+})
+
+# Simple line chart
+event = plotly_chart(
+    data=df,
+    x='month',
+    y='sales',
+    chart_type='line',
+    title='Monthly Sales'
+)
+
+# Multiple y columns as bar chart
+event = plotly_chart(
+    data=df,
+    x='month',
+    y=['sales', 'orders'],
+    chart_type='bar',
+    title='Sales vs Orders'
+)
+
+# Scatter with color grouping
+event = plotly_chart(
+    data=df,
+    x='sales',
+    y='orders',
+    color='month',
+    chart_type='scatter'
+)
+```
+
+#### Chart Types (DataFrame mode)
+
+| Type | Description |
+|------|-------------|
+| `"line"` | Line chart with connected points |
+| `"scatter"` | Scatter plot with markers only |
+| `"bar"` | Vertical bar chart |
+| `"area"` | Area chart (filled line) |
+| `"pie"` | Pie chart (x=labels, y=values) |
+| `"histogram"` | Histogram of x values |
+
+#### Event Types
+
+| Event | When Triggered | Data Returned |
+|-------|----------------|---------------|
+| `click` | User clicks a data point | `{type: 'click', points: [...]}` |
+| `select` | User box/lasso selects points | `{type: 'select', points: [...]}` |
+| `hover` | User hovers over a point | `{type: 'hover', points: [...]}` |
+| `relayout` | User zooms/pans the chart | `{type: 'relayout', relayout: {...}}` |
+
+#### Point Data Structure
+
+Each point in the `points` array contains:
+
+```python
+{
+    "curveNumber": 0,      # Index of the trace
+    "pointNumber": 2,      # Index of the point in the trace
+    "pointIndex": 2,       # Same as pointNumber
+    "x": "Mar",            # X value
+    "y": 120,              # Y value
+    "customdata": None     # Custom data if provided
+}
+```
+
+#### Expandable Dialog
+
+Charts can be expanded into a full-page dialog using Streamlit's native `st.dialog()`:
+
+```python
+event = plotly_chart(
+    figure=fig,
+    expandable=True,                    # Show expand button in corner
+    modal_title="Sales Dashboard",      # Title in dialog header
+    style={"height": "300px"}
+)
+```
+
+**Dialog Features:**
+- Click the expand icon (⛶) in the top-right corner to open
+- Dialog uses Streamlit's native full-width dialog overlay
+- Click outside the dialog or press Escape to close
+- Chart renders at full dialog width for better visibility
+
+---
+
+### 10. Form Select
 
 A styled dropdown select input.
 
@@ -490,7 +691,7 @@ scenario = form_select(
 
 ---
 
-### 10. Form Slider
+### 11. Form Slider
 
 A styled range slider input.
 
@@ -502,7 +703,7 @@ form_slider(
     max_val: float,               # Maximum value
     step: float = 1,              # Step increment
     unit: str = "",               # Unit suffix (e.g., "%", "hrs")
-    color: str = "blue",          # Value display color
+    color: str = "blue",          # Preset or hex color (e.g., "#94a3b8")
     style: dict = None,
     class_name: str = "",
     key: str = None
@@ -512,7 +713,7 @@ form_slider(
 #### Example
 
 ```python
-# Percentage slider
+# Percentage slider with preset color
 threshold = form_slider(
     label="Upper Threshold",
     value=90,
@@ -533,20 +734,19 @@ hold_time = form_slider(
     color="blue"
 )
 
-# Batch size
-batch = form_slider(
-    label="Batch Size",
-    value=500,
-    min_val=200,
-    max_val=1000,
-    step=25,
-    color="green"
+# Slider with hex color
+custom_slider = form_slider(
+    label="Custom Color",
+    value=50,
+    min_val=0,
+    max_val=100,
+    color="#ff5733"
 )
 ```
 
 ---
 
-### 11. Checkbox Group
+### 12. Checkbox Group
 
 A group of checkboxes.
 

streamlit_react_components-1.0.1.dist-info/RECORD

@@ -0,0 +1,22 @@
+streamlit_react_components/__init__.py,sha256=-m5OJx0vsfzD6k2m_2X8eMQXi9pgkreAuDZJoVWbdJ0,673
+streamlit_react_components/_frontend/index.css,sha256=vW-yXHEFGLJUbWgkRewomPA8R3Um6h8kADSJqzEHxIc,26376
+streamlit_react_components/_frontend/index.html,sha256=CjBEtVYlgT_q06BE16EHFrUrJZ6z0MCprrTg7qgAWzw,381
+streamlit_react_components/_frontend/index.js,sha256=slhaVPHpVSgP6b7yYt43p5_hFEtNAEl2_DhrUnH6stM,5215495
+streamlit_react_components/common/__init__.py,sha256=xUKaw_X2B2xd6AqW8oLzHupGp-TX3Fij0FjhMNwd-vs,550
+streamlit_react_components/common/button_group.py,sha256=g38gpR62dQ8KLd3JyANvGonT6tf-tyooIjC6t3O4iH0,2225
+streamlit_react_components/common/chart_legend.py,sha256=So703OO-sI6SWrSVGKH0OTiI-smr4luqgBtXQ9GwIlI,1377
+streamlit_react_components/common/data_table.py,sha256=dEvRxCBejvoye7jsqGcdsh_Ox-VeRpWMHgaAi-qv5HM,2142
+streamlit_react_components/common/metric_row.py,sha256=abDfSrLvZO8MK2gglvE98L5U0Fx2NfNHGF5bBnfqR5I,1257
+streamlit_react_components/common/panel.py,sha256=O4URjnK8u9_byFzDO9RAFdpXjzNdxpXY1CX8gEEK1pY,1094
+streamlit_react_components/common/plotly_chart.py,sha256=px1pITa8GSYl_TTg4KzX81nQy_F-9XwUV_91fR7d0po,9368
+streamlit_react_components/common/section_header.py,sha256=2sVLWHjHx2WdhbVVLBgs5shwUUbw6lbAKbsAwiwIWpg,2983
+streamlit_react_components/common/stat_card.py,sha256=PimCX6Dd18DyfJn6tk0YmrA1zKvAiqeKXdHAKXhxiRQ,1674
+streamlit_react_components/common/step_indicator.py,sha256=araovSL_c5h66PawZBf5IlQbVoxXwE9kD0H10ZopVoU,1370
+streamlit_react_components/form/__init__.py,sha256=XP9oBEHSwLTNqu88sYm0F_n828yzPStDJl3N62HxVvc,222
+streamlit_react_components/form/checkbox_group.py,sha256=NLNJW1Ql60PnFj0FdH6Q0gUAGx2NOVNI9geIG-NG8G4,1779
+streamlit_react_components/form/form_select.py,sha256=KILKVUO-Elb0nqbTEImxyoGQQrnZ_jft30iJSbY5ksk,1946
+streamlit_react_components/form/form_slider.py,sha256=4w9h-d-9yAHg3ZqUHCZGzsfUG3lP5OTwVrDo5sZAnfQ,2032
+streamlit_react_components-1.0.1.dist-info/METADATA,sha256=VYZrioH2thbXYa6VWW1A2DTDGqmsddFeYUJeQZXlRuU,21677
+streamlit_react_components-1.0.1.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
+streamlit_react_components-1.0.1.dist-info/top_level.txt,sha256=3JFrl15-Uewx3BFMSzqrBufF9GmTS1LDKfShmg0R9VE,27
+streamlit_react_components-1.0.1.dist-info/RECORD,,

streamlit_react_components-0.1.1.dist-info/RECORD

@@ -1,21 +0,0 @@
-streamlit_react_components/__init__.py,sha256=UFqSg3IlXb1-E_PgJQFEUh-MWjoooGz1Gyq_kVlibBk,635
-streamlit_react_components/_frontend/index.css,sha256=bGjKlFP0M9oZjCZxs5LhgGVI9XaWBJw9CIuvuR8G48E,26096
-streamlit_react_components/_frontend/index.html,sha256=CjBEtVYlgT_q06BE16EHFrUrJZ6z0MCprrTg7qgAWzw,381
-streamlit_react_components/_frontend/index.js,sha256=nXjpPEeTg84ip8r1yLUa9m5402XqPV93UBas4rnYrvk,328827
-streamlit_react_components/common/__init__.py,sha256=WEyVUIRkwspYAyll6fhuoBGD5HKVQpBLR9CjYEQqyu8,491
-streamlit_react_components/common/button_group.py,sha256=8g8L79i-tjFuheAqJUe46mRzEFlcDfbjMpYNF8Hui58,1698
-streamlit_react_components/common/chart_legend.py,sha256=So703OO-sI6SWrSVGKH0OTiI-smr4luqgBtXQ9GwIlI,1377
-streamlit_react_components/common/data_table.py,sha256=dEvRxCBejvoye7jsqGcdsh_Ox-VeRpWMHgaAi-qv5HM,2142
-streamlit_react_components/common/metric_row.py,sha256=abDfSrLvZO8MK2gglvE98L5U0Fx2NfNHGF5bBnfqR5I,1257
-streamlit_react_components/common/panel.py,sha256=O4URjnK8u9_byFzDO9RAFdpXjzNdxpXY1CX8gEEK1pY,1094
-streamlit_react_components/common/section_header.py,sha256=HaochqnbSI2lAIU8zXzqMYRIofqGMRbumQOmBMxQle4,1762
-streamlit_react_components/common/stat_card.py,sha256=l3amtS0JpRqoiZSqdcS2HfE3FxFlzOlIgR8aPX0fnOo,1433
-streamlit_react_components/common/step_indicator.py,sha256=araovSL_c5h66PawZBf5IlQbVoxXwE9kD0H10ZopVoU,1370
-streamlit_react_components/form/__init__.py,sha256=XP9oBEHSwLTNqu88sYm0F_n828yzPStDJl3N62HxVvc,222
-streamlit_react_components/form/checkbox_group.py,sha256=NLNJW1Ql60PnFj0FdH6Q0gUAGx2NOVNI9geIG-NG8G4,1779
-streamlit_react_components/form/form_select.py,sha256=KILKVUO-Elb0nqbTEImxyoGQQrnZ_jft30iJSbY5ksk,1946
-streamlit_react_components/form/form_slider.py,sha256=iRkPr4hg1vpsNjFF8paZ3jRb3hA1iU3Jp7WairZD_t4,1730
-streamlit_react_components-0.1.1.dist-info/METADATA,sha256=Z7-lMK1ICGUSwjVgnWdTEYNM_uPDrzYR6iM2rudP3q0,15815
-streamlit_react_components-0.1.1.dist-info/WHEEL,sha256=_zCd3N1l69ArxyTb8rzEoP9TpbYXkqRFSNOD5OuxnTs,91
-streamlit_react_components-0.1.1.dist-info/top_level.txt,sha256=3JFrl15-Uewx3BFMSzqrBufF9GmTS1LDKfShmg0R9VE,27
-streamlit_react_components-0.1.1.dist-info/RECORD,,