some changes (#30)

Author: carlosabadia

pyproject.toml

@@ -3,7 +3,7 @@ name = "reflex-ui"
 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"
+requires-python = ">=3.12"
 dependencies = ["reflex (>=0.8.0)"]
 
 [build-system]

reflex_ui/components/base/card.py

@@ -106,9 +106,13 @@ def create(cls, *children, **props):
         footer = props.pop("footer", "")
 
         return CardRoot.create(
-            CardHeader.create(
-                CardTitle.create(title) if title else None,
-                CardDescription.create(description) if description else None,
+            (
+                CardHeader.create(
+                    CardTitle.create(title) if title else None,
+                    CardDescription.create(description) if description else None,
+                )
+                if title or description
+                else None
             ),
             CardContent.create(content) if content else None,
             CardFooter.create(footer) if footer else None,

reflex_ui/components/base/link.py

@@ -68,7 +68,7 @@ def create(cls, *children, **props) -> ReactRouterLink:
             children.append(
                 hi(
                     "LinkSquare02Icon",
-                    class_name="absolute top-1/2 -translate-y-1/2 right-[-1.375rem] group-hover/link:opacity-100 text-secondary-9 opacity-0",
+                    class_name="absolute top-1/2 -translate-y-1/2 right-[-1.25rem] group-hover/link:opacity-100 text-secondary-9 opacity-0",
                 ),
             )
 

reflex_ui/components/base/menu.py

@@ -529,6 +529,9 @@ def create(cls, *children, **props) -> BaseUIComponent:
 class HighLevelMenu(MenuRoot):
     """High level wrapper for the Menu component."""
 
+    # The trigger component to use for the menu
+    trigger: Var[Component | None]
+
     # The list of items to display in the menu dropdown - can be strings or tuples of (label, on_click_handler)
     items: Var[list[str | tuple[str, EventHandler]]]
 
@@ -577,6 +580,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
         }
         portal_props = {k: props.pop(k) for k in cls._portal_props & props.keys()}
 
+        trigger = props.pop("trigger", None)
         items = props.pop("items", [])
         size = trigger_props.get("size", "md")
         trigger_label = trigger_props.get("placeholder", "Open Menu")
@@ -593,6 +597,7 @@ def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent:
                         on_click=on_click_handler,
                         size=size,
                     ),
+                    key=label,
                     **item_props,
                 )
             return MenuItem.create(
@@ -603,6 +608,7 @@ def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent:
                     disabled=props.get("disabled", False),
                     size=size,
                 ),
+                key=item,
                 **item_props,
             )
 
@@ -613,13 +619,17 @@ def create_menu_item(item: str | tuple[str, EventHandler]) -> BaseUIComponent:
 
         return MenuRoot.create(
             MenuTrigger.create(
-                render_=button(
-                    trigger_label,
-                    select_arrow(class_name="size-4 text-secondary-9"),
-                    variant="outline",
-                    class_name=ClassNames.TRIGGER,
-                    disabled=props.get("disabled", False),
-                    size=size,
+                render_=(
+                    trigger
+                    if trigger
+                    else button(
+                        trigger_label,
+                        select_arrow(class_name="size-4 text-secondary-9"),
+                        variant="outline",
+                        class_name=ClassNames.TRIGGER,
+                        disabled=props.get("disabled", False),
+                        size=size,
+                    )
                 ),
             ),
             MenuPortal.create(

reflex_ui/components/base/menu.pyi

@@ -846,6 +846,7 @@ class HighLevelMenu(MenuRoot):
     def create(
         cls,
         *children,
+        trigger: Component | Var[Component | None] | None = None,
         items: Var[list[str | tuple[str, EventHandler]]]
         | list[str | tuple[str, EventHandler]]
         | None = None,
@@ -905,6 +906,7 @@ class HighLevelMenu(MenuRoot):
 
         Args:
             *children: Additional children to include in the menu.
+            trigger: The trigger component to use for the menu
             items: The list of items to display in the menu dropdown - can be strings or tuples of (label, on_click_handler)
             placeholder: The placeholder text to display when no item is selected
             size: The size of the menu. Defaults to "md".
@@ -957,6 +959,7 @@ class Menu(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
+        trigger: Component | Var[Component | None] | None = None,
         items: Var[list[str | tuple[str, EventHandler]]]
         | list[str | tuple[str, EventHandler]]
         | None = None,
@@ -1016,6 +1019,7 @@ class Menu(ComponentNamespace):
 
         Args:
             *children: Additional children to include in the menu.
+            trigger: The trigger component to use for the menu
             items: The list of items to display in the menu dropdown - can be strings or tuples of (label, on_click_handler)
             placeholder: The placeholder text to display when no item is selected
             size: The size of the menu. Defaults to "md".

reflex_ui/components/base/select.py

@@ -478,6 +478,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
                         disabled=props.get("disabled", False),
                     ),
                     value=item,
+                    key=item,
                 ),
             )
         else:
@@ -496,6 +497,7 @@ def create(cls, *children, **props) -> BaseUIComponent:
                         class_name=ClassNames.ITEM,
                     ),
                     value=item,
+                    key=item,
                 )
                 for item in items
             ]

reflex_ui/components/base/tooltip.py

@@ -21,7 +21,7 @@ class ClassNames:
     """Class names for tooltip components."""
 
     TRIGGER = "inline-flex items-center justify-center"
-    POPUP = "z-50 rounded-sm bg-secondary-12 px-3 py-1.5 text-balance text-sm font-medium text-secondary-1 shadow-small transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
+    POPUP = "z-50 rounded-sm bg-secondary-12 px-2.5 py-1.5 text-balance text-sm font-medium text-secondary-1 shadow-small transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
     ARROW = "data-[side=bottom]:top-[-7.5px] data-[side=left]:right-[-12.5px] data-[side=left]:rotate-90 data-[side=right]:left-[-12.5px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-7.5px] data-[side=top]:rotate-180"
 
 

reflex_ui/components/base/tooltip.pyi

@@ -20,7 +20,7 @@ LiteralTrackCursorAxis = Literal["none", "bottom", "x", "y"]
 
 class ClassNames:
     TRIGGER = "inline-flex items-center justify-center"
-    POPUP = "z-50 rounded-sm bg-secondary-12 px-3 py-1.5 text-balance text-sm font-medium text-secondary-1 shadow-small transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
+    POPUP = "z-50 rounded-sm bg-secondary-12 px-2.5 py-1.5 text-balance text-sm font-medium text-secondary-1 shadow-small transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
     ARROW = "data-[side=bottom]:top-[-7.5px] data-[side=left]:right-[-12.5px] data-[side=left]:rotate-90 data-[side=right]:left-[-12.5px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-7.5px] data-[side=top]:rotate-180"
 
 class TooltipBaseComponent(BaseUIComponent):