bump components

Author: carlosabadia

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.14.11
+    rev: v0.14.13
     hooks:
       - id: ruff-check
         files: ^reflex_ui/

demo/demo/demo.py

@@ -3,8 +3,6 @@
 import reflex as rx
 
 import reflex_ui as ui
-from reflex_ui.blocks.demo_form import demo_form_dialog
-from reflex_ui.blocks.telemetry.default import get_default_telemetry_script
 
 
 class State(rx.State):
@@ -17,7 +15,46 @@ def set_seed(self, seed: int):
 
 def index() -> rx.Component:
     return rx.el.div(
-        demo_form_dialog(ui.button("Test")),
+        rx.el.div(
+            ui.tooltip(
+                ui.button(
+                    ui.icon("SmileIcon"),
+                    "Click me",
+                    on_click=rx.toast.success(
+                        "You are cool :)",
+                        position="top-center",
+                    ),
+                ),
+                content="Seriously, click me",
+            ),
+            ui.checkbox(
+                label="Click me",
+                on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
+            ),
+            ui.slider(
+                value=State.seed,
+                on_value_change=State.set_seed,
+                on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
+                class_name="max-w-xs",
+            ),
+            ui.gradient_profile(
+                seed=State.seed,
+                class_name="size-10",
+            ),
+            ui.switch(
+                on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
+            ),
+            ui.select(
+                items=[f"Item {i}" for i in range(1, 11)],
+                name="select",
+                placeholder="Hello",
+                on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
+                on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
+            ),
+            class_name="flex flex-col gap-y-6 justify-center items-center",
+        ),
+        ui.theme_switcher(class_name="absolute top-4 right-4"),
+        class_name="flex flex-row gap-16 justify-center items-center h-screen bg-secondary-1 relative font-sans",
     )
 
 
@@ -41,7 +78,6 @@ def index() -> rx.Component:
             href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400..700&display=swap",
             rel="stylesheet",
         ),
-        get_default_telemetry_script(),
     ],
 )
 app.add_page(index)

demo/requirements.txt

@@ -1 +1 @@
-reflex==0.8.25
+reflex==0.8.26

reflex_ui/components/base/select.py

@@ -160,6 +160,9 @@ class SelectValue(SelectBaseComponent):
 
     tag = "Select.Value"
 
+    # Placeholder text to display when no item is selected.
+    placeholder: Var[str]
+
     # The render prop
     render_: Var[Component]
 
@@ -467,7 +470,8 @@ class HighLevelSelect(SelectRoot):
     size: Var[LiteralSelectSize]
 
     # Props for different component parts
-    _trigger_props = {"placeholder", "size"}
+    _trigger_props = {"size"}
+    _value_props = {"placeholder"}
     _items_props = {"items"}
     _positioner_props = {
         "align",
@@ -497,6 +501,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
         """
         # Extract props for different parts
         trigger_props = {k: props.pop(k) for k in cls._trigger_props & props.keys()}
+        value_props = {k: props.pop(k) for k in cls._value_props & props.keys()}
         items_props = {k: props.pop(k) for k in cls._items_props & props.keys()}
         positioner_props = {
             k: props.pop(k) for k in cls._positioner_props & props.keys()
@@ -555,7 +560,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
         return SelectRoot.create(
             SelectTrigger.create(
                 render_=button(
-                    SelectValue.create(),
+                    SelectValue.create(**value_props),
                     SelectIcon.create(
                         select_arrow(class_name="size-4 text-secondary-9")
                     ),

reflex_ui/components/base/select.pyi

@@ -187,6 +187,7 @@ class SelectValue(SelectBaseComponent):
     def create(
         cls,
         *children,
+        placeholder: Var[str] | str | None = None,
         render_: Component | Var[Component] | None = None,
         unstyled: Var[bool] | bool | None = None,
         style: Sequence[Mapping[str, Any]]

reflex_ui/components/base/switch.py

@@ -34,6 +34,9 @@ class SwitchRoot(SwitchBaseComponent):
     # Identifies the field when a form is submitted.
     name: Var[str]
 
+    # The value of the switch when it is checked. Used for form submission. Defaults to 'on'.
+    value: Var[str]
+
     # Whether the switch is initially active. To render a controlled switch, use the checked prop instead. Defaults to False.
     default_checked: Var[bool]
 

reflex_ui/components/base/switch.pyi

@@ -76,6 +76,7 @@ class SwitchRoot(SwitchBaseComponent):
         cls,
         *children,
         name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
         default_checked: Var[bool] | bool | None = None,
         checked: Var[bool] | bool | None = None,
         native_button: Var[bool] | bool | None = None,
@@ -160,6 +161,7 @@ class HighLevelSwitch(SwitchRoot):
         cls,
         *children,
         name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
         default_checked: Var[bool] | bool | None = None,
         checked: Var[bool] | bool | None = None,
         native_button: Var[bool] | bool | None = None,
@@ -204,6 +206,7 @@ class HighLevelSwitch(SwitchRoot):
         Args:
             *children: Additional children to include in the switch.
             name: Identifies the field when a form is submitted.
+            value: The value of the switch when it is checked. Used for form submission. Defaults to 'on'.
             default_checked: Whether the switch is initially active. To render a controlled switch, use the checked prop instead. Defaults to False.
             checked: Whether the switch is currently active. To render an uncontrolled switch, use the default_checked prop instead.
             on_checked_change: Event handler called when the switch is activated or deactivated.
@@ -236,6 +239,7 @@ class Switch(ComponentNamespace):
     def __call__(
         *children,
         name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
         default_checked: Var[bool] | bool | None = None,
         checked: Var[bool] | bool | None = None,
         native_button: Var[bool] | bool | None = None,
@@ -280,6 +284,7 @@ class Switch(ComponentNamespace):
         Args:
             *children: Additional children to include in the switch.
             name: Identifies the field when a form is submitted.
+            value: The value of the switch when it is checked. Used for form submission. Defaults to 'on'.
             default_checked: Whether the switch is initially active. To render a controlled switch, use the checked prop instead. Defaults to False.
             checked: Whether the switch is currently active. To render an uncontrolled switch, use the default_checked prop instead.
             on_checked_change: Event handler called when the switch is activated or deactivated.

reflex_ui/components/base_ui.py

@@ -5,7 +5,7 @@
 from reflex_ui.components.component import CoreComponent
 
 PACKAGE_NAME = "@base-ui/react"
-PACKAGE_VERSION = "1.0.0"
+PACKAGE_VERSION = "1.1.0"
 
 
 class BaseUIComponent(CoreComponent):

reflex_ui/components/base_ui.pyi

@@ -13,7 +13,7 @@ from reflex.vars.base import Var
 from reflex_ui.components.component import CoreComponent
 
 PACKAGE_NAME = "@base-ui/react"
-PACKAGE_VERSION = "1.0.0"
+PACKAGE_VERSION = "1.1.0"
 
 class BaseUIComponent(CoreComponent):
     @classmethod

reflex_ui/components/icons/hugeicon.py

@@ -10,7 +10,7 @@
 class HugeIcon(CoreComponent):
     """A HugeIcon component."""
 
-    library = "@hugeicons/react@1.1.3"
+    library = "@hugeicons/react@1.1.4"
 
     tag = "HugeiconsIcon"
 
@@ -51,7 +51,7 @@ def create(cls, *children, **props) -> Component:
                     icon_name,
                     _var_data=VarData(
                         imports={
-                            "@hugeicons/core-free-icons@3.1.0": ImportVar(tag=icon_name)
+                            "@hugeicons/core-free-icons@3.1.1": ImportVar(tag=icon_name)
                         }
                     ),
                 )