wrap radix icons (#2263)

* Add inital ui

* More radix updates

* Add el inheritance

* Add el inheritance for layout

* Triggers + primitive prop inheritance

* Initial Primitives

* Small fix

* Update select

* Radix Themes fixups (#2245)

* [REF-1367] Fix up event trigger specs

* Add missing name/value props for form controls

Checkbox was incorrectly tagged Button
TextArea was incorrectly tagged TextArea.Input

* [REF-1364] Radix Link now renders as a NextLink

For href as Var or href does not contain the ://, then
render as a NextLink for efficient inner-app navigation

* More changes

* PYI

* add @radix-ui/icons to radix.themes

* add pyi file

* fix for py3.8

---------

Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>
Co-authored-by: Masen Furer <m_github@0x26.net>

reflex/components/radix/themes/components/__init__.py

@@ -42,6 +42,7 @@ from .dropdownmenu import (
 )
 from .hovercard import HoverCardContent, HoverCardRoot, HoverCardTrigger
 from .iconbutton import IconButton
+from .icons import Icon
 from .inset import Inset
 from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
 from .radiogroup import RadioGroupItem, RadioGroupRoot
@@ -132,6 +133,9 @@ hovercard_root = HoverCardRoot.create
 hovercard_trigger = HoverCardTrigger.create
 hovercard_content = HoverCardContent.create
 
+# Icon
+icon = Icon.create
+
 # Icon Button
 icon_button = IconButton.create
 

reflex/components/radix/themes/components/icons.py

@@ -0,0 +1,400 @@
+"""Radix Icons."""
+
+
+from typing import List
+
+from reflex.components.component import Component
+from reflex.utils import format
+
+
+class RadixIconComponent(Component):
+    """A component used as basis for Radix icons."""
+
+    library = "@radix-ui/react-icons"
+
+
+class Icon(RadixIconComponent):
+    """An image Icon."""
+
+    tag = "None"
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Initialize the Icon component.
+
+        Run some additional checks on Icon component.
+
+        Args:
+            *children: The positional arguments
+            **props: The keyword arguments
+
+        Raises:
+            AttributeError: The errors tied to bad usage of the Icon component.
+            ValueError: If the icon tag is invalid.
+
+        Returns:
+            The created component.
+        """
+        if children:
+            raise AttributeError(
+                f"Passing children to Icon component is not allowed: remove positional arguments {children} to fix"
+            )
+        if "tag" not in props.keys():
+            raise AttributeError("Missing 'tag' keyword-argument for Icon")
+        if type(props["tag"]) != str or props["tag"].lower() not in ICON_LIST:
+            raise ValueError(
+                f"Invalid icon tag: {props['tag']}. Please use one of the following: {ICON_LIST}"
+            )
+        props["tag"] = format.to_title_case(props["tag"]) + "Icon"
+        return super().create(*children, **props)
+
+
+ICON_ABSTRACT: List[str] = [
+    "hamburger_menu",
+    "cross_1",
+    "dots_vertical",
+    "dots_horizontal",
+    "plus",
+    "minus",
+    "check",
+    "cross_2",
+    "check_circled",
+    "cross_circled",
+    "plus_circled",
+    "minus_circled",
+    "question_mark",
+    "question_mark_circled",
+    "info_circled",
+    "accessibility",
+    "exclamation_triangle",
+    "share_1",
+    "share_2",
+    "external_link",
+    "open_in_new_window",
+    "enter",
+    "exit",
+    "download",
+    "upload",
+    "reset",
+    "reload",
+    "update",
+    "enter_full_screen",
+    "exit_full_screen",
+    "drag_handle_vertical",
+    "drag_handle_horizontal",
+    "drag_handle_dots_1",
+    "drag_handle_dots_2",
+    "dot",
+    "dot_filled",
+    "commit",
+    "slash",
+    "circle",
+    "circle_backslash",
+    "half_1",
+    "half_2",
+    "view_none",
+    "view_horizontal",
+    "view_vertical",
+    "view_grid",
+    "copy",
+    "square",
+]
+ICON_ALIGNS: List[str] = [
+    "align_top",
+    "align_center_vertically",
+    "align_bottom",
+    "stretch_vertically",
+    "align_left",
+    "align_center_horizontally",
+    "align_right",
+    "stretch_horizontally",
+    "space_between_horizontally",
+    "space_evenly_horizontally",
+    "space_between_vertically",
+    "space_evenly_vertically",
+    "pin_left",
+    "pin_right",
+    "pin_top",
+    "pin_bottom",
+]
+ICON_ARROWS: List[str] = [
+    "arrow_left",
+    "arrow_right",
+    "arrow_up",
+    "arrow_down",
+    "arrow_top_left",
+    "arrow_top_right",
+    "arrow_bottom_left",
+    "arrow_bottom_right",
+    "chevron_left",
+    "chevron_right",
+    "chevron_up",
+    "chevron_down",
+    "double_arrow_down",
+    "double_arrow_right",
+    "double_arrow_left",
+    "double_arrow_up",
+    "thick_arrow_up",
+    "thick_arrow_down",
+    "thick_arrow_right",
+    "thick_arrow_left",
+    "triangle_right",
+    "triangle_left",
+    "triangle_down",
+    "triangle_up",
+    "caret_down",
+    "caret_up",
+    "caret_left",
+    "caret_right",
+    "caret_sort",
+    "width",
+    "height",
+    "size",
+    "move",
+    "all_sides",
+]
+ICON_BORDERS: List[str] = [
+    "border_all",
+    "border_split",
+    "border_none",
+    "border_left",
+    "border_right",
+    "border_top",
+    "border_bottom",
+    "border_width",
+    "corners",
+    "corner_top_left",
+    "corner_top_right",
+    "corner_bottom_right",
+    "corner_bottom_left",
+    "border_style",
+    "border_solid",
+    "border_dashed",
+    "border_dotted",
+]
+ICON_COMPONENTS: List[str] = [
+    "box",
+    "aspect_ratio",
+    "container",
+    "section",
+    "layout",
+    "grid",
+    "table",
+    "image",
+    "switch",
+    "checkbox",
+    "radiobutton",
+    "avatar",
+    "button",
+    "badge",
+    "input",
+    "slider",
+    "quote",
+    "code",
+    "list_bullet",
+    "dropdown_menu",
+    "video",
+    "pie_chart",
+    "calendar",
+    "dashboard",
+    "activity_log",
+    "bar_chart",
+    "divider_horizontal",
+    "divider_vertical",
+]
+ICON_DESIGN: List[str] = [
+    "frame",
+    "crop",
+    "layers",
+    "stack",
+    "tokens",
+    "component_1",
+    "component_2",
+    "component_instance",
+    "component_none",
+    "component_boolean",
+    "component_placeholder",
+    "opacity",
+    "blending_mode",
+    "mask_on",
+    "mask_off",
+    "color_wheel",
+    "shadow",
+    "shadow_none",
+    "shadow_inner",
+    "shadow_outer",
+    "value",
+    "value_none",
+    "zoom_in",
+    "zoom_out",
+    "transparency_grid",
+    "group",
+    "dimensions",
+    "rotate_counter_clockwise",
+    "columns",
+    "rows",
+    "transform",
+    "box_model",
+    "padding",
+    "margin",
+    "angle",
+    "cursor_arrow",
+    "cursor_text",
+    "column_spacing",
+    "row_spacing",
+]
+ICON_LOGOS: List[str] = [
+    "modulz_logo",
+    "stitches_logo",
+    "figma_logo",
+    "framer_logo",
+    "sketch_logo",
+    "twitter_logo",
+    "icon_jar_logo",
+    "git_hub_logo",
+    "code_sandbox_logo",
+    "notion_logo",
+    "discord_logo",
+    "instagram_logo",
+    "linked_in_logo",
+]
+ICON_MUSIC: List[str] = [
+    "play",
+    "resume",
+    "pause",
+    "stop",
+    "track_previous",
+    "track_next",
+    "loop",
+    "shuffle",
+    "speaker_loud",
+    "speaker_moderate",
+    "speaker_quiet",
+    "speaker_off",
+]
+ICON_OBJECTS: List[str] = [
+    "magnifying_glass",
+    "gear",
+    "bell",
+    "home",
+    "lock_closed",
+    "lock_open_1",
+    "lock_open_2",
+    "backpack",
+    "camera",
+    "paper_plane",
+    "rocket",
+    "envelope_closed",
+    "envelope_open",
+    "chat_bubble",
+    "link_1",
+    "link_2",
+    "link_break_1",
+    "link_break_2",
+    "link_none_1",
+    "link_none_2",
+    "trash",
+    "pencil_1",
+    "pencil_2",
+    "bookmark",
+    "bookmark_filled",
+    "drawing_pin",
+    "drawing_pin_filled",
+    "sewing_pin",
+    "sewing_pin_filled",
+    "cube",
+    "archive",
+    "crumpled_paper",
+    "mix",
+    "mixer_horizontal",
+    "mixer_vertical",
+    "file",
+    "file_minus",
+    "file_plus",
+    "file_text",
+    "reader",
+    "card_stack",
+    "card_stack_plus",
+    "card_stack_minus",
+    "id_card",
+    "crosshair_1",
+    "crosshair_2",
+    "target",
+    "globe",
+    "disc",
+    "sun",
+    "moon",
+    "clock",
+    "timer",
+    "counter_clockwise_clock",
+    "countdown_timer",
+    "stopwatch",
+    "lap_timer",
+    "lightning_bolt",
+    "magic_wand",
+    "face",
+    "person",
+    "eye_open",
+    "eye_none",
+    "eye_closed",
+    "hand",
+    "ruler_horizontal",
+    "ruler_square",
+    "clipboard",
+    "clipboard_copy",
+    "desktop",
+    "laptop",
+    "mobile",
+    "keyboard",
+    "star",
+    "star_filled",
+    "heart",
+    "heart_filled",
+    "scissors",
+    "hobby_knife",
+    "eraser",
+    "cookie",
+]
+ICON_TYPOGRAPHY: List[str] = [
+    "font_style",
+    "font_italic",
+    "font_roman",
+    "font_bold",
+    "letter_case_lowercase",
+    "letter_case_capitalize",
+    "letter_case_uppercase",
+    "letter_case_toggle",
+    "letter_spacing",
+    "align_baseline",
+    "font_size",
+    "font_family",
+    "heading",
+    "text",
+    "text_none",
+    "line_height",
+    "underline",
+    "strikethrough",
+    "overline",
+    "pilcrow",
+    "text_align_left",
+    "text_align_center",
+    "text_align_right",
+    "text_align_justify",
+    "text_align_top",
+    "text_align_middle",
+    "text_align_bottom",
+    "dash",
+]
+
+ICON_LIST: List[str] = [
+    *ICON_ABSTRACT,
+    *ICON_ALIGNS,
+    *ICON_ARROWS,
+    *ICON_BORDERS,
+    *ICON_COMPONENTS,
+    *ICON_DESIGN,
+    *ICON_LOGOS,
+    *ICON_MUSIC,
+    *ICON_OBJECTS,
+    *ICON_TYPOGRAPHY,
+]

reflex/components/radix/themes/components/icons.pyi

@@ -0,0 +1,185 @@
+"""Stub file for reflex/components/radix/themes/components/icons.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import List
+from reflex.components.component import Component
+from reflex.utils import format
+
+class RadixIconComponent(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "RadixIconComponent":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Icon(RadixIconComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "Icon":
+        """Initialize the Icon component.
+
+        Run some additional checks on Icon component.
+
+        Args:
+            *children: The positional arguments
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The keyword arguments
+
+        Raises:
+            AttributeError: The errors tied to bad usage of the Icon component.
+            ValueError: If the icon tag is invalid.
+
+        Returns:
+            The created component.
+        """
+        ...
+
+ICON_ABSTRACT: List[str]
+ICON_ALIGNS: List[str]
+ICON_ARROWS: List[str]
+ICON_BORDERS: List[str]
+ICON_COMPONENTS: List[str]
+ICON_DESIGN: List[str]
+ICON_LOGOS: List[str]
+ICON_MUSIC: List[str]
+ICON_OBJECTS: List[str]
+ICON_TYPOGRAPHY: List[str]
+ICON_LIST: List[str]