diff --git a/reflex/components/radix/themes/components/__init__.py b/reflex/components/radix/themes/components/__init__.py index 36a32a761..4faa35b0d 100644 --- a/reflex/components/radix/themes/components/__init__.py +++ b/reflex/components/radix/themes/components/__init__.py @@ -75,7 +75,7 @@ from .table import ( ) from .tabs import TabsContent, TabsList, TabsRoot, TabsTrigger from .textarea import TextArea -from .textfield import TextFieldInput, TextFieldRoot, TextFieldSlot +from .textfield import Input, TextFieldInput, TextFieldRoot, TextFieldSlot from .tooltip import Tooltip # Alert Dialog @@ -209,6 +209,7 @@ textarea = TextArea.create textfield_root = TextFieldRoot.create textfield_input = TextFieldInput.create textfield_slot = TextFieldSlot.create +input = Input.create # Tooltip tooltip = Tooltip.create diff --git a/reflex/components/radix/themes/components/textfield.py b/reflex/components/radix/themes/components/textfield.py index 89c1612f5..17714a29b 100644 --- a/reflex/components/radix/themes/components/textfield.py +++ b/reflex/components/radix/themes/components/textfield.py @@ -1,9 +1,11 @@ """Interactive components provided by @radix-ui/themes.""" from typing import Any, Dict, Literal +import reflex as rx from reflex.components import el from reflex.components.component import Component from reflex.components.core.debounce import DebounceInput +from reflex.components.radix.themes.components.icons import Icon from reflex.constants import EventTriggers from reflex.vars import Var @@ -90,3 +92,79 @@ class TextFieldSlot(RadixThemesComponent): # Override the gap spacing between slot and input: "1" - "9" gap: Var[LiteralSize] + + +class Input(TextFieldInput): + """High level wrapper for the Input component.""" + + # The icon to render before the input. + icon: Var[str] + + # Text field size "1" - "3" + size: Var[LiteralTextFieldSize] + + # Variant of text field: "classic" | "surface" | "soft" + variant: Var[LiteralTextFieldVariant] + + # Override theme color for text field + color: Var[LiteralAccentColor] + + # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full" + radius: Var[LiteralRadius] + + # Whether the input should have autocomplete enabled + auto_complete: Var[bool] + + # Disables the input + disabled: Var[bool] + + # Specifies the maximum number of characters allowed in the input + max_length: Var[str] + + # Specifies the minimum number of characters required in the input + min_length: Var[str] + + # Name of the input, used when sending form data + name: Var[str] + + # Placeholder text in the input + placeholder: Var[str] + + # Indicates that the input is required + required: Var[bool] + + # Value of the input + value: Var[str] + + @classmethod + def create(cls, **props): + """Create an Input component. + + Args: + **props: The properties of the component. + + Returns: + The component. + """ + input_props = { + prop: props.pop(prop) + for prop in [ + "auto_complete", + "disabled", + "max_length", + "min_length", + "name", + "placeholder", + "required", + "value", + ] + if prop in props + } + + icon = props.pop("icon", None) + + return TextFieldRoot.create( + TextFieldSlot.create(Icon.create(tag=icon)) if icon else rx.fragment(), + TextFieldInput.create(**input_props), + **props, + ) diff --git a/reflex/components/radix/themes/components/textfield.pyi b/reflex/components/radix/themes/components/textfield.pyi index b9ae8bcaf..09027bd92 100644 --- a/reflex/components/radix/themes/components/textfield.pyi +++ b/reflex/components/radix/themes/components/textfield.pyi @@ -8,9 +8,11 @@ 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 +import reflex as rx from reflex.components import el from reflex.components.component import Component from reflex.components.core.debounce import DebounceInput +from reflex.components.radix.themes.components.icons import Icon from reflex.constants import EventTriggers from reflex.vars import Var from ..base import ( @@ -829,3 +831,375 @@ class TextFieldSlot(RadixThemesComponent): A new component instance. """ ... + +class Input(TextFieldInput): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + icon: Optional[Union[Var[str], str]] = None, + size: Optional[ + Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]] + ] = None, + variant: Optional[ + Union[ + Var[Literal["classic", "surface", "soft"]], + Literal["classic", "surface", "soft"], + ] + ] = None, + color: Optional[ + Union[ + Var[ + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ] + ], + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ], + ] + ] = None, + radius: Optional[ + Union[ + Var[Literal["none", "small", "medium", "large", "full"]], + Literal["none", "small", "medium", "large", "full"], + ] + ] = None, + auto_complete: Optional[Union[Var[bool], bool]] = None, + disabled: Optional[Union[Var[bool], bool]] = None, + max_length: Optional[Union[Var[str], str]] = None, + min_length: Optional[Union[Var[str], str]] = None, + name: Optional[Union[Var[str], str]] = None, + placeholder: Optional[Union[Var[str], str]] = None, + required: Optional[Union[Var[bool], bool]] = None, + value: Optional[Union[Var[str], str]] = None, + accept: 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_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, + dirname: 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, + 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, + 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, + pattern: 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, + 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, + 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, + width: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + access_key: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + auto_capitalize: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + content_editable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + context_menu: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + draggable: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + enter_key_hint: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + hidden: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + input_mode: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + item_prop: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None, + spell_check: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + tab_index: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + title: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + translate: Optional[ + Union[Var[Union[str, int, bool]], Union[str, int, bool]] + ] = None, + m: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + mx: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + my: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + mt: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + mr: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + mb: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = None, + ml: Optional[ + Union[ + Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]], + Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"], + ] + ] = 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_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 + ) -> "Input": + """Create an Input component. + + Args: + icon: The icon to render before the input. + size: Text field 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" + auto_complete: Whether the input should have autocomplete enabled + disabled: Disables the input + max_length: Specifies the maximum number of characters allowed in the input + min_length: Specifies the minimum number of characters required in the input + name: Name of the input, used when sending form data + placeholder: Placeholder text in the input + required: Indicates that the input is required + value: Value of the input + accept: Accepted types of files when the input is file type + alt: Alternate text for input type="image" + auto_focus: Automatically focuses the input when the page loads + capture: Captures media from the user (camera or microphone) + checked: Indicates whether the input is checked (for checkboxes and radio buttons) + dirname: Name part of the input to submit in 'dir' and 'name' pair when form is submitted + form: Associates the input with a form (by id) + form_action: URL to send the form data to (for type="submit" buttons) + form_enc_type: How the form data should be encoded when submitting to the server (for type="submit" buttons) + form_method: HTTP method to use for sending form data (for type="submit" buttons) + form_no_validate: Bypasses form validation when submitting (for type="submit" buttons) + form_target: Specifies where to display the response after submitting the form (for type="submit" buttons) + height: The height of the input (only for type="image") + list: References a datalist for suggested options + max: Specifies the maximum value for the input + min: Specifies the minimum value for the input + multiple: Indicates whether multiple values can be entered in an input of the type email or file + pattern: Regex pattern the input's value must match to be valid + read_only: Indicates whether the input is read-only + src: URL for image inputs + step: Specifies the legal number intervals for an input + type: Specifies the type of input + use_map: Name of the image map used with the input + width: The width of the input (only for type="image") + access_key: Provides a hint for generating a keyboard shortcut for the current element. + auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user. + content_editable: Indicates whether the element's content is editable. + context_menu: Defines the ID of a