minor update to callout (#2466)

* minor update to callout

* pyi changes

---------

Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>

reflex/components/radix/themes/components/__init__.py

@@ -13,7 +13,7 @@ from .aspectratio import AspectRatio
 from .avatar import Avatar
 from .badge import Badge
 from .button import Button
-from .callout import CalloutIcon, CalloutRoot, CalloutText
+from .callout import Callout, CalloutIcon, CalloutRoot, CalloutText
 from .card import Card
 from .checkbox import Checkbox, HighLevelCheckbox
 from .contextmenu import (
@@ -103,6 +103,7 @@ button = Button.create
 callout_root = CalloutRoot.create
 callout_icon = CalloutIcon.create
 callout_text = CalloutText.create
+callout = Callout.create
 
 # Card
 card = Card.create

reflex/components/radix/themes/components/callout.py

@@ -10,10 +10,11 @@ from reflex.vars import Var
 from ..base import (
     CommonMarginProps,
     LiteralAccentColor,
-    LiteralVariant,
     RadixThemesComponent,
 )
 
+CalloutVariant = Literal["soft", "surface", "outline"]
+
 
 class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
@@ -23,11 +24,11 @@ class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
     # Change the default rendered element for the one passed as a child, merging their props and behavior.
     as_child: Var[bool]
 
-    # Button size "1" - "4"
+    # Size "1" - "3"
     size: Var[Literal["1", "2", "3"]]
 
-    # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[LiteralVariant]
+    # Variant of button: "soft" | "surface" | "outline"
+    variant: Var[CalloutVariant]
 
     # Override theme color for button
     color: Var[LiteralAccentColor]
@@ -75,6 +76,3 @@ class Callout(CalloutRoot):
             CalloutText.create(text),
             **props,
         )
-
-
-callout = Callout.create

reflex/components/radix/themes/components/callout.pyi

@@ -13,12 +13,9 @@ from reflex import el
 from reflex.components.component import Component
 from reflex.components.radix.themes.components.icons import Icon
 from reflex.vars import Var
-from ..base import (
-    CommonMarginProps,
-    LiteralAccentColor,
-    LiteralVariant,
-    RadixThemesComponent,
-)
+from ..base import CommonMarginProps, LiteralAccentColor, RadixThemesComponent
+
+CalloutVariant = Literal["soft", "surface", "outline"]
 
 class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
     @overload
@@ -95,8 +92,8 @@ class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+                Var[Literal["soft", "surface", "outline"]],
+                Literal["soft", "surface", "outline"],
             ]
         ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
@@ -248,8 +245,8 @@ class CalloutRoot(el.Div, CommonMarginProps, RadixThemesComponent):
             color: map to CSS default color property.
             color_scheme: map to radix color property.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            size: Button size "1" - "4"
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            size: Size "1" - "3"
+            variant: Variant of button: "soft" | "surface" | "outline"
             high_contrast: Whether to render the button with higher contrast color against background
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
@@ -808,8 +805,8 @@ class Callout(CalloutRoot):
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+                Var[Literal["soft", "surface", "outline"]],
+                Literal["soft", "surface", "outline"],
             ]
         ] = None,
         color: Optional[
@@ -1020,8 +1017,8 @@ class Callout(CalloutRoot):
             text: The text of the callout.
             icon: The icon of the callout.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            size: Button size "1" - "4"
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            size: Size "1" - "3"
+            variant: Variant of button: "soft" | "surface" | "outline"
             color: Override theme color for button
             high_contrast: Whether to render the button with higher contrast color against background
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
@@ -1060,5 +1057,3 @@ class Callout(CalloutRoot):
             The callout component.
         """
         ...
-
-callout = Callout.create