Commit

Dockerfile

@@ -1,4 +1,4 @@
-FROM python:3.10.14-bullseye
+FROM python:3.10.15-bullseye
 
 RUN apt-get update && \
     apt-get install -y \

autocomplete.py

@@ -29,6 +29,7 @@ def app():
       on_selection_change=on_value_change,
       on_enter=on_value_change,
       on_input=on_input,
+      appearance="outline",
     )
 
     if state.selected_value:

bootstrap.py

@@ -0,0 +1,78 @@
+import mesop as me
+
+
+@me.page(
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
+  ),
+  stylesheets=[
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css",
+  ],
+  path="/bootstrap",
+)
+def page():
+  with me.box(classes="container"):
+    with me.box(
+      classes="d-flex flex-wrap justify-content-between py-3 mb-4 border-bottom",
+    ):
+      with me.box(
+        classes="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none fs-4",
+      ):
+        me.text("Mesop")
+
+      with me.box(classes="nav nav-pills"):
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link active"):
+            me.text("Features")
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link"):
+            me.text("About")
+
+  with me.box(classes="container px-4 py-5"):
+    with me.box(classes="pb-2 border-bottom"):
+      me.text("Columns", type="headline-5")
+
+    with me.box(classes="row g-4 py-5 row-cols-1 row-cols-lg-3"):
+      with me.box(classes="feature col"):
+        with me.box(classes="fs-2 text-body-emphasis"):
+          me.text("Featured title")
+        me.text(
+          "Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words."
+        )
+        me.link(text="Call to action", url="/#")
+
+      with me.box(classes="feature col"):
+        with me.box(classes="fs-2 text-body-emphasis"):
+          me.text("Featured title")
+        me.text(
+          "Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words."
+        )
+        me.link(text="Call to action", url="/#")
+
+      with me.box(classes="feature col"):
+        with me.box(classes="fs-2 text-body-emphasis"):
+          me.text("Featured title")
+        me.text(
+          "Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words."
+        )
+        me.link(text="Call to action", url="/#")
+
+    with me.box(
+      classes="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"
+    ):
+      with me.box(classes="col-md-4 mb-0 text-body-secondary"):
+        me.text("Copyright 2024 Mesop")
+
+      with me.box(classes="nav col-md-4 justify-content-end"):
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link px-2 text-body-secondary"):
+            me.text("Home")
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link px-2 text-body-secondary"):
+            me.text("Features")
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link px-2 text-body-secondary"):
+            me.text("FAQs")
+        with me.box(classes="nav-item"):
+          with me.box(classes="nav-link px-2 text-body-secondary"):
+            me.text("About")

button_toggle.py

@@ -0,0 +1,41 @@
+from dataclasses import field
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  selected_values: list[str] = field(
+    default_factory=lambda: ["bold", "underline"]
+  )
+
+
+def load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.page(on_load=load, path="/button_toggle")
+def app():
+  state = me.state(State)
+
+  with me.box(style=me.Style(margin=me.Margin.all(15))):
+    me.button_toggle(
+      value=state.selected_values,
+      buttons=[
+        me.ButtonToggleButton(label="Bold", value="bold"),
+        me.ButtonToggleButton(label="Italic", value="italic"),
+        me.ButtonToggleButton(label="Underline", value="underline"),
+      ],
+      multiple=True,
+      hide_selection_indicator=False,
+      disabled=False,
+      on_change=on_change,
+      style=me.Style(margin=me.Margin(bottom=20)),
+    )
+
+    me.text("Select buttons: " + " ".join(state.selected_values))
+
+
+def on_change(e: me.ButtonToggleChangeEvent):
+  state = me.state(State)
+  state.selected_values = e.values

card.py

@@ -0,0 +1,103 @@
+import mesop as me
+
+
+def load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.page(
+  on_load=load,
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"],
+  ),
+  path="/card",
+)
+def app():
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=15,
+      margin=me.Margin.all(15),
+      max_width=500,
+    )
+  ):
+    with me.card(appearance="outlined"):
+      me.card_header(
+        title="Grapefruit",
+        subtitle="Kind of fruit",
+        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+      )
+      me.image(
+        style=me.Style(
+          width="100%",
+        ),
+        src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+      )
+      with me.card_content():
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.card_actions(align="end"):
+        me.button(label="Add to cart")
+        me.button(label="Buy")
+
+    with me.card(appearance="raised"):
+      me.card_header(
+        title="Grapefruit",
+        subtitle="Kind of fruit",
+        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        image_type="small",
+      )
+
+      with me.card_content():
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.card_actions(align="start"):
+        me.button(label="Add to cart")
+        me.button(label="Buy")
+
+    with me.card(appearance="outlined"):
+      me.card_header(
+        title="Grapefruit",
+        subtitle="Kind of fruit",
+        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        image_type="medium",
+      )
+
+      with me.card_content():
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.card_actions(align="start"):
+        me.button(label="Add to cart")
+        me.button(label="Buy")
+
+      me.card_header(
+        title="Grapefruit",
+        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        image_type="large",
+      )
+
+      with me.card_content():
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.card_actions(align="end"):
+        me.button(label="Add to cart")
+        me.button(label="Buy")
+
+      me.card_header(
+        title="Grapefruit",
+        image_type="large",
+      )
+
+      with me.card_content():
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )

date_picker.py

@@ -0,0 +1,52 @@
+from dataclasses import field
+from datetime import date
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  picked_date: date | None = field(default_factory=lambda: date(2024, 10, 1))
+
+
+def on_load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.page(path="/date_picker", on_load=on_load)
+def app():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=15,
+      padding=me.Padding.all(15),
+    )
+  ):
+    me.date_picker(
+      label="Date",
+      disabled=False,
+      placeholder="9/1/2024",
+      required=True,
+      value=state.picked_date,
+      readonly=False,
+      hide_required_marker=False,
+      color="accent",
+      float_label="always",
+      appearance="outline",
+      on_change=on_date_change,
+    )
+
+    me.text("Selected date: " + _render_date(state.picked_date))
+
+
+def on_date_change(e: me.DatePickerChangeEvent):
+  state = me.state(State)
+  state.picked_date = e.date
+
+
+def _render_date(maybe_date: date | None) -> str:
+  if maybe_date:
+    return maybe_date.strftime("%Y-%m-%d")
+  return "None"

date_range_picker.py

@@ -0,0 +1,61 @@
+from dataclasses import field
+from datetime import date
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  picked_start_date: date | None = field(
+    default_factory=lambda: date(2024, 10, 1)
+  )
+  picked_end_date: date | None = field(
+    default_factory=lambda: date(2024, 11, 1)
+  )
+
+
+def on_load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.page(path="/date_range_picker", on_load=on_load)
+def app():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=15,
+      padding=me.Padding.all(15),
+    )
+  ):
+    me.date_range_picker(
+      label="Date Range",
+      disabled=False,
+      placeholder_start_date="9/1/2024",
+      placeholder_end_date="10/1/2024",
+      required=True,
+      start_date=state.picked_start_date,
+      end_date=state.picked_end_date,
+      readonly=False,
+      hide_required_marker=False,
+      color="accent",
+      float_label="always",
+      appearance="outline",
+      on_change=on_date_range_change,
+    )
+
+    me.text("Start date: " + _render_date(state.picked_start_date))
+    me.text("End date: " + _render_date(state.picked_end_date))
+
+
+def on_date_range_change(e: me.DateRangePickerChangeEvent):
+  state = me.state(State)
+  state.picked_start_date = e.start_date
+  state.picked_end_date = e.end_date
+
+
+def _render_date(maybe_date: date | None) -> str:
+  if maybe_date:
+    return maybe_date.strftime("%Y-%m-%d")
+  return "None"

expansion_panel.py

@@ -0,0 +1,165 @@
+from dataclasses import field
+
+import mesop as me
+
+
+@me.stateclass
+class State:
+  normal_accordion: dict[str, bool] = field(
+    default_factory=lambda: {"pie": True, "donut": False, "icecream": False}
+  )
+  multi_accordion: dict[str, bool] = field(
+    default_factory=lambda: {"pie": False, "donut": False, "icecream": False}
+  )
+
+
+def load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
+@me.page(
+  on_load=load,
+  security_policy=me.SecurityPolicy(
+    allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
+  ),
+  path="/expansion_panel",
+)
+def app():
+  state = me.state(State)
+  with me.box(
+    style=me.Style(
+      display="flex",
+      flex_direction="column",
+      gap=15,
+      margin=me.Margin.all(15),
+      max_width=500,
+    )
+  ):
+    me.text("Normal Accordion", type="headline-5")
+    with me.accordion():
+      with me.expansion_panel(
+        key="pie",
+        title="Pie",
+        description="Type of snack",
+        icon="pie_chart",
+        disabled=False,
+        expanded=state.normal_accordion["pie"],
+        hide_toggle=False,
+        on_toggle=on_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.expansion_panel(
+        key="donut",
+        title="Donut",
+        description="Type of breakfast",
+        icon="donut_large",
+        disabled=False,
+        expanded=state.normal_accordion["donut"],
+        hide_toggle=False,
+        on_toggle=on_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.expansion_panel(
+        key="icecream",
+        title="Ice cream",
+        description="Type of dessert",
+        icon="icecream",
+        disabled=False,
+        expanded=state.normal_accordion["icecream"],
+        hide_toggle=False,
+        on_toggle=on_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+    me.text("Multi Accordion", type="headline-5")
+    with me.box(
+      style=me.Style(display="flex", gap=20, margin=me.Margin(bottom=15)),
+    ):
+      me.button(
+        label="Open All", type="flat", on_click=on_multi_accordion_open_all
+      )
+      me.button(
+        label="Close All", type="flat", on_click=on_multi_accordion_close_all
+      )
+
+    with me.accordion():
+      with me.expansion_panel(
+        key="pie",
+        title="Pie",
+        description="Type of snack",
+        icon="pie_chart",
+        expanded=state.multi_accordion["pie"],
+        on_toggle=on_multi_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.expansion_panel(
+        key="donut",
+        title="Donut",
+        description="Type of breakfast",
+        icon="donut_large",
+        expanded=state.multi_accordion["donut"],
+        on_toggle=on_multi_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+      with me.expansion_panel(
+        key="icecream",
+        title="Ice cream",
+        description="Type of dessert",
+        icon="icecream",
+        expanded=state.multi_accordion["icecream"],
+        on_toggle=on_multi_accordion_toggle,
+      ):
+        me.text(
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+        )
+
+    me.text("Expansion Panel", type="headline-5")
+
+    with me.expansion_panel(
+      key="pie",
+      title="Pie",
+      description="Type of snack",
+      icon="pie_chart",
+    ):
+      me.text(
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
+      )
+
+
+def on_accordion_toggle(e: me.ExpansionPanelToggleEvent):
+  """Implements accordion behavior where only one panel can be open at a time"""
+  state = me.state(State)
+  state.normal_accordion = {"pie": False, "donut": False, "icecream": False}
+  state.normal_accordion[e.key] = e.opened
+
+
+def on_multi_accordion_toggle(e: me.ExpansionPanelToggleEvent):
+  """Implements accordion behavior where multiple panels can be open at a time"""
+  state = me.state(State)
+  state.multi_accordion[e.key] = e.opened
+
+
+def on_multi_accordion_open_all(e: me.ClickEvent):
+  state = me.state(State)
+  for key in state.multi_accordion:
+    state.multi_accordion[key] = True
+
+
+def on_multi_accordion_close_all(e: me.ClickEvent):
+  state = me.state(State)
+  for key in state.multi_accordion:
+    state.multi_accordion[key] = False

grid_table.py

@@ -22,7 +22,7 @@ TODOs:
 
 from dataclasses import dataclass, field
 from datetime import datetime
-from typing import Any, Callable, Literal, Protocol
+from typing import Any, Callable, Literal
 
 import pandas as pd
 
@@ -57,7 +57,12 @@ class State:
   theme: str = "light"
 
 
+def load(e: me.LoadEvent):
+  me.set_theme_mode("system")
+
+
 @me.page(
+  on_load=load,
   security_policy=me.SecurityPolicy(
     allowed_iframe_parents=["https://google.github.io", "https://huggingface.co"]
   ),
@@ -108,17 +113,15 @@ def app():
       ),
       sort_column=state.sort_column,
       sort_direction=state.sort_direction,
-      theme=GridTableThemeLight(striped=True)
-      if state.theme == "light"
-      else GridTableThemeDark(striped=True),
+      theme=GridTableTheme(striped=True),
     )
 
     # Used for demonstrating "table button" click example.
     if state.string_output:
       with me.box(
         style=me.Style(
-          background="#ececec",
-          color="#333",
+          background=me.theme_var("surface-container-high"),
+          color=me.theme_var("on-surface"),
           margin=me.Margin(top=20),
           padding=me.Padding.all(15),
         )
@@ -206,30 +209,16 @@ class GridTableCellMeta:
   value: Any
 
 
-class GridTableTheme(Protocol):
-  """Interface for theming the grid table"""
-
-  def header(self, sortable: bool = False) -> me.Style:
-    return me.Style()
+class GridTableTheme:
+  """This default theme utilizes Mesop's built in dark mode to toggle between dark/light themes."""
 
-  def sort_icon(self, current_column: str, sort_column: str) -> me.Style:
-    return me.Style()
-
-  def cell(self, cell_meta: GridTableCellMeta) -> me.Style:
-    return me.Style()
-
-  def expander(self, df_row_index: int) -> me.Style:
-    return me.Style()
-
-
-class GridTableThemeDark(GridTableTheme):
-  _HEADER_BG: str = "#28313e"
-  _CELL_BG: str = "#141d2c"
-  _CELL_BG_ALT: str = "#02060c"
-  _COLOR: str = "#fff"
+  _HEADER_BG: str = me.theme_var("surface-container-highest")
+  _CELL_BG: str = me.theme_var("surface-container-low")
+  _CELL_BG_ALT: str = me.theme_var("surface-container-lowest")
+  _COLOR: str = me.theme_var("on-surface-variant")
   _PADDING: me.Padding = me.Padding.all(10)
   _BORDER: me.Border = me.Border.all(
-    me.BorderSide(width=1, style="solid", color="rgba(255, 255, 255, 0.16)")
+    me.BorderSide(width=1, style="solid", color=me.theme_var("outline-variant"))
   )
 
   def __init__(self, striped: bool = False):
@@ -246,9 +235,9 @@ class GridTableThemeDark(GridTableTheme):
 
   def sort_icon(self, current_column: str, sort_column: str) -> me.Style:
     return me.Style(
-      color="rgba(255, 255, 255, .8)"
+      color=me.theme_var("outline")
       if sort_column == current_column
-      else "rgba(255, 255, 255, .4)",
+      else me.theme_var("outline-variant"),
       # Hack to make the icon align correctly. Will break if user changes the
       # font size with custom styles.
       height=16,
@@ -273,61 +262,6 @@ class GridTableThemeDark(GridTableTheme):
     )
 
 
-class GridTableThemeLight(GridTableTheme):
-  _HEADER_BG: str = "#fff"
-  _CELL_BG: str = "#fff"
-  _CELL_BG_ALT: str = "#f6f6f6"
-  _COLOR: str = "#000"
-  _PADDING: me.Padding = me.Padding.all(10)
-  _HEADER_BORDER: me.Border = me.Border(
-    bottom=me.BorderSide(width=1, style="solid", color="#b2b2b2")
-  )
-  _CELL_BORDER: me.Border = me.Border(
-    bottom=me.BorderSide(width=1, style="solid", color="#d9d9d9")
-  )
-
-  def __init__(self, striped: bool = False):
-    self.striped = striped
-
-  def header(self, sortable: bool = False) -> me.Style:
-    return me.Style(
-      background=self._HEADER_BG,
-      color=self._COLOR,
-      cursor="pointer" if sortable else "default",
-      font_weight="bold",
-      padding=self._PADDING,
-      border=self._HEADER_BORDER,
-    )
-
-  def sort_icon(self, current_column: str, sort_column: str) -> me.Style:
-    return me.Style(
-      color="rgba(0, 0, 0, .8)"
-      if sort_column == current_column
-      else "rgba(0, 0, 0, .4)",
-      # Hack to make the icon align correctly. Will break if user changes the
-      # font size with custom styles.
-      height=18,
-    )
-
-  def cell(self, cell_meta: GridTableCellMeta) -> me.Style:
-    return me.Style(
-      background=self._CELL_BG_ALT
-      if self.striped and cell_meta.row_index % 2
-      else self._CELL_BG,
-      color=self._COLOR,
-      padding=self._PADDING,
-      border=self._CELL_BORDER,
-    )
-
-  def expander(self, df_row_index: int) -> me.Style:
-    return me.Style(
-      background=self._CELL_BG,
-      color=self._COLOR,
-      padding=self._PADDING,
-      border=self._CELL_BORDER,
-    )
-
-
 def get_data_frame():
   """Helper function to get a sorted/filtered version of the main data frame.
 
@@ -357,6 +291,7 @@ def on_theme_changed(e: me.SelectSelectionChangeEvent):
   """Changes the theme of the grid table"""
   state = me.state(State)
   state.theme = e.value
+  me.set_theme_mode(state.theme)  # type: ignore
 
 
 def on_filter_by_strings(e: me.InputBlurEvent | me.InputEnterEvent):
@@ -432,12 +367,14 @@ def strings_component(meta: GridTableCellMeta):
     on_click=on_click_strings,
     style=me.Style(
       border_radius=3,
-      background="#334053",
+      background=me.theme_var("primary-container"),
       border=me.Border.all(
-        me.BorderSide(width=1, style="solid", color="rgba(255, 255, 255, 0.16)")
+        me.BorderSide(
+          width=1, style="solid", color=me.theme_var("primary-fixed-dim")
+        )
       ),
       font_weight="bold",
-      color="#fff",
+      color=me.theme_var("on-primary-container"),
     ),
   )
 
@@ -506,7 +443,7 @@ def grid_table(
       grid_template_columns=f"repeat({len(data.columns)}, 1fr)",
     )
   ):
-    _theme: GridTableTheme = GridTableThemeLight()
+    _theme: GridTableTheme = GridTableTheme()
     if theme:
       _theme = theme
 

input.py

@@ -23,6 +23,7 @@ def load(e: me.LoadEvent):
   path="/input",
 )
 def app():
-  s = me.state(State)
-  me.input(label="Basic input", on_blur=on_blur)
-  me.text(text=s.input)
+  with me.box(style=me.Style(margin=me.Margin.all(15))):
+    s = me.state(State)
+    me.input(label="Basic input", appearance="outline", on_blur=on_blur)
+    me.text(text=s.input)

llm_rewriter.py

@@ -30,7 +30,7 @@ class State:
 
 
 def load(e: me.LoadEvent):
-  me.set_theme_mode("light")
+  me.set_theme_mode("system")
 
 
 @me.page(

main.py

@@ -24,16 +24,22 @@ import audio as audio
 import autocomplete as autocomplete
 import badge as badge
 import basic_animation as basic_animation
+import bootstrap as bootstrap
 import box as box
 import button as button
+import button_toggle as button_toggle
+import card as card
 import chat as chat
 import chat_inputs as chat_inputs
 import checkbox as checkbox
 import code_demo as code_demo  # cannot call it code due to python library naming conflict
+import date_picker as date_picker
+import date_range_picker as date_range_picker
 import density as density
 import dialog as dialog
 import divider as divider
 import embed as embed
+import expansion_panel as expansion_panel
 import fancy_chat as fancy_chat
 import feedback as feedback
 import form_billing as form_billing
@@ -59,6 +65,7 @@ import slide_toggle as slide_toggle
 import slider as slider
 import snackbar as snackbar
 import table as table
+import tailwind as tailwind
 import text as text
 import text_to_image as text_to_image
 import text_to_text as text_to_text
@@ -123,6 +130,13 @@ FIRST_SECTIONS = [
       Example(name="feedback"),
     ],
   ),
+  Section(
+    name="Integrations",
+    examples=[
+      Example(name="bootstrap"),
+      Example(name="tailwind"),
+    ],
+  ),
 ]
 
 COMPONENTS_SECTIONS = [
@@ -154,7 +168,10 @@ COMPONENTS_SECTIONS = [
     examples=[
       Example(name="autocomplete"),
       Example(name="button"),
+      Example(name="button_toggle"),
       Example(name="checkbox"),
+      Example(name="date_picker"),
+      Example(name="date_range_picker"),
       Example(name="input"),
       Example(name="textarea"),
       Example(name="radio"),
@@ -168,7 +185,9 @@ COMPONENTS_SECTIONS = [
     name="Visual",
     examples=[
       Example(name="badge"),
+      Example(name="card"),
       Example(name="divider"),
+      Example(name="expansion_panel"),
       Example(name="icon"),
       Example(name="progress_bar"),
       Example(name="progress_spinner"),

requirements.txt

@@ -1,7 +1,7 @@
-mesop>=0.10.0
+mesop>=0.13.0
 Flask==3.0.0
 gunicorn==22.0.0
-Werkzeug==3.0.1
+Werkzeug==3.0.6
 # For examples:
 matplotlib
 numpy