reflex 0.4.9a1__py3-none-any.whl → 0.5.0__py3-none-any.whl

reflex/components/radix/themes/color_mode.pyi

@@ -8,13 +8,15 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 import dataclasses
+from typing import Literal, get_args
 from reflex.components.component import BaseComponent
-from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.components.core.cond import Cond, color_mode_cond, cond
 from reflex.components.lucide.icon import Icon
+from reflex.components.radix.themes.components.switch import Switch
 from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
-from reflex.vars import BaseVar
-from .components.button import Button
-from .components.switch import Switch
+from reflex.utils import console
+from reflex.vars import BaseVar, Var
+from .components.icon_button import IconButton
 
 DEFAULT_LIGHT_ICON: Icon
 DEFAULT_DARK_ICON: Icon
@@ -92,26 +94,33 @@ class ColorModeIcon(Cond):
         """
         ...
 
-class ColorModeSwitch(Switch):
+LiteralPosition = Literal["top-left", "top-right", "bottom-left", "bottom-right"]
+position_values = get_args(LiteralPosition)
+position_map = {
+    "position": position_values,
+    "left": ["top-left", "bottom-left"],
+    "right": ["top-right", "bottom-right"],
+    "top": ["top-left", "top-right"],
+    "bottom": ["bottom-left", "bottom-right"],
+}
+
+class ColorModeIconButton(IconButton):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
+        position: Optional[
+            Literal["top-left", "top-right", "bottom-left", "bottom-right"]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = None,
         size: Optional[
-            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["classic", "surface", "soft"]],
-                Literal["classic", "surface", "soft"],
+                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
             ]
         ] = None,
         color_scheme: Optional[
@@ -179,9 +188,76 @@ class ColorModeSwitch(Switch):
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
-                Var[Literal["none", "small", "full"]], Literal["none", "small", "full"]
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
             ]
         ] = None,
+        auto_focus: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        form_action: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_enc_type: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_method: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_no_validate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        form_target: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        value: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        loading: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -191,9 +267,6 @@ class ColorModeSwitch(Switch):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
-        on_change: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -237,23 +310,46 @@ class ColorModeSwitch(Switch):
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
         **props
-    ) -> "ColorModeSwitch":
-        """Create a switch component bound to color_mode.
+    ) -> "ColorModeIconButton":
+        """Create a icon button component that calls toggle_color_mode on click.
 
         Args:
             *children: The children of the component.
+            position: The position of the icon button. Follow document flow if None.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
-            default_checked: Whether the switch is checked by default
-            checked: Whether the switch is checked
-            disabled: If true, prevent the user from interacting with the switch
-            required: If true, the user must interact with the switch to submit the form
-            name: The name of the switch (when submitting a form)
-            value: The value associated with the "on" position
-            size: Switch size "1" - "4"
-            variant: Variant of switch: "classic" | "surface" | "soft"
-            color_scheme: Override theme color for switch
-            high_contrast: Whether to render the switch with higher contrast color against background
-            radius: Override theme radius for switch: "none" | "small" | "full"
+            size: Button size "1" - "4"
+            variant: Variant of button: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost"
+            color_scheme: Override theme color for button
+            high_contrast: Whether to render the button with higher contrast color against background
+            radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
+            auto_focus: Automatically focuses the button when the page loads
+            disabled: Disables the button
+            form: Associates the button with a form (by id)
+            form_action: URL to send the form data to (for type="submit" buttons)
+            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
+            form_method: HTTP method to use for sending form data (for type="submit" buttons)
+            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
+            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
+            name: Name of the button, used when sending form data
+            type: Type of the button (submit, reset, or button)
+            value: Value of the button, used when sending form data
+            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.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            loading: If set, show an rx.spinner instead of the component children.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -263,24 +359,30 @@ class ColorModeSwitch(Switch):
             **props: The props to pass to the component.
 
         Returns:
-            The switch component.
+            The button component.
         """
         ...
 
-class ColorModeButton(Button):
+class ColorModeSwitch(Switch):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        checked: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        value: Optional[Union[Var[str], str]] = None,
         size: Optional[
-            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
         variant: Optional[
             Union[
-                Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "solid", "soft", "surface", "outline", "ghost"],
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
             ]
         ] = None,
         color_scheme: Optional[
@@ -348,75 +450,9 @@ class ColorModeButton(Button):
         high_contrast: Optional[Union[Var[bool], bool]] = None,
         radius: Optional[
             Union[
-                Var[Literal["none", "small", "medium", "large", "full"]],
-                Literal["none", "small", "medium", "large", "full"],
+                Var[Literal["none", "small", "full"]], Literal["none", "small", "full"]
             ]
         ] = None,
-        auto_focus: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        form: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        form_action: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_enc_type: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_method: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_no_validate: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        form_target: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        name: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        type: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        value: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        access_key: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        auto_capitalize: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        content_editable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        context_menu: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        draggable: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        enter_key_hint: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        hidden: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        input_mode: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        item_prop: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
-        spell_check: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        tab_index: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
-        title: Optional[
-            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
-        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -426,6 +462,9 @@ class ColorModeButton(Button):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -469,44 +508,23 @@ class ColorModeButton(Button):
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
         **props
-    ) -> "ColorModeButton":
-        """Create a button component that calls toggle_color_mode on click.
+    ) -> "ColorModeSwitch":
+        """Create a switch component bound to color_mode.
 
         Args:
             *children: The children of the component.
             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"
-            color_scheme: Override theme color for button
-            high_contrast: Whether to render the button with higher contrast color against background
-            radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
-            auto_focus: Automatically focuses the button when the page loads
-            disabled: Disables the button
-            form: Associates the button with a form (by id)
-            form_action: URL to send the form data to (for type="submit" buttons)
-            form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons)
-            form_method: HTTP method to use for sending form data (for type="submit" buttons)
-            form_no_validate: Bypasses form validation when submitting (for type="submit" buttons)
-            form_target: Specifies where to display the response after submitting the form (for type="submit" buttons)
-            name: Name of the button, used when sending form data
-            type: Type of the button (submit, reset, or button)
-            value: Value of the button, used when sending form data
-            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.
-            content_editable: Indicates whether the element's content is editable.
-            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
-            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
-            draggable: Defines whether the element can be dragged.
-            enter_key_hint: Hints what media types the media element is able to play.
-            hidden: Defines whether the element is hidden.
-            input_mode: Defines the type of the element.
-            item_prop: Defines the name of the element for metadata purposes.
-            lang: Defines the language used in the element.
-            role: Defines the role of the element.
-            slot: Assigns a slot in a shadow DOM shadow tree to an element.
-            spell_check: Defines whether the element may be checked for spelling errors.
-            tab_index: Defines the position of the current element in the tabbing order.
-            title: Defines a tooltip for the element.
+            default_checked: Whether the switch is checked by default
+            checked: Whether the switch is checked
+            disabled: If true, prevent the user from interacting with the switch
+            required: If true, the user must interact with the switch to submit the form
+            name: The name of the switch (when submitting a form)
+            value: The value associated with the "on" position
+            size: Switch size "1" - "4"
+            variant: Variant of switch: "classic" | "surface" | "soft"
+            color_scheme: Override theme color for switch
+            high_contrast: Whether to render the switch with higher contrast color against background
+            radius: Override theme radius for switch: "none" | "small" | "full"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -516,13 +534,13 @@ class ColorModeButton(Button):
             **props: The props to pass to the component.
 
         Returns:
-            The button component.
+            The switch component.
         """
         ...
 
 class ColorModeNamespace(BaseVar):
     icon = staticmethod(ColorModeIcon.create)
+    button = staticmethod(ColorModeIconButton.create)
     switch = staticmethod(ColorModeSwitch.create)
-    button = staticmethod(ColorModeButton.create)
 
 color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))

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

@@ -8,7 +8,10 @@ from .button import button as button
 from .callout import callout as callout
 from .card import card as card
 from .checkbox import checkbox as checkbox
+from .checkbox_cards import checkbox_cards as checkbox_cards
+from .checkbox_group import checkbox_group as checkbox_group
 from .context_menu import context_menu as context_menu
+from .data_list import data_list as data_list
 from .dialog import dialog as dialog
 from .dropdown_menu import dropdown_menu as dropdown_menu
 from .dropdown_menu import menu as menu
@@ -16,13 +19,18 @@ from .hover_card import hover_card as hover_card
 from .icon_button import icon_button as icon_button
 from .inset import inset as inset
 from .popover import popover as popover
+from .progress import progress as progress
+from .radio_cards import radio_cards as radio_cards
 from .radio_group import radio as radio
 from .radio_group import radio_group as radio_group
 from .scroll_area import scroll_area as scroll_area
+from .segmented_control import segmented_control as segmented_control
 from .select import select as select
 from .separator import divider as divider
 from .separator import separator as separator
+from .skeleton import skeleton as skeleton
 from .slider import slider as slider
+from .spinner import spinner as spinner
 from .switch import switch as switch
 from .table import table as table
 from .tabs import tabs as tabs
@@ -41,7 +49,10 @@ __all__ = [
     "callout",
     "card",
     "checkbox",
+    "checkbox_cards",
+    "checkbox_group",
     "context_menu",
+    "data_list",
     "dialog",
     "divider",
     "dropdown_menu",
@@ -51,12 +62,18 @@ __all__ = [
     "inset",
     "menu",
     "popover",
+    # progress is in experimental namespace until https://github.com/radix-ui/themes/pull/492
+    # "progress",
     "radio",
+    "radio_cards",
     "radio_group",
     "scroll_area",
+    "segmented_control",
     "select",
     "separator",
+    "skeleton",
     "slider",
+    "spinner",
     "switch",
     "table",
     "tabs",

reflex/components/radix/themes/components/badge.py

@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex import el
@@ -20,7 +21,7 @@ class Badge(el.Span, RadixThemesComponent):
     variant: Var[Literal["solid", "soft", "surface", "outline"]]
 
     # The size of the badge
-    size: Var[Literal["1", "2"]]
+    size: Var[Literal["1", "2", "3"]]
 
     # Color theme of the badge
     color_scheme: Var[LiteralAccentColor]

reflex/components/radix/themes/components/badge.pyi

@@ -24,7 +24,9 @@ class Badge(el.Span, RadixThemesComponent):
                 Literal["solid", "soft", "surface", "outline"],
             ]
         ] = None,
-        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[

reflex/components/radix/themes/components/button.py

@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex import el
@@ -8,13 +9,14 @@ from ..base import (
     LiteralAccentColor,
     LiteralRadius,
     LiteralVariant,
+    RadixLoadingProp,
     RadixThemesComponent,
 )
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
-class Button(el.Button, RadixThemesComponent):
+class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
     tag = "Button"

reflex/components/radix/themes/components/button.pyi

@@ -14,12 +14,13 @@ from ..base import (
     LiteralAccentColor,
     LiteralRadius,
     LiteralVariant,
+    RadixLoadingProp,
     RadixThemesComponent,
 )
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
-class Button(el.Button, RadixThemesComponent):
+class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -169,6 +170,7 @@ class Button(el.Button, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        loading: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -262,6 +264,7 @@ class Button(el.Button, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
+            loading: If set, show an rx.spinner instead of the component children.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/checkbox_cards.py

@@ -0,0 +1,48 @@
+"""Components for the Radix CheckboxCards component."""
+
+from types import SimpleNamespace
+from typing import Literal, Union
+
+from reflex.vars import Var
+
+from ..base import LiteralAccentColor, RadixThemesComponent
+
+
+class CheckboxCardsRoot(RadixThemesComponent):
+    """Root element for a CheckboxCards component."""
+
+    tag = "CheckboxCards.Root"
+
+    # The size of the checkbox cards: "1" | "2" | "3"
+    size: Var[Literal["1", "2", "3"]]
+
+    # Variant of button: "classic" | "surface" | "soft"
+    variant: Var[Literal["classic", "surface"]]
+
+    # Override theme color for button
+    color_scheme: Var[LiteralAccentColor]
+
+    # Uses a higher contrast color for the component.
+    high_contrast: Var[bool]
+
+    # The number of columns:
+    columns: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]
+
+    # The gap between the checkbox cards:
+    gap: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]
+
+
+class CheckboxCardsItem(RadixThemesComponent):
+    """An item in the CheckboxCards component."""
+
+    tag = "CheckboxCards.Item"
+
+
+class CheckboxCards(SimpleNamespace):
+    """CheckboxCards components namespace."""
+
+    root = staticmethod(CheckboxCardsRoot.create)
+    item = staticmethod(CheckboxCardsItem.create)
+
+
+checkbox_cards = CheckboxCards()