ENG-6169: Add skeleton item (#8)

Author: carlosabadia

demo/demo/demo.py

@@ -30,7 +30,7 @@ def index() -> rx.Component:
                 "Item 10",
             ],
             name="select",
-            placeholder="Select an item",
+            default_value="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}"),
         ),

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.8.0a4"]
+dependencies = ["reflex>=0.8.0"]
 
 [build-system]
 requires = ["hatchling", "uv-dynamic-versioning"]

reflex_ui/__init__.py

@@ -7,6 +7,7 @@
     "components.base.badge": ["badge"],
     "components.base.button": ["button"],
     "components.base.select": ["select"],
+    "components.base.skeleton": ["skeleton"],
     "components.base.theme_switcher": ["theme_switcher"],
 }
 

reflex_ui/components/base/select.py

@@ -120,9 +120,6 @@ class SelectValue(SelectBaseComponent):
 
     tag = "Select.Value"
 
-    # A placeholder to display before an item has been chosen.
-    placeholder: Var[str]
-
     # The render prop
     render_: Var[Component]
 
@@ -438,7 +435,6 @@ def create(cls, *children, **props) -> Component:
         portal_props = {k: props.pop(k) for k in cls._portal_props & props.keys()}
 
         # Get extracted values with defaults
-        placeholder = trigger_props.get("placeholder", "")
         size = trigger_props.get("size", "md")
         items = items_props.get("items", [])
 
@@ -486,7 +482,7 @@ def create(cls, *children, **props) -> Component:
         return SelectRoot.create(
             SelectTrigger.create(
                 render_=button(
-                    SelectValue.create(placeholder=placeholder),
+                    SelectValue.create(),
                     SelectIcon.create(select_arrow(class_name="size-4")),
                     variant="outline",
                     size=size,

reflex_ui/components/base/skeleton.py

@@ -0,0 +1,24 @@
+"""Custom skeleton component."""
+
+from reflex.components.component import Component, memo
+from reflex.components.el import Div
+from reflex.vars import Var
+
+from reflex_ui.utils.twmerge import cn
+
+
+class ClassNames:
+    """Class names for skeleton component."""
+
+    ROOT = "animate-pulse bg-secondary-6"
+
+
+@memo
+def skeleton_component(
+    class_name: str | Var[str] = "",
+) -> Component:
+    """Skeleton component."""
+    return Div.create(class_name=cn(ClassNames.ROOT, class_name))
+
+
+skeleton = skeleton_component

reflex_ui/components/base_ui.py

@@ -5,7 +5,7 @@
 from reflex_ui.components.component import CoreComponent
 
 PACKAGE_NAME = "@base-ui-components/react"
-PACKAGE_VERSION = "^1.0.0-beta.0"
+PACKAGE_VERSION = "^1.0.0-beta.1"
 
 
 class BaseUIComponent(CoreComponent):