update transition for textarea and input

Author: carlosabadia

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.12.11
+    rev: v0.14.0
     hooks:
       - id: ruff-check
         files: ^reflex_ui/
@@ -28,7 +28,7 @@ repos:
   #       entry: python3 scripts/make_pyi.py
 
   - repo: https://github.com/RobertCraigie/pyright-python
-    rev: v1.1.405
+    rev: v1.1.406
     hooks:
       - id: pyright
         files: ^reflex_ui/

demo/demo/demo.py

@@ -3,15 +3,18 @@
 import reflex as rx
 
 import reflex_ui as ui
-from .simple_icon import simple_icon_demo
+
 
 class State(rx.State):
     seed: int = 0
 
+    @rx.event
+    def set_seed(self, seed: int):
+        self.seed = seed
+
 
 def index() -> rx.Component:
     return rx.el.div(
-        # Left: Column of UI components
         rx.el.div(
             ui.tooltip(
                 ui.button(
@@ -41,6 +44,9 @@ def index() -> rx.Component:
             ui.switch(
                 on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
             ),
+            ui.textarea(
+                value="Hello, world!",
+            ),
             ui.select(
                 items=[f"Item {i}" for i in range(1, 11)],
                 name="select",
@@ -50,17 +56,7 @@ def index() -> rx.Component:
             ),
             class_name="flex flex-col gap-y-6 justify-center items-center",
         ),
-
-        # Right: Icon demo
-        rx.el.div(
-            simple_icon_demo(),
-            class_name="flex justify-center items-center",
-        ),
-
-        # Theme switcher (floating top-right)
         ui.theme_switcher(class_name="absolute top-4 right-4"),
-
-        # Parent container: center everything horizontally & vertically
         class_name="flex flex-row gap-16 justify-center items-center h-screen bg-secondary-1 relative",
     )
 
@@ -75,7 +71,7 @@ def index() -> rx.Component:
         rx.el.link(
             rel="preconnect",
             href="https://fonts.gstatic.com",
-            crossorigin="",
+            cros_sorigin="",
         ),
         rx.el.link(
             href="https://fonts.googleapis.com/css2?family=Instrument+Sans:[email protected]&display=swap",

demo/demo/simple_icon.py

@@ -20,7 +20,7 @@ bump = true
 metadata = false
 
 [dependency-groups]
-dev = ["pyright==1.1.405", "pre-commit"]
+dev = ["pyright", "pre-commit"]
 
 [tool.codespell]
 skip = "*.pyi, uv.lock"

pyproject.toml

@@ -35,7 +35,7 @@ class ClassNames:
     """Class names for input components."""
 
     INPUT = "outline-none bg-transparent text-secondary-12 placeholder:text-secondary-9 text-sm leading-normal peer disabled:text-secondary-8 disabled:placeholder:text-secondary-8 w-full data-[disabled]:pointer-events-none font-medium"
-    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-all text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
+    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
 
 
 class InputBaseComponent(BaseUIComponent):

reflex_ui/components/base/input.py

@@ -31,7 +31,7 @@ DEFAULT_INPUT_ATTRS = {
 
 class ClassNames:
     INPUT = "outline-none bg-transparent text-secondary-12 placeholder:text-secondary-9 text-sm leading-normal peer disabled:text-secondary-8 disabled:placeholder:text-secondary-8 w-full data-[disabled]:pointer-events-none font-medium"
-    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-all text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
+    DIV = "flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
 
 class InputBaseComponent(BaseUIComponent):
     @property

reflex_ui/components/base/input.pyi

@@ -9,7 +9,7 @@
 class ClassNames:
     """Class names for textarea components."""
 
-    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-all disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"
+    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"
 
 
 class Textarea(TextareaComponent, CoreComponent):

reflex_ui/components/base/textarea.py

@@ -14,7 +14,7 @@ from reflex.vars.base import Var
 from reflex_ui.components.component import CoreComponent
 
 class ClassNames:
-    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-all disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"
+    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"
 
 class Textarea(TextareaComponent, CoreComponent):
     @classmethod