diff --git a/reflex/components/radix/themes/components/tabs.py b/reflex/components/radix/themes/components/tabs.py index b0a169741..af1b6b521 100644 --- a/reflex/components/radix/themes/components/tabs.py +++ b/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.""" diff --git a/reflex/components/radix/themes/components/tabs.pyi b/reflex/components/radix/themes/components/tabs.pyi index e05281f50..a8243554f 100644 --- a/reflex/components/radix/themes/components/tabs.pyi +++ b/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. """ ...