diff --git a/reflex/.templates/jinja/web/pages/base_page.js.jinja2 b/reflex/.templates/jinja/web/pages/base_page.js.jinja2 index 2a1a50944..55537cd0e 100644 --- a/reflex/.templates/jinja/web/pages/base_page.js.jinja2 +++ b/reflex/.templates/jinja/web/pages/base_page.js.jinja2 @@ -3,6 +3,7 @@ /** @jsxImportSource @emotion/react */ {%- block imports_libs %} + {% for module in imports%} {{- utils.get_import(module) }} {% endfor %} diff --git a/reflex/app.py b/reflex/app.py index d61e5aebb..8cd07b00f 100644 --- a/reflex/app.py +++ b/reflex/app.py @@ -681,8 +681,7 @@ class App(Base): # Merge the component style with the app style. component.add_style(self.style) - if self.theme is not None: - component.apply_theme(self.theme) + component.apply_theme(self.theme) # Add component.get_imports() to all_imports. all_imports.update(component.get_imports()) diff --git a/reflex/components/component.py b/reflex/components/component.py index 33ae3e1f1..d9b4d7b5f 100644 --- a/reflex/components/component.py +++ b/reflex/components/component.py @@ -446,7 +446,7 @@ class Component(BaseComponent, ABC): return _compile_component(self) - def _apply_theme(self, theme: Component): + def _apply_theme(self, theme: Optional[Component]): """Apply the theme to this component. Args: @@ -454,7 +454,7 @@ class Component(BaseComponent, ABC): """ pass - def apply_theme(self, theme: Component): + def apply_theme(self, theme: Optional[Component]): """Apply a theme to the component and its children. Args: @@ -462,9 +462,8 @@ class Component(BaseComponent, ABC): """ self._apply_theme(theme) for child in self.children: - if not isinstance(child, Component): - continue - child.apply_theme(theme) + if isinstance(child, Component): + child.apply_theme(theme) def _render(self, props: dict[str, Any] | None = None) -> Tag: """Define how to render the component in React. diff --git a/reflex/components/radix/primitives/__init__.py b/reflex/components/radix/primitives/__init__.py index 7e23d792d..f377c04dc 100644 --- a/reflex/components/radix/primitives/__init__.py +++ b/reflex/components/radix/primitives/__init__.py @@ -1,3 +1,14 @@ """Radix primitive components (https://www.radix-ui.com/primitives).""" from .accordion import accordion, accordion_item +from .form import ( + form_control, + form_field, + form_label, + form_message, + form_root, + form_submit, + form_validity_state, +) +from .progress import progress +from .slider import slider diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py index 705083fba..73bf8ff5a 100644 --- a/reflex/components/radix/primitives/accordion.py +++ b/reflex/components/radix/primitives/accordion.py @@ -3,6 +3,7 @@ from typing import Literal from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent from reflex.components.radix.themes.components.icons import Icon from reflex.style import Style from reflex.utils import imports @@ -16,14 +17,11 @@ LiteralAccordionOrientation = Literal["vertical", "horizontal"] DEFAULT_ANIMATION_DURATION = 250 -class AccordionComponent(Component): +class AccordionComponent(RadixPrimitiveComponent): """Base class for all @radix-ui/accordion components.""" library = "@radix-ui/react-accordion@^1.1.2" - # Change the default rendered element for the one passed as a child. - as_child: Var[bool] - class AccordionRoot(AccordionComponent): """An accordion component.""" diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi index 4da48f2d2..ca1c660d7 100644 --- a/reflex/components/radix/primitives/accordion.pyi +++ b/reflex/components/radix/primitives/accordion.pyi @@ -9,6 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec from reflex.style import Style from typing import Literal from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent from reflex.components.radix.themes.components.icons import Icon from reflex.style import Style from reflex.utils import imports @@ -19,7 +20,7 @@ LiteralAccordionDir = Literal["ltr", "rtl"] LiteralAccordionOrientation = Literal["vertical", "horizontal"] DEFAULT_ANIMATION_DURATION = 250 -class AccordionComponent(Component): +class AccordionComponent(RadixPrimitiveComponent): @overload @classmethod def create( # type: ignore diff --git a/reflex/components/radix/primitives/base.py b/reflex/components/radix/primitives/base.py new file mode 100644 index 000000000..6b6f0fa11 --- /dev/null +++ b/reflex/components/radix/primitives/base.py @@ -0,0 +1,27 @@ +"""The base component for Radix primitives.""" +from typing import List + +from reflex.components.component import Component +from reflex.components.tags.tag import Tag +from reflex.utils import format +from reflex.vars import Var + + +class RadixPrimitiveComponent(Component): + """Basic component for radix Primitives.""" + + # Change the default rendered element for the one passed as a child. + as_child: Var[bool] + + lib_dependencies: List[str] = ["@emotion/react@^11.11.1"] + + def _render(self) -> Tag: + return ( + super() + ._render() + .add_props( + **{ + "class_name": format.to_title_case(self.tag or ""), + } + ) + ) diff --git a/reflex/components/radix/primitives/base.pyi b/reflex/components/radix/primitives/base.pyi new file mode 100644 index 000000000..43a316fe9 --- /dev/null +++ b/reflex/components/radix/primitives/base.pyi @@ -0,0 +1,95 @@ +"""Stub file for reflex/components/radix/primitives/base.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, Literal, Optional, Union, overload +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventChain, EventHandler, EventSpec +from reflex.style import Style +from typing import List +from reflex.components.component import Component +from reflex.components.tags.tag import Tag +from reflex.utils import format +from reflex.vars import Var + +class RadixPrimitiveComponent(Component): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "RadixPrimitiveComponent": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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. + """ + ... diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py new file mode 100644 index 000000000..df3213baa --- /dev/null +++ b/reflex/components/radix/primitives/form.py @@ -0,0 +1,267 @@ +"""Radix form component.""" + +from hashlib import md5 +from typing import Any, Dict, Iterator, Literal + +from jinja2 import Environment + +from reflex.components.component import Component +from reflex.components.tags.tag import Tag +from reflex.constants.base import Dirs +from reflex.constants.event import EventTriggers +from reflex.event import EventChain +from reflex.utils import imports +from reflex.utils.format import format_event_chain, to_camel_case +from reflex.vars import BaseVar, Var + +from .base import RadixPrimitiveComponent + +FORM_DATA = Var.create("form_data") +HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string( + """ + const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => { + const $form = ev.target + ev.preventDefault() + const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}} + + {{ on_submit_event_chain }} + + if ({{ reset_on_submit }}) { + $form.reset() + } + }) + """ +) + + +class FormComponent(RadixPrimitiveComponent): + """Base class for all @radix-ui/react-form components.""" + + library = "@radix-ui/react-form@^0.0.3" + + +class FormRoot(FormComponent): + """The root component of a radix form.""" + + tag = "Root" + + alias = "RadixFormRoot" + + # If true, the form will be cleared after submit. + reset_on_submit: Var[bool] = False # type: ignore + + # The name used to make this form's submit handler function unique + handle_submit_unique_name: Var[str] + + def get_event_triggers(self) -> Dict[str, Any]: + """Event triggers for radix form root. + + Returns: + The triggers for event supported by Root. + """ + return { + **super().get_event_triggers(), + EventTriggers.ON_SUBMIT: lambda e0: [FORM_DATA], + "on_clear_server_errors": lambda: [], + } + + @classmethod + def create(cls, *children, **props): + """Create a form component. + + Args: + *children: The children of the form. + **props: The properties of the form. + + Returns: + The form component. + """ + if "handle_submit_unique_name" in props: + return super().create(*children, **props) + + # Render the form hooks and use the hash of the resulting code to create a unique name. + props["handle_submit_unique_name"] = "" + form = super().create(*children, **props) + form.handle_submit_unique_name = md5( + str(form.get_hooks()).encode("utf-8") + ).hexdigest() + return form + + def _get_imports(self) -> imports.ImportDict: + return imports.merge_imports( + super()._get_imports(), + { + "react": {imports.ImportVar(tag="useCallback")}, + f"/{Dirs.STATE_PATH}": { + imports.ImportVar(tag="getRefValue"), + imports.ImportVar(tag="getRefValues"), + }, + }, + ) + + def _get_hooks(self) -> str | None: + if EventTriggers.ON_SUBMIT not in self.event_triggers: + return + return HANDLE_SUBMIT_JS_JINJA2.render( + handle_submit_unique_name=self.handle_submit_unique_name, + form_data=FORM_DATA, + field_ref_mapping=str(Var.create_safe(self._get_form_refs())), + on_submit_event_chain=format_event_chain( + self.event_triggers[EventTriggers.ON_SUBMIT] + ), + reset_on_submit=self.reset_on_submit, + ) + + def _render(self) -> Tag: + render_tag = ( + super() + ._render() + .remove_props( + "reset_on_submit", + "handle_submit_unique_name", + to_camel_case(EventTriggers.ON_SUBMIT), + ) + ) + if EventTriggers.ON_SUBMIT in self.event_triggers: + render_tag.add_props( + **{ + EventTriggers.ON_SUBMIT: BaseVar( + _var_name=f"handleSubmit_{self.handle_submit_unique_name}", + _var_type=EventChain, + ) + } + ) + return render_tag + + def _get_form_refs(self) -> Dict[str, Any]: + # Send all the input refs to the handler. + form_refs = {} + for ref in self.get_refs(): + # when ref start with refs_ it's an array of refs, so we need different method + # to collect data + if ref.startswith("refs_"): + ref_var = Var.create_safe(ref[:-3]).as_ref() + form_refs[ref[5:-3]] = Var.create_safe( + f"getRefValues({str(ref_var)})", _var_is_local=False + )._replace(merge_var_data=ref_var._var_data) + else: + ref_var = Var.create_safe(ref).as_ref() + form_refs[ref[4:]] = Var.create_safe( + f"getRefValue({str(ref_var)})", _var_is_local=False + )._replace(merge_var_data=ref_var._var_data) + return form_refs + + def _apply_theme(self, theme: Component | None): + return { + "width": "260px", + **self.style, + } + + def _get_vars(self) -> Iterator[Var]: + yield from super()._get_vars() + yield from self._get_form_refs().values() + + +class FormField(FormComponent): + """A form field component.""" + + tag = "Field" + + alias = "RadixFormField" + + name: Var[str] + + server_invalid: Var[bool] + + def _apply_theme(self, theme: Component | None): + return { + "display": "grid", + "margin_bottom": "10px", + **self.style, + } + + +class FormLabel(FormComponent): + """A form label component.""" + + tag = "Label" + + alias = "RadixFormLabel" + + def _apply_theme(self, theme: Component | None): + return { + "font_size": "15px", + "font_weight": "500", + "line_height": "35px", + **self.style, + } + + +class FormControl(FormComponent): + """A form control component.""" + + tag = "Control" + + alias = "RadixFormControl" + + +LiteralMatcher = Literal[ + "badInput", + "patternMismatch", + "rangeOverflow", + "rangeUnderflow", + "stepMismatch", + "tooLong", + "tooShort", + "typeMismatch", + "valid", + "valueMissing", +] + + +class FormMessage(FormComponent): + """A form message component.""" + + tag = "Message" + + alias = "RadixFormMessage" + + # Used to target a specific field by name when rendering outside of a Field part. + name: Var[str] + + # Used to indicate on which condition the message should be visible. + match: Var[LiteralMatcher] + + # Forces the message to be shown. This is useful when using server-side validation. + forceMatch: Var[bool] + + def _apply_theme(self, theme: Component | None): + return { + "font_size": "13px", + "opacity": "0.8", + "color": "white", + **self.style, + } + + +class FormValidityState(FormComponent): + """A form validity state component.""" + + tag = "ValidityState" + alias = "RadixFormValidityState" + + +class FormSubmit(FormComponent): + """A form submit component.""" + + tag = "Submit" + alias = "RadixFormSubmit" + + +form_root = FormRoot.create +form_field = FormField.create +form_label = FormLabel.create +form_control = FormControl.create +form_message = FormMessage.create +form_validity_state = FormValidityState.create +form_submit = FormSubmit.create diff --git a/reflex/components/radix/primitives/form.pyi b/reflex/components/radix/primitives/form.pyi new file mode 100644 index 000000000..060661fc6 --- /dev/null +++ b/reflex/components/radix/primitives/form.pyi @@ -0,0 +1,740 @@ +"""Stub file for reflex/components/radix/primitives/form.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, Literal, Optional, Union, overload +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventChain, EventHandler, EventSpec +from reflex.style import Style +from hashlib import md5 +from typing import Any, Dict, Iterator, Literal +from jinja2 import Environment +from reflex.components.component import Component +from reflex.components.tags.tag import Tag +from reflex.constants.base import Dirs +from reflex.constants.event import EventTriggers +from reflex.event import EventChain +from reflex.utils import imports +from reflex.utils.format import format_event_chain, to_camel_case +from reflex.vars import BaseVar, Var +from .base import RadixPrimitiveComponent + +FORM_DATA = Var.create("form_data") +HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string( + "\n const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {\n const $form = ev.target\n ev.preventDefault()\n const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}}\n\n {{ on_submit_event_chain }}\n\n if ({{ reset_on_submit }}) {\n $form.reset()\n }\n })\n " +) + +class FormComponent(RadixPrimitiveComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "FormComponent": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 FormRoot(FormComponent): + def get_event_triggers(self) -> Dict[str, Any]: ... + @overload + @classmethod + def create( # type: ignore + cls, + *children, + reset_on_submit: Optional[Union[Var[bool], bool]] = None, + handle_submit_unique_name: Optional[Union[Var[str], str]] = None, + as_child: 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, Union[Var, str]]] = None, + on_blur: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_clear_server_errors: 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_submit: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_unmount: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + **props + ) -> "FormRoot": + """Create a form component. + + Args: + *children: The children of the form. + reset_on_submit: If true, the form will be cleared after submit. + handle_submit_unique_name: The name used to make this form's submit handler function unique + as_child: Change the default rendered element for the one passed as a child. + 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 form. + + Returns: + The form component. + """ + ... + +class FormField(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + name: Optional[Union[Var[str], str]] = None, + server_invalid: Optional[Union[Var[bool], bool]] = None, + as_child: 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, Union[Var, 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 + ) -> "FormField": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 FormLabel(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "FormLabel": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 FormControl(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "FormControl": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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. + """ + ... + +LiteralMatcher = Literal[ + "badInput", + "patternMismatch", + "rangeOverflow", + "rangeUnderflow", + "stepMismatch", + "tooLong", + "tooShort", + "typeMismatch", + "valid", + "valueMissing", +] + +class FormMessage(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + name: Optional[Union[Var[str], str]] = None, + match: Optional[ + Union[ + Var[ + Literal[ + "badInput", + "patternMismatch", + "rangeOverflow", + "rangeUnderflow", + "stepMismatch", + "tooLong", + "tooShort", + "typeMismatch", + "valid", + "valueMissing", + ] + ], + Literal[ + "badInput", + "patternMismatch", + "rangeOverflow", + "rangeUnderflow", + "stepMismatch", + "tooLong", + "tooShort", + "typeMismatch", + "valid", + "valueMissing", + ], + ] + ] = None, + forceMatch: Optional[Union[Var[bool], bool]] = None, + as_child: 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, Union[Var, 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 + ) -> "FormMessage": + """Create the component. + + Args: + *children: The children of the component. + name: Used to target a specific field by name when rendering outside of a Field part. + match: Used to indicate on which condition the message should be visible. + forceMatch: Forces the message to be shown. This is useful when using server-side validation. + as_child: Change the default rendered element for the one passed as a child. + 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 FormValidityState(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "FormValidityState": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 FormSubmit(FormComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "FormSubmit": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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. + """ + ... + +form_root = FormRoot.create +form_field = FormField.create +form_label = FormLabel.create +form_control = FormControl.create +form_message = FormMessage.create +form_validity_state = FormValidityState.create +form_submit = FormSubmit.create diff --git a/reflex/components/radix/primitives/progress.py b/reflex/components/radix/primitives/progress.py new file mode 100644 index 000000000..06a8294dd --- /dev/null +++ b/reflex/components/radix/primitives/progress.py @@ -0,0 +1,84 @@ +"""Progress.""" + +from typing import Optional + +from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.style import Style +from reflex.vars import Var + + +class ProgressComponent(RadixPrimitiveComponent): + """A Progress component.""" + + library = "@radix-ui/react-progress@^1.0.3" + + +class ProgressRoot(ProgressComponent): + """The Progress Root component.""" + + tag = "Root" + alias = "RadixProgressRoot" + + # The current progress value. + value: Var[Optional[int]] + + # The maximum progress value. + max: Var[int] + + def _apply_theme(self, theme: Component | None): + self.style = Style( + { + "position": "relative", + "overflow": "hidden", + "background": "black", + "border_radius": "99999px", + "width": "300px", + "height": "25px", + **self.style, + } + ) + + +class ProgressIndicator(ProgressComponent): + """The Progress bar indicator.""" + + tag = "Indicator" + + alias = "RadixProgressIndicator" + + # The current progress value. + value: Var[Optional[int]] + + def _apply_theme(self, theme: Component | None): + self.style = Style( + { + "background-color": "white", + "width": "100%", + "height": "100%", + "transition": f"transform 660ms linear", + "&[data_state='loading']": { + "transition": f"transform 660ms linear", + }, + "transform": f"translateX(-{100 - self.value}%)", # type: ignore + } + ) + + +progress_root = ProgressRoot.create +progress_indicator = ProgressIndicator.create + + +def progress(**props): + """High level API for progress bar. + + Args: + **props: The props of the progress bar + + Returns: + The progress bar. + """ + return progress_root( + progress_indicator(value=props.get("value")), + **props, + ) diff --git a/reflex/components/radix/primitives/progress.pyi b/reflex/components/radix/primitives/progress.pyi new file mode 100644 index 000000000..4742b7cfe --- /dev/null +++ b/reflex/components/radix/primitives/progress.pyi @@ -0,0 +1,268 @@ +"""Stub file for reflex/components/radix/primitives/progress.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, Literal, Optional, Union, overload +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventChain, EventHandler, EventSpec +from reflex.style import Style +from typing import Optional +from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.style import Style +from reflex.vars import Var + +class ProgressComponent(RadixPrimitiveComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "ProgressComponent": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 ProgressRoot(ProgressComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + value: Optional[Union[Var[Optional[int]], Optional[int]]] = None, + max: Optional[Union[Var[int], int]] = None, + as_child: 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, Union[Var, 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 + ) -> "ProgressRoot": + """Create the component. + + Args: + *children: The children of the component. + value: The current progress value. + max: The maximum progress value. + as_child: Change the default rendered element for the one passed as a child. + 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 ProgressIndicator(ProgressComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + value: Optional[Union[Var[Optional[int]], Optional[int]]] = None, + as_child: 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, Union[Var, 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 + ) -> "ProgressIndicator": + """Create the component. + + Args: + *children: The children of the component. + value: The current progress value. + as_child: Change the default rendered element for the one passed as a child. + 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. + """ + ... + +progress_root = ProgressRoot.create +progress_indicator = ProgressIndicator.create + +def progress(**props): ... diff --git a/reflex/components/radix/primitives/slider.py b/reflex/components/radix/primitives/slider.py new file mode 100644 index 000000000..42332bab9 --- /dev/null +++ b/reflex/components/radix/primitives/slider.py @@ -0,0 +1,179 @@ +"""Radix slider components.""" + +from typing import Any, Dict, Literal + +from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.style import Style +from reflex.vars import Var + +LiteralSliderOrientation = Literal["horizontal", "vertical"] +LiteralSliderDir = Literal["ltr", "rtl"] + + +class SliderComponent(RadixPrimitiveComponent): + """Base class for all @radix-ui/react-slider components.""" + + library = "@radix-ui/react-slider@^1.1.2" + + +class SliderRoot(SliderComponent): + """The Slider component comtaining all slider parts.""" + + tag = "Root" + alias = "RadixSliderRoot" + + default_value: Var[list[int]] + + value: Var[list[int]] + + name: Var[str] + + disabled: Var[bool] + + orientation: Var[LiteralSliderOrientation] + + dir: Var[LiteralSliderDir] + + inverted: Var[bool] + + min: Var[int] + + max: Var[int] + + step: Var[int] + + min_steps_between_thumbs: Var[int] + + def get_event_triggers(self) -> Dict[str, Any]: + """Event triggers for radix slider primitive. + + Returns: + The triggers for event supported by radix primitives. + """ + return { + **super().get_event_triggers(), + "on_value_change": lambda e0: [e0], # trigger for all change of a thumb + "on_value_commit": lambda e0: [e0], # trigger when thumb is released + } + + def _apply_theme(self, theme: Component): + self.style = Style( + { + "position": "relative", + "display": "flex", + "align_items": "center", + "user_select": "none", + "touch_action": "none", + "width": "200px", + "height": "20px", + "&[data-orientation='vertical']": { + "flex_direction": "column", + "width": "20px", + "height": "100px", + }, + **self.style, + } + ) + + +class SliderTrack(SliderComponent): + """A Slider Track component.""" + + tag = "Track" + alias = "RadixSliderTrack" + + def _apply_theme(self, theme: Component): + self.style = Style( + { + "position": "relative", + "flex_grow": "1", + "background_color": "black", + "border_radius": "9999px", + "height": "3px", + "&[data-orientation='vertical']": { + "width": "3px", + }, + **self.style, + } + ) + + +class SliderRange(SliderComponent): + """A SliderRange component.""" + + tag = "Range" + alias = "RadixSliderRange" + + def _apply_theme(self, theme: Component): + self.style = Style( + { + "position": "absolute", + "background_color": "white", + "height": "100%", + "&[data-orientation='vertical']": { + "width": "100%", + }, + **self.style, + } + ) + + +class SliderThumb(SliderComponent): + """A SliderThumb component.""" + + tag = "Thumb" + alias = "RadixSliderThumb" + + def _apply_theme(self, theme: Component): + self.style = Style( + { + "display": "block", + "width": "20px", + "height": "20px", + "background_color": "black", + "box_shadow": "0 2px 10px black", + "border_radius": "10px", + "&:hover": { + "background_color": "gray", + }, + "&:focus": { + "outline": "none", + "box_shadow": "0 0 0 4px gray", + }, + **self.style, + } + ) + + +slider_root = SliderRoot.create +slider_track = SliderTrack.create +slider_range = SliderRange.create +slider_thumb = SliderThumb.create + + +def slider( + **props, +) -> Component: + """High level API for slider. + + Args: + **props: The props of the slider. + + Returns: + A slider component. + """ + track = SliderTrack.create(SliderRange.create()) + # if default_value is not set, the thumbs will not render properly but the slider will still work + if "default_value" in props: + children = [ + track, + *[SliderThumb.create() for _ in props.get("default_value", [])], + ] + else: + children = [ + track, + # Foreach.create(props.get("value"), lambda e: SliderThumb.create()), # foreach doesn't render Thumbs properly + ] + + return slider_root(*children, **props) diff --git a/reflex/components/radix/primitives/slider.pyi b/reflex/components/radix/primitives/slider.pyi new file mode 100644 index 000000000..52c0570c0 --- /dev/null +++ b/reflex/components/radix/primitives/slider.pyi @@ -0,0 +1,452 @@ +"""Stub file for reflex/components/radix/primitives/slider.py""" +# ------------------- DO NOT EDIT ---------------------- +# This file was generated by `scripts/pyi_generator.py`! +# ------------------------------------------------------ + +from typing import Any, Dict, Literal, Optional, Union, overload +from reflex.vars import Var, BaseVar, ComputedVar +from reflex.event import EventChain, EventHandler, EventSpec +from reflex.style import Style +from typing import Any, Dict, Literal +from reflex.components.component import Component +from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.style import Style +from reflex.vars import Var + +LiteralSliderOrientation = Literal["horizontal", "vertical"] +LiteralSliderDir = Literal["ltr", "rtl"] + +class SliderComponent(RadixPrimitiveComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "SliderComponent": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 SliderRoot(SliderComponent): + def get_event_triggers(self) -> Dict[str, Any]: ... + @overload + @classmethod + def create( # type: ignore + cls, + *children, + default_value: Optional[Union[Var[list[int]], list[int]]] = None, + value: Optional[Union[Var[list[int]], list[int]]] = None, + name: Optional[Union[Var[str], str]] = None, + disabled: Optional[Union[Var[bool], bool]] = None, + orientation: Optional[ + Union[ + Var[Literal["horizontal", "vertical"]], + Literal["horizontal", "vertical"], + ] + ] = None, + dir: Optional[Union[Var[Literal["ltr", "rtl"]], Literal["ltr", "rtl"]]] = None, + inverted: Optional[Union[Var[bool], bool]] = None, + min: Optional[Union[Var[int], int]] = None, + max: Optional[Union[Var[int], int]] = None, + step: Optional[Union[Var[int], int]] = None, + min_steps_between_thumbs: Optional[Union[Var[int], int]] = None, + as_child: 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, Union[Var, 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, + on_value_change: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + on_value_commit: Optional[ + Union[EventHandler, EventSpec, list, function, BaseVar] + ] = None, + **props + ) -> "SliderRoot": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 SliderTrack(SliderComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "SliderTrack": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 SliderRange(SliderComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "SliderRange": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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 SliderThumb(SliderComponent): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: 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, Union[Var, 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 + ) -> "SliderThumb": + """Create the component. + + Args: + *children: The children of the component. + as_child: Change the default rendered element for the one passed as a child. + 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. + """ + ... + +slider_root = SliderRoot.create +slider_track = SliderTrack.create +slider_range = SliderRange.create +slider_thumb = SliderThumb.create + +def slider(**props) -> Component: ...