appkit-ui 0.7.0__py3-none-any.whl

appkit_ui/components/__init__.py

@@ -0,0 +1,17 @@
+from __future__ import annotations
+
+from appkit_ui.components.collabsible import collabsible
+from appkit_ui.components.editor import (
+    EditorButtonList,
+    EditorOptions,
+    EventHandler,
+    editor,
+)
+
+__all__ = [
+    "EditorButtonList",
+    "EditorOptions",
+    "EventHandler",
+    "collabsible",
+    "editor",
+]

appkit_ui/components/collabsible.py

@@ -0,0 +1,84 @@
+from collections.abc import Callable
+
+import reflex as rx
+
+
+def collabsible(
+    *children: rx.Component,
+    title: str,
+    info_text: str = "",
+    show_condition: bool = True,
+    expanded: bool = False,
+    on_toggle: Callable | None = None,
+    **props,
+) -> rx.Component:
+    """
+    Erstellt eine Collapsible Komponente mit beliebig vielen Child-Komponenten
+
+    Args:
+        *children: Beliebige Anzahl von Reflex Komponenten als positionale Argumente
+        title: Titel der Collapsible Sektion
+        info_text: Info-Text rechts neben dem Titel
+        show_condition: Bedingung, wann die Komponente angezeigt wird
+        expanded: Zustand, ob die Komponente erweitert ist
+        on_toggle: Event handler für das Umschalten
+        **props: Zusätzliche Props für das Container-Element
+    """
+    return rx.vstack(
+        # Collapsible header - klickbarer Bereich
+        rx.vstack(
+            rx.hstack(
+                rx.icon(
+                    rx.cond(
+                        expanded,
+                        "chevron-down",
+                        "chevron-right",
+                    ),
+                    size=16,
+                ),
+                rx.text(
+                    title,
+                    size="1",
+                    font_weight="medium",
+                    color=rx.color("gray", 11),
+                    flex_grow="1",
+                ),
+                rx.text(
+                    info_text,
+                    size="1",
+                    color=rx.color("gray", 9),
+                    text_align="right",
+                    width="40%",
+                ),
+                spacing="2",
+                align="start",
+                width="100%",
+            ),
+            on_click=on_toggle,
+            padding="8px",
+            width="100%",
+            _hover={"background_color": rx.color("gray", 2)},
+        ),
+        # Expandierbarer Inhalt - alle Children werden in einem vstack angeordnet
+        rx.cond(
+            expanded,
+            *children,  # Alle übergebenen Komponenten werden hier eingefügt
+        ),
+        # Container Styling
+        spacing="3",
+        width="calc(90% + 18px)",
+        background_color=rx.color("gray", 1),
+        border=f"1px solid {rx.color('gray', 6)}",
+        border_radius="8px",
+        # Animationen
+        opacity=rx.cond(show_condition, "1", "0"),
+        transform=rx.cond(show_condition, "translateY(0)", "translateY(-20px)"),
+        height=rx.cond(show_condition, "auto", "0"),
+        max_height=rx.cond(show_condition, "500px", "0"),
+        padding=rx.cond(show_condition, "3px", "0"),
+        margin_top=rx.cond(show_condition, "16px", "-16px"),
+        overflow="hidden",
+        pointer_events=rx.cond(show_condition, "auto", "none"),
+        # transition="all 1s ease-out",
+        **props,
+    )

appkit_ui/components/dialogs.py

@@ -0,0 +1,123 @@
+import reflex as rx
+
+
+def delete_dialog(
+    title: str,
+    content: str,
+    on_click: rx.EventHandler,
+    icon_button: bool = False,
+    class_name: str = "dialog",
+    **kwargs,
+) -> rx.Component:
+    """Generic delete confirmation dialog.
+
+    Args:
+        title: Dialog title
+        content: The name/identifier of the item to delete
+        on_click: Event handler for delete action
+        icon_button: If True, use icon_button instead of button for trigger
+        **kwargs: Additional props for the trigger button
+    """
+    # Create the appropriate trigger based on icon_button parameter
+    if icon_button:
+        trigger = rx.icon_button(rx.icon("trash-2", size=19), **kwargs)
+    else:
+        trigger = rx.button(rx.icon("trash-2", size=16), **kwargs)
+
+    return rx.alert_dialog.root(
+        rx.alert_dialog.trigger(trigger),
+        rx.alert_dialog.content(
+            rx.alert_dialog.title(title),
+            rx.alert_dialog.description(
+                rx.text(
+                    "Bist du sicher, dass du ",
+                    rx.text.strong(content),
+                    " löschen möchtest? ",
+                    "Diese Aktion wird das ausgewählte Element und alle zugehörigen ",
+                    "Daten dauerhaft löschen. Dieser Vorgang kann nicht rückgängig ",
+                    "gemacht werden!",
+                ),
+                class_name="mb-4",
+            ),
+            rx.flex(
+                rx.alert_dialog.cancel(
+                    rx.button(
+                        "Abbrechen",
+                        class_name=(
+                            "bg-gray-100 dark:bg-neutral-700 text-gray-700 "
+                            "dark:text-neutral-300 hover:bg-gray-200 "
+                            "dark:hover:bg-neutral-600 px-4 py-2 rounded"
+                        ),
+                    ),
+                ),
+                rx.alert_dialog.action(
+                    rx.button(
+                        "Löschen",
+                        class_name=(
+                            "bg-red-500 text-white hover:bg-red-600 px-4 py-2 rounded"
+                        ),
+                        on_click=on_click,
+                    )
+                ),
+                class_name="justify-end gap-3",
+            ),
+            class_name=class_name,
+        ),
+    )
+
+
+def dialog_header(icon: str, title: str, description: str) -> rx.Component:
+    """Reusable dialog header component."""
+    return rx.hstack(
+        rx.badge(
+            rx.icon(tag=icon, size=34),
+            color_scheme="grass",
+            radius="full",
+            padding="0.65rem",
+        ),
+        rx.vstack(
+            rx.dialog.title(
+                title,
+                weight="bold",
+                margin="0",
+            ),
+            rx.dialog.description(description),
+            spacing="1",
+            height="100%",
+            align_items="start",
+        ),
+        height="100%",
+        spacing="4",
+        margin_bottom="1.5em",
+        align_items="center",
+        width="100%",
+    )
+
+
+def dialog_buttons(
+    submit_text: str, spacing: str = "3", has_errors: bool = False
+) -> rx.Component:
+    """Reusable dialog action buttons."""
+    return rx.flex(
+        rx.dialog.close(
+            rx.button(
+                "Abbrechen",
+                class_name=(
+                    "bg-gray-100 dark:bg-neutral-700 text-gray-700 "
+                    "dark:text-neutral-300 hover:bg-gray-200 "
+                    "dark:hover:bg-neutral-600 px-4 py-2 rounded"
+                ),
+            ),
+        ),
+        rx.form.submit(
+            rx.dialog.close(
+                rx.button(
+                    submit_text,
+                    class_name="px-4 py-2 rounded",
+                    disabled=has_errors,
+                ),
+            ),
+            as_child=True,
+        ),
+        class_name=f"pt-8 gap-{spacing} mt-4 justify-end",
+    )

appkit_ui/components/editor.py

@@ -0,0 +1,274 @@
+"""A Rich Text Editor based on SunEditor."""
+
+from __future__ import annotations
+
+import enum
+from typing import Literal
+
+from pydantic import BaseModel
+from reflex.components.component import Component, NoSSRComponent
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
+from reflex.utils.format import to_camel_case
+from reflex.utils.imports import ImportDict, ImportVar
+from reflex.vars.base import Var
+
+
+class EditorButtonList(list, enum.Enum):
+    """List enum that provides three predefined button lists."""
+
+    BASIC = [
+        ["font", "fontSize"],
+        ["fontColor"],
+        ["horizontalRule"],
+        ["link", "image"],
+    ]
+    FORMATTING = [
+        ["undo", "redo"],
+        ["bold", "underline", "italic", "strike", "subscript", "superscript"],
+        ["removeFormat"],
+        ["outdent", "indent"],
+        ["fullScreen", "showBlocks", "codeView"],
+        ["preview", "print"],
+    ]
+    COMPLEX = [
+        ["undo", "redo"],
+        ["font", "fontSize", "formatBlock"],
+        ["bold", "underline", "italic", "strike", "subscript", "superscript"],
+        ["removeFormat"],
+        "/",
+        ["fontColor", "hiliteColor"],
+        ["outdent", "indent"],
+        ["align", "horizontalRule", "list", "table"],
+        ["link", "image", "video"],
+        ["fullScreen", "showBlocks", "codeView"],
+        ["preview", "print"],
+        ["save", "template"],
+    ]
+
+
+class EditorOptions(BaseModel):
+    """Some of the additional options to configure the Editor.
+
+    Complete list of options found here:
+    https://github.com/JiHong88/SunEditor/blob/master/README.md#options.
+    """
+
+    # Specifies default tag name of the editor.
+    # default: 'p' {String}
+    default_tag: str | None = None
+
+    # The mode of the editor ('classic', 'inline', 'balloon', 'balloon-always').
+    # default: 'classic' {String}
+    mode: str | None = None
+
+    # If true, the editor is set to RTL(Right To Left) mode.
+    # default: false {Boolean}
+    rtl: bool | None = None
+
+    # List of buttons to use in the toolbar.
+    button_list: list[list[str] | str] | None
+
+
+def on_blur_spec(_e: Var, content: Var[str]) -> tuple[Var[str]]:
+    """A helper function to specify the on_blur event handler.
+
+    Args:
+        _e: The event.
+        content: The content of the editor.
+
+    Returns:
+        A tuple containing the content of the editor.
+    """
+    return (content,)
+
+
+def on_paste_spec(
+    _e: Var, clean_data: Var[str], max_char_count: Var[bool]
+) -> tuple[Var[str], Var[bool]]:
+    """A helper function to specify the on_paste event handler.
+
+    Args:
+        _e: The event.
+        clean_data: The clean data.
+        max_char_count: The maximum character count.
+
+    Returns:
+        A tuple containing the clean data and the maximum character count.
+    """
+    return (clean_data, max_char_count)
+
+
+class Editor(NoSSRComponent):
+    """A Rich Text Editor component based on SunEditor.
+
+    Not every JS prop is listed here (some are not easily usable from python),
+    refer to the library docs for a complete list.
+    """
+
+    library = "suneditor-react@3.6.1"
+
+    tag = "SunEditor"
+
+    is_default = True
+
+    lib_dependencies: list[str] = ["suneditor"]
+
+    # Language of the editor.
+    # Alternatively to a string, a dict of your language can be passed to this prop.
+    # Please refer to the library docs for this.
+    # options: "en" | "da" | "de" | "es" | "fr" | "ja" | "ko" | "pt_br" |
+    # "ru" | "zh_cn" | "ro" | "pl" | "ckb" | "lv" | "se" | "ua" | "he" | "it"
+    # default: "en".
+    lang: Var[
+        Literal[
+            "en",
+            "da",
+            "de",
+            "es",
+            "fr",
+            "ja",
+            "ko",
+            "pt_br",
+            "ru",
+            "zh_cn",
+            "ro",
+            "pl",
+            "ckb",
+            "lv",
+            "se",
+            "ua",
+            "he",
+            "it",
+        ]
+        | dict
+    ]
+
+    # This is used to set the HTML form name of the editor.
+    # This means on HTML form submission,
+    # it will be submitted together with contents of the editor by the name provided.
+    name: Var[str]
+
+    # Sets the default value of the editor.
+    # This is useful if you don't want the on_change method to be called on render.
+    # If you want the on_change method to be called on render use the set_contents prop
+    default_value: Var[str]
+
+    # Sets the width of the editor.
+    # px and percentage values are accepted, eg width="100%" or width="500px"
+    # default: 100%
+    width: Var[str]
+
+    # Sets the height of the editor.
+    # px and percentage values are accepted, eg height="100%" or height="100px"
+    height: Var[str]
+
+    # Sets the placeholder of the editor.
+    placeholder: Var[str]
+
+    # Should the editor receive focus when initialized?
+    auto_focus: Var[bool]
+
+    # Pass an EditorOptions instance to modify the behaviour of Editor even more.
+    set_options: Var[dict]
+
+    # Whether all SunEditor plugins should be loaded.
+    # default: True.
+    set_all_plugins: Var[bool]
+
+    # Set the content of the editor.
+    # Note: To set the initial contents of the editor
+    # without calling the on_change event,
+    # please use the default_value prop.
+    # set_contents is used to set the contents of the editor programmatically.
+    # You must be aware that, when the set_contents's prop changes,
+    # the on_change event is triggered.
+    set_contents: Var[str]
+
+    # Append editor content
+    append_contents: Var[str]
+
+    # Sets the default style of the editor's edit area
+    set_default_style: Var[str]
+
+    # Disable the editor
+    # default: False.
+    disable: Var[bool]
+
+    # Hide the editor
+    # default: False.
+    hide: Var[bool]
+
+    # Hide the editor toolbar
+    # default: False.
+    hide_toolbar: Var[bool]
+
+    # Disable the editor toolbar
+    # default: False.
+    disable_toolbar: Var[bool]
+
+    # Fired when the editor content changes.
+    on_change: EventHandler[passthrough_event_spec(str)]
+
+    # Fired when the something is inputted in the editor.
+    on_input: EventHandler[no_args_event_spec]
+
+    # Fired when the editor loses focus.
+    on_blur: EventHandler[on_blur_spec]
+
+    # Fired when the editor is loaded.
+    on_load: EventHandler[passthrough_event_spec(bool)]
+
+    # Fired when the editor content is copied.
+    on_copy: EventHandler[no_args_event_spec]
+
+    # Fired when the editor content is cut.
+    on_cut: EventHandler[no_args_event_spec]
+
+    # Fired when the editor content is pasted.
+    on_paste: EventHandler[on_paste_spec]
+
+    # Fired when the code view is toggled.
+    toggle_code_view: EventHandler[passthrough_event_spec(bool)]
+
+    # Fired when the full screen mode is toggled.
+    toggle_full_screen: EventHandler[passthrough_event_spec(bool)]
+
+    def add_imports(self) -> ImportDict:
+        """Add imports for the Editor component.
+
+        Returns:
+            The import dict.
+        """
+        return {
+            "": ImportVar(tag="suneditor/dist/css/suneditor.min.css", install=False)
+        }
+
+    @classmethod
+    def create(
+        cls, set_options: EditorOptions | None = None, **props: object
+    ) -> Component:
+        """Create an instance of Editor. No children allowed.
+
+        Args:
+            set_options: Configuration object to further configure the instance.
+            **props: Any properties to be passed to the Editor
+
+        Returns:
+            An Editor instance.
+
+        Raises:
+            ValueError: If set_options is a state Var.
+        """
+        if set_options is not None:
+            if isinstance(set_options, Var):
+                msg = "EditorOptions cannot be a state Var"
+                raise ValueError(msg)
+            props["set_options"] = {
+                to_camel_case(k): v
+                for k, v in set_options.dict().items()
+                if v is not None
+            }
+        return super().create(*[], **props)
+
+
+editor = Editor.create

appkit_ui/components/form_inputs.py

@@ -0,0 +1,434 @@
+import logging
+
+import reflex as rx
+from pydantic import BaseModel
+
+import appkit_mantine as mn
+import appkit_ui.components as knai
+
+logger = logging.getLogger(__name__)
+
+
+class SelectItem(BaseModel):
+    label: str
+    value: str
+
+
+def hidden_field(
+    **kwargs,
+) -> rx.Component:
+    """Creates a hidden input field."""
+    return rx.el.input(
+        type="hidden",
+        **kwargs,
+    )
+
+
+def inline_form_field(
+    icon: str,
+    label: str,
+    hint: str = "",
+    **kwargs,
+) -> rx.Component:
+    if "value" in kwargs:
+        kwargs["default_value"] = None
+    elif "default_value" in kwargs:
+        kwargs["value"] = None
+
+    minlength = kwargs.get("min_length", 0)
+    maxlength = kwargs.get("max_length", 0)
+    pattern = kwargs.get("pattern", "")
+
+    logger.debug(
+        "Creating form field: %s, minlength=%s, maxlength=%s, pattern=%s",
+        label,
+        minlength,
+        maxlength,
+        pattern,
+    )
+
+    return rx.form.field(
+        rx.flex(
+            rx.hstack(
+                rx.icon(icon, size=17, stroke_width=1.5),
+                rx.form.label(label),
+                class_name="label",
+            ),
+            rx.hstack(
+                rx.cond(
+                    hint,
+                    rx.form.message(
+                        hint,
+                        color="gray",
+                        class_name="hint",
+                    ),
+                ),
+                rx.form.control(
+                    rx.input(
+                        **kwargs,
+                    ),
+                    as_child=True,
+                ),
+                rx.cond(
+                    kwargs.get("required", False),
+                    rx.form.message(
+                        f"{label} ist ein Pflichtfeld.",
+                        name=kwargs.get("name", ""),
+                        color="red",
+                        class_name="error required",
+                    ),
+                ),
+                rx.cond(
+                    minlength > 0,
+                    rx.form.message(
+                        f"{label} muss mindestens {minlength} Zeichen enthalten.",
+                        name=kwargs.get("name", ""),
+                        color="red",
+                        class_name="error minlength",
+                    ),
+                ),
+                rx.cond(
+                    maxlength > 0,
+                    rx.form.message(
+                        f"{label} darf maximal {maxlength} Zeichen enthalten.",
+                        name=kwargs.get("name", ""),
+                        color="red",
+                        class_name="error maxlength",
+                    ),
+                ),
+                rx.cond(
+                    pattern,
+                    rx.form.message(
+                        f"{label} entspricht nicht dem geforderten Format: {pattern}",
+                        name=kwargs.get("name", ""),
+                        color="red",
+                        class_name="error pattern",
+                    ),
+                ),
+                direction="column",
+                spacing="0",
+            ),
+        ),
+        width="100%",
+        class_name="form-group",
+    )
+
+
+def form_field(
+    icon: str,
+    label: str,
+    hint: str = "",
+    validation_error: str | None = None,
+    **kwargs,
+) -> rx.Component:
+    if "value" in kwargs:
+        kwargs["default_value"] = None
+    elif "default_value" in kwargs:
+        kwargs["value"] = None
+
+    if "size" in kwargs:
+        # convert to mantine size "xs", "sm", "md", "lg", "xl"
+        size_map = {"1": "xs", "2": "sm", "3": "md", "4": "lg", "5": "xl"}
+        kwargs["size"] = size_map.get(kwargs["size"], "md")
+
+    return mn.form.wrapper(
+        mn.form.input(
+            **kwargs,
+            left_section=rx.cond(icon, rx.icon(icon, size=17, stroke_width=1.5), None),
+        ),
+        label=label,
+        description=hint,
+        error=validation_error,
+        required=True,
+        width="100%",
+    )
+
+
+def form_inline_field(
+    icon: str,
+    **kwargs,
+) -> rx.Component:
+    if kwargs.get("width") is None:
+        kwargs["width"] = "100%"
+    if kwargs.get("size") is None:
+        kwargs["size"] = "3"
+
+    return rx.form.field(
+        rx.input(
+            rx.input.slot(rx.icon(icon)),
+            **kwargs,
+        ),
+        class_name="form-group",
+        width="100%",
+    )
+
+
+def form_textarea(
+    *components,
+    name: str,
+    icon: str,
+    label: str,
+    hint: str = "",
+    monospace: bool = True,
+    **kwargs,
+) -> rx.Component:
+    if "value" in kwargs:
+        kwargs["default_value"] = None
+    elif "default_value" in kwargs:
+        kwargs["value"] = None
+
+    minlength = kwargs.get("min_length", 0)
+    maxlength = kwargs.get("max_length", 0)
+
+    logger.debug(
+        "Creating form textarea: %s, minlength=%s, maxlength=%s",
+        label,
+        minlength,
+        maxlength,
+    )
+
+    return rx.flex(
+        rx.form.field(
+            rx.flex(
+                rx.hstack(
+                    rx.icon(icon, size=16, stroke_width=1.5),
+                    rx.form.label(label),
+                    class_name="label",
+                ),
+                rx.spacer(),
+                *components,
+                direction="row",
+            ),
+            rx.cond(
+                hint,
+                rx.form.message(
+                    hint,
+                    color="gray",
+                    class_name="hint",
+                ),
+            ),
+            rx.form.message(
+                f"{label} ist ein Pflichtfeld.",
+                name=name,
+                color="red",
+                class_name="error required",
+            ),
+            rx.cond(
+                minlength > 0,
+                rx.form.message(
+                    f"{label} muss mindestens {minlength} Zeichen enthalten.",
+                    name=name,
+                    color="red",
+                    match="tooShort",
+                    class_name="error minlength",
+                ),
+            ),
+            rx.cond(
+                maxlength > 0,
+                rx.form.message(
+                    f"{label} darf maximal {maxlength} Zeichen enthalten.",
+                    name=name,
+                    color="red",
+                    match="tooLong",
+                    class_name="error maxlength",
+                ),
+            ),
+            rx.text_area(
+                name=name,
+                id=name,
+                font_family=rx.cond(
+                    monospace,
+                    "Consolas, Monaco, 'Courier New', monospace;",
+                    "inherit",
+                ),
+                **kwargs,
+            ),
+            class_name="form-group",
+        ),
+        direction="column",
+        spacing="0",
+    )
+
+
+def form_checkbox(
+    name: str,
+    label: str,
+    hint: str | None = None,
+    **kwargs,
+) -> rx.Component:
+    return rx.form.field(
+        rx.hstack(
+            rx.switch(
+                name=name,
+                margin_top="8px",
+                margin_right="9px",
+                **kwargs,
+            ),
+            rx.flex(
+                rx.form.label(label, padding_bottom="3px"),
+                rx.cond(
+                    hint,
+                    rx.form.message(
+                        hint, color="gray", margin_top="-10px", class_name="hint"
+                    ),
+                ),
+                direction="column",
+            ),
+            spacing="2",
+            align="start",
+            justify="start",
+            margin_top="1em",
+        ),
+        name=name,
+        width="100%",
+        class_name="form-group",
+    )
+
+
+def render_select_item(option: SelectItem) -> rx.Component:
+    return rx.select.item(
+        rx.hstack(
+            rx.text(option.label),
+        ),
+        value=option.value,
+    )
+
+
+def form_select(
+    *components,
+    options: list[SelectItem],
+    icon: str = "circle-dot",
+    label: str = "",
+    hint: str = "",
+    placeholder: str = "",
+    on_change: rx.EventHandler | None = None,
+    with_label: bool = True,
+    column_width: str = "100%",
+    **kwargs,
+) -> rx.Component:
+    if "value" in kwargs:
+        kwargs["default_value"] = None
+    elif "default_value" in kwargs:
+        kwargs["value"] = None
+
+    if on_change is not None:
+        kwargs["on_change"] = on_change
+
+    classes = "rt-SelectTrigger"
+    if "size" in kwargs:
+        classes += f" rt-r-size-{kwargs['size']}"
+    else:
+        classes += " rt-r-size-2"
+
+    if "variant" in kwargs:
+        classes += f" rt-variant-{kwargs['variant'].lower()}"
+    else:
+        classes += " rt-variant-surface"
+
+    return rx.flex(
+        rx.form.field(
+            rx.cond(
+                with_label,
+                rx.hstack(
+                    rx.icon(icon, size=16, stroke_width=1.5),
+                    rx.form.label(label),
+                    class_name="label",
+                ),
+            ),
+            rx.cond(
+                hint,
+                rx.form.message(
+                    hint,
+                    color="gray",
+                    class_name="hint",
+                ),
+            ),
+            rx.hstack(
+                rx.el.select(
+                    rx.cond(placeholder, rx.el.option(placeholder, value="")),
+                    rx.foreach(
+                        options.to(list[SelectItem]),
+                        lambda option: rx.el.option(
+                            label=option.label,
+                            value=option.value,
+                            class_name="rt-SelectItem",
+                        ),
+                    ),
+                    appearance="base-select",
+                    class_name=classes,
+                    **kwargs,
+                ),
+                *components,
+            ),
+            rx.form.message(
+                f"{label} darf nicht leer sein.",
+                name=kwargs.get("name", ""),
+                color="red",
+                class_name="error required",
+            ),
+            spacing="2",
+            margin_bottom="0.75em",
+            class_name="form-group",
+        ),
+        width=column_width,
+        flex_grow="1",
+    )
+
+
+def form_text_editor(
+    icon: str,
+    label: str,
+    name: str = "editor",
+    hint: str = "",
+    on_blur: rx.EventHandler | None = None,
+    **kwargs,
+) -> rx.Component:
+    if kwargs.get("width") is None:
+        kwargs["width"] = "100%"
+    if kwargs.get("height") is None:
+        kwargs["height"] = "240px"
+
+    if on_blur is not None:
+        kwargs["on_blur"] = on_blur
+
+    return rx.form.field(
+        rx.hstack(
+            rx.icon(icon, size=16, stroke_width=1.5),
+            rx.form.label(label),
+            class_name="label",
+        ),
+        rx.cond(
+            hint,
+            rx.form.message(
+                hint,
+                color="gray",
+                class_name="hint",
+            ),
+        ),
+        knai.editor(
+            id=name,
+            set_options=knai.EditorOptions(
+                button_list=[
+                    ["formatBlock"],
+                    [
+                        "bold",
+                        "underline",
+                        "align",
+                        "outdent",
+                        "indent",
+                        "list",
+                        "table",
+                        "blockquote",
+                    ],
+                    [
+                        "link",
+                        "horizontalRule",
+                    ],
+                    ["removeFormat", "undo", "redo"],
+                ],
+            ),
+            **kwargs,
+        ),
+        width="100%",
+        class_name="form-group",
+    )

appkit_ui/components/header.py

@@ -0,0 +1,28 @@
+import reflex as rx
+
+
+def header(
+    text: str,
+    indent: bool = False,
+) -> rx.Component:
+    return rx.box(
+        rx.color_mode_cond(
+            light=rx.heading(
+                text,
+                size="5",
+                class_name="text-black",
+            ),
+            dark=rx.heading(
+                text,
+                size="5",
+                class_name="text-white",
+            ),
+        ),
+        class_name=(
+            "fixed top-0 z-[1000] w-full "
+            "border-b border-gray-300 dark:border-neutral-700 "
+            "bg-gray-50 dark:bg-neutral-800 "
+            "p-3 pl-8 transition-colors duration-300"
+        ),
+        margin_left=rx.cond(indent, "0", "-32px"),
+    )

appkit_ui/global_states.py

@@ -0,0 +1,9 @@
+import reflex as rx
+
+
+class LoadingState(rx.State):
+    is_loading: bool = False
+    is_loading_message: str = "Lade..."
+
+    def set_is_loading(self, is_loading: bool) -> None:
+        self.is_loading = is_loading

appkit_ui-0.7.0.dist-info/METADATA

@@ -0,0 +1,8 @@
+Metadata-Version: 2.4
+Name: appkit-ui
+Version: 0.7.0
+Summary: Add your description here
+Author: Jens Rehpöhler
+Requires-Python: >=3.13
+Requires-Dist: appkit-commons
+Requires-Dist: reflex>=0.8.12

appkit_ui-0.7.0.dist-info/RECORD

@@ -0,0 +1,11 @@
+appkit_ui/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+appkit_ui/global_states.py,sha256=V-Tmz4nmAcn4NAtW-Q12xNZSbQdJe7Oexvf25WdEdVY,215
+appkit_ui/components/__init__.py,sha256=DPKkO65DGtXfla1esbS9wkEpxbVlMTs45g6oqgJVQYo,321
+appkit_ui/components/collabsible.py,sha256=JAAIEvwShHMhtcGfZwXkR59AC2hEgZrH4DGmuVTGWFE,2833
+appkit_ui/components/dialogs.py,sha256=nc4-5PNUwzz-8ZB-Y3bUGkw6z6RlEfNto7icPHjycog,3916
+appkit_ui/components/editor.py,sha256=Z9cew7hrLuBoXBYk7xW-OsbhIcdW4LFlBqi_8eYtCTY,7956
+appkit_ui/components/form_inputs.py,sha256=3xBCqfQGi9j4qhTeyktdjQ5MN4lUJS-u2sHynJZoViU,11677
+appkit_ui/components/header.py,sha256=JLAiDEVku99pRgAsQAMUIui7i70hS6H6Bbbe8FVj0DU,715
+appkit_ui-0.7.0.dist-info/METADATA,sha256=rDF-SpiuZTBEix_WtHOCIxd2bJnZS_phSiyZ8q6VHAA,196
+appkit_ui-0.7.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+appkit_ui-0.7.0.dist-info/RECORD,,

appkit_ui-0.7.0.dist-info/WHEEL

@@ -0,0 +1,4 @@
+Wheel-Version: 1.0
+Generator: hatchling 1.27.0
+Root-Is-Purelib: true
+Tag: py3-none-any