laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF-668] Wrap MyApp with radix Theme component (#1867)

Browse Source 
* partly add some radix-ui/themes based components

* add @radix-ui/themes integration to top-level app

* WiP: compile _app_wrap based on which component library is used

TODO: working color mode

* WiP get color mode working with agnostic provider

still not perfect, as the RadixColorModeProvider seems to trip hydration errors
when using color_mode_cond component, but for now, this provides a nice balance
between the two libraries and allows them to interoperate.

* WiP template _app.js instead of making a separate wrap file

* WiP: use next-themes for consistent darkmode switching

* strict pin chakra deps

* Move ChakraColorModeProvider to separate js file

* move nasty radix themes js code into js files

* remove chakra from default imports

* chakra fixup import to use .js extension

* Add radix theme typography and layout components

* do NOT special case the radix theme...

avoid templating json and applying it, avoid non-customizable logic

just add the radix Theme component as an app wrap if the user specifies it to
rx.App, and any other app-wrap theme-like component could _also_ be used
without having to change the code.

this also allows different themes for different sections of the app by simply
placing elements inside a different rdxt.theme wrapper.

* Theme uses "radius" not "borderRadius"

* move next-themes to main packages.json

this is always used, regardless of the component library

* test_app: test cases for app_wrap interface

* Finish wrapping Button, Switch, and TextField components

* docstring, comments, static fixups

* debounce: use alias or tag when passing child Element

Fix REF-830

* test_app: ruin my beautiful indentation

* py38 compatibility

* Add event triggers for switch and TextField

* Add type hints for radix theme components

* radix themes fixups from writing the tests

* Add integration test for radix themes components

* test_app: mock out package installation

we only need the compile result, we're not actually trying to install packages

* avoid incompatible version of @emotion/react

* test_radix_themes: include theme_panel component

* next-themes default scheme: "light"

until all of our components look good in dark mode, need to keep the default as
light mode regardless of the system setting.
This commit is contained in:
Masen Furer 2023-10-16 15:31:50 -07:00 committed by GitHub
parent 4c554c953d
commit 67606561d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 3979 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
integration/test_radix_themes.py Normal file
View File

@ -0,0 +1,155 @@
"""Integration test for @radix-ui/themes integration."""
from __future__ import annotations
import time
from typing import Generator
import pytest
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from reflex.testing import DEFAULT_TIMEOUT, AppHarness, WebDriver
def RadixThemesApp():
"""App using radix-themes components."""
import reflex as rx
import reflex.components.radix.themes as rdxt
class State(rx.State):
v: str = ""
checked: bool = False
@rx.var
def token(self) -> str:
return self.get_token()
def index() -> rx.Component:
return rdxt.box(
rdxt.text_field(id="token", value=State.token, read_only=True),
rdxt.text_field(id="tf-bare", value=State.v, on_change=State.set_v), # type: ignore
rdxt.text_field_root(
rdxt.text_field_slot("🧸"),
rdxt.text_field(id="tf-slotted", value=State.v, on_change=State.set_v), # type: ignore
),
rdxt.flex(
rdxt.switch(
id="switch1",
checked=State.checked,
on_checked_change=State.set_checked, # type: ignore
),
rx.cond(
State.checked,
rdxt.text("💡", id="bulb"),
rdxt.text("🌙", id="moon"),
),
direction="row",
gap="2",
),
p="5",
)
app = rx.App(
state=State,
theme=rdxt.theme(rdxt.theme_panel(), accent_color="grass"),
)
app.add_page(index)
app.compile()
@pytest.fixture(scope="session")
def radix_themes_app(
tmp_path_factory,
) -> Generator[AppHarness, None, None]:
"""Start BackgroundTask app at tmp_path via AppHarness.
Args:
tmp_path_factory: pytest tmp_path_factory fixture
Yields:
running AppHarness instance
"""
with AppHarness.create(
root=tmp_path_factory.mktemp(f"radix_themes_app"),
app_source=RadixThemesApp, # type: ignore
) as harness:
yield harness
@pytest.fixture
def driver(radix_themes_app: AppHarness) -> Generator[WebDriver, None, None]:
"""Get an instance of the browser open to the radix_themes_app app.
Args:
radix_themes_app: harness for BackgroundTask app
Yields:
WebDriver instance.
"""
assert radix_themes_app.app_instance is not None, "app is not running"
driver = radix_themes_app.frontend()
try:
yield driver
finally:
driver.quit()
@pytest.fixture()
def token(radix_themes_app: AppHarness, driver: WebDriver) -> str:
"""Get a function that returns the active token.
Args:
radix_themes_app: harness for BackgroundTask app.
driver: WebDriver instance.
Returns:
The token for the connected client
"""
assert radix_themes_app.app_instance is not None
token_input = driver.find_element(By.ID, "token")
assert token_input
# wait for the backend connection to send the token
token = radix_themes_app.poll_for_value(token_input, timeout=DEFAULT_TIMEOUT * 2)
assert token is not None
return token
def test_radix_themes_app(
radix_themes_app: AppHarness,
driver: WebDriver,
token: str,
):
"""Test that background tasks work as expected.
Args:
radix_themes_app: harness for BackgroundTask app.
driver: WebDriver instance.
token: The token for the connected client.
"""
assert radix_themes_app.app_instance is not None
tf_bare = driver.find_element(By.ID, "tf-bare")
tf_slotted = driver.find_element(By.ID, "tf-slotted")
switch = driver.find_element(By.ID, "switch1")
tf_bare.send_keys("hello")
assert radix_themes_app.poll_for_value(tf_slotted) == "hello"
tf_slotted.send_keys(Keys.ARROW_LEFT, Keys.ARROW_LEFT, Keys.ARROW_LEFT, "y je")
assert (
radix_themes_app.poll_for_value(tf_bare, exp_not_equal="hello") == "hey jello"
)
driver.find_element(By.ID, "moon")
switch.click()
time.sleep(0.5)
driver.find_element(By.ID, "bulb")
with pytest.raises(Exception):
driver.find_element(By.ID, "moon")
switch.click()
time.sleep(0.5)
driver.find_element(By.ID, "moon")
with pytest.raises(Exception):
driver.find_element(By.ID, "bulb")

36
reflex/.templates/jinja/web/pages/_app.js.jinja2 Normal file
View File

@ -0,0 +1,36 @@
{% extends "web/pages/base_page.js.jinja2" %}
{% block declaration %}
import { EventLoopProvider } from "/utils/context.js";
import { ThemeProvider } from 'next-themes'
{% for custom_code in custom_codes %}
{{custom_code}}
{% endfor %}
{% endblock %}
{% block export %}
function AppWrap({children}) {
{% for hook in hooks %}
{{ hook }}
{% endfor %}
return (
{{utils.render(render, indent_width=0)}}
)
}
export default function MyApp({ Component, pageProps }) {
return (
<ThemeProvider defaultTheme="light" storageKey="chakra-ui-color-mode" attribute="class">
<AppWrap>
<EventLoopProvider>
<Component {...pageProps} />
</EventLoopProvider>
</AppWrap>
</ThemeProvider>
);
}
{% endblock %}

2
reflex/.templates/jinja/web/pages/index.js.jinja2
View File

@ -10,7 +10,7 @@
export default function Component() {
const {{state_name}} = useContext(StateContext)
const {{const.router}} = useRouter()
const { {{const.color_mode}}, {{const.toggle_color_mode}} } = {{const.use_color_mode}}()
const [ {{const.color_mode}}, {{const.toggle_color_mode}} ] = useContext(ColorModeContext)
const focusRef = useRef();
// Main event loop.

23
reflex/.templates/jinja/web/utils/context.js.jinja2
View File

@ -1,10 +1,27 @@
import { createContext } from "react"
import { Event, hydrateClientStorage } from "/utils/state.js"
import { createContext, useState } from "react"
import { Event, hydrateClientStorage, useEventLoop } from "/utils/state.js"
export const initialState = {{ initial_state|json_dumps }}
export const ColorModeContext = createContext(null);
export const StateContext = createContext(null);
export const EventLoopContext = createContext(null);
export const clientStorage = {{ client_storage|json_dumps }}
export const initialEvents = [
Event('{{state_name}}.{{const.hydrate}}', hydrateClientStorage(clientStorage)),
]
]
export const isDevMode = {{ is_dev_mode|json_dumps }}
export function EventLoopProvider({ children }) {
const [state, addEvents, connectError] = useEventLoop(
initialState,
initialEvents,
clientStorage,
)
return (
<EventLoopContext.Provider value={[addEvents, connectError]}>
<StateContext.Provider value={state}>
{children}
</StateContext.Provider>
</EventLoopContext.Provider>
)
}

2
reflex/.templates/jinja/web/utils/theme.js.jinja2
View File

@ -1 +1 @@
export default {{ theme|json_dumps }}
export default {{ theme|json_dumps }}

21
reflex/.templates/web/components/reflex/chakra_color_mode_provider.js Normal file
View File

@ -0,0 +1,21 @@
import { useColorMode as chakraUseColorMode } from "@chakra-ui/react"
import { useTheme } from "next-themes"
import { useEffect } from "react"
import { ColorModeContext } from "/utils/context.js"
export default function ChakraColorModeProvider({ children }) {
const {colorMode, toggleColorMode} = chakraUseColorMode()
const {theme, setTheme} = useTheme()
useEffect(() => {
if (colorMode != theme) {
toggleColorMode()
}
}, [theme])
return (
<ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
{children}
</ColorModeContext.Provider>
)
}

20
reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js Normal file
View File

@ -0,0 +1,20 @@
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
import { ColorModeContext } from "/utils/context.js"
export default function RadixThemesColorModeProvider({ children }) {
const {theme, setTheme} = useTheme()
const [colorMode, setColorMode] = useState("light")
useEffect(() => setColorMode(theme), [theme])
const toggleColorMode = () => {
setTheme(theme === "light" ? "dark" : "light")
}
return (
<ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
{children}
</ColorModeContext.Provider>
)
}

43
reflex/.templates/web/pages/_app.js
View File

@ -1,43 +0,0 @@
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { Global, css } from "@emotion/react";
import theme from "/utils/theme";
import { clientStorage, initialEvents, initialState, StateContext, EventLoopContext } from "/utils/context.js";
import { useEventLoop } from "/utils/state";
import '/styles/styles.css'
const GlobalStyles = css`
/* Hide the blue border around Chakra components. */
.js-focus-visible :focus:not([data-focus-visible-added]) {
outline: none;
box-shadow: none;
}
`;
function EventLoopProvider({ children }) {
const [state, addEvents, connectError] = useEventLoop(
initialState,
initialEvents,
clientStorage,
)
return (
<EventLoopContext.Provider value={[addEvents, connectError]}>
<StateContext.Provider value={state}>
{children}
</StateContext.Provider>
</EventLoopContext.Provider>
)
}
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={extendTheme(theme)}>
<Global styles={GlobalStyles} />
<EventLoopProvider>
<Component {...pageProps} />
</EventLoopProvider>
</ChakraProvider>
);
}
export default MyApp;

38
reflex/app.py
View File

@ -32,6 +32,7 @@ from reflex.base import Base
from reflex.compiler import compiler
from reflex.compiler import utils as compiler_utils
from reflex.components import connection_modal
from reflex.components.base.app_wrap import AppWrap
from reflex.components.component import Component, ComponentStyle
from reflex.components.layout.fragment import Fragment
from reflex.components.navigation.client_side_routing import (
@ -125,6 +126,9 @@ class App(Base):
# Background tasks that are currently running
background_tasks: Set[asyncio.Task] = set()
# The radix theme for the entire app
theme: Optional[Component] = None
def __init__(self, *args, **kwargs):
"""Initialize the app.
@ -569,6 +573,15 @@ class App(Base):
page_imports.update(_frontend_packages)
prerequisites.install_frontend_packages(page_imports)
def _app_root(self, app_wrappers):
order = sorted(app_wrappers, key=lambda k: k[0], reverse=True)
root = parent = app_wrappers[order[0]]
for key in order[1:]:
child = app_wrappers[key]
parent.children.append(child)
parent = child
return root
def compile(self):
"""Compile the app and output it to the pages folder."""
if os.environ.get(constants.SKIP_COMPILE_ENV_VAR) == "yes":
@ -601,12 +614,21 @@ class App(Base):
# TODO Anecdotally, processes=2 works 10% faster (cpu_count=12)
thread_pool = ThreadPool()
all_imports = {}
page_futures = []
app_wrappers: Dict[tuple[int, str], Component] = {
# Default app wrap component renders {children}
(0, "AppWrap"): AppWrap.create()
}
if self.theme is not None:
# If a theme component was provided, wrap the app with it
app_wrappers[(20, "Theme")] = self.theme
with progress:
for route, component in self.pages.items():
# TODO: this progress does not reflect actual threaded task completion
progress.advance(task)
component.add_style(self.style)
compile_results.append(
page_futures.append(
thread_pool.apply_async(
compiler.compile_page,
args=(
@ -619,14 +641,22 @@ class App(Base):
# add component.get_imports() to all_imports
all_imports.update(component.get_imports())
# add the app wrappers from this component
app_wrappers.update(component.get_app_wrap_components())
# Add the custom components from the page to the set.
custom_components |= component.get_custom_components()
thread_pool.close()
thread_pool.join()
# Get the results.
compile_results = [result.get() for result in compile_results]
# Compile the app wrapper.
app_root = self._app_root(app_wrappers=app_wrappers)
all_imports.update(app_root.get_imports())
compile_results.append(compiler.compile_app(app_root))
# Get the compiled pages.
compile_results.extend(result.get() for result in page_futures)
# TODO the compile tasks below may also benefit from parallelization too
@ -644,7 +674,7 @@ class App(Base):
compile_results.append(compiler.compile_document_root(self.head_components))
# Compile the theme.
compile_results.append(compiler.compile_theme(self.style))
compile_results.append(compiler.compile_theme(style=self.style))
# Compile the contexts.
compile_results.append(compiler.compile_contexts(self.state))

41
reflex/compiler/compiler.py
View File

@ -39,13 +39,9 @@ DEFAULT_IMPORTS: imports.ImportDict = {
ImportVar(tag="EventLoopContext"),
ImportVar(tag="initialEvents"),
ImportVar(tag="StateContext"),
ImportVar(tag="ColorModeContext"),
},
"": {ImportVar(tag="focus-visible/dist/focus-visible", install=False)},
"@chakra-ui/react": {
ImportVar(tag=constants.ColorMode.USE),
ImportVar(tag="Box"),
ImportVar(tag="Text"),
},
}
@ -64,6 +60,23 @@ def _compile_document_root(root: Component) -> str:
)
def _compile_app(app_root: Component) -> str:
"""Compile the app template component.
Args:
app_root: The app root to compile.
Returns:
The compiled app.
"""
return templates.APP_ROOT.render(
imports=utils.compile_imports(app_root.get_imports()),
custom_codes=app_root.get_custom_code(),
hooks=app_root.get_hooks(),
render=app_root.render(),
)
def _compile_theme(theme: dict) -> str:
"""Compile the theme.
@ -89,6 +102,7 @@ def _compile_contexts(state: Type[State]) -> str:
initial_state=utils.compile_state(state),
state_name=state.get_name(),
client_storage=utils.compile_client_storage(state),
is_dev_mode=os.environ.get("REFLEX_ENV_MODE", "dev") == "dev",
)
@ -246,6 +260,23 @@ def compile_document_root(head_components: list[Component]) -> tuple[str, str]:
return output_path, code
def compile_app(app_root: Component) -> tuple[str, str]:
"""Compile the app root.
Args:
app_root: The app root component to compile.
Returns:
The path and code of the compiled app wrapper.
"""
# Get the path for the output file.
output_path = utils.get_page_path(constants.PageNames.APP_ROOT)
# Compile the document root.
code = _compile_app(app_root)
return output_path, code
def compile_theme(style: ComponentStyle) -> tuple[str, str]:
"""Compile the theme.

3
reflex/compiler/templates.py
View File

@ -60,6 +60,9 @@ RXCONFIG = get_template("app/rxconfig.py.jinja2")
# Code to render a NextJS Document root.
DOCUMENT_ROOT = get_template("web/pages/_document.js.jinja2")
# Code to render NextJS App root.
APP_ROOT = get_template("web/pages/_app.js.jinja2")
# Template for the theme file.
THEME = get_template("web/utils/theme.js.jinja2")

2
reflex/compiler/utils.py
View File

@ -10,7 +10,6 @@ from pydantic.fields import ModelField
from reflex import constants
from reflex.components.base import (
Body,
ColorModeScript,
Description,
DocumentHead,
Head,
@ -269,7 +268,6 @@ def create_document_root(head_components: list[Component] | None = None) -> Comp
return Html.create(
DocumentHead.create(*head_components),
Body.create(
ColorModeScript.create(),
Main.create(),
NextScript.create(),
),

17
reflex/components/base/app_wrap.py Normal file
View File

@ -0,0 +1,17 @@
"""Top-level component that wraps the entire app."""
from reflex.components.component import Component
from .bare import Bare
class AppWrap(Bare):
"""Top-level component that wraps the entire app."""
@classmethod
def create(cls) -> Component:
"""Create a new AppWrap component.
Returns:
A new AppWrap component containing {children}.
"""
return super().create(contents="{children}")

78
reflex/components/base/app_wrap.pyi Normal file
View File

@ -0,0 +1,78 @@
"""Stub file for app_wrap.py"""
# ------------------- DO NOT EDIT ----------------------
# This file was generated by `scripts/pyi_generator.py`!
# ------------------------------------------------------
from typing import Any, Dict, List, Optional, Union, overload
from reflex.components.base.bare import Bare
from reflex.components.component import Component
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventHandler, EventChain, EventSpec
from reflex.style import Style
class AppWrap(Bare):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
contents: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "AppWrap":
"""Create a new AppWrap component.
Returns:
A new AppWrap component containing {children}.
"""
...

32
reflex/components/component.py
View File

@ -766,7 +766,37 @@ class Component(Base, ABC):
Returns:
An import var.
"""
return ImportVar(tag=self.tag, is_default=self.is_default, alias=self.alias)
# If the tag is dot-qualified, only import the left-most name.
tag = self.tag.partition(".")[0] if self.tag else None
alias = self.alias.partition(".")[0] if self.alias else None
return ImportVar(tag=tag, is_default=self.is_default, alias=alias)
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
"""Get the app wrap components for the component.
Returns:
The app wrap components.
"""
return {}
def get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
"""Get the app wrap components for the component and its children.
Returns:
The app wrap components.
"""
# Store the components in a set to avoid duplicates.
components = self._get_app_wrap_components()
for component in tuple(components.values()):
components.update(component.get_app_wrap_components())
# Add the app wrap components for the children.
for child in self.children:
components.update(child.get_app_wrap_components())
# Return the components.
return components
# Map from component to styling.

4
reflex/components/forms/debounce.py
View File

@ -68,7 +68,9 @@ class DebounceInput(Component):
id=child.id,
class_name=child.class_name,
element=Var.create(
"{%s}" % child.tag, _var_is_local=False, _var_is_string=False
"{%s}" % (child.alias or child.tag),
_var_is_local=False,
_var_is_string=False,
),
)
# do NOT render the child, DebounceInput will create it

89
reflex/components/libs/chakra.py
View File

@ -1,14 +1,99 @@
"""Components that are based on Chakra-UI."""
from __future__ import annotations
from typing import Literal
from typing import List, Literal
from reflex.components.component import Component
from reflex.utils import imports
from reflex.vars import ImportVar, Var
class ChakraComponent(Component):
"""A component that wraps a Chakra component."""
library = "@chakra-ui/react"
library = "@chakra-ui/react@2.6.1"
lib_dependencies: List[str] = [
"@chakra-ui/system@2.5.7",
"framer-motion@10.16.4",
]
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {
**super()._get_app_wrap_components(),
(60, "ChakraProvider"): ChakraProvider.create(),
}
class Global(Component):
"""The emotion/react Global styling component."""
library = "@emotion/react@^11.11.0"
lib_dependencies: List[str] = [
"@emotion/styled@^11.11.0",
]
tag = "Global"
styles: Var[str]
class ChakraProvider(ChakraComponent):
"""Top level Chakra provider must be included in any app using chakra components."""
tag = "ChakraProvider"
theme: Var[str]
@classmethod
def create(cls) -> Component:
"""Create a new ChakraProvider component.
Returns:
A new ChakraProvider component.
"""
return super().create(
Global.create(styles=Var.create("GlobalStyles", _var_is_local=False)),
theme=Var.create("extendTheme(theme)", _var_is_local=False),
)
def _get_imports(self) -> imports.ImportDict:
imports = super()._get_imports()
imports.setdefault(self.__fields__["library"].default, set()).add(
ImportVar(tag="extendTheme", is_default=False),
)
imports.setdefault("/utils/theme.js", set()).add(
ImportVar(tag="theme", is_default=True),
)
imports.setdefault(Global.__fields__["library"].default, set()).add(
ImportVar(tag="css", is_default=False),
)
return imports
def _get_custom_code(self) -> str | None:
return """
import '/styles/styles.css'
const GlobalStyles = css`
/* Hide the blue border around Chakra components. */
.js-focus-visible :focus:not([data-focus-visible-added]) {
outline: none;
box-shadow: none;
}
`;
"""
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {
(50, "ChakraColorModeProvider"): ChakraColorModeProvider.create(),
}
class ChakraColorModeProvider(Component):
"""Next-themes integration for chakra colorModeProvider."""
library = "/components/reflex/chakra_color_mode_provider.js"
tag = "ChakraColorModeProvider"
is_default = True
LiteralColorScheme = Literal[

1
reflex/components/radix/__init__.py Normal file
View File

@ -0,0 +1 @@
"""Namespace for components provided by @radix-ui packages."""

42
reflex/components/radix/themes/__init__.py Normal file
View File

@ -0,0 +1,42 @@
"""Namespace for components provided by the @radix-ui/themes library."""
from .base import (
Theme,
ThemePanel,
)
from .components import (
Button,
Switch,
TextField,
TextFieldRoot,
TextFieldSlot,
)
from .layout import (
Box,
Container,
Flex,
Grid,
Section,
)
from .typography import Blockquote, Code, Em, Heading, Kbd, Link, Quote, Strong, Text
blockquote = Blockquote.create
box = Box.create
button = Button.create
code = Code.create
container = Container.create
em = Em.create
flex = Flex.create
grid = Grid.create
heading = Heading.create
kbd = Kbd.create
link = Link.create
quote = Quote.create
section = Section.create
strong = Strong.create
switch = Switch.create
text = Text.create
text_field = TextField.create
text_field_root = TextFieldRoot.create
text_field_slot = TextFieldSlot.create
theme = Theme.create
theme_panel = ThemePanel.create

125
reflex/components/radix/themes/base.py Normal file
View File

@ -0,0 +1,125 @@
"""Base classes for radix-themes components."""
from __future__ import annotations
from reflex.components import Component
from reflex.utils import imports
from reflex.vars import ImportVar, Var
class CommonMarginProps(Component):
"""Many radix-themes elements accept shorthand margin props."""
# Margin: "0" - "9"
m: Var[str]
# Margin horizontal: "0" - "9"
mx: Var[str]
# Margin vertical: "0" - "9"
my: Var[str]
# Margin top: "0" - "9"
mt: Var[str]
# Margin right: "0" - "9"
mr: Var[str]
# Margin bottom: "0" - "9"
mb: Var[str]
# Margin left: "0" - "9"
ml: Var[str]
class RadixThemesComponent(Component):
"""Base class for all @radix-ui/themes components."""
library = "@radix-ui/themes@^2.0.0"
@classmethod
def create(cls, *children, **props) -> Component:
"""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.
Args:
*children: Child components.
**props: Component properties.
Returns:
A new component instance.
"""
component = super().create(*children, **props)
if component.library is None:
component.library = RadixThemesComponent.__fields__["library"].default
component.alias = "RadixThemes" + (
component.tag or component.__class__.__name__
)
return component
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {
**super()._get_app_wrap_components(),
(45, "RadixThemesColorModeProvider"): RadixThemesColorModeProvider.create(),
}
class Theme(RadixThemesComponent):
"""A theme provider for radix components.
This should be applied as `App.theme` to apply the theme to all radix
components in the app with the given settings.
It can also be used in a normal page to apply specified properties to all
child elements as an override of the main theme.
"""
tag = "Theme"
# Whether to apply the themes background color to the theme node.
has_background: Var[bool]
# Override light or dark mode theme: "inherit" | "light" | "dark"
appearance: Var[str]
# The color used for default buttons, typography, backgrounds, etc
accent_color: Var[str]
# The shade of gray
gray_color: Var[str]
# Whether panel backgrounds are transparent: "solid" | "transparent" (default)
panel_background: Var[str]
# Element border radius: "none" | "small" | "medium" | "large" | "full"
radius: Var[str]
# Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
scaling: Var[str]
def _get_imports(self) -> imports.ImportDict:
return {
**super()._get_imports(),
"": {ImportVar(tag="@radix-ui/themes/styles.css", install=False)},
}
class ThemePanel(RadixThemesComponent):
"""Visual editor for creating and editing themes.
Include as a child component of Theme to use in your app.
"""
tag = "ThemePanel"
default_open: Var[bool]
class RadixThemesColorModeProvider(Component):
"""Next-themes integration for radix themes components."""
library = "/components/reflex/radix_themes_color_mode_provider.js"
tag = "RadixThemesColorModeProvider"
is_default = True

434
reflex/components/radix/themes/base.pyi Normal file
View File

@ -0,0 +1,434 @@
"""Stub file for base.py"""
# ------------------- DO NOT EDIT ----------------------
# This file was generated by `scripts/pyi_generator.py`!
# ------------------------------------------------------
from typing import Any, Dict, List, Optional, Union, overload
from reflex.components.component import Component
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventHandler, EventChain, EventSpec
from reflex.style import Style
class CommonMarginProps(Component):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "CommonMarginProps":
"""Create the component.
Args:
*children: The children of the component.
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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: The props of the component.
Returns:
The component.
Raises:
TypeError: If an invalid child is passed.
"""
...
class RadixThemesComponent(Component):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "RadixThemesComponent":
"""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.
Args:
*children: Child components.
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.
Returns:
A new component instance.
"""
...
class Theme(RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
has_background: Optional[Union[Var[bool], bool]] = None,
appearance: Optional[Union[Var[str], str]] = None,
accent_color: Optional[Union[Var[str], str]] = None,
gray_color: Optional[Union[Var[str], str]] = None,
panel_background: Optional[Union[Var[str], str]] = None,
radius: Optional[Union[Var[str], str]] = None,
scaling: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Theme":
"""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.
Args:
*children: Child components.
has_background: Whether to apply the themes background color to the theme node.
appearance: Override light or dark mode theme: "inherit" | "light" | "dark"
accent_color: The color used for default buttons, typography, backgrounds, etc
gray_color: The shade of gray
panel_background: Whether panel backgrounds are transparent: "solid" | "transparent" (default)
radius: Element border radius: "none" | "small" | "medium" | "large" | "full"
scaling: Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
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.
Returns:
A new component instance.
"""
...
class ThemePanel(RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
default_open: Optional[Union[Var[bool], bool]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "ThemePanel":
"""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.
Args:
*children: Child components.
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.
Returns:
A new component instance.
"""
...
class RadixThemesColorModeProvider(Component):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "RadixThemesColorModeProvider":
"""Create the component.
Args:
*children: The children of the component.
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: The props of the component.
Returns:
The component.
Raises:
TypeError: If an invalid child is passed.
"""
...

160
reflex/components/radix/themes/components.py Normal file
View File

@ -0,0 +1,160 @@
"""Interactive components provided by @radix-ui/themes."""
from typing import Any, Dict
from reflex import el
from reflex.components.component import Component
from reflex.components.forms.debounce import DebounceInput
from reflex.constants import EventTriggers
from reflex.vars import Var
from .base import CommonMarginProps, RadixThemesComponent
class Button(CommonMarginProps, RadixThemesComponent):
"""Trigger an action or event, such as submitting a form or displaying a dialog."""
tag = "Button"
# 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: Var[str]
# Variant of button: "solid" | "soft" | "outline" | "ghost"
variant: Var[str]
# Override theme color for button
color: Var[str]
# Whether to render the button with higher contrast color against background
high_contrast: Var[bool]
# Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
radius: Var[str]
class Switch(CommonMarginProps, RadixThemesComponent):
"""A toggle switch alternative to the checkbox."""
tag = "Switch"
# Change the default rendered element for the one passed as a child, merging their props and behavior.
as_child: Var[bool]
# Whether the switch is checked by default
default_checked: Var[bool]
# Whether the switch is checked
checked: Var[bool]
# If true, prevent the user from interacting with the switch
disabled: Var[bool]
# If true, the user must interact with the switch to submit the form
required: Var[bool]
# The name of the switch (when submitting a form)
name: Var[str]
# The value associated with the "on" position
value: Var[str]
# Switch size "1" - "4"
size: Var[str]
# Variant of switch: "solid" | "soft" | "outline" | "ghost"
variant: Var[str]
# Override theme color for switch
color: Var[str]
# Whether to render the switch with higher contrast color against background
high_contrast: Var[bool]
# Override theme radius for switch: "none" | "small" | "medium" | "large" | "full"
radius: Var[str]
def get_event_triggers(self) -> Dict[str, Any]:
"""Get the event triggers that pass the component's value to the handler.
Returns:
A dict mapping the event trigger name to the argspec passed to the handler.
"""
return {
**super().get_event_triggers(),
EventTriggers.ON_CHECKED_CHANGE: lambda checked: [checked],
}
class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
"""Captures user input with an optional slot for buttons and icons."""
tag = "TextField.Root"
# Button size "1" - "3"
size: Var[str]
# Variant of text field: "classic" | "surface" | "soft"
variant: Var[str]
# Override theme color for text field
color: Var[str]
# Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
radius: Var[str]
class TextField(TextFieldRoot, el.Input):
"""The input part of a TextField, may be used by itself."""
tag = "TextField.Input"
@classmethod
def create(cls, *children, **props) -> Component:
"""Create an Input component.
Args:
*children: The children of the component.
**props: The properties of the component.
Returns:
The component.
"""
if (
isinstance(props.get("value"), Var) and props.get("on_change")
) or "debounce_timeout" in props:
# Currently default to 50ms, which appears to be a good balance
debounce_timeout = props.pop("debounce_timeout", 50)
# create a debounced input if the user requests full control to avoid typing jank
return DebounceInput.create(
super().create(*children, **props), debounce_timeout=debounce_timeout
)
return super().create(*children, **props)
def get_event_triggers(self) -> Dict[str, Any]:
"""Get the event triggers that pass the component's value to the handler.
Returns:
A dict mapping the event trigger to the var that is passed to the handler.
"""
return {
**super().get_event_triggers(),
EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
EventTriggers.ON_FOCUS: lambda e0: [e0.target.value],
EventTriggers.ON_BLUR: lambda e0: [e0.target.value],
EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
}
class TextFieldSlot(RadixThemesComponent):
"""Contains icons or buttons associated with an Input."""
tag = "TextField.Slot"
# Override theme color for text field slot
color: Var[str]
# Override the gap spacing between slot and input: "1" - "9"
gap: Var[str]

650
reflex/components/radix/themes/components.pyi Normal file
View File

@ -0,0 +1,650 @@
"""Stub file for components.py"""
# ------------------- DO NOT EDIT ----------------------
# This file was generated by `scripts/pyi_generator.py`!
# ------------------------------------------------------
from typing import Any, Dict, List, Optional, Union, overload
from reflex.components.radix.themes.base import CommonMarginProps
from reflex.components.component import Component
from reflex.el.elements import Input
from reflex.components.radix.themes.base import RadixThemesComponent
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventHandler, EventChain, EventSpec
from reflex.style import Style
class Button(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
size: Optional[Union[Var[str], str]] = None,
variant: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
radius: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Button":
"""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.
Args:
*children: Child components.
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: 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"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Switch(CommonMarginProps, RadixThemesComponent):
@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[str], str]] = None,
variant: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
radius: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_checked_change: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Switch":
"""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.
Args:
*children: Child components.
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: "solid" | "soft" | "outline" | "ghost"
color: 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" | "medium" | "large" | "full"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
variant: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
radius: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "TextFieldRoot":
"""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.
Args:
*children: Child components.
size: Button size "1" - "3"
variant: Variant of text field: "classic" | "surface" | "soft"
color: Override theme color for text field
radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class TextField(TextFieldRoot, Input):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
variant: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
radius: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
accept: 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,
alt: 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,
auto_complete: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
auto_focus: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
capture: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
checked: 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,
dirname: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
disabled: 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,
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,
height: 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,
list: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
max: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
max_length: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
min_length: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
min: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
multiple: 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,
pattern: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
placeholder: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
read_only: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
required: 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,
src: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
step: 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,
translate: 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,
use_map: 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,
width: Optional[
Union[Var[Union[str, int, bool]], Union[str, int, bool]]
] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
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,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_key_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_key_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "TextField":
"""Create an Input component.
Args:
*children: The children of the component.
size: Button size "1" - "3"
variant: Variant of text field: "classic" | "surface" | "soft"
color: Override theme color for text field
radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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: The properties of the component.
Returns:
The component.
"""
...
class TextFieldSlot(RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
color: Optional[Union[Var[str], str]] = None,
gap: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "TextFieldSlot":
"""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.
Args:
*children: Child components.
color: Override theme color for text field slot
gap: Override the gap spacing between slot and input: "1" - "9"
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.
Returns:
A new component instance.
"""
...

124
reflex/components/radix/themes/layout.py Normal file
View File

@ -0,0 +1,124 @@
"""Declarative layout and common spacing props."""
from __future__ import annotations
from reflex.vars import Var
from .base import CommonMarginProps, RadixThemesComponent
class LayoutComponent(CommonMarginProps, RadixThemesComponent):
"""Box, Flex and Grid are foundational elements you'll use to construct
layouts. Box provides block-level spacing and sizing, while Flex and Grid
let you create flexible columns, rows and grids.
"""
# Padding: "0" - "9"
p: Var[str]
# Padding horizontal: "0" - "9"
px: Var[str]
# Padding vertical: "0" - "9"
py: Var[str]
# Padding top: "0" - "9"
pt: Var[str]
# Padding right: "0" - "9"
pr: Var[str]
# Padding bottom: "0" - "9"
pb: Var[str]
# Padding left: "0" - "9"
pl: Var[str]
# Whether the element will take up the smallest possible space: "0" | "1"
shrink: Var[str]
# Whether the element will take up the largest possible space: "0" | "1"
grow: Var[str]
class Box(LayoutComponent):
"""A fundamental layout building block, based on <div>."""
tag = "Box"
class Flex(LayoutComponent):
"""Component for creating flex layouts."""
tag = "Flex"
# Change the default rendered element for the one passed as a child, merging their props and behavior.
as_child: Var[bool]
# How to display the element: "none" | "inline-flex" | "flex"
display: Var[str]
# How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
direction: Var[str]
# Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
align: Var[str]
# Alignment of children along the cross axis: "start" | "center" | "end" | "between"
justify: Var[str]
# Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
wrap: Var[str]
# Gap between children: "0" - "9"
gap: Var[str]
class Grid(RadixThemesComponent):
"""Component for creating grid layouts."""
# Change the default rendered element for the one passed as a child, merging their props and behavior.
as_child: Var[bool]
# How to display the element: "none" | "inline-grid" | "grid"
display: Var[str]
# Number of columns
columns: Var[str]
# Number of rows
rows: Var[str]
# How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
flow: Var[str]
# Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
align: Var[str]
# Alignment of children along the cross axis: "start" | "center" | "end" | "between"
justify: Var[str]
# Gap between children: "0" - "9"
gap: Var[str]
# Gap between children horizontal: "0" - "9"
gap_x: Var[str]
# Gap between children vertical: "0" - "9"
gap_x: Var[str]
class Container(LayoutComponent):
"""Constrains the maximum width of page content.
See https://www.radix-ui.com/themes/docs/components/container
"""
# The size of the container: "1" - "4" (default "4")
size: Var[str]
class Section(LayoutComponent):
"""Denotes a section of page content."""
# The size of the section: "1" - "3" (default "3")
size: Var[str]

682
reflex/components/radix/themes/layout.pyi Normal file
View File

@ -0,0 +1,682 @@
"""Stub file for layout.py"""
# ------------------- DO NOT EDIT ----------------------
# This file was generated by `scripts/pyi_generator.py`!
# ------------------------------------------------------
from typing import Any, Dict, List, Optional, Union, overload
from reflex.components.radix.themes.base import CommonMarginProps
from reflex.components.component import Component
from reflex.components.radix.themes.base import RadixThemesComponent
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventHandler, EventChain, EventSpec
from reflex.style import Style
class LayoutComponent(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
p: Optional[Union[Var[str], str]] = None,
px: Optional[Union[Var[str], str]] = None,
py: Optional[Union[Var[str], str]] = None,
pt: Optional[Union[Var[str], str]] = None,
pr: Optional[Union[Var[str], str]] = None,
pb: Optional[Union[Var[str], str]] = None,
pl: Optional[Union[Var[str], str]] = None,
shrink: Optional[Union[Var[str], str]] = None,
grow: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "LayoutComponent":
"""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.
Args:
*children: Child components.
p: Padding: "0" - "9"
px: Padding horizontal: "0" - "9"
py: Padding vertical: "0" - "9"
pt: Padding top: "0" - "9"
pr: Padding right: "0" - "9"
pb: Padding bottom: "0" - "9"
pl: Padding left: "0" - "9"
shrink: Whether the element will take up the smallest possible space: "0" | "1"
grow: Whether the element will take up the largest possible space: "0" | "1"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Box(LayoutComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
p: Optional[Union[Var[str], str]] = None,
px: Optional[Union[Var[str], str]] = None,
py: Optional[Union[Var[str], str]] = None,
pt: Optional[Union[Var[str], str]] = None,
pr: Optional[Union[Var[str], str]] = None,
pb: Optional[Union[Var[str], str]] = None,
pl: Optional[Union[Var[str], str]] = None,
shrink: Optional[Union[Var[str], str]] = None,
grow: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Box":
"""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.
Args:
*children: Child components.
p: Padding: "0" - "9"
px: Padding horizontal: "0" - "9"
py: Padding vertical: "0" - "9"
pt: Padding top: "0" - "9"
pr: Padding right: "0" - "9"
pb: Padding bottom: "0" - "9"
pl: Padding left: "0" - "9"
shrink: Whether the element will take up the smallest possible space: "0" | "1"
grow: Whether the element will take up the largest possible space: "0" | "1"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Flex(LayoutComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
display: Optional[Union[Var[str], str]] = None,
direction: Optional[Union[Var[str], str]] = None,
align: Optional[Union[Var[str], str]] = None,
justify: Optional[Union[Var[str], str]] = None,
wrap: Optional[Union[Var[str], str]] = None,
gap: Optional[Union[Var[str], str]] = None,
p: Optional[Union[Var[str], str]] = None,
px: Optional[Union[Var[str], str]] = None,
py: Optional[Union[Var[str], str]] = None,
pt: Optional[Union[Var[str], str]] = None,
pr: Optional[Union[Var[str], str]] = None,
pb: Optional[Union[Var[str], str]] = None,
pl: Optional[Union[Var[str], str]] = None,
shrink: Optional[Union[Var[str], str]] = None,
grow: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Flex":
"""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.
Args:
*children: Child components.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
display: How to display the element: "none" | "inline-flex" | "flex"
direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
gap: Gap between children: "0" - "9"
p: Padding: "0" - "9"
px: Padding horizontal: "0" - "9"
py: Padding vertical: "0" - "9"
pt: Padding top: "0" - "9"
pr: Padding right: "0" - "9"
pb: Padding bottom: "0" - "9"
pl: Padding left: "0" - "9"
shrink: Whether the element will take up the smallest possible space: "0" | "1"
grow: Whether the element will take up the largest possible space: "0" | "1"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Grid(RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
display: Optional[Union[Var[str], str]] = None,
columns: Optional[Union[Var[str], str]] = None,
rows: Optional[Union[Var[str], str]] = None,
flow: Optional[Union[Var[str], str]] = None,
align: Optional[Union[Var[str], str]] = None,
justify: Optional[Union[Var[str], str]] = None,
gap: Optional[Union[Var[str], str]] = None,
gap_x: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Grid":
"""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.
Args:
*children: Child components.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
display: How to display the element: "none" | "inline-grid" | "grid"
columns: Number of columns
rows: Number of rows
flow: How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
gap: Gap between children: "0" - "9"
gap_x: Gap between children vertical: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Container(LayoutComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
p: Optional[Union[Var[str], str]] = None,
px: Optional[Union[Var[str], str]] = None,
py: Optional[Union[Var[str], str]] = None,
pt: Optional[Union[Var[str], str]] = None,
pr: Optional[Union[Var[str], str]] = None,
pb: Optional[Union[Var[str], str]] = None,
pl: Optional[Union[Var[str], str]] = None,
shrink: Optional[Union[Var[str], str]] = None,
grow: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Container":
"""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.
Args:
*children: Child components.
size: The size of the container: "1" - "4" (default "4")
p: Padding: "0" - "9"
px: Padding horizontal: "0" - "9"
py: Padding vertical: "0" - "9"
pt: Padding top: "0" - "9"
pr: Padding right: "0" - "9"
pb: Padding bottom: "0" - "9"
pl: Padding left: "0" - "9"
shrink: Whether the element will take up the smallest possible space: "0" | "1"
grow: Whether the element will take up the largest possible space: "0" | "1"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Section(LayoutComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
p: Optional[Union[Var[str], str]] = None,
px: Optional[Union[Var[str], str]] = None,
py: Optional[Union[Var[str], str]] = None,
pt: Optional[Union[Var[str], str]] = None,
pr: Optional[Union[Var[str], str]] = None,
pb: Optional[Union[Var[str], str]] = None,
pl: Optional[Union[Var[str], str]] = None,
shrink: Optional[Union[Var[str], str]] = None,
grow: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Section":
"""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.
Args:
*children: Child components.
size: The size of the section: "1" - "3" (default "3")
p: Padding: "0" - "9"
px: Padding horizontal: "0" - "9"
py: Padding vertical: "0" - "9"
pt: Padding top: "0" - "9"
pr: Padding right: "0" - "9"
pb: Padding bottom: "0" - "9"
pl: Padding left: "0" - "9"
shrink: Whether the element will take up the smallest possible space: "0" | "1"
grow: Whether the element will take up the largest possible space: "0" | "1"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...

126
reflex/components/radix/themes/typography.py Normal file
View File

@ -0,0 +1,126 @@
"""Components for rendering text.
https://www.radix-ui.com/themes/docs/theme/typography
"""
from __future__ import annotations
from reflex.vars import Var
from .base import CommonMarginProps, RadixThemesComponent
class Text(CommonMarginProps, RadixThemesComponent):
"""A foundational text primitive based on the <span> element."""
tag = "Text"
# Change the default rendered element for the one passed as a child, merging their props and behavior.
as_child: Var[bool]
# Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
as_: Var[str]
# Text size: "1" - "9"
size: Var[str]
# Thickness of text: "light" | "regular" | "medium" | "bold"
weight: Var[str]
# Alignment of text in element: "left" | "center" | "right"
align: Var[str]
# Removes the leading trim space: "normal" | "start" | "end" | "both"
trim: Var[str]
# Overrides the accent color inherited from the Theme.
color: Var[str]
# Whether to render the text with higher contrast color
high_contrast: Var[bool]
class Heading(Text):
"""A semantic heading element."""
tag = "Heading"
class Blockquote(CommonMarginProps, RadixThemesComponent):
"""A block level extended quotation."""
tag = "Blockquote"
# Text size: "1" - "9"
size: Var[str]
# Thickness of text: "light" | "regular" | "medium" | "bold"
weight: Var[str]
# Overrides the accent color inherited from the Theme.
color: Var[str]
# Whether to render the text with higher contrast color
high_contrast: Var[bool]
class Code(Blockquote):
"""Marks text to signify a short fragment of computer code."""
tag = "Code"
# The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
variant: Var[str]
class Em(CommonMarginProps, RadixThemesComponent):
"""Marks text to stress emphasis."""
tag = "Em"
class Kbd(CommonMarginProps, RadixThemesComponent):
"""Represents keyboard input or a hotkey."""
tag = "Kbd"
# Text size: "1" - "9"
size: Var[str]
class Link(CommonMarginProps, RadixThemesComponent):
"""A semantic element for navigation between pages."""
tag = "Link"
# Change the default rendered element for the one passed as a child, merging their props and behavior.
as_child: Var[bool]
# Text size: "1" - "9"
size: Var[str]
# Thickness of text: "light" | "regular" | "medium" | "bold"
weight: Var[str]
# Removes the leading trim space: "normal" | "start" | "end" | "both"
trim: Var[str]
# Sets the visibility of the underline affordance: "auto" | "hover" | "always"
underline: Var[str]
# Overrides the accent color inherited from the Theme.
color: Var[str]
# Whether to render the text with higher contrast color
high_contrast: Var[bool]
class Quote(CommonMarginProps, RadixThemesComponent):
"""A short inline quotation."""
tag = "Quote"
class Strong(CommonMarginProps, RadixThemesComponent):
"""Marks text to signify strong importance."""
tag = "Strong"

915
reflex/components/radix/themes/typography.pyi Normal file
View File

@ -0,0 +1,915 @@
"""Stub file for typography.py"""
# ------------------- DO NOT EDIT ----------------------
# This file was generated by `scripts/pyi_generator.py`!
# ------------------------------------------------------
from typing import Any, Dict, List, Optional, Union, overload
from reflex.components.radix.themes.base import CommonMarginProps
from reflex.components.component import Component
from reflex.components.radix.themes.base import RadixThemesComponent
from reflex.vars import Var, BaseVar, ComputedVar
from reflex.event import EventHandler, EventChain, EventSpec
from reflex.style import Style
class Text(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
as_: Optional[Union[Var[str], str]] = None,
size: Optional[Union[Var[str], str]] = None,
weight: Optional[Union[Var[str], str]] = None,
align: Optional[Union[Var[str], str]] = None,
trim: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Text":
"""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.
Args:
*children: Child components.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold"
align: Alignment of text in element: "left" | "center" | "right"
trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
color: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Heading(Text):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
as_: Optional[Union[Var[str], str]] = None,
size: Optional[Union[Var[str], str]] = None,
weight: Optional[Union[Var[str], str]] = None,
align: Optional[Union[Var[str], str]] = None,
trim: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Heading":
"""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.
Args:
*children: Child components.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
as_: Change the default rendered element into a semantically appropriate alternative (cannot be used with asChild)
size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold"
align: Alignment of text in element: "left" | "center" | "right"
trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
color: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Blockquote(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
weight: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Blockquote":
"""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.
Args:
*children: Child components.
size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold"
color: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Code(Blockquote):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
variant: Optional[Union[Var[str], str]] = None,
size: Optional[Union[Var[str], str]] = None,
weight: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Code":
"""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.
Args:
*children: Child components.
variant: The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold"
color: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Em(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Em":
"""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.
Args:
*children: Child components.
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Kbd(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
size: Optional[Union[Var[str], str]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Kbd":
"""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.
Args:
*children: Child components.
size: Text size: "1" - "9"
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Link(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
as_child: Optional[Union[Var[bool], bool]] = None,
size: Optional[Union[Var[str], str]] = None,
weight: Optional[Union[Var[str], str]] = None,
trim: Optional[Union[Var[str], str]] = None,
underline: Optional[Union[Var[str], str]] = None,
color: Optional[Union[Var[str], str]] = None,
high_contrast: Optional[Union[Var[bool], bool]] = None,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Link":
"""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.
Args:
*children: Child components.
as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
size: Text size: "1" - "9"
weight: Thickness of text: "light" | "regular" | "medium" | "bold"
trim: Removes the leading trim space: "normal" | "start" | "end" | "both"
underline: Sets the visibility of the underline affordance: "auto" | "hover" | "always"
color: Overrides the accent color inherited from the Theme.
high_contrast: Whether to render the text with higher contrast color
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Quote(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Quote":
"""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.
Args:
*children: Child components.
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...
class Strong(CommonMarginProps, RadixThemesComponent):
@overload
@classmethod
def create( # type: ignore
cls,
*children,
m: Optional[Union[Var[str], str]] = None,
mx: Optional[Union[Var[str], str]] = None,
my: Optional[Union[Var[str], str]] = None,
mt: Optional[Union[Var[str], str]] = None,
mr: Optional[Union[Var[str], str]] = None,
mb: Optional[Union[Var[str], str]] = None,
ml: Optional[Union[Var[str], str]] = None,
style: Optional[Style] = None,
key: Optional[Any] = None,
id: Optional[Any] = None,
class_name: Optional[Any] = None,
autofocus: Optional[bool] = None,
custom_attrs: Optional[Dict[str, str]] = None,
on_blur: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_context_menu: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_double_click: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_focus: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_down: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_enter: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_leave: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_move: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_out: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_over: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_mouse_up: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_scroll: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
on_unmount: Optional[
Union[EventHandler, EventSpec, List, function, BaseVar]
] = None,
**props
) -> "Strong":
"""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.
Args:
*children: Child components.
m: Margin: "0" - "9"
mx: Margin horizontal: "0" - "9"
my: Margin vertical: "0" - "9"
mt: Margin top: "0" - "9"
mr: Margin right: "0" - "9"
mb: Margin bottom: "0" - "9"
ml: Margin left: "0" - "9"
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.
Returns:
A new component instance.
"""
...

1
reflex/constants/event.py
View File

@ -65,6 +65,7 @@ class EventTriggers(SimpleNamespace):
ON_CHANGE = "on_change"
ON_CHANGE_END = "on_change_end"
ON_CHANGE_START = "on_change_start"
ON_CHECKED_CHANGE = "on_checked_change"
ON_COMPLETE = "on_complete"
ON_CONTEXT_MENU = "on_context_menu"
ON_DOUBLE_CLICK = "on_double_click"

5
reflex/constants/installer.py
View File

@ -102,10 +102,6 @@ class PackageJson(SimpleNamespace):
PATH = os.path.join(Dirs.WEB, "package.json")
DEPENDENCIES = {
"@chakra-ui/react": "2.6.0",
"@chakra-ui/system": "2.5.6",
"@emotion/react": "11.10.6",
"@emotion/styled": "11.10.6",
"axios": "1.4.0",
"chakra-react-select": "4.6.0",
"focus-visible": "5.2.0",
@ -113,6 +109,7 @@ class PackageJson(SimpleNamespace):
"json5": "2.2.3",
"next": "13.5.4",
"next-sitemap": "4.1.8",
"next-themes": "0.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"socket.io-client": "4.6.1",

3
reflex/reflex.py
View File

@ -119,6 +119,9 @@ def run(
# Set the log level.
console.set_log_level(loglevel)
# Set env mode in the environment
os.environ["REFLEX_ENV_MODE"] = env.value
# Show system info
exec.output_system_info()

98
scripts/pyi_generator.py
View File

@ -7,7 +7,7 @@ import re
import sys
from inspect import getfullargspec
from pathlib import Path
from typing import Any, Dict, List, Literal, Optional, Union, get_args # NOQA
from typing import Any, Dict, List, Literal, Optional, Set, Union, get_args # NOQA
import black
@ -50,6 +50,8 @@ from reflex.components.libs.chakra import (
)
# NOQA
from reflex.event import EventChain
from reflex.style import Style
from reflex.utils import format
from reflex.utils import types as rx_types
from reflex.vars import Var
@ -59,6 +61,8 @@ ruff_dont_remove = [
Optional,
Dict,
List,
EventChain,
Style,
LiteralInputVariant,
LiteralColorScheme,
LiteralChakraDirection,
@ -100,7 +104,21 @@ EXCLUDED_FILES = [
"multiselect.py",
]
DEFAULT_TYPING_IMPORTS = {"overload", "Optional", "Union"}
# These props exist on the base component, but should not be exposed in create methods.
EXCLUDED_PROPS = [
"alias",
"children",
"event_triggers",
"invalid_children",
"library",
"lib_dependencies",
"tag",
"is_default",
"special_props",
"valid_children",
]
DEFAULT_TYPING_IMPORTS = {"overload", "Any", "Dict", "List", "Optional", "Union"}
def _get_type_hint(value, top_level=True, no_union=False):
@ -186,6 +204,7 @@ class PyiGenerator:
*[f"from {base.__module__} import {base.__name__}" for base in bases],
"from reflex.vars import Var, BaseVar, ComputedVar",
"from reflex.event import EventHandler, EventChain, EventSpec",
"from reflex.style import Style",
]
def _generate_pyi_class(self, _class: type[Component]):
@ -194,7 +213,7 @@ class PyiGenerator:
"",
f"class {_class.__name__}({', '.join([base.__name__ for base in _class.__bases__])}):",
]
definition = f" @overload\n @classmethod\n def create(cls, *children, "
definition = f" @overload\n @classmethod\n def create( # type: ignore\n cls, *children, "
for kwarg in create_spec.kwonlyargs:
if kwarg in create_spec.annotations:
@ -202,51 +221,64 @@ class PyiGenerator:
else:
definition += f"{kwarg}, "
for name, value in _class.__annotations__.items():
if name in create_spec.kwonlyargs:
continue
definition += f"{name}: {_get_type_hint(value)} = None, "
all_classes = [c for c in _class.__mro__ if issubclass(c, Component)]
all_props = []
for target_class in all_classes:
for name, value in target_class.__annotations__.items():
if (
name in create_spec.kwonlyargs
or name in EXCLUDED_PROPS
or name in all_props
):
continue
all_props.append(name)
definition += f"{name}: {_get_type_hint(value)} = None, "
for trigger in sorted(_class().get_event_triggers().keys()):
definition += f"{trigger}: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, "
definition = definition.rstrip(", ")
definition += f", **props) -> '{_class.__name__}': # type: ignore\n"
definition += f", **props) -> '{_class.__name__}':\n"
definition += self._generate_docstrings(_class, _class.__annotations__.keys())
definition += self._generate_docstrings(all_classes, all_props)
lines.append(definition)
lines.append(" ...")
return lines
def _generate_docstrings(self, _class, _props):
def _generate_docstrings(self, _classes, _props):
props_comments = {}
comments = []
for _i, line in enumerate(inspect.getsource(_class).splitlines()):
reached_functions = re.search("def ", line)
if reached_functions:
# We've reached the functions, so stop.
break
for _class in _classes:
for _i, line in enumerate(inspect.getsource(_class).splitlines()):
reached_functions = re.search("def ", line)
if reached_functions:
# We've reached the functions, so stop.
break
# Get comments for prop
if line.strip().startswith("#"):
comments.append(line)
continue
# Get comments for prop
if line.strip().startswith("#"):
comments.append(line)
continue
# Check if this line has a prop.
match = re.search("\\w+:", line)
if match is None:
# This line doesn't have a var, so continue.
continue
# Check if this line has a prop.
match = re.search("\\w+:", line)
if match is None:
# This line doesn't have a var, so continue.
continue
# Get the prop.
prop = match.group(0).strip(":")
if prop in _props:
# This isn't a prop, so continue.
props_comments[prop] = "\n".join(
[comment.strip().strip("#") for comment in comments]
)
comments.clear()
continue
# Get the prop.
prop = match.group(0).strip(":")
if prop in _props:
if not comments: # do not include undocumented props
continue
props_comments[prop] = "\n".join(
[comment.strip().strip("#") for comment in comments]
)
comments.clear()
continue
if prop in EXCLUDED_PROPS:
comments.clear() # throw away comments for excluded props
_class = _classes[0]
new_docstring = []
for i, line in enumerate(_class.create.__doc__.splitlines()):
if i == 0:

108
tests/test_app.py
View File

@ -3,8 +3,10 @@ from __future__ import annotations
import io
import os.path
import sys
import unittest.mock
import uuid
from typing import List, Tuple, Type
from pathlib import Path
from typing import Generator, List, Tuple, Type
if sys.version_info.major >= 3 and sys.version_info.minor > 7:
from unittest.mock import AsyncMock # type: ignore
@ -18,6 +20,7 @@ from starlette_admin.auth import AuthProvider
from starlette_admin.contrib.sqla.admin import Admin
from starlette_admin.contrib.sqla.view import ModelView
import reflex.components.radix.themes as rdxt
from reflex import AdminDash, constants
from reflex.app import (
App,
@ -36,6 +39,7 @@ from reflex.style import Style
from reflex.utils import format
from reflex.vars import ComputedVar
from .conftest import chdir
from .states import (
ChildFileUploadState,
FileUploadState,
@ -1122,3 +1126,105 @@ def test_overlay_component(
assert exp_page_child in children_types
else:
assert len(page.children) == 2
@pytest.fixture
def compilable_app(tmp_path) -> Generator[tuple[App, Path], None, None]:
"""Fixture for an app that can be compiled.
Args:
tmp_path: Temporary path.
Yields:
Tuple containing (app instance, Path to ".web" directory)
The working directory is set to the app dir (parent of .web),
allowing app.compile() to be called.
"""
app_path = tmp_path / "app"
web_dir = app_path / ".web"
web_dir.mkdir(parents=True)
(web_dir / "package.json").touch()
app = App()
app.get_frontend_packages = unittest.mock.Mock()
with chdir(app_path):
yield app, web_dir
def test_app_wrap_compile_theme(compilable_app):
"""Test that the radix theme component wraps the app.
Args:
compilable_app: compilable_app fixture.
"""
app, web_dir = compilable_app
app.theme = rdxt.theme(accent_color="plum")
app.compile()
app_js_contents = (web_dir / "pages" / "_app.js").read_text()
app_js_lines = [
line.strip() for line in app_js_contents.splitlines() if line.strip()
]
assert (
"function AppWrap({children}) {"
"return ("
"<RadixThemesTheme accentColor={`plum`}>"
"{children}"
"</RadixThemesTheme>"
")"
"}"
) in "".join(app_js_lines)
def test_app_wrap_priority(compilable_app):
"""Test that the app wrap components are wrapped in the correct order.
Args:
compilable_app: compilable_app fixture.
"""
app, web_dir = compilable_app
class Fragment1(Component):
tag = "Fragment1"
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {(99, "Box"): Box.create()}
class Fragment2(Component):
tag = "Fragment2"
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {(50, "Text"): Text.create()}
class Fragment3(Component):
tag = "Fragment3"
def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
return {(10, "Fragment2"): Fragment2.create()}
def page():
return Fragment1.create(Fragment3.create())
app.add_page(page)
app.compile()
app_js_contents = (web_dir / "pages" / "_app.js").read_text()
app_js_lines = [
line.strip() for line in app_js_contents.splitlines() if line.strip()
]
assert (
"function AppWrap({children}) {"
"return ("
"<Box>"
"<ChakraProvider theme={extendTheme(theme)}>"
"<Global styles={GlobalStyles}/>"
"<ChakraColorModeProvider>"
"<Text>"
"<Fragment2>"
"{children}"
"</Fragment2>"
"</Text>"
"</ChakraColorModeProvider>"
"</ChakraProvider>"
"</Box>"
")"
"}"
) in "".join(app_js_lines)