Instruction:
"""Custom avatar component."""

from reflex.components.component import Component, ComponentNamespace

Input:
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent

class ClassNames:
    """Class names for avatar components."""

    ROOT = "shrink-0 inline-flex size-6 items-center justify-center overflow-hidden rounded-full bg-secondary-1 align-middle text-base font-medium text-secondary-12 select-none"
    IMAGE = "size-full object-cover shrink-0"
    FALLBACK = "flex size-full items-center justify-center text-sm animate-pulse bg-secondary-6"

class AvatarBaseComponent(BaseUIComponent):
    """Base component for avatar components."""

    library = f"{PACKAGE_NAME}/avatar"

    @property
    def import_var(self):
        """Return the import variable for the avatar component."""
        return ImportVar(tag="Avatar", package_path="", install=False)

class AvatarRoot(AvatarBaseComponent):
    """Displays a user's profile picture, initials, or fallback icon."""

    tag = "Avatar.Root"

    # The c

Output: from reflex.event import EventHandler, passthrough_event_spec


Instruction:
"""Badge component."""

from typing import Literal

from reflex.components.el import Span

Input:
from reflex_ui.components.component import CoreComponent

BaseColorType = Literal[
    "primary",
    "secondary",
    "info",
    "success",
    "warning",
    "destructive",
    "gray",
    "mauve",
    "slate",
    "sage",
    "olive",
    "sand",
    "tomato",
    "red",
    "ruby",
    "crimson",
    "pink",
    "plum",
    "purple",
    "violet",
    "iris",
    "indigo",
    "blue",
    "cyan",
    "teal",
    "jade",
    "green",
    "grass",
    "brown",
    "orange",
    "sky",
    "mint",
    "lime",
    "yellow",
    "amber",
    "gold",
    "bronze",
]
LiteralBadgeVariant = Literal["solid", "soft"]
LiteralBadgeSize = Literal["xs", "sm", "md"]

DEFAULT_BASE_CLASSES = "inline-flex items-center font-medium [&_svg]:pointer-events-none [&_svg]:shrink-0 gap-1.5"

# Light colors that need dark text on solid backgrounds for better contrast
LIGHT_COLORS = {"sky", "mint", "lime", "yellow", "amber", "secondary"}

BADGE_VARIANTS = {
    "size": {
        "xs": "px-1.5 py-0.5 h-4 rou

Output: from reflex.vars.base import Var


Instruction:
      size = props.pop("size", "md")
        cls.validate_size(size)

        loading = props.pop("loading", False)
        disabled = props.pop("disabled", False)

        button_classes = f"{DEFAULT_CLASS_NAME} {BUTTON_VARIANTS['variant'][variant]} {BUTTON_VARIANTS['size'][size]}"

        cls.set_class_name(button_classes, props)

        children_list = list(children)

        if isinstance(loading, Var):
            props["disabled"] = cond(loading, True, disabled)
            children_list.insert(0, cond(loading, spinner()))
        else:
            props["disabled"] = True if loading else disabled
            children_list.insert(0, spinner()) if loading else None

        return super().create(*children_list, **props)

    @staticmethod
    def validate_variant(variant: LiteralButtonVariant):
        """Validate the button variant."""
        if variant not in BUTTON_VARIANTS["variant"]:
            available_variants = ", ".join(BUTTON_VARIANTS["variant"].keys())

Input:
            raise ValueError(message)

    @staticmethod
    def validate_size(size: LiteralButtonSize):
        """Validate the button size."""
        if size not in BUTTON_VARIANTS["size"]:
            available_sizes = ", ".join(BUTTON_VARIANTS["size"].keys())
            message = f"Invalid size: {size}. Available sizes: {available_sizes}"
            raise ValueError(message)

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "size",
            "variant",
            "loading",
        ]

button = Button.create

Output:
message = (
                f"Invalid variant: {variant}. Available variants: {available_variants}"
            )


Instruction:
"""Custom card component."""

from reflex.components.component import Component, ComponentNamespace
from reflex.components.el import Div
from reflex.vars.base import Var

from reflex_ui.components.component import CoreComponent

class ClassNames:
    """Class names for the card component."""

    ROOT = "rounded-ui-xl border border-secondary-a4 bg-secondary-1 shadow-small"

Input:
    TITLE = "text-2xl font-semibold text-secondary-12"
    DESCRIPTION = "text-sm text-secondary-11 font-[450]"
    CONTENT = "flex flex-col gap-4 px-6 pb-6"
    FOOTER = "flex flex-row justify-between items-center px-6 pb-6"

class CardComponent(Div, CoreComponent):
    """Base component for the card component."""

class CardRoot(CardComponent):
    """A card component that displays content in a card format."""

    @classmethod
    def create(cls, *children, **props):
        """Create the card component."""
        props["data-slot"] = "card"
        cls.set_class_name(ClassNames.ROOT, props)
        return super().create(*children, **props)

class CardHeader(CardComponent):
    """A header component for the card."""

    @classmethod
    def create(cls, *children, **props):
        """Create the card header component."""
        props["data-slot"] = "card-header"
        cls.set_class_name(ClassNames.HEADER, props)
        return super().create(*children, **props)

class CardT

Output: HEADER = "flex flex-col gap-2 p-6"


Instruction:
"card-title"
        cls.set_class_name(ClassNames.TITLE, props)
        return super().create(*children, **props)

class CardDescription(CardComponent):
    """A description component for the card."""

    @classmethod
    def create(cls, *children, **props):
        """Create the card description component."""
        props["data-slot"] = "card-description"
        cls.set_class_name(ClassNames.DESCRIPTION, props)
        return super().create(*children, **props)

class CardContent(CardComponent):
    """A content component for the card."""

    @classmethod
    def create(cls, *children, **props):
        """Create the card content component."""
        props["data-slot"] = "card-content"
        cls.set_class_name(ClassNames.CONTENT, props)
        return super().create(*children, **props)

class CardFooter(CardComponent):
    """A footer component for the card."""

    @classmethod
    def create(cls, *children, **props):
        """Create the card footer component."""

Input:
        cls.set_class_name(ClassNames.FOOTER, props)
        return super().create(*children, **props)

class HighLevelCard(CardComponent):
    """A high level card component that displays content in a card format."""

    # Card props
    title: Var[str | Component | None]
    description: Var[str | Component | None]
    content: Var[str | Component | None]
    footer: Var[str | Component | None]

    @classmethod
    def create(cls, *children, **props):
        """Create the card component."""
        title = props.pop("title", "")
        description = props.pop("description", "")
        content = props.pop("content", "")
        footer = props.pop("footer", "")

        return CardRoot.create(
            (
                CardHeader.create(
                    CardTitle.create(title) if title is not None else None,
                    (
                        CardDescription.create(description)
                        if description is not None
                        else Non

Output: props["data-slot"] = "card-footer"


Instruction:
:bottom-[-8px] data-[side=top]:rotate-180"
    POSITIONER = "outline-none"
    GROUP = "p-1"
    GROUP_LABEL = "px-2 py-1.5 text-sm font-semibold"
    RADIO_GROUP = ""
    RADIO_ITEM = "grid min-w-(--anchor-width) grid-cols-[1fr_auto] items-center gap-2 text-sm select-none font-[450] text-secondary-11 cursor-pointer outline-none data-[highlighted]:bg-secondary-3 scroll-m-1"
    RADIO_ITEM_INDICATOR = "text-current"
    CHECKBOX_ITEM = "grid min-w-(--anchor-width) grid-cols-[1fr_auto] items-center gap-2 text-sm select-none font-[450] text-secondary-11 cursor-pointer outline-none data-[highlighted]:bg-secondary-3 scroll-m-1"
    CHECKBOX_ITEM_INDICATOR = "text-current"
    SUBMENU_TRIGGER = "grid min-w-(--anchor-width) grid-cols-[1fr_auto] items-center gap-2 text-sm select-none font-[450] text-secondary-11 cursor-pointer outline-none data-[highlighted]:bg-secondary-3 scroll-m-1"

class ContextMenuBaseComponent(BaseUIComponent):
    """Base component for context menu components."""

Input:
    @property
    def import_var(self):
        """Return the import variable for the context menu component."""
        return ImportVar(tag="ContextMenu", package_path="", install=False)

class ContextMenuRoot(ContextMenuBaseComponent):
    """Groups all parts of the context menu. Doesn't render its own HTML element."""

    tag = "ContextMenu.Root"

    # Whether the context menu is initially open. To render a controlled context menu, use the open prop instead. Defaults to False.
    default_open: Var[bool]

    # Whether the context menu is currently open.
    open: Var[bool]

    # Event handler called when the context menu is opened or closed.
    on_open_change: EventHandler[passthrough_event_spec(bool, dict)]

    # A ref to imperative actions. When specified, the context menu will not be unmounted when closed. Instead, the unmount function must be called to unmount the context menu manually. Useful when the context menu's animation is controlled by an external library.

Output: library = f"{PACKAGE_NAME}/context-menu"


Instruction:
 = "context-menu-radio-item"
        cls.set_class_name(ClassNames.RADIO_ITEM, props)
        return super().create(*children, **props)

class ContextMenuRadioItemIndicator(ContextMenuBaseComponent):
    """Indicates whether the radio item is selected. Renders a <div> element."""

    tag = "ContextMenu.RadioItemIndicator"

    # Whether to keep the indicator mounted in the DOM when the radio item is not checked. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu radio item indicator component."""
        props["data-slot"] = "context-menu-radio-item-indicator"
        cls.set_class_name(ClassNames.RADIO_ITEM_INDICATOR, props)
        return super().create(*children, **props)

class ContextMenuCheckboxItem(ContextMenuBaseComponent):
    """A context menu item that toggles a setting on or off. Renders a <div> element."""

Input:
    # Overrides the text label to use when the item is matched during keyboard text navigation.
    label: Var[str]

    # Whether the checkbox item is initially checked. To render a controlled checkbox item, use the checked prop instead. Defaults to False.
    default_checked: Var[bool]

    # Whether the checkbox item is currently checked. To render an uncontrolled checkbox item, use the default_checked prop instead.
    checked: Var[bool]

    # Event handler called when the checkbox item is ticked or unticked.
    on_checked_change: EventHandler[passthrough_event_spec(bool, dict)]

    # Whether to close the context menu when the item is clicked. Defaults to False.
    close_on_click: Var[bool]

    # Whether the component renders a native button element when replacing it via the render prop. Set to true if the rendered element is a native button. Defaults to False.
    native_button: Var[bool]

    # Whether the component should ignore user interaction. Defaults to False.
    di

Output: tag = "ContextMenu.CheckboxItem"


Instruction:
 the render prop. Set to true if the rendered element is a native button. Defaults to False.
    native_button: Var[bool]

    # Whether the component should ignore user interaction. Defaults to False.
    disabled: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu checkbox item component."""
        props["data-slot"] = "context-menu-checkbox-item"
        cls.set_class_name(ClassNames.CHECKBOX_ITEM, props)
        return super().create(*children, **props)

class ContextMenuCheckboxItemIndicator(ContextMenuBaseComponent):
    """Indicates whether the checkbox item is ticked. Renders a <div> element."""

    tag = "ContextMenu.CheckboxItemIndicator"

    # Whether to keep the indicator mounted in the DOM when the checkbox item is not checked. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod

Input:
class ContextMenuSubmenuRoot(ContextMenuBaseComponent):
    """Groups all parts of a submenu. Doesn't render its own HTML element."""

    tag = "ContextMenu.SubmenuRoot"

    # Whether the submenu is initially open. To render a controlled submenu, use the open prop instead. Defaults to False.
    default_open: Var[bool]

    # Whether the submenu is currently open.
    open: Var[bool]

    # Event handler called when the submenu is opened or closed.
    on_open_change: EventHandler[passthrough_event_spec(bool, dict)]

    # When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. Defaults to True.
    close_parent_on_esc: Var[bool]

    # Event handler called after any animations complete when the submenu is closed.
    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]

    # Whether the component should ignore user interaction. Defaults to False.
    disabled: Var[bool]

    # Whether the submenu should

Output:
def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu checkbox item indicator component."""
        props["data-slot"] = "context-menu-checkbox-item-indicator"
        cls.set_class_name(ClassNames.CHECKBOX_ITEM_INDICATOR, props)
        return super().create(*children, **props)


Instruction:
the component should ignore user interaction. Defaults to False.
    disabled: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu checkbox item component."""
        props["data-slot"] = "context-menu-checkbox-item"
        cls.set_class_name(ClassNames.CHECKBOX_ITEM, props)
        return super().create(*children, **props)

class ContextMenuCheckboxItemIndicator(ContextMenuBaseComponent):
    """Indicates whether the checkbox item is ticked. Renders a <div> element."""

    tag = "ContextMenu.CheckboxItemIndicator"

    # Whether to keep the indicator mounted in the DOM when the checkbox item is not checked. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu checkbox item indicator component."""

Input:
        cls.set_class_name(ClassNames.CHECKBOX_ITEM_INDICATOR, props)
        return super().create(*children, **props)

class ContextMenuSubmenuRoot(ContextMenuBaseComponent):
    """Groups all parts of a submenu. Doesn't render its own HTML element."""

    tag = "ContextMenu.SubmenuRoot"

    # Whether the submenu is initially open. To render a controlled submenu, use the open prop instead. Defaults to False.
    default_open: Var[bool]

    # Whether the submenu is currently open.
    open: Var[bool]

    # Event handler called when the submenu is opened or closed.
    on_open_change: EventHandler[passthrough_event_spec(bool, dict)]

    # When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu. Defaults to True.
    close_parent_on_esc: Var[bool]

    # Event handler called after any animations complete when the submenu is closed.
    on_open_change_complete: EventHandler[passthrough_event_spec(bool)]

    # Whether th

Output: props["data-slot"] = "context-menu-checkbox-item-indicator"


Instruction:
placing it via the render prop. Set to true if the rendered element is a native button. Defaults to False.
    native_button: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the context menu submenu trigger component."""
        props["data-slot"] = "context-menu-submenu-trigger"
        cls.set_class_name(ClassNames.SUBMENU_TRIGGER, props)
        return super().create(*children, **props)

class HighLevelContextMenu(ContextMenuRoot):
    """High level wrapper for the ContextMenu component."""

    # The trigger component to use for the context menu
    trigger: Var[Component | None]

    # The list of items to display in the context menu - can be strings or tuples of (label, on_click_handler)
    items: Var[list[str | tuple[str, EventHandler]]]

    # The size of the context menu. Defaults to "md".
    size: Var[LiteralMenuSize]

    # Props for different component parts

Input:
    _positioner_props = {
        "align",
        "align_offset",
        "side",
        "arrow_padding",
        "collision_padding",
        "sticky",
        "position_method",
        "track_anchor",
        "side_offset",
        "collision_avoidance",
        "collision_boundary",
    }
    _portal_props = {"container", "keep_mounted"}

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create a context menu component.

        Args:
            *children: Additional children to include in the context menu.
            **props: Additional properties to apply to the context menu component.

        Returns:
            The context menu component.
        """
        # Extract props for different parts
        item_props = {k: props.pop(k) for k in cls._item_props & props.keys()}
        positioner_props = {
            k: props.pop(k) for k in cls._positioner_props & props.keys()
        }
        portal_props = {k: props.pop(k) for k in cls

Output: _item_props = {"close_on_click"}


Instruction:
"""Custom dialog component."""

from typing import Literal

from reflex.components.component import Component, ComponentNamespace
from reflex.components.el import Div
from reflex.event import EventHandler, passthrough_event_spec
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from reflex_ui.components.base.button import button
from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
from reflex_ui.components.icons.hugeicon import hi

Input:
class DialogBaseComponent(BaseUIComponent):
    """Base component for dialog components."""

    library = f"{PACKAGE_NAME}/dialog"

    @property
    def import_var(self):
        """Return the import variable for the dialog component."""
        return ImportVar(tag="Dialog", package_path="", install=False)

class DialogRoot(DialogBaseComponent):
    """Groups all parts of the dialog. Doesn't render its own HTML element."""

    tag = "Dialog.Root"

    # Whether the dialog is initially open. To render a controlled dialog, use the open prop instead.
    default_open: Var[bool]

    # Whether the dialog is currently open.
    open: Var[bool]

    # Event handler called when the dialog is opened or closed
    on_open_change: EventHandler[passthrough_event_spec(bool, dict)]

    # Determines whether the dialog should close on outside clicks. Defaults to True.
    dismissible: Var[bool]

    # Determines if the dialog enters a modal state when open.
    # - True: user interaction is

Output:
class ClassNames:
    """Class names for dialog components."""

    BACKDROP = "fixed inset-0 bg-black opacity-40 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-80"
    POPUP = "fixed top-1/2 left-1/2 -mt-8 w-[32rem] max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-ui-xl border border-secondary-a4 bg-secondary-1 shadow-large transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0"
    TITLE = "text-2xl font-semibold text-secondary-12"
    DESCRIPTION = "text-sm text-secondary-11 font-[450]"
    HEADER = "flex flex-col gap-2 px-6 pt-6 pb-4"
    CONTENT = "flex flex-col gap-4 px-6 pb-6"
    TRIGGER = ""
    CLOSE = ""


Instruction:
                            class_name="flex flex-row justify-between items-baseline gap-1",
                        ),
                        (
                            DialogDescription.create(description)
                            if description is not None
                            else None
                        ),
                        data_slot="dialog-header",
                        class_name=ClassNames.HEADER,
                    ),
                    Div.create(
                        content,
                        data_slot="dialog-content",
                        class_name=ClassNames.CONTENT,
                    ),
                    *children,
                    class_name=class_name,
                ),
            ),
            **props,
        )

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "trigger",
            "content",
            "title",
            "description",
        ]

Input: dialog = Dialog()

Output:
class Dialog(ComponentNamespace):
    """Namespace for Dialog components."""

    root = staticmethod(DialogRoot.create)
    trigger = staticmethod(DialogTrigger.create)
    portal = staticmethod(DialogPortal.create)
    backdrop = staticmethod(DialogBackdrop.create)
    popup = staticmethod(DialogPopup.create)
    title = staticmethod(DialogTitle.create)
    description = staticmethod(DialogDescription.create)
    close = staticmethod(DialogClose.create)
    class_names = ClassNames
    __call__ = staticmethod(HighLevelDialog.create)


Instruction:
ss_name(ClassNames.DESCRIPTION, props)
        return super().create(*children, **props)

class DrawerHandle(DrawerBaseComponent):
    """An optional handle to drag the drawer."""

    tag = "Drawer.Handle"

    alias = "Vaul" + tag

    @classmethod
    def create(cls, *children, **props) -> Component:
        """Create the drawer handle component."""
        props["data-slot"] = "drawer-handle"
        cls.set_class_name(ClassNames.HANDLE, props)
        return super().create(*children, **props)

class HighLevelDrawer(DrawerRoot):
    """High level wrapper for the Drawer component."""

    # Drawer props
    trigger: Var[Component | None]
    content: Var[str | Component | None]
    title: Var[str | Component | None]
    description: Var[str | Component | None]

    @classmethod
    def create(cls, *children, **props) -> Component:
        """Create the high level drawer component."""
        trigger = props.pop("trigger", None)
        content = props.pop("content", None)

Input:
        description = props.pop("description", None)

        return super().create(
            DrawerTrigger.create(render_=trigger) if trigger is not None else None,
            DrawerPortal.create(
                DrawerOverlay.create(),
                DrawerContent.create(
                    DrawerTitle.create(title) if title is not None else None,
                    (
                        DrawerDescription.create(description)
                        if description is not None
                        else None
                    ),
                    content,
                    *children,
                ),
            ),
            **props,
        )

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "trigger",
            "content",
            "title",
            "description",
        ]

class Drawer(ComponentNamespace):
    """A namespace for Drawer components."""

    root = staticmethod(DrawerRoot.cre

Output: title = props.pop("title", None)


Instruction:
 collision boundary. Defaults to 5.
    collision_padding: Var[int]

    # An element or a rectangle that delimits the area that the popup is confined to. Defaults to the "clipping-ancestors".
    collision_boundary: Var[str]

    # Whether to maintain the popup in the viewport after the anchor element was scrolled out of view. Defaults to False.
    sticky: Var[bool]

    # Whether the popup tracks any layout shift of its positioning anchor. Defaults to True.
    track_anchor: Var[bool]

    # Determines which CSS position property to use. Defaults to "absolute".
    position_method: Var[LiteralPositionMethod]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu positioner component."""
        props["data-slot"] = "menu-positioner"
        props.setdefault("side_offset", 4)
        cls.set_class_name(ClassNames.POSITIONER, props)
        return super().create(*children, **props)

Input:
class MenuArrow(MenuBaseComponent):
    """Displays an element positioned against the menu anchor. Renders a <div> element."""

    tag = "Menu.Arrow"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu arrow component."""
        props["data-slot"] = "menu-arrow"
        cls.set_class_name(ClassNames.ARROW, props)
        return super().create(*children, **props)

class MenuItem(MenuBaseComponent):
    """An individual interactive item in the menu. Renders a <div> element."""

    tag = "Menu.Item"

    # Overrides the text label to use when the item is matched during keyboard text navigation.
    label: Var[str]

    # Whether to close the menu when the item is clicked. Defaults to True.
    close_on_click: Var[bool]

    # Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <d

Output:
class MenuPopup(MenuBaseComponent):
    """A container for the menu items. Renders a <div> element."""

    tag = "Menu.Popup"

    # Determines the element to focus when the menu is closed. By default, focus returns to the trigger.
    final_focus: Var[str]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu popup component."""
        props["data-slot"] = "menu-popup"
        cls.set_class_name(ClassNames.POPUP, props)
        return super().create(*children, **props)


Instruction:
e(ClassNames.POSITIONER, props)
        return super().create(*children, **props)

class MenuPopup(MenuBaseComponent):
    """A container for the menu items. Renders a <div> element."""

    tag = "Menu.Popup"

    # Determines the element to focus when the menu is closed. By default, focus returns to the trigger.
    final_focus: Var[str]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu popup component."""
        props["data-slot"] = "menu-popup"
        cls.set_class_name(ClassNames.POPUP, props)
        return super().create(*children, **props)

class MenuArrow(MenuBaseComponent):
    """Displays an element positioned against the menu anchor. Renders a <div> element."""

    tag = "Menu.Arrow"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu arrow component."""

Input:
        cls.set_class_name(ClassNames.ARROW, props)
        return super().create(*children, **props)

class MenuItem(MenuBaseComponent):
    """An individual interactive item in the menu. Renders a <div> element."""

    tag = "Menu.Item"

    # Overrides the text label to use when the item is matched during keyboard text navigation.
    label: Var[str]

    # Whether to close the menu when the item is clicked. Defaults to True.
    close_on_click: Var[bool]

    # Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>). Defaults to False.
    native_button: Var[bool]

    # Whether the component should ignore user interaction. Defaults to False.
    disabled: Var[bool]

    # The render prop.
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the menu item component."""
        props["data-slot"] = "menu-it

Output: props["data-slot"] = "menu-arrow"


Instruction:
"""Custom navigation menu component."""

from typing import Literal

from reflex.components.component import Component, ComponentNamespace
from reflex.event import EventHandler, passthrough_event_spec
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent

LiteralNavigationMenuOrientation = Literal["horizontal", "vertical"]
LiteralSide = Literal["top", "right", "bottom", "left"]
LiteralAlign = Literal["start", "center", "end"]
LiteralPositionMethod = Literal["absolute", "fixed"]

Input:
class ClassNames:
    """Class names for navigation menu components."""

    ROOT = "min-w-max rounded-lg bg-secondary-1 p-1 text-secondary-12"
    LIST = "relative flex"
    ITEM = "relative"
    TRIGGER = "box-border flex items-center justify-center gap-1.5 h-10 px-2 xs:px-3.5 m-0 rounded-ui-md bg-secondary-1 text-secondary-12 font-medium text-[0.925rem] xs:text-base leading-6 select-none no-underline hover:bg-secondary-3 active:bg-secondary-3 data-[popup-open]:bg-secondary-3 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
    CONTENT = "w-max max-w-[calc(100vw-40px)] sm:max-w-[600px] p-6 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] data-[ending-style]:data-[activation-direction=left]:translate-x-[

Output: LiteralCollisionAvoidance = Literal["flip", "shift", "auto"]


Instruction:
(--transform-origin)] rounded-lg bg-secondary-1 text-secondary-12 shadow-large border border-secondary-a4 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 min-[500px]:w-[var(--popup-width)] xs:w-[var(--popup-width)]"
    VIEWPORT = "relative h-full w-full overflow-hidden"
    ARROW = "flex transition-[left] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"
    BACKDROP = "fixed inset-0 z-40"

class NavigationMenuBaseComponent(BaseUIComponent):
    """Base component for navigation menu components."""

    library = f"{PACKAGE_NAME}/navigation-menu"

    @property

Input:
class NavigationMenuRoot(NavigationMenuBaseComponent):
    """Groups all parts of the navigation menu. Renders a <nav> element at the root, or <div> element when nested."""

    tag = "NavigationMenu.Root"

    # The controlled value of the navigation menu item that should be currently open. When non-nullish, the menu will be open. When nullish, the menu will be closed. To render an uncontrolled navigation menu, use the defaultValue prop instead.
    value: Var[str]

    # The uncontrolled value of the item that should be initially selected. To render a controlled navigation menu, use the value prop instead.
    default_value: Var[str]

    # Callback fired when the value changes.
    on_value_change: EventHandler[passthrough_event_spec(str, dict)]

    # The orientation of the navigation menu.
    orientation: Var[LiteralNavigationMenuOrientation]

    # How long to wait before opening the navigation menu. Specified in milliseconds. Defaults to 50.
    delay: Var[int]

    # How lo

Output:
def import_var(self):
        """Return the import variable for the navigation menu component."""
        return ImportVar(tag="NavigationMenu", package_path="", install=False)


Instruction:
"""Custom popover component."""

from typing import Literal

from reflex.components.component import Component, ComponentNamespace
from reflex.event import EventHandler, passthrough_event_spec
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
from reflex_ui.utils.twmerge import cn

LiteralAlign = Literal["start", "center", "end"]

Input:
LiteralPosition = Literal["absolute", "fixed"]

class ClassNames:
    """Class names for popover components."""

    ROOT = ""
    TRIGGER = ""
    BACKDROP = ""
    PORTAL = ""
    POSITIONER = ""
    POPUP = "origin-(--transform-origin) rounded-ui-xl p-1 border border-secondary-a4 bg-secondary-1 shadow-large transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 outline-none min-w-36 flex flex-col gap-2"
    ARROW = "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180"
    TITLE = "text-lg font-semibold text-secondary-12"
    DESCRIPTION = "text-sm text-secondary-11 font-[450]"
    CLOSE = ""

class PopoverBaseComponent(BaseUIComponent):
    """Base component for popover components."""

    library = f"{PACKAGE_NAME}/popover"

Output: LiteralSide = Literal["bottom", "inline-end", "inline-start", "left", "right", "top"]


Instruction:
erTitle.create(title) if title is not None else None,
                        (
                            PopoverDescription.create(description)
                            if description is not None
                            else None
                        ),
                        content,
                        *children,
                        class_name=cn(ClassNames.POPUP, class_name),
                    ),
                    **positioner_props,
                ),
                **portal_props,
            ),
            **props,
        )

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "trigger",
            "content",
            "title",
            "description",
        ]

class Popover(ComponentNamespace):
    """Namespace for Popover components."""

    root = staticmethod(PopoverRoot.create)
    trigger = staticmethod(PopoverTrigger.create)
    backdrop = staticmethod(PopoverBackdrop.create)

Input:
    positioner = staticmethod(PopoverPositioner.create)
    popup = staticmethod(PopoverPopup.create)
    arrow = staticmethod(PopoverArrow.create)
    title = staticmethod(PopoverTitle.create)
    description = staticmethod(PopoverDescription.create)
    close = staticmethod(PopoverClose.create)
    class_names = ClassNames
    __call__ = staticmethod(HighLevelPopover.create)

popover = Popover()

Output: portal = staticmethod(PopoverPortal.create)


Instruction:
s_name(ClassNames.VIEWPORT, props)
        return super().create(*children, **props)

class ScrollAreaContent(ScrollAreaBaseComponent):
    """A container for the content of the scroll area."""

    tag = "ScrollArea.Content"

    # Render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the scroll area content component."""
        props["data-slot"] = "scroll-area-content"
        cls.set_class_name(ClassNames.CONTENT, props)
        return super().create(*children, **props)

class ScrollAreaScrollbar(ScrollAreaBaseComponent):
    """The scrollbar of the scroll area."""

    tag = "ScrollArea.Scrollbar"

    # Orientation of the scrollbar
    orientation: Var[LiteralOrientation] = Var.create("vertical")

    # Whether to keep the HTML element in the DOM when the viewport isn't scrollable
    keep_mounted: Var[bool] = Var.create(False)

    # Render prop
    render_: Var[Component]

    @classmethod

Input:
class ScrollAreaThumb(ScrollAreaBaseComponent):
    """The thumb of the scrollbar."""

    tag = "ScrollArea.Thumb"

    # Render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the scroll area thumb component."""
        props["data-slot"] = "scroll-area-thumb"
        cls.set_class_name(ClassNames.THUMB, props)
        return super().create(*children, **props)

class ScrollAreaCorner(ScrollAreaBaseComponent):
    """A small rectangular area that appears at the intersection of horizontal and vertical scrollbars."""

    tag = "ScrollArea.Corner"

    # Render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the scroll area corner component."""
        props["data-slot"] = "scroll-area-corner"
        cls.set_class_name(ClassNames.CORNER, props)
        return super().create(*children, **props)

class HighLevelScrollArea(S

Output:
def create(cls, *children, **props) -> BaseUIComponent:
        """Create the scroll area scrollbar component."""
        props["data-slot"] = "scroll-area-scrollbar"
        orientation = props.get("orientation", "vertical")

        scrollbar_classes = cn(
            ClassNames.SCROLLBAR_BASE,
            cond(
                orientation == "vertical",
                ClassNames.SCROLLBAR_VERTICAL,
                ClassNames.SCROLLBAR_HORIZONTAL,
            ),
        )

        cls.set_class_name(scrollbar_classes, props)
        return super().create(*children, **props)


Instruction:
ethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-item-text"
        cls.set_class_name(ClassNames.ITEM_TEXT, props)
        return super().create(*children, **props)

class SelectItemIndicator(SelectBaseComponent):
    """Indicates whether the select item is selected."""

    tag = "Select.ItemIndicator"

    # Whether to keep the HTML element in the DOM when the item is not selected. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-item-indicator"
        cls.set_class_name(ClassNames.ITEM_INDICATOR, props)
        return super().create(*children, **props)

class SelectGroup(SelectBaseComponent):
    """Groups related select items with the corresponding label."""

Input:
    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-group"
        cls.set_class_name(ClassNames.GROUP, props)
        return super().create(*children, **props)

class SelectGroupLabel(SelectBaseComponent):
    """An accessible label that is automatically associated with its parent group."""

    tag = "Select.GroupLabel"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-group-label"
        cls.set_class_name(ClassNames.GROUP_LABEL, props)
        return super().create(*children, **props)

class SelectSeparator(SelectBaseComponent):
    """A separator element accessible to screen readers."""

    tag = "Select.Separator"

    # The orientation of the separ

Output: tag = "Select.Group"


Instruction:
r prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-separator"
        cls.set_class_name(ClassNames.SEPARATOR, props)
        return super().create(*children, **props)

class SelectIcon(SelectBaseComponent):
    """An icon that indicates that the trigger button opens a select menu."""

    tag = "Select.Icon"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-icon"
        cls.set_class_name(ClassNames.ICON, props)
        return super().create(*children, **props)

class SelectArrow(SelectBaseComponent):
    """Displays an element positioned against the select menu anchor."""

    tag = "Select.Arrow"

    # The render prop
    render_: Var[Component]

    @classmethod

Input:
class SelectScrollUpArrow(SelectBaseComponent):
    """An element that scrolls the select menu up when hovered."""

    tag = "Select.ScrollUpArrow"

    # Whether to keep the component mounted when not visible. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-scroll-up-arrow"
        cls.set_class_name(ClassNames.SCROLL_ARROW_UP, props)
        return super().create(*children, **props)

class SelectScrollDownArrow(SelectBaseComponent):
    """An element that scrolls the select menu down when hovered."""

    tag = "Select.ScrollDownArrow"

    # Whether to keep the component mounted when not visible. Defaults to False.
    keep_mounted: Var[bool]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUICompone

Output:
def create(cls, *children, **props) -> BaseUIComponent:
        """Create the dialog trigger component."""
        props["data-slot"] = "select-arrow"
        cls.set_class_name(ClassNames.ARROW, props)
        return super().create(*children, **props)


Instruction:
Literal["horizontal", "vertical"]

on_value_event_spec = (
    passthrough_event_spec(int),
    passthrough_event_spec(float),
    passthrough_event_spec(list[int | float]),
    passthrough_event_spec(list[int]),
    passthrough_event_spec(list[float]),
)

class ClassNames:
    """Class names for slider components."""

    ROOT = "flex max-w-64 w-full touch-none items-center select-none"
    VALUE = "text-sm text-primary-11 font-medium"
    CONTROL = "flex items-center justify-center w-full"
    TRACK = "h-2 w-full rounded-full bg-secondary-4 select-none"
    INDICATOR = "absolute h-full rounded-full bg-primary-9 select-none"
    THUMB = "h-4 w-[0.575rem] rounded-[2px] bg-white outline outline-black/30 select-none box-shadow:[0_0_0_1px_rgba(0,0,0,1),0_1px_2px_rgba(0,0,0,.04)] data-[dragging]:h-5 transition-[height,scale] hover:h-4.5"

class SliderBaseComponent(BaseUIComponent):
    """Base component for slider components."""

    library = f"{PACKAGE_NAME}/slider"

    @property

Input:
class SliderRoot(SliderBaseComponent):
    """Groups all parts of the slider. Renders a div element."""

    tag = "Slider.Root"

    # Identifies the field when a form is submitted.
    name: Var[str]

    # The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead.
    default_value: Var[int | float | list[int | float]]

    # The value of the slider. For ranged sliders, provide an array with two values.
    value: Var[int | float | list[int | float]]

    # Callback function that is fired when the slider's value changed.
    on_value_change: EventHandler[on_value_event_spec]

    # Callback function that is fired when the pointerup is triggered.
    on_value_committed: EventHandler[on_value_event_spec]

    # Locale information for formatting.
    locale: Var[str]

    # The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We

Output:
def import_var(self):
        """Return the import variable for the slider component."""
        return ImportVar(tag="Slider", package_path="", install=False)


Instruction:
."""
        props["data-slot"] = "slider-control"
        cls.set_class_name(ClassNames.CONTROL, props)
        return super().create(*children, **props)

class SliderTrack(SliderBaseComponent):
    """Contains the slider indicator and represents the entire range of the slider. Renders a div element."""

    tag = "Slider.Track"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the slider track component."""
        props["data-slot"] = "slider-track"
        cls.set_class_name(ClassNames.TRACK, props)
        return super().create(*children, **props)

class SliderIndicator(SliderBaseComponent):
    """Visualizes the current value of the slider. Renders a div element."""

    tag = "Slider.Indicator"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the slider indicator component."""

Input:
        cls.set_class_name(ClassNames.INDICATOR, props)
        return super().create(*children, **props)

class SliderThumb(SliderBaseComponent):
    """The draggable part of the slider at the tip of the indicator. Renders a div element."""

    tag = "Slider.Thumb"

    # Accepts a function which returns a string value that provides a user-friendly name for the input associated with the thumb.
    get_aria_label: Var[str]

    # Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
    get_aria_value_text: Var[str]

    # Whether the thumb should ignore user interaction.
    disabled: Var[bool]

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the slider thumb component."""
        props["data-slot"] = "slider-thumb"
        cls.set_class_name(ClassNames.THUMB, props)
        ret

Output: props["data-slot"] = "slider-indicator"


Instruction:
rt of the switch that indicates whether the switch is on or off. Renders a span."""

    tag = "Switch.Thumb"

    # The render prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the switch thumb component."""
        props["data-slot"] = "switch-thumb"
        cls.set_class_name(ClassNames.THUMB, props)
        return super().create(*children, **props)

class HighLevelSwitch(SwitchRoot):
    """High-level wrapper for the Switch component."""

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create a complete switch component.

        Args:
            *children: Additional children to include in the switch.
            **props: Additional properties to apply to the switch component.

        Returns:
            The switch component.
        """
        return SwitchRoot.create(
            SwitchThumb.create(),
            *children,
            **props,
        )

Input: switch = Switch()

Output:
class Switch(ComponentNamespace):
    """Namespace for Switch components."""

    root = staticmethod(SwitchRoot.create)
    thumb = staticmethod(SwitchThumb.create)
    class_names = ClassNames
    __call__ = staticmethod(HighLevelSwitch.create)


Instruction:
er prop
    render_: Var[Component]

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create the switch thumb component."""
        props["data-slot"] = "switch-thumb"
        cls.set_class_name(ClassNames.THUMB, props)
        return super().create(*children, **props)

class HighLevelSwitch(SwitchRoot):
    """High-level wrapper for the Switch component."""

    @classmethod
    def create(cls, *children, **props) -> BaseUIComponent:
        """Create a complete switch component.

        Args:
            *children: Additional children to include in the switch.
            **props: Additional properties to apply to the switch component.

        Returns:
            The switch component.
        """
        return SwitchRoot.create(
            SwitchThumb.create(),
            *children,
            **props,
        )

class Switch(ComponentNamespace):
    """Namespace for Switch components."""

    root = staticmethod(SwitchRoot.create)

Input:
    class_names = ClassNames
    __call__ = staticmethod(HighLevelSwitch.create)

switch = Switch()

Output: thumb = staticmethod(SwitchThumb.create)


Instruction:
"""Theme switcher component."""

from reflex.components.component import Component, memo
from reflex.components.core.cond import cond
from reflex.components.el import Button, Div
from reflex.style import LiteralColorMode, color_mode, set_color_mode

from reflex_ui.components.icons.hugeicon import hi

Input:
def theme_switcher_item(mode: LiteralColorMode, icon: str) -> Component:
    """Create a theme switcher item button for a specific mode."""
    active_cn = "text-secondary-11 shadow-small bg-secondary-1"
    unactive_cn = "hover:text-secondary-11 text-secondary-9"
    return Button.create(
        hi(icon, class_name="shrink-0", size=14),
        on_click=set_color_mode(mode),
        class_name=(
            "flex items-center cursor-pointer justify-center rounded-ui-xs transition-color size-6",
            cond(mode == color_mode, active_cn, unactive_cn),
        ),
        aria_label=f"Switch to {mode} mode",
    )

def theme_switcher(class_name: str = "") -> Component:
    """Theme switcher component."""
    return Div.create(
        theme_switcher_item("system", "ComputerIcon"),
        theme_switcher_item("light", "Sun01Icon"),
        theme_switcher_item("dark", "Moon02Icon"),
        class_name=cn(
            "flex flex-row items-center bg-secondary-3 p-1 rounded-ui-md w-

Output: from reflex_ui.utils.twmerge import cn


Instruction:
"""Tooltip component from base-ui components."""

from typing import Literal

from reflex.components.component import Component, ComponentNamespace

Input:
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
from reflex_ui.components.icons.others import arrow_svg

LiteralSide = Literal["top", "right", "bottom", "left", "inline-end", "inline-start"]
LiteralAlign = Literal["start", "center", "end"]
LiteralPositionMethod = Literal["absolute", "fixed"]
LiteralTrackCursorAxis = Literal["none", "bottom", "x", "y"]

# Constants for default class names
class ClassNames:
    """Class names for tooltip components."""

    TRIGGER = "inline-flex items-center justify-center"
    POPUP = "rounded-ui-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

Output: from reflex.event import EventHandler, passthrough_event_spec


Instruction:
("content")

        # Extract props for different parts
        root_props = {k: props.pop(k) for k in cls._root_props & props.keys()}
        portal_props = {k: props.pop(k) for k in cls._portal_props & props.keys()}
        positioner_props = {
            k: props.pop(k) for k in cls._positioner_props & props.keys()
        }

        # Set default values
        positioner_props.setdefault("side_offset", 8)
        root_props.setdefault("delay", 0)
        root_props.setdefault("close_delay", 0)

        return TooltipRoot.create(
            TooltipTrigger.create(
                render_=trigger,
            ),
            TooltipPortal.create(
                TooltipPositioner.create(
                    TooltipPopup.create(
                        TooltipArrow.create(arrow_svg()),
                        content,
                    ),
                    **positioner_props,
                ),
                **portal_props,
            ),
            **root_props,
        )

Input: tooltip = Tooltip()

Output:
class Tooltip(ComponentNamespace):
    """Namespace for Tooltip components."""

    provider = staticmethod(TooltipProvider.create)
    root = staticmethod(TooltipRoot.create)
    trigger = staticmethod(TooltipTrigger.create)
    portal = staticmethod(TooltipPortal.create)
    positioner = staticmethod(TooltipPositioner.create)
    popup = staticmethod(TooltipPopup.create)
    arrow = staticmethod(TooltipArrow.create)
    class_names = ClassNames
    __call__ = staticmethod(HighLevelTooltip.create)


Instruction:
FILE) not in changed_files:
        return changed_files
    logger.info("make_pyi.py has changed, checking diff now")
    diff = "".join(_git_diff([GENERATOR_FILE.as_posix()]).splitlines()[2:])

    try:
        last_diff = GENERATOR_DIFF_FILE.read_text()
        if diff != last_diff:
            logger.info("make_pyi.py has changed, regenerating all .pyi files")
            changed_files = None
        else:
            logger.info("make_pyi.py has not changed, only regenerating changed files")
    except FileNotFoundError:
        logger.info(
            "make_pyi.py diff could not be determined, regenerating all .pyi files"
        )
        changed_files = None

    GENERATOR_DIFF_FILE.write_text(diff)

    return changed_files

if __name__ == "__main__":
    targets = (
        [arg for arg in sys.argv[1:] if not arg.startswith("tests")]
        if len(sys.argv) > 1
        else DEFAULT_TARGETS
    )

    # Only include targets that have a prefix in the default target list

Input:
    logger.info(f"Running .pyi generator for {targets}")

    changed_files = _get_changed_files()
    if changed_files is None:
        logger.info("Changed files could not be detected, regenerating all .pyi files")
    else:
        logger.info(f"Detected changed files: {changed_files}")

    gen = PyiGenerator()
    gen.scan_all(targets, changed_files)

    current_commit_sha = subprocess.run(
        ["git", "rev-parse", "HEAD"], capture_output=True, encoding="utf-8"
    ).stdout.strip()
    LAST_RUN_COMMIT_SHA_FILE.write_text(current_commit_sha)

Output:
targets = [
        target
        for target in targets
        if any(str(target).startswith(prefix) for prefix in DEFAULT_TARGETS)
    ]


Instruction:
from __future__ import annotations

from logging.config import fileConfig

from sqlalchemy import engine_from_config, pool

Input:
# this is the Alembic Config object, which provides
# access to the values within the .ini file in use.
config = context.config

# Interpret the config file for Python logging.
# This line sets up loggers basically.
if config.config_file_name is not None:
    fileConfig(config.config_file_name)

# add your model's MetaData object here
# for 'autogenerate' support
# from myapp import mymodel
# target_metadata = mymodel.Base.metadata
target_metadata = None

# other values from the config, defined by the needs of env.py,
# can be acquired:
# my_important_option = config.get_main_option("my_important_option")
# ... etc.

def run_migrations_offline() -> None:
    """Run migrations in 'offline' mode.

    This configures the context with just a URL
    and not an Engine, though an Engine is acceptable
    here as well.  By skipping the Engine creation
    we don't even need a DBAPI to be available.

    Calls to context.execute() here emit the given string to the
    script output.

    "

Output: from alembic import context


Instruction:
from __future__ import annotations

import os

import openai
import reflex as rx

OPENAI_API_KEY = os.environ.get("OPENAI_API_KEY")

class ChatappState(rx.State):
    # The current question being asked.
    question: str

    # Keep track of the chat history as a list of (question, answer) tuples.
    chat_history: list[tuple[str, str]]

    def set_question(self, q: str):
        self.question = q

    def set_question1(self, q: str):

Input:
    def set_question2(self, q: str):
        self.question = q

    def set_question3(self, q: str):
        self.question = q

    def answer(self) -> None:
        # Our chatbot is not very smart right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, answer))

    def answer2(self) -> None:
        # Our chatbot is not very smart right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, answer))
        # Clear the question input.
        self.question = ""

    async def answer3(self):
        import asyncio

        # Our chatbot is not very smart right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, ""))

        # Clear the question input.
        self.question = ""
        # Yield here to clear the frontend input before continuing.
        yield

        for i in range(len(answer)):
            await asyncio.sleep(0.1)
            self.chat_history[-1] = (self.

Output: self.question = q


Instruction:
rt right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, answer))

    def answer2(self) -> None:
        # Our chatbot is not very smart right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, answer))
        # Clear the question input.
        self.question = ""

    async def answer3(self):
        import asyncio

        # Our chatbot is not very smart right now...
        answer = "I don't know!"
        self.chat_history.append((self.question, ""))

        # Clear the question input.
        self.question = ""
        # Yield here to clear the frontend input before continuing.
        yield

        for i in range(len(answer)):
            await asyncio.sleep(0.1)
            self.chat_history[-1] = (self.chat_history[-1][0], answer[: i + 1])
            yield

    async def answer4(self):
        # Our chatbot has some brains now!
        client = openai.AsyncOpenAI(api_key=OPENAI_API_KEY)

Input:
        # Add to the answer as the chatbot responds.
        answer = ""
        self.chat_history.append((self.question, answer))

        # Clear the question input.
        self.question = ""
        # Yield here to clear the frontend input before continuing.
        yield

        async for item in session:
            if hasattr(item.choices[0].delta, "content"):
                if item.choices[0].delta.content is None:
                    # presence of 'None' indicates the end of the response
                    break
                answer += item.choices[0].delta.content
                self.chat_history[-1] = (self.chat_history[-1][0], answer)
                yield

Output:
session = await client.chat.completions.create(
            model="gpt-4o-mini",
            messages=[{"role": "user", "content": self.question}],
            stop=None,
            temperature=0.7,
            stream=True,
        )


Instruction:
comp_xd,
    h3_comp_xd,
    h4_comp_xd,
    list_comp,
    ordered_list_comp,
    text_comp,
    unordered_list_comp,
)

def get_code_style(color: str):
    return {
        "p": {"margin_y": "0px"},
        "code": {
            "color": rx.color(color, 11),
            "border_radius": "4px",
            "border": f"1px solid {rx.color(color, 5)}",
            "background": rx.color(color, 4),
            **code,
        },
        **base,
    }

class AlertBlock(flexdown.blocks.MarkdownBlock):
    """A block that displays a component along with its code."""

    starting_indicator = "```md alert"
    ending_indicator = "```"

    include_indicators = True

    def render(self, env) -> rx.Component:
        lines = self.get_lines(env)

        args = lines[0].removeprefix(self.starting_indicator).split()

        if len(args) == 0:
            args = ["info"]
        status = args[0]

        if lines[1].startswith("#"):
            title = lines[1].strip("#").strip()

Input:
        else:
            title = ""
            content = "\n".join(lines[1:-1])

        colors = {
            "info": "accent",
            "success": "grass",
            "warning": "amber",
            "error": "red",
        }

        color = colors.get(status, "blue")

        has_content = bool(content.strip())

        if has_content:
            return rx.box(
                rx.accordion.root(
                    rx.accordion.item(
                        rx.accordion.header(
                            rx.accordion.trigger(
                                rx.hstack(
                                    rx.box(
                                        rx.match(
                                            status,
                                            (
                                                "info",
                                                rx.icon(
                                                    tag="info",

Output: content = "\n".join(lines[2:-1])


Instruction:
 for the home page."""

    # Whether the user signed up for the newsletter.
    signed_up: bool = False

    # Whether to show the confetti.
    show_confetti: bool = False

    @rx.event(background=True)
    async def send_contact_to_webhook(
        self,
        email: str,
    ) -> None:
        with contextlib.suppress(httpx.HTTPError):
            async with httpx.AsyncClient() as client:
                response = await client.post(
                    REFLEX_DEV_WEB_NEWSLETTER_FORM_WEBHOOK_URL,
                    json={
                        "email": email,
                    },
                )
            response.raise_for_status()

    @rx.event(background=True)
    async def add_contact_to_loops(
        self,
        email: str,
    ):
        url: str = f"{API_BASE_URL_LOOPS}/contacts/create"
        loops_api_key: str | None = os.getenv("LOOPS_API_KEY")
        if loops_api_key is None:
            print("Loops API key does not exist")
            return

Input:
        try:
            async with httpx.AsyncClient() as client:
                response = await client.post(
                    url,
                    headers=headers,
                    json={
                        "email": email,
                    },
                )
                response.raise_for_status()  # Raise an exception for HTTP errors (4xx and 5xx)

        except httpx.HTTPError as e:
            print(f"An error occurred: {e}")

    @rx.event
    def signup_for_another_user(self):
        self.signed_up = False

    @rx.event(background=True)
    async def signup(
        self,
        form_data: dict[str, Any],
    ):
        """Sign the user up for the newsletter."""
        email: str | None = None
        if email_to_validate := form_data.get("input_email"):
            try:
                validated_email: ValidatedEmail = validate_email(
                    email_to_validate,
                    check_deliverability=True,
                )

Output:
headers = {
            "Accept": "application/json",
            "Authorization": f"Bearer {loops_api_key}",
        }


Instruction:
    text: str = "",
    variant: LiteralButtonVariant = "primary",
    size: LiteralButtonSize = "sm",
    style: Dict[str, Any] | None = None,
    class_name: str = "",
    icon: Optional[rx.Component] = None,
    **props,
) -> rx.Component:
    """Create a button component.

    Args:
        text (str): The text to display on the button.
        variant (LiteralButtonVariant, optional): The button variant. Defaults to "primary".
        size (LiteralButtonSize, optional): The button size. Defaults to "sm".
        style (Dict[str, Any], optional): Additional styles to apply to the button. Defaults to {}.
        class_name (str, optional): Additional CSS classes to apply to the button. Defaults to "".
        icon (Optional[rx.Component], optional): An optional icon component to display before the text. Defaults to None.
        **props: Additional props to pass to the button element.

    Returns:
        rx.Component: A button component with the specified properties.

    """

Input:
    variant_class = BUTTON_STYLES["variant"][variant]
    variant_class = variant_class() if callable(variant_class) else variant_class

    classes = [
        DEFAULT_CLASS_NAME,
        BUTTON_STYLES["size"][size],
        variant_class,
        class_name,
    ]

    content = [icon, text] if icon else [text]

    return rx.el.button(
        *content,
        style=style,
        class_name=cn(*classes),
        **props,
    )

Output:
if style is None:
        style = {}


Instruction:
"""The state for the navbar component."""

import reflex as rx

class NavbarState(rx.State):
    """The state for the navbar component."""

    # Whether the sidebar is open.
    sidebar_open: bool = False

    search_input: str = ""

    enter: bool = False

    banner: bool = True

    ai_chat: bool = True

    current_category = "All"

    @rx.event
    def set_sidebar_open(self, value: bool):

Input:
    def toggle_banner(self):
        self.banner = not self.banner

    def toggle_sidebar(self):
        self.sidebar_open = not self.sidebar_open

    def toggle_ai_chat(self):
        self.ai_chat = not self.ai_chat

    def update_category(self, tag):
        self.current_category = tag

Output: self.sidebar_open = value


Instruction:
      "url": doc.get("url", ""),
                "image": doc.get("path", ""),
                "cluster": self._get_cluster_from_section(doc.get("section", "")),
                "description": self._get_highlighted_content(doc, highlights),
            }

        else:
            return {
                "title": doc.get("title", ""),
                "url": doc.get("url", ""),
                "author": doc.get("author", ""),
                "date": doc.get("date", ""),
                "description": self._truncate_content(doc.get("content", "")),
                "image": doc.get("image", ""),
            }

    def _get_cluster_from_section(self, section: str) -> str:
        """Map section back to cluster name."""
        for cluster, sections in CLUSTERS.items():
            if section in sections:
                return cluster
        return "Docs"

    def _truncate_content(self, content: str, max_length: int = 200) -> str:
        """Truncate content for description."""

Input:
        return content[:max_length].rstrip() + "..."

def keyboard_shortcut_script() -> rx.Component:
    """Add keyboard shortcut support for opening search."""
    return rx.script(
        """
        document.addEventListener('keydown', function(e) {
            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                e.preventDefault();
                document.getElementById('search-trigger').click();
            }
        });
        """
    )

def search_trigger() -> rx.Component:
    """Render the search trigger button."""
    return ui.button(
        rx.html(
            """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
  <path d="M11.6681 11.6671L14.6681 14.6671M13.3347 7.33374C13.3347 4.02003 10.6485 1.33374 7.33472 1.33374C4.02101 1.33374 1.33472 4.02003 1.33472 7.33374C1.33472 10.6475 4.02101 13.3337 7.33472 13.3337C10.6485 13.3337 13.3347 10.6475 13.3347 7.33374Z" stroke="currentColor" stroke-width="1.5" stroke

Output:
if len(content) <= max_length:
            return content


Input:
from reflex.style import toggle_color_mode

from pcweb.components.icons.icons import get_icon
from pcweb.constants import DISCORD_URL, GITHUB_URL, TWITTER_URL
from pcweb.pages.blog import blogs
from pcweb.pages.docs import getting_started
from pcweb.pages.docs.library import library
from pcweb.pages.framework.framework import framework
from pcweb.pages.gallery import gallery
from pcweb.pages.hosting.hosting import hosting_landing

def social_menu_item(
    icon: str,
    url="/",
    border: bool = False,
) -> rx.Component:
    return rx.link(
        get_icon(icon=icon, class_name="!text-slate-9"),
        class_name="flex justify-center items-center gap-2 hover:bg-slate-3 px-4 py-[0.875rem] w-full h-[47px] transition-bg overflow-hidden"
        + (" border-slate-4 border-x border-solid border-y-0" if border else ""),
        href=url,
        is_external=True,
    )

def drawer_socials() -> rx.Component:
    return rx.box(
        social_menu_item("github", GITHUB_URL),
        so

Output: import reflex as rx


Instruction:
        children=[
                hosting.app_management,
                hosting.machine_types,
                hosting.regions,
                hosting.logs,
                hosting.secrets_environment_vars,
                hosting.custom_domains,
                hosting.config_file,
                hosting.tokens,
                hosting.deploy_with_github_actions,
            ],
        ),
        create_item(
            "Usage",
            children=[
                hosting.billing,
                hosting.compute,
            ],
        ),
        create_item("CLI Reference", children=cloud_cliref.pages),
        create_item(
            "Self Hosting",
            children=[
                hosting.self_hosting,
                hosting.databricks,
            ],
        ),
    ]
    return items

def get_sidebar_items_hosting_cli_ref():
    items = [
        create_item("CLI Reference", children=cloud_cliref.pages),
    ]
    return items

learn = get_sidebar_items_learn()

Input:
backend = get_sidebar_items_backend()
hosting = get_sidebar_items_hosting()
cli_ref = get_sidebar_items_hosting_cli_ref()

Output: frontend = get_sidebar_items_frontend()


Instruction:
vg>
"""

new_tab = """<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_8639_335)">
<path d="M8.75004 5.24992L4.66671 9.33325M5.83337 4.73235C5.83337 4.73235 8.65017 4.4949 9.07758 4.92236C9.50505 5.34981 9.26757 8.16659 9.26757 8.16659M11.8429 2.4807C12.5417 3.2989 12.5417 4.53258 12.5417 6.99992C12.5417 9.46724 12.5417 10.7009 11.8429 11.5191C11.7436 11.6353 11.6354 11.7435 11.5192 11.8428C10.7011 12.5416 9.46737 12.5416 7.00004 12.5416C4.5327 12.5416 3.29902 12.5416 2.48082 11.8428C2.36463 11.7435 2.25642 11.6353 2.15719 11.5191C1.45837 10.7009 1.45837 9.46724 1.45837 6.99992C1.45837 4.53258 1.45837 3.2989 2.15719 2.4807C2.25642 2.36451 2.36463 2.2563 2.48082 2.15707C3.29902 1.45825 4.5327 1.45825 7.00004 1.45825C9.46737 1.45825 10.7011 1.45825 11.5192 2.15707C11.6354 2.2563 11.7436 2.36451 11.8429 2.4807Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
"""

Input:
eye = """<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M12.5681 6.44324C12.7455 6.69192 12.8341 6.81628 12.8341 7.00033C12.8341 7.18437 12.7455 7.30873 12.5681 7.55741C11.7713 8.67484 9.73618 11.0837 7.00081 11.0837C4.26544 11.0837 2.23037 8.67484 1.4335 7.55741C1.25615 7.30873 1.16748 7.18437 1.16748 7.00033C1.16748 6.81628 1.25615 6.69192 1.4335 6.44324C2.23037 5.32583 4.26544 2.91699 7.00081 2.91699C9.73618 2.91699 11.7713 5.32583 12.5681 6.44324Z" stroke="currentColor" stroke-width="1.5"/>
<path d="M8.75081 7.00033C8.75081 6.0338 7.96734 5.25033 7.00081 5.25033C6.03429 5.25033 5.25081 6.0338 5.25081 7.00033C5.25081 7.96685 6.03429 8.75033 7.00081 8.75033C7.96734 8.75033 8.75081 7.96685 8.75081 7.00033Z" stroke="currentColor" stroke-width="1.5"/>
</svg>
"""

twitter = """<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.39941 13.6L7.0322 8.9677M7.0322 8.9677L2.2666

Output:
copy = """<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
<g clip-path="url(#clip0_8639_330)">
<path d="M9.91657 5.25008C9.91517 3.52511 9.88909 2.63162 9.38696 2.01983C9.29001 1.90168 9.18168 1.79335 9.06356 1.69639C8.41816 1.16675 7.45933 1.16675 5.54163 1.16675C3.62393 1.16675 2.66508 1.16675 2.01971 1.69639C1.90156 1.79335 1.79323 1.90168 1.69627 2.01983C1.16663 2.6652 1.16663 3.62405 1.16663 5.54175C1.16663 7.45946 1.16663 8.41828 1.69627 9.06368C1.79323 9.18181 1.90156 9.29013 2.01971 9.38708C2.6315 9.88921 3.52499 9.91529 5.24996 9.91669M5.24996 8.75008C5.24996 7.10018 5.24996 6.27523 5.76252 5.76264C6.27511 5.25008 7.10006 5.25008 8.74996 5.25008H9.33329C10.9832 5.25008 11.8081 5.25008 12.3207 5.76264C12.8333 6.27523 12.8333 7.10018 12.8333 8.75008V9.33341C12.8333 10.9833 12.8333 11.8083 12.3207 12.3208C11.8081 12.8334 10.9832 12.8334 9.33329 12.8334H8.74996C7.10006 12.8334 6.27511 12.8334 5.76252 12.3208C5.24996 11.8083 5.24996 10.9833 5.24996 9.33341V8.75008Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
"""


Instruction:
6.8678 12.0296 17.3957 12.9833C17.6187 13.386 17.4729 13.8931 17.0702 14.116C16.6677 14.3389 16.1605 14.1932 15.9376 13.7905C15.6197 13.2163 15.08 12.7692 14.3971 12.5862C13.0632 12.2289 11.6925 13.0203 11.3352 14.3534C11.2532 14.6592 11.0052 14.8921 10.6949 14.9546C10.3846 15.0172 10.0657 14.8985 9.87174 14.6483L8.92482 13.4273C8.64282 13.0635 8.70899 12.54 9.07274 12.258C9.43641 11.976 9.95991 12.0422 10.2419 12.4059L10.3667 12.5668ZM16.8048 15.0458C16.4947 15.1085 16.2467 15.3413 16.1648 15.647C15.8076 16.9801 14.4367 17.7715 13.1029 17.4142C12.4358 17.2355 11.9054 16.8048 11.5849 16.2497C11.3547 15.8512 10.8451 15.7147 10.4465 15.9448C10.048 16.1749 9.91141 16.6847 10.1416 17.0832C10.6742 18.0054 11.5605 18.7264 12.6717 19.0241C14.3929 19.4852 16.1515 18.7984 17.1339 17.4328L17.2585 17.5933C17.5407 17.9568 18.0643 18.0227 18.4278 17.7404C18.7913 17.4581 18.8572 16.9346 18.5749 16.5711L17.628 15.3516C17.4339 15.1017 17.115 14.9833 16.8048 15.0458Z" fill="currentColor"/>
</svg>
"""

Input:
backend_compatible = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <path d="M9.50684 5.73327C10.313 5.62488 11.3021 5.62495 12.3806 5.62502H14.2441C14.4908 5.62502 14.6141 5.62502 14.6883 5.54518C14.7624 5.46534 14.7536 5.34519 14.7359 5.10489C14.7205 4.89624 14.7008 4.69912 14.6758 4.51289C14.568 3.71326 14.3525 3.04877 13.893 2.48888C13.7285 2.28845 13.5448 2.10467 13.3443 1.94019C12.7535 1.45534 12.0463 1.24215 11.1872 1.14059C10.3503 1.04167 9.2925 1.04168 7.95728 1.04169H7.87575C6.54053 1.04168 5.48272 1.04167 4.64588 1.14059C3.78674 1.24214 3.07949 1.45534 2.4887 1.94019C2.28827 2.10467 2.10449 2.28845 1.94 2.48888C1.45515 3.07967 1.24195 3.78692 1.1404 4.64606C1.04149 5.48291 1.0415 6.5407 1.0415 7.87592V7.95745C1.0415 9.29269 1.04149 10.3504 1.1404 11.1873C1.24195 12.0464 1.45515 12.7537 1.94 13.3445C2.10449 13.5449 2.28827 13.7287 2.4887 13.8932C3.04859 14.3527 3.71308 14.5682 4.5127 14.6759C4.69893 14.701 4.89605 14.720

Output:
backend_async = """<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1.8289 4.08928C1.55597 4.45985 1.63513 4.98152 2.00571 5.25445C2.15468 5.36417 2.32807 5.41698 2.49989 5.41684H3.74994V12.0835C3.74994 15.6295 6.35194 18.3335 9.99992 18.3335C10.4602 18.3335 10.8332 17.9604 10.8332 17.5002C10.8332 17.04 10.4602 16.6668 9.99992 16.6668C7.28966 16.6668 5.41661 14.7263 5.41661 12.0835V5.41684H6.6734C6.84297 5.41559 7.01374 5.36273 7.16073 5.25448C7.53132 4.98155 7.61038 4.45975 7.33746 4.08917L7.33533 4.08635C7.28801 4.0237 7.15328 3.84531 7.07521 3.74527C6.91734 3.54298 6.69877 3.27044 6.46003 2.99547C6.22488 2.72463 5.95376 2.43233 5.69216 2.20118C5.56231 2.08644 5.41514 1.96913 5.26062 1.87598C5.12898 1.79662 4.88394 1.66681 4.58323 1.66681C4.28253 1.66681 4.03751 1.79662 3.90587 1.87598C3.75135 1.96913 3.60418 2.08644 3.47433 2.20118C3.21272 2.43232 2.9416 2.72463 2.70645 2.99545C2.46771 3.27043 2.24913 3.54295 2.09127 3.74524C2.01332 3.84512 1.8788 4.02321 1.83127 4.08615L1.8289 4.08928Z" fill="currentColor"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2498 7.91687C16.2498 4.37091 13.6478 1.66687 9.99984 1.66687C9.53959 1.66687 9.1665 2.03997 9.1665 2.5002C9.1665 2.96045 9.53959 3.33354 9.99984 3.33354C12.7102 3.33354 14.5832 5.27404 14.5832 7.91687V14.5835H13.3332C13.1613 14.5833 12.988 14.6362 12.839 14.7459C12.4684 15.0188 12.3893 15.5407 12.6623 15.9112L12.6645 15.9141C12.7118 15.9768 12.8465 16.1551 12.9246 16.2551C13.0824 16.4574 13.301 16.7299 13.5398 17.0049C13.7749 17.2758 14.046 17.568 14.3076 17.7992C14.4375 17.9139 14.5847 18.0313 14.7392 18.1243C14.8708 18.2038 15.1158 18.3335 15.4165 18.3335C15.7173 18.3335 15.9623 18.2038 16.0939 18.1243C16.2484 18.0313 16.3956 17.9139 16.5254 17.7992C16.7871 17.568 17.0582 17.2758 17.2933 17.0049C17.5321 16.7299 17.7507 16.4573 17.9085 16.2551C17.9865 16.1551 18.1212 15.9768 18.1686 15.914L18.1708 15.911C18.4438 15.5405 18.3646 15.0188 17.994 14.7458C17.844 14.6354 17.6693 14.5826 17.4963 14.5835H16.2498V7.91687Z" fill="currentColor"/>
</svg>
"""


Input:
from pcweb.components.hosting_banner import HostingBannerState
from pcweb.components.icons.icons import get_icon

def create_pattern(
    pattern: str,
    class_name: str,
) -> rx.Component:
    return get_icon(
        pattern,
        class_name="z-[-1] absolute w-[1111.528px] h-[1094.945px] overflow-hidden pointer-events-none shrink-0"
        + " "
        + class_name,
    )

def default_patterns() -> rx.Component:
    return [
        # Left
        create_pattern(
            "radial_small",
            class_name="top-0 mt-[-80px] mr-[725px] translate-y-0",
        ),
        create_pattern(
            "radial_big",
            class_name="top-0 mt-[90px] mr-[700px] translate-y-0 rotate-180 scale-x-[-1] scale-y-[-1]",
        ),
        # Right
        create_pattern(
            "radial_small",
            class_name="top-0 mt-[-80px] ml-[725px] scale-x-[-1]",
        ),
        create_pattern(
            "radial_big",
            class_name="top-0 mt-[90px] ml-[700px]

Output: import reflex as rx


Instruction:
ucide_icon(node[0], node[1])
                        for node in icon_nodes[icon_name]
                    ],
                ),
                "path": f"https://lucide.dev/api/icons/{icon_name}",
                "component": f"<{icon_name.replace('-', '').title()} />",
                "keywords": icon_tags.get(icon_name, [])
                + icon_categories.get(icon_name, []),
            }
            for icon_name in LUCIDE_ICON_LIST
            if icon_name in icon_categories
        ]

        self.filtered_icons = self.icons

    def filter_icons(self):
        if not self.search_query:
            self.filtered_icons = self.icons
        else:
            query = self.search_query.lower().strip()
            self.filtered_icons = [
                icon
                for icon in self.icons
                if self._is_similar(query, icon["name"].lower())
                or any(self._is_similar(query, kw.lower()) for kw in icon["keywords"])
            ]

    @staticmethod

Input:
    @rx.event
    def update_search(self, value: str):
        self.search_query = value
        self.filter_icons()

    @rx.event
    def copy_icon_name(self, name: str):
        yield rx.set_clipboard(name)
        return rx.toast(f'Copied "{name}" to clipboard')

def lucide_icons():
    return rx.box(
        rx.box(
            rx.box(
                rx.icon(
                    tag="search",
                    size=20,
                    class_name="shrink-0 !text-slate-11",
                ),
                class_name="absolute left-2 top-1/2 transform -translate-y-1/2 z-[1] shrink-0 flex items-center justify-center pb-2",
            ),
            rx.el.input(
                placeholder="Search icons...",
                on_change=IconState.update_search.debounce(250),
                class_name="relative box-border border-slate-4 focus:border-violet-9 focus:border-1 bg-slate-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-slate-11 placeholder:text-slate-9 outlin

Output:
def _is_similar(query: str, target: str) -> bool:
        # Exact match
        if query == target:
            return True

        # Start of word match
        if target.startswith(query):
            return True

        # Word boundary match
        if f" {query}" in f" {target} ":
            return True

        # Acronym match
        if query == "".join(word[0] for word in target.split() if word):
            return True

        # Substring match with minimum length
        return len(query) >= 3 and query in target


Instruction:
').title()} />",
                "keywords": icon_tags.get(icon_name, [])
                + icon_categories.get(icon_name, []),
            }
            for icon_name in LUCIDE_ICON_LIST
            if icon_name in icon_categories
        ]

        self.filtered_icons = self.icons

    def filter_icons(self):
        if not self.search_query:
            self.filtered_icons = self.icons
        else:
            query = self.search_query.lower().strip()
            self.filtered_icons = [
                icon
                for icon in self.icons
                if self._is_similar(query, icon["name"].lower())
                or any(self._is_similar(query, kw.lower()) for kw in icon["keywords"])
            ]

    @staticmethod
    def _is_similar(query: str, target: str) -> bool:
        # Exact match
        if query == target:
            return True

        # Start of word match
        if target.startswith(query):
            return True

        # Word boundary match

Input:
        # Acronym match
        if query == "".join(word[0] for word in target.split() if word):
            return True

        # Substring match with minimum length
        return len(query) >= 3 and query in target

    @rx.event
    def update_search(self, value: str):
        self.search_query = value
        self.filter_icons()

    @rx.event
    def copy_icon_name(self, name: str):
        yield rx.set_clipboard(name)
        return rx.toast(f'Copied "{name}" to clipboard')

def lucide_icons():
    return rx.box(
        rx.box(
            rx.box(
                rx.icon(
                    tag="search",
                    size=20,
                    class_name="shrink-0 !text-slate-11",
                ),
                class_name="absolute left-2 top-1/2 transform -translate-y-1/2 z-[1] shrink-0 flex items-center justify-center pb-2",
            ),
            rx.el.input(
                placeholder="Search icons...",
                on_change=IconState.update_searc

Output:
if f" {query}" in f" {target} ":
            return True


Instruction:
import reflex as rx
from reflex.utils.imports import ImportVar

from pcweb.templates.docpage import docpage

from .source import Source, generate_docs

modules = [
    rx.App,
    rx.Base,
    rx.Component,
    rx.ComponentState,
    (rx.Config, rx.config.BaseConfig),
    rx.event.Event,
    rx.event.EventHandler,
    rx.event.EventSpec,
    rx.Model,
    # rx.testing.AppHarness,
    rx.state.StateManager,
    # rx.state.BaseState,
    rx.State,
    ImportVar,
    rx.Var,
]

from .env_vars import env_vars_doc

pages = []
for module in modules:
    if isinstance(module, tuple):
        module, *extra_modules = module
        extra_fields = []
        for extra_module in extra_modules:
            s_extra = Source(module=extra_module)
            extra_fields.extend(s_extra.get_fields())
    else:
        extra_fields = None
    s = Source(module=module)

Input:
    docs = generate_docs(name, s, extra_fields=extra_fields)
    title = name.replace("_", " ").title()
    page_data = docpage(f"/docs/api-reference/{name}/", title)(docs)
    page_data.title = page_data.title.split("·")[0].strip()
    pages.append(page_data)

pages.append(env_vars_doc)

Output: name = module.__name__.lower()


Instruction:
import reflex as rx
from reflex.utils.imports import ImportVar

from pcweb.templates.docpage import docpage

from .source import Source, generate_docs

modules = [
    rx.App,
    rx.Base,
    rx.Component,
    rx.ComponentState,
    (rx.Config, rx.config.BaseConfig),
    rx.event.Event,
    rx.event.EventHandler,
    rx.event.EventSpec,
    rx.Model,
    # rx.testing.AppHarness,
    rx.state.StateManager,
    # rx.state.BaseState,
    rx.State,
    ImportVar,
    rx.Var,
]

from .env_vars import env_vars_doc

pages = []
for module in modules:
    if isinstance(module, tuple):
        module, *extra_modules = module
        extra_fields = []
        for extra_module in extra_modules:
            s_extra = Source(module=extra_module)
            extra_fields.extend(s_extra.get_fields())
    else:
        extra_fields = None
    s = Source(module=module)
    name = module.__name__.lower()

Input:
    title = name.replace("_", " ").title()
    page_data = docpage(f"/docs/api-reference/{name}/", title)(docs)
    page_data.title = page_data.title.split("·")[0].strip()
    pages.append(page_data)

pages.append(env_vars_doc)

Output: docs = generate_docs(name, s, extra_fields=extra_fields)


Instruction:
lex as rx
from reflex.reflex import cli

from pcweb.flexdown import markdown
from pcweb.templates.docpage import docpage

@dataclasses.dataclass(frozen=True)
class Element:
    def into_text(self) -> str:
        """Convert the element into a text representation."""
        raise NotImplementedError("Subclasses must implement this method.")

@dataclasses.dataclass(frozen=True)
class InlineElement(Element): ...

@dataclasses.dataclass(frozen=True)
class InlineTextCollection(InlineElement):
    elements: tuple[InlineElement, ...]

    def into_text(self) -> str:
        return "".join(element.into_text() for element in self.elements)

@dataclasses.dataclass(frozen=True)
class InlineText(InlineElement):
    text: str

    def into_text(self) -> str:
        import html

        return html.escape(self.text)

@dataclasses.dataclass(frozen=True)
class InlineCode(InlineText):
    def into_text(self) -> str:
        return f"`{super().into_text()}`"

@dataclasses.dataclass(frozen=True)

Input:
@dataclasses.dataclass(frozen=True)
class Header(Element):
    level: int
    text: InlineElement

    def into_text(self) -> str:
        return f"{'#' * self.level} {self.text.into_text()}\n"

@dataclasses.dataclass(frozen=True)
class List(Element):
    items: tuple[InlineElement, ...]
    ordered: bool = False

    def into_text(self) -> str:
        prefix = "1. " if self.ordered else "* "
        return "\n".join(f"{prefix}{item.into_text()}" for item in self.items) + "\n\n"

@dataclasses.dataclass(frozen=True)
class CodeBlock(Element):
    code: str
    language: str | None = None

    def into_text(self) -> str:
        if self.language:
            return f"```{self.language}\n{self.code}\n```\n\n"
        return f"```\n{self.code}\n```\n\n"

@dataclasses.dataclass(frozen=True)
class Empty(Element):
    def into_text(self) -> str:
        return ""

@dataclasses.dataclass(frozen=True)
class Section(Element):
    sub_elements: tuple[Element, ...]

    def into_text(self)

Output:
class Paragraph(Element):
    text: InlineElement

    def into_text(self) -> str:
        return f"{self.text.into_text()}\n\n"


Instruction:
dig[:8]

class PropDocsState(rx.State):
    """Container for dynamic vars used by the prop docs."""

EXCLUDED_COMPONENTS = [
    "Theme",
    "ThemePanel",
    "DrawerRoot",
    "DrawerTrigger",
    "DrawerOverlay",
    "DrawerPortal",
    "DrawerContent",
    "DrawerClose",
]

def render_select(prop, component, prop_dict):
    if (
        not rx.utils.types._issubclass(
            component, (RadixThemesComponent, RadixPrimitiveComponent)
        )
        or component.__name__ in EXCLUDED_COMPONENTS
    ):
        return rx.fragment()
    try:
        type_ = rx.utils.types.get_args(prop.type_)[0]
    except Exception:
        return rx.fragment()

    try:
        if issubclass(type_, bool) and prop.name not in [
            "open",
            "checked",
            "as_child",
            "default_open",
            "default_checked",
        ]:
            name = get_id(f"{component.__qualname__}_{prop.name}")
            PropDocsState.add_var(name, bool, False)

Input:
            setter = getattr(PropDocsState, f"set_{name}")
            prop_dict[prop.name] = var
            return rx.checkbox(
                var,
                on_change=setter,
            )
    except TypeError:
        pass

    if not isinstance(type_, _GenericAlias) or (
        type_.__origin__ not in (Literal, Union)
    ):
        return rx.fragment()
    # For the Union[Literal, Breakpoints] type
    if type_.__origin__ is Union:
        if not all(
            arg.__name__ in ["Literal", "Breakpoints"] for arg in type_.__args__
        ):
            return rx.fragment()
        else:
            # Get the literal values
            literal_values = [
                str(lit_arg)
                for arg in type_.__args__
                if get_origin(arg) is Literal
                for lit_arg in arg.__args__
            ]
            option = literal_values[0]
            name = get_id(f"{component.__qualname__}_{prop.name}")
            PropDocsState.add_var(name, s

Output: var = getattr(PropDocsState, name)


Instruction:
omponents_list: list[dict[str, str]] = []
    paginated_data: list[dict[str, str]] = []

    selected_filter: str = ""
    original_components_list: list[dict[str, str]] = []

    current_page: int = 1
    current_limit: int = 50  # Default number of items per page
    total_pages: int = 1
    offset: int = 0
    number_of_rows: int = 0

    # Added available limits for the number of items per page
    limits: list[str] = ["10", "20", "50", "100"]

    @rx.event(background=True)
    async def fetch_components_list(self):
        try:
            async with httpx.AsyncClient() as client:
                response = await client.get(
                    f"{os.getenv('RCC_ENDPOINT')}/custom-components/gallery"
                )
                response.raise_for_status()
                component_list = response.json()
        except (httpx.HTTPError, json.JSONDecodeError) as ex:
            print(f"Internal error: failed to fetch components list due to: {ex}")
            return

Input:
        async with self:
            self.original_components_list = component_list
            self.number_of_rows = len(component_list)
            self.total_pages = (
                self.number_of_rows + self.current_limit - 1
            ) // self.current_limit
            yield CustomComponentGalleryState.paginate()

    @rx.event
    def paginate(self) -> None:
        start = self.offset
        end = start + self.current_limit
        self.paginated_data = self.original_components_list[start:end]
        self.current_page = (self.offset // self.current_limit) + 1

    @rx.event
    def delta_limit(self, limit: str) -> None:
        self.current_limit = int(limit)
        self.offset = 0
        self.total_pages = (
            self.number_of_rows + self.current_limit - 1
        ) // self.current_limit
        self.paginate()

    @rx.event
    def previous(self) -> None:
        if self.offset >= self.current_limit:
            self.offset -= self.current_limit
        els

Output:
for c in component_list:
            c["downloads_last_month"] = c["downloads"]["last_month"]
            c["keywords"] = [
                keyword
                for keyword in c["keywords"] or []
                if "reflex" not in keyword.lower()
            ]
            c["download_url"] = package_url(c["package_name"])


Instruction:
iled to fetch components list due to: {ex}")
            return

        for c in component_list:
            c["downloads_last_month"] = c["downloads"]["last_month"]
            c["keywords"] = [
                keyword
                for keyword in c["keywords"] or []
                if "reflex" not in keyword.lower()
            ]
            c["download_url"] = package_url(c["package_name"])

        async with self:
            self.original_components_list = component_list
            self.number_of_rows = len(component_list)
            self.total_pages = (
                self.number_of_rows + self.current_limit - 1
            ) // self.current_limit
            yield CustomComponentGalleryState.paginate()

    @rx.event
    def paginate(self) -> None:
        start = self.offset
        end = start + self.current_limit
        self.paginated_data = self.original_components_list[start:end]
        self.current_page = (self.offset // self.current_limit) + 1

    @rx.event

Input:
    @rx.event
    def previous(self) -> None:
        if self.offset >= self.current_limit:
            self.offset -= self.current_limit
        else:
            self.offset = 0
        self.paginate()

    @rx.event
    def next(self) -> None:
        if self.offset + self.current_limit < self.number_of_rows:
            self.offset += self.current_limit
        self.paginate()

    @rx.event
    def sort_components(self):
        # Get the sorting function based on the selected filter
        sorting_function = SORTING_CRITERIA.get(
            self.selected_filter, lambda x: x["updated_at"]
        )

        # Both "Recent" and "Downloads" should be sorted in reverse order (newest/highest first)
        if self.selected_filter in ["Recent", "Downloads"]:
            self.original_components_list.sort(key=sorting_function, reverse=True)
        else:
            # Default sorting behavior, if no filter selected
            self.original_components_list.sort(key=sorting_function,

Output:
def delta_limit(self, limit: str) -> None:
        self.current_limit = int(limit)
        self.offset = 0
        self.total_pages = (
            self.number_of_rows + self.current_limit - 1
        ) // self.current_limit
        self.paginate()


Instruction:
"""Module for documenting Reflex environment variables."""

from __future__ import annotations

import inspect
from typing import Any, List, Optional, Tuple

import reflex as rx
from reflex.config import EnvironmentVariables

from pcweb.flexdown import markdown
from pcweb.templates.docpage import docpage, h1_comp, h2_comp

class EnvVarDocs:
    """Documentation for Reflex environment variables."""

    @classmethod
    def get_all_env_vars(cls) -> List[Tuple[str, Any]]:
        """Get all environment variables from the environment class.

        Returns:
            A list of tuples containing the environment variable name and its EnvVar instance.
        """
        env_vars = []
        for name, attr in inspect.getmembers(EnvironmentVariables):

Input:
            env_vars.append((name, attr))
        return env_vars

    @classmethod
    def get_env_var_docstring(cls, name: str) -> Optional[str]:
        """Get the docstring for an environment variable.

        Args:
            name: The name of the environment variable.

        Returns:
            The docstring for the environment variable, or None if not found.
        """
        source_code = inspect.getsource(EnvironmentVariables)
        lines = source_code.splitlines()

        for i, line in enumerate(lines):
            if f"{name}:" in line and "EnvVar" in line:
                j = i - 1
                comments = []
                while j >= 0 and lines[j].strip().startswith("#"):
                    comments.insert(0, lines[j].strip()[1:].strip())
                    j -= 1
                if comments:
                    return "\n".join(comments)
        return None

    @classmethod
    def generate_env_var_table(cls, include_internal: bool = False) -> rx.Compon

Output:
if name.startswith("_") or not hasattr(attr, "name"):
                continue


Instruction:
      if line.strip().startswith("#"):
                comments.append(line)
                continue

            # Check if this line has a prop.
            match = re.search("\\w+:", line)
            if match is None:
                # This line doesn't have a var, so continue.
                continue

            # Get the prop.
            prop = match.group(0).strip(":")
            if prop not in props or prop.startswith("_"):
                # This isn't a prop, so continue.
                comments.clear()
                continue

            prop = props[prop]
            # redundant check just to double-check line above prop is a comment
            assert self.code[i - 1].strip().startswith("#"), (
                f"Expected comment, got {self.code[i - 1]}"
            )

            # Get the comment for this prop.
            comment = Source.get_comment(comments)
            # reset comments
            comments.clear()

            # Skip private props.

Input:
            # Add the prop to the output.
            out.append(
                {
                    "prop": prop,
                    "description": comment,
                }
            )

        # Return the output.
        return out

def format_field(field):
    prop = field["prop"]
    try:
        type_ = prop.type_
    except AttributeError:
        type_ = prop.type
    default = field["prop"].default
    default = None if default is dataclasses.MISSING else repr(default)
    type_str = type_.__name__ if hasattr(type_, "__name__") else str(type_)
    if default:
        type_str += f" = {default}"
    return rx.code(field["prop"].name, ": ", type_str, class_name="code-style")

table_header_class_name = (
    "font-small text-slate-12 text-normal w-auto justify-start pl-4 font-bold"
)

def format_fields(headers, fields):
    return (
        rx.scroll_area(
            rx.table.root(
                rx.table.header(
                    rx.table.row(

Output:
if "PRIVATE" in comment:
                continue