ENG-6543: Toggle group component (#21)

Author: carlosabadia

.pre-commit-config.yaml

@@ -1,14 +1,14 @@
 fail_fast: true
 
 repos:
-  - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: v0.11.9
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.12.2
     hooks:
-      - id: ruff-format
-        files: ^reflex_ui/
-      - id: ruff
+      - id: ruff-check
         files: ^reflex_ui/
         args: ["--fix", "--exit-non-zero-on-fix", "--no-unsafe-fixes"]
+      - id: ruff-format
+        files: ^reflex_ui/
 
   - repo: https://github.com/codespell-project/codespell
     rev: v2.4.1
@@ -17,7 +17,7 @@ repos:
         files: ^reflex_ui/
 
   - repo: https://github.com/RobertCraigie/pyright-python
-    rev: v1.1.402
+    rev: v1.1.403
     hooks:
       - id: pyright
         files: ^reflex_ui/

pyproject.toml

@@ -20,7 +20,7 @@ bump = true
 metadata = false
 
 [dependency-groups]
-dev = ["pyright==1.1.402", "pre-commit"]
+dev = ["pyright==1.1.403", "pre-commit"]
 
 [tool.codespell]
 skip = "*.pyi, uv.lock"

reflex_ui/__init__.py

@@ -19,6 +19,7 @@
     "components.base.switch": ["switch"],
     "components.base.tabs": ["tabs"],
     "components.base.theme_switcher": ["theme_switcher"],
+    "components.base.toggle_group": ["toggle_group"],
     "components.base.toggle": ["toggle"],
     "components.base.tooltip": ["tooltip"],
 }

reflex_ui/components/base/toggle_group.py

@@ -0,0 +1,69 @@
+"""Custom toggle group component."""
+
+from typing import Literal
+
+from reflex.components.component import Component
+from reflex.event import EventHandler, passthrough_event_spec
+from reflex.utils.imports import ImportVar
+from reflex.vars import Var
+
+from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
+
+LiteralOrientation = Literal["horizontal", "vertical"]
+
+
+class ClassNames:
+    """Class names for toggle group components."""
+
+    ROOT = "inline-flex items-center gap-1 p-1 rounded-md bg-secondary-3 data-[orientation=vertical]:flex-col data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+
+
+class ToggleGroupBaseComponent(BaseUIComponent):
+    """Base component for toggle group components."""
+
+    library = f"{PACKAGE_NAME}/toggle-group"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the toggle group component."""
+        return ImportVar(tag="ToggleGroup", package_path="", install=False)
+
+
+class ToggleGroupRoot(ToggleGroupBaseComponent):
+    """Provides a shared state to a series of toggle buttons."""
+
+    tag = "ToggleGroup"
+
+    # The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of value.
+    default_value: Var[list[str | int]]
+
+    # The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of default_value.
+    value: Var[list[str | int]]
+
+    # Callback fired when the pressed states of the toggle group changes.
+    on_value_change: EventHandler[passthrough_event_spec(list[str | int], dict)]
+
+    # When false only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When true multiple items can be pressed. Defaults to False.
+    toggle_multiple: Var[bool]
+
+    # Whether the toggle group should ignore user interaction. Defaults to False.
+    disabled: Var[bool]
+
+    # Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. Defaults to True.
+    loop: Var[bool]
+
+    # The component orientation (layout flow direction). Defaults to "horizontal".
+    orientation: Var[LiteralOrientation]
+
+    # The render prop
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the toggle group root component."""
+        props["data-slot"] = "toggle-group"
+        cls.set_class_name(ClassNames.ROOT, props)
+        return super().create(*children, **props)
+
+
+toggle_group = ToggleGroupRoot.create