reflex 0.5.0a1__tar.gz → 0.5.0a3__tar.gz

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

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

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

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

{reflex-0.5.0a1 → reflex-0.5.0a3}/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.0a1 → reflex-0.5.0a3}/reflex/.templates/jinja/web/tailwind.config.js.jinja2

@@ -17,4 +17,16 @@ 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.0a1 → reflex-0.5.0a3}/reflex/components/component.py

@@ -781,7 +781,7 @@ class Component(BaseComponent, ABC):
 
         return cls(children=children, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Downstream components can override this method to return a style dict
@@ -801,20 +801,16 @@ 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.0a3/reflex/components/core/foreach.py

@@ -0,0 +1,130 @@
+"""Create a list of components from an iterable."""
+from __future__ import annotations
+
+import inspect
+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.utils import console
+from reflex.vars import Var
+
+
+class ForeachVarError(TypeError):
+    """Raised when the iterable type is Any."""
+
+
+class ForeachRenderError(TypeError):
+    """Raised when there is an error with the foreach render function."""
+
+
+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] | 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 (deprecated).
+
+        Returns:
+            The foreach component.
+
+        Raises:
+            ForeachVarError: If the iterable is of type Any.
+        """
+        if props:
+            console.deprecate(
+                feature_name="Passing props to rx.foreach",
+                reason="it does not have the intended effect and may be confusing",
+                deprecation_version="0.5.0",
+                removal_version="0.6.0",
+            )
+        iterable = Var.create_safe(iterable)
+        if iterable._var_type == Any:
+            raise ForeachVarError(
+                f"Could not foreach over var `{iterable._var_full_name}` of type Any. "
+                "(If you are trying to foreach over a state var, add a type annotation to the var). "
+                "See https://reflex.dev/docs/library/layout/foreach/"
+            )
+        component = cls(
+            iterable=iterable,
+            render_fn=render_fn,
+        )
+        # Keep a ref to a rendered component to determine correct imports/hooks/styles.
+        component.children = [component._render().render_component()]
+        return component
+
+    def _render(self) -> IterTag:
+        props = {}
+
+        render_sig = inspect.signature(self.render_fn)
+        params = list(render_sig.parameters.values())
+
+        # Validate the render function signature.
+        if len(params) == 0 or len(params) > 2:
+            raise ForeachRenderError(
+                "Expected 1 or 2 parameters in foreach render function, got "
+                f"{[p.name for p in params]}. See https://reflex.dev/docs/library/layout/foreach/"
+            )
+
+        if len(params) >= 1:
+            # Determine the arg var name based on the params accepted by render_fn.
+            props["arg_var_name"] = params[0].name
+
+        if len(params) == 2:
+            # Determine the index var name based on the params accepted by render_fn.
+            props["index_var_name"] = params[1].name
+        else:
+            # Otherwise, use a deterministic index, based on the render function bytecode.
+            code_hash = (
+                hash(self.render_fn.__code__)
+                .to_bytes(
+                    length=8,
+                    byteorder="big",
+                    signed=True,
+                )
+                .hex()
+            )
+            props["index_var_name"] = f"index_{code_hash}"
+
+        return IterTag(
+            iterable=self.iterable,
+            render_fn=self.render_fn,
+            children=self.children,
+            **props,
+        )
+
+    def render(self):
+        """Render the component.
+
+        Returns:
+            The dictionary for template of component.
+        """
+        tag = self._render()
+
+        return dict(
+            tag,
+            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.0a1 → reflex-0.5.0a3}/reflex/components/radix/primitives/accordion.py

@@ -6,9 +6,10 @@ 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
+from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
 from reflex.style import Style
 from reflex.utils import imports
 from reflex.vars import Var, get_uuid_string_var
@@ -19,6 +20,32 @@ 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):
@@ -30,14 +57,14 @@ class AccordionComponent(RadixPrimitiveComponent):
     color_scheme: Var[LiteralAccentColor]
 
     # The variant of the component.
-    variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
+    variant: Var[LiteralAccordionVariant]
 
     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
-
-        self.custom_attrs["data-variant"] = self.variant
+        if self.variant is not None:
+            self.custom_attrs["data-variant"] = self.variant
 
     def _exclude_props(self) -> list[str]:
         return ["color_scheme", "variant"]
@@ -71,28 +98,27 @@ class AccordionRoot(AccordionComponent):
     # The orientation of the accordion.
     orientation: Var[LiteralAccordionOrientation]
 
-    # The variant of the accordion.
-    variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
+    # The radius of the accordion corners.
+    radius: Var[LiteralRadius]
 
-    _valid_children: List[str] = ["AccordionItem"]
+    # The time in milliseconds to animate open and close
+    duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
 
-    @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the Accordion root component.
+    # The easing function to use for the animation.
+    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING)
 
-        Args:
-            *children: The children of the component.
-            **props: The properties of the component.
+    # Whether to show divider lines between items.
+    show_dividers: Var[bool]
 
-        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
+    _valid_children: List[str] = ["AccordionItem"]
 
-        return super().create(*children, **props)
+    def _exclude_props(self) -> list[str]:
+        return super()._exclude_props() + [
+            "radius",
+            "duration",
+            "easing",
+            "show_dividers",
+        ]
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -111,30 +137,42 @@ class AccordionRoot(AccordionComponent):
         Returns:
             The style of the component.
         """
-        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",
-                },
-            }
-        )
+        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)
 
 
 class AccordionItem(AccordionComponent):
@@ -185,23 +223,28 @@ 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=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"),
+                    color_scheme=color_scheme,
+                    variant=variant,
                 ),
                 AccordionContent.create(
-                    content, color_scheme=props.get("color_scheme")
+                    content,
+                    color_scheme=color_scheme,
+                    variant=variant,
                 ),
             ]
 
@@ -213,29 +256,35 @@ class AccordionItem(AccordionComponent):
         Returns:
             The style of the component.
         """
-        for child in self.children:
-            if isinstance(child, (AccordionHeader, AccordionContent)):
-                child.color_scheme = self.color_scheme
-                child.variant = self.variant
-
+        divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
         return Style(
             {
                 "overflow": "hidden",
                 "width": "100%",
                 "margin_top": "1px",
+                "border_top": divider_style,
                 "&:first-child": {
                     "margin_top": 0,
-                    "border_top_left_radius": "4px",
-                    "border_top_right_radius": "4px",
+                    "border_top": 0,
+                    "border_top_left_radius": "var(--radius-4)",
+                    "border_top_right_radius": "var(--radius-4)",
                 },
                 "&:last-child": {
-                    "border_bottom_left_radius": "4px",
-                    "border_bottom_right_radius": "4px",
+                    "border_bottom_left_radius": "var(--radius-4)",
+                    "border_bottom_right_radius": "var(--radius-4)",
                 },
                 "&: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,
+                },
             }
         )
 
@@ -271,17 +320,9 @@ 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."""
 
@@ -313,24 +354,18 @@ 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": "0 20px",
-                "height": "45px",
-                "font_family": "inherit",
+                "padding": "var(--space-3) var(--space-4)",
                 "width": "100%",
+                "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
                 "&[data-state='open'] > .AccordionChevron": {
                     "transform": "rotate(180deg)",
                 },
@@ -338,17 +373,15 @@ class AccordionTrigger(AccordionComponent):
                     "background_color": color("accent", 4),
                 },
                 "& > .AccordionChevron": {
-                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
+                    "transition": f"transform var(--animation-duration) var(--animation-easing)",
                 },
-                "&[data-variant='classic']": {
-                    "color": color("accent", 12),
-                    "box_shadow": color("accent", 11),
+                _inherited_variant_selector("classic"): {
+                    "color": "var(--accent-contrast)",
                     "&:hover": {
                         "background_color": color("accent", 10),
                     },
                     "& > .AccordionChevron": {
-                        "color": color("accent", 12),
-                        "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
+                        "color": "var(--accent-contrast)",
                     },
                 },
             }
@@ -444,30 +477,31 @@ to {
             The style of the component.
         """
         slideDown = Var.create(
-            f"${{slideDown}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
+            f"${{slideDown}} var(--animation-duration) var(--animation-easing)",
             _var_is_string=True,
         )
 
         slideUp = Var.create(
-            f"${{slideUp}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
+            f"${{slideUp}} var(--animation-duration) var(--animation-easing)",
             _var_is_string=True,
         )
 
         return Style(
             {
                 "overflow": "hidden",
-                "font_size": "10px",
                 "color": color("accent", 11),
-                "background_color": color("accent", 3),
-                "padding": "0 15px",
+                "padding_x": "var(--space-4)",
+                # Apply before and after content to avoid height animation jank.
+                "&:before, &:after": {
+                    "content": "' '",
+                    "display": "block",
+                    "height": "var(--space-3)",
+                },
                 "&[data-state='open']": {"animation": slideDown},
                 "&[data-state='closed']": {"animation": slideUp},
-                "&[data-variant='classic']": {
-                    "color": color("accent", 12),
-                    "background_color": color("accent", 9),
+                _inherited_variant_selector("classic"): {
+                    "color": "var(--accent-contrast)",
                 },
-                "&[data-variant='outline']": {"background_color": "transparent"},
-                "&[data-variant='ghost']": {"background_color": "transparent"},
             }
         )