instaui 0.2.1__py2.py3-none-any.whl → 0.2.2__py2.py3-none-any.whl

instaui/components/container.py

@@ -0,0 +1,32 @@
+from __future__ import annotations
+from instaui.components.element import Element
+from instaui.vars.types import TMaybeRef
+
+
+class Container(Element):
+    """
+    Creates a layout container element with configurable width and spacing properties.
+
+    A flexible container component for structuring content layouts, providing controls for
+    maximum width and internal padding. The container is horizontally centered by default
+    through auto margins.
+
+    Args:
+        max_width (TMaybeRef[str], optional): Sets the maximum width of the container.
+            Accepts CSS width values (e.g., "800px", "100%", "75vw"). Defaults to "800px".
+        padding (TMaybeRef[str], optional): Controls internal spacing between container
+            edges and content. Accepts CSS padding values (e.g., "0.25rem", "1em", "10px").
+            Defaults to "0.25rem".
+    """
+
+    def __init__(
+        self,
+        max_width: TMaybeRef[str] = "800px",
+        *,
+        padding: TMaybeRef[str] = "0.25rem",
+    ):
+        super().__init__("div")
+
+        self.style({"max-width": max_width, "padding": padding}).style(
+            "margin-left:auto;margin-right:auto"
+        )

instaui/components/heading.py

@@ -0,0 +1,46 @@
+from __future__ import annotations
+from typing import Any, Union
+from instaui.components.element import Element
+from instaui.vars.types import TMaybeRef
+from instaui import ui_system_var_type as ui_vars_type
+
+
+class Heading(Element):
+    def __init__(
+        self,
+        text: Union[str, TMaybeRef[Any]],
+        *,
+        size: Union[TMaybeRef[str], ui_vars_type.TSize, None] = None,
+        weight: Union[TMaybeRef[str], ui_vars_type.TWeight, None] = None,
+        align: Union[TMaybeRef[str], ui_vars_type.TAlign, None] = None,
+    ):
+        """
+        Creates a heading element with customizable text content and styling properties.
+
+
+        Args:
+            text (Union[str, TMaybeRef[Any]]): The text content of the heading. Can be a static
+                string or a reactive reference (e.g., state object).
+            size (Union[TMaybeRef[str], TSize, None], optional): Controls the heading size.
+                Accepts values from "1" to "9". Defaults to None.
+            weight (Union[TMaybeRef[str], TWeight, None], optional): Sets font weight.
+                Acceptable values: "light", "regular", "medium", "bold". Defaults to None.
+            align (Union[TMaybeRef[str], TAlign, None], optional): Controls text alignment.
+                Valid options: "left", "center", "right". Defaults to None.
+
+        Example:
+        .. code-block:: python
+            size = ui.state("6")
+            text = ui.state("test")
+            align = ui.state("left")
+
+            arco.select(["1", "2", "3", "4", "5", "6", "7", "8", "9"], size)
+            arco.select(["left", "center", "right"], align, allow_clear=True)
+
+            with ui.container():
+                arco.input(text)
+                ui.heading(text, size=size, align=align)
+        """
+        super().__init__("heading")
+
+        self.props({"text": text, "size": size, "weight": weight, "align": align})

instaui/event/web_event.py

@@ -3,7 +3,11 @@ import typing
 from typing_extensions import ParamSpec
 from instaui.common.jsonable import Jsonable
 from instaui.runtime._app import get_current_scope, get_app_slot
-from instaui.vars.mixin_types.py_binding import CanInputMixin, CanOutputMixin
+from instaui.vars.mixin_types.py_binding import (
+    CanInputMixin,
+    CanOutputMixin,
+    _assert_outputs_be_can_output_mixin,
+)
 from instaui.handlers import event_handler
 from instaui import pre_setup as _pre_setup
 from .event_mixin import EventMixin
@@ -27,6 +31,8 @@ class WebEvent(Jsonable, EventMixin, typing.Generic[P, R]):
         if pre_setup:
             _pre_setup._check_args(pre_setup)
 
+        _assert_outputs_be_can_output_mixin(outputs)
+
         self._inputs = inputs
         self._outputs = outputs
         self._fn = fn

instaui/static/insta-ui.css

@@ -1 +1 @@
-:root{color-scheme:light dark}:where(body){--insta-column-gap: 1rem;height:100vh}:where(*){box-sizing:border-box;margin:0;padding:0}:where(#app){height:100%}:where(.app-box,.insta-main){height:100%;overflow-y:auto}:where(.insta-main){--insta-padding: 16px;padding:var(--insta-padding, 16px)}
+.insta-themes:where([data-scaling="90%"]){--scaling: .9 }.insta-themes:where([data-scaling="95%"]){--scaling: .95 }.insta-themes:where([data-scaling="100%"]){--scaling: 1 }.insta-themes:where([data-scaling="105%"]){--scaling: 1.05 }.insta-themes:where([data-scaling="110%"]){--scaling: 1.1 }.insta-themes{--space-1: calc(4px* var(--scaling));--space-2: calc(8px* var(--scaling));--space-3: calc(12px* var(--scaling));--space-4: calc(16px* var(--scaling));--space-5: calc(24px* var(--scaling));--space-6: calc(32px* var(--scaling));--space-7: calc(40px* var(--scaling));--space-8: calc(48px* var(--scaling));--space-9: calc(64px* var(--scaling));--font-size-1: calc(12px* var(--scaling));--font-size-2: calc(14px* var(--scaling));--font-size-3: calc(16px* var(--scaling));--font-size-4: calc(18px* var(--scaling));--font-size-5: calc(20px* var(--scaling));--font-size-6: calc(24px* var(--scaling));--font-size-7: calc(28px* var(--scaling));--font-size-8: calc(35px* var(--scaling));--font-size-9: calc(60px* var(--scaling));--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--line-height-1: calc(16px* var(--scaling));--line-height-2: calc(20px* var(--scaling));--line-height-3: calc(24px* var(--scaling));--line-height-4: calc(26px* var(--scaling));--line-height-5: calc(28px* var(--scaling));--line-height-6: calc(30px* var(--scaling));--line-height-7: calc(36px* var(--scaling));--line-height-8: calc(40px* var(--scaling));--line-height-9: calc(60px* var(--scaling));--letter-spacing-1: .0025em;--letter-spacing-2: 0em;--letter-spacing-3: 0em;--letter-spacing-4: -.0025em;--letter-spacing-5: -.005em;--letter-spacing-6: -.00625em;--letter-spacing-7: -.0075em;--letter-spacing-8: -.01em;--letter-spacing-9: -.025em;--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto, "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--default-font-size: var(--font-size-3);--default-font-style: normal;--default-font-weight: var(--font-weight-regular);--default-line-height: 1.5;--default-letter-spacing: 0em;--default-leading-trim-start: .42em;--default-leading-trim-end: .36em;--heading-font-family: var(--default-font-family);--heading-font-size-adjust: 1;--heading-font-style: normal;--heading-leading-trim-start: var(--default-leading-trim-start);--heading-leading-trim-end: var(--default-leading-trim-end);--heading-letter-spacing: 0em;--heading-line-height-1: calc(16px* var(--scaling));--heading-line-height-2: calc(18px* var(--scaling));--heading-line-height-3: calc(22px* var(--scaling));--heading-line-height-4: calc(24px* var(--scaling));--heading-line-height-5: calc(26px* var(--scaling));--heading-line-height-6: calc(30px* var(--scaling));--heading-line-height-7: calc(36px* var(--scaling));--heading-line-height-8: calc(40px* var(--scaling));--heading-line-height-9: calc(60px* var(--scaling));--strong-font-family: var(--default-font-family);--strong-font-size-adjust: 1;--strong-font-style: inherit;--strong-font-weight: var(--font-weight-bold);--strong-letter-spacing: 0em;--em-font-family: "Times New Roman", "Times", serif;--em-font-size-adjust: 1.18;--em-font-style: italic;--em-font-weight: inherit;--em-letter-spacing: -.025em;overflow-wrap:break-word;font-family:var(--default-font-family);font-size:var(--default-font-size);font-weight:var(--default-font-weight);font-style:var(--default-font-style);line-height:var(--default-line-height);letter-spacing:var(--default-letter-spacing);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--container-1: 448px;--container-2: 688px;--container-3: 880px;--container-4: 1136px}.i-weight-light{font-weight:var(--font-weight-light)}.i-weight-regular{font-weight:var(--font-weight-regular)}.i-weight-medium{font-weight:var(--font-weight-medium)}.i-weight-bold{font-weight:var(--font-weight-bold)}.i-text-align-left{text-align:left}.i-text-align-center{text-align:center}.i-text-align-right{text-align:right}.insta-Heading:where(.i-size-1){font-size:calc(var(--font-size-1) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-1);letter-spacing:calc(var(-letter-spacing-1) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-2){font-size:calc(var(--font-size-2) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-2);letter-spacing:calc(var(-letter-spacing-2) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-3){font-size:calc(var(--font-size-3) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-3);letter-spacing:calc(var(-letter-spacing-3) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-4){font-size:calc(var(--font-size-4) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-4);letter-spacing:calc(var(-letter-spacing-4) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-5){font-size:calc(var(--font-size-5) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-5);letter-spacing:calc(var(-letter-spacing-5) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-6){font-size:calc(var(--font-size-6) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-6);letter-spacing:calc(var(-letter-spacing-6) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-7){font-size:calc(var(--font-size-7) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-7);letter-spacing:calc(var(-letter-spacing-7) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-8){font-size:calc(var(--font-size-8) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-8);letter-spacing:calc(var(-letter-spacing-8) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-9){font-size:calc(var(--font-size-9) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-9);letter-spacing:calc(var(-letter-spacing-9) + var(--heading-letter-spacing))}:root{color-scheme:light dark}:where(body){--insta-column-gap: 1rem;height:100vh}:where(*){box-sizing:border-box;margin:0;padding:0}:where(#app){height:100%}:where(.app-box,.insta-main){height:100%;overflow-y:auto}:where(.insta-main){--insta-padding: 16px;padding:var(--insta-padding, 16px)}