1010from reflex_ui .components .base_ui import PACKAGE_NAME , BaseUIComponent
1111
1212LiteralOrientation = Literal ["horizontal" , "vertical" ]
13+ LiteralTabsSize = Literal ["sm" , "md" , "lg" ]
1314
1415
1516class ClassNames :
1617 """Class names for tabs components."""
1718
1819 ROOT = "flex flex-col gap-2"
19- LIST = "bg-secondary-3 inline-flex gap-1 p-1 items-center justify-start rounded-ui-md relative z-0"
20- TAB = "h-7 px-1.5 rounded-ui-sm justify-center items-center gap-1.5 inline-flex text-sm font-medium text-secondary-11 cursor-pointer z-[1] hover:text-secondary-12 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8"
21- INDICATOR = "absolute top-1/2 left-0 - z-1 h-7 w-(--active-tab-width) - translate-y-1/2 translate- x-(--active-tab-left) rounded-ui-sm bg-secondary-1 shadow-small transition-all duration-200 ease-in-out "
20+ LIST = "bg-secondary-1 inline-flex items-center justify-start relative z-0 shadow-button-outline dark:border dark:border-secondary-4 "
21+ TAB = "justify-center items-center inline-flex font-medium text-secondary-11 cursor-pointer z-[1] hover:text-primary-9 transition-color text-nowrap data-[active]:text-secondary-12 data-[disabled]:cursor-not-allowed data-[disabled]:text-secondary-8 text-sm "
22+ INDICATOR = "absolute left-0 inset-y-0 my-0.5 - z-1 w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200 ease-in-out dark: shadow-[0_1px_0_0_rgba(255,255,255,0.08)_inset] bg-white dark:bg-secondary-3 text-secondary-12 shadow-button-outline "
2223 PANEL = "flex flex-col gap-2"
24+ SIZES = {
25+ "list" : {
26+ "sm" : "p-0.5 rounded-ui-md gap-0.5" ,
27+ "md" : "p-0.5 rounded-ui-md gap-0.5" ,
28+ "lg" : "p-0.5 rounded-ui-md gap-0.5" ,
29+ },
30+ "tab" : {
31+ "sm" : "h-7 px-1.5 rounded-ui-sm gap-1" ,
32+ "md" : "h-8 px-2 rounded-ui-sm gap-1.5" ,
33+ "lg" : "h-9 px-2.5 rounded-ui-sm gap-2" ,
34+ },
35+ "indicator" : {
36+ "sm" : "rounded-ui-sm" ,
37+ "md" : "rounded-ui-sm" ,
38+ "lg" : "rounded-ui-sm" ,
39+ },
40+ }
2341
2442
2543class TabsBaseComponent (BaseUIComponent ):
@@ -72,13 +90,24 @@ class TabsList(TabsBaseComponent):
7290 # 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.
7391 loop_focus : Var [bool ]
7492
93+ # The size of the tabs list. Defaults to "sm".
94+ size : Var [LiteralTabsSize ]
95+
7596 @classmethod
7697 def create (cls , * children , ** props ) -> BaseUIComponent :
77- """Create the tabs list component."""
98+ """Create the tabs list component.
99+
100+ Returns:
101+ The component.
102+ """
103+ size = props .pop ("size" , "sm" )
78104 props ["data-slot" ] = "tabs-list"
79- cls .set_class_name (ClassNames .LIST , props )
105+ cls .set_class_name (f" { ClassNames .LIST } { ClassNames . SIZES [ 'list' ][ size ] } " props )
80106 return super ().create (* children , ** props )
81107
108+ def _exclude_props (self ) -> list [str ]:
109+ return [* super ()._exclude_props (), "size" ]
110+
82111
83112class TabsTab (TabsBaseComponent ):
84113 """An individual interactive tab button that toggles the corresponding panel. Renders a <button> element."""
@@ -97,13 +126,24 @@ class TabsTab(TabsBaseComponent):
97126 # The render prop
98127 render_ : Var [Component ]
99128
129+ # The size of the tab. Defaults to "sm".
130+ size : Var [LiteralTabsSize ]
131+
100132 @classmethod
101133 def create (cls , * children , ** props ) -> BaseUIComponent :
102- """Create the tabs tab component."""
134+ """Create the tabs tab component.
135+
136+ Returns:
137+ The component.
138+ """
139+ size = props .pop ("size" , "sm" )
103140 props ["data-slot" ] = "tabs-tab"
104- cls .set_class_name (ClassNames .TAB , props )
141+ cls .set_class_name (f" { ClassNames .TAB } { ClassNames . SIZES [ 'tab' ][ size ] } " props )
105142 return super ().create (* children , ** props )
106143
144+ def _exclude_props (self ) -> list [str ]:
145+ return [* super ()._exclude_props (), "size" ]
146+
107147
108148class TabsIndicator (TabsBaseComponent ):
109149 """A visual indicator that can be styled to match the position of the currently active tab. Renders a <span> element."""
@@ -116,13 +156,26 @@ class TabsIndicator(TabsBaseComponent):
116156 # The render prop
117157 render_ : Var [Component ]
118158
159+ # The size of the indicator. Defaults to "sm".
160+ size : Var [LiteralTabsSize ]
161+
119162 @classmethod
120163 def create (cls , * children , ** props ) -> BaseUIComponent :
121- """Create the tabs indicator component."""
164+ """Create the tabs indicator component.
165+
166+ Returns:
167+ The component.
168+ """
169+ size = props .pop ("size" , "sm" )
122170 props ["data-slot" ] = "tabs-indicator"
123- cls .set_class_name (ClassNames .INDICATOR , props )
171+ cls .set_class_name (
172+ f"{ ClassNames .INDICATOR } { ClassNames .SIZES ['indicator' ][size ]} , props
173+ )
124174 return super ().create (* children , ** props )
125175
176+ def _exclude_props (self ) -> list [str ]:
177+ return [* super ()._exclude_props (), "size" ]
178+
126179
127180class TabsPanel (TabsBaseComponent ):
128181 """A panel displayed when the corresponding tab is active. Renders a <div> element."""
0 commit comments