Expose `color_scheme` on TabsTrigger (#3112)

reflex/components/radix/themes/components/tabs.py

@@ -1,11 +1,14 @@
 """Interactive components provided by @radix-ui/themes."""
+from __future__ import annotations
+
 from typing import Any, Dict, List, Literal
 
-from reflex.components.component import ComponentNamespace
+from reflex.components.component import Component, ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 from ..base import (
+    LiteralAccentColor,
     RadixThemesComponent,
 )
 
@@ -59,8 +62,30 @@ class TabsTrigger(RadixThemesComponent):
     # Whether the tab is disabled
     disabled: Var[bool]
 
+    # The color of the line under the tab when active.
+    color_scheme: Var[LiteralAccentColor]
+
     _valid_parents: List[str] = ["TabsList"]
 
+    @classmethod
+    def create(self, *children, **props) -> Component:
+        """Create a TabsTrigger component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The TabsTrigger Component.
+        """
+        if "color_scheme" in props:
+            custom_attrs = props.setdefault("custom_attrs", {})
+            custom_attrs["data-accent-color"] = props["color_scheme"]
+        return super().create(*children, **props)
+
+    def _exclude_props(self) -> list[str]:
+        return ["color_scheme"]
+
 
 class TabsContent(RadixThemesComponent):
     """Contains the content associated with each trigger."""

reflex/components/radix/themes/components/tabs.pyi

@@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Literal
-from reflex.components.component import ComponentNamespace
+from reflex.components.component import Component, ComponentNamespace
 from reflex.constants import EventTriggers
 from reflex.vars import Var
-from ..base import RadixThemesComponent
+from ..base import LiteralAccentColor, RadixThemesComponent
 
 class TabsRoot(RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
@@ -196,6 +196,68 @@ class TabsTrigger(RadixThemesComponent):
         *children,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
+        color_scheme: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -249,25 +311,23 @@ class TabsTrigger(RadixThemesComponent):
         ] = None,
         **props
     ) -> "TabsTrigger":
-        """Create a new component instance.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
+        """Create a TabsTrigger component.
 
         Args:
-            *children: Child components.
+            *children: The children of the component.
             value: The value of the tab. Must be unique for each tab.
             disabled: Whether the tab is disabled
+            color_scheme: The color of the line under the tab when active.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: Component properties.
+            **props: The properties of the component.
 
         Returns:
-            A new component instance.
+            The TabsTrigger Component.
         """
         ...