reflex 0.5.0a1__py3-none-any.whl → 0.5.0a2__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of reflex might be problematic. Click here for more details.

@@ -17,4 +17,16 @@ module.exports = {
17
17
  {% if darkMode is defined %}
18
18
  darkMode: {{darkMode|json_dumps}},
19
19
  {% endif %}
20
+ {% if corePlugins is defined %}
21
+ corePlugins: {{corePlugins|json_dumps}},
22
+ {% endif %}
23
+ {% if important is defined %}
24
+ important: {{important|json_dumps}},
25
+ {% endif %}
26
+ {% if prefix is defined %}
27
+ prefix: {{prefix|json_dumps}},
28
+ {% endif %}
29
+ {% if separator is defined %}
30
+ separator: {{separator|json_dumps}},
31
+ {% endif %}
20
32
  };
@@ -781,7 +781,7 @@ class Component(BaseComponent, ABC):
781
781
 
782
782
  return cls(children=children, **props)
783
783
 
784
- def add_style(self) -> Style | None:
784
+ def add_style(self) -> dict[str, Any] | None:
785
785
  """Add style to the component.
786
786
 
787
787
  Downstream components can override this method to return a style dict
@@ -801,20 +801,16 @@ class Component(BaseComponent, ABC):
801
801
  The style to add.
802
802
  """
803
803
  styles = []
804
- vars = []
805
804
 
806
805
  # Walk the MRO to call all `add_style` methods.
807
806
  for base in self._iter_parent_classes_with_method("add_style"):
808
807
  s = base.add_style(self) # type: ignore
809
808
  if s is not None:
810
809
  styles.append(s)
811
- vars.append(s._var_data)
812
810
 
813
811
  _style = Style()
814
812
  for s in reversed(styles):
815
813
  _style.update(s)
816
-
817
- _style._var_data = VarData.merge(*vars)
818
814
  return _style
819
815
 
820
816
  def _get_component_style(self, styles: ComponentStyle) -> Style | None:
@@ -2,16 +2,24 @@
2
2
  from __future__ import annotations
3
3
 
4
4
  import inspect
5
- from hashlib import md5
6
5
  from typing import Any, Callable, Iterable
7
6
 
8
7
  from reflex.components.base.fragment import Fragment
9
8
  from reflex.components.component import Component
10
9
  from reflex.components.tags import IterTag
11
10
  from reflex.constants import MemoizationMode
11
+ from reflex.utils import console
12
12
  from reflex.vars import Var
13
13
 
14
14
 
15
+ class ForeachVarError(TypeError):
16
+ """Raised when the iterable type is Any."""
17
+
18
+
19
+ class ForeachRenderError(TypeError):
20
+ """Raised when there is an error with the foreach render function."""
21
+
22
+
15
23
  class Foreach(Component):
16
24
  """A component that takes in an iterable and a render function and renders a list of components."""
17
25
 
@@ -24,56 +32,84 @@ class Foreach(Component):
24
32
  render_fn: Callable = Fragment.create
25
33
 
26
34
  @classmethod
27
- def create(cls, iterable: Var[Iterable], render_fn: Callable, **props) -> Foreach:
35
+ def create(
36
+ cls,
37
+ iterable: Var[Iterable] | Iterable,
38
+ render_fn: Callable,
39
+ **props,
40
+ ) -> Foreach:
28
41
  """Create a foreach component.
29
42
 
30
43
  Args:
31
44
  iterable: The iterable to create components from.
32
45
  render_fn: A function from the render args to the component.
33
- **props: The attributes to pass to each child component.
46
+ **props: The attributes to pass to each child component (deprecated).
34
47
 
35
48
  Returns:
36
49
  The foreach component.
37
50
 
38
51
  Raises:
39
- TypeError: If the iterable is of type Any.
52
+ ForeachVarError: If the iterable is of type Any.
40
53
  """
41
- iterable = Var.create(iterable) # type: ignore
54
+ if props:
55
+ console.deprecate(
56
+ feature_name="Passing props to rx.foreach",
57
+ reason="it does not have the intended effect and may be confusing",
58
+ deprecation_version="0.5.0",
59
+ removal_version="0.6.0",
60
+ )
61
+ iterable = Var.create_safe(iterable)
42
62
  if iterable._var_type == Any:
43
- raise TypeError(
44
- 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.)"
63
+ raise ForeachVarError(
64
+ f"Could not foreach over var `{iterable._var_full_name}` of type Any. "
65
+ "(If you are trying to foreach over a state var, add a type annotation to the var). "
66
+ "See https://reflex.dev/docs/library/layout/foreach/"
45
67
  )
46
68
  component = cls(
47
69
  iterable=iterable,
48
70
  render_fn=render_fn,
49
- **props,
50
71
  )
51
- # Keep a ref to a rendered component to determine correct imports.
52
- component.children = [
53
- component._render(props=dict(index_var_name="i")).render_component()
54
- ]
72
+ # Keep a ref to a rendered component to determine correct imports/hooks/styles.
73
+ component.children = [component._render().render_component()]
55
74
  return component
56
75
 
57
- def _render(self, props: dict[str, Any] | None = None) -> IterTag:
58
- props = {} if props is None else props.copy()
76
+ def _render(self) -> IterTag:
77
+ props = {}
59
78
 
60
- # Determine the arg var name based on the params accepted by render_fn.
61
79
  render_sig = inspect.signature(self.render_fn)
62
80
  params = list(render_sig.parameters.values())
81
+
82
+ # Validate the render function signature.
83
+ if len(params) == 0 or len(params) > 2:
84
+ raise ForeachRenderError(
85
+ "Expected 1 or 2 parameters in foreach render function, got "
86
+ f"{[p.name for p in params]}. See https://reflex.dev/docs/library/layout/foreach/"
87
+ )
88
+
63
89
  if len(params) >= 1:
64
- props.setdefault("arg_var_name", params[0].name)
90
+ # Determine the arg var name based on the params accepted by render_fn.
91
+ props["arg_var_name"] = params[0].name
65
92
 
66
- if len(params) >= 2:
93
+ if len(params) == 2:
67
94
  # Determine the index var name based on the params accepted by render_fn.
68
- props.setdefault("index_var_name", params[1].name)
69
- elif "index_var_name" not in props:
70
- # Otherwise, use a deterministic index, based on the rendered code.
71
- code_hash = md5(str(self.children[0].render()).encode("utf-8")).hexdigest()
72
- props.setdefault("index_var_name", f"index_{code_hash}")
95
+ props["index_var_name"] = params[1].name
96
+ else:
97
+ # Otherwise, use a deterministic index, based on the render function bytecode.
98
+ code_hash = (
99
+ hash(self.render_fn.__code__)
100
+ .to_bytes(
101
+ length=8,
102
+ byteorder="big",
103
+ signed=True,
104
+ )
105
+ .hex()
106
+ )
107
+ props["index_var_name"] = f"index_{code_hash}"
73
108
 
74
109
  return IterTag(
75
110
  iterable=self.iterable,
76
111
  render_fn=self.render_fn,
112
+ children=self.children,
77
113
  **props,
78
114
  )
79
115
 
@@ -84,19 +120,9 @@ class Foreach(Component):
84
120
  The dictionary for template of component.
85
121
  """
86
122
  tag = self._render()
87
- component = tag.render_component()
88
123
 
89
124
  return dict(
90
- tag.add_props(
91
- **self.event_triggers,
92
- key=self.key,
93
- sx=self.style,
94
- id=self.id,
95
- class_name=self.class_name,
96
- ).set(
97
- children=[component.render()],
98
- props=tag.format_props(),
99
- ),
125
+ tag,
100
126
  iterable_state=tag.iterable._var_full_name,
101
127
  arg_name=tag.arg_var_name,
102
128
  arg_index=tag.get_index_var_arg(),
@@ -6,9 +6,10 @@ from typing import Any, Dict, List, Literal, Optional, Union
6
6
 
7
7
  from reflex.components.component import Component, ComponentNamespace
8
8
  from reflex.components.core.colors import color
9
+ from reflex.components.core.cond import cond
9
10
  from reflex.components.lucide.icon import Icon
10
11
  from reflex.components.radix.primitives.base import RadixPrimitiveComponent
11
- from reflex.components.radix.themes.base import LiteralAccentColor
12
+ from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
12
13
  from reflex.style import Style
13
14
  from reflex.utils import imports
14
15
  from reflex.vars import Var, get_uuid_string_var
@@ -19,6 +20,32 @@ LiteralAccordionOrientation = Literal["vertical", "horizontal"]
19
20
  LiteralAccordionVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
20
21
 
21
22
  DEFAULT_ANIMATION_DURATION = 250
23
+ DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
24
+
25
+
26
+ def _inherited_variant_selector(
27
+ variant: Var[LiteralAccordionVariant] | LiteralAccordionVariant,
28
+ *selectors: str,
29
+ ) -> str:
30
+ """Create a multi CSS selector for targeting variant against the given selectors.
31
+
32
+ Args:
33
+ variant: The variant to target.
34
+ selectors: The selectors to apply the variant to (default &)
35
+
36
+ Returns:
37
+ A CSS selector that is more specific on elements that directly set the variant.
38
+ """
39
+ if not selectors:
40
+ selectors = ("&",)
41
+ # Prefer the `data-variant` that is set directly on the selector,
42
+ # but also inherit the `data-variant` from any parent element.
43
+ return ", ".join(
44
+ [
45
+ f"{selector}[data-variant='{variant}'], *:where([data-variant='{variant}']) {selector}"
46
+ for selector in selectors
47
+ ]
48
+ )
22
49
 
23
50
 
24
51
  class AccordionComponent(RadixPrimitiveComponent):
@@ -30,14 +57,14 @@ class AccordionComponent(RadixPrimitiveComponent):
30
57
  color_scheme: Var[LiteralAccentColor]
31
58
 
32
59
  # The variant of the component.
33
- variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
60
+ variant: Var[LiteralAccordionVariant]
34
61
 
35
62
  def add_style(self) -> Style | None:
36
63
  """Add style to the component."""
37
64
  if self.color_scheme is not None:
38
65
  self.custom_attrs["data-accent-color"] = self.color_scheme
39
-
40
- self.custom_attrs["data-variant"] = self.variant
66
+ if self.variant is not None:
67
+ self.custom_attrs["data-variant"] = self.variant
41
68
 
42
69
  def _exclude_props(self) -> list[str]:
43
70
  return ["color_scheme", "variant"]
@@ -71,28 +98,27 @@ class AccordionRoot(AccordionComponent):
71
98
  # The orientation of the accordion.
72
99
  orientation: Var[LiteralAccordionOrientation]
73
100
 
74
- # The variant of the accordion.
75
- variant: Var[LiteralAccordionVariant] = Var.create_safe("classic")
101
+ # The radius of the accordion corners.
102
+ radius: Var[LiteralRadius]
76
103
 
77
- _valid_children: List[str] = ["AccordionItem"]
104
+ # The time in milliseconds to animate open and close
105
+ duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
78
106
 
79
- @classmethod
80
- def create(cls, *children, **props) -> Component:
81
- """Create the Accordion root component.
107
+ # The easing function to use for the animation.
108
+ easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING)
82
109
 
83
- Args:
84
- *children: The children of the component.
85
- **props: The properties of the component.
110
+ # Whether to show divider lines between items.
111
+ show_dividers: Var[bool]
86
112
 
87
- Returns:
88
- The Accordion root Component.
89
- """
90
- for child in children:
91
- if isinstance(child, AccordionItem):
92
- child.color_scheme = props.get("color_scheme") # type: ignore
93
- child.variant = props.get("variant") # type: ignore
113
+ _valid_children: List[str] = ["AccordionItem"]
94
114
 
95
- return super().create(*children, **props)
115
+ def _exclude_props(self) -> list[str]:
116
+ return super()._exclude_props() + [
117
+ "radius",
118
+ "duration",
119
+ "easing",
120
+ "show_dividers",
121
+ ]
96
122
 
97
123
  def get_event_triggers(self) -> Dict[str, Any]:
98
124
  """Get the events triggers signatures for the component.
@@ -111,30 +137,42 @@ class AccordionRoot(AccordionComponent):
111
137
  Returns:
112
138
  The style of the component.
113
139
  """
114
- return Style(
115
- {
116
- "border_radius": "6px",
117
- "box_shadow": f"0 2px 10px {color('black', 1, alpha=True)}",
118
- "&[data-variant='classic']": {
119
- "background_color": color("accent", 9),
120
- "box_shadow": f"0 2px 10px {color('black', 4, alpha=True)}",
121
- },
122
- "&[data-variant='soft']": {
123
- "background_color": color("accent", 3),
124
- },
125
- "&[data-variant='outline']": {
126
- "border": f"1px solid {color('accent', 6)}",
127
- },
128
- "&[data-variant='surface']": {
129
- "border": f"1px solid {color('accent', 6)}",
130
- "background_color": color("accent", 3),
131
- },
132
- "&[data-variant='ghost']": {
133
- "background_color": "none",
134
- "box_shadow": "None",
135
- },
136
- }
137
- )
140
+ if self.radius is not None:
141
+ self.custom_attrs["data-radius"] = self.radius
142
+ if self.variant is None:
143
+ # The default variant is classic
144
+ self.custom_attrs["data-variant"] = "classic"
145
+
146
+ style = {
147
+ "border_radius": "var(--radius-4)",
148
+ "box_shadow": f"0 2px 10px {color('black', 1, alpha=True)}",
149
+ "&[data-variant='classic']": {
150
+ "background_color": color("accent", 9),
151
+ "box_shadow": f"0 2px 10px {color('black', 4, alpha=True)}",
152
+ },
153
+ "&[data-variant='soft']": {
154
+ "background_color": color("accent", 3),
155
+ },
156
+ "&[data-variant='outline']": {
157
+ "border": f"1px solid {color('accent', 6)}",
158
+ },
159
+ "&[data-variant='surface']": {
160
+ "border": f"1px solid {color('accent', 6)}",
161
+ "background_color": "var(--accent-surface)",
162
+ },
163
+ "&[data-variant='ghost']": {
164
+ "background_color": "none",
165
+ "box_shadow": "None",
166
+ },
167
+ "--animation-duration": f"{self.duration}ms",
168
+ "--animation-easing": self.easing,
169
+ }
170
+ if self.show_dividers is not None:
171
+ style["--divider-px"] = cond(self.show_dividers, "1px", "0")
172
+ else:
173
+ style["&[data-variant='outline']"]["--divider-px"] = "1px"
174
+ style["&[data-variant='surface']"]["--divider-px"] = "1px"
175
+ return Style(style)
138
176
 
139
177
 
140
178
  class AccordionItem(AccordionComponent):
@@ -185,23 +223,28 @@ class AccordionItem(AccordionComponent):
185
223
  ):
186
224
  cls_name = f"{cls_name} AccordionItem"
187
225
 
226
+ color_scheme = props.get("color_scheme")
227
+ variant = props.get("variant")
228
+
188
229
  if (header is not None) and (content is not None):
189
230
  children = [
190
231
  AccordionHeader.create(
191
232
  AccordionTrigger.create(
192
233
  header,
193
234
  AccordionIcon.create(
194
- color_scheme=props.get("color_scheme"),
195
- variant=props.get("variant"),
235
+ color_scheme=color_scheme,
236
+ variant=variant,
196
237
  ),
197
- color_scheme=props.get("color_scheme"),
198
- variant=props.get("variant"),
238
+ color_scheme=color_scheme,
239
+ variant=variant,
199
240
  ),
200
- color_scheme=props.get("color_scheme"),
201
- variant=props.get("variant"),
241
+ color_scheme=color_scheme,
242
+ variant=variant,
202
243
  ),
203
244
  AccordionContent.create(
204
- content, color_scheme=props.get("color_scheme")
245
+ content,
246
+ color_scheme=color_scheme,
247
+ variant=variant,
205
248
  ),
206
249
  ]
207
250
 
@@ -213,29 +256,35 @@ class AccordionItem(AccordionComponent):
213
256
  Returns:
214
257
  The style of the component.
215
258
  """
216
- for child in self.children:
217
- if isinstance(child, (AccordionHeader, AccordionContent)):
218
- child.color_scheme = self.color_scheme
219
- child.variant = self.variant
220
-
259
+ divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
221
260
  return Style(
222
261
  {
223
262
  "overflow": "hidden",
224
263
  "width": "100%",
225
264
  "margin_top": "1px",
265
+ "border_top": divider_style,
226
266
  "&:first-child": {
227
267
  "margin_top": 0,
228
- "border_top_left_radius": "4px",
229
- "border_top_right_radius": "4px",
268
+ "border_top": 0,
269
+ "border_top_left_radius": "max(var(--radius-2), var(--radius-6))",
270
+ "border_top_right_radius": "max(var(--radius-2), var(--radius-6))",
230
271
  },
231
272
  "&:last-child": {
232
- "border_bottom_left_radius": "4px",
233
- "border_bottom_right_radius": "4px",
273
+ "border_bottom_left_radius": "max(var(--radius-2), var(--radius-6))",
274
+ "border_bottom_right_radius": "max(var(--radius-2), var(--radius-6))",
234
275
  },
235
276
  "&:focus-within": {
236
277
  "position": "relative",
237
278
  "z_index": 1,
238
279
  },
280
+ _inherited_variant_selector("ghost", "&:first-child"): {
281
+ "border_radius": 0,
282
+ "border_top": divider_style,
283
+ },
284
+ _inherited_variant_selector("ghost", "&:last-child"): {
285
+ "border_radius": 0,
286
+ "border_bottom": divider_style,
287
+ },
239
288
  }
240
289
  )
241
290
 
@@ -271,17 +320,9 @@ class AccordionHeader(AccordionComponent):
271
320
  Returns:
272
321
  The style of the component.
273
322
  """
274
- for child in self.children:
275
- if isinstance(child, AccordionTrigger):
276
- child.color_scheme = self.color_scheme
277
- child.variant = self.variant
278
-
279
323
  return Style({"display": "flex"})
280
324
 
281
325
 
282
- cubic_bezier = "cubic-bezier(0.87, 0, 0.13, 1)"
283
-
284
-
285
326
  class AccordionTrigger(AccordionComponent):
286
327
  """An accordion component."""
287
328
 
@@ -313,24 +354,18 @@ class AccordionTrigger(AccordionComponent):
313
354
  Returns:
314
355
  The style of the component.
315
356
  """
316
- for child in self.children:
317
- if isinstance(child, AccordionIcon):
318
- child.color_scheme = self.color_scheme
319
- child.variant = self.variant
320
-
321
357
  return Style(
322
358
  {
323
359
  "color": color("accent", 11),
360
+ "font_size": "1.1em",
324
361
  "line_height": 1,
325
- "font_size": "15px",
326
362
  "justify_content": "space-between",
327
363
  "align_items": "center",
328
364
  "flex": 1,
329
365
  "display": "flex",
330
- "padding": "0 20px",
331
- "height": "45px",
332
- "font_family": "inherit",
366
+ "padding": "var(--space-3) var(--space-4)",
333
367
  "width": "100%",
368
+ "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
334
369
  "&[data-state='open'] > .AccordionChevron": {
335
370
  "transform": "rotate(180deg)",
336
371
  },
@@ -338,17 +373,15 @@ class AccordionTrigger(AccordionComponent):
338
373
  "background_color": color("accent", 4),
339
374
  },
340
375
  "& > .AccordionChevron": {
341
- "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
376
+ "transition": f"transform var(--animation-duration) var(--animation-easing)",
342
377
  },
343
- "&[data-variant='classic']": {
344
- "color": color("accent", 12),
345
- "box_shadow": color("accent", 11),
378
+ _inherited_variant_selector("classic"): {
379
+ "color": "var(--accent-contrast)",
346
380
  "&:hover": {
347
381
  "background_color": color("accent", 10),
348
382
  },
349
383
  "& > .AccordionChevron": {
350
- "color": color("accent", 12),
351
- "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
384
+ "color": "var(--accent-contrast)",
352
385
  },
353
386
  },
354
387
  }
@@ -444,30 +477,31 @@ to {
444
477
  The style of the component.
445
478
  """
446
479
  slideDown = Var.create(
447
- f"${{slideDown}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
480
+ f"${{slideDown}} var(--animation-duration) var(--animation-easing)",
448
481
  _var_is_string=True,
449
482
  )
450
483
 
451
484
  slideUp = Var.create(
452
- f"${{slideUp}} {DEFAULT_ANIMATION_DURATION}ms {cubic_bezier}",
485
+ f"${{slideUp}} var(--animation-duration) var(--animation-easing)",
453
486
  _var_is_string=True,
454
487
  )
455
488
 
456
489
  return Style(
457
490
  {
458
491
  "overflow": "hidden",
459
- "font_size": "10px",
460
492
  "color": color("accent", 11),
461
- "background_color": color("accent", 3),
462
- "padding": "0 15px",
493
+ "padding_x": "var(--space-4)",
494
+ # Apply before and after content to avoid height animation jank.
495
+ "&:before, &:after": {
496
+ "content": "' '",
497
+ "display": "block",
498
+ "height": "var(--space-3)",
499
+ },
463
500
  "&[data-state='open']": {"animation": slideDown},
464
501
  "&[data-state='closed']": {"animation": slideUp},
465
- "&[data-variant='classic']": {
466
- "color": color("accent", 12),
467
- "background_color": color("accent", 9),
502
+ _inherited_variant_selector("classic"): {
503
+ "color": "var(--accent-contrast)",
468
504
  },
469
- "&[data-variant='outline']": {"background_color": "transparent"},
470
- "&[data-variant='ghost']": {"background_color": "transparent"},
471
505
  }
472
506
  )
473
507
 
@@ -10,9 +10,10 @@ from reflex.style import Style
10
10
  from typing import Any, Dict, List, Literal, Optional, Union
11
11
  from reflex.components.component import Component, ComponentNamespace
12
12
  from reflex.components.core.colors import color
13
+ from reflex.components.core.cond import cond
13
14
  from reflex.components.lucide.icon import Icon
14
15
  from reflex.components.radix.primitives.base import RadixPrimitiveComponent
15
- from reflex.components.radix.themes.base import LiteralAccentColor
16
+ from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
16
17
  from reflex.style import Style
17
18
  from reflex.utils import imports
18
19
  from reflex.vars import Var, get_uuid_string_var
@@ -22,6 +23,7 @@ LiteralAccordionDir = Literal["ltr", "rtl"]
22
23
  LiteralAccordionOrientation = Literal["vertical", "horizontal"]
23
24
  LiteralAccordionVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
24
25
  DEFAULT_ANIMATION_DURATION = 250
26
+ DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
25
27
 
26
28
  class AccordionComponent(RadixPrimitiveComponent):
27
29
  def add_style(self) -> Style | None: ...
@@ -173,6 +175,8 @@ class AccordionComponent(RadixPrimitiveComponent):
173
175
  ...
174
176
 
175
177
  class AccordionRoot(AccordionComponent):
178
+ def get_event_triggers(self) -> Dict[str, Any]: ...
179
+ def add_style(self): ...
176
180
  @overload
177
181
  @classmethod
178
182
  def create( # type: ignore
@@ -196,12 +200,15 @@ class AccordionRoot(AccordionComponent):
196
200
  Literal["vertical", "horizontal"],
197
201
  ]
198
202
  ] = None,
199
- variant: Optional[
203
+ radius: Optional[
200
204
  Union[
201
- Var[Literal["classic", "soft", "surface", "outline", "ghost"]],
202
- Literal["classic", "soft", "surface", "outline", "ghost"],
205
+ Var[Literal["none", "small", "medium", "large", "full"]],
206
+ Literal["none", "small", "medium", "large", "full"],
203
207
  ]
204
208
  ] = None,
209
+ duration: Optional[Union[Var[int], int]] = None,
210
+ easing: Optional[Union[Var[str], str]] = None,
211
+ show_dividers: Optional[Union[Var[bool], bool]] = None,
205
212
  color_scheme: Optional[
206
213
  Union[
207
214
  Var[
@@ -264,6 +271,12 @@ class AccordionRoot(AccordionComponent):
264
271
  ],
265
272
  ]
266
273
  ] = None,
274
+ variant: Optional[
275
+ Union[
276
+ Var[Literal["classic", "soft", "surface", "outline", "ghost"]],
277
+ Literal["classic", "soft", "surface", "outline", "ghost"],
278
+ ]
279
+ ] = None,
267
280
  as_child: Optional[Union[Var[bool], bool]] = None,
268
281
  style: Optional[Style] = None,
269
282
  key: Optional[Any] = None,
@@ -321,7 +334,7 @@ class AccordionRoot(AccordionComponent):
321
334
  ] = None,
322
335
  **props
323
336
  ) -> "AccordionRoot":
324
- """Create the Accordion root component.
337
+ """Create the component.
325
338
 
326
339
  Args:
327
340
  *children: The children of the component.
@@ -332,8 +345,12 @@ class AccordionRoot(AccordionComponent):
332
345
  disabled: Whether or not the accordion is disabled.
333
346
  dir: The reading direction of the accordion when applicable.
334
347
  orientation: The orientation of the accordion.
335
- variant: The variant of the component.
348
+ radius: The radius of the accordion corners.
349
+ duration: The time in milliseconds to animate open and close
350
+ easing: The easing function to use for the animation.
351
+ show_dividers: Whether to show divider lines between items.
336
352
  color_scheme: The color scheme of the component.
353
+ variant: The variant of the component.
337
354
  as_child: Change the default rendered element for the one passed as a child.
338
355
  style: The style of the component.
339
356
  key: A unique key for the component.
@@ -341,14 +358,12 @@ class AccordionRoot(AccordionComponent):
341
358
  class_name: The class name for the component.
342
359
  autofocus: Whether the component should take the focus once the page is loaded
343
360
  custom_attrs: custom attribute
344
- **props: The properties of the component.
361
+ **props: The props of the component.
345
362
 
346
363
  Returns:
347
- The Accordion root Component.
364
+ The component.
348
365
  """
349
366
  ...
350
- def get_event_triggers(self) -> Dict[str, Any]: ...
351
- def add_style(self): ...
352
367
 
353
368
  class AccordionItem(AccordionComponent):
354
369
  @overload
@@ -656,8 +671,6 @@ class AccordionHeader(AccordionComponent):
656
671
  ...
657
672
  def add_style(self) -> Style | None: ...
658
673
 
659
- cubic_bezier = "cubic-bezier(0.87, 0, 0.13, 1)"
660
-
661
674
  class AccordionTrigger(AccordionComponent):
662
675
  @overload
663
676
  @classmethod
@@ -44,7 +44,7 @@ class FormRoot(FormComponent, HTMLForm):
44
44
  Returns:
45
45
  The style of the component.
46
46
  """
47
- return Style({"width": "260px"})
47
+ return Style({"width": "100%"})
48
48
 
49
49
 
50
50
  class FormField(FormComponent):
reflex/style.py CHANGED
@@ -180,12 +180,15 @@ class Style(dict):
180
180
  style_dict: The style dictionary.
181
181
  kwargs: Other key value pairs to apply to the dict update.
182
182
  """
183
- if kwargs:
184
- style_dict = {**(style_dict or {}), **kwargs}
185
183
  if not isinstance(style_dict, Style):
186
184
  converted_dict = type(self)(style_dict)
187
185
  else:
188
186
  converted_dict = style_dict
187
+ if kwargs:
188
+ if converted_dict is None:
189
+ converted_dict = type(self)(kwargs)
190
+ else:
191
+ converted_dict.update(kwargs)
189
192
  # Combine our VarData with that of any Vars in the style_dict that was passed.
190
193
  self._var_data = VarData.merge(self._var_data, converted_dict._var_data)
191
194
  super().update(converted_dict)
@@ -1,6 +1,6 @@
1
1
  Metadata-Version: 2.1
2
2
  Name: reflex
3
- Version: 0.5.0a1
3
+ Version: 0.5.0a2
4
4
  Summary: Web apps in pure Python.
5
5
  Home-page: https://reflex.dev
6
6
  License: Apache-2.0
@@ -46,7 +46,7 @@ reflex/.templates/jinja/web/pages/stateful_component.js.jinja2,sha256=jl8HEaDdJb
46
46
  reflex/.templates/jinja/web/pages/stateful_components.js.jinja2,sha256=BfHi7ckH9u5xOliKWxjgmnia6AJbNnII97SC-dt_KSU,101
47
47
  reflex/.templates/jinja/web/pages/utils.js.jinja2,sha256=xi1ryZ2dqWM4pmB4p028hxRtsdP6T3ZR5a8OG_U1IAs,3883
48
48
  reflex/.templates/jinja/web/styles/styles.css.jinja2,sha256=4-CvqGR8-nRzkuCOSp_PdqmhPEmOs_kOhskOlhLMEUg,141
49
- reflex/.templates/jinja/web/tailwind.config.js.jinja2,sha256=cblxOcM8DLKg9S8OgS-uxA4OfGer60GAWwBOxNXwqzo,436
49
+ reflex/.templates/jinja/web/tailwind.config.js.jinja2,sha256=uZMIvtL94OZh6h8zsduv3ox6EXnnYgfVXB_5moOe86E,761
50
50
  reflex/.templates/jinja/web/utils/context.js.jinja2,sha256=Vl2pKWItPjYSSVvPGRZHM5Oi177ijl-RxUjxkyeMXwc,3790
51
51
  reflex/.templates/jinja/web/utils/theme.js.jinja2,sha256=cdRQR4cx0OFHUY060k1AdsPpK7BNUV--NzsC9HdH4l8,37
52
52
  reflex/.templates/web/.gitignore,sha256=3tT0CtVkCL09D_Y3Hd4myUgGcBuESeavCa0WHU5ifJ4,417
@@ -233,7 +233,7 @@ reflex/components/chakra/typography/span.py,sha256=2DbW5DB27ijtTeugSDUVp3nQ64mrG
233
233
  reflex/components/chakra/typography/span.pyi,sha256=itDe7RpjJN_K_9pZ7n_U9qlrTshGejv9lh5plvh3DCU,3372
234
234
  reflex/components/chakra/typography/text.py,sha256=9YXBdK5UYqgDam3ITeRSnd8bu9ht3zydt0pkmJAECsk,472
235
235
  reflex/components/chakra/typography/text.pyi,sha256=FzqNtf0NUkGmRLrazSyfKHqznJjz_KCryU-2sRghZ0M,3596
236
- reflex/components/component.py,sha256=Lv1NmA-GPwT5IovV9Jj-OF250tag7hw7gnW7TvAxzmg,75843
236
+ reflex/components/component.py,sha256=UDH3IUdv4lWLi3oe4iIVJCSTG5a7L7MkdchhDxdXBbM,75744
237
237
  reflex/components/core/__init__.py,sha256=EUhgNfO2NfQZ6HoeWJcF-INb4WpQecrYGKAUTLsg1R8,857
238
238
  reflex/components/core/banner.py,sha256=DxYh4ORFIQlPPxvT-gudF0A8yj22oy6D_0IldTVHuZU,5943
239
239
  reflex/components/core/banner.pyi,sha256=PPS1GJLp5uyD1h6mI0Fs-IKf9w4l7qG50rmkSA_HVno,17164
@@ -243,7 +243,7 @@ reflex/components/core/colors.py,sha256=-hzVGLEq3TiqroqzMi_YzGBCPXMvkNsen3pS_NzI
243
243
  reflex/components/core/cond.py,sha256=bXip53gCUoZGLDgKgi6YFjJMIwPAos8Smb8SoOfzgCk,6005
244
244
  reflex/components/core/debounce.py,sha256=VfK_QDzd7kriLYp5I3NsHujtXYJiciaNG2omYZIkEvM,4888
245
245
  reflex/components/core/debounce.pyi,sha256=VGBX3hsRQo3xFP0xkYJuy25rDQ5rxRIk58mCV34fHSI,4216
246
- reflex/components/core/foreach.py,sha256=dUcL9OgmqR7zNEDcLVXL5mtwNquAE5KMOSsRcf1qnyk,3647
246
+ reflex/components/core/foreach.py,sha256=eVaq8MflcNFri-Munx3XLk95AYihpQBX3n0ClMd23Ag,4334
247
247
  reflex/components/core/html.py,sha256=3TjZweaxqGnma5l9UIEzmE5bsl0VSS6ixn8xD_xu2W0,1284
248
248
  reflex/components/core/html.pyi,sha256=6lqiYm9XUcRuR1kW6Ken8GAyf63-f5R5Swrli9B0eWg,6616
249
249
  reflex/components/core/layout/__init__.py,sha256=znldZaj_NGt8qCZDG70GMwjMTskcvCf_2N_EjCAHwdc,30
@@ -314,13 +314,13 @@ reflex/components/plotly/plotly.py,sha256=GVExqrdSIfXngDFZATjjkomrwx97UM8F2W56rd
314
314
  reflex/components/plotly/plotly.pyi,sha256=FrY0iQX7elz2ZWKW-DXdg8cz_v7bB7QqkZkpUZ1-oj8,6865
315
315
  reflex/components/radix/__init__.py,sha256=5BGBr3z1_GcgCbNXUqAlK5AR13J7fxzFn4Wj-nTDNa4,112
316
316
  reflex/components/radix/primitives/__init__.py,sha256=wkbCDG6q2MuZobhD6FeH9PgLXKZhb6cImguCV4n-aGs,214
317
- reflex/components/radix/primitives/accordion.py,sha256=tXCXzoXr2E5IJhD2RizZN5d_t77ZrUDOx4f6IU5-Bus,14879
318
- reflex/components/radix/primitives/accordion.pyi,sha256=14lO6IIRHXO66XChfvaoyfjo_gx00b786jf7nFD24no,37299
317
+ reflex/components/radix/primitives/accordion.py,sha256=jTtHQ0br_WC6sUI5LIIS4FyKDgQSu5qjzKMpyjydMNc,16247
318
+ reflex/components/radix/primitives/accordion.pyi,sha256=GtWMMaWHXW0kjFmXJCWz37rmhq9AnlyIcrj3JovwmjA,37999
319
319
  reflex/components/radix/primitives/base.py,sha256=s3OX4V2pNl6AQ3H9rz-pkE-2TNuNrqj0Mn2mOItF0eM,869
320
320
  reflex/components/radix/primitives/base.pyi,sha256=_SqXWZfCB80_VHW-jO33WhoRunUpiUcUIxziG9Fb2fw,6478
321
321
  reflex/components/radix/primitives/drawer.py,sha256=Y4XDgSECoKnOopHiech3uXFhZPZOB3D6iQoicTDEuDc,8660
322
322
  reflex/components/radix/primitives/drawer.pyi,sha256=n6lRm9UvTc3iWdXFZsmDVPvzZGlWmrvnaUEHEGChub8,34484
323
- reflex/components/radix/primitives/form.py,sha256=wiYW_28QVj3OCLfkh56CJWwXlS4UAOhD-6hqurE0VPM,4965
323
+ reflex/components/radix/primitives/form.py,sha256=eocMNACMNtEWCZG6XnwHrLfRSHGYNAtusAT8KqSgAA4,4964
324
324
  reflex/components/radix/primitives/form.pyi,sha256=dqzqclVIP612jWCnxJP99JN0y_CfQf4FKbMlZGM-1rY,48138
325
325
  reflex/components/radix/primitives/progress.py,sha256=H9Xz_HEc5lXJbRcr0G3S9r9zb6XiVrR1f2ZWwUwC-8s,4160
326
326
  reflex/components/radix/primitives/progress.pyi,sha256=2_G6T8AeBo2InfM7i4kRAWIzBz2bXqNR2-YnVunlKE4,22874
@@ -493,7 +493,7 @@ reflex/page.py,sha256=NPT0xMownZGTiYiRtrUJnvAe_4oEvlzEJEkG-vrGhqI,2077
493
493
  reflex/reflex.py,sha256=VJZAwe9lIqbS3VB3QkP5-OMmNXmM4gi-5TWMCJgZPcc,17826
494
494
  reflex/route.py,sha256=WZS7stKgO94nekFFYHaOqNgN3zZGpJb3YpGF4ViTHmw,4198
495
495
  reflex/state.py,sha256=IAMB5rOVSNR04PhV1JCSUjM9lpspnDzNYyPm1_Asx88,105748
496
- reflex/style.py,sha256=l2JY6ZiHF_eRXToxEUCq5KwilI4_EFFQoFd0c1b4W0E,9308
496
+ reflex/style.py,sha256=ujKp_n5mwF5BbLK6IPLu6PuM_MxZtAewX35acLDw7fg,9405
497
497
  reflex/testing.py,sha256=zFlvQODofiaQd082v_bDK__qsBPzwysxeIDf-B86luI,30743
498
498
  reflex/utils/__init__.py,sha256=y-AHKiRQAhk2oAkvn7W8cRVTZVK625ff8tTwvZtO7S4,24
499
499
  reflex/utils/build.py,sha256=9LE93QlbfTHYyQWTgGZYSXX7QGDYzuE01ttWUVw_rGQ,8573
@@ -514,8 +514,8 @@ reflex/utils/types.py,sha256=NVdeZIQZTrrUCJMmlRSzQ8ZvCdAnQPQWCLBQioR4aQg,14842
514
514
  reflex/utils/watch.py,sha256=HzGrHQIZ_62Di0BO46kd2AZktNA3A6nFIBuf8c6ip30,2609
515
515
  reflex/vars.py,sha256=1IboqkSJYh_z-XlWAPzfcCaX-5imVdv6QSrpUAXBWNg,67317
516
516
  reflex/vars.pyi,sha256=7sVCLoLg9Y7QAmXWz6FCtVmScpSV84u0yQ3ZBImb_Bk,5583
517
- reflex-0.5.0a1.dist-info/LICENSE,sha256=dw3zLrp9f5ObD7kqS32vWfhcImfO52PMmRqvtxq_YEE,11358
518
- reflex-0.5.0a1.dist-info/METADATA,sha256=6CWVWM2qaZpmStSqOZrZt3_3S90WZ4v8LtAe4Ngrgt8,12089
519
- reflex-0.5.0a1.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
520
- reflex-0.5.0a1.dist-info/entry_points.txt,sha256=H1Z5Yat_xJfy0dRT1Frk2PkO_p41Xy7fCKlj4FcdL9o,44
521
- reflex-0.5.0a1.dist-info/RECORD,,
517
+ reflex-0.5.0a2.dist-info/LICENSE,sha256=dw3zLrp9f5ObD7kqS32vWfhcImfO52PMmRqvtxq_YEE,11358
518
+ reflex-0.5.0a2.dist-info/METADATA,sha256=KU08QVLf_YfyvAzF-IlsEnbkmbP3jegq24JloX13sng,12089
519
+ reflex-0.5.0a2.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
520
+ reflex-0.5.0a2.dist-info/entry_points.txt,sha256=H1Z5Yat_xJfy0dRT1Frk2PkO_p41Xy7fCKlj4FcdL9o,44
521
+ reflex-0.5.0a2.dist-info/RECORD,,