ENG-6160: Select component (#5)

Author: carlosabadia

demo/assets/css/globals.css

@@ -152,7 +152,7 @@
 	--warning-a11: var(--amber-a11);
 	--warning-a12: var(--amber-a12);
 	/* Radius */
-	--radius: 0.625rem;
+	--radius: 0.5rem;
 	/* Font */
 	--font-sans: "Instrument Sans", sans-serif;
 	--font-mono: "JetBrains Mono", monospace;
@@ -1099,12 +1099,12 @@
 		0px -8px 8px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0)),
 		0px -2px 6px 0px light-dark(rgba(28, 32, 36, 0.02), rgba(0, 0, 0, 0));
 	/* Radius */
-	--radius-xs: calc(var(--radius) - 0.375rem);
-	--radius-sm: calc(var(--radius) - 0.25rem);
-	--radius-md: calc(var(--radius) - 0.125rem);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 0.125rem);
-	--radius-2xl: calc(var(--radius) + 0.25rem);
+	--radius-xs: calc(var(--radius) - 0.125rem);
+	--radius-sm: var(--radius);
+	--radius-md: calc(var(--radius) + 0.125rem);
+	--radius-lg: calc(var(--radius) + 0.25rem);
+	--radius-xl: calc(var(--radius) + 0.375rem);
+	--radius-2xl: calc(var(--radius) + 0.5rem);
 }
 
 @layer base {
@@ -1128,7 +1128,7 @@
 	}
 
 	* {
-		@apply border-secondary-5 outline-primary-5 font-sans;
+		@apply border-secondary-6 outline-primary-6 font-sans;
 	}
 
 	body {

demo/demo/demo.py

@@ -16,9 +16,27 @@ def index() -> rx.Component:
                 position="top-center",
             ),
         ),
+        ui.select(
+            items=[
+                "Item 1",
+                "Item 2",
+                "Item 3",
+                "Item 4",
+                "Item 5",
+                "Item 6",
+                "Item 7",
+                "Item 8",
+                "Item 9",
+                "Item 10",
+            ],
+            name="select",
+            placeholder="Select an item",
+            on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
+            on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
+        ),
         ui.theme_switcher(class_name="absolute top-4 right-4"),
         class_name=ui.cn(
-            "flex flex-col items-center justify-center h-screen", "bg-secondary-1"
+            "flex flex-col gap-4 items-center justify-center h-screen", "bg-secondary-1"
         ),
     )
 

pyproject.toml

@@ -4,7 +4,7 @@ version = "0.0.1"
 description = "A set of reusable components built on top of Base UI and Tailwind, designed for use across any Reflex project"
 readme = "README.md"
 requires-python = ">=3.13"
-dependencies = ["reflex>=0.7.14"]
+dependencies = ["reflex>=0.8.0a4"]
 
 [build-system]
 requires = ["hatchling", "uv-dynamic-versioning"]
@@ -63,4 +63,4 @@ lint.ignore = [
     "TRY0",
     "UP038",
 ]
-lint.pydocstyle.convention = "google"
+lint.pydocstyle.convention = "google"

reflex_ui/__init__.py

@@ -4,8 +4,9 @@
 
 _REFLEX_UI_MAPPING = {
     "components.base.avatar": ["avatar"],
-    "components.base.button": ["button"],
     "components.base.badge": ["badge"],
+    "components.base.button": ["button"],
+    "components.base.select": ["select"],
     "components.base.theme_switcher": ["theme_switcher"],
 }
 

reflex_ui/components/base/avatar.py

@@ -1,7 +1,7 @@
 """Custom avatar component."""
 
 from reflex.components.component import Component, ComponentNamespace
-from reflex.event import EventHandler, no_args_event_spec
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var
 
@@ -51,7 +51,7 @@ class AvatarImage(AvatarBaseComponent):
     src: Var[str]
 
     # Callback when loading status changes
-    on_loading_status_change: EventHandler[no_args_event_spec]
+    on_loading_status_change: EventHandler[passthrough_event_spec(str)]
 
     # The component to render
     render_: Var[Component]
@@ -88,7 +88,7 @@ class HighLevelAvatar(AvatarRoot):
     src: Var[str]
 
     # Callback when loading status changes
-    on_loading_status_change: EventHandler[no_args_event_spec]
+    on_loading_status_change: EventHandler[passthrough_event_spec(str)]
 
     # How long to wait before showing the fallback. Specified in milliseconds
     delay: Var[int]

reflex_ui/components/base/button.py

@@ -20,34 +20,34 @@
     "variant": {
         "primary": "bg-primary-9 text-white hover:bg-primary-10",
         "destructive": "bg-destructive-9 hover:bg-destructive-10 text-white",
-        "outline": "border border-secondary-5/80 hover:bg-border-secondary-6/80 bg-secondary-1 hover:bg-secondary-3 text-secondary-12",
+        "outline": "border border-secondary-a4 bg-secondary-1 hover:bg-secondary-3 text-secondary-12",
         "secondary": "bg-secondary-4 text-secondary-12 hover:bg-secondary-5",
         "ghost": "hover:bg-secondary-3 text-secondary-12",
         "link": "text-secondary-12 underline-offset-4 hover:underline",
         "dark": "bg-secondary-12 text-secondary-1 hover:bg-secondary-12/80",
     },
     "size": {
-        "xs": "px-1.5 h-7 rounded-sm gap-1.5",
-        "sm": "px-2 h-8 rounded-lg gap-2",
-        "md": "px-2.5 h-9 rounded-lg gap-2",
-        "lg": "px-3 h-10 rounded-xl gap-2.5",
-        "xl": "px-3.5 h-12 rounded-2xl gap-3",
-        "icon-xs": "size-7 rounded-md",
-        "icon-sm": "size-8 rounded-md",
-        "icon-md": "size-9 rounded-lg",
-        "icon-lg": "size-10 rounded-xl",
-        "icon-xl": "size-12 rounded-2xl",
+        "xs": "px-1.5 h-7 rounded-xs gap-1.5",
+        "sm": "px-2 h-8 rounded-sm gap-2",
+        "md": "px-2.5 h-9 rounded-md gap-2",
+        "lg": "px-3 h-10 rounded-lg gap-2.5",
+        "xl": "px-3.5 h-12 rounded-xl gap-3",
+        "icon-xs": "size-7 rounded-xs",
+        "icon-sm": "size-8 rounded-sm",
+        "icon-md": "size-9 rounded-md",
+        "icon-lg": "size-10 rounded-lg",
+        "icon-xl": "size-12 rounded-xl",
     },
 }
 
 
 class Button(BaseButton, CoreComponent):
     """A custom button component."""
 
-    # Button variant
+    # Button variant. Defaults to "primary".
     variant: Var[LiteralButtonVariant]
 
-    # Button size
+    # Button size. Defaults to "md".
     size: Var[LiteralButtonSize]
 
     # The loading state of the button