reflex 0.5.0__tar.gz → 0.5.0a1__tar.gz

{reflex-0.5.0 → reflex-0.5.0a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.0
+Version: 0.5.0a1
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0

{reflex-0.5.0 → reflex-0.5.0a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.0"
+version = "0.5.0a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/.templates/apps/demo/code/demo.py

@@ -44,7 +44,7 @@ def template(main_content: Callable[[], rx.Component]) -> rx.Component:
                 ),
                 rx.chakra.menu_item(
                     rx.chakra.link(
-                        "Contact", href="mailto:founders@reflex.dev", width="100%"
+                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
                     )
                 ),
             ),

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/.templates/jinja/web/tailwind.config.js.jinja2

@@ -17,16 +17,4 @@ module.exports = {
 	{% if darkMode is defined %}
 	darkMode: {{darkMode|json_dumps}},
 	{% endif %}
-	{% if corePlugins is defined %}
-	corePlugins: {{corePlugins|json_dumps}},
-	{% endif %}
-	{% if important is defined %}
-	important: {{important|json_dumps}},
-	{% endif %}
-	{% if prefix is defined %}
-	prefix: {{prefix|json_dumps}},
-	{% endif %}
-	{% if separator is defined %}
-	separator: {{separator|json_dumps}},
-	{% endif %}
 };

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/components/component.py

@@ -781,7 +781,7 @@ class Component(BaseComponent, ABC):
 
         return cls(children=children, **props)
 
-    def add_style(self) -> dict[str, Any] | None:
+    def add_style(self) -> Style | None:
         """Add style to the component.
 
         Downstream components can override this method to return a style dict
@@ -801,16 +801,20 @@ class Component(BaseComponent, ABC):
             The style to add.
         """
         styles = []
+        vars = []
 
         # Walk the MRO to call all `add_style` methods.
         for base in self._iter_parent_classes_with_method("add_style"):
             s = base.add_style(self)  # type: ignore
             if s is not None:
                 styles.append(s)
+                vars.append(s._var_data)
 
         _style = Style()
         for s in reversed(styles):
             _style.update(s)
+
+        _style._var_data = VarData.merge(*vars)
         return _style
 
     def _get_component_style(self, styles: ComponentStyle) -> Style | None:

reflex-0.5.0a1/reflex/components/core/foreach.py

@@ -0,0 +1,104 @@
+"""Create a list of components from an iterable."""
+from __future__ import annotations
+
+import inspect
+from hashlib import md5
+from typing import Any, Callable, Iterable
+
+from reflex.components.base.fragment import Fragment
+from reflex.components.component import Component
+from reflex.components.tags import IterTag
+from reflex.constants import MemoizationMode
+from reflex.vars import Var
+
+
+class Foreach(Component):
+    """A component that takes in an iterable and a render function and renders a list of components."""
+
+    _memoization_mode = MemoizationMode(recursive=False)
+
+    # The iterable to create components from.
+    iterable: Var[Iterable]
+
+    # A function from the render args to the component.
+    render_fn: Callable = Fragment.create
+
+    @classmethod
+    def create(cls, iterable: Var[Iterable], render_fn: Callable, **props) -> Foreach:
+        """Create a foreach component.
+
+        Args:
+            iterable: The iterable to create components from.
+            render_fn: A function from the render args to the component.
+            **props: The attributes to pass to each child component.
+
+        Returns:
+            The foreach component.
+
+        Raises:
+            TypeError: If the iterable is of type Any.
+        """
+        iterable = Var.create(iterable)  # type: ignore
+        if iterable._var_type == Any:
+            raise TypeError(
+                f"Could not foreach over var of type Any. (If you are trying to foreach over a state var, add a type annotation to the var.)"
+            )
+        component = cls(
+            iterable=iterable,
+            render_fn=render_fn,
+            **props,
+        )
+        # Keep a ref to a rendered component to determine correct imports.
+        component.children = [
+            component._render(props=dict(index_var_name="i")).render_component()
+        ]
+        return component
+
+    def _render(self, props: dict[str, Any] | None = None) -> IterTag:
+        props = {} if props is None else props.copy()
+
+        # Determine the arg var name based on the params accepted by render_fn.
+        render_sig = inspect.signature(self.render_fn)
+        params = list(render_sig.parameters.values())
+        if len(params) >= 1:
+            props.setdefault("arg_var_name", params[0].name)
+
+        if len(params) >= 2:
+            # Determine the index var name based on the params accepted by render_fn.
+            props.setdefault("index_var_name", params[1].name)
+        elif "index_var_name" not in props:
+            # Otherwise, use a deterministic index, based on the rendered code.
+            code_hash = md5(str(self.children[0].render()).encode("utf-8")).hexdigest()
+            props.setdefault("index_var_name", f"index_{code_hash}")
+
+        return IterTag(
+            iterable=self.iterable,
+            render_fn=self.render_fn,
+            **props,
+        )
+
+    def render(self):
+        """Render the component.
+
+        Returns:
+            The dictionary for template of component.
+        """
+        tag = self._render()
+        component = tag.render_component()
+
+        return dict(
+            tag.add_props(
+                **self.event_triggers,
+                key=self.key,
+                sx=self.style,
+                id=self.id,
+                class_name=self.class_name,
+            ).set(
+                children=[component.render()],
+                props=tag.format_props(),
+            ),
+            iterable_state=tag.iterable._var_full_name,
+            arg_name=tag.arg_var_name,
+            arg_index=tag.get_index_var_arg(),
+            iterable_type=tag.iterable._var_type.mro()[0].__name__,
+        )

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/components/radix/primitives/accordion.py

@@ -6,10 +6,9 @@ from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
-from reflex.components.core.cond import cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
-from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
+from reflex.components.radix.themes.base import LiteralAccentColor
 from reflex.style import Style
 from reflex.utils import imports
 from reflex.vars import Var, get_uuid_string_var
@@ -20,32 +19,6 @@ LiteralAccordionOrientation = Literal["vertical", "horizontal"]
 LiteralAccordionVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
 
 DEFAULT_ANIMATION_DURATION = 250
-DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
-
-
-def _inherited_variant_selector(
-    variant: Var[LiteralAccordionVariant] | LiteralAccordionVariant,
-    *selectors: str,
-) -> str:
-    """Create a multi CSS selector for targeting variant against the given selectors.
-
-    Args:
-        variant: The variant to target.
-        selectors: The selectors to apply the variant to (default &)
-
-    Returns:
-        A CSS selector that is more specific on elements that directly set the variant.
-    """
-    if not selectors:
-        selectors = ("&",)
-    # Prefer the `data-variant` that is set directly on the selector,
-    # but also inherit the `data-variant` from any parent element.
-    return ", ".join(
-        [
-            f"{selector}[data-variant='{variant}'], *:where([data-variant='{variant}']) {selector}"
-            for selector in selectors
-        ]
-    )
 
 
 class AccordionComponent(RadixPrimitiveComponent):
@@ -57,14 +30,14 @@ class AccordionComponent(RadixPrimitiveComponent):
     color_scheme: Var[LiteralAccentColor]
 
     # The variant of the component.
-    variant: Var[LiteralAccordionVariant]
+    variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
 
     def add_style(self) -> Style | None:
         """Add style to the component."""
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
-        if self.variant is not None:
-            self.custom_attrs["data-variant"] = self.variant
+
+        self.custom_attrs["data-variant"] = self.variant
 
     def _exclude_props(self) -> list[str]:
         return ["color_scheme", "variant"]
@@ -98,27 +71,28 @@ class AccordionRoot(AccordionComponent):
     # The orientation of the accordion.
     orientation: Var[LiteralAccordionOrientation]
 
-    # The radius of the accordion corners.
-    radius: Var[LiteralRadius]
+    # The variant of the accordion.
+    variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
 
-    # The time in milliseconds to animate open and close
-    duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
+    _valid_children: List[str] = ["AccordionItem"]
 
-    # The easing function to use for the animation.
-    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING)
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Accordion root component.
 
-    # Whether to show divider lines between items.
-    show_dividers: Var[bool]
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
 
-    _valid_children: List[str] = ["AccordionItem"]
+        Returns:
+            The Accordion root Component.
+        """
+        for child in children:
+            if isinstance(child, AccordionItem):
+                child.color_scheme = props.get("color_scheme")  # type: ignore
+                child.variant = props.get("variant")  # type: ignore
 
-    def _exclude_props(self) -> list[str]:
-        return super()._exclude_props() + [
-            "radius",
-            "duration",
-            "easing",
-            "show_dividers",
-        ]
+        return super().create(*children, **props)
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -137,42 +111,30 @@ class AccordionRoot(AccordionComponent):
         Returns:
             The style of the component.
         """
-        if self.radius is not None:
-            self.custom_attrs["data-radius"] = self.radius
-        if self.variant is None:
-            # The default variant is classic
-            self.custom_attrs["data-variant"] = "classic"
-
-        style = {
-            "border_radius": "var(--radius-4)",
-            "box_shadow": f"0 2px 10px {color('black', 1, alpha=True)}",
-            "&[data-variant='classic']": {
-                "background_color": color("accent", 9),
-                "box_shadow": f"0 2px 10px {color('black', 4, alpha=True)}",
-            },
-            "&[data-variant='soft']": {
-                "background_color": color("accent", 3),
-            },
-            "&[data-variant='outline']": {
-                "border": f"1px solid {color('accent', 6)}",
-            },
-            "&[data-variant='surface']": {
-                "border": f"1px solid {color('accent', 6)}",
-                "background_color": "var(--accent-surface)",
-            },
-            "&[data-variant='ghost']": {
-                "background_color": "none",
-                "box_shadow": "None",
-            },
-            "--animation-duration": f"{self.duration}ms",
-            "--animation-easing": self.easing,
-        }
-        if self.show_dividers is not None:
-            style["--divider-px"] = cond(self.show_dividers, "1px", "0")
-        else:
-            style["&[data-variant='outline']"]["--divider-px"] = "1px"
-            style["&[data-variant='surface']"]["--divider-px"] = "1px"
-        return Style(style)
+        return Style(
+            {
+                "border_radius": "6px",
+                "box_shadow": f"0 2px 10px {color('black', 1, alpha=True)}",
+                "&[data-variant='classic']": {
+                    "background_color": color("accent", 9),
+                    "box_shadow": f"0 2px 10px {color('black', 4, alpha=True)}",
+                },
+                "&[data-variant='soft']": {
+                    "background_color": color("accent", 3),
+                },
+                "&[data-variant='outline']": {
+                    "border": f"1px solid {color('accent', 6)}",
+                },
+                "&[data-variant='surface']": {
+                    "border": f"1px solid {color('accent', 6)}",
+                    "background_color": color("accent", 3),
+                },
+                "&[data-variant='ghost']": {
+                    "background_color": "none",
+                    "box_shadow": "None",
+                },
+            }
+        )
 
 
 class AccordionItem(AccordionComponent):
@@ -223,28 +185,23 @@ class AccordionItem(AccordionComponent):
         ):
             cls_name = f"{cls_name} AccordionItem"
 
-        color_scheme = props.get("color_scheme")
-        variant = props.get("variant")
-
         if (header is not None) and (content is not None):
             children = [
                 AccordionHeader.create(
                     AccordionTrigger.create(
                         header,
                         AccordionIcon.create(
-                            color_scheme=color_scheme,
-                            variant=variant,
+                            color_scheme=props.get("color_scheme"),
+                            variant=props.get("variant"),
                         ),
-                        color_scheme=color_scheme,
-                        variant=variant,
+                        color_scheme=props.get("color_scheme"),
+                        variant=props.get("variant"),
                     ),
-                    color_scheme=color_scheme,
-                    variant=variant,
+                    color_scheme=props.get("color_scheme"),
+                    variant=props.get("variant"),
                 ),
                 AccordionContent.create(
-                    content,
-                    color_scheme=color_scheme,
-                    variant=variant,
+                    content, color_scheme=props.get("color_scheme")
                 ),
             ]
 
@@ -256,35 +213,29 @@ class AccordionItem(AccordionComponent):
         Returns:
             The style of the component.
         """
-        divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
+        for child in self.children:
+            if isinstance(child, (AccordionHeader, AccordionContent)):
+                child.color_scheme = self.color_scheme
+                child.variant = self.variant
+
         return Style(
             {
                 "overflow": "hidden",
                 "width": "100%",
                 "margin_top": "1px",
-                "border_top": divider_style,
                 "&:first-child": {
                     "margin_top": 0,
-                    "border_top": 0,
-                    "border_top_left_radius": "var(--radius-4)",
-                    "border_top_right_radius": "var(--radius-4)",
+                    "border_top_left_radius": "4px",
+                    "border_top_right_radius": "4px",
                 },
                 "&:last-child": {
-                    "border_bottom_left_radius": "var(--radius-4)",
-                    "border_bottom_right_radius": "var(--radius-4)",
+                    "border_bottom_left_radius": "4px",
+                    "border_bottom_right_radius": "4px",
                 },
                 "&:focus-within": {
                     "position": "relative",
                     "z_index": 1,
                 },
-                _inherited_variant_selector("ghost", "&:first-child"): {
-                    "border_radius": 0,
-                    "border_top": divider_style,
-                },
-                _inherited_variant_selector("ghost", "&:last-child"): {
-                    "border_radius": 0,
-                    "border_bottom": divider_style,
-                },
             }
         )
 
@@ -320,9 +271,17 @@ class AccordionHeader(AccordionComponent):
         Returns:
             The style of the component.
         """
+        for child in self.children:
+            if isinstance(child, AccordionTrigger):
+                child.color_scheme = self.color_scheme
+                child.variant = self.variant
+
         return Style({"display": "flex"})
 
 
+cubic_bezier = "cubic-bezier(0.87, 0, 0.13, 1)"
+
+
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
@@ -354,18 +313,24 @@ class AccordionTrigger(AccordionComponent):
         Returns:
             The style of the component.
         """
+        for child in self.children:
+            if isinstance(child, AccordionIcon):
+                child.color_scheme = self.color_scheme
+                child.variant = self.variant
+
         return Style(
             {
                 "color": color("accent", 11),
-                "font_size": "1.1em",
                 "line_height": 1,
+                "font_size": "15px",
                 "justify_content": "space-between",
                 "align_items": "center",
                 "flex": 1,
                 "display": "flex",
-                "padding": "var(--space-3) var(--space-4)",
+                "padding": "0 20px",
+                "height": "45px",
+                "font_family": "inherit",
                 "width": "100%",
-                "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
                 "&[data-state='open'] > .AccordionChevron": {
                     "transform": "rotate(180deg)",
                 },
@@ -373,15 +338,17 @@ class AccordionTrigger(AccordionComponent):
                     "background_color": color("accent", 4),
                 },
                 "& > .AccordionChevron": {
-                    "transition": f"transform var(--animation-duration) var(--animation-easing)",
+                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
                 },
-                _inherited_variant_selector("classic"): {
-                    "color": "var(--accent-contrast)",
+                "&[data-variant='classic']": {
+                    "color": color("accent", 12),
+                    "box_shadow": color("accent", 11),
                     "&:hover": {
                         "background_color": color("accent", 10),
                     },
                     "& > .AccordionChevron": {
-                        "color": "var(--accent-contrast)",
+                        "color": color("accent", 12),
+                        "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
                     },
                 },
             }
@@ -477,31 +444,30 @@ to {
             The style of the component.
         """
         slideDown = Var.create(
-            f"${{slideDown}} var(--animation-duration) var(--animation-easing)",
+            f"${{slideDown}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
             _var_is_string=True,
         )
 
         slideUp = Var.create(
-            f"${{slideUp}} var(--animation-duration) var(--animation-easing)",
+            f"${{slideUp}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
             _var_is_string=True,
         )
 
         return Style(
             {
                 "overflow": "hidden",
+                "font_size": "10px",
                 "color": color("accent", 11),
-                "padding_x": "var(--space-4)",
-                # Apply before and after content to avoid height animation jank.
-                "&:before, &:after": {
-                    "content": "' '",
-                    "display": "block",
-                    "height": "var(--space-3)",
-                },
+                "background_color": color("accent", 3),
+                "padding": "0 15px",
                 "&[data-state='open']": {"animation": slideDown},
                 "&[data-state='closed']": {"animation": slideUp},
-                _inherited_variant_selector("classic"): {
-                    "color": "var(--accent-contrast)",
+                "&[data-variant='classic']": {
+                    "color": color("accent", 12),
+                    "background_color": color("accent", 9),
                 },
+                "&[data-variant='outline']": {"background_color": "transparent"},
+                "&[data-variant='ghost']": {"background_color": "transparent"},
             }
         )
 

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/components/radix/primitives/accordion.pyi

@@ -10,10 +10,9 @@ from reflex.style import Style
 from typing import Any, Dict, List, Literal, Optional, Union
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
-from reflex.components.core.cond import cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
-from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
+from reflex.components.radix.themes.base import LiteralAccentColor
 from reflex.style import Style
 from reflex.utils import imports
 from reflex.vars import Var, get_uuid_string_var
@@ -23,7 +22,6 @@ LiteralAccordionDir = Literal["ltr", "rtl"]
 LiteralAccordionOrientation = Literal["vertical", "horizontal"]
 LiteralAccordionVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
 DEFAULT_ANIMATION_DURATION = 250
-DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
 
 class AccordionComponent(RadixPrimitiveComponent):
     def add_style(self) -> Style | None: ...
@@ -175,8 +173,6 @@ class AccordionComponent(RadixPrimitiveComponent):
         ...
 
 class AccordionRoot(AccordionComponent):
-    def get_event_triggers(self) -> Dict[str, Any]: ...
-    def add_style(self): ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -200,15 +196,12 @@ class AccordionRoot(AccordionComponent):
                 Literal["vertical", "horizontal"],
             ]
         ] = None,
-        radius: Optional[
+        variant: Optional[
             Union[
-                Var[Literal["none", "small", "medium", "large", "full"]],
-                Literal["none", "small", "medium", "large", "full"],
+                Var[Literal["classic", "soft", "surface", "outline", "ghost"]],
+                Literal["classic", "soft", "surface", "outline", "ghost"],
             ]
         ] = None,
-        duration: Optional[Union[Var[int], int]] = None,
-        easing: Optional[Union[Var[str], str]] = None,
-        show_dividers: Optional[Union[Var[bool], bool]] = None,
         color_scheme: Optional[
             Union[
                 Var[
@@ -271,12 +264,6 @@ class AccordionRoot(AccordionComponent):
                 ],
             ]
         ] = None,
-        variant: Optional[
-            Union[
-                Var[Literal["classic", "soft", "surface", "outline", "ghost"]],
-                Literal["classic", "soft", "surface", "outline", "ghost"],
-            ]
-        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -334,7 +321,7 @@ class AccordionRoot(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionRoot":
-        """Create the component.
+        """Create the Accordion root component.
 
         Args:
             *children: The children of the component.
@@ -345,12 +332,8 @@ class AccordionRoot(AccordionComponent):
             disabled: Whether or not the accordion is disabled.
             dir: The reading direction of the accordion when applicable.
             orientation: The orientation of the accordion.
-            radius: The radius of the accordion corners.
-            duration: The time in milliseconds to animate open and close
-            easing: The easing function to use for the animation.
-            show_dividers: Whether to show divider lines between items.
-            color_scheme: The color scheme of the component.
             variant: The variant of the component.
+            color_scheme: The color scheme 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.
@@ -358,12 +341,14 @@ class AccordionRoot(AccordionComponent):
             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.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The Accordion root Component.
         """
         ...
+    def get_event_triggers(self) -> Dict[str, Any]: ...
+    def add_style(self): ...
 
 class AccordionItem(AccordionComponent):
     @overload
@@ -671,6 +656,8 @@ class AccordionHeader(AccordionComponent):
         ...
     def add_style(self) -> Style | None: ...
 
+cubic_bezier = "cubic-bezier(0.87, 0, 0.13, 1)"
+
 class AccordionTrigger(AccordionComponent):
     @overload
     @classmethod

{reflex-0.5.0 → reflex-0.5.0a1}/reflex/components/radix/primitives/form.py

@@ -44,7 +44,7 @@ class FormRoot(FormComponent, HTMLForm):
         Returns:
             The style of the component.
         """
-        return Style({"width": "100%"})
+        return Style({"width": "260px"})
 
 
 class FormField(FormComponent):