hyperdivlite 0.1.9__py3-none-any.whl

hyperdiv/components/breadcrumb.py

@@ -0,0 +1,39 @@
+from ..prop_types import String
+from ..prop import Prop
+from ..component_base import Component
+from ..slot import Slot
+from ..component_mixins.styled import Styled
+from ..style_part import BasePart
+
+
+class breadcrumb(Component, Styled):
+    """
+    This component renders a breadcrumb trail useful in building
+    navigations. It accepts @component(breadcrumb_item) components
+    as its children.
+
+    ```py
+    with hd.breadcrumb():
+        hd.breadcrumb_item(
+            "Grandparent",
+            href="/grandparent"
+        )
+        hd.breadcrumb_item(
+            "Parent",
+            href="/grandparent/parent"
+        )
+        hd.breadcrumb_item("Child", href="#")
+    ```
+
+    """
+
+    _name = "breadcrumb"
+    _tag = "sl-breadcrumb"
+
+    # An invisible label that helps voice navigation.
+    assistive_label = Prop(String, "", ui_name="label")
+
+    # TODO: separator slot strips styles from the element in the slot
+    separator = Slot()
+
+    base_style = Prop(BasePart())

hyperdiv/components/breadcrumb_item.py

@@ -0,0 +1,37 @@
+from ..prop_types import OneOf, Optional, String
+from ..prop import Prop
+from ..slot import Slot
+from ..component_mixins.interactive import Interactive
+from ..style_part import BasePart, StylePart
+from .common.label_component import LabelComponent
+from .common.text_utils import concat_text
+from .plaintext import plaintext
+
+
+class breadcrumb_item(LabelComponent, Interactive):
+    """
+    A breadcrumb item to be used within @component(breadcrumb). This
+    component accepts a `href` attribute and works like a
+    @component(link).
+    """
+
+    _name = "breadcrumb_item"
+    _tag = "sl-breadcrumb-item"
+
+    # A path to navigate to when clicked.
+    href = Prop(Optional(String))
+    # Determines where the link is opened. See the [W3Schools target
+    # documentation](https://www.w3schools.com/tags/att_a_target.asp)
+    target = Prop(OneOf(None, "_blank", "_parent", "_self", "_top"))
+    # See `rel` docs [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+    rel = Prop(String, "noreferrer noopener")
+
+    prefix = Slot()
+    suffix = Slot()
+    separator = Slot()
+
+    base_style = Prop(BasePart())
+    label_style = Prop(StylePart("label"))
+    prefix_style = Prop(StylePart("prefix"))
+    suffix_style = Prop(StylePart("suffix"))
+    separator_style = Prop(StylePart("separator"))

hyperdiv/components/button.py

@@ -0,0 +1,125 @@
+from ..prop_types import OneOf, Bool
+from ..prop import Prop
+from ..slot import Slot
+from ..component_mixins.interactive import Interactive
+from ..style_part import BasePart, StylePart
+from .common.label_component import LabelComponent
+from .common.shoelace_types import ShoelaceSize
+from .icon import icon
+
+
+class button(LabelComponent, Interactive):
+    """A button component.
+
+    ```py
+    hd.button("Default")
+    hd.button("Primary", variant="primary")
+    hd.button("Success", variant="success")
+    hd.button("Neutral", variant="neutral")
+    hd.button("Warning", variant="warning")
+    hd.button("Danger", variant="danger")
+    hd.button("Primary",
+        variant="primary",
+        outline=True
+    )
+    hd.button("Success",
+        variant="success",
+        outline=True
+    )
+    hd.button("Neutral",
+        variant="neutral",
+        outline=True
+    )
+    hd.button("Warning",
+        variant="warning",
+        outline=True
+    )
+    hd.button("Danger",
+        variant="danger",
+        outline=True
+    )
+    hd.button("Text", variant="text")
+    hd.button("Pill Button", pill=True)
+    hd.button("With Caret", caret=True)
+    hd.button("Loading", loading=True)
+    hd.button("Large", size="large")
+    hd.button("Small", size="small")
+    ```
+
+    ### Slots
+
+    `button` supports `prefix` and `suffix` slots that can be used for
+    slotting icons into the button. Shorthand arguments `prefix_icon`
+    and `suffix_icon` are also provided.
+
+    ```py
+    hd.button("Settings", prefix_icon="gear")
+    # Equivalent to:
+    with hd.button("Settings") as button:
+        hd.icon("gear", slot=button.prefix)
+    ```
+    """
+
+    _name = "button"
+    _tag = "sl-button"
+
+    # The button variant.
+    variant = Prop(
+        OneOf(
+            "default",
+            "primary",
+            "success",
+            "neutral",
+            "warning",
+            "danger",
+            "text",
+        ),
+        "default",
+    )
+    # The size of the button.
+    size = Prop(ShoelaceSize, "medium")
+    # The type of the button. Usually you do not need to use this prop
+    # directly. When using buttons with @component(form)s, the button
+    # type is set implicitly.
+    button_type = Prop(OneOf("button", "submit", "reset"), "button", ui_name="type")
+    # Whether to render the button as a pill.
+    pill = Prop(Bool, False)
+    # Whether to render the button's variant as an outline instead of
+    # a background fill.
+    outline = Prop(Bool, False)
+    # Whether to render the button as a circle.
+    circle = Prop(Bool, False)
+    # Whether to render a caret in the suffix slot. This is useful
+    # shorthand when the button is used as a trigger for a
+    # @component(dropdown).
+    caret = Prop(Bool, False)
+    # Whether to render a loading spinner in the button.
+    loading = Prop(Bool, False)
+    # Whether the button is disabled. Disabled buttons do not respond to clicks.
+    disabled = Prop(Bool, False)
+
+    prefix = Slot()
+    suffix = Slot()
+
+    base_style = Prop(BasePart())
+    label_style = Prop(StylePart("label"))
+    prefix_style = Prop(StylePart("prefix"))
+    suffix_style = Prop(StylePart("suffix"))
+    caret_style = Prop(StylePart("caret"))
+
+    def __init__(
+        self,
+        *label,
+        prefix_icon=None,
+        suffix_icon=None,
+        width="fit-content",
+        **kwargs,
+    ):
+        super().__init__(*label, width=width, **kwargs)
+
+        if prefix_icon:
+            with self:
+                icon(prefix_icon, slot=self.prefix)
+        if suffix_icon:
+            with self:
+                icon(suffix_icon, slot=self.suffix)

hyperdiv/components/button_group.py

@@ -0,0 +1,28 @@
+from ..prop_types import String
+from ..prop import Prop
+from ..component_base import Component
+from ..component_mixins.styled import Styled
+from ..style_part import BasePart
+
+
+class button_group(Component, Styled):
+    """
+    A container that visually groups together a set of related
+    @component(button)s.
+
+    ```py
+    with hd.button_group():
+        hd.button("One")
+        hd.button("Two")
+        hd.button("Three")
+    ```
+
+    """
+
+    _name = "button_group"
+    _tag = "sl-button-group"
+
+    # An invisible label that helps with accessibility.
+    assistive_label = Prop(String, "")
+
+    base_style = Prop(BasePart())

hyperdiv/components/card.py

@@ -0,0 +1,75 @@
+from ..prop_types import Color, CSSField, Union, DesignToken, BoxSize, Size
+from ..prop import Prop
+from ..component_base import Component
+from ..slot import Slot
+from ..component_mixins.styled import Styled
+from .. import design_tokens as tokens
+from ..style_part import BasePart, StylePart
+
+
+class card(Component, Styled):
+    """
+    A component that groups an image, a header, a footer, and contents
+    into a container. All the slots are optional and can be combined
+    in various ways.
+
+    ### Image with contents
+
+    ```py
+    with hd.card() as card:
+        hd.image("/assets/kitten.jpg", slot=card.image)
+        with hd.box(gap=0.5):
+            hd.text("Mittens", font_weight="bold")
+            hd.text("Bring this kitten home.", font_size="small")
+            hd.text("6 weeks old", font_color="neutral-400", font_size="x-small")
+    ```
+
+    ### Header
+
+    ```py
+    with hd.card() as card:
+        with hd.hbox(slot=card.header, justify="space-between", align="center"):
+            hd.text("Settings")
+            hd.icon_button("gear")
+        hd.text("This card has a header.")
+    ```
+
+    ### Footer
+
+    ```py
+    with hd.card() as card:
+        hd.text("This card has a footer.")
+        hd.button("Learn more", variant="primary", pill=True, slot=card.footer)
+    ```
+
+    """
+
+    _name = "card"
+    _tag = "sl-card"
+
+    # The card's border color.
+    card_border_color = Prop(CSSField("--border-color", Color))
+    # The card's border radius.
+    card_border_radius = Prop(
+        CSSField(
+            "--border-radius",
+            Union(
+                DesignToken(tokens.BorderRadius),
+                BoxSize,
+            ),
+        )
+    )
+    # The card's border width.
+    card_border_width = Prop(CSSField("--border-width", Size))
+    # The card's padding.
+    card_padding = Prop(CSSField("--padding", BoxSize))
+
+    header = Slot()
+    footer = Slot()
+    image = Slot()
+
+    base_style = Prop(BasePart())
+    image_style = Prop(StylePart("image"))
+    header_style = Prop(StylePart("header"))
+    body_style = Prop(StylePart("body"))
+    footer_style = Prop(StylePart("footer"))

hyperdiv/components/carousel.py

@@ -0,0 +1,119 @@
+from ..prop_types import Bool, Int, OneOf, CSSField, StringEvent, Size
+from ..prop import Prop
+from ..component_base import Component
+from ..slot import Slot
+from ..component_mixins.styled import Styled
+from .common.shoelace_types import CarouselAspectRatio
+from ..style_part import BasePart, StylePart
+from .carousel_item import carousel_item
+
+
+class carousel(Component, Styled):
+    """A carousel component that groups a set of
+    @component(carousel_item) containers, which can contain arbitrary
+    content. You can flip between the carousel items by interacting
+    with the navigation controls.
+
+    ```py
+    with hd.carousel() as carousel:
+        with hd.carousel_item() as it1:
+            hd.text("1")
+        with hd.carousel_item() as it2:
+            hd.text("2")
+        with hd.carousel_item() as it3:
+            hd.text("3")
+        with hd.carousel_item() as it4:
+            hd.text("4")
+    ```
+
+    You can inspect which carousel item is selected by using the
+    `selected_item` attribute.
+
+    ```py
+    with hd.carousel() as carousel:
+        with hd.carousel_item() as it1:
+            hd.text("1")
+        with hd.carousel_item() as it2:
+            hd.text("2")
+        with hd.carousel_item() as it3:
+            hd.text("3")
+        with hd.carousel_item() as it4:
+            hd.text("4")
+
+    if carousel.selected_item == it1:
+        hd.text("1")
+    if carousel.selected_item == it2:
+        hd.text("2")
+    if carousel.selected_item == it3:
+        hd.text("3")
+    if carousel.selected_item == it4:
+        hd.text("4")
+    ```
+
+    """
+
+    _name = "carousel"
+    _tag = "sl-carousel"
+
+    # Whether to loop continuously when `autoplay` is `True`.
+    loop = Prop(Bool, False)
+    # Whether to render the left and right navigation buttons.
+    navigation = Prop(Bool, True)
+    # Whether to render the pagination buttons at the bottom of the
+    # carousel.
+    pagination = Prop(Bool, True)
+    # Whether to flip between the carousel items automatically.
+    autoplay = Prop(Bool, False)
+    # How long to wait (in milliseconds) before going to the next item
+    # in the carousel, when `autoplay` is set to `True`.
+    autoplay_interval = Prop(Int, 3000)
+    # How many slides (carousel items) should be rendered per page.
+    slides_per_page = Prop(Int, 1)
+    # How many carousel items to skip when navigating.
+    slides_per_move = Prop(Int, 1)
+    # Whether the carousel items move left-right or top-bottom when
+    # navigating.
+    orientation = Prop(OneOf("horizontal", "vertical"), "horizontal")
+    # Whether the carousel can be navigated by grabbing and dragging
+    # the carousel items with the mouse.
+    mouse_dragging = Prop(Bool, False)
+    # The aspect ratio of the carousel. A string taking values like
+    # `"3/4"`, `"7/4"`, etc.
+    aspect_ratio = Prop(CarouselAspectRatio)
+    # The space between the slides.
+    slide_gap = Prop(CSSField("--slide-gap", Size))
+    # The amount of space to partially reveal the next slide.
+    scroll_hint = Prop(CSSField("--scroll-hint", Size))
+    _selected_item_key = Prop(StringEvent, "")
+
+    next_icon = Slot()
+    previous_icon = Slot()
+
+    base_style = Prop(BasePart())
+    scroll_container_style = Prop(StylePart("scroll-container"))
+    pagination_style = Prop(StylePart("pagination"))
+    pagination_item_style = Prop(StylePart("pagination-item"))
+    pagination_item_active_style = Prop(StylePart("pagination-item--active"))
+    navigation_style = Prop(StylePart("navigation"))
+    navigation_button_style = Prop(StylePart("navigation-button"))
+    navigation_button_previous_style = Prop(StylePart("navigation-button--previous"))
+    navigation_button_next_style = Prop(StylePart("navigation-button--next"))
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+        self._selected_item = None
+
+    @property
+    def selected_item(self):
+        return self._selected_item
+
+    def _collect_child(self, item):
+        super()._collect_child(item)
+
+        if not isinstance(item, carousel_item):
+            return
+
+        if (
+            not (self._selected_item_key or self._selected_item)
+        ) or item._key == self._selected_item_key:
+            self._selected_item = item

hyperdiv/components/carousel_item.py

@@ -0,0 +1,16 @@
+from ..prop import Prop
+from ..component_base import Component
+from ..component_mixins.styled import Styled
+from .common.shoelace_types import CarouselAspectRatio
+
+
+# TODO: carousel_item doesn't respond to style props
+class carousel_item(Component, Styled):
+    """
+    To be used with @component(carousel).
+    """
+
+    _name = "carousel_item"
+    _tag = "sl-carousel-item"
+
+    aspect_ratio = Prop(CarouselAspectRatio)

hyperdiv/components/charts/__init__.py

@@ -0,0 +1,9 @@
+from .chart import chart
+from .cartesian_chart import cartesian_chart
+from .line_chart import line_chart
+from .bar_chart import bar_chart
+from .scatter_chart import scatter_chart
+from .bubble_chart import bubble_chart
+from .pie_chart import pie_chart
+from .polar_chart import polar_chart
+from .radar_chart import radar_chart

hyperdiv/components/charts/bar_chart.py

@@ -0,0 +1,43 @@
+from .cartesian_chart import cartesian_chart
+
+
+def bar_chart(
+    *datasets,
+    labels=None,
+    colors=None,
+    grid_color="neutral-100",
+    x_axis="linear",
+    y_axis="linear",
+    hide_legend=False,
+    show_x_tick_labels=True,
+    show_y_tick_labels=True,
+    y_min=None,
+    y_max=None,
+    **kwargs,
+):
+    """
+    A @component(cartesian_chart) that renders datasets as bars.
+
+    ```py
+    hd.bar_chart(
+        (1, 18, 4),
+        (4, 2, 28),
+        labels=("Jim", "Mary")
+    )
+    ```
+    """
+    return cartesian_chart(
+        "bar",
+        *datasets,
+        labels=labels,
+        colors=colors,
+        grid_color=grid_color,
+        x_axis=x_axis,
+        y_axis=y_axis,
+        hide_legend=hide_legend,
+        show_x_tick_labels=show_x_tick_labels,
+        show_y_tick_labels=show_y_tick_labels,
+        y_min=y_min,
+        y_max=y_max,
+        **kwargs,
+    )

hyperdiv/components/charts/bubble_chart.py

@@ -0,0 +1,73 @@
+from .cartesian_chart import cartesian_chart
+
+
+def bubble_chart(
+    *datasets,
+    labels=None,
+    colors=None,
+    grid_color="neutral-100",
+    x_axis="linear",
+    y_axis="linear",
+    hide_legend=False,
+    show_x_tick_labels=True,
+    show_y_tick_labels=True,
+    y_min=None,
+    y_max=None,
+    **kwargs,
+):
+    """
+    A @component(cartesian_chart) that renders datasets as bubble
+    points. It works like @component(scatter_chart), but you can
+    specify the visual size of the points by providing an extra `r`
+    component for each point, which specifies the radius of the
+    bubble in pixels.
+
+    ```py
+    hd.bubble_chart(
+        ((1, 8), (8, 20), (3, 12)),
+        ((10, 7), (5, 30), (10, 12)),
+        labels=("Jim", "Mary")
+    )
+    ```
+
+    In this dataset specification, each point is specified as `(y, r)`
+    where `y` is the `y`-value and `r` is the size of the bubble, in
+    pixels. The `x` is automatically inferred as `1`, `2`, `3`, ...,
+    on the linear axis, since it is not specified. You can specify the
+    `x` in each point, too, by passing 3-tuples, each specifying `(x, y, r)`.
+
+    ```py
+    hd.bubble_chart(
+        ((0, 1, 8), (3, 8, 20), (7, 3, 12)),
+        ((2, 10, 7), (8, 5, 30), (21, 10, 12)),
+        labels=("Jim", "Mary")
+    )
+    ```
+
+    Bubble points can be specified in the following ways:
+
+    * A 2-tuple, specifying `(y, r)`. In this case, `x` is inferred
+      from the `x_axis` argument, like above.
+
+    * A 3-tuple, representing `(x, y, r)`.
+
+    * A dict, like `dict(x=1, y=2, r=10)`. Equivalent to the above,
+      but in dict form.
+
+    See @component(cartesian_chart) for more.
+    """
+    return cartesian_chart(
+        "bubble",
+        *datasets,
+        labels=labels,
+        colors=colors,
+        grid_color=grid_color,
+        x_axis=x_axis,
+        y_axis=y_axis,
+        hide_legend=hide_legend,
+        show_x_tick_labels=show_x_tick_labels,
+        show_y_tick_labels=show_y_tick_labels,
+        y_min=y_min,
+        y_max=y_max,
+        **kwargs,
+    )