reflex 0.6.8a2__py3-none-any.whl → 0.7.0a1__py3-none-any.whl

reflex/components/datadisplay/code.py

@@ -14,7 +14,7 @@ from reflex.components.radix.themes.layout.box import Box
 from reflex.constants.colors import Color
 from reflex.event import set_clipboard
 from reflex.style import Style
-from reflex.utils import console, format
+from reflex.utils import format
 from reflex.utils.imports import ImportVar
 from reflex.vars.base import LiteralVar, Var, VarData
 
@@ -382,7 +382,7 @@ for theme_name in dir(Theme):
 class CodeBlock(Component, MarkdownComponentMap):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.6.0"
+    library = "react-syntax-highlighter@15.6.1"
 
     tag = "PrismAsyncLight"
 
@@ -438,6 +438,8 @@ class CodeBlock(Component, MarkdownComponentMap):
         can_copy = props.pop("can_copy", False)
         copy_button = props.pop("copy_button", None)
 
+        # react-syntax-highlighter doesn't have an explicit "light" or "dark" theme so we use one-light and one-dark
+        # themes respectively to ensure code compatibility.
         if "theme" not in props:
             # Default color scheme responds to global color mode.
             props["theme"] = color_mode_cond(
@@ -445,20 +447,9 @@ class CodeBlock(Component, MarkdownComponentMap):
                 dark=Theme.one_dark,
             )
 
-        # react-syntax-highlighter doesn't have an explicit "light" or "dark" theme so we use one-light and one-dark
-        # themes respectively to ensure code compatibility.
-        if "theme" in props and not isinstance(props["theme"], Var):
-            props["theme"] = getattr(Theme, format.to_snake_case(props["theme"]))  # type: ignore
-            console.deprecate(
-                feature_name="theme prop as string",
-                reason="Use code_block.themes instead.",
-                deprecation_version="0.6.0",
-                removal_version="0.7.0",
-            )
-
         if can_copy:
             code = children[0]
-            copy_button = (  # type: ignore
+            copy_button = (
                 copy_button
                 if copy_button is not None
                 else Button.create(

reflex/components/datadisplay/dataeditor.py

@@ -165,7 +165,7 @@ class DataEditor(NoSSRComponent):
 
     tag = "DataEditor"
     is_default = True
-    library: str = "@glideapps/glide-data-grid@^6.0.3"
+    library: str | None = "@glideapps/glide-data-grid@^6.0.3"
     lib_dependencies: List[str] = [
         "lodash@^4.17.21",
         "react-responsive-carousel@^3.2.7",
@@ -321,6 +321,8 @@ class DataEditor(NoSSRComponent):
         Returns:
             The import dict.
         """
+        if self.library is None:
+            return {}
         return {
             "": f"{format.format_library_name(self.library)}/dist/index.css",
             self.library: "GridCellKind",
@@ -343,9 +345,9 @@ class DataEditor(NoSSRComponent):
             data_callback = self.get_cell_content._js_expr
         else:
             data_callback = f"getData_{editor_id}"
-            self.get_cell_content = Var(_js_expr=data_callback)  # type: ignore
+            self.get_cell_content = Var(_js_expr=data_callback)
 
-        code = [f"function {data_callback}([col, row])" "{"]
+        code = [f"function {data_callback}([col, row]){{"]
 
         columns_path = str(self.columns)
         data_path = str(self.data)
@@ -385,7 +387,8 @@ class DataEditor(NoSSRComponent):
                 raise ValueError(
                     "DataEditor data must be an ArrayVar if rows is not provided."
                 )
-            props["rows"] = data.length() if isinstance(data, Var) else len(data)
+
+            props["rows"] = data.length() if isinstance(data, ArrayVar) else len(data)
 
         if not isinstance(columns, Var) and len(columns):
             if types.is_dataframe(type(data)) or (

reflex/components/datadisplay/logo.py

@@ -5,20 +5,22 @@ from typing import Union
 import reflex as rx
 
 
-def svg_logo(color: Union[str, rx.Var[str]] = rx.color_mode_cond("#110F1F", "white")):
+def svg_logo(
+    color: Union[str, rx.Var[str]] = rx.color_mode_cond("#110F1F", "white"),
+    **props,
+):
     """A Reflex logo SVG.
 
     Args:
         color: The color of the logo.
+        props: Extra props to pass to the svg component.
 
     Returns:
         The Reflex logo SVG.
     """
 
-    def logo_path(d):
-        return rx.el.svg.path(
-            d=d,
-        )
+    def logo_path(d: str):
+        return rx.el.svg.path(d=d)
 
     paths = [
         "M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z",
@@ -31,11 +33,14 @@ def svg_logo(color: Union[str, rx.Var[str]] = rx.color_mode_cond("#110F1F", "whi
 
     return rx.el.svg(
         *[logo_path(d) for d in paths],
-        width="56",
-        height="12",
-        viewBox="0 0 56 12",
+        rx.el.title("Reflex"),
+        aria_label="Reflex",
+        role="img",
+        width=props.pop("width", "56"),
+        height=props.pop("height", "12"),
         fill=color,
         xmlns="http://www.w3.org/2000/svg",
+        **props,
     )
 
 

reflex/components/datadisplay/shiki_code_block.py

@@ -602,7 +602,7 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
 
         transformer_styles = {}
         # Collect styles from transformers and wrapper
-        for transformer in code_block.transformers._var_value:  # type: ignore
+        for transformer in code_block.transformers._var_value:  # pyright: ignore [reportAttributeAccessIssue]
             if isinstance(transformer, ShikiBaseTransformers) and transformer.style:
                 transformer_styles.update(transformer.style)
         transformer_styles.update(code_wrapper_props.pop("style", {}))
@@ -621,18 +621,22 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
 
         Returns:
             Imports for the component.
+
+        Raises:
+            ValueError: If the transformers are not of type LiteralVar.
         """
         imports = defaultdict(list)
+        if not isinstance(self.transformers, LiteralVar):
+            raise ValueError(
+                f"transformers should be a LiteralVar type. Got {type(self.transformers)} instead."
+            )
         for transformer in self.transformers._var_value:
             if isinstance(transformer, ShikiBaseTransformers):
                 imports[transformer.library].extend(
                     [ImportVar(tag=str(fn)) for fn in transformer.fns]
                 )
-                (
+                if transformer.library not in self.lib_dependencies:
                     self.lib_dependencies.append(transformer.library)
-                    if transformer.library not in self.lib_dependencies
-                    else None
-                )
         return imports
 
     @classmethod
@@ -653,8 +657,9 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
             raise ValueError(
                 f"the function names should be str names of functions in the specified transformer: {library!r}"
             )
-        return ShikiBaseTransformers(  # type: ignore
-            library=library, fns=[FunctionStringVar.create(fn) for fn in fns]
+        return ShikiBaseTransformers(
+            library=library,
+            fns=[FunctionStringVar.create(fn) for fn in fns],  # pyright: ignore [reportCallIssue]
         )
 
     def _render(self, props: dict[str, Any] | None = None):
@@ -757,13 +762,13 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
 
         if can_copy:
             code = children[0]
-            copy_button = (  # type: ignore
+            copy_button = (
                 copy_button
                 if copy_button is not None
                 else Button.create(
                     Icon.create(tag="copy", size=16, color=color("gray", 11)),
                     on_click=[
-                        set_clipboard(cls._strip_transformer_triggers(code)),  # type: ignore
+                        set_clipboard(cls._strip_transformer_triggers(code)),
                         copy_script(),
                     ],
                     style=Style(

reflex/components/dynamic.py

@@ -4,7 +4,7 @@ from typing import TYPE_CHECKING, Union
 
 from reflex import constants
 from reflex.utils import imports
-from reflex.utils.exceptions import DynamicComponentMissingLibrary
+from reflex.utils.exceptions import DynamicComponentMissingLibraryError
 from reflex.utils.format import format_library_name
 from reflex.utils.serializers import serializer
 from reflex.vars import Var, get_unique_variable_name
@@ -36,13 +36,15 @@ def bundle_library(component: Union["Component", str]):
         component: The component to bundle the library with.
 
     Raises:
-        DynamicComponentMissingLibrary: Raised when a dynamic component is missing a library.
+        DynamicComponentMissingLibraryError: Raised when a dynamic component is missing a library.
     """
     if isinstance(component, str):
         bundled_libraries.add(component)
         return
     if component.library is None:
-        raise DynamicComponentMissingLibrary("Component must have a library to bundle.")
+        raise DynamicComponentMissingLibraryError(
+            "Component must have a library to bundle."
+        )
     bundled_libraries.add(format_library_name(component.library))
 
 
@@ -136,6 +138,23 @@ def load_dynamic_serializer():
 
         module_code_lines.insert(0, "const React = window.__reflex.react;")
 
+        function_line = next(
+            index
+            for index, line in enumerate(module_code_lines)
+            if line.startswith("export default function")
+        )
+
+        module_code_lines = [
+            line
+            for _, line in sorted(
+                enumerate(module_code_lines),
+                key=lambda x: (
+                    not (x[1].startswith("import ") and x[0] < function_line),
+                    x[0],
+                ),
+            )
+        ]
+
         return "\n".join(
             [
                 "//__reflex_evaluate",

reflex/components/el/constants/reflex.py

@@ -48,4 +48,4 @@ PROP_TO_ELEMENTS = {
 ELEMENT_TO_PROPS = defaultdict(list)
 for prop, elements in PROP_TO_ELEMENTS.items():
     for el in elements:
-        ELEMENT_TO_PROPS[el].append(prop)  # type: ignore
+        ELEMENT_TO_PROPS[el].append(prop)

reflex/components/el/element.py

@@ -6,7 +6,7 @@ from reflex.components.component import Component
 class Element(Component):
     """The base class for all raw HTML elements."""
 
-    def __eq__(self, other):
+    def __eq__(self, other: object):
         """Two elements are equal if they have the same tag.
 
         Args:

reflex/components/el/elements/forms.py

@@ -102,7 +102,7 @@ class Fieldset(Element):
     name: Var[Union[str, int, bool]]
 
 
-def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]:
+def on_submit_event_spec() -> Tuple[Var[dict[str, Any]]]:
     """Event handler spec for the on_submit event.
 
     Returns:
@@ -111,7 +111,7 @@ def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]:
     return (FORM_DATA,)
 
 
-def on_submit_string_event_spec() -> Tuple[Var[Dict[str, str]]]:
+def on_submit_string_event_spec() -> Tuple[Var[dict[str, str]]]:
     """Event handler spec for the on_submit event.
 
     Returns:
@@ -153,7 +153,7 @@ class Form(BaseHTML):
     target: Var[Union[str, int, bool]]
 
     # If true, the form will be cleared after submit.
-    reset_on_submit: Var[bool] = False  # type: ignore
+    reset_on_submit: Var[bool] = Var.create(False)
 
     # The name used to make this form's submit handler function unique.
     handle_submit_unique_name: Var[str]
@@ -405,7 +405,7 @@ class Input(BaseHTML):
             (value_var := Var.create(value))._var_type
         ):
             props["value"] = ternary_operation(
-                (value_var != Var.create(None))  # pyright: ignore [reportGeneralTypeIssues]
+                (value_var != Var.create(None))  # pyright: ignore [reportArgumentType]
                 & (value_var != Var(_js_expr="undefined")),
                 value,
                 Var.create(""),

reflex/components/el/elements/forms.pyi

@@ -270,8 +270,8 @@ class Fieldset(Element):
         """
         ...
 
-def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]: ...
-def on_submit_string_event_spec() -> Tuple[Var[Dict[str, str]]]: ...
+def on_submit_event_spec() -> Tuple[Var[dict[str, Any]]]: ...
+def on_submit_string_event_spec() -> Tuple[Var[dict[str, str]]]: ...
 
 class Form(BaseHTML):
     @overload
@@ -341,10 +341,10 @@ class Form(BaseHTML):
         on_submit: Optional[
             Union[
                 Union[
-                    EventType[[], BASE_STATE], EventType[[Dict[str, Any]], BASE_STATE]
+                    EventType[[], BASE_STATE], EventType[[dict[str, Any]], BASE_STATE]
                 ],
                 Union[
-                    EventType[[], BASE_STATE], EventType[[Dict[str, str]], BASE_STATE]
+                    EventType[[], BASE_STATE], EventType[[dict[str, str]], BASE_STATE]
                 ],
             ]
         ] = None,

reflex/components/lucide/icon.py

@@ -2,13 +2,15 @@
 
 from reflex.components.component import Component
 from reflex.utils import format
-from reflex.vars.base import Var
+from reflex.utils.imports import ImportVar
+from reflex.vars.base import LiteralVar, Var
+from reflex.vars.sequence import LiteralStringVar
 
 
 class LucideIconComponent(Component):
     """Lucide Icon Component."""
 
-    library = "lucide-react@0.469.0"
+    library = "lucide-react@0.471.1"
 
 
 class Icon(LucideIconComponent):
@@ -32,6 +34,7 @@ class Icon(LucideIconComponent):
         Raises:
             AttributeError: The errors tied to bad usage of the Icon component.
             ValueError: If the icon tag is invalid.
+            TypeError: If the icon name is not a string.
 
         Returns:
             The created component.
@@ -39,7 +42,6 @@ class Icon(LucideIconComponent):
         if children:
             if len(children) == 1 and isinstance(children[0], str):
                 props["tag"] = children[0]
-                children = []
             else:
                 raise AttributeError(
                     f"Passing multiple children to Icon component is not allowed: remove positional arguments {children[1:]} to fix"
@@ -47,19 +49,46 @@ class Icon(LucideIconComponent):
         if "tag" not in props:
             raise AttributeError("Missing 'tag' keyword-argument for Icon")
 
+        tag: str | Var | LiteralVar = props.pop("tag")
+        if isinstance(tag, LiteralVar):
+            if isinstance(tag, LiteralStringVar):
+                tag = tag._var_value
+            else:
+                raise TypeError(f"Icon name must be a string, got {type(tag)}")
+        elif isinstance(tag, Var):
+            return DynamicIcon.create(name=tag, **props)
+
         if (
-            not isinstance(props["tag"], str)
-            or format.to_snake_case(props["tag"]) not in LUCIDE_ICON_LIST
+            not isinstance(tag, str)
+            or format.to_snake_case(tag) not in LUCIDE_ICON_LIST
         ):
             raise ValueError(
-                f"Invalid icon tag: {props['tag']}. Please use one of the following: {', '.join(LUCIDE_ICON_LIST[0:25])}, ..."
+                f"Invalid icon tag: {tag}. Please use one of the following: {', '.join(LUCIDE_ICON_LIST[0:25])}, ..."
                 "\nSee full list at https://lucide.dev/icons."
             )
 
-        props["tag"] = format.to_title_case(format.to_snake_case(props["tag"])) + "Icon"
+        if tag in LUCIDE_ICON_MAPPING_OVERRIDE:
+            props["tag"] = LUCIDE_ICON_MAPPING_OVERRIDE[tag]
+        else:
+            props["tag"] = format.to_title_case(format.to_snake_case(tag)) + "Icon"
         props["alias"] = f"Lucide{props['tag']}"
         props.setdefault("color", "var(--current-color)")
-        return super().create(*children, **props)
+        return super().create(**props)
+
+
+class DynamicIcon(LucideIconComponent):
+    """A DynamicIcon component."""
+
+    tag = "DynamicIcon"
+
+    name: Var[str]
+
+    def _get_imports(self):
+        _imports = super()._get_imports()
+        if self.library:
+            _imports.pop(self.library)
+        _imports["lucide-react/dynamic"] = [ImportVar("DynamicIcon", install=False)]
+        return _imports
 
 
 LUCIDE_ICON_LIST = [
@@ -841,6 +870,7 @@ LUCIDE_ICON_LIST = [
     "house",
     "house_plug",
     "house_plus",
+    "house_wifi",
     "ice_cream_bowl",
     "ice_cream_cone",
     "id_card",
@@ -1529,6 +1559,7 @@ LUCIDE_ICON_LIST = [
     "trending_up_down",
     "triangle",
     "triangle_alert",
+    "triangle_dashed",
     "triangle_right",
     "trophy",
     "truck",
@@ -1634,3 +1665,10 @@ LUCIDE_ICON_LIST = [
     "zoom_in",
     "zoom_out",
 ]
+
+# The default transformation of some icon names doesn't match how the
+# icons are exported from Lucide. Manual overrides can go here.
+LUCIDE_ICON_MAPPING_OVERRIDE = {
+    "grid_2x_2_check": "Grid2x2Check",
+    "grid_2x_2_x": "Grid2x2X",
+}

reflex/components/lucide/icon.pyi

@@ -104,12 +104,60 @@ class Icon(LucideIconComponent):
         Raises:
             AttributeError: The errors tied to bad usage of the Icon component.
             ValueError: If the icon tag is invalid.
+            TypeError: If the icon name is not a string.
 
         Returns:
             The created component.
         """
         ...
 
+class DynamicIcon(LucideIconComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        name: 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, Union[Var, Any]]] = None,
+        on_blur: Optional[EventType[[], BASE_STATE]] = None,
+        on_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_context_menu: Optional[EventType[[], BASE_STATE]] = None,
+        on_double_click: Optional[EventType[[], BASE_STATE]] = None,
+        on_focus: Optional[EventType[[], BASE_STATE]] = None,
+        on_mount: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_down: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_enter: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_leave: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_move: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_out: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_over: Optional[EventType[[], BASE_STATE]] = None,
+        on_mouse_up: Optional[EventType[[], BASE_STATE]] = None,
+        on_scroll: Optional[EventType[[], BASE_STATE]] = None,
+        on_unmount: Optional[EventType[[], BASE_STATE]] = None,
+        **props,
+    ) -> "DynamicIcon":
+        """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.
+        """
+        ...
+
 LUCIDE_ICON_LIST = [
     "a_arrow_down",
     "a_arrow_up",
@@ -889,6 +937,7 @@ LUCIDE_ICON_LIST = [
     "house",
     "house_plug",
     "house_plus",
+    "house_wifi",
     "ice_cream_bowl",
     "ice_cream_cone",
     "id_card",
@@ -1577,6 +1626,7 @@ LUCIDE_ICON_LIST = [
     "trending_up_down",
     "triangle",
     "triangle_alert",
+    "triangle_dashed",
     "triangle_right",
     "trophy",
     "truck",
@@ -1682,3 +1732,7 @@ LUCIDE_ICON_LIST = [
     "zoom_in",
     "zoom_out",
 ]
+LUCIDE_ICON_MAPPING_OVERRIDE = {
+    "grid_2x_2_check": "Grid2x2Check",
+    "grid_2x_2_x": "Grid2x2X",
+}

reflex/components/markdown/markdown.py

@@ -8,7 +8,7 @@ from functools import lru_cache
 from hashlib import md5
 from typing import Any, Callable, Dict, Sequence, Union
 
-from reflex.components.component import Component, CustomComponent
+from reflex.components.component import BaseComponent, Component, CustomComponent
 from reflex.components.tags.tag import Tag
 from reflex.utils import types
 from reflex.utils.imports import ImportDict, ImportVar
@@ -65,8 +65,8 @@ def get_base_component_map() -> dict[str, Callable]:
         "h5": lambda value: Heading.create(value, as_="h5", size="2", margin_y="0.5em"),
         "h6": lambda value: Heading.create(value, as_="h6", size="1", margin_y="0.5em"),
         "p": lambda value: Text.create(value, margin_y="1em"),
-        "ul": lambda value: UnorderedList.create(value, margin_y="1em"),  # type: ignore
-        "ol": lambda value: OrderedList.create(value, margin_y="1em"),  # type: ignore
+        "ul": lambda value: UnorderedList.create(value, margin_y="1em"),
+        "ol": lambda value: OrderedList.create(value, margin_y="1em"),
         "li": lambda value: ListItem.create(value, margin_y="0.5em"),
         "a": lambda value: Link.create(value),
         "code": lambda value: Code.create(value),
@@ -236,7 +236,7 @@ class Markdown(Component):
                 ),
             },
             *[
-                component(_MOCK_ARG)._get_all_imports()  # type: ignore
+                component(_MOCK_ARG)._get_all_imports()
                 for component in self.component_map.values()
             ],
         ]
@@ -327,7 +327,7 @@ const {_LANGUAGE!s} = match ? match[1] : '';
             if tag != "codeblock"
             # For codeblock, the mapping for some cases returns an array of elements. Let's join them into a string.
             else ternary_operation(
-                ARRAY_ISARRAY.call(_CHILDREN),  # type: ignore
+                ARRAY_ISARRAY.call(_CHILDREN),  # pyright: ignore [reportArgumentType]
                 _CHILDREN.to(list).join("\n"),
                 _CHILDREN,
             ).to(str)
@@ -379,7 +379,9 @@ const {_LANGUAGE!s} = match ? match[1] : '';
         # fallback to the default fn Var creation if the component is not a MarkdownComponentMap.
         return MarkdownComponentMap.create_map_fn_var(fn_body=formatted_component)
 
-    def _get_map_fn_custom_code_from_children(self, component) -> list[str]:
+    def _get_map_fn_custom_code_from_children(
+        self, component: BaseComponent
+    ) -> list[str]:
         """Recursively get markdown custom code from children components.
 
         Args:
@@ -409,7 +411,7 @@ const {_LANGUAGE!s} = match ? match[1] : '';
         return custom_code_list
 
     @staticmethod
-    def _component_map_hash(component_map) -> str:
+    def _component_map_hash(component_map: dict) -> str:
         inp = str(
             {tag: component(_MOCK_ARG) for tag, component in component_map.items()}
         ).encode()
@@ -425,7 +427,7 @@ const {_LANGUAGE!s} = match ? match[1] : '';
         for _component in self.component_map.values():
             comp = _component(_MOCK_ARG)
             hooks.update(comp._get_all_hooks())
-        formatted_hooks = MACROS.module.renderHooks(hooks)  # type: ignore
+        formatted_hooks = MACROS.module.renderHooks(hooks)  # pyright: ignore [reportAttributeAccessIssue]
         return f"""
         function {self._get_component_map_name()} () {{
             {formatted_hooks}

reflex/components/moment/moment.py

@@ -28,9 +28,9 @@ class MomentDelta:
 class Moment(NoSSRComponent):
     """The Moment component."""
 
-    tag: str = "Moment"
+    tag: str | None = "Moment"
     is_default = True
-    library: str = "react-moment"
+    library: str | None = "react-moment"
     lib_dependencies: List[str] = ["moment"]
 
     # How often the date update (how often time update / 0 to disable).

reflex/components/next/image.py

@@ -1,13 +1,17 @@
 """Image component from next/image."""
 
+from __future__ import annotations
+
 from typing import Any, Literal, Optional, Union
 
 from reflex.event import EventHandler, no_args_event_spec
-from reflex.utils import types
+from reflex.utils import console, types
 from reflex.vars.base import Var
 
 from .base import NextComponent
 
+DEFAULT_W_H = "100%"
+
 
 class Image(NextComponent):
     """Display an image."""
@@ -53,7 +57,7 @@ class Image(NextComponent):
     loading: Var[Literal["lazy", "eager"]]
 
     # A Data URL to be used as a placeholder image before the src image successfully loads. Only takes effect when combined with placeholder="blur".
-    blurDataURL: Var[str]
+    blur_data_url: Var[str]
 
     # Fires when the image has loaded.
     on_load: EventHandler[no_args_event_spec]
@@ -80,10 +84,18 @@ class Image(NextComponent):
         Returns:
             _type_: _description_
         """
+        if "blurDataURL" in props:
+            console.deprecate(
+                feature_name="blurDataURL",
+                reason="Use blur_data_url instead",
+                deprecation_version="0.7.0",
+                removal_version="0.8.0",
+            )
+            props["blur_data_url"] = props.pop("blurDataURL")
+
         style = props.get("style", {})
-        DEFAULT_W_H = "100%"
 
-        def check_prop_type(prop_name, prop_value):
+        def check_prop_type(prop_name: str, prop_value: int | str | None):
             if types.check_prop_in_allowed_types(prop_value, allowed_types=[int]):
                 props[prop_name] = prop_value